Merge pull request #198 from simoleo89/chore/react-player-v3-deps

chore: update React Player and frontend deps

package.json

@@ -18,55 +18,55 @@
         "test:watch": "vitest"
     },
     "dependencies": {
-        "@babel/runtime": "^7.29.2",
+        "@babel/runtime": "^7.29.7",
         "@emoji-mart/data": "^1.2.1",
         "@emoji-mart/react": "^1.1.1",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-slider": "^1.3.6",
         "@tanstack/react-query": "5",
         "@tanstack/react-query-devtools": "5",
-        "@tanstack/react-virtual": "^3.13.24",
+        "@tanstack/react-virtual": "^3.14.2",
-        "dompurify": "^3.4.2",
+        "dompurify": "^3.4.8",
         "emoji-mart": "^5.6.0",
         "emoji-toolkit": "10.0.0",
-        "framer-motion": "^12.38.0",
+        "framer-motion": "^12.40.0",
         "json5": "^2.2.3",
-        "react": "^19.2.5",
+        "react": "^19.2.7",
         "react-colorful": "^5.7.0",
-        "react-dom": "^19.2.5",
+        "react-dom": "^19.2.7",
-        "react-error-boundary": "^6.1.1",
+        "react-error-boundary": "^6.1.2",
         "react-icons": "^5.6.0",
-        "react-player": "^2.16.0",
+        "react-player": "^3.4.0",
         "use-between": "^1.4.0",
-        "zustand": "^5.0.13"
+        "zustand": "^5.0.14"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.11",
-        "@tailwindcss/postcss": "^4.2.4",
+        "@tailwindcss/postcss": "^4.3.0",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.2",
-        "@types/node": "^25.6.0",
+        "@types/node": "^25.9.1",
-        "@types/react": "^19.2.14",
+        "@types/react": "^19.2.16",
         "@types/react-dom": "^19.2.3",
-        "@typescript-eslint/eslint-plugin": "^8.59.1",
+        "@typescript-eslint/eslint-plugin": "^8.60.1",
-        "@typescript-eslint/parser": "^8.59.1",
+        "@typescript-eslint/parser": "^8.60.1",
-        "@typescript/native-preview": "^7.0.0-dev.20260509.2",
+        "@typescript/native-preview": "^7.0.0-dev.20260604.1",
-        "@vitejs/plugin-react": "^6.0.1",
+        "@vitejs/plugin-react": "^6.0.2",
         "babel-plugin-react-compiler": "^1.0.0",
-        "eslint": "^10.2.1",
+        "eslint": "^10.4.1",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-compiler": "19.1.0-rc.2",
         "eslint-plugin-react-hooks": "^7.1.1",
         "jsdom": "^29.1.1",
-        "postcss": "^8.5.12",
+        "postcss": "^8.5.15",
         "postcss-nested": "^7.0.2",
-        "sass": "^1.99.0",
+        "sass": "^1.100.0",
         "sirv": "^3.0.2",
-        "tailwindcss": "^4.2.4",
+        "tailwindcss": "^4.3.0",
         "typescript": "^6.0.3",
-        "typescript-eslint": "^8.59.1",
+        "typescript-eslint": "^8.60.1",
-        "vite": "^8.0.10",
+        "vite": "^8.0.16",
-        "vitest": "^3"
+        "vitest": "^3.2.6"
     }
 }

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: {
+                                    youtube: {
-                                        autoplay: 1,
                                         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: {
+                                    youtube: {},
-                                        autoplay: 1,
-                                        loop: isLooping ? 1 : 0,
-                                    },
                                 }}
                                 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;

vite.config.mjs

@@ -162,6 +162,9 @@ export default defineConfig({
         chunkSizeWarningLimit: 200000,
         manifest: true,
         rollupOptions: {
+            checks: {
+                pluginTimings: false
+            },
             output: {
                 assetFileNames: 'src/assets/[name]-[hash].[ext]',
                 // Granular chunking: split the monolithic vendor / nitro-renderer