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 00000000..a02e164b Binary files /dev/null and b/src/assets/images/room-widgets/youtube-widget/next.png differ 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 00000000..d48b658e Binary files /dev/null and b/src/assets/images/room-widgets/youtube-widget/prev.png differ diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss index a5108a7c..5b3d1c06 100644 --- a/src/assets/styles/icons.scss +++ b/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; } diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss index be1dc5cb..30f1f58b 100644 --- a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss +++ b/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; + } + } + } } - */ } diff --git a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx b/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx index 0adaba4d..4d85def6 100644 --- a/src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx +++ b/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(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 && +