chore: update react player and frontend deps

src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx

@@ -1,8 +1,8 @@
 import { FC, useRef } from 'react';
-import ReactPlayer from 'react-player/youtube';
 import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api';
 import { AutoGrid, AutoGridProps, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureYoutubeWidget } from '../../../../hooks';
+import ReactPlayer from '../../../youtube/YoutubeReactPlayer';
 
 interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
 {
@@ -12,7 +12,7 @@ interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
 export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewProps =>
 {
     const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget();
-    const playerRef = useRef<ReactPlayer>(null);
+    const playerRef = useRef<HTMLVideoElement>(null);
 
     const handlePlay = () =>
     {
@@ -39,7 +39,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
                         { (videoId && videoId.length > 0) &&
                             <ReactPlayer
                                 ref={ playerRef }
-                                url={ `https://www.youtube.com/watch?v=${ videoId }` }
+                                src={ `https://www.youtube.com/watch?v=${ videoId }` }
                                 width={ 500 }
                                 height={ 375 }
                                 playing={ playing }
@@ -47,12 +47,9 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
                                 onPlay={ handlePlay }
                                 onPause={ handlePause }
                                 config={ {
-                                    playerVars: {
-                                        autoplay: 1,
+                                    youtube: {
                                         disablekb: 1,
-                                        controls: 0,
                                         origin: window.origin,
-                                        modestbranding: 1,
                                         start: videoStart,
                                         end: videoEnd
                                     }

src/components/toolbar/YouTubePlayerView.tsx

@@ -1,9 +1,9 @@
 import { ControlYoutubeDisplayPlaybackMessageComposer, YouTubeRoomBroadcastEvent, YouTubeRoomPlayComposer, YouTubeRoomSettingsEvent, YouTubeRoomWatchersEvent, YouTubeRoomWatchingComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import ReactPlayer from 'react-player/youtube';
 import { GetRoomSession, getYoutubeRoomEnabled, LocalizeText, SendMessageComposer, YoutubeVideoPlaybackStateEnum } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, LayoutAvatarImageView } from '../../common';
 import { useFurnitureYoutubeWidget, useHasPermission, useMessageEvent } from '../../hooks';
+import ReactPlayer from '../youtube/YoutubeReactPlayer';
 
 const CONTROL_COMMAND_PREVIOUS_VIDEO = 0;
 const CONTROL_COMMAND_NEXT_VIDEO = 1;
@@ -38,7 +38,7 @@ export const YouTubePlayerView: FC<{}> = () =>
     const [playlist, setPlaylist] = useState<string[]>([]);
     const [history, setHistory] = useState<string[]>([]);
     const [showVolumeSlider, setShowVolumeSlider] = useState(true);
-    const playerRef = useRef<ReactPlayer | null>(null);
+    const playerRef = useRef<HTMLVideoElement | null>(null);
     const { objectId: youtubeObjectId, videoId: roomVideoId, currentVideoState, hasControl } = useFurnitureYoutubeWidget();
     const [spectators, setSpectators] = useState< { id: number; name: string; look: string }[] >([]);
     const [broadcastVideo, setBroadcastVideo] = useState('');
@@ -380,7 +380,7 @@ export const YouTubePlayerView: FC<{}> = () =>
                                 {
                                     playerRef.current = ref;
                                 }}
-                                url={`https://www.youtube.com/watch?v=${videoId}`}
+                                src={`https://www.youtube.com/watch?v=${videoId}`}
                                 width="100%"
                                 height={isFullscreen ? '100%' : 280}
                                 playing
@@ -388,10 +388,7 @@ export const YouTubePlayerView: FC<{}> = () =>
                                 loop={isLooping}
                                 volume={Math.max(0, Math.min(1, volume / 100))}
                                 config={{
-                                    playerVars: {
-                                        autoplay: 1,
-                                        loop: isLooping ? 1 : 0,
-                                    },
+                                    youtube: {},
                                 }}
                                 onReady={() => addToHistory(videoId)}
                             />

src/components/youtube/YoutubeReactPlayer.ts

@@ -0,0 +1,28 @@
+import { ComponentType, LazyExoticComponent, lazy } from 'react';
+import HtmlPlayer from 'react-player/HtmlPlayer';
+import { canPlay } from 'react-player/patterns';
+import { PlayerEntry } from 'react-player/players';
+import { createReactPlayer } from 'react-player/ReactPlayer';
+import { VideoElementProps } from 'react-player/types';
+
+const YoutubeElement = lazy(() => import('youtube-video-element/react')) as LazyExoticComponent<ComponentType<VideoElementProps>>;
+
+const YoutubeReactPlayer = createReactPlayer(
+    [
+        {
+            key: 'youtube',
+            name: 'YouTube',
+            canPlay: canPlay.youtube,
+            player: YoutubeElement
+        }
+    ] satisfies PlayerEntry[],
+    {
+        key: 'html',
+        name: 'html',
+        canPlay: canPlay.html,
+        canEnablePIP: () => true,
+        player: HtmlPlayer
+    }
+);
+
+export default YoutubeReactPlayer;