nitro/nitro-react
1
0
Fork 0
mirror of https://github.com/billsonnn/nitro-react.git synced 2024-10-23 03:13:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

changes

Browse Source
This commit is contained in:
dank074 2021-09-18 21:15:12 -05:00
parent b0a5e47282
commit 433c795325
5 changed files with 59 additions and 10 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,16 +5,23 @@ export class RoomWidgetUpdateYoutubeDisplayEvent extends RoomWidgetUpdateEvent
public static UPDATE_YOUTUBE_DISPLAY: string = 'RWUEIE_UPDATE_YOUTUBE_DISPLAY';
private _objectId: number;
private _hasControl: boolean;
constructor(objectId: number)
constructor(objectId: number, hasControl = false)
{
super(RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY);
this._objectId = objectId;
this._hasControl = hasControl;
}
public get objectId(): number
{
return this._objectId;
}
public get hasControl(): boolean
{
return this._hasControl;
}
}

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

@ -1,8 +1,10 @@
import { SecurityLevel } from '@nitrots/nitro-renderer';
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 { RoomWidgetEnum } from '@nitrots/nitro-renderer/src/nitro/ui/widget/enums/RoomWidgetEnum';
import { RoomWidgetMessage, RoomWidgetUpdateEvent } from '..';
import { GetSessionDataManager, IsOwnerOfFurniture } from '../../..';
import { SendMessageHook } from '../../../../../hooks';
import { GetRoomEngine } from '../../GetRoomEngine';
import { RoomWidgetUpdateYoutubeDisplayEvent } from '../events/RoomWidgetUpdateYoutubeDisplayEvent';
@ -30,7 +32,8 @@ export class FurnitureYoutubeDisplayWidgetHandler extends RoomWidgetHandler
this._lastFurniId = widgetEvent.objectId;
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id));
const hasControl = GetSessionDataManager().hasSecurity(SecurityLevel.EMPLOYEE) || IsOwnerOfFurniture(roomObject);
this.container.eventDispatcher.dispatchEvent(new RoomWidgetUpdateYoutubeDisplayEvent(roomObject.id, hasControl));
SendMessageHook(new GetYoutubeDisplayStatusMessageComposer(this._lastFurniId));
return;
}

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

@ -24,18 +24,29 @@
height: 100%;
}
*/
.empty-video
{
background-color: black;
color: white;
width: 100%;
height: 100%;
text-align: center;
}
}
.playlist-container
{
overflow-y: hidden;
margin-right: -10px;
color:black;
.playlist-controls
{
width: 100%;
.icon
{
margin-right: 10px;
margin-bottom: 10px;
}
}
@ -49,7 +60,6 @@
.playlist-entry
{
color: black;
background-color: beige;
width: 100%;
height: 50px;

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

@ -1,5 +1,6 @@
import { ControlYoutubeDisplayPlaybackMessageComposer, SetYoutubeDisplayPlaylistMessageComposer, YoutubeControlVideoMessageEvent, YoutubeDisplayPlaylist, YoutubeDisplayPlaylistsEvent, YoutubeDisplayVideoMessageEvent } from '@nitrots/nitro-renderer';
import { FC, useCallback, useState } from 'react';
import { LocalizeText } from '../../../../../api';
import { RoomWidgetUpdateYoutubeDisplayEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent';
import { FurnitureYoutubeDisplayWidgetHandler } from '../../../../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler';
import { CreateEventDispatcherHook, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
@ -12,6 +13,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
const [videoUrl, setVideoUrl] = useState<string>(null);
const [selectedItem, setSelectedItem] = useState<string>(null);
const [playlists, setPlaylists] = useState<YoutubeDisplayPlaylist[]>(null);
const [hasControl, setHasControl] = useState(false);
const [player, setPlayer] = useState<any>(null);
const { eventDispatcher = null } = useRoomContext();
const onRoomWidgetUpdateYoutubeDisplayEvent = useCallback((event: RoomWidgetUpdateYoutubeDisplayEvent) =>
@ -20,6 +23,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
{
case RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY: {
setObjectId(event.objectId);
setHasControl(event.hasControl);
}
}
}, []);
@ -30,6 +34,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
setVideoUrl(null)
setSelectedItem(null);
setPlaylists(null);
setHasControl(false);
}, []);
CreateEventDispatcherHook(RoomWidgetUpdateYoutubeDisplayEvent.UPDATE_YOUTUBE_DISPLAY, eventDispatcher, onRoomWidgetUpdateYoutubeDisplayEvent);
@ -44,11 +49,11 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
if(parser.endAtSeconds > 0 || parser.startAtSeconds > 0)
{
setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?start=${parser.startAtSeconds}&end=${parser.endAtSeconds}?autoplay=1`);
setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?start=${parser.startAtSeconds}&end=${parser.endAtSeconds}&autoplay=1&disablekb=1&controls=0&origin=${window.origin}&modestbranding=1`);
}
else
{
setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?autoplay=1`);
setVideoUrl(`https://www.youtube.com/embed/${parser.videoId}?autoplay=1&disablekb=1&controls=0&origin=${window.origin}&modestbranding=1`);
}
}, [objectId]);
@ -102,15 +107,26 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
case 'playlist_next':
SendMessageHook(new ControlYoutubeDisplayPlaybackMessageComposer(objectId, FurnitureYoutubeDisplayWidgetHandler.CONTROL_COMMAND_NEXT_VIDEO));
break;
case 'video_click':
if(hasControl && videoUrl && videoUrl.length)
{
// pause or play
}
break;
default:
if(selectedItem === action)
{
setSelectedItem(null);
SendMessageHook(new SetYoutubeDisplayPlaylistMessageComposer(objectId, ''));
return;
}
SendMessageHook(new SetYoutubeDisplayPlaylistMessageComposer(objectId, action));
setSelectedItem(action);
}
}, [objectId]);
}, [hasControl, objectId, selectedItem, videoUrl]);
if((objectId === -1)) return null;
console.log(objectId);
return (
<NitroCardView className="youtube-tv-widget">
<NitroCardHeaderView headerText={''} onCloseClick={close} />
@ -120,16 +136,20 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
{videoUrl && videoUrl.length > 0 &&
<iframe title="yt" width="100%" height="100%" src={videoUrl} frameBorder="0" allowFullScreen allow="autoplay" />
}
{(!videoUrl || videoUrl.length === 0) &&
<div className="empty-video w-100 h-100 justify-content-center align-items-center d-flex">{LocalizeText('widget.furni.video_viewer.no_videos')}</div>
}
</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')} />
<i className="icon icon-youtube-prev cursor-pointer" onClick={() => processAction('playlist_prev')} />
<i className="icon icon-youtube-next cursor-pointer" onClick={() => processAction('playlist_next')} />
</span>
<div className="mb-1">{LocalizeText('widget.furni.video_viewer.playlists')}</div>
<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>
return <div className={'playlist-entry cursor-pointer ' + (entry.video === selectedItem ? 'selected' : '')} key={entry.video} onClick={() => processAction(entry.video)}><b>{entry.title}</b> - {entry.description}</div>
})}
</div>
</div>

9
src/views/room/widgets/furniture/youtube-tv/utils/YoutubeVideoPlaybackStateEnum.ts Normal file
View File

@ -0,0 +1,9 @@
export class YoutubeVideoPlaybackStateEnum
{
public static readonly UNSTARTED = -1;
public static readonly ENDED = 0;
public static readonly PLAYING = 1;
public static readonly PAUSED = 2;
public static readonly BUFFERING = 3;
public static readonly CUED = 5;
}