From 5a0c9f7e739cf434d6ea42782b864a79ef9eb7f3 Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 18 Sep 2021 16:03:17 -0500 Subject: [PATCH 1/7] started widget --- .../RoomWidgetUpdateYoutubeDisplayEvent.ts | 27 ++++ .../FurnitureYoutubeDisplayWidgetHandler.ts | 69 +++++++++++ src/views/room/RoomView.tsx | 2 + .../widgets/furniture/FurnitureWidgets.scss | 1 + .../furniture/FurnitureWidgetsView.tsx | 2 + .../FurnitureYoutubeDisplayView.scss | 31 +++++ .../FurnitureYoutubeDisplayView.tsx | 115 ++++++++++++++++++ 7 files changed, 247 insertions(+) create mode 100644 src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts create mode 100644 src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts create mode 100644 src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss create mode 100644 src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts new file mode 100644 index 00000000..0405734e --- /dev/null +++ b/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; + } +} diff --git a/src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts new file mode 100644 index 00000000..b838da4f --- /dev/null +++ b/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(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 []; + } +} diff --git a/src/views/room/RoomView.tsx b/src/views/room/RoomView.tsx index 89b96ef0..9ab44e69 100644 --- a/src/views/room/RoomView.tsx +++ b/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 = props => widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler()); widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler()); widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler()); + widgetHandlerManager.registerHandler(new FurnitureYoutubeDisplayWidgetHandler()); setWidgetHandler(widgetHandlerManager); diff --git a/src/views/room/widgets/furniture/FurnitureWidgets.scss b/src/views/room/widgets/furniture/FurnitureWidgets.scss index 0fe453bc..49ef274a 100644 --- a/src/views/room/widgets/furniture/FurnitureWidgets.scss +++ b/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'; diff --git a/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx index 2d152199..eea155ff 100644 --- a/src/views/room/widgets/furniture/FurnitureWidgetsView.tsx +++ b/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 => + ); } diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss new file mode 100644 index 00000000..52b18c97 --- /dev/null +++ b/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; + } +} diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx new file mode 100644 index 00000000..81578cef --- /dev/null +++ b/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(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 ( + + + +
+
+ +
+
+ lol +
+
+ + + ) +} From bf782e46ea0e3830e5314e58ed7541c849d934cb Mon Sep 17 00:00:00 2001 From: Layne Date: Sat, 18 Sep 2021 17:13:45 -0400 Subject: [PATCH 2/7] temp css fixes --- .../youtube-tv/FurnitureYoutubeDisplayView.scss | 9 ++------- .../furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx | 4 ++-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss index 52b18c97..be1dc5cb 100644 --- a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss +++ b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss @@ -1,5 +1,5 @@ -.youtube-tv-widget -{ +.youtube-tv-widget { + min-width: 400px; /* .youtube-video-container { @@ -23,9 +23,4 @@ } } */ - - .playlist-container - { - min-width: 200px; - } } diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx index 81578cef..0adaba4d 100644 --- a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx +++ b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx @@ -1,4 +1,4 @@ -import { YoutubeControlVideoMessageEvent, YoutubeDisplayPlaylistsEvent, YoutubeDisplayVideoMessageEvent } from '@nitrots/nitro-renderer/src/nitro/communication/messages/incoming/room/furniture/youtube'; +import { YoutubeControlVideoMessageEvent, 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'; @@ -103,7 +103,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
- +
lol From b0a5e47282777e14a920b45ebe4f1cf62707ca5b Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 18 Sep 2021 19:39:46 -0500 Subject: [PATCH 3/7] added playlists --- .../RoomWidgetUpdateYoutubeDisplayEvent.ts | 9 +-- .../FurnitureYoutubeDisplayWidgetHandler.ts | 10 +-- .../room-widgets/youtube-widget/next.png | Bin 0 -> 164 bytes .../room-widgets/youtube-widget/prev.png | Bin 0 -> 249 bytes src/assets/styles/icons.scss | 12 ++++ .../FurnitureYoutubeDisplayView.scss | 45 ++++++++++++- .../FurnitureYoutubeDisplayView.tsx | 63 ++++++++++++------ 7 files changed, 105 insertions(+), 34 deletions(-) create mode 100644 src/assets/images/room-widgets/youtube-widget/next.png create mode 100644 src/assets/images/room-widgets/youtube-widget/prev.png diff --git a/src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts b/src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts index 0405734e..52b2fe21 100644 --- a/src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts +++ b/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; - } } diff --git a/src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts b/src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts index b838da4f..94fc2127 100644 --- a/src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts +++ b/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(RoomObjectVariable.FURNITURE_DATA); - - this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id, data)); + this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id)); SendMessageHook(new GetYoutubeDisplayStatusMessageComposer(this._lastFurniId)); return; } diff --git a/src/assets/images/room-widgets/youtube-widget/next.png b/src/assets/images/room-widgets/youtube-widget/next.png new file mode 100644 index 0000000000000000000000000000000000000000..a02e164ba6f2f67e15c80ea935f447722be8e217 GIT binary patch literal 164 zcmeAS@N?(olHy`uVBq!ia0vp^qChOb!3HFM-ZD`IQrVs^jv*Ddk`odVe)P9VUbvCc z_`iEzMWf-Sg&u$YhnR}^{;?0`RXtv?h*$M!!6aVQV+EUdkEUB3ZA&u#Q~x-Q*}%aqjdAIwIv2^hiBLBl4!m^o1g#8dvmwF_@^$Zh9E?xd~`3 NgQu&X%Q~loCIF11JCFbX literal 0 HcmV?d00001 diff --git a/src/assets/images/room-widgets/youtube-widget/prev.png b/src/assets/images/room-widgets/youtube-widget/prev.png new file mode 100644 index 0000000000000000000000000000000000000000..d48b658ebae5457b7933bdda12413135564ea62d GIT binary patch literal 249 zcmeAS@N?(olHy`uVBq!ia0vp^qChOb!3HFM-ZD`IQjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjK*2sw7sn6_|FxG+^EN1mxCCxcsxC+mJ{I=o zu$;~zy9thM0!}BY58VC0IZxu~tbZ{wi3M^|k5+It?7sIm{^*8h^VobNIH!3A7#@pS zA(d>pMLOBis>g7_WrJz&Zd9(92$8+rtSC_ = props => { const [objectId, setObjectId] = useState(-1); const [videoUrl, setVideoUrl] = useState(null); + const [selectedItem, setSelectedItem] = useState(null); + const [playlists, setPlaylists] = useState(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; - if(playListId === '' && parser.playlists.length) - { - playListId = parser.playlists[0].video; - } - - setVideoUrl(`https://www.youtube.com/embed?listType=playlist&list=${playListId}`); + setPlaylists(parser.playlists); + setSelectedItem(parser.selectedPlaylistId); + setVideoUrl(null); }, [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 => -
-
- +
+
+ {videoUrl && videoUrl.length > 0 && +