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 @@
+
+
Player Queue
+
{{ playerQueueItems.length }} Items
+
+
+
@@ -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: {