Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-12-20 19:06:06 +01:00
Code Issues Packages Projects Releases Wiki Activity

Update:Click chapter times in chapters table to jump to timestamp

Browse Source
This commit is contained in:
advplyr 2022-07-30 12:25:15 -05:00
parent 3cf8b9dca9
commit 92bedeac15
9 changed files with 65 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/components/app/StreamContainer.vue
View File

@ -364,7 +364,11 @@ export default {
var episodeId = payload.episodeId || null
if (this.playerHandler.libraryItemId == libraryItemId && this.playerHandler.episodeId == episodeId) {
this.playerHandler.play()
if (payload.startTime !== null && !isNaN(payload.startTime)) {
this.seek(payload.startTime)
} else {
this.playerHandler.play()
}
return
}

2
client/components/modals/EditSeriesInputInnerModal.vue
View File

@ -89,7 +89,6 @@ export default {
setTimeout(() => {
this.content.style.transform = 'scale(1)'
}, 10)
document.documentElement.classList.add('modal-open')
this.$store.commit('setInnerModalOpen', true)
this.$eventBus.$on('modal-hotkey', this.hotkey)
@ -97,7 +96,6 @@ export default {
setHide() {
if (this.content) this.content.style.transform = 'scale(0)'
if (this.el) this.el.remove()
document.documentElement.classList.remove('modal-open')
this.$store.commit('setInnerModalOpen', false)
this.$eventBus.$off('modal-hotkey', this.hotkey)

15
client/components/modals/Modal.vue
View File

@ -50,7 +50,8 @@ export default {
return {
el: null,
content: null,
preventClickoutside: false
preventClickoutside: false,
isShowingPrompt: false
}
},
watch: {
@ -93,7 +94,7 @@ export default {
this.show = false
},
clickBg(ev) {
if (!this.show) return
if (!this.show || this.isShowingPrompt) return
if (this.preventClickoutside) {
this.preventClickoutside = false
return
@ -147,8 +148,16 @@ export default {
} else {
console.warn('Invalid modal init', this.name)
}
},
showingPrompt(isShowing) {
this.isShowingPrompt = isShowing
}
},
mounted() {}
mounted() {
this.$eventBus.$on('showing-prompt', this.showingPrompt)
},
beforeDestroy() {
this.$eventBus.$off('showing-prompt', this.showingPrompt)
}
}
</script>

18
client/components/prompt/Confirm.vue
View File

@ -1,5 +1,5 @@
<template>
<div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-50 opacity-0">
<div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-75 flex items-center justify-center z-60 opacity-0">
<div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
<div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
<div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
@ -68,7 +68,12 @@ export default {
}
},
methods: {
clickedOutside() {
clickedOutside(evt) {
if (evt) {
evt.stopPropagation()
evt.preventDefault()
}
if (this.persistent) return
if (this.callback) this.callback(false)
this.show = false
@ -82,16 +87,16 @@ export default {
this.show = false
},
setShow() {
this.$eventBus.$emit('showing-prompt', true)
document.body.appendChild(this.el)
setTimeout(() => {
this.content.style.transform = 'scale(1)'
}, 10)
document.documentElement.classList.add('modal-open')
},
setHide() {
this.$eventBus.$emit('showing-prompt', false)
this.content.style.transform = 'scale(0)'
this.el.remove()
document.documentElement.classList.remove('modal-open')
}
},
mounted() {
@ -101,6 +106,11 @@ export default {
this.content.style.transition = 'transform 0.25s cubic-bezier(0.16, 1, 0.3, 1)'
this.el.style.opacity = 1
this.el.remove()
},
beforeDestroy() {
if (this.show) {
this.$eventBus.$emit('showing-prompt', false)
}
}
}
</script>

2
client/components/prompt/Dialog.vue
View File

@ -65,12 +65,10 @@ export default {
setTimeout(() => {
this.content.style.transform = 'scale(1)'
}, 10)
document.documentElement.classList.add('modal-open')
},
setHide() {
this.content.style.transform = 'scale(0)'
this.el.remove()
document.documentElement.classList.remove('modal-open')
}
},
mounted() {

31
client/components/tables/ChaptersTable.vue
View File

@ -24,10 +24,10 @@
<td class="font-book">
{{ chapter.title }}
</td>
<td class="font-mono text-center">
<td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
{{ $secondsToTimestamp(chapter.start) }}
</td>
<td class="font-mono text-center">
<td class="font-mono text-center hover:underline cursor-pointer" @click.stop="goToTimestamp(chapter.start)">
{{ $secondsToTimestamp(chapter.end) }}
</td>
</tr>
@ -57,6 +57,9 @@ export default {
media() {
return this.libraryItem ? this.libraryItem.media || {} : {}
},
metadata() {
return this.media.metadata || {}
},
chapters() {
return this.media.chapters || []
},
@ -67,6 +70,30 @@ export default {
methods: {
clickBar() {
this.expanded = !this.expanded
},
goToTimestamp(time) {
if (this.$store.getters['getIsMediaStreaming'](this.libraryItemId)) {
this.$eventBus.$emit('play-item', {
libraryItemId: this.libraryItemId,
episodeId: null,
startTime: time
})
} else {
const payload = {
message: `Start playback for "${this.metadata.title}" at ${this.$secondsToTimestamp(time)}?`,
callback: (confirmed) => {
if (confirmed) {
this.$eventBus.$emit('play-item', {
libraryItemId: this.libraryItemId,
episodeId: null,
startTime: time
})
}
},
type: 'yesNo'
}
this.$store.commit('globals/setConfirmPrompt', payload)
}
}
},
mounted() {}

2
client/components/tables/podcast/EpisodeTableRow.vue
View File

@ -78,7 +78,7 @@ export default {
return this.$secondsToTimestamp(this.episode.duration)
},
isStreaming() {
return this.$store.getters['getIsEpisodeStreaming'](this.libraryItemId, this.episode.id)
return this.$store.getters['getIsMediaStreaming'](this.libraryItemId, this.episode.id)
},
streamIsPlaying() {
return this.$store.state.streamIsPlaying && this.isStreaming

3
client/store/index.js
View File

@ -41,8 +41,9 @@ export const getters = {
getLibraryItemIdStreaming: state => {
return state.streamLibraryItem ? state.streamLibraryItem.id : null
},
getIsEpisodeStreaming: state => (libraryItemId, episodeId) => {
getIsMediaStreaming: state => (libraryItemId, episodeId) => {
if (!state.streamLibraryItem) return null
if (!episodeId) return state.streamLibraryItem.id == libraryItemId
return state.streamLibraryItem.id == libraryItemId && state.streamEpisodeId == episodeId
}
}

3
client/tailwind.config.js
View File

@ -91,7 +91,8 @@ module.exports = {
'2.5xl': '1.6875rem'
},
zIndex: {
'50': 50
'50': 50,
'60': 60
}
}
},