migrate recording tab to new media player

Author: MarconLP

src/components/Recorder.tsx

@@ -18,6 +18,7 @@ import { usePostHog } from "posthog-js/react";
 import Tooltip from "~/components/Tooltip";
 import generateThumbnail from "~/utils/generateThumbnail";
 import * as EBML from "ts-ebml";
+import VideoPlayer from "~/components/VideoPlayer";
 
 interface Props {
   closeModal: () => void;
@@ -200,7 +201,7 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
   const handleSave = () => {
     if (blob) {
       const dateString =
-        "Recording - " + dayjs().format("D MMM YYYY") + ".webm";
+        "Snapify Recording - " + dayjs().format("D MMM YYYY") + ".webm";
       invokeSaveAsDialog(blob, dateString);
     }
 
@@ -210,7 +211,8 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
   const handleUpload = async () => {
     if (!blob || !videoRef.current) return;
 
-    const dateString = "Recording - " + dayjs().format("D MMM YYYY") + ".webm";
+    const dateString =
+      "Snapify Recording - " + dayjs().format("D MMM YYYY") + ".webm";
     setSubmitting(true);
 
     try {
@@ -390,15 +392,14 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
       {step === "post" ? (
         <div>
           {blob ? (
-            <video
-              src={URL.createObjectURL(blob)}
-              controls
-              onPlay={() => posthog?.capture("recorder: played preview video")}
-              onPause={() => posthog?.capture("recorder: paused preview video")}
-              ref={videoRef}
-              className="mb-4 max-h-[75vh] w-[75vw]"
-              controlsList="nodownload"
-            />
+            <div className="mb-3 aspect-video max-h-[75vh] max-w-[75vw]">
+              <VideoPlayer video_url={URL.createObjectURL(blob)} />
+              <video
+                src={URL.createObjectURL(blob)}
+                ref={videoRef}
+                className="absolute hidden"
+              />
+            </div>
           ) : null}
           <div className="flex items-center justify-center">
             <button

src/components/VideoLayout.tsx

@@ -17,9 +17,9 @@ export function VideoLayout({ thumbnails }: VideoLayoutProps) {
     <>
       <Gestures />
       <Controls.Root
-        hideDelay={50}
+        hideDelay={500}
         hideOnMouseLeave={true}
-        className="absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity duration-300 media-controls:opacity-100"
+        className="absolute inset-0 z-10 flex h-full w-full flex-col bg-gradient-to-t from-black/10 to-transparent opacity-0 transition-opacity duration-300 media-controls:opacity-100 media-paused:opacity-100"
       >
         <Tooltip.Provider>
           <div className="flex-1" />

src/components/VideoPlayer.tsx

@@ -18,7 +18,7 @@ import { VideoLayout } from "./VideoLayout";
 
 interface Props {
   video_url: string;
-  thumbnailUrl: string;
+  thumbnailUrl?: string;
 }
 
 export default function VideoPlayer({ video_url, thumbnailUrl }: Props) {
@@ -68,11 +68,13 @@ export default function VideoPlayer({ video_url, thumbnailUrl }: Props) {
       keyTarget="document"
     >
       <MediaProvider>
-        <Poster
-          className="absolute inset-0 block h-full w-full rounded-md object-cover opacity-0 transition-opacity data-[visible]:opacity-100"
-          src={thumbnailUrl}
-          alt="Girl walks into campfire with gnomes surrounding her friend ready for their next meal!"
-        />
+        {thumbnailUrl ? (
+          <Poster
+            className="absolute inset-0 block h-full w-full rounded-md object-cover opacity-0 transition-opacity data-[visible]:opacity-100"
+            src={thumbnailUrl}
+            alt="video thumbnail"
+          />
+        ) : null}
       </MediaProvider>
 
       <VideoLayout />

src/pages/share/[videoId].tsx

@@ -138,38 +138,6 @@ const VideoList: NextPage = () => {
                   thumbnailUrl={video.thumbnailUrl}
                   video_url={video.video_url}
                 />
-                {/*<video*/}
-                {/*  controls*/}
-                {/*  onPlay={() =>*/}
-                {/*    posthog?.capture("play video", {*/}
-                {/*      videoId: video.id,*/}
-                {/*      videoCreatedAt: video.createdAt,*/}
-                {/*      videoUpdatedAt: video.updatedAt,*/}
-                {/*      videoUser: video.user.id,*/}
-                {/*      videoSharing: video.sharing,*/}
-                {/*      videoDeleteAfterLinkExpires:*/}
-                {/*        video.delete_after_link_expires,*/}
-                {/*      videoShareLinkExpiresAt: video.shareLinkExpiresAt,*/}
-                {/*    })*/}
-                {/*  }*/}
-                {/*  onPause={() =>*/}
-                {/*    posthog?.capture("pause video", {*/}
-                {/*      videoId: video.id,*/}
-                {/*      videoCreatedAt: video.createdAt,*/}
-                {/*      videoUpdatedAt: video.updatedAt,*/}
-                {/*      videoUser: video.user.id,*/}
-                {/*      videoSharing: video.sharing,*/}
-                {/*      videoDeleteAfterLinkExpires:*/}
-                {/*        video.delete_after_link_expires,*/}
-                {/*      videoShareLinkExpiresAt: video.shareLinkExpiresAt,*/}
-                {/*    })*/}
-                {/*  }*/}
-                {/*  className="h-full w-full"*/}
-                {/*  controlsList="nodownload"*/}
-                {/*>*/}
-                {/*  <source src={video.video_url} />*/}
-                {/*  Your browser does not support the video tag.*/}
-                {/*</video>*/}
               </>
             )}
           </div>