From 8d54031ede6083b3f51b6b6c691d3e18309ffe9f Mon Sep 17 00:00:00 2001
From: PrestonN <freetubeapp@protonmail.com>
Date: Mon, 15 Oct 2018 15:00:14 -0400
Subject: [PATCH] Fixing up playlist UI

---
 src/js/player.js                | 2 +-
 src/style/playlist.css          | 8 ++++++++
 src/templates/player.html       | 1 +
 src/templates/playlistView.html | 7 ++++---
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/js/player.js b/src/js/player.js
index 7beb94770..1c6247cd1 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -74,7 +74,7 @@ function playVideo(videoId, playlistId = '') {
         playerView.videoTitle = data.title;
         playerView.channelName = data.author;
         playerView.channelId = data.authorId;
-        //playerView.channelIcon = data['author']['avatar'];
+        playerView.channelIcon = data.authorThumbnails[2].url;
 
         let videoUrls = data.formatStreams;
 
diff --git a/src/style/playlist.css b/src/style/playlist.css
index 11845853a..fd49e7e9d 100644
--- a/src/style/playlist.css
+++ b/src/style/playlist.css
@@ -2,6 +2,8 @@
   float: left;
   position: fixed;
   width: 30%;
+  height: 100%;
+  overflow-y: auto;
 }
 
 .playlistSideView img {
@@ -28,6 +30,10 @@
   cursor: pointer;
 }
 
+.playlistChannel {
+  height: 70px;
+}
+
 .playlistChannel img {
     width: 70px;
     float: left;
@@ -40,8 +46,10 @@
   float: left;
   position: relative;
   cursor: pointer;
+  width: 200px;
   margin-left: 10px;
   top: 5px;
+  font-size: 15px;
 }
 
 .playlistVideoSave {
diff --git a/src/templates/player.html b/src/templates/player.html
index 6e0a7ceda..5b007149c 100644
--- a/src/templates/player.html
+++ b/src/templates/player.html
@@ -85,6 +85,7 @@
     <i id='miniPLLoop' v-on:click='playlistLoopToggle' class='fas fa-redo'></i>
     <i id='miniPLShuffle' v-on:click='playlistShuffleToggle' class='fas fa-random'></i>
     <br /><br />
+    <hr v-if='playlistShowList' style='width: 97%' />
     <div v-if='playlistShowList' id='miniPLVideoList'>
       <div v-for='video in playlistVideoList'>
         <div v-on:click='play(video.videoId, playlistId)' class='miniPLVideo'>
diff --git a/src/templates/playlistView.html b/src/templates/playlistView.html
index 66a3a3a36..cfdaaee99 100644
--- a/src/templates/playlistView.html
+++ b/src/templates/playlistView.html
@@ -22,13 +22,14 @@
                 <img :src='thumbnail' />
             </div>
             <h2>{{title}}</h2>
-            <p>{{videoCount}} videos - {{viewCount}} views - Last updated on {{lastUpdated}}</p>
-            <p v-html='description'></p>
-            <br />
+            <hr />
             <div v-on:click='channel(channelId)' class='playlistChannel'>
                 <img :src='channelThumbnail' />
                 <h3>{{channelName}}</h3>
             </div>
+            <p>{{videoCount}} videos - {{viewCount}} views - Last updated on {{lastUpdated}}</p>
+            <hr />
+            <p v-html='description'></p>
         </div>
         <div class='playlistVideoView'>
             <div v-for="video in videoList">