Update:Syncing playback time when media item is open in player

This commit is contained in:
advplyr
2023-06-19 12:37:44 -05:00
parent b4bf10d409
commit ff4f8324e7
25 changed files with 149 additions and 177 deletions
+3 -3
View File
@@ -23,7 +23,7 @@
</div>
</div>
<div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
<div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
<div class="flex-grow" />
<p class="text-xs">{{ page }} / {{ numPages }}</p>
</div>
@@ -148,8 +148,8 @@ export default {
}
})
},
playerLibraryItemId() {
return this.$store.state.playerLibraryItemId
isPlayerOpen() {
return this.$store.getters['getIsPlayerOpen']
}
},
methods: {
+5 -5
View File
@@ -2,7 +2,7 @@
<div id="epub-frame" class="w-full">
<div id="viewer" class="h-full w-full"></div>
<div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-primary text-white/80'" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
<div class="fixed left-0 h-8 w-full px-4 flex items-center" :class="isLightTheme ? 'bg-white text-black' : 'bg-primary text-white/80'" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
<div class="flex-grow" />
<p class="text-xs">{{ progress }}%</p>
</div>
@@ -37,7 +37,7 @@ export default {
}
},
watch: {
playerLibraryItemId() {
isPlayerOpen() {
this.updateHeight()
}
},
@@ -65,11 +65,11 @@ export default {
}
return null
},
playerLibraryItemId() {
return this.$store.state.playerLibraryItemId
isPlayerOpen() {
return this.$store.getters['getIsPlayerOpen']
},
readerHeightOffset() {
return this.playerLibraryItemId ? 204 : 84
return this.isPlayerOpen ? 204 : 104
},
/** @returns {Array<ePub.NavItem>} */
chapters() {
-3
View File
@@ -23,9 +23,6 @@ export default {
return {}
},
computed: {
playerLibraryItemId() {
return this.$store.state.playerLibraryItemId
},
userToken() {
return this.$store.getters['user/getToken']
}
+3 -3
View File
@@ -18,7 +18,7 @@
</div>
</div>
<div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
<div class="fixed left-0 h-8 w-full bg-primary px-4 flex items-center text-white/80" :style="{ bottom: isPlayerOpen ? '120px' : '0px' }">
<div class="flex-grow" />
<p class="text-xs">{{ page }} / {{ numPages }}</p>
</div>
@@ -114,8 +114,8 @@ export default {
}
}
},
playerLibraryItemId() {
return this.$store.state.playerLibraryItemId
isPlayerOpen() {
return this.$store.getters['getIsPlayerOpen']
}
},
methods: {
+3 -3
View File
@@ -1,5 +1,5 @@
<template>
<div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': !!playerLibraryItemId }">
<div v-if="show" :data-theme="ereaderTheme" class="group fixed top-0 left-0 right-0 layout-wrapper w-full z-40 pt-8 data-[theme=dark]:bg-primary data-[theme=dark]:text-white data-[theme=light]:bg-white data-[theme=light]:text-black" :class="{ 'reader-player-open': isPlayerOpen }">
<!-- toolbar -->
<div class="h-32 pt-10 w-full px-2 fixed top-0 left-0 z-30 transition-transform bg-bg text-white" :class="showingToolbar ? 'translate-y-0' : '-translate-y-32'" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
<div class="flex items-center mb-2">
@@ -213,8 +213,8 @@ export default {
}
return `${serverAddress}/api/items/${this.selectedLibraryItem.id}/ebook`
},
playerLibraryItemId() {
return this.$store.state.playerLibraryItemId
isPlayerOpen() {
return this.$store.getters['getIsPlayerOpen']
},
keepProgress() {
return this.$store.state.ereaderKeepProgress