From 5a0c9f7e739cf434d6ea42782b864a79ef9eb7f3 Mon Sep 17 00:00:00 2001 From: dank074 Date: Sat, 18 Sep 2021 16:03:17 -0500 Subject: [PATCH] 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 +
+
+ + + ) +}