🆙 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/common/Slider.tsx

@@ -1,35 +1,148 @@
-import { FC } from 'react';
-import ReactSlider, { ReactSliderProps } from 'react-slider';
+import * as RadixSlider from '@radix-ui/react-slider';
+import { CSSProperties, FC, HTMLProps, ReactElement } from 'react';
+import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 import { Button } from './Button';
 import { Flex } from './Flex';
-import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
-export interface SliderProps extends ReactSliderProps
+export interface SliderThumbState
 {
-    disabledButton?: boolean;
+    index: number;
+    value: number | number[];
+    valueNow: number;
 }
 
+export interface SliderProps
+{
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number | number[];
+    defaultValue?: number | number[];
+    onChange?: (value: any, thumbIndex: number) => void;
+    disabled?: boolean;
+    disabledButton?: boolean;
+    invert?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    trackClassName?: string;
+    thumbClassName?: string;
+    renderThumb?: (props: HTMLProps<HTMLDivElement>, state: SliderThumbState) => ReactElement;
+}
+
+const toArray = (value: number | number[] | undefined): number[] =>
+{
+    if(Array.isArray(value)) return value;
+    if(typeof value === 'number') return [ value ];
+
+    return [ 0 ];
+};
+
+const cn = (...parts: (string | undefined | false)[]) => parts.filter(Boolean).join(' ');
+
 export const Slider: FC<SliderProps> = props =>
 {
-    const { disabledButton, max, min, step, value, onChange, ...rest } = props;
-    const currentValue = Array.isArray(value) ? value[0] : ((typeof value === 'number') ? value : 0);
+    const {
+        disabledButton,
+        disabled,
+        max = 100,
+        min = 0,
+        step = 1,
+        value,
+        defaultValue,
+        onChange,
+        invert,
+        className,
+        style,
+        trackClassName,
+        thumbClassName,
+        renderThumb
+    } = props;
+
+    const valueArr = toArray(value);
+    const currentValue = valueArr[0] ?? 0;
     const minimum = (typeof min === 'number') ? min : 0;
     const maximum = (typeof max === 'number') ? max : 0;
     const buttonStep = ((typeof step === 'number') && (step > 0)) ? step : 1;
+    const isRange = valueArr.length > 1;
 
     const roundToStep = (nextValue: number) =>
     {
-        if(typeof buttonStep !== 'number') return nextValue;
-
         const decimalStep = buttonStep.toString();
         const precision = decimalStep.includes('.') ? (decimalStep.length - decimalStep.indexOf('.') - 1) : 0;
 
         return parseFloat(nextValue.toFixed(precision));
     };
 
-    return <Flex fullWidth gap={ 1 } classNames={ [ 'nitro-slider-wrapper' ] }>
-        { !disabledButton && <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-left' ] } disabled={ minimum >= currentValue } onClick={ () => onChange(roundToStep(minimum < currentValue ? currentValue - buttonStep : minimum), 0) }><FaAngleLeft /></Button> }
-        <ReactSlider className={ 'nitro-slider' } max={ max } min={ min } step={ step } value={ value } onChange={ onChange } { ...rest } />
-        { !disabledButton && <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-right' ] } disabled={ maximum <= currentValue } onClick={ () => onChange(roundToStep(maximum > currentValue ? currentValue + buttonStep : maximum), 0) }><FaAngleRight /></Button> }
-    </Flex>;
+    const emit = (next: number[]) =>
+    {
+        if(!onChange) return;
+
+        if(isRange) onChange(next, 0);
+        else onChange(next[0], 0);
+    };
+
+    const stepDown = () =>
+    {
+        const next = roundToStep(minimum < currentValue ? currentValue - buttonStep : minimum);
+
+        emit([ next, ...valueArr.slice(1) ]);
+    };
+
+    const stepUp = () =>
+    {
+        const next = roundToStep(maximum > currentValue ? currentValue + buttonStep : maximum);
+
+        emit([ next, ...valueArr.slice(1) ]);
+    };
+
+    const renderThumbElement = (i: number) =>
+    {
+        const baseProps: HTMLProps<HTMLDivElement> = {
+            key: i,
+            className: cn('thumb', `thumb-${ i }`, thumbClassName)
+        };
+
+        const state: SliderThumbState = {
+            index: i,
+            value: isRange ? valueArr : currentValue,
+            valueNow: valueArr[i] ?? 0
+        };
+
+        return (
+            <RadixSlider.Thumb key={ i } asChild>
+                { renderThumb ? renderThumb(baseProps, state) : <div { ...baseProps } /> }
+            </RadixSlider.Thumb>
+        );
+    };
+
+    return (
+        <Flex fullWidth gap={ 1 } classNames={ [ 'nitro-slider-wrapper' ] }>
+            { !disabledButton && (
+                <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-left' ] } disabled={ disabled || (minimum >= currentValue) } onClick={ stepDown }>
+                    <FaAngleLeft />
+                </Button>
+            ) }
+            <RadixSlider.Root
+                inverted={ invert }
+                disabled={ disabled }
+                className={ cn('nitro-slider', 'relative', 'min-w-0', 'grow', className) }
+                style={ style }
+                max={ max }
+                min={ min }
+                step={ step }
+                value={ value !== undefined ? valueArr : undefined }
+                defaultValue={ defaultValue !== undefined ? toArray(defaultValue) : undefined }
+                onValueChange={ emit }>
+                <RadixSlider.Track className={ cn('track', 'track-1', 'grow', trackClassName) }>
+                    <RadixSlider.Range className={ cn('track', 'track-0', trackClassName) } />
+                </RadixSlider.Track>
+                { valueArr.map((_, i) => renderThumbElement(i)) }
+            </RadixSlider.Root>
+            { !disabledButton && (
+                <Button classNames={ [ 'nitro-slider-button', 'nitro-slider-button-right' ] } disabled={ disabled || (maximum <= currentValue) } onClick={ stepUp }>
+                    <FaAngleRight />
+                </Button>
+            ) }
+        </Flex>
+    );
 }

src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx

@@ -1,7 +1,7 @@
 import { RoomDataParser, RoomSettingsComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
+import * as Popover from '@radix-ui/react-popover';
 import React, { FC, useRef, useState } from 'react';
 import { FaUser } from 'react-icons/fa';
-import { ArrowContainer, Popover } from 'react-tiny-popover';
 import { GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer, ToggleFavoriteRoom } from '../../../../api';
 import { Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, Text, UserProfileIconView } from '../../../../common';
 import { useHelp, useNavigator } from '../../../../hooks';
@@ -26,6 +26,12 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
     const isControlled = isVisible !== undefined;
     const popoverOpen = isControlled ? isVisible : internalVisible;
 
+    const handleOpenChange = (open: boolean) =>
+    {
+        if(!isControlled) setInternalVisible(open);
+        if(!open && setIsPopoverActive) setIsPopoverActive(false);
+    };
+
     const getUserCounterColor = () =>
     {
         const num: number = (100 * (roomData.userCount / roomData.maxUserCount));
@@ -88,17 +94,22 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
     };
 
     return (
-        <Popover
-            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-[#f2f2eb] border border-[#000] rounded-[8px] shadow-none z-[1070]"
-            content={ ({ position, childRect, popoverRect }) => (
-                <ArrowContainer
-                    arrowColor="black"
-                    arrowSize={ 7 }
-                    arrowStyle={ { left: 'calc(-.5rem - 0px)' } }
-                    childRect={ childRect }
-                    popoverRect={ popoverRect }
-                    position={ position }
-                >
+        <Popover.Root open={ popoverOpen } onOpenChange={ handleOpenChange }>
+            <Popover.Trigger asChild>
+                <div
+                    ref={ elementRef }
+                    className="cursor-pointer nitro-icon icon-navigator-info"
+                    onClick={ handleIconClick }
+                    onMouseOver={ () => { if(!isControlled) setInternalVisible(true); } }
+                    onMouseLeave={ () => { if(!isControlled) setInternalVisible(false); } }
+                />
+            </Popover.Trigger>
+            <Popover.Portal>
+                <Popover.Content
+                    side="right"
+                    sideOffset={ 10 }
+                    collisionPadding={ 8 }
+                    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-[#f2f2eb] border border-black rounded-[8px] shadow-none z-[1070]">
                     <NitroCardContentView className="bg-transparent room-info image-rendering-pixelated !p-0" overflow="hidden" onClick={ e => e.stopPropagation() }>
                         <Flex gap={ 1 } overflow="hidden" className="p-2">
                             <LayoutRoomThumbnailView className="flex flex-col items-center justify-end mb-1" customUrl={ roomData.officialRoomPicRef } roomId={ roomData.roomId }>
@@ -173,24 +184,9 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
                                 </Flex> }
                         </Column>
                     </NitroCardContentView>
-                </ArrowContainer>
-            ) }
-            isOpen={ popoverOpen }
-            onClickOutside={ () =>
-            {
-                if(!isControlled) setInternalVisible(false);
-                if(setIsPopoverActive) setIsPopoverActive(false);
-            } }
-            padding={ 10 }
-            positions={ [ 'right', 'left', 'top', 'bottom' ] }
-        >
-            <div
-                ref={ elementRef }
-                className="cursor-pointer nitro-icon icon-navigator-info"
-                onClick={ handleIconClick }
-                onMouseOver={ () => { if(!isControlled) setInternalVisible(true); } }
-                onMouseLeave={ () => { if(!isControlled) setInternalVisible(false); } }
-            />
-        </Popover>
+                    <Popover.Arrow className="fill-black" width={ 14 } height={ 7 } />
+                </Popover.Content>
+            </Popover.Portal>
+        </Popover.Root>
     );
 };

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>

src/components/toolbar/YouTubePlayerView.tsx

@@ -1,6 +1,6 @@
 import { ControlYoutubeDisplayPlaybackMessageComposer, YouTubeRoomBroadcastEvent, YouTubeRoomPlayComposer, YouTubeRoomSettingsEvent, YouTubeRoomWatchersEvent, YouTubeRoomWatchingComposer } from "@nitrots/nitro-renderer";
 import { FC, useEffect, useRef, useState } from "react";
-import YouTube from "react-youtube";
+import ReactPlayer from "react-player/youtube";
 import { GetRoomSession, getYoutubeRoomEnabled, GetSessionDataManager, LocalizeText, SendMessageComposer, YoutubeVideoPlaybackStateEnum } from "../../api";
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView, LayoutAvatarImageView } from "../../common";
 import { useFurnitureYoutubeWidget, useMessageEvent } from "../../hooks";
@@ -35,7 +35,7 @@ export const YouTubePlayerView: FC<{}> = () => {
     const [playlist, setPlaylist] = useState<string[]>([]);
     const [history, setHistory] = useState<string[]>([]);
     const [showVolumeSlider, setShowVolumeSlider] = useState(true);
-    const playerRef = useRef<any>(null);
+    const playerRef = useRef<ReactPlayer | null>(null);
     const { objectId: youtubeObjectId, videoId: roomVideoId, currentVideoState, hasControl } = useFurnitureYoutubeWidget();
     const [spectators, setSpectators] = useState< { id: number; name: string; look: string }[] >([]);
     const [broadcastVideo, setBroadcastVideo] = useState("");
@@ -310,22 +310,22 @@ export const YouTubePlayerView: FC<{}> = () => {
                         )}
 
                         {videoId ? (
-                            <YouTube
-                                videoId={videoId}
-                                opts={{
-                                    width: "100%",
-                                    height: isFullscreen ? "100%" : "280",
+                            <ReactPlayer
+                                ref={ref => { playerRef.current = ref; }}
+                                url={`https://www.youtube.com/watch?v=${videoId}`}
+                                width="100%"
+                                height={isFullscreen ? "100%" : 280}
+                                playing
+                                muted={isMuted}
+                                loop={isLooping}
+                                volume={Math.max(0, Math.min(1, volume / 100))}
+                                config={{
                                     playerVars: {
                                         autoplay: 1,
-                                        volume: volume,
-                                        muted: isMuted ? 1 : 0,
                                         loop: isLooping ? 1 : 0,
                                     },
                                 }}
-                                onReady={(e) => {
-                                    playerRef.current = e.target;
-                                    addToHistory(videoId);
-                                }}
+                                onReady={() => addToHistory(videoId)}
                             />
                         ) : (
                             <div className="h-[280px] flex items-center justify-center bg-gray-800 text-gray-500">