* Update playlist page thumbnail to start playing first video on click (#1361)

src/renderer/components/playlist-info/playlist-info.css

@@ -4,6 +4,8 @@
 
 .playlistThumbnail img {
   width: 100%;
+
+  cursor: pointer;
 }
 
 .playlistChannel {

src/renderer/components/playlist-info/playlist-info.js

@@ -3,7 +3,7 @@ import { mapActions } from 'vuex'
 import FtListDropdown from '../ft-list-dropdown/ft-list-dropdown.vue'
 
 export default Vue.extend({
-  name: 'FtElementList',
+  name: 'PlaylistInfo',
   components: {
     'ft-list-dropdown': FtListDropdown
   },
@@ -16,7 +16,7 @@ export default Vue.extend({
   data: function () {
     return {
       id: '',
-      randomVideoId: '',
+      firstVideoId: '',
       title: '',
       channelThumbnail: '',
       channelName: '',
@@ -59,20 +59,20 @@ export default Vue.extend({
     thumbnail: function () {
       switch (this.thumbnailPreference) {
         case 'start':
-          return `https://i.ytimg.com/vi/${this.randomVideoId}/mq1.jpg`
+          return `https://i.ytimg.com/vi/${this.firstVideoId}/mq1.jpg`
         case 'middle':
-          return `https://i.ytimg.com/vi/${this.randomVideoId}/mq2.jpg`
+          return `https://i.ytimg.com/vi/${this.firstVideoId}/mq2.jpg`
         case 'end':
-          return `https://i.ytimg.com/vi/${this.randomVideoId}/mq3.jpg`
+          return `https://i.ytimg.com/vi/${this.firstVideoId}/mq3.jpg`
         default:
-          return `https://i.ytimg.com/vi/${this.randomVideoId}/mqdefault.jpg`
+          return `https://i.ytimg.com/vi/${this.firstVideoId}/mqdefault.jpg`
       }
     }
   },
   mounted: function () {
     console.log(this.data)
     this.id = this.data.id
-    this.randomVideoId = this.data.randomVideoId
+    this.firstVideoId = this.data.firstVideoId
     this.title = this.data.title
     this.channelName = this.data.channelName
     this.channelThumbnail = this.data.channelThumbnail
@@ -113,6 +113,19 @@ export default Vue.extend({
       }
     },
 
+    playFirstVideo() {
+      const playlistInfo = {
+        playlistId: this.id
+      }
+
+      this.$router.push(
+        {
+          path: `/watch/${this.firstVideoId}`,
+          query: playlistInfo
+        }
+      )
+    },
+
     goToChannel: function () {
       this.$router.push({ path: `/channel/${this.channelId}` })
     },

src/renderer/components/playlist-info/playlist-info.vue

@@ -5,6 +5,7 @@
     >
       <img
         :src="thumbnail"
+        @click="playFirstVideo"
       >
     </div>
     <h2>

src/renderer/views/Playlist/Playlist.js

@@ -67,13 +67,11 @@ export default Vue.extend({
         console.log('done')
         console.log(result)
 
-        const randomVideoIndex = Math.floor((Math.random() * result.items.length))
-
         this.infoData = {
           id: result.id,
           title: result.title,
           description: result.description ? result.description : '',
-          randomVideoId: result.items[randomVideoIndex].id,
+          firstVideoId: result.items[0].id,
           viewCount: result.views,
           videoCount: result.estimatedItemCount,
           lastUpdated: result.lastUpdated ? result.lastUpdated : '',
@@ -125,13 +123,11 @@ export default Vue.extend({
         console.log('done')
         console.log(result)
 
-        const randomVideoIndex = Math.floor((Math.random() * result.videos.length) + 1)
-
         this.infoData = {
           id: result.playlistId,
           title: result.title,
           description: result.description,
-          randomVideoId: result.videos[randomVideoIndex].videoId,
+          firstVideoId: result.videos[0].videoId,
           viewCount: result.viewCount,
           videoCount: result.videoCount,
           channelName: result.author,