mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
235 lines
7.3 KiB
Vue
235 lines
7.3 KiB
Vue
<template>
|
|
<div class="h-full w-full">
|
|
<div class="h-full flex items-center">
|
|
<div style="width: 100px; max-width: 100px" class="h-full flex items-center overflow-x-hidden justify-center">
|
|
<span v-if="hasPrev" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="prev">chevron_left</span>
|
|
</div>
|
|
<div id="frame" class="w-full" style="height: 80%">
|
|
<div id="viewer"></div>
|
|
</div>
|
|
<div style="width: 100px; max-width: 100px" class="h-full flex items-center justify-center overflow-x-hidden">
|
|
<span v-if="hasNext" class="material-icons text-white text-opacity-50 hover:text-opacity-80 cursor-pointer text-6xl" @mousedown.prevent @click="next">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ePub from 'epubjs'
|
|
|
|
/**
|
|
* @typedef {object} EpubReader
|
|
* @property {ePub.Book} book
|
|
* @property {ePub.Rendition} rendition
|
|
*/
|
|
export default {
|
|
props: {
|
|
url: String,
|
|
libraryItem: {
|
|
type: Object,
|
|
default: () => {}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
/** @type {ePub.Book} */
|
|
book: null,
|
|
/** @type {ePub.Rendition} */
|
|
rendition: null
|
|
}
|
|
},
|
|
computed: {
|
|
/** @returns {string} */
|
|
libraryItemId() {
|
|
return this.libraryItem?.id
|
|
},
|
|
hasPrev() {
|
|
return !this.rendition?.location?.atStart
|
|
},
|
|
hasNext() {
|
|
return !this.rendition?.location?.atEnd
|
|
},
|
|
/** @returns {Array<ePub.NavItem>} */
|
|
chapters() {
|
|
return this.book ? this.book.navigation.toc : []
|
|
},
|
|
userMediaProgress() {
|
|
if (!this.libraryItemId) return
|
|
return this.$store.getters['user/getUserMediaProgress'](this.libraryItemId)
|
|
},
|
|
localStorageLocationsKey() {
|
|
return `ebookLocations-${this.libraryItemId}`
|
|
}
|
|
},
|
|
methods: {
|
|
prev() {
|
|
return this.rendition?.prev()
|
|
},
|
|
next() {
|
|
return this.rendition?.next()
|
|
},
|
|
goToChapter(href) {
|
|
return this.rendition?.display(href)
|
|
},
|
|
keyUp(e) {
|
|
const rtl = this.book.package.metadata.direction === 'rtl'
|
|
if ((e.keyCode || e.which) == 37) {
|
|
return rtl ? this.next() : this.prev()
|
|
} else if ((e.keyCode || e.which) == 39) {
|
|
return rtl ? this.prev() : this.next()
|
|
}
|
|
},
|
|
/**
|
|
* @param {object} payload
|
|
* @param {string} payload.ebookLocation - CFI of the current location
|
|
* @param {string} payload.ebookProgress - eBook Progress Percentage
|
|
*/
|
|
updateProgress(payload) {
|
|
this.$axios.$patch(`/api/me/progress/${this.libraryItemId}`, payload).catch((error) => {
|
|
console.error('EpubReader.updateProgress failed:', error)
|
|
})
|
|
},
|
|
getAllEbookLocationData() {
|
|
const locations = []
|
|
let totalSize = 0 // Total in bytes
|
|
|
|
for (const key in localStorage) {
|
|
if (!localStorage.hasOwnProperty(key) || !key.startsWith('ebookLocations-')) {
|
|
continue
|
|
}
|
|
|
|
try {
|
|
const ebookLocations = JSON.parse(localStorage[key])
|
|
if (!ebookLocations.locations) throw new Error('Invalid locations object')
|
|
|
|
ebookLocations.key = key
|
|
ebookLocations.size = (localStorage[key].length + key.length) * 2
|
|
locations.push(ebookLocations)
|
|
totalSize += ebookLocations.size
|
|
} catch (error) {
|
|
console.error('Failed to parse ebook locations', key, error)
|
|
localStorage.removeItem(key)
|
|
}
|
|
}
|
|
|
|
// Sort by oldest lastAccessed first
|
|
locations.sort((a, b) => a.lastAccessed - b.lastAccessed)
|
|
|
|
return {
|
|
locations,
|
|
totalSize
|
|
}
|
|
},
|
|
/** @param {string} locationString */
|
|
checkSaveLocations(locationString) {
|
|
const maxSizeInBytes = 3000000 // Allow epub locations to take up to 3MB of space
|
|
const newLocationsSize = JSON.stringify({ lastAccessed: Date.now(), locations: locationString }).length * 2
|
|
|
|
// Too large overall
|
|
if (newLocationsSize > maxSizeInBytes) {
|
|
console.error('Epub locations are too large to store. Size =', newLocationsSize)
|
|
return
|
|
}
|
|
|
|
const ebookLocationsData = this.getAllEbookLocationData()
|
|
|
|
let availableSpace = maxSizeInBytes - ebookLocationsData.totalSize
|
|
|
|
// Remove epub locations until there is room for locations
|
|
while (availableSpace < newLocationsSize && ebookLocationsData.locations.length) {
|
|
const oldestLocation = ebookLocationsData.locations.shift()
|
|
console.log(`Removing cached locations for epub "${oldestLocation.key}" taking up ${oldestLocation.size} bytes`)
|
|
availableSpace += oldestLocation.size
|
|
localStorage.removeItem(oldestLocation.key)
|
|
}
|
|
|
|
console.log(`Cacheing epub locations with key "${this.localStorageLocationsKey}" taking up ${newLocationsSize} bytes`)
|
|
this.saveLocations(locationString)
|
|
},
|
|
/** @param {string} locationString */
|
|
saveLocations(locationString) {
|
|
localStorage.setItem(
|
|
this.localStorageLocationsKey,
|
|
JSON.stringify({
|
|
lastAccessed: Date.now(),
|
|
locations: locationString
|
|
})
|
|
)
|
|
},
|
|
loadLocations() {
|
|
const locationsObjString = localStorage.getItem(this.localStorageLocationsKey)
|
|
if (!locationsObjString) return null
|
|
|
|
const locationsObject = JSON.parse(locationsObjString)
|
|
|
|
// Remove invalid location objects
|
|
if (!locationsObject.locations) {
|
|
console.error('Invalid epub locations stored', this.localStorageLocationsKey)
|
|
localStorage.removeItem(this.localStorageLocationsKey)
|
|
return null
|
|
}
|
|
|
|
// Update lastAccessed
|
|
this.saveLocations(locationsObject.locations)
|
|
|
|
return locationsObject.locations
|
|
},
|
|
/** @param {string} location - CFI of the new location */
|
|
relocated(location) {
|
|
if (location.end.percentage) {
|
|
this.updateProgress({
|
|
ebookLocation: location.start.cfi,
|
|
ebookProgress: location.end.percentage
|
|
})
|
|
} else {
|
|
this.updateProgress({
|
|
ebookLocation: location.start.cfi
|
|
})
|
|
}
|
|
},
|
|
initEpub() {
|
|
/** @type {EpubReader} */
|
|
const reader = this
|
|
|
|
/** @type {ePub.Book} */
|
|
reader.book = new ePub(reader.url, {
|
|
width: window.innerWidth - 200,
|
|
height: window.innerHeight - 50
|
|
})
|
|
|
|
/** @type {ePub.Rendition} */
|
|
reader.rendition = reader.book.renderTo('viewer', {
|
|
width: window.innerWidth - 200,
|
|
height: window.innerHeight * 0.8
|
|
})
|
|
|
|
// load saved progress
|
|
reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
|
|
|
|
// load style
|
|
reader.rendition.themes.default({ '*': { color: '#fff!important' } })
|
|
|
|
reader.book.ready.then(() => {
|
|
// set up event listeners
|
|
reader.rendition.on('relocated', reader.relocated)
|
|
reader.rendition.on('keydown', reader.keyUp)
|
|
document.addEventListener('keydown', reader.keyUp, false)
|
|
|
|
// load ebook cfi locations
|
|
const savedLocations = this.loadLocations()
|
|
if (savedLocations) {
|
|
reader.book.locations.load(savedLocations)
|
|
} else {
|
|
reader.book.locations.generate().then(() => {
|
|
this.checkSaveLocations(reader.book.locations.save())
|
|
})
|
|
}
|
|
})
|
|
}
|
|
},
|
|
mounted() {
|
|
this.initEpub()
|
|
}
|
|
}
|
|
</script>
|