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

Add scroller to youtube playlist and cleanup, added header (#77)

Browse Source 
* Add scroller to youtube playlist and cleanup, added header to youtube window

You can set the text of the Youtube windows by chaning the : ExternalTexts.json

Look for the :
"catalog.page.youtube_tvs":

* Make it more solid

* Make it more solid

Co-authored-by: duckietm <troop@mailtjes.com>
This commit is contained in:
duckietm 2022-12-10 01:08:37 +01:00 committed by GitHub
parent b479210aca
commit 37908738b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/room/widgets/furniture/FurnitureWidgets.scss
View File

@ -301,8 +301,6 @@
height: 380px; height: 380px;
.youtube-video-container { .youtube-video-container {
//min-height: 366px;
.empty-video { .empty-video {
background-color: black; background-color: black;
color: white; color: white;
@ -315,8 +313,6 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
//height: 0;
//padding-bottom: 56.25%;
overflow: hidden; overflow: hidden;
margin-bottom: 50px; margin-bottom: 50px;
} }
@ -331,14 +327,13 @@
} }
.playlist-container { .playlist-container {
overflow-y: hidden; overflow-y: auto;
margin-right: -10px; margin-right: -10px;
color: black; color: black;
height: 100%; height: 100%;
.playlist-controls { .playlist-controls {
width: 100%; width: 100%;
.icon { .icon {
margin-right: 10px; margin-right: 10px;
margin-bottom: 10px; margin-bottom: 10px;

8
src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
View File

@ -74,10 +74,10 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
return ( return (
<NitroCardView className="youtube-tv-widget"> <NitroCardView className="youtube-tv-widget">
<NitroCardHeaderView headerText={ '' } onCloseClick={ onClose } /> <NitroCardHeaderView headerText={ LocalizeText('catalog.page.youtube_tvs') } onCloseClick={ onClose } />
<NitroCardContentView> <NitroCardContentView>
<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 overflow-hidden">
{ (videoId && videoId.length > 0) && { (videoId && videoId.length > 0) &&
<YouTube videoId={ videoId } opts={ youtubeOptions } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } containerClassName={ 'youtubeContainer' } /> <YouTube videoId={ videoId } opts={ youtubeOptions } onReady={ event => setPlayer(event.target) } onStateChange={ onStateChange } containerClassName={ 'youtubeContainer' } />
} }
@ -85,13 +85,13 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
<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>
} }
</div> </div>
<div className="playlist-container col-3"> <div className="playlist-container col-3 d-flex flex-column">
<span className="playlist-controls justify-content-center d-flex"> <span className="playlist-controls justify-content-center d-flex">
<i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } /> <i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
<i className="icon icon-youtube-next cursor-pointer" onClick={ next } /> <i className="icon icon-youtube-next cursor-pointer" onClick={ 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>
<AutoGrid columnCount={ 1 } columnMinWidth={ 80 } columnMinHeight={ 150 }> <AutoGrid columnCount={ 1 } columnMinWidth={ 80 } columnMinHeight={ 100 } className="mb-1" overflow="auto">
{ playlists && playlists.map((entry, index) => { playlists && playlists.map((entry, index) =>
{ {
return ( return (