watch: added fullscreen support, added loading bar

8 months ago · 8632980212
parent c29052ca61
commit 8632980212
4 changed files with 129 additions and 85 deletions
--- a/package.json
+++ b/package.json
@ -25,6 +25,7 @@
 		"react-player": "^2.15.1",
 		"reactjs-visibility": "^0.1.4",
 		"sanitize-html": "^2.13.0",
+		"screenfull": "^6.0.2",
 		"use-debounce": "^10.0.0",
 		"zod": "^3.22.4",
 		"zustand": "^4.5.2"
--- a/src/app/watch/Player/index.tsx
+++ b/src/app/watch/Player/index.tsx
@ -1,5 +1,6 @@
 "use client";

+import screenfull from "screenfull";
 import { useDebounce } from "use-debounce";

 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@ -8,7 +9,6 @@ import {
 	FiMinimize as MinimizeIcon,
 	FiVolumeX as MutedIcon,
 	FiPause as PauseIcon,
-	FiFastForward as PlaybackRateIcon,
 	FiPlay as PlayIcon,
 	FiVolume as VolumeIcon,
 	FiVolume1 as VolumeIcon1,
@ -33,9 +33,12 @@ import { Component } from "@/typings/component";
 export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
 	const stream = streams.find((stream) => stream.type === StreamType.Hls);

-	const player = useRef<ReactPlayer>(null);
+	const playerRef = useRef<ReactPlayer>(null);
+
+	const videoPlayerId = "video-player";

 	const [progress, setProgress] = useState(0);
+	const [loaded, setLoaded] = useState(0);
 	const [duration, setDuration] = useState(0);
 	const [maximized, setMaximized] = useState(false);
 	const [volume, setVolume] = useState(40);
@ -44,11 +47,9 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {

 	const [userSetProgress, setUserSetProgress] = useState(0);

-	const [seek] = useDebounce(userSetProgress, 100);
-
 	useEffect(() => {
-		player.current?.seekTo(seek);
-	}, [seek]);
+		playerRef.current?.seekTo(userSetProgress);
+	}, [userSetProgress]);

 	const volumeIcons = useMemo(
 		() => [
@ -60,43 +61,77 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
 	);

 	const playbackRateCategories = useMemo(
-		() => [
-			{ key: 0.25, label: "0.25" },
-			{ key: 0.5, label: "0.5" },
-			{ key: 1, label: "1.0" },
-			{ key: 1.25, label: "1.25" },
-			{ key: 1.5, label: "1.5" },
-			{ key: 2, label: "2.0" }
-		],
+		() =>
+			[0.25, 0.5, 1, 1.25, 1.5, 2].map((speed) => ({
+				key: speed,
+				label: speed.toString()
+			})),
 		[]
 	);

-	const handleBuffering = useCallback(() => {}, []);
+	const updateMaximized = useCallback(() => {
+		setMaximized(screenfull.isFullscreen);
+	}, [setMaximized]);
+
+	useEffect(() => {
+		if (screenfull.isEnabled) {
+			screenfull.on("change", updateMaximized);
+		}
+
+		return () => screenfull.off("change", updateMaximized);
+	}, [updateMaximized]);
+
+	useEffect(() => {
+		if (screenfull.isEnabled) {
+			const playerElement = document.getElementById(videoPlayerId) ?? undefined;
+
+			if (maximized) screenfull.request(playerElement);
+			else screenfull.exit();
+		}
+	}, [maximized]);

 	return (
 		<>
-			{stream && (
 			<div className="relative" style={{ paddingTop: `${100 / (16 / 9)}%` }}>
+				<div id={videoPlayerId}>
+					<div className="flex flex-col w-full h-full absolute bottom-0 z-10 transition-opacity ease-in duration-[2000ms] opacity-0 hover:opacity-100">
+						<div
+							className="flex-1"
+							onClick={() => setPlaying((state) => !state)}
+						></div>
 						<div
-						className="w-full absolute bottom-0 z-10 pb-2 px-4"
+							className="flex flex-col gap-1 pb-2 px-4"
 							style={{
 								background:
 									"linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)"
 							}}
 						>
-						<div className="flex flex-col gap-1">
+							<div
+								className="relative flex items-center"
+								style={{ height: "24px" }}
+							>
 								<Slider
 									aria-label="Video progress bar"
+									className="w-full cursor-pointer absolute bottom-0 z-20"
 									step={0.1}
 									onChange={(value) => {
 										if (typeof value === "number") {
-										setUserSetProgress(value / 100);
 											setProgress(value / 100);
 										}
 									}}
-								className="cursor-pointer"
+									onChangeEnd={(value) => {
+										if (typeof value === "number") {
+											setUserSetProgress(value / 100);
+										}
+									}}
 									value={progress * 100}
 								/>
+								<div
+									className="h-3 bg-default-600/50 z-10 rounded-lg"
+									style={{ width: `${loaded * 100}%` }}
+								/>
+							</div>
+
 							<div className="flex flex-row items-center gap-4">
 								<div className="flex flex-1 flex-row gap-2 items-center">
 									<Button
@ -110,17 +145,14 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {

 									<Dropdown>
 										<DropdownTrigger>
-											<Button
-												variant="light"
-												isIconOnly
-												className="text-xl"
-												onClick={() => setMaximized((state) => !state)}
-											>
-												{
+											<Button variant="light" isIconOnly className="text-xl">
+												{volume === 0 ? (
+													<MutedIcon />
+												) : (
 													volumeIcons[
 														Math.floor((volume / 100) * volumeIcons.length)
 													]
-												}
+												)}
 											</Button>
 										</DropdownTrigger>
 										<DropdownMenu aria-label="Volume menu">
@ -181,29 +213,32 @@ export const Player: Component<{ streams: Stream[] }> = ({ streams }) => {
 						</div>
 					</div>

+					{stream && (
 						<ReactPlayer
 							playing={playing}
 							volume={volume / 100}
+							muted={volume === 0}
 							playbackRate={playbackRate}
-						ref={player}
+							ref={playerRef}
 							className="absolute top-0 left-0"
 							width="100%"
 							height="100%"
-						config={{ file: { forceHLS: true } }}
 							onPause={() => setPlaying(false)}
 							onPlay={() => setPlaying(true)}
 							onDuration={(duration) => setDuration(duration)}
-						onBuffer={handleBuffering}
-						onProgress={({ played }) => {
+							// onBuffer={({}) => {}}
+							onProgress={({ played, loaded }) => {
 								setProgress(played);
+								setLoaded(loaded);
 							}}
 							// onPlaybackQualityChange={(e: unknown) =>
 							// console.log("onPlaybackQualityChange", e)
 							// }
 							url={(stream as HlsStream).url}
 						/>
-				</div>
 					)}
+				</div>
+			</div>
 		</>
 	);
 };
--- a/src/components/Author.tsx
+++ b/src/components/Author.tsx
@ -10,13 +10,12 @@ import formatBigNumber from "@/utils/formatBigNumber";
 import { channelUrl } from "@/utils/urls";

 export const Author: FC<{ data: AuthorProps }> = ({ data }) => {
+	const url = data.id ? channelUrl(data.id) : "#";
+
 	return (
-		<Link
-			as={NextLink}
-			href={data.id ? channelUrl(data.id) : undefined}
-			className="flex flex-row gap-4 items-center"
-		>
+		<div className="flex flex-row gap-4 items-center">
 			{data.avatar && (
+				<Link as={NextLink} href={url}>
 					<Avatar
 						isBordered
 						name={data.name}
@ -25,18 +24,22 @@ export const Author: FC<{ data: AuthorProps }> = ({ data }) => {
 						src={data.avatar}
 						alt={data.name}
 					/>
+				</Link>
 			)}
 			<div className="flex flex-col">
+				<Link as={NextLink} href={url}>
 					<div className="flex flex-row gap-1 items-center">
 						<p className="text-lg text-default-600">{data.name}</p>
 						<VerifiedIcon className="text-success" />
 					</div>
+				</Link>
+
 				{data.subscribers && (
 					<p className="text-default-400 tracking-tight">
 						{formatBigNumber(data.subscribers)} subscribers
 					</p>
 				)}
 			</div>
-		</Link>
+		</div>
 	);
 };
--- a/yarn.lock
+++ b/yarn.lock
@ -6201,6 +6201,11 @@ schema-utils@^3.1.1:
    ajv "^6.12.5"
    ajv-keywords "^3.5.2"

+screenfull@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-6.0.2.tgz#3dbe4b8c4f8f49fb8e33caa8f69d0bca730ab238"
+  integrity sha512-AQdy8s4WhNvUZ6P8F6PB21tSPIYKniic+Ogx0AacBMjKP1GUHN2E9URxQHtCusiwxudnCKkdy4GrHXPPJSkCCw==
+
 scroll-into-view-if-needed@3.0.10:
  version "3.0.10"
  resolved "https://registry.yarnpkg.com/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.10.tgz#38fbfe770d490baff0fb2ba34ae3539f6ec44e13"