watch: added fullscreen support, added loading bar

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"

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
-						className="w-full absolute bottom-0 z-10 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">
-							<Slider
-								aria-label="Video progress bar"
-								step={0.1}
-								onChange={(value) => {
-									if (typeof value === "number") {
-										setUserSetProgress(value / 100);
-										setProgress(value / 100);
-									}
-								}}
-								className="cursor-pointer"
-								value={progress * 100}
-							/>
+			<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="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="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") {
+											setProgress(value / 100);
+										}
+									}}
+									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>
 
-					<ReactPlayer
-						playing={playing}
-						volume={volume / 100}
-						playbackRate={playbackRate}
-						ref={player}
-						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 }) => {
-							setProgress(played);
-						}}
-						// onPlaybackQualityChange={(e: unknown) =>
-						// console.log("onPlaybackQualityChange", e)
-						// }
-						url={(stream as HlsStream).url}
-					/>
+					{stream && (
+						<ReactPlayer
+							playing={playing}
+							volume={volume / 100}
+							muted={volume === 0}
+							playbackRate={playbackRate}
+							ref={playerRef}
+							className="absolute top-0 left-0"
+							width="100%"
+							height="100%"
+							onPause={() => setPlaying(false)}
+							onPlay={() => setPlaying(true)}
+							onDuration={(duration) => setDuration(duration)}
+							// onBuffer={({}) => {}}
+							onProgress={({ played, loaded }) => {
+								setProgress(played);
+								setLoaded(loaded);
+							}}
+							// onPlaybackQualityChange={(e: unknown) =>
+							// console.log("onPlaybackQualityChange", e)
+							// }
+							url={(stream as HlsStream).url}
+						/>
+					)}
 				</div>
-			)}
+			</div>
 		</>
 	);
 };

src/components/Author.tsx

@@ -10,33 +10,36 @@ 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 && (
-				<Avatar
-					isBordered
-					name={data.name}
-					showFallback
-					size="lg"
-					src={data.avatar}
-					alt={data.name}
-				/>
+				<Link as={NextLink} href={url}>
+					<Avatar
+						isBordered
+						name={data.name}
+						showFallback
+						size="lg"
+						src={data.avatar}
+						alt={data.name}
+					/>
+				</Link>
 			)}
 			<div className="flex flex-col">
-				<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 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>
 	);
 };

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"