added playlists

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

@@ -5,23 +5,16 @@ 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)
+    constructor(objectId: number)
     {
         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

@@ -1,7 +1,6 @@
 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';
@@ -11,6 +10,11 @@ import { RoomWidgetHandler } from './RoomWidgetHandler';
 
 export class FurnitureYoutubeDisplayWidgetHandler extends RoomWidgetHandler
 {
+    public static readonly CONTROL_COMMAND_PREVIOUS_VIDEO = 0;
+    public static readonly CONTROL_COMMAND_NEXT_VIDEO = 1;
+    public static readonly CONTROL_COMMAND_PAUSE_VIDEO = 2;
+    public static readonly CONTROL_COMMAND_CONTINUE_VIDEO = 3;
+
     private _lastFurniId: number = -1;
 
     public processEvent(event: NitroEvent): void
@@ -26,9 +30,7 @@ export class FurnitureYoutubeDisplayWidgetHandler extends RoomWidgetHandler
 
                 this._lastFurniId = widgetEvent.objectId;
                 
-                const data = roomObject.model.getValue<string>(RoomObjectVariable.FURNITURE_DATA);
+                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id));
-                
-                this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id, data));
                 SendMessageHook(new GetYoutubeDisplayStatusMessageComposer(this._lastFurniId));
                 return;
             }

src/assets/styles/icons.scss

@@ -693,6 +693,18 @@
         height: 16px;
     }
 
+    &.icon-youtube-next {
+        background: url('../images/room-widgets/youtube-widget/next.png');
+        width: 21px;
+        height: 16px;
+    }
+
+    &.icon-youtube-prev {
+        background: url('../images/room-widgets/youtube-widget/prev.png');
+        width: 21px;
+        height: 16px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }

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

@@ -1,8 +1,10 @@
 .youtube-tv-widget {
-    min-width: 400px;
+    min-width: 600px;
-    /*
+    
     .youtube-video-container
     {
+        min-height: 315px;
+        /*
         position: relative;
         overflow: hidden;
 
@@ -21,6 +23,43 @@
             width: 100%;
             height: 100%;
         }
-    }
         */
+    }
+
+    .playlist-container
+    {
+        overflow-y: hidden;
+        margin-right: -10px;
+        .playlist-controls
+        {
+            width: 100%;
+            .icon
+            {
+                margin-right: 10px;
+            }
+        }
+
+        .playlist-list
+        {
+            margin-top: 10px;
+            width: 100%;
+            margin-bottom: 5px;
+            height: 100%;
+            overflow-y: scroll;
+
+            .playlist-entry
+            {
+                color: black;
+                background-color: beige;
+                width: 100%;
+                height: 50px;
+                border-radius: 0.5px;
+
+                &.selected
+                {
+                    background-color: #40a2c9;
+                }
+            }
+        }
+    }
 }

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

@@ -1,7 +1,8 @@
-import { YoutubeControlVideoMessageEvent, YoutubeDisplayPlaylistsEvent, YoutubeDisplayVideoMessageEvent } from '@nitrots/nitro-renderer';
+import { ControlYoutubeDisplayPlaybackMessageComposer, SetYoutubeDisplayPlaylistMessageComposer, YoutubeControlVideoMessageEvent, YoutubeDisplayPlaylist, YoutubeDisplayPlaylistsEvent, YoutubeDisplayVideoMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { RoomWidgetUpdateYoutubeDisplayEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent';
-import { CreateEventDispatcherHook, CreateMessageHook } from '../../../../../hooks';
+import { FurnitureYoutubeDisplayWidgetHandler } from '../../../../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler';
+import { CreateEventDispatcherHook, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
 import { useRoomContext } from '../../../context/RoomContext';
 
@@ -9,6 +10,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
 {
     const [objectId, setObjectId] = useState(-1);
     const [videoUrl, setVideoUrl] = useState<string>(null);
+    const [selectedItem, setSelectedItem] = useState<string>(null);
+    const [playlists, setPlaylists] = useState<YoutubeDisplayPlaylist[]>(null);
     const { eventDispatcher = null } = useRoomContext();
 
     const onRoomWidgetUpdateYoutubeDisplayEvent = useCallback((event: RoomWidgetUpdateYoutubeDisplayEvent) =>
@@ -17,7 +20,6 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
         {
             case RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY: {
                 setObjectId(event.objectId);
-                //setVideoUrl(event.videoUrl);
             }
         }
     }, []);
@@ -26,6 +28,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
     {
         setObjectId(-1);
         setVideoUrl(null)
+        setSelectedItem(null);
+        setPlaylists(null);
     }, []);
 
     CreateEventDispatcherHook(RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY, eventDispatcher, onRoomWidgetUpdateYoutubeDisplayEvent);
@@ -35,17 +39,16 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
         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}`);
+            setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?start=${parser.startAtSeconds}&end=${parser.endAtSeconds}?autoplay=1`);
         }
         else
         {
-            setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}`);
+            setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?autoplay=1`);
         }
 
     }, [objectId]);
@@ -55,17 +58,12 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
         if(objectId === -1) return;
 
         const parser = event.getParser();
-        console.log(parser);
 
         if(objectId !== parser.furniId) return;
 
-        let playListId = parser.selectedPlaylistId;
+        setPlaylists(parser.playlists);
-        if(playListId === '' && parser.playlists.length)
+        setSelectedItem(parser.selectedPlaylistId);
-        {
+        setVideoUrl(null);
-            playListId = parser.playlists[0].video;
-        }
-
-        setVideoUrl(`https://www.youtube.com/embed?listType=playlist&list=${playListId}`);
     }, [objectId]);
 
     const onControlVideo = useCallback((event: YoutubeControlVideoMessageEvent) =>
@@ -94,6 +92,22 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
     CreateMessageHook(YoutubeDisplayPlaylistsEvent, onPlaylists);
     CreateMessageHook(YoutubeControlVideoMessageEvent, onControlVideo);
 
+    const processAction = useCallback( (action: string) =>
+    {
+        switch(action)
+        {
+            case 'playlist_prev':
+                SendMessageHook(new ControlYoutubeDisplayPlaybackMessageComposer(objectId, FurnitureYoutubeDisplayWidgetHandler.CONTROL_COMMAND_PREVIOUS_VIDEO));
+                break;
+            case 'playlist_next':
+                SendMessageHook(new ControlYoutubeDisplayPlaybackMessageComposer(objectId, FurnitureYoutubeDisplayWidgetHandler.CONTROL_COMMAND_NEXT_VIDEO));
+                break;
+            default:
+                SendMessageHook(new SetYoutubeDisplayPlaylistMessageComposer(objectId, action));
+                setSelectedItem(action);
+        }
+    }, [objectId]);
+
     if((objectId === -1)) return null;
 
     console.log(objectId);
@@ -101,12 +115,23 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
         <NitroCardView className="youtube-tv-widget">
             <NitroCardHeaderView headerText={''} onCloseClick={close} />
             <NitroCardContentView>
-                <div className="row w-100">
+                <div className="row w-100 h-100">
-                    <div className="youtube-video-container col-8">
+                    <div className="youtube-video-container col-9">
-                        <iframe title="yt" width="100%" height="100%" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay"></iframe>
+                        {videoUrl && videoUrl.length > 0 &&
+                            <iframe title="yt" width="100%" height="100%" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay" />
+                        }
+                    </div>
+                    <div className="playlist-container col-3">
+                        <span className="playlist-controls justify-content-center d-flex">
+                            <i className="icon icon-youtube-prev cursor-pointer" onClick={(e) => processAction('playlist_prev')} />
+                            <i className="icon icon-youtube-next cursor-pointer" onClick={(e) => processAction('playlist_next')} />
+                        </span>
+                        <div className="playlist-list">
+                            {playlists && playlists.map(entry =>
+                            {
+                                return <div className={'playlist-entry cursor-pointer ' + (entry.video === selectedItem ? 'selected' : '')}  key={entry.video} onClick={(e) => processAction(entry.video)}><b>{entry.title}</b> - {entry.description}</div>
+                            })}
                         </div>
-                    <div className="playlist-container col-4">
-                        lol
                     </div>
                 </div>
             </NitroCardContentView>