🆙 Updates thanks to Life

react-slider → @radix-ui/react-slider
react-tiny-popover → @radix-ui/react-popover
react-youtube → react-player (more formats, better maintained)

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

@@ -1,6 +1,5 @@
-import { FC, useEffect, useState } from 'react';
-import YouTube, { Options } from 'react-youtube';
-import { YouTubePlayer } from 'youtube-player/dist/types';
+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';
@@ -12,71 +11,24 @@ interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
 
 export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewProps =>
 {
-    const [ player, setPlayer ] = useState<any>(null);
     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 onStateChange = (event: { target: YouTubePlayer; data: number }) =>
+    const handlePlay = () =>
     {
-        try
-        {
-            setPlayer(event.target);
-
-            if(objectId === -1) return;
-
-            switch(event.target.getPlayerState())
-            {
-                case -1:
-                case 1:
-                    if(currentVideoState !== 1) play();
-                    return;
-                case 2:
-                    if(currentVideoState !== 2) pause();
-            }
-        }
-        catch(err) {}
+        if(objectId === -1) return;
+        if(currentVideoState !== YoutubeVideoPlaybackStateEnum.PLAYING) play();
     };
 
-    useEffect(() =>
+    const handlePause = () =>
     {
-        if((currentVideoState === null) || !player) return;
-
-        try
-        {
-            if((currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PLAYING))
-            {
-                player.playVideo();
-
-                return;
-            }
-
-            if((currentVideoState === YoutubeVideoPlaybackStateEnum.PAUSED) && (player.getPlayerState() !== YoutubeVideoPlaybackStateEnum.PAUSED))
-            {
-                player.pauseVideo();
-
-                return;
-            }
-        }
-        catch(err)
-        {
-            setPlayer(null);
-        }
-    }, [ currentVideoState, player ]);
+        if(objectId === -1) return;
+        if(currentVideoState !== YoutubeVideoPlaybackStateEnum.PAUSED) pause();
+    };
 
     if(objectId === -1) return null;
 
-    const youtubeOptions: Options = {
-        height: '375',
-        width: '500',
-        playerVars: {
-            autoplay: 1,
-            disablekb: 1,
-            controls: 0,
-            origin: window.origin,
-            modestbranding: 1,
-            start: videoStart,
-            end: videoEnd
-        }
-    };
+    const playing = (currentVideoState === null) ? true : (currentVideoState === YoutubeVideoPlaybackStateEnum.PLAYING);
 
     return (
         <NitroCardView className="youtube-tv-widget">
@@ -85,7 +37,26 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
                 <div className="row size-full">
                     <div className="youtube-video-container col-span-9 overflow-hidden">
                         { (videoId && videoId.length > 0) &&
-                            <YouTube containerClassName={ 'youtubeContainer' } opts={ youtubeOptions } videoId={ videoId } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } />
+                            <ReactPlayer
+                                ref={ playerRef }
+                                url={ `https://www.youtube.com/watch?v=${ videoId }` }
+                                width={ 500 }
+                                height={ 375 }
+                                playing={ playing }
+                                controls={ false }
+                                onPlay={ handlePlay }
+                                onPause={ handlePause }
+                                config={ {
+                                    playerVars: {
+                                        autoplay: 1,
+                                        disablekb: 1,
+                                        controls: 0,
+                                        origin: window.origin,
+                                        modestbranding: 1,
+                                        start: videoStart,
+                                        end: videoEnd
+                                    }
+                                } } />
                         }
                         { (!videoId || videoId.length === 0) &&
                             <div className="empty-video size-full justify-center items-center flex">{ LocalizeText('widget.furni.video_viewer.no_videos') }</div>