Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | 1x 1x 4x 4x 4x 2x 2x 4x 4x 4x 4x 4x | "use client";
import { type VideoProps } from "@/types";
import dynamic from "next/dynamic";
const ReactVideoPlayer = dynamic(
() => import("@/components/custom/react-player"),
{
ssr: false,
}
);
function generateYouTubeUrl(data: {
video: { videoId: string; start?: string; end?: string };
}) {
const baseUrl = new URL("https://www.youtube.com/watch");
baseUrl.searchParams.append("v", data.video.videoId);
if (data.video.start ?? data.video.end) {
baseUrl.searchParams.append("start", data.video.start ?? "0");
baseUrl.searchParams.append("end", data.video.end ?? "0");
}
return baseUrl.href;
}
export function Video(data: Readonly<VideoProps>) {
console.dir(data, { depth: null });
Iif (!data) return null;
const videoUrl = generateYouTubeUrl({
video: {
videoId: data.video.videoId,
start: data.video.start,
end: data.video.end,
},
});
return (
<div className="relative aspect-video rounded-md overflow-hidden">
<ReactVideoPlayer videoUrl={videoUrl} />
</div>
);
}
|