diff --git a/src/components/player/kinescope-player.tsx b/src/components/player/kinescope-player.tsx index 211fc7e..a3c2ed3 100644 --- a/src/components/player/kinescope-player.tsx +++ b/src/components/player/kinescope-player.tsx @@ -1,6 +1,6 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import KinescopeReactPlayer from "@kinescope/react-kinescope-player"; interface Props { @@ -10,18 +10,57 @@ interface Props { export function KinescopePlayer({ videoId, poster }: Props) { const [mounted, setMounted] = useState(false); + const [showOverlay, setShowOverlay] = useState(!!poster); + const playerRef = useRef(null); + useEffect(() => setMounted(true), []); + function handleOverlayClick() { + setShowOverlay(false); + playerRef.current?.play(); + } + return ( -
+
{mounted && ( )} + + {showOverlay && poster && ( +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + +
+
+ + + +
+
+
+ )}
); }