mirror/advplyr.audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-08-31 15:19:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update toc menu and media progress display

Browse source
This commit is contained in:
advplyr 2023-03-24 17:57:41 -05:00
parent 4d29ebd647
commit 3138865d69
4 changed files with 89 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

104
client/components/readers/EpubReader.vue
View file

@ -2,26 +2,22 @@
<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>
<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" class="shadow-md"></div>
<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>
<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";
import ePub from 'epubjs'
/**
/**
* @typedef {object} EpubReader
* @property {ePub.Book} book
* @property {ePub.Rendition} rendition
@ -31,7 +27,7 @@ export default {
url: String,
libraryItem: {
type: Object,
default: () => { }
default: () => {}
}
},
data() {
@ -39,32 +35,48 @@ export default {
/** @type {ePub.Book} */
book: null,
/** @type {ePub.Rendition} */
rendition: null,
};
rendition: null
}
},
computed: {
/** @returns {string} */
libraryItemId() { return this.libraryItem?.id },
hasPrev() { return !this.rendition?.location?.atStart },
hasNext() { return !this.rendition?.location?.atEnd },
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 : [] },
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}` },
localStorageLocationsKey() {
return `ebookLocations-${this.libraryItemId}`
}
},
methods: {
prev() { return this.rendition?.prev() },
next() { return this.rendition?.next() },
goToChapter(href) { return this.rendition?.display(href) },
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();
return rtl ? this.next() : this.prev()
} else if ((e.keyCode || e.which) == 39) {
return rtl ? this.prev() : this.next();
return rtl ? this.prev() : this.next()
}
},
/**
@ -79,68 +91,68 @@ export default {
},
/** @param {string} locationString */
saveLocations(locationString) {
localStorage.setItem(this.localStorageLocationsKey, locationString);
localStorage.setItem(this.localStorageLocationsKey, locationString)
},
hasSavedLocations() {
return localStorage.getItem(this.localStorageLocationsKey) !== null;
return localStorage.getItem(this.localStorageLocationsKey) !== null
},
loadLocations() {
return localStorage.getItem(this.localStorageLocationsKey);
return localStorage.getItem(this.localStorageLocationsKey)
},
/** @param {string} location - CFI of the new location */
relocated(location) {
if (location.end.percentage) {
this.updateProgress({
ebookLocation: location.start.cfi,
ebookProgress: location.end.percentage,
});
ebookProgress: location.end.percentage
})
} else {
this.updateProgress({
ebookLocation: location.start.cfi,
});
ebookLocation: location.start.cfi
})
}
},
initEpub() {
/** @type {EpubReader} */
var reader = this;
var reader = this
/** @type {ePub.Book} */
reader.book = new ePub(reader.url, {
width: window.innerWidth - 200,
height: window.innerHeight - 50,
});
height: window.innerHeight - 50
})
/** @type {ePub.Rendition} */
reader.rendition = reader.book.renderTo("viewer", {
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);
reader.rendition.display(this.userMediaProgress?.ebookLocation || reader.book.locations.start)
// load style
reader.rendition.themes.default({ "*": { "color": "#fff!important" } });
reader.rendition.themes.default({ '*': { color: '#fff!important' } })
reader.book.ready.then(() => {
// set up event listeners
reader.rendition.on('relocated', reader.relocated);
reader.rendition.on('relocated', reader.relocated)
reader.rendition.on('keydown', reader.keyUp)
document.addEventListener('keydown', reader.keyUp, false);
document.addEventListener('keydown', reader.keyUp, false)
// load ebook cfi locations
if (this.hasSavedLocations()) {
reader.book.locations.load(this.loadLocations());
reader.book.locations.load(this.loadLocations())
} else {
reader.book.locations.generate().then(() => {
this.saveLocations(reader.book.locations.save());
});
this.saveLocations(reader.book.locations.save())
})
}
});
},
})
}
},
mounted() {
this.initEpub();
},
};
this.initEpub()
}
}
</script>