From 37908738b047c1ebfe655fe2e6bbf5a43d0ab152 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Sat, 10 Dec 2022 01:08:37 +0100
Subject: [PATCH] Add scroller to youtube playlist and cleanup, added header
 (#77)

* 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>
---
 .../room/widgets/furniture/FurnitureWidgets.scss          | 7 +------
 .../widgets/furniture/FurnitureYoutubeDisplayView.tsx     | 8 ++++----
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss
index 78125424..433a139c 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss
@@ -301,8 +301,6 @@
     height: 380px;
 
     .youtube-video-container {
-        //min-height: 366px;
-
         .empty-video {
             background-color: black;
             color: white;
@@ -315,8 +313,6 @@
             position: relative;
             width: 100%;
             height: 100%;
-            //height: 0;
-            //padding-bottom: 56.25%;
             overflow: hidden;
             margin-bottom: 50px;
         }
@@ -331,14 +327,13 @@
     }
 
     .playlist-container {
-        overflow-y: hidden;
+        overflow-y: auto;
         margin-right: -10px;
         color: black;
         height: 100%;
 
         .playlist-controls {
             width: 100%;
-
             .icon {
                 margin-right: 10px;
                 margin-bottom: 10px;
diff --git a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
index 3bae762c..cd7d43d4 100644
--- a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
@@ -74,10 +74,10 @@ export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewPr
 
     return (
         <NitroCardView className="youtube-tv-widget">
-            <NitroCardHeaderView headerText={ '' } onCloseClick={ onClose } />
+		<NitroCardHeaderView headerText={ LocalizeText('catalog.page.youtube_tvs') } onCloseClick={ onClose } />
             <NitroCardContentView>
                 <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) &&
                             <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>
-                    <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">
                             <i className="icon icon-youtube-prev cursor-pointer" onClick={ previous } />
                             <i className="icon icon-youtube-next cursor-pointer" onClick={ next } />
                         </span>
                         <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) =>
                             {
                                 return (