From e2ec7d12b80bd4f34757e82886d3deba6019859d Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Sat, 12 Aug 2023 13:47:17 +0200
Subject: [PATCH] create more meaningful thumbnails

---
 src/components/Recorder.tsx         | 11 +----------
 src/components/VideoUploadModal.tsx | 11 +----------
 src/utils/generateThumbnail.ts      | 18 ++++++++++++++++++
 3 files changed, 20 insertions(+), 20 deletions(-)
 create mode 100644 src/utils/generateThumbnail.ts

diff --git a/src/components/Recorder.tsx b/src/components/Recorder.tsx
index d12047a..fd86c56 100644
--- a/src/components/Recorder.tsx
+++ b/src/components/Recorder.tsx
@@ -17,6 +17,7 @@ import paywallAtom from "~/atoms/paywallAtom";
 import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
 import { usePostHog } from "posthog-js/react";
 import Tooltip from "~/components/Tooltip";
+import generateThumbnail from "~/utils/generateThumbnail";
 
 interface Props {
   closeModal: () => void;
@@ -180,16 +181,6 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
     posthog?.capture("recorder: video downloaded");
   };
 
-  const generateThumbnail = async (video: HTMLVideoElement) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    canvas
-      .getContext("2d")
-      ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-    return await new Promise((resolve) => canvas.toBlob(resolve));
-  };
-
   const handleUpload = async () => {
     if (!blob || !videoRef.current) return;
 
diff --git a/src/components/VideoUploadModal.tsx b/src/components/VideoUploadModal.tsx
index fb5c826..0eb81ef 100644
--- a/src/components/VideoUploadModal.tsx
+++ b/src/components/VideoUploadModal.tsx
@@ -7,6 +7,7 @@ import { useAtom } from "jotai";
 import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen";
 import { usePostHog } from "posthog-js/react";
 import { useSession } from "next-auth/react";
+import generateThumbnail from "~/utils/generateThumbnail";
 
 export default function VideoUploadModal() {
   const [open, setOpen] = useAtom(uploadVideoModalOpen);
@@ -25,16 +26,6 @@ export default function VideoUploadModal() {
     }
   };
 
-  const generateThumbnail = async (video: HTMLVideoElement) => {
-    const canvas = document.createElement("canvas");
-    canvas.width = video.videoWidth;
-    canvas.height = video.videoHeight;
-    canvas
-      .getContext("2d")
-      ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-    return await new Promise((resolve) => canvas.toBlob(resolve));
-  };
-
   function closeModal() {
     setOpen(false);
 
diff --git a/src/utils/generateThumbnail.ts b/src/utils/generateThumbnail.ts
new file mode 100644
index 0000000..95ee302
--- /dev/null
+++ b/src/utils/generateThumbnail.ts
@@ -0,0 +1,18 @@
+export default async function generateThumbnail(video: HTMLVideoElement) {
+  console.log(video.duration);
+  const seekedPromise = new Promise<void>((resolve) => {
+    video.addEventListener("seeked", () => {
+      resolve();
+    });
+  });
+
+  video.currentTime = video.duration / 2;
+
+  await seekedPromise;
+
+  const canvas = document.createElement("canvas");
+  canvas.width = video.videoWidth;
+  canvas.height = video.videoHeight;
+  canvas.getContext("2d")?.drawImage(video, 0, 0, canvas.width, canvas.height);
+  return await new Promise((resolve) => canvas.toBlob(resolve));
+}