mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-07-10 05:54:47 +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
|
|
@ -12,10 +12,10 @@ import android.util.Log
|
|||
import androidx.core.app.ActivityCompat
|
||||
import com.anggrayudi.storage.SimpleStorage
|
||||
import com.anggrayudi.storage.SimpleStorageHelper
|
||||
import com.audiobookshelf.app.plugins.AbsDatabase
|
||||
import com.audiobookshelf.app.managers.DbManager
|
||||
import com.audiobookshelf.app.player.PlayerNotificationService
|
||||
import com.audiobookshelf.app.plugins.AbsAudioPlayer
|
||||
import com.audiobookshelf.app.plugins.AbsDatabase
|
||||
import com.audiobookshelf.app.plugins.AbsDownloader
|
||||
import com.audiobookshelf.app.plugins.AbsFileSystem
|
||||
import com.getcapacitor.BridgeActivity
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div id="comic-reader" class="w-full h-full relative">
|
||||
<div v-show="showInfoMenu" v-click-outside="clickedOutside" class="pagemenu absolute top-8 left-0 rounded-md overflow-y-auto bg-bg shadow-lg z-20 border border-gray-400 w-full" @click.stop.prevent>
|
||||
<modals-modal v-model="showInfoMenu" height="90%">
|
||||
<div class="w-full h-full overflow-hidden absolute top-0 left-0 flex items-center justify-center" @click.stop="showInfoMenu = false">
|
||||
<div class="w-full overflow-x-hidden overflow-y-auto bg-secondary rounded-lg border border-white border-opacity-20" style="max-height: 75%" @click.stop>
|
||||
<div v-for="key in comicMetadataKeys" :key="key" class="w-full px-2 py-1">
|
||||
<p class="text-xs">
|
||||
<strong>{{ key }}</strong>
|
||||
|
|
@ -8,16 +10,8 @@
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="comicMetadata" id="btn-metadata" class="absolute top-0 left-14 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-8 h-7 flex items-center justify-center text-center z-20" @mousedown.prevent @click.stop.prevent="clickShowInfoMenu">
|
||||
<span class="material-icons text-base pointer-events-none">more</span>
|
||||
</div>
|
||||
<div v-if="numPages" id="btn-pages" class="absolute top-0 left-3 bg-bg text-gray-100 border-b border-l border-r border-gray-400 hover:bg-black-200 cursor-pointer rounded-b-md w-8 h-7 flex items-center justify-center text-center z-20" @mousedown.prevent @mouseup.prevent @click.stop.prevent="clickShowPageMenu">
|
||||
<span class="material-icons text-base pointer-events-none">menu</span>
|
||||
</div>
|
||||
<div v-if="numPages" class="absolute top-0 right-3 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-7 flex items-center text-center z-20" @click.stop>
|
||||
<p class="text-sm">{{ page }} / {{ numPages }}</p>
|
||||
</div>
|
||||
</modals-modal>
|
||||
|
||||
<div class="overflow-hidden m-auto comicwrapper relative">
|
||||
<div class="h-full flex justify-center">
|
||||
|
|
@ -29,6 +23,11 @@
|
|||
</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="flex-grow" />
|
||||
<p class="text-xs">{{ page }} / {{ numPages }}</p>
|
||||
</div>
|
||||
|
||||
<modals-dialog v-model="showPageMenu" :items="pageItems" :selected="page" :width="360" item-padding-y="8px" @action="setPage" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -148,6 +147,9 @@ export default {
|
|||
value: index++
|
||||
}
|
||||
})
|
||||
},
|
||||
playerLibraryItemId() {
|
||||
return this.$store.state.playerLibraryItemId
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -191,14 +193,10 @@ export default {
|
|||
this.showPageMenu = false
|
||||
},
|
||||
clickShowPageMenu() {
|
||||
if (!this.numPages) return
|
||||
this.showPageMenu = !this.showPageMenu
|
||||
this.showInfoMenu = false
|
||||
},
|
||||
clickedOutside(e) {
|
||||
if (e.target?.id == 'btn-metadata') return
|
||||
|
||||
if (this.showInfoMenu) this.showInfoMenu = false
|
||||
},
|
||||
next() {
|
||||
if (!this.canGoNext) return
|
||||
this.setPage(this.page + 1)
|
||||
|
|
@ -289,6 +287,10 @@ export default {
|
|||
const startPage = this.savedPage > 0 && this.savedPage <= this.numPages ? this.savedPage : 1
|
||||
await this.setPage(startPage)
|
||||
this.loadedFirstPage = true
|
||||
|
||||
this.$emit('loaded', {
|
||||
hasMetadata: this.comicMetadata
|
||||
})
|
||||
} else {
|
||||
this.$toast.error('Unable to extract pages')
|
||||
this.loading = false
|
||||
|
|
@ -379,9 +381,6 @@ export default {
|
|||
padding-top: 36px;
|
||||
}
|
||||
|
||||
.pagemenu {
|
||||
max-height: calc(100% - 20px);
|
||||
}
|
||||
.comicimg {
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@
|
|||
<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 bg-primary px-2 flex items-center" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
|
||||
<p class="text-xs">epub</p>
|
||||
<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="flex-grow" />
|
||||
|
||||
<p class="text-sm">{{ progress }}%</p>
|
||||
<p class="text-xs">{{ progress }}%</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -66,11 +64,11 @@ export default {
|
|||
return this.$store.state.playerLibraryItemId
|
||||
},
|
||||
readerHeightOffset() {
|
||||
return this.playerLibraryItemId ? 196 : 96
|
||||
return this.playerLibraryItemId ? 156 : 56
|
||||
},
|
||||
/** @returns {Array<ePub.NavItem>} */
|
||||
chapters() {
|
||||
return this.book ? this.book.navigation.toc : []
|
||||
return this.book?.navigation?.toc || []
|
||||
},
|
||||
userItemProgress() {
|
||||
if (this.isLocal) return this.localItemProgress
|
||||
|
|
@ -283,6 +281,13 @@ export default {
|
|||
console.log('Display error', err)
|
||||
})
|
||||
|
||||
reader.rendition.on('touchstart', (event) => {
|
||||
this.$emit('touchstart', event)
|
||||
})
|
||||
reader.rendition.on('touchend', (event) => {
|
||||
this.$emit('touchend', event)
|
||||
})
|
||||
|
||||
// load ebook cfi locations
|
||||
const savedLocations = this.loadLocations()
|
||||
if (savedLocations) {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,6 @@
|
|||
<div class="absolute overflow-hidden left-0 top-0 w-screen max-w-screen m-auto z-10 border border-black border-opacity-20 shadow-md bg-white">
|
||||
<iframe title="html-viewer" class="w-full overflow-hidden"> Loading </iframe>
|
||||
</div>
|
||||
<div class="fixed bottom-0 left-0 h-8 w-full bg-primary px-2 flex items-center z-20" :style="{ bottom: playerLibraryItemId ? '120px' : '0px' }">
|
||||
<p class="text-xs">mobi</p>
|
||||
<div class="flex-grow" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="w-full h-full pt-6 relative">
|
||||
<div class="w-full h-full relative">
|
||||
<div v-show="canGoPrev" class="absolute top-0 left-0 h-full w-1/2 hover:opacity-100 opacity-0 z-10 cursor-pointer" @click.stop.prevent="prev" @mousedown.prevent>
|
||||
<div class="flex items-center justify-center h-full w-1/2">
|
||||
<span class="material-icons text-5xl text-white cursor-pointer text-opacity-30 hover:text-opacity-90">arrow_back_ios</span>
|
||||
|
|
@ -11,17 +11,16 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute top-0 right-1 bg-bg text-gray-100 border-b border-l border-r border-gray-400 rounded-b-md px-2 h-6 flex items-center text-center">
|
||||
<p class="font-mono text-xs">{{ page }} / {{ numPages }}</p>
|
||||
</div>
|
||||
|
||||
<div :style="{ height: pdfHeight + 'px' }" class="overflow-hidden m-auto">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="h-full flex items-center justify-center">
|
||||
<div :style="{ width: pdfWidth + 'px', height: pdfHeight + 'px' }" class="w-full h-full overflow-auto">
|
||||
<div v-if="loadedRatio > 0 && loadedRatio < 1" style="background-color: green; color: white; text-align: center" :style="{ width: loadedRatio * 100 + '%' }">{{ Math.floor(loadedRatio * 100) }}%</div>
|
||||
<pdf ref="pdf" class="m-auto z-10 border border-black border-opacity-20 shadow-md bg-white" :src="pdfDocInitParams" :page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPagesLoaded" @link-clicked="page = $event" @loaded="loadedEvt"></pdf>
|
||||
</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="flex-grow" />
|
||||
<p class="text-xs">{{ page }} / {{ numPages }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -47,7 +46,9 @@ export default {
|
|||
rotate: 0,
|
||||
loadedRatio: 0,
|
||||
page: 1,
|
||||
numPages: 0
|
||||
numPages: 0,
|
||||
windowWidth: 0,
|
||||
windowHeight: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -71,10 +72,16 @@ export default {
|
|||
return null
|
||||
},
|
||||
pdfWidth() {
|
||||
return this.pdfHeight * 0.6667
|
||||
if (this.windowWidth > this.windowHeight) {
|
||||
// Landscape
|
||||
return this.windowHeight * 0.6
|
||||
} else {
|
||||
// Portrait
|
||||
return this.windowWidth
|
||||
}
|
||||
},
|
||||
pdfHeight() {
|
||||
return window.innerHeight - 120
|
||||
return this.pdfWidth * 1.667
|
||||
},
|
||||
canGoNext() {
|
||||
return this.page < this.numPages
|
||||
|
|
@ -106,6 +113,9 @@ export default {
|
|||
Authorization: `Bearer ${this.userToken}`
|
||||
}
|
||||
}
|
||||
},
|
||||
playerLibraryItemId() {
|
||||
return this.$store.state.playerLibraryItemId
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -161,8 +171,32 @@ export default {
|
|||
},
|
||||
error(err) {
|
||||
console.error(err)
|
||||
},
|
||||
screenOrientationChange() {
|
||||
this.windowWidth = window.innerWidth
|
||||
this.windowHeight = window.innerHeight
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
mounted() {
|
||||
this.windowWidth = window.innerWidth
|
||||
this.windowHeight = window.innerHeight
|
||||
|
||||
if (screen.orientation) {
|
||||
// Not available on ios
|
||||
screen.orientation.addEventListener('change', this.screenOrientationChange)
|
||||
} else {
|
||||
document.addEventListener('orientationchange', this.screenOrientationChange)
|
||||
}
|
||||
window.addEventListener('resize', this.screenOrientationChange)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (screen.orientation) {
|
||||
// Not available on ios
|
||||
screen.orientation.removeEventListener('change', this.screenOrientationChange)
|
||||
} else {
|
||||
document.removeEventListener('orientationchange', this.screenOrientationChange)
|
||||
}
|
||||
window.removeEventListener('resize', this.screenOrientationChange)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -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 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" />
|
||||
<span class="material-icons text-xl text-white" @click.stop="show = false">close</span>
|
||||
<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>
|
||||
<component v-if="readerComponentName" ref="readerComponent" :is="readerComponentName" :url="ebookUrl" :library-item="selectedLibraryItem" :is-local="isLocal" :keep-progress="keepProgress" />
|
||||
|
||||
<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" @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()
|
||||
|
|
|
|||
|
|
@ -60,6 +60,9 @@ export default {
|
|||
playerIsOpen() {
|
||||
return this.$store.state.playerLibraryItemId
|
||||
},
|
||||
readerIsOpen() {
|
||||
return this.$store.state.showReader
|
||||
},
|
||||
routeName() {
|
||||
return this.$route.name
|
||||
},
|
||||
|
|
|
|||
|
|
@ -16,6 +16,14 @@ if (Capacitor.getPlatform() != 'web') {
|
|||
setStatusBarStyleDark()
|
||||
}
|
||||
|
||||
Vue.prototype.$showHideStatusBar = async (show) => {
|
||||
if (show) {
|
||||
StatusBar.show()
|
||||
} else {
|
||||
StatusBar.hide()
|
||||
}
|
||||
}
|
||||
|
||||
Vue.prototype.$isDev = process.env.NODE_ENV !== 'production'
|
||||
|
||||
Vue.prototype.$getAndroidSDKVersion = async () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue