mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-07-16 00:44:51 +02:00
Update:Ereader fullscreen #731
This commit is contained in:
advplyr
parent
4f9d341f69
commit
7b3a005ad6
8 changed files with 165 additions and 59 deletions
|
|
@ -1,11 +1,18 @@
|
|||
<template>
|
||||
<div v-if="show" class="absolute top-0 left-0 w-full h-full bg-primary z-40 pt-18" :class="{ 'reader-player-open': !!playerLibraryItemId }">
|
||||
<div class="h-18 pt-10 w-full flex bg-bg items-center px-2 fixed top-0 left-0 z-30">
|
||||
<p class="w-5/6 truncate">{{ title }}</p>
|
||||
<div class="flex-grow" />
|
||||
<span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
|
||||
<div v-if="show" class="fixed top-0 left-0 right-0 layout-wrapper w-full bg-primary z-40 pt-8" :class="{ 'reader-player-open': !!playerLibraryItemId }">
|
||||
<div class="h-28 pt-8 w-full bg-bg px-2 fixed top-0 left-0 z-30 transition-transform" :class="showingToolbar ? 'translate-y-0' : '-translate-y-28'" @touchstart.stop @mousedown.stop @touchend.stop @mouseup.stop>
|
||||
<div class="flex items-center mb-2">
|
||||
<button type="button" class="inline-flex mx-2" @click.stop="show = false"><span class="material-icons-outlined text-3xl text-white">chevron_left</span></button>
|
||||
<div class="flex-grow" />
|
||||
<button v-if="isComic" type="button" class="inline-flex mx-2" @click.stop="clickTOCBtn"><span class="material-icons-outlined text-2xl text-white">format_list_bulleted</span></button>
|
||||
<!-- <button v-if="isEpub" type="button" class="inline-flex mx-2" @click.stop="clickSettingsBtn"><span class="material-icons text-2xl text-white">settings</span></button> -->
|
||||
<button v-if="comicHasMetadata" type="button" class="inline-flex mx-2" @click.stop="clickMetadataBtn"><span class="material-icons text-2xl text-white">more</span></button>
|
||||
</div>
|
||||
|
||||
<p class="text-center truncate">{{ title }}</p>
|
||||
</div>
|
||||
<component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" />
|
||||
|
||||
<component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" @touchstart="touchstart" @touchend="touchend" @loaded="readerLoaded" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -19,16 +26,26 @@ export default {
|
|||
touchstartY: 0,
|
||||
touchendX: 0,
|
||||
touchendY: 0,
|
||||
touchstartTime: 0
|
||||
touchstartTime: 0,
|
||||
touchIdentifier: null,
|
||||
showingToolbar: false,
|
||||
showTOCModal: false,
|
||||
showSettingsModal: false,
|
||||
comicHasMetadata: false,
|
||||
chapters: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.showingToolbar = false
|
||||
this.comicHasMetadata = false
|
||||
this.registerListeners()
|
||||
this.$showHideStatusBar(false)
|
||||
} else {
|
||||
this.unregisterListeners()
|
||||
this.$showHideStatusBar(true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,6 +141,25 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
readerLoaded(data) {
|
||||
if (this.isComic) {
|
||||
this.comicHasMetadata = data.hasMetadata
|
||||
}
|
||||
},
|
||||
clickMetadataBtn() {
|
||||
this.$refs.readerComponent?.clickShowInfoMenu()
|
||||
},
|
||||
clickTOCBtn() {
|
||||
if (this.isComic) {
|
||||
this.$refs.readerComponent?.clickShowPageMenu?.()
|
||||
} else {
|
||||
this.chapters = this.$refs.readerComponent?.chapters || []
|
||||
this.showTOCModal = true
|
||||
}
|
||||
},
|
||||
clickSettingsBtn() {
|
||||
this.showSettingsModal = true
|
||||
},
|
||||
next() {
|
||||
if (this.$refs.readerComponent && this.$refs.readerComponent.next) {
|
||||
this.$refs.readerComponent.next()
|
||||
|
|
@ -135,7 +171,7 @@ export default {
|
|||
}
|
||||
},
|
||||
handleGesture() {
|
||||
// Touch must be less than 1s. Must be > 100px drag and X distance > Y distance
|
||||
// Touch must be less than 1s. Must be > 60px drag and X distance > Y distance
|
||||
const touchTimeMs = Date.now() - this.touchstartTime
|
||||
if (touchTimeMs >= 1000) {
|
||||
console.log('Touch too long', touchTimeMs)
|
||||
|
|
@ -144,10 +180,16 @@ export default {
|
|||
|
||||
const touchDistanceX = Math.abs(this.touchendX - this.touchstartX)
|
||||
const touchDistanceY = Math.abs(this.touchendY - this.touchstartY)
|
||||
if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) {
|
||||
const touchDistance = Math.sqrt(Math.pow(this.touchstartX - this.touchendX, 2) + Math.pow(this.touchstartY - this.touchendY, 2))
|
||||
if (touchDistance < 60) {
|
||||
this.toggleToolbar()
|
||||
return
|
||||
}
|
||||
|
||||
if (touchDistanceX < 60 || touchDistanceY > touchDistanceX) {
|
||||
return
|
||||
}
|
||||
this.hideToolbar()
|
||||
if (this.touchendX < this.touchstartX) {
|
||||
this.next()
|
||||
}
|
||||
|
|
@ -155,12 +197,31 @@ export default {
|
|||
this.prev()
|
||||
}
|
||||
},
|
||||
showToolbar() {
|
||||
this.showingToolbar = true
|
||||
},
|
||||
hideToolbar() {
|
||||
this.showingToolbar = false
|
||||
},
|
||||
toggleToolbar() {
|
||||
if (this.showingToolbar) this.hideToolbar()
|
||||
else this.showToolbar()
|
||||
},
|
||||
touchstart(e) {
|
||||
// Ignore rapid touch
|
||||
if (this.touchstartTime && Date.now() - this.touchstartTime < 250) {
|
||||
return
|
||||
}
|
||||
|
||||
this.touchstartX = e.touches[0].screenX
|
||||
this.touchstartY = e.touches[0].screenY
|
||||
this.touchstartTime = Date.now()
|
||||
this.touchIdentifier = e.touches[0].identifier
|
||||
},
|
||||
touchend(e) {
|
||||
if (this.touchIdentifier !== e.changedTouches[0].identifier) {
|
||||
return
|
||||
}
|
||||
this.touchendX = e.changedTouches[0].screenX
|
||||
this.touchendY = e.changedTouches[0].screenY
|
||||
this.handleGesture()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue