Fixing up playlist UI

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;
 

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 {

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'>

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>
+            <hr />
-            <p v-html='description'></p>
-            <br />
             <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">