🆙 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/chat-input/ChatInputEmojiSelectorView.tsx

@@ -1,7 +1,7 @@
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
+import * as Popover from '@radix-ui/react-popover';
 import { FC, useState } from 'react';
-import { Popover } from 'react-tiny-popover';
 
 interface ChatInputEmojiSelectorViewProps
 {
@@ -19,19 +19,16 @@ export const ChatInputEmojiSelectorView: FC<ChatInputEmojiSelectorViewProps> = p
         setSelectorVisible(false);
     };
 
-    const toggleSelector = () => setSelectorVisible(prev => !prev);
-
     return (
-        <div>
-            <Popover
-                containerClassName="z-[1070]"
-                content={ <Picker data={ data } onEmojiSelect={ handleEmojiSelect } /> }
-                isOpen={ selectorVisible }
-                positions={ [ 'top' ] }
-                onClickOutside={ () => setSelectorVisible(false) }
-            >
-                <div className="cursor-pointer text-lg select-none px-1" onClick={ toggleSelector }>🙂</div>
-            </Popover>
-        </div>
+        <Popover.Root open={ selectorVisible } onOpenChange={ setSelectorVisible }>
+            <Popover.Trigger asChild>
+                <div className="cursor-pointer text-lg select-none px-1">🙂</div>
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content className="z-[1070]" side="top" sideOffset={ 8 }>
+                    <Picker data={ data } onEmojiSelect={ handleEmojiSelect } />
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
     );
 };

src/components/room/widgets/chat-input/ChatInputStyleSelectorView.tsx

@@ -1,5 +1,5 @@
+import * as Popover from '@radix-ui/react-popover';
 import { FC, useState } from 'react';
-import { ArrowContainer, Popover } from 'react-tiny-popover';
 import { Flex, Grid, NitroCardContentView } from '../../../../common';
 
 interface ChatInputStyleSelectorViewProps
@@ -21,20 +21,17 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
   };
 
   return (
-    <Popover
-      padding={12}
-      isOpen={selectorVisible}
-      positions={['top']}
-      reposition={false}
-      containerClassName="max-w-[276px] not-italic font-normal leading-normal text-left no-underline text-shadow-none normal-case tracking-[normal] [word-break:normal] [word-spacing:normal] whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-[solid] border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-1070"
-      content={({ position, childRect, popoverRect }) => (
-        <ArrowContainer
-          arrowColor={'black'}
-          arrowSize={7}
-          arrowStyle={{ bottom: 'calc(-.5rem - 1px)' }}
-          childRect={childRect}
-          popoverRect={popoverRect}
-          position={position}
+    <Popover.Root open={selectorVisible} onOpenChange={setSelectorVisible}>
+      <Popover.Trigger asChild>
+        <div className="chatstyles-anchor">
+          <div className="nitro-icon chatstyles-icon" />
+        </div>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side="top"
+          sideOffset={12}
+          className="max-w-[276px] not-italic font-normal leading-normal text-left no-underline normal-case tracking-normal whitespace-normal text-[.7875rem] [word-wrap:break-word] bg-[#dfdfdf] bg-clip-padding border border-solid border-[#283F5D] rounded-[.25rem] [box-shadow:0_2px_#00000073] z-[1070]"
         >
           <NitroCardContentView className="bg-transparent max-h-[210px]!" overflow="hidden">
             <Grid columnCount={3} overflow="auto">
@@ -47,15 +44,9 @@ export const ChatInputStyleSelectorView: FC<ChatInputStyleSelectorViewProps> = p
               ))}
             </Grid>
           </NitroCardContentView>
-        </ArrowContainer>
-      )}
-    >
-      <div
-        className="chatstyles-anchor"
-        onClick={() => setSelectorVisible(v => !v)}
-      >
-        <div className="nitro-icon chatstyles-icon" />
-      </div>
-    </Popover>
+          <Popover.Arrow className="fill-black" width={14} height={7} />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
   );
-};
+};

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>