Add Next and Previous buttons to playlist in watch page

src/renderer/components/watch-video-playlist/watch-video-playlist.js

@@ -177,6 +177,43 @@ export default Vue.extend({
       }
     },
 
+    playPreviousVideo: function () {
+      const playlistInfo = {
+        playlistId: this.playlistId
+      }
+
+      const watchedIndex = this.playlistItems.findIndex((watchedVideo) => {
+        return watchedVideo.videoId === this.videoId
+      })
+
+      if (this.shuffleEnabled && this.playlistWatchedVideoList.length > 1) {
+        this.playlistWatchedVideoList.pop()
+        const lastVideo = this.playlistWatchedVideoList.pop()
+        this.$router.push(
+          {
+            path: `/watch/${lastVideo}`,
+            query: playlistInfo
+          }
+        )
+      } else if (watchedIndex === 0) {
+        const videoId = this.playlistItems[this.playlistItems.length - 1].videoId
+        this.$router.push(
+          {
+            path: `/watch/${videoId}`,
+            query: playlistInfo
+          }
+        )
+      } else {
+        const videoId = this.playlistItems[watchedIndex - 1].videoId
+        this.$router.push(
+          {
+            path: `/watch/${videoId}`,
+            query: playlistInfo
+          }
+        )
+      }
+    },
+
     getPlaylistInformationLocal: function () {
       this.isLoading = true
 

src/renderer/components/watch-video-playlist/watch-video-playlist.vue

@@ -36,6 +36,16 @@
           icon="random"
           @click="toggleShuffle"
         />
+        <font-awesome-icon
+          class="playlistIcon"
+          icon="step-backward"
+          @click="playPreviousVideo"
+        />
+        <font-awesome-icon
+          class="playlistIcon"
+          icon="step-forward"
+          @click="playNextVideo"
+        />
       </p>
       <ft-flex-box
         v-if="!isLoading"