admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

create more meaningful thumbnails

Browse source
This commit is contained in:
MarconLP 2023-08-12 13:47:17 +02:00
parent 20fef9d176
commit e2ec7d12b8
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
3 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Recorder.tsx
View file

@ -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;

11
src/components/VideoUploadModal.tsx
View file

@ -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);

18
src/utils/generateThumbnail.ts Normal file
View file

@ -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));
}