nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-11-27 08:00:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

started widget

Browse Source
This commit is contained in:
dank074 2021-09-18 16:03:17 -05:00
parent 796e5db130
commit 5a0c9f7e73
7 changed files with 247 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts Normal file
View File

@ -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;
}
}

69
src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts Normal file
View File

@ -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<string>(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 [];
}
}

2
src/views/room/RoomView.tsx
View File

@ -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<RoomViewProps> = props =>
widgetHandlerManager.registerHandler(new FurnitureExternalImageWidgetHandler());
widgetHandlerManager.registerHandler(new FurniturePresentWidgetHandler());
widgetHandlerManager.registerHandler(new FurnitureDimmerWidgetHandler());
widgetHandlerManager.registerHandler(new FurnitureYoutubeDisplayWidgetHandler());
setWidgetHandler(widgetHandlerManager);

1
src/views/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -7,3 +7,4 @@
@import './stickie/FurnitureStickieView';
@import './high-score/FurnitureHighScoreView';
@import './gift-opening/FurnitureGiftOpeningView';
@import './youtube-tv/FurnitureYoutubeDisplayView';

2
src/views/room/widgets/furniture/FurnitureWidgetsView.tsx
View File

@ -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 =>
<FurnitureTrophyView />
<FurnitureBadgeDisplayView />
<FurnitureExternalImageView />
<FurnitureYoutubeDisplayView />
</div>
);
}

31
src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss Normal file
View File

@ -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;
}
}

115
src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx Normal file
View File

@ -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<string>(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 (
<NitroCardView className="youtube-tv-widget">
<NitroCardHeaderView headerText={''} onCloseClick={close} />
<NitroCardContentView>
<div className="row w-100">
<div className="youtube-video-container col-8">
<iframe title="yt" width="560" height="315" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay"></iframe>
</div>
<div className="playlist-container col-4">
lol
</div>
</div>
</NitroCardContentView>
</NitroCardView>
)
}