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

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

@ -1,75 +1,52 @@
.youtube-tv-widget {
min-width: 600px;
width: 600px;
.youtube-video-container
{
min-height: 315px;
/*
position: relative;
overflow: hidden;
.youtube-video-container {
min-height: 366px;
&::after
{
display: block;
content: "";
//padding-top: 56.25%;
}
.iframe, object, embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
*/
.empty-video
{
.empty-video {
background-color: black;
color: white;
width: 100%;
height: 100%;
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;
margin-right: -10px;
color: black;
height: 100%;
.playlist-controls
{
.playlist-controls {
width: 100%;
.icon
{
.icon {
margin-right: 10px;
margin-bottom: 10px;
}
}
.playlist-list
{
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;
}
}
.playlist-grid {
height: 315px;
}
}
}

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 { FurnitureYoutubeDisplayWidgetHandler } from '../../../../../api/nitro/room/widgets/handlers/FurnitureYoutubeDisplayWidgetHandler';
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 { YoutubeVideoPlaybackStateEnum } from './utils/YoutubeVideoPlaybackStateEnum';
@ -181,8 +181,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
if(!videoStart && !videoEnd)
{
return {
height: '390',
width: '435',
height: '375',
width: '500',
playerVars: {
autoplay: 1,
disablekb: 1,
@ -194,8 +194,8 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
}
return {
height: '390',
width: '435',
height: '375',
width: '500',
playerVars: {
autoplay: 1,
disablekb: 1,
@ -217,7 +217,7 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
<div className="row w-100 h-100">
<div className="youtube-video-container col-9">
{(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) &&
<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')} />
</span>
<div className="mb-1">{LocalizeText('widget.furni.video_viewer.playlists')}</div>
<div className="playlist-list">
{playlists && playlists.map(entry =>
<NitroCardGridView columns={1} className="playlist-grid">
{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>
</NitroCardContentView>