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

make video responsive

Browse Source
This commit is contained in:
dank074 2021-11-12 17:01:12 -06:00
parent 11ad7fc72e
commit 734a2133b1
2 changed files with 44 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,75 +1,52 @@
.youtube-tv-widget { .youtube-tv-widget {
min-width: 600px; width: 600px;
.youtube-video-container .youtube-video-container {
{ min-height: 366px;
min-height: 315px;
/*
position: relative;
overflow: hidden;
&::after .empty-video {
{
display: block;
content: "";
//padding-top: 56.25%;
}
.iframe, object, embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*/
.empty-video
{
background-color: black; background-color: black;
color: white; color: white;
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
} }
.youtubeContainer {
position: relative;
width: 100%;
height: 100%;
//height: 0;
//padding-bottom: 56.25%;
overflow: hidden;
margin-bottom: 50px;
} }
.playlist-container .youtubeContainer iframe {
{ width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
}
.playlist-container {
overflow-y: hidden; overflow-y: hidden;
margin-right: -10px; margin-right: -10px;
color:black; color: black;
height: 100%;
.playlist-controls .playlist-controls {
{
width: 100%; width: 100%;
.icon .icon {
{
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.playlist-list .playlist-grid {
{ height: 315px;
margin-top: 10px;
width: 100%;
margin-bottom: 5px;
height: 100%;
overflow-y: scroll;
.playlist-entry
{
background-color: beige;
width: 100%;
height: 50px;
border-radius: 0.5px;
&.selected
{
background-color: #40a2c9;
}
}
} }
} }
} }

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

@ -5,7 +5,7 @@ import { LocalizeText } from '../../../../../api';
import { RoomWidgetUpdateYoutubeDisplayEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent'; import { RoomWidgetUpdateYoutubeDisplayEvent } from '../../../../../api/nitro/room/widgets/events/RoomWidgetUpdateYoutubeDisplayEvent';
import { FurnitureYoutubeDisplayWidgetHandler } from '../../../../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler'; import { FurnitureYoutubeDisplayWidgetHandler } from '../../../../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler';
import { BatchUpdates, CreateEventDispatcherHook, CreateMessageHook, SendMessageHook } from '../../../../../hooks'; import { BatchUpdates, CreateEventDispatcherHook, CreateMessageHook, SendMessageHook } from '../../../../../hooks';
import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../../layout'; import { NitroCardContentView, NitroCardGridItemView, NitroCardGridView, NitroCardHeaderView, NitroCardView } from '../../../../../layout';
import { useRoomContext } from '../../../context/RoomContext'; import { useRoomContext } from '../../../context/RoomContext';
import { YoutubeVideoPlaybackStateEnum } from './utils/YoutubeVideoPlaybackStateEnum'; import { YoutubeVideoPlaybackStateEnum } from './utils/YoutubeVideoPlaybackStateEnum';
@ -181,8 +181,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
if(!videoStart && !videoEnd) if(!videoStart && !videoEnd)
{ {
return { return {
height: '390', height: '375',
width: '435', width: '500',
playerVars: { playerVars: {
autoplay: 1, autoplay: 1,
disablekb: 1, disablekb: 1,
@ -194,8 +194,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
} }
return { return {
height: '390', height: '375',
width: '435', width: '500',
playerVars: { playerVars: {
autoplay: 1, autoplay: 1,
disablekb: 1, disablekb: 1,
@ -217,7 +217,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
<div className="row w-100 h-100"> <div className="row w-100 h-100">
<div className="youtube-video-container col-9"> <div className="youtube-video-container col-9">
{(videoId && videoId.length > 0) && {(videoId && videoId.length > 0) &&
<YouTube videoId={videoId} opts={getYoutubeOpts as Options} onReady={onReady} onStateChange={onStateChange} /> <YouTube videoId={videoId} opts={getYoutubeOpts as Options} onReady={onReady} onStateChange={onStateChange} containerClassName={'youtubeContainer'} />
} }
{(!videoId || videoId.length === 0) && {(!videoId || videoId.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 className="empty-video w-100 h-100 justify-content-center align-items-center d-flex">{LocalizeText('widget.furni.video_viewer.no_videos')}</div>
@ -229,12 +229,16 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
<i className="icon icon-youtube-next cursor-pointer" onClick={() => processAction('playlist_next')} /> <i className="icon icon-youtube-next cursor-pointer" onClick={() => processAction('playlist_next')} />
</span> </span>
<div className="mb-1">{LocalizeText('widget.furni.video_viewer.playlists')}</div> <div className="mb-1">{LocalizeText('widget.furni.video_viewer.playlists')}</div>
<div className="playlist-list"> <NitroCardGridView columns={1} className="playlist-grid">
{playlists && playlists.map(entry => {playlists && playlists.map((entry, index) =>
{ {
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> return (
<NitroCardGridItemView key={index} onClick={() => processAction(entry.video)} itemActive={entry.video === selectedItem}>
<b>{entry.title}</b> - {entry.description}
</NitroCardGridItemView>
)
})} })}
</div> </NitroCardGridView>
</div> </div>
</div> </div>
</NitroCardContentView> </NitroCardContentView>