From dee4ca355951cd4fd193a450ff598653e95b5492 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 28 Aug 2022 14:21:28 -0500
Subject: [PATCH] Add:Local setting for autoplay next item in queue #603

---
 client/components/app/StreamContainer.vue       |  8 ++++++--
 client/components/cards/LazyBookCard.vue        |  1 +
 .../modals/player/QueueItemsModal.vue           | 14 ++++++++++++++
 client/components/ui/Checkbox.vue               |  7 ++++---
 client/layouts/default.vue                      | 17 ++++++++++++-----
 client/store/index.js                           |  5 +++++
 client/tailwind.config.js                       |  3 ++-
 7 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/client/components/app/StreamContainer.vue b/client/components/app/StreamContainer.vue
index e8fabfc0..5885e0d9 100644
--- a/client/components/app/StreamContainer.vue
+++ b/client/components/app/StreamContainer.vue
@@ -148,8 +148,12 @@ export default {
     }
   },
   methods: {
-    mediaFinished(libraryItemId, episodeId) { // Play next item in queue
-      if (!this.playerQueueItems.length) return
+    mediaFinished(libraryItemId, episodeId) {
+      // Play next item in queue
+      if (!this.playerQueueItems.length || !this.$store.state.playerQueueAutoPlay) {
+        // TODO: Set media finished flag so play button will play next queue item
+        return
+      }
       var currentQueueIndex = this.playerQueueItems.findIndex((i) => {
         if (episodeId) return i.libraryItemId === libraryItemId && i.episodeId === episodeId
         return i.libraryItemId === libraryItemId
diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index fc2285ab..048c473f 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -669,6 +669,7 @@ export default {
 
         if (fullLibraryItem && fullLibraryItem.media.episodes) {
           const episodes = fullLibraryItem.media.episodes || []
+          episodes.sort((a, b) => b.publishedAt - a.publishedAt)
           const episodeIndex = episodes.findIndex((ep) => ep.id === this.recentEpisode.id)
           if (episodeIndex >= 0) {
             for (let i = episodeIndex; i < episodes.length; i++) {
diff --git a/client/components/modals/player/QueueItemsModal.vue b/client/components/modals/player/QueueItemsModal.vue
index b4ee5aef..0b336e2f 100644
--- a/client/components/modals/player/QueueItemsModal.vue
+++ b/client/components/modals/player/QueueItemsModal.vue
@@ -7,6 +7,12 @@
     </template>
     <div ref="container" class="w-full rounded-lg bg-bg box-shadow-md overflow-y-auto overflow-x-hidden py-4" style="max-height: 80vh">
       <div v-if="show" class="w-full h-full">
+        <div class="pb-4 px-4 flex items-center">
+          <p class="text-base text-gray-200">Player Queue</p>
+          <p class="text-base text-gray-400 px-4">{{ playerQueueItems.length }} Items</p>
+          <div class="flex-grow" />
+          <ui-checkbox v-model="playerQueueAutoPlay" label="Auto Play" medium checkbox-bg="primary" border-color="gray-600" label-class="pl-2 mb-px" />
+        </div>
         <modals-player-queue-item-row v-for="(item, index) in playerQueueItems" :key="index" :item="item" :index="index" @play="playItem" @remove="removeItem" />
       </div>
     </div>
@@ -31,6 +37,14 @@ export default {
         this.$emit('input', val)
       }
     },
+    playerQueueAutoPlay: {
+      get() {
+        return this.$store.state.playerQueueAutoPlay
+      },
+      set(val) {
+        this.$store.commit('setPlayerQueueAutoPlay', val)
+      }
+    },
     playerQueueItems() {
       return this.$store.state.playerQueueItems || []
     }
diff --git a/client/components/ui/Checkbox.vue b/client/components/ui/Checkbox.vue
index 10c9a6cb..9210420b 100644
--- a/client/components/ui/Checkbox.vue
+++ b/client/components/ui/Checkbox.vue
@@ -55,9 +55,10 @@ export default {
     },
     labelClassname() {
       if (this.labelClass) return this.labelClass
-      var classes = ['pl-1']
-      if (this.small) classes.push('text-xs md:text-sm')
-      else if (this.medium) classes.push('text-base md:text-lg')
+      var classes = []
+      if (this.small) classes.push('text-xs md:text-sm pl-1')
+      else if (this.medium) classes.push('text-base md:text-lg pl-2')
+      else classes.push('pl-2')
       return classes.join(' ')
     },
     svgClass() {
diff --git a/client/layouts/default.vue b/client/layouts/default.vue
index 5a4b2f89..3e4202f2 100644
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@@ -522,6 +522,17 @@ export default {
           if (res && res.hasUpdate) this.showUpdateToast(res)
         })
         .catch((err) => console.error(err))
+    },
+    initLocalStorage() {
+      // If experimental features set in local storage
+      var experimentalFeaturesSaved = localStorage.getItem('experimental')
+      if (experimentalFeaturesSaved === '1') {
+        this.$store.commit('setExperimentalFeatures', true)
+      }
+
+      // Queue auto play
+      var playerQueueAutoPlay = localStorage.getItem('playerQueueAutoPlay')
+      this.$store.commit('setPlayerQueueAutoPlay', playerQueueAutoPlay !== '0')
     }
   },
   beforeMount() {
@@ -535,11 +546,7 @@ export default {
 
     this.$store.dispatch('libraries/load')
 
-    // If experimental features set in local storage
-    var experimentalFeaturesSaved = localStorage.getItem('experimental')
-    if (experimentalFeaturesSaved === '1') {
-      this.$store.commit('setExperimentalFeatures', true)
-    }
+    this.initLocalStorage()
 
     this.checkVersionUpdate()
 
diff --git a/client/store/index.js b/client/store/index.js
index 1cff645d..96e3129a 100644
--- a/client/store/index.js
+++ b/client/store/index.js
@@ -10,6 +10,7 @@ export const state = () => ({
   streamEpisodeId: null,
   streamIsPlaying: false,
   playerQueueItems: [],
+  playerQueueAutoPlay: true,
   playerIsFullscreen: false,
   editModalTab: 'details',
   showEditModal: false,
@@ -158,6 +159,10 @@ export const mutations = {
   setPlayerQueueItems(state, items) {
     state.playerQueueItems = items || []
   },
+  setPlayerQueueAutoPlay(state, autoPlay) {
+    state.playerQueueAutoPlay = !!autoPlay
+    localStorage.setItem('playerQueueAutoPlay', !!autoPlay ? '1' : '0')
+  },
   showEditModal(state, libraryItem) {
     state.editModalTab = 'details'
     state.selectedLibraryItem = libraryItem
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 39092556..c63782d8 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -19,7 +19,8 @@ module.exports = {
       'min-w-5',
       'w-3.5',
       'h-3.5',
-      'border-warning'
+      'border-warning',
+      'mb-px'
     ],
   },
   theme: {