feat: responsive design (#31)

Author: dmtrKovalenko

package.json

@@ -18,6 +18,7 @@
     "@heroicons/react": "^2.1.4",
     "@huggingface/transformers": "^3.0.1",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-slider": "^1.3.6",
     "@react-input/mask": "^1.2.5",

src/LolApp.tsx

@@ -7,7 +7,6 @@ import Constants from "./transcriber/Constants";
 import { Spinner } from "./ui/Spinner";
 import { LandingDropzone } from "./screens/LandingDropzone";
 import { Progress } from "./ui/Progress";
-import { Editor } from "./screens/editor/Editor.gen";
 import { makeEditorContextComponent } from "./screens/editor/EditorContext.gen";
 import { Transition } from "@headlessui/react";
 import type {
@@ -24,6 +23,7 @@ import { ShowErrorContext, UserFacingError } from "./ErrorBoundary";
 import { log } from "./hooks/useAnalytics";
 import HeartIcon from "@heroicons/react/20/solid/HeartIcon";
 import { ProductHuntIcon } from "./ui/Icons.res.mjs";
+import { Editor } from "./screens/editor/Editor.gen";
 
 type VideoFile = {
   name: string;
@@ -339,12 +339,14 @@ export default function LolApp() {
             videoCodec: validVideoCodec,
             audioCodec: validAudioCodec,
             // Pass word animation data if word animation is enabled
-            wordAnimationData: style.showWordAnimation && subtitlesManager.transcriptionState !== "TranscriptionInProgress"
-              ? {
-                  wordChunks: subtitlesManager.transcriptionState.wordChunks,
-                  cueRanges: subtitlesManager.transcriptionState.cueRanges,
-                }
-              : undefined,
+            wordAnimationData:
+              style.showWordAnimation &&
+              subtitlesManager.transcriptionState !== "TranscriptionInProgress"
+                ? {
+                    wordChunks: subtitlesManager.transcriptionState.wordChunks,
+                    cueRanges: subtitlesManager.transcriptionState.cueRanges,
+                  }
+                : undefined,
           },
         } as RenderWorkerMessage,
         [offscreenCanvas],
@@ -502,7 +504,7 @@ export default function LolApp() {
 
   if (file && !transcriber.output) {
     return (
-      <div className="container mx-auto flex items-center justify-center pt-[25%] flex-col">
+      <div className="container mx-auto flex items-center justify-center px-4 flex-col h-dvh md:h-screen">
         <svg
           className="absolute inset-0 -z-10 h-full w-full stroke-white/10 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)]"
           aria-hidden="true"
@@ -533,14 +535,19 @@ export default function LolApp() {
           />
         </svg>
 
-        <div className="flex items-center justify-center gap-4">
-          <Spinner sizeRem={3} />
-          <h1 className="text-5xl">{status}</h1>
+        <div className="flex flex-col md:flex-row items-center justify-center gap-3 md:gap-4">
+          <div className="md:hidden">
+            <Spinner sizeRem={2} />
+          </div>
+          <div className="hidden md:block">
+            <Spinner sizeRem={3} />
+          </div>
+          <h1 className="text-2xl md:text-5xl text-center">{status}</h1>
         </div>
-        <p className="text-center text-balance text-gray-400 mt-4">
+        <p className="text-center text-balance text-gray-400 text-sm md:text-base mt-4 px-2">
           {description}
         </p>
-        <div className="w-full flex flex-col gap-y-2 mt-12 max-w-[34rem]">
+        <div className="w-full flex flex-col gap-y-2 mt-8 md:mt-12 max-w-[34rem] px-4">
           {progressItems
             ? progressItems.map((item) => (
                 <Progress
@@ -592,23 +599,23 @@ export default function LolApp() {
       <Transition show={renderState !== "idle"}>
         <div
           className={clsx(
-            "transition flex-col absolute z-[60] w-screen h-screen bg-white/10 backdrop-blur-xl inset-0 duration-300 ease-in data-[closed]:opacity-0 flex items-center justify-center",
+            "transition flex-col absolute z-[60] w-screen h-dvh md:h-screen bg-white/10 backdrop-blur-xl inset-0 duration-300 ease-in data-[closed]:opacity-0 flex items-center justify-center px-4",
             renderState === "done" && "!bg-green-600/10 !backdrop-blur-2xl",
             renderState === "error" && "!bg-red-600/10 !backdrop-blur-2xl",
           )}
         >
           {renderState === "rendering" && (
             <>
-              <h2 className="text-5xl tracking-wide font-bold">
+              <h2 className="text-2xl md:text-5xl text-center tracking-wide font-bold">
                 Rendering your video
               </h2>
-              <p className="text-gray-300 text-balance text-center text-lg max-w-screen-sm mt-4">
+              <p className="text-gray-300 text-balance text-center text-sm md:text-lg max-w-screen-sm mt-4">
                 In a moment you'll get your video with subtitles created at the
                 selected location. Feel free to move to the other tab, the
                 render will continue in the background.
               </p>
 
-              <div className="w-full flex flex-col gap-y-2 mt-8 max-w-[34rem]">
+              <div className="w-full flex flex-col gap-y-2 mt-6 md:mt-8 max-w-[34rem]">
                 {progressItems
                   ? progressItems.map((item) => (
                       <Progress
@@ -624,13 +631,13 @@ export default function LolApp() {
 
           {renderState === "error" && (
             <>
-              <h2 className="text-5xl tracking-wide font-bold text-red-400">
+              <h2 className="text-2xl md:text-5xl text-center tracking-wide font-bold text-red-400">
                 Rendering Failed
               </h2>
-              <p className="text-gray-200 text-balance text-center max-w-screen-sm text-lg mt-4">
+              <p className="text-gray-200 text-balance text-center max-w-screen-sm text-sm md:text-lg mt-4">
                 {renderError || "An unknown error occurred during rendering."}
               </p>
-              <p className="text-gray-400 text-balance text-center max-w-screen-md text-sm mt-2">
+              <p className="text-gray-400 text-balance text-center max-w-screen-md text-xs md:text-sm mt-2">
                 Try selecting a different video codec or format. Some codec
                 combinations may not be supported by your browser.
               </p>
@@ -646,10 +653,10 @@ export default function LolApp() {
 
           {renderState === "done" && (
             <>
-              <h2 className="text-5xl tracking-wide font-bold">
+              <h2 className="text-2xl md:text-5xl text-center tracking-wide font-bold">
                 Video Rendered!
               </h2>
-              <p className="text-gray-200 text-balance text-center max-w-screen-sm text-lg mt-4">
+              <p className="text-gray-200 text-balance text-center max-w-screen-sm text-sm md:text-lg mt-4">
                 You'll find your video in the location you selected a moment
                 before. Time for publishing but before you do that ... just know
                 ... your video is amazing!
@@ -659,25 +666,25 @@ export default function LolApp() {
                 <a
                   href="https://www.producthunt.com/products/fframes-subtitles/reviews/new"
                   rel="noopener noreferrer"
-                  className="mx-auto outline-none focus-visible:ring ring-orange-500 ring-offset-zinc-900 ring-offset-2 hover:bg-orange-400 transition rounded-lg gap-2 bg-orange-600 inline-flex items-center px-4 py-3 font-medium"
+                  className="mx-auto outline-none focus-visible:ring ring-orange-500 ring-offset-zinc-900 ring-offset-2 hover:bg-orange-400 transition rounded-lg gap-2 bg-orange-600 inline-flex items-center px-4 py-3 font-medium text-sm md:text-base"
                 >
-                  <ProductHuntIcon.make className="size-6 text-orange-500" />
+                  <ProductHuntIcon.make className="size-5 md:size-6 text-orange-500" />
                   Leave a Review
                 </a>
 
                 <a
                   href="https://github.com/sponsors/dmtrKovalenko"
                   rel="noopener noreferrer"
-                  className="mx-auto outline-none focus-visible:ring ring-rose-500 ring-offset-zinc-900 ring-offset-2 hover:bg-rose-400 transition rounded-lg bg-rose-600 gap-2 inline-flex items-center px-4 py-3 font-medium"
+                  className="mx-auto outline-none focus-visible:ring ring-rose-500 ring-offset-zinc-900 ring-offset-2 hover:bg-rose-400 transition rounded-lg bg-rose-600 gap-2 inline-flex items-center px-4 py-3 font-medium text-sm md:text-base"
                 >
-                  <HeartIcon className="size-6" />
+                  <HeartIcon className="size-5 md:size-6" />
                   Support Author
                 </a>
               </div>
 
               <button
                 onClick={handleBackToEditor}
-                className="mt-6 text-gray-300 hover:text-white underline underline-offset-4 transition"
+                className="mt-6 text-gray-300 hover:text-white underline underline-offset-4 transition text-sm md:text-base"
               >
                 ← Back to editor
               </button>

src/screens/LandingDropzone.tsx

@@ -40,7 +40,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
   });
 
   return (
-    <div className="p-4 flex flex-col w-screen h-screen">
+    <div className="p-2 md:p-4 flex flex-col w-screen h-dvh md:h-screen">
       <div
         {...getRootProps({
           onClick: (e) => {
@@ -53,7 +53,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
           },
         })}
         className={clsx(
-          "mt-1 relative isolate flex-1 flex items-center flex-col w-full h-full justify-center rounded-2xl border-2 border-dashed p-6 border-gray-500 transition-colors focus:border-accent-500 focus:outline-none active:border-orange-400 focus:border-orange-400",
+          "mt-1 relative isolate flex-1 flex items-center flex-col w-full h-full justify-center rounded-2xl border-2 border-dashed p-4 md:p-6 border-gray-500 transition-colors focus:border-accent-500 focus:outline-none active:border-orange-400 focus:border-orange-400",
           {
             "border-red-400": isDragReject,
             "border-blue-400": isDragActive,
@@ -93,24 +93,24 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
         </svg>
         {fileRejections.length > 0 && (
           <div className="mb-4 bg-red-200 px-4 py-2 shadow-red-400 shadow rounded-2xl">
-            <p className="text-red-500 font-medium text-lg">
+            <p className="text-red-500 font-medium text-base md:text-lg">
               Please upload a valid video file
             </p>
           </div>
         )}
-        <div className="container flex-1 flex flex-col items-center justify-center">
-          <h1 className="text-2xl text-center font-bold tracking-tight sm:text-6xl">
+        <div className="container flex-1 flex flex-col items-center justify-center px-2 md:px-0">
+          <h1 className="text-4xl text-center font-bold tracking-tight md:text-6xl">
             Free no-signup <span className="sr-only">automatic</span> AI{" "}
             <SubtitlesStrikethrough>captions</SubtitlesStrikethrough> generator
           </h1>
-          <p className="mx-16 text-center text-balance mt-4 text-gray-400 text-xl">
+          <p className="mx-0 md:mx-16 text-center text-balance mt-8 md:mt-4 text-gray-400 text-base md:text-xl">
             Upload a video to get the automatic transcription or translation and
             get your subtitles rendered back into the video file in just a few
             clicks completely for free with no signup required. Everything on
             this website is done entirely in your browser, ensuring that{" "}
             <strong>nothing is sent to the server</strong>.
           </p>
-          <div className="mt-8 flex gap-6 justify-between mx-auto max-w-[34rem]">
+          <div className="mt-6 md:mt-8 flex flex-col md:flex-row gap-3 md:gap-6 w-full md:w-auto md:justify-between mx-auto max-w-[34rem]">
             <Combobox
               options={ALL_LANGUAGES}
               selected={language}
@@ -146,28 +146,28 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             />
             <button
               onClick={open}
-              className="mx-auto outline-none focus-visible:ring ring-orange-500 ring-offset-zinc-900 ring-offset-2 rounded-lg bg-orange-600 inline-flex items-center px-6 font-medium"
+              className="mx-auto md:mx-0 w-full md:w-auto outline-none focus-visible:ring ring-orange-500 ring-offset-zinc-900 ring-offset-2 rounded-lg bg-orange-600 inline-flex items-center justify-center px-6 py-3 md:py-0 font-medium"
             >
               Let's go!
             </button>
           </div>
           {!window.showSaveFilePicker && (
             <div
               aria-hidden
-              className="rounded-xl max-w-2xl mt-8 bg-amber-100 p-4"
+              className="rounded-xl max-w-2xl mt-6 md:mt-8 bg-amber-100 p-3 md:p-4 mx-2 md:mx-0"
             >
               <div className="flex">
-                <div className="flex-shrink-0">
+                <div className="shrink-0">
                   <ExclamationTriangleIcon
                     aria-hidden="true"
-                    className="size-6 text-amber-500"
+                    className="size-5 md:size-6 text-amber-500"
                   />
                 </div>
                 <div className="ml-3">
-                  <h3 className="font-medium text-yellow-800">
+                  <h3 className="text-sm md:text-base font-medium text-yellow-800">
                     Large file attention
                   </h3>
-                  <div className="mt-1 text-sm text-yellow-700">
+                  <div className="mt-1 text-xs md:text-sm text-yellow-700">
                     <p>
                       Your browser does not support{" "}
                       <a
@@ -189,7 +189,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             </div>
           )}
         </div>
-        <div className="mt-auto flex gap-6">
+        <div className="mt-auto flex gap-6 py-2">
           <a
             target="_blank"
             rel="noopener noreferrer"
@@ -198,7 +198,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             onClick={(e) => e.stopPropagation()}
           >
             <span className="sr-only">Producthunt</span>
-            <ProductHuntIcon.make className="size-7 text-black" />
+            <ProductHuntIcon.make className="size-6 md:size-7 text-black" />
           </a>
 
           <a
@@ -209,7 +209,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             onClick={(e) => e.stopPropagation()}
           >
             <span className="sr-only">Project sources</span>
-            <GithubIcon className="transition size-7 hover:scale-125 active:scale-90 hover:text-orange-500" />
+            <GithubIcon className="transition size-6 md:size-7 hover:scale-125 active:scale-90 hover:text-orange-500" />
           </a>
           <a
             target="_blank"
@@ -219,7 +219,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             onClick={(e) => e.stopPropagation()}
           >
             <span className="sr-only">Follow on twitter</span>
-            <TwitterIcon className="transition size-7 hover:scale-125 active:scale-90 hover:text-orange-500" />
+            <TwitterIcon className="transition size-6 md:size-7 hover:scale-125 active:scale-90 hover:text-orange-500" />
           </a>
           <a
             target="_blank"
@@ -231,7 +231,7 @@ export const LandingDropzone: React.FC<LandingDropzoneProps> = ({
             <span className="sr-only">Support this project developlment</span>
             <HeartIcon
               aria-hidden
-              className="transition size-7 hover:scale-125 active:scale-90 hover:text-orange-500"
+              className="transition size-6 md:size-7 hover:scale-125 active:scale-90 hover:text-orange-500"
             />
           </a>
         </div>

src/screens/editor/ChunksList/ChunkEditor.res

@@ -125,7 +125,7 @@ let make = React.memo((
           el =>
             el->Webapi.Dom.Element.scrollIntoViewWithOptions({
               "behavior": "smooth",
-              "block": "start",
+              "block": "nearest",
             }),
         )
       }

src/screens/editor/ChunksList/ChunkEditor.res.mjs

@@ -430,7 +430,8 @@ let make = React.memo((~subtitlesManager, ~title: React.element) => {
   let (player, _) = ctx.usePlayer()
 
   <>
-    <div className="sticky top-0 z-10 px-2 bg-zinc-900 flex flex-col w-full">
+    <div
+      className="sticky -top-px z-10 py-2 flex flex-col w-full bg-zinc-950 md:bg-zinc-900/95 md:backdrop-blur-sm border-b border-zinc-800/50">
       <h2 className="mx-auto text-xl pb-2"> {title} </h2>
       {switch subtitlesManager.transcriptionState {
       | SubtitlesReady({size}) =>