duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 15:06:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
chore: update React Player and frontend deps
This commit is contained in:
DuckieTM
2026-06-05 10:12:57 +02:00
committed by GitHub
parent a45fbd7a52 d73656bbfe
commit 5c282101ee
6 changed files with 838 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+23 -23
View File
@@ -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",
"dompurify": "^3.4.2",
"@tanstack/react-virtual": "^3.14.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-error-boundary": "^6.1.1",
"react-dom": "^19.2.7",
"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/react": "^19.2.14",
"@types/node": "^25.9.1",
"@types/react": "^19.2.16",
"@types/react-dom": "^19.2.3",
"@typescript-eslint/eslint-plugin": "^8.59.1",
"@typescript-eslint/parser": "^8.59.1",
"@typescript/native-preview": "^7.0.0-dev.20260509.2",
"@vitejs/plugin-react": "^6.0.1",
"@typescript-eslint/eslint-plugin": "^8.60.1",
"@typescript-eslint/parser": "^8.60.1",
"@typescript/native-preview": "^7.0.0-dev.20260604.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",
"vite": "^8.0.10",
"vitest": "^3"
"typescript-eslint": "^8.60.1",
"vite": "^8.0.16",
"vitest": "^3.2.6"
}
}
src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
+4 -7
View File
@@ -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
+4 -7
View File
@@ -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
+28
View File
@@ -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
+3
View File
@@ -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
yarn.lock
+776 -489
View File
File diff suppressed because it is too large Load Diff