From 825bec1a818113315558eef19985a8230d0fe928 Mon Sep 17 00:00:00 2001
From: PikachuEXE <pikachuexe@gmail.com>
Date: Tue, 15 Jun 2021 22:42:00 +0800
Subject: [PATCH] * Update playlist page thumbnail to start playing first video
 on click (#1361)

---
 .../playlist-info/playlist-info.css           |  2 ++
 .../components/playlist-info/playlist-info.js | 27 ++++++++++++++-----
 .../playlist-info/playlist-info.vue           |  1 +
 src/renderer/views/Playlist/Playlist.js       |  8 ++----
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/renderer/components/playlist-info/playlist-info.css b/src/renderer/components/playlist-info/playlist-info.css
index a848c049..7139aa93 100644
--- a/src/renderer/components/playlist-info/playlist-info.css
+++ b/src/renderer/components/playlist-info/playlist-info.css
@@ -4,6 +4,8 @@
 
 .playlistThumbnail img {
   width: 100%;
+
+  cursor: pointer;
 }
 
 .playlistChannel {
diff --git a/src/renderer/components/playlist-info/playlist-info.js b/src/renderer/components/playlist-info/playlist-info.js
index ec916a89..d94b3599 100644
--- a/src/renderer/components/playlist-info/playlist-info.js
+++ b/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}` })
     },
diff --git a/src/renderer/components/playlist-info/playlist-info.vue b/src/renderer/components/playlist-info/playlist-info.vue
index 889dfefa..dc4aa851 100644
--- a/src/renderer/components/playlist-info/playlist-info.vue
+++ b/src/renderer/components/playlist-info/playlist-info.vue
@@ -5,6 +5,7 @@
     >
       <img
         :src="thumbnail"
+        @click="playFirstVideo"
       >
     </div>
     <h2>
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
index a2cbe79d..725f5f48 100644
--- a/src/renderer/views/Playlist/Playlist.js
+++ b/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,