ui and ux during video recording steps

src/components/Recorder.tsx

@@ -12,7 +12,19 @@ import { useRouter } from "next/router";
 import { api } from "~/utils/api";
 import fixWebmDuration from "fix-webm-duration";
 
-export default function Recorder() {
+interface Props {
+  closeModal: () => void;
+  step: string;
+  setStep: (
+    value:
+      | ((prevState: "pre" | "in" | "post") => "pre" | "in" | "post")
+      | "pre"
+      | "in"
+      | "post"
+  ) => void;
+}
+
+export default function Recorder({ closeModal, step, setStep }: Props) {
   const [steam, setStream] = useState<null | MediaStream>(null);
   const [blob, setBlob] = useState<null | Blob>(null);
   const refVideo = useRef<null | HTMLVideoElement>(null);
@@ -22,7 +34,6 @@ export default function Recorder() {
   const [selectedDevice, setSelectedDevice] = useState<MediaDeviceInfo | null>(
     null
   );
-  const [step, setStep] = useState<"pre" | "in" | "post">("pre");
   const router = useRouter();
   const [submitting, setSubmitting] = useState<boolean>(false);
   const apiUtils = api.useContext();
@@ -84,6 +95,9 @@ export default function Recorder() {
     recorderRef.current.stopRecording(() => {
       steam?.getTracks().map((track) => track.stop());
     });
+
+    closeModal();
+    setStep("pre");
   };
 
   const handlePause = () => {
@@ -262,7 +276,7 @@ export default function Recorder() {
               controls
               autoPlay
               ref={refVideo}
-              style={{ width: "700px", margin: "1em" }}
+              className="mb-4 w-[75vw]"
             />
           )}
           <div className="flex items-center justify-center">
@@ -307,6 +321,13 @@ export default function Recorder() {
                 <>Upload</>
               )}
             </button>
+            <button
+              type="button"
+              className="ml-auto inline-flex items-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
+              onClick={() => void closeModal()}
+            >
+              Close
+            </button>
           </div>
         </div>
       ) : null}

src/components/VideoRecordModal.tsx

@@ -0,0 +1,58 @@
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
+const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
+import dynamic from "next/dynamic";
+
+export default function VideoRecordModal() {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [step, setStep] = useState<"pre" | "in" | "post">("pre");
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  const handleClose = () => {
+    if (step === "pre") closeModal();
+  };
+
+  return (
+    <>
+      <span
+        onClick={openModal}
+        className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
+      >
+        New video
+      </span>
+
+      <Transition appear show={isOpen} as={Fragment}>
+        <Dialog as="div" className="relative z-10" onClose={handleClose}>
+          <div className="fixed inset-0 overflow-y-auto">
+            <div className="flex min-h-full items-center justify-center p-4 text-center">
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0 scale-95"
+                enterTo="opacity-100 scale-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100 scale-100"
+                leaveTo="opacity-0 scale-95"
+              >
+                <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
+                  <Recorder
+                    closeModal={closeModal}
+                    step={step}
+                    setStep={setStep}
+                  />
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
+          </div>
+        </Dialog>
+      </Transition>
+    </>
+  );
+}

src/components/VideoUploadModal.tsx

@@ -3,8 +3,6 @@ import { Dialog, Transition } from "@headlessui/react";
 import { api } from "~/utils/api";
 import axios from "axios";
 import { useRouter } from "next/router";
-const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
-import dynamic from "next/dynamic";
 
 export default function VideoUploadModal() {
   const router = useRouter();
@@ -74,10 +72,7 @@ export default function VideoUploadModal() {
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className="w-full max-w-md transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
+                <Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
-                  {1 + 1 === 2 ? (
-                    <Recorder />
-                  ) : (
                   <div className="flex flex-col items-center gap-2">
                     <label className="flex h-32 w-full min-w-[300px] cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-gray-300 px-4 transition hover:border-gray-400 focus:outline-none">
                       <span className="flex items-center space-x-2 text-[#292D34]">
@@ -148,7 +143,6 @@ export default function VideoUploadModal() {
                       )}
                     </button>
                   </div>
-                  )}
                 </Dialog.Panel>
               </Transition.Child>
             </div>

src/pages/videos.tsx

@@ -6,10 +6,10 @@ import Link from "next/link";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import Image from "next/image";
-import VideoUploadModal from "~/components/VideoUploadModal";
 import { getTime } from "~/utils/getTime";
 import Checkout from "~/components/Checkout";
 import ProfileMenu from "~/components/ProfileMenu";
+import VideoRecordModal from "~/components/VideoRecordModal";
 
 const VideoList: NextPage = () => {
   const router = useRouter();
@@ -34,7 +34,7 @@ const VideoList: NextPage = () => {
             {["active", "past_due"].includes(
               session?.user.stripeSubscriptionStatus ?? ""
             ) ? (
-              <VideoUploadModal />
+              <VideoRecordModal />
             ) : null}
             {status === "authenticated" && (
               <div className="ml-4 flex items-center justify-center">