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

added playlists

Browse Source
This commit is contained in:
dank074 2021-09-18 19:39:46 -05:00
parent bf782e46ea
commit b0a5e47282
7 changed files with 105 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent.ts
View File

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

10
src/api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler.ts
View File

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

BIN
src/assets/images/room-widgets/youtube-widget/next.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 164 B

BIN
src/assets/images/room-widgets/youtube-widget/prev.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 249 B

12
src/assets/styles/icons.scss
View File

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

45
src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.scss
View File

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

63
src/views/room/widgets/furniture/youtube-tv/FurnitureYoutubeDisplayView.tsx
View File

@ -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<string>(null);
const [selectedItem, setSelectedItem] = useState<string>(null);
const [playlists, setPlaylists] = useState<YoutubeDisplayPlaylist[]>(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 =>
<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="100%" height="100%" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay"></iframe>
<div className="row w-100 h-100">
<div className="youtube-video-container col-9">
{videoUrl && videoUrl.length > 0 &&
<iframe title="yt" width="100%" height="100%" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay" />
}
</div>
<div className="playlist-container col-3">
<span className="playlist-controls justify-content-center d-flex">
<i className="icon icon-youtube-prev cursor-pointer" onClick={(e) => processAction('playlist_prev')} />
<i className="icon icon-youtube-next cursor-pointer" onClick={(e) => processAction('playlist_next')} />
</span>
<div className="playlist-list">
{playlists && playlists.map(entry =>
{
return <div className={'playlist-entry cursor-pointer ' + (entry.video === selectedItem ? 'selected' : '')} key={entry.video} onClick={(e) => processAction(entry.video)}><b>{entry.title}</b> - {entry.description}</div>
})}
</div>
<div className="playlist-container col-4">
lol
</div>
</div>
</NitroCardContentView>