From c29052ca617674cdf6c72aa9c4af8c78b7af2236 Mon Sep 17 00:00:00 2001
From: Guus van Meerveld <mail@guusvanmeerveld.dev>
Date: Thu, 4 Apr 2024 00:09:36 +0200
Subject: [PATCH] watch: very basic video player

---
 package.json                                 |   1 +
 src/app/watch/Description.tsx                |  33 +--
 src/app/watch/Player.tsx                     |  11 -
 src/app/watch/Player/index.tsx               | 209 +++++++++++++++++++
 src/app/watch/Watch.tsx                      |  15 +-
 src/client/adapters/index.ts                 |   4 +-
 src/client/adapters/invidious/index.ts       |   2 +-
 src/client/adapters/invidious/transformer.ts |  46 ++--
 src/client/adapters/piped/index.ts           |   2 +-
 src/client/adapters/piped/transformer.ts     |  13 +-
 src/client/index.ts                          |   6 +-
 src/client/typings/stream.ts                 |  38 +++-
 src/client/typings/watchable.ts              |  13 ++
 src/components/Author.tsx                    |   6 +-
 src/hooks/useClient.ts                       |   4 +-
 yarn.lock                                    |  30 ++-
 16 files changed, 357 insertions(+), 76 deletions(-)
 delete mode 100644 src/app/watch/Player.tsx
 create mode 100644 src/app/watch/Player/index.tsx
 create mode 100644 src/client/typings/watchable.ts

diff --git a/package.json b/package.json
index 8504c23..c342491 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
 		"react": "^18",
 		"react-dom": "^18",
 		"react-icons": "^5.0.1",
+		"react-player": "^2.15.1",
 		"reactjs-visibility": "^0.1.4",
 		"sanitize-html": "^2.13.0",
 		"use-debounce": "^10.0.0",
diff --git a/src/app/watch/Description.tsx b/src/app/watch/Description.tsx
index b046948..40559b4 100644
--- a/src/app/watch/Description.tsx
+++ b/src/app/watch/Description.tsx
@@ -30,13 +30,16 @@ export const Description: Component<{ data: string }> = ({ data }) => {
 		[data]
 	);
 
-	const descriptionCut = useMemo(
-		() =>
-			expandedDescription
-				? sanitizedDescription
-				: sanitizedDescription.substring(0, shortenedDescriptionLength) + "...",
-		[sanitizedDescription, expandedDescription]
-	);
+	const descriptionAlreadyShort = sanitizedDescription.length <= 200;
+
+	const descriptionCut = useMemo(() => {
+		if (descriptionAlreadyShort) return sanitizedDescription;
+		else if (expandedDescription) return sanitizedDescription;
+		else
+			return (
+				sanitizedDescription.substring(0, shortenedDescriptionLength) + "..."
+			);
+	}, [sanitizedDescription, descriptionAlreadyShort, expandedDescription]);
 
 	const description = useMemo(
 		() => highlight(descriptionCut),
@@ -48,13 +51,15 @@ export const Description: Component<{ data: string }> = ({ data }) => {
 			<h2 className="text-ellipsis overflow-y-hidden">
 				<HighlightRenderer highlighted={description} />
 			</h2>
-			<Button
-				startContent={expandedDescription ? <CollapseIcon /> : <ExpandIcon />}
-				variant="light"
-				onClick={() => setExpandedDescription((state) => !state)}
-			>
-				{expandedDescription ? "Show less" : "Show more"}
-			</Button>
+			{!descriptionAlreadyShort && (
+				<Button
+					startContent={expandedDescription ? <CollapseIcon /> : <ExpandIcon />}
+					variant="light"
+					onClick={() => setExpandedDescription((state) => !state)}
+				>
+					{expandedDescription ? "Show less" : "Show more"}
+				</Button>
+			)}
 		</div>
 	);
 };
diff --git a/src/app/watch/Player.tsx b/src/app/watch/Player.tsx
deleted file mode 100644
index 392967f..0000000
--- a/src/app/watch/Player.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-"use client";
-
-import { Component } from "@/typings/component";
-
-export const Player: Component = () => {
-	return (
-		<>
-			<video src="" className="w-full" />
-		</>
-	);
-};
diff --git a/src/app/watch/Player/index.tsx b/src/app/watch/Player/index.tsx
new file mode 100644
index 0000000..846b6c0
--- /dev/null
+++ b/src/app/watch/Player/index.tsx
@@ -0,0 +1,209 @@
+"use client";
+
+import { useDebounce } from "use-debounce";
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+	FiMaximize as MaximizeIcon,
+	FiMinimize as MinimizeIcon,
+	FiVolumeX as MutedIcon,
+	FiPause as PauseIcon,
+	FiFastForward as PlaybackRateIcon,
+	FiPlay as PlayIcon,
+	FiVolume as VolumeIcon,
+	FiVolume1 as VolumeIcon1,
+	FiVolume2 as VolumeIcon2
+} from "react-icons/fi";
+import ReactPlayer from "react-player";
+
+import { Button } from "@nextui-org/button";
+import {
+	Dropdown,
+	DropdownItem,
+	DropdownMenu,
+	DropdownTrigger
+} from "@nextui-org/dropdown";
+import { Slider } from "@nextui-org/slider";
+
+import { HlsStream, Stream, StreamType } from "@/client/typings/stream";
+import formatDuration from "@/utils/formatDuration";
+
+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 [progress, setProgress] = useState(0);
+	const [duration, setDuration] = useState(0);
+	const [maximized, setMaximized] = useState(false);
+	const [volume, setVolume] = useState(40);
+	const [playbackRate, setPlaybackRate] = useState(1.0);
+	const [playing, setPlaying] = useState(false);
+
+	const [userSetProgress, setUserSetProgress] = useState(0);
+
+	const [seek] = useDebounce(userSetProgress, 100);
+
+	useEffect(() => {
+		player.current?.seekTo(seek);
+	}, [seek]);
+
+	const volumeIcons = useMemo(
+		() => [
+			<VolumeIcon key="vol" />,
+			<VolumeIcon1 key="vol1" />,
+			<VolumeIcon2 key="vol2" />
+		],
+		[]
+	);
+
+	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" }
+		],
+		[]
+	);
+
+	const handleBuffering = useCallback(() => {}, []);
+
+	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="flex flex-row items-center gap-4">
+								<div className="flex flex-1 flex-row gap-2 items-center">
+									<Button
+										variant="light"
+										isIconOnly
+										className="text-xl"
+										onClick={() => setPlaying((state) => !state)}
+									>
+										{playing ? <PauseIcon /> : <PlayIcon />}
+									</Button>
+
+									<Dropdown>
+										<DropdownTrigger>
+											<Button
+												variant="light"
+												isIconOnly
+												className="text-xl"
+												onClick={() => setMaximized((state) => !state)}
+											>
+												{
+													volumeIcons[
+														Math.floor((volume / 100) * volumeIcons.length)
+													]
+												}
+											</Button>
+										</DropdownTrigger>
+										<DropdownMenu aria-label="Volume menu">
+											<DropdownItem>
+												<Slider
+													className="h-48"
+													value={volume}
+													onChange={(value) => {
+														if (typeof value === "number") setVolume(value);
+													}}
+													orientation="vertical"
+												/>
+											</DropdownItem>
+										</DropdownMenu>
+									</Dropdown>
+
+									<p>
+										{formatDuration(progress * duration * 1000)} /{" "}
+										{formatDuration(duration * 1000)}
+									</p>
+								</div>
+								<div className="flex flex-row gap-2 items-center">
+									<Dropdown>
+										<DropdownTrigger>
+											<Button
+												className="text-xl"
+												// startContent={<PlaybackRateIcon />}
+												variant="light"
+											>
+												{playbackRate}x
+											</Button>
+										</DropdownTrigger>
+										<DropdownMenu
+											aria-label="Playback rate menu"
+											onAction={(key) => {
+												setPlaybackRate(parseFloat(key as string));
+											}}
+											items={playbackRateCategories}
+										>
+											{(item) => (
+												<DropdownItem key={item.key}>
+													{item.label}x
+												</DropdownItem>
+											)}
+										</DropdownMenu>
+									</Dropdown>
+
+									<Button
+										variant="light"
+										isIconOnly
+										className="text-xl"
+										onClick={() => setMaximized((state) => !state)}
+									>
+										{maximized ? <MinimizeIcon /> : <MaximizeIcon />}
+									</Button>
+								</div>
+							</div>
+						</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}
+					/>
+				</div>
+			)}
+		</>
+	);
+};
diff --git a/src/app/watch/Watch.tsx b/src/app/watch/Watch.tsx
index 16fbc53..c5690f5 100644
--- a/src/app/watch/Watch.tsx
+++ b/src/app/watch/Watch.tsx
@@ -26,6 +26,9 @@ import { Related } from "./Related";
 
 import { Component } from "@/typings/component";
 
+// TODO: Make all keywords visible in some way
+const maxKeyWords = 3;
+
 export const Watch: Component = () => {
 	const client = useClient();
 
@@ -38,7 +41,7 @@ export const Watch: Component = () => {
 	const { data, isLoading, error } = useQuery({
 		queryKey: ["watch", videoId],
 		queryFn: () => {
-			return client.getStream(videoId);
+			return client.getWatchable(videoId);
 		},
 		enabled: !videoIdIsInvalid
 	});
@@ -62,10 +65,10 @@ export const Watch: Component = () => {
 		<Container>
 			{isLoading && <LoadingPage />}
 			{data && !isLoading && (
-				<div className="flex flex-col">
-					<Player />
+				<div className="flex flex-col gap-4">
+					<Player streams={data.streams} />
 					<div className="flex flex-col xl:flex-row gap-4">
-						<div className="xl:w-2/3 flex flex-col gap-4">
+						<div className=" flex flex-col gap-4">
 							<div className="flex flex-col">
 								<h1 className="text-2xl">{data.video.title}</h1>
 								<div className="flex flex-row gap-4 text-lg tracking-tight text-default-500">
@@ -98,7 +101,7 @@ export const Watch: Component = () => {
 								<div className="flex flex-row gap-2">
 									<p>Keywords:</p>
 									<div className="flex flex-row gap-2 whitespace-nowrap overflow-x-scroll">
-										{data.keywords.map((keyword) => (
+										{data.keywords.slice(0, maxKeyWords).map((keyword) => (
 											<Chip key={keyword}>{keyword}</Chip>
 										))}
 									</div>
@@ -114,7 +117,7 @@ export const Watch: Component = () => {
 								videoUploader={data.video.author}
 							/>
 						</div>
-						<div className="xl:w-1/3 flex justify-center">
+						<div className="flex justify-center">
 							<Related data={data.related} />
 						</div>
 					</div>
diff --git a/src/client/adapters/index.ts b/src/client/adapters/index.ts
index be9d91c..1f1dae4 100644
--- a/src/client/adapters/index.ts
+++ b/src/client/adapters/index.ts
@@ -2,8 +2,8 @@ import { Comments } from "@/client/typings/comment";
 import { SearchResults } from "@/client/typings/search";
 import { SearchOptions } from "@/client/typings/search/options";
 import { Suggestions } from "@/client/typings/search/suggestions";
-import { Stream } from "@/client/typings/stream";
 import { Video } from "@/client/typings/video";
+import { Watchable } from "@/client/typings/watchable";
 
 export interface ConnectedAdapter {
 	getTrending(region: string): Promise<Video[]>;
@@ -11,7 +11,7 @@ export interface ConnectedAdapter {
 	getSearchSuggestions(query: string): Promise<Suggestions>;
 	getSearch(query: string, options?: SearchOptions): Promise<SearchResults>;
 
-	getStream(videoId: string): Promise<Stream>;
+	getWatchable(videoId: string): Promise<Watchable>;
 
 	getComments(videoId: string, repliesToken?: string): Promise<Comments>;
 }
diff --git a/src/client/adapters/invidious/index.ts b/src/client/adapters/invidious/index.ts
index 17d5f52..9bf7244 100644
--- a/src/client/adapters/invidious/index.ts
+++ b/src/client/adapters/invidious/index.ts
@@ -143,7 +143,7 @@ const adapter: Adapter = {
 				return { items: items, nextCursor: (page + 1).toString() };
 			},
 
-			async getStream(videoId) {
+			async getWatchable(videoId) {
 				return getVideo(url, videoId).then(Transformer.stream);
 			},
 
diff --git a/src/client/adapters/invidious/transformer.ts b/src/client/adapters/invidious/transformer.ts
index c8d2365..ce1ef02 100644
--- a/src/client/adapters/invidious/transformer.ts
+++ b/src/client/adapters/invidious/transformer.ts
@@ -6,8 +6,9 @@ import {
 	VideoItem
 } from "@/client/typings/item";
 import { Suggestions } from "@/client/typings/search/suggestions";
-import { Stream } from "@/client/typings/stream";
+import { Stream, StreamType } from "@/client/typings/stream";
 import { Video } from "@/client/typings/video";
+import { Watchable } from "@/client/typings/watchable";
 import { parseSubscriberCount } from "@/utils/parseSubscriberCount";
 
 import InvidiousComments from "./typings/comments";
@@ -141,35 +142,40 @@ export default class Transformer {
 		});
 	}
 
-	public static stream(stream: InvidiousStream): Stream {
-		const thumbnail = Transformer.findBestThumbnail(stream.videoThumbnails);
+	public static stream(data: InvidiousStream): Watchable {
+		const thumbnail = Transformer.findBestThumbnail(data.videoThumbnails);
 
 		if (thumbnail === null)
 			throw new Error(
-				`Invidious: Missing thumbnail for video with id ${stream.videoId}`
+				`Invidious: Missing thumbnail for video with id ${data.videoId}`
 			);
 
+		const streams: Stream[] = [];
+
+		streams.push({ type: StreamType.Dash, url: data.dashUrl });
+
 		return {
-			category: stream.genre,
-			dislikes: stream.dislikeCount,
-			likes: stream.likeCount,
-			keywords: stream.keywords,
-			related: stream.recommendedVideos.map(Transformer.recommendedVideo),
+			category: data.genre,
+			dislikes: data.dislikeCount,
+			likes: data.likeCount,
+			keywords: data.keywords,
+			related: data.recommendedVideos.map(Transformer.recommendedVideo),
+			streams,
 			video: {
 				author: {
-					id: stream.authorId,
-					name: stream.author,
-					avatar: stream.authorThumbnails[0].url,
-					subscribers: parseSubscriberCount(stream.subCountText)
+					id: data.authorId,
+					name: data.author,
+					avatar: data.authorThumbnails[0].url,
+					subscribers: parseSubscriberCount(data.subCountText)
 				},
-				description: stream.description,
-				duration: stream.lengthSeconds * 1000,
-				id: stream.videoId,
-				live: stream.liveNow,
+				description: data.description,
+				duration: data.lengthSeconds * 1000,
+				id: data.videoId,
+				live: data.liveNow,
 				thumbnail: thumbnail,
-				title: stream.title,
-				uploaded: new Date(stream.published * 1000),
-				views: stream.viewCount
+				title: data.title,
+				uploaded: new Date(data.published * 1000),
+				views: data.viewCount
 			}
 		};
 	}
diff --git a/src/client/adapters/piped/index.ts b/src/client/adapters/piped/index.ts
index 15329cc..fecd8e3 100644
--- a/src/client/adapters/piped/index.ts
+++ b/src/client/adapters/piped/index.ts
@@ -167,7 +167,7 @@ const adapter: Adapter = {
 				}).then(Transformer.search);
 			},
 
-			async getStream(videoId) {
+			async getWatchable(videoId) {
 				return getStream(url, videoId).then((data) =>
 					Transformer.stream(data, videoId)
 				);
diff --git a/src/client/adapters/piped/transformer.ts b/src/client/adapters/piped/transformer.ts
index 6bd7394..f7466b2 100644
--- a/src/client/adapters/piped/transformer.ts
+++ b/src/client/adapters/piped/transformer.ts
@@ -6,8 +6,9 @@ import {
 	VideoItem
 } from "@/client/typings/item";
 import { SearchResults } from "@/client/typings/search";
-import { Stream } from "@/client/typings/stream";
+import { Stream, StreamType } from "@/client/typings/stream";
 import { Video } from "@/client/typings/video";
+import { Watchable } from "@/client/typings/watchable";
 import {
 	parseChannelIdFromUrl,
 	parseVideoIdFromUrl
@@ -102,8 +103,11 @@ export default class Transformer {
 		return { items, nextCursor: data.nextpage };
 	}
 
-	public static stream(data: PipedStream, videoId: string): Stream {
-		const channelId = parseChannelIdFromUrl(data.uploaderUrl) ?? undefined;
+	public static stream(data: PipedStream, videoId: string): Watchable {
+		const streams: Stream[] = [];
+
+		if (data.dash) streams.push({ type: StreamType.Dash, url: data.dash });
+		if (data.hls) streams.push({ type: StreamType.Hls, url: data.hls });
 
 		return {
 			category: data.category,
@@ -111,9 +115,10 @@ export default class Transformer {
 			dislikes: data.dislikes,
 			likes: data.likes,
 			related: data.relatedStreams.map(Transformer.item),
+			streams,
 			video: {
 				author: {
-					id: channelId,
+					id: parseChannelIdFromUrl(data.uploaderUrl) ?? undefined,
 					name: data.uploader,
 					avatar: data.uploaderAvatar,
 					subscribers: data.uploaderSubscriberCount
diff --git a/src/client/index.ts b/src/client/index.ts
index aa6bcef..5a17ffe 100644
--- a/src/client/index.ts
+++ b/src/client/index.ts
@@ -5,8 +5,8 @@ import { Comments } from "./typings/comment";
 import { SearchResults } from "./typings/search";
 import { SearchOptions } from "./typings/search/options";
 import { Suggestions } from "./typings/search/suggestions";
-import { Stream } from "./typings/stream";
 import { Video } from "./typings/video";
+import { Watchable } from "./typings/watchable";
 
 export interface RemoteApi {
 	type: ApiType;
@@ -77,10 +77,10 @@ export default class Client {
 		});
 	}
 
-	public async getStream(videoId: string): Promise<Stream> {
+	public async getWatchable(videoId: string): Promise<Watchable> {
 		const adapter = this.getBestAdapter();
 
-		return await adapter.getStream(videoId);
+		return await adapter.getWatchable(videoId);
 	}
 
 	public async getComments(
diff --git a/src/client/typings/stream.ts b/src/client/typings/stream.ts
index c174456..37e9577 100644
--- a/src/client/typings/stream.ts
+++ b/src/client/typings/stream.ts
@@ -1,11 +1,31 @@
-import { Item } from "./item";
-import { Video } from "./video";
+export enum StreamType {
+	Dash,
+	Hls,
+	Standard
+}
+
+export interface BaseStream {
+	type: StreamType;
+}
+
+export interface DashStream extends BaseStream {
+	type: StreamType.Dash;
+	url: string;
+}
 
-export interface Stream {
-	video: Video;
-	keywords: string[];
-	likes: number;
-	dislikes: number;
-	category: string;
-	related: Item[];
+export interface HlsStream extends BaseStream {
+	type: StreamType.Hls;
+	url: string;
 }
+
+export interface StandardStream extends BaseStream {
+	type: StreamType.Standard;
+	video: VideoStream[];
+	audio: AudioStream[];
+}
+
+export interface VideoStream {}
+
+export interface AudioStream {}
+
+export type Stream = DashStream | HlsStream | StandardStream;
diff --git a/src/client/typings/watchable.ts b/src/client/typings/watchable.ts
new file mode 100644
index 0000000..e006f9f
--- /dev/null
+++ b/src/client/typings/watchable.ts
@@ -0,0 +1,13 @@
+import { Item } from "./item";
+import { Stream } from "./stream";
+import { Video } from "./video";
+
+export interface Watchable {
+	video: Video;
+	streams: Stream[];
+	keywords: string[];
+	likes: number;
+	dislikes: number;
+	category: string;
+	related: Item[];
+}
diff --git a/src/components/Author.tsx b/src/components/Author.tsx
index cb981af..5e8dbf3 100644
--- a/src/components/Author.tsx
+++ b/src/components/Author.tsx
@@ -1,5 +1,6 @@
 import NextLink from "next/link";
 import { FC } from "react";
+import { FiCheckCircle as VerifiedIcon } from "react-icons/fi";
 
 import { Avatar } from "@nextui-org/avatar";
 import { Link } from "@nextui-org/link";
@@ -26,7 +27,10 @@ export const Author: FC<{ data: AuthorProps }> = ({ data }) => {
 				/>
 			)}
 			<div className="flex flex-col">
-				<p className="text-lg text-default-600">{data.name}</p>
+				<div className="flex flex-row gap-1 items-center">
+					<p className="text-lg text-default-600">{data.name}</p>
+					<VerifiedIcon className="text-success" />
+				</div>
 				{data.subscribers && (
 					<p className="text-default-400 tracking-tight">
 						{formatBigNumber(data.subscribers)} subscribers
diff --git a/src/hooks/useClient.ts b/src/hooks/useClient.ts
index 3f1de5c..78e63c7 100644
--- a/src/hooks/useClient.ts
+++ b/src/hooks/useClient.ts
@@ -7,8 +7,8 @@ export const useClient = (): Client => {
 	const [client] = useState(
 		() =>
 			new Client([
-				{ baseUrl: "https://invidious.fdn.fr/", type: ApiType.Invidious }
-				// { baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
+				// { baseUrl: "https://invidious.fdn.fr/", type: ApiType.Invidious }
+				{ baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
 			])
 	);
 
diff --git a/yarn.lock b/yarn.lock
index 7ec994b..c851f9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3898,7 +3898,7 @@ deep-is@^0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@4.3.1, deepmerge@^4.2.2:
+deepmerge@4.3.1, deepmerge@^4.0.0, deepmerge@^4.2.2:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -5276,6 +5276,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 loader-utils@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
@@ -5389,6 +5394,11 @@ make-dir@^3.0.2, make-dir@^3.1.0:
   dependencies:
     semver "^6.0.0"
 
+memoize-one@^5.1.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -5865,7 +5875,7 @@ pretty-bytes@^5.3.0, pretty-bytes@^5.4.1:
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.6.0.tgz#356256f643804773c82f64723fe78c92c62beaeb"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-prop-types@^15.8.1:
+prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -5899,6 +5909,11 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
 react-icons@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.0.1.tgz#1694e11bfa2a2888cab47dcc30154ce90485feee"
@@ -5909,6 +5924,17 @@ react-is@^16.13.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-player@^2.15.1:
+  version "2.15.1"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.15.1.tgz#a5905126a6c5ba2667391a0d72da9f3a1ab57d54"
+  integrity sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==
+  dependencies:
+    deepmerge "^4.0.0"
+    load-script "^1.0.0"
+    memoize-one "^5.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.0.1"
+
 react-remove-scroll-bar@^2.3.4:
   version "2.3.5"
   resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.5.tgz#cd2543b3ed7716c7c5b446342d21b0e0b303f47c"