started widget

src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts

@@ -0,0 +1,27 @@
+import { RoomWidgetUpdateEvent } from './RoomWidgetUpdateEvent';
+
+export class RoomWidgetUpdateYoutubeDisplayEvent extends RoomWidgetUpdateEvent
+{
+    public static UPDATE_YOUTUBE_DISPLAY: string = 'RWUEIE_UPDATE_YOUTUBE_DISPLAY';
+
+    private _objectId: number;
+    private _videoUrl: string;
+
+    constructor(objectId: number, videoUrl: string = null)
+    {
+        super(RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY);
+
+        this._objectId = objectId;
+        this._videoUrl = videoUrl;
+    }
+
+    public get objectId(): number
+    {
+        return this._objectId;
+    }
+
+    public get videoUrl(): string
+    {
+        return this._videoUrl;
+    }
+}

src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts

@@ -0,0 +1,69 @@
+import { NitroEvent } from '@nitrots/nitro-renderer/src/core/events/NitroEvent';
+import { GetYoutubeDisplayStatusMessageComposer } from '@nitrots/nitro-renderer/src/nitro/communication/messages/outgoing/room/furniture/youtube';
+import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer/src/nitro/room/events/RoomEngineTriggerWidgetEvent';
+import { RoomObjectVariable } from '@nitrots/nitro-renderer/src/nitro/room/object/RoomObjectVariable';
+import { RoomWidgetEnum } from '@nitrots/nitro-renderer/src/nitro/ui/widget/enums/RoomWidgetEnum';
+import { RoomWidgetMessage, RoomWidgetUpdateEvent } from '..';
+import { SendMessageHook } from '../../../../../hooks';
+import { GetRoomEngine } from '../../GetRoomEngine';
+import { RoomWidgetUpdateYoutubeDisplayEvent } from '../events/RoomWidgetUpdateYoutubeDisplayEvent';
+import { RoomWidgetHandler } from './RoomWidgetHandler';
+
+export class FurnitureYoutubeDisplayWidgetHandler extends RoomWidgetHandler
+{
+    private _lastFurniId: number = -1;
+
+    public processEvent(event: NitroEvent): void
+    {
+        switch(event.type)
+        {
+            case RoomEngineTriggerWidgetEvent.OPEN_WIDGET: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+
+                const roomObject = GetRoomEngine().getRoomObject(widgetEvent.roomId, widgetEvent.objectId, widgetEvent.category);
+
+                if(!roomObject) return;
+
+                this._lastFurniId = widgetEvent.objectId;
+                
+                const data = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
+                
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id, data));
+                SendMessageHook(new GetYoutubeDisplayStatusMessageComposer(this._lastFurniId));
+                return;
+            }
+            case RoomEngineTriggerWidgetEvent.CLOSE_WIDGET: {
+                const widgetEvent = (event as RoomEngineTriggerWidgetEvent);
+
+                if(widgetEvent.objectId !== this._lastFurniId) return;
+
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(-1));
+                return;
+            }
+        }
+    }
+
+    public processWidgetMessage(message: RoomWidgetMessage): RoomWidgetUpdateEvent
+    {
+        switch(message.type)
+        {
+        }
+
+        return null;
+    }
+
+    public get type(): string
+    {
+        return RoomWidgetEnum.YOUTUBE;
+    }
+
+    public get eventTypes(): string[]
+    {
+        return [];
+    }
+
+    public get messageTypes(): string[]
+    {
+        return [];
+    }
+}

src/views/room/RoomView.tsx

@@ -1,6 +1,7 @@
 import { EventDispatcher, NitroRectangle, RoomGeometry, RoomVariableEnum, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { DispatchMouseEvent, DispatchTouchEvent, DoorbellWidgetHandler, FurniChooserWidgetHandler, FurnitureContextMenuWidgetHandler, FurnitureCreditWidgetHandler, FurnitureCustomStackHeightWidgetHandler, FurnitureDimmerWidgetHandler, FurnitureExternalImageWidgetHandler, FurniturePresentWidgetHandler, GetNitroInstance, GetRoomEngine, InitializeRoomInstanceRenderingCanvas, IRoomWidgetHandlerManager, RoomWidgetAvatarInfoHandler, RoomWidgetChatHandler, RoomWidgetChatInputHandler, RoomWidgetHandlerManager, RoomWidgetInfostandHandler, RoomWidgetRoomToolsHandler, RoomWidgetUpdateRoomViewEvent, UserChooserWidgetHandler } from '../../api';
+import { FurnitureYoutubeDisplayWidgetHandler } from '../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomColorView } from './RoomColorView';
 import { RoomViewProps } from './RoomView.types';
@@ -44,6 +45,7 @@ export const RoomView: FC<RoomViewProps> = props =>
         widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
         widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
         widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler());
+        widgetHandlerManager.registerHandler(new FurnitureYoutubeDisplayWidgetHandler());
 
         setWidgetHandler(widgetHandlerManager);
 

src/views/room/widgets/furniture/FurnitureWidgets.scss

@@ -7,3 +7,4 @@
 @import './stickie/FurnitureStickieView';
 @import './high-score/FurnitureHighScoreView';
 @import './gift-opening/FurnitureGiftOpeningView';
+@import './youtube-tv/FurnitureYoutubeDisplayView';

src/views/room/widgets/furniture/FurnitureWidgetsView.tsx

@@ -13,6 +13,7 @@ import { FurnitureManipulationMenuView } from './manipulation-menu/FurnitureMani
 import { FurnitureMannequinView } from './mannequin/FurnitureMannequinView';
 import { FurnitureStickieView } from './stickie/FurnitureStickieView';
 import { FurnitureTrophyView } from './trophy/FurnitureTrophyView';
+import { FurnitureYoutubeDisplayView } from './youtube-tv/FurnitureYoutubeDisplayView';
 
 export const FurnitureWidgetsView: FC<{}> = props =>
 {
@@ -32,6 +33,7 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureTrophyView />
             <FurnitureBadgeDisplayView />
             <FurnitureExternalImageView />
+            <FurnitureYoutubeDisplayView />
         </div>
     );
 }

src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss

@@ -0,0 +1,31 @@
+.youtube-tv-widget
+{
+    /*
+    .youtube-video-container
+    {
+        position: relative;
+        overflow: hidden;
+
+        &::after
+        {
+            display: block;
+            content: "";
+            //padding-top: 56.25%;
+        }
+
+        .iframe, object, embed
+        {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+    }
+    */
+
+    .playlist-container
+    {
+        min-width: 200px;
+    }
+}

src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx

@@ -0,0 +1,115 @@
+import { YoutubeControlVideoMessageEvent, YoutubeDisplayPlaylistsEvent, YoutubeDisplayVideoMessageEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/room/furniture/youtube';
+import { FC, useCallback, useState } from 'react';
+import { RoomWidgetUpdateYoutubeDisplayEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent';
+import { CreateEventDispatcherHook, CreateMessageHook } from '../../../../../hooks';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
+import { useRoomContext } from '../../../context/RoomContext';
+
+export const FurnitureYoutubeDisplayView: FC<{}> = props =>
+{
+    const [objectId, setObjectId] = useState(-1);
+    const [videoUrl, setVideoUrl] = useState<string>(null);
+    const { eventDispatcher = null } = useRoomContext();
+
+    const onRoomWidgetUpdateYoutubeDisplayEvent = useCallback((event: RoomWidgetUpdateYoutubeDisplayEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY: {
+                setObjectId(event.objectId);
+                //setVideoUrl(event.videoUrl);
+            }
+        }
+    }, []);
+
+    const close = useCallback(() =>
+    {
+        setObjectId(-1);
+        setVideoUrl(null)
+    }, []);
+
+    CreateEventDispatcherHook(RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY, eventDispatcher, onRoomWidgetUpdateYoutubeDisplayEvent);
+
+    const onVideo = useCallback((event: YoutubeDisplayVideoMessageEvent) =>
+    {
+        if(objectId === -1) return;
+
+        const parser = event.getParser();
+        console.log(parser);
+
+        if(objectId !== parser.furniId) return;
+
+        if(parser.endAtSeconds > 0 || parser.startAtSeconds > 0)
+        {
+            setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?start=${parser.startAtSeconds}&end=${parser.endAtSeconds}`);
+        }
+        else
+        {
+            setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}`);
+        }
+
+    }, [objectId]);
+
+    const onPlaylists = useCallback((event: YoutubeDisplayPlaylistsEvent) =>
+    {
+        if(objectId === -1) return;
+
+        const parser = event.getParser();
+        console.log(parser);
+
+        if(objectId !== parser.furniId) return;
+
+        let playListId = parser.selectedPlaylistId;
+        if(playListId === '' && parser.playlists.length)
+        {
+            playListId = parser.playlists[0].video;
+        }
+
+        setVideoUrl(`https://www.youtube.com/embed?listType=playlist&list=${playListId}`);
+    }, [objectId]);
+
+    const onControlVideo = useCallback((event: YoutubeControlVideoMessageEvent) =>
+    {
+        if(objectId === -1) return;
+
+        const parser = event.getParser();
+        console.log(parser);
+
+        if(objectId !== parser.furniId) return;
+
+        switch(parser.commandId)
+        {
+            case 1:
+                //this._currentVideoPlaybackState = YoutubeVideoPlaybackStateEnum._Str_5825;
+                //this._player.playVideo();
+                return;
+            case 2:
+                //this._currentVideoPlaybackState = YoutubeVideoPlaybackStateEnum._Str_6168;
+                //this._player.pauseVideo();
+                return;
+        }
+    }, [objectId]);
+
+    CreateMessageHook(YoutubeDisplayVideoMessageEvent, onVideo);
+    CreateMessageHook(YoutubeDisplayPlaylistsEvent, onPlaylists);
+    CreateMessageHook(YoutubeControlVideoMessageEvent, onControlVideo);
+
+    if((objectId === -1)) return null;
+
+    console.log(objectId);
+    return (
+        <NitroCardView className="youtube-tv-widget">
+            <NitroCardHeaderView headerText={''} onCloseClick={close} />
+            <NitroCardContentView>
+                <div className="row w-100">
+                    <div className="youtube-video-container col-8">
+                        <iframe title="yt" width="560" height="315" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay"></iframe>
+                    </div>
+                    <div className="playlist-container col-4">
+                        lol
+                    </div>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    )
+}