From b0a5e47282777e14a920b45ebe4f1cf62707ca5b Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 18 Sep 2021 19:39:46 -0500 Subject: [PATCH] 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 && +