From b9d39912bf63ce3d4ce86d45a09d631457105428 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Thu, 3 Nov 2022 10:33:10 +0000
Subject: [PATCH] Fix the Youtube playlist layout

---
 .../furniture/FurnitureYoutubeDisplayView.tsx   | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
index 18585713..3bae762c 100644
--- a/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureYoutubeDisplayView.tsx
@@ -2,10 +2,15 @@ import { FC, useEffect, useState } from 'react';
 import YouTube, { Options } from 'react-youtube';
 import { YouTubePlayer } from 'youtube-player/dist/types';
 import { LocalizeText, YoutubeVideoPlaybackStateEnum } from '../../../../api';
-import { Grid, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { AutoGrid, AutoGridProps, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { useFurnitureYoutubeWidget } from '../../../../hooks';
 
-export const FurnitureYoutubeDisplayView: FC<{}> = props =>
+interface FurnitureYoutubeDisplayViewProps extends AutoGridProps
+{
+
+}
+
+export const FurnitureYoutubeDisplayView: FC<{}> = FurnitureYoutubeDisplayViewProps =>
 {
     const [ player, setPlayer ] = useState<any>(null);
     const { objectId = -1, videoId = null, videoStart = 0, videoEnd = 0, currentVideoState = null, selectedVideo = null, playlists = [], onClose = null, previous = null, next = null, pause = null, play = null, selectVideo = null } = useFurnitureYoutubeWidget();
@@ -86,16 +91,16 @@ export const FurnitureYoutubeDisplayView: FC<{}> = props =>
                             <i className="icon icon-youtube-next cursor-pointer" onClick={ next } />
                         </span>
                         <div className="mb-1">{ LocalizeText('widget.furni.video_viewer.playlists') }</div>
-                        <Grid columnCount={ 1 } className="playlist-grid">
+                        <AutoGrid columnCount={ 1 } columnMinWidth={ 80 } columnMinHeight={ 150 }>
                             { playlists && playlists.map((entry, index) =>
                             {
                                 return (
                                     <LayoutGridItem key={ index } onClick={ event => selectVideo(entry.video) } itemActive={ (entry.video === selectedVideo) }>
-                                        <b>{ entry.title }</b> - { entry.description }
+                                        <b>{ entry.title }</b>
                                     </LayoutGridItem>
-                                )
+								)
                             }) }
-                        </Grid>
+                        </AutoGrid>
                     </div>
                 </div>
             </NitroCardContentView>