extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-11-07 16:44:16 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix config page not scrolling, add scroll arrows on home page, fix routing issue on back button, fix continue reading shelf

Browse Source
This commit is contained in:
Mark Cooper 2021-09-28 17:36:41 -05:00
parent 868e1af28a
commit 0da327222e
11 changed files with 195 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/components/app/Appbar.vue
View File

@ -120,12 +120,10 @@ export default {
}
},
methods: {
back() {
if (this.$route.name === 'audiobook-id-edit') {
this.$router.push(`/audiobook/${this.$route.params.id}`)
} else {
this.$router.push('/library')
}
async back() {
var popped = await this.$store.dispatch('popRoute')
var backTo = popped || '/'
this.$router.push(backTo)
},
cancelSelectionMode() {
if (this.processingBatchDelete) return

86
client/components/app/BookShelfCategorized.vue
View File

@ -18,43 +18,7 @@
</div>
<div v-else id="bookshelf" class="w-full flex flex-col items-center">
<template v-for="(shelf, index) in shelves">
<div :key="index" class="relative">
<div class="w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 4 * sizeMultiplier + 'rem' }">
<div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
<div class="flex items-center -mb-2">
<template v-for="entity in shelf.books">
<cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" />
</template>
</div>
</div>
</div>
<!-- <div class="absolute text-center box-shadow-book categoryPlacard font-book transform z-30" :style="{ top: sizeMultiplier + 'rem', left: 1.5 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
<div class="w-px bg-white shadow-sm bg-opacity-60 absolute transform skew-x-6" :style="{ height: sizeMultiplier + 'rem', top: -sizeMultiplier + 'rem', left: 1.25 * signSizeMultiplier + 'rem' }" />
<div class="w-px bg-white shadow-sm bg-opacity-60 absolute transform -skew-x-6" :style="{ height: sizeMultiplier + 'rem', top: -sizeMultiplier + 'rem', right: 1.25 * signSizeMultiplier + 'rem' }" />
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
<p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
</div>
</div> -->
<!-- <div class="absolute text-center box-shadow-side categoryPlacard font-book transform z-30 bottom-4" :style="{ left: 0.5 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
<p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
</div>
</div> -->
<div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-8 w-36 rounded-md" style="height: 22px">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
<p class="transform text-sm">{{ shelf.label }}</p>
</div>
</div>
<!-- <div class="absolute text-center box-shadow-book categoryPlacard font-book transform z-30 -rotate-45 origin-bottom-right" :style="{ top: -1 * sizeMultiplier + 'rem', left: -1 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
<p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
</div>
</div> -->
<div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
</div>
<app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
</template>
</div>
</div>
@ -69,7 +33,9 @@ export default {
rowPaddingX: 40,
keywordFilterTimeout: null,
scannerParseSubtitle: false,
wrapperClientWidth: 0
wrapperClientWidth: 0,
overflowingShelvesRight: {},
overflowingShelvesLeft: {}
}
},
computed: {
@ -95,7 +61,7 @@ export default {
return this.bookCoverWidth + this.paddingX * 2
},
mostRecentPlayed() {
var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].lastUpdate > 0).map((ab) => ({ ...ab }))
var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].lastUpdate > 0 && this.userAudiobooks[ab.id].progress > 0 && !this.userAudiobooks[ab.id].isRead).map((ab) => ({ ...ab }))
audiobooks.sort((a, b) => {
return this.userAudiobooks[b.id].lastUpdate - this.userAudiobooks[a.id].lastUpdate
})
@ -190,45 +156,3 @@ export default {
}
}
</script>
<style>
.bookshelfRowCategorized {
width: calc(100vw - 80px);
background-image: url(/wood_panels.jpg);
}
.bookshelfDividerCategorized {
background: rgb(149, 119, 90);
/* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
/* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
box-shadow: 2px 14px 8px #111111aa;
}
.categoryPlacard {
background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
letter-spacing: 1px;
}
.shinyBlack {
background-color: #2d3436;
background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
/* border-color: #daa520; */
/* border-color: #ebc463af; */
border-color: rgba(255, 244, 182, 0.6);
border-style: solid;
/* color: rgba(255, 244, 182, 1); */
color: #fce3a6;
}
.shinyWhite {
background-color: #ffffff;
background-image: linear-gradient(315deg, #ffffff 0%, #ebebeb 74%);
/* border-color: #cc9917aa; */
border-style: solid;
color: rgba(19, 19, 19, 1);
font-weight: 600;
}
</style>

139
client/components/app/BookShelfRow.vue Normal file
View File

@ -0,0 +1,139 @@
<template>
<div class="relative">
<div ref="shelf" class="w-full max-w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 2.5 * sizeMultiplier + 'rem' }" @scroll="scrolled">
<div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
<div class="flex items-center -mb-2">
<template v-for="entity in shelf.books">
<cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" />
</template>
</div>
</div>
</div>
<div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-8 w-36 rounded-md" style="height: 22px">
<div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
<p class="transform text-sm">{{ shelf.label }}</p>
</div>
</div>
<div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
<div v-show="canScrollLeft && !isScrolling" class="absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
<span class="material-icons text-8xl text-white">chevron_left</span>
</div>
<div v-show="canScrollRight && !isScrolling" class="absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
<span class="material-icons text-8xl text-white">chevron_right</span>
</div>
</div>
</template>
<script>
export default {
props: {
index: Number,
shelf: {
type: Object,
default: () => {}
},
sizeMultiplier: Number,
bookCoverWidth: Number
},
data() {
return {
canScrollRight: false,
canScrollLeft: false,
isScrolling: false,
scrollTimer: null,
updateTimer: null
}
},
computed: {
userAudiobooks() {
return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
}
},
methods: {
scrolled() {
clearTimeout(this.scrollTimer)
this.scrollTimer = setTimeout(() => {
this.isScrolling = false
this.$nextTick(this.checkCanScroll)
}, 50)
},
scrollLeft() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
this.isScrolling = true
this.$refs.shelf.scrollLeft = 0
},
scrollRight() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
this.isScrolling = true
this.$refs.shelf.scrollLeft = 999
},
updatedBookCard() {
clearTimeout(this.updateTimer)
this.updateTimer = setTimeout(() => {
this.$nextTick(this.checkCanScroll)
}, 100)
},
checkCanScroll() {
if (!this.$refs.shelf) {
console.error('No Shelf', this.index)
return
}
var clientWidth = this.$refs.shelf.clientWidth
var scrollWidth = this.$refs.shelf.scrollWidth
var scrollLeft = this.$refs.shelf.scrollLeft
if (scrollWidth > clientWidth) {
this.canScrollRight = scrollLeft === 0
this.canScrollLeft = scrollLeft > 0
} else {
this.canScrollRight = false
this.canScrollLeft = false
}
}
}
}
</script>
<style>
.bookshelfRowCategorized {
scroll-behavior: smooth;
width: calc(100vw - 80px);
background-image: url(/wood_panels.jpg);
}
.bookshelfDividerCategorized {
background: rgb(149, 119, 90);
/* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
/* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
box-shadow: 2px 14px 8px #111111aa;
}
.categoryPlacard {
background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
letter-spacing: 1px;
}
.shinyBlack {
background-color: #2d3436;
background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
border-color: rgba(255, 244, 182, 0.6);
border-style: solid;
color: #fce3a6;
}
.book-shelf-arrow-right {
height: calc(100% - 24px);
background: rgb(48, 48, 48);
background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
}
.book-shelf-arrow-left {
height: calc(100% - 24px);
background: rgb(48, 48, 48);
background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
}
</style>

4
client/components/cards/BookCard.vue
View File

@ -8,9 +8,9 @@
<div class="absolute -bottom-4 left-0 triangle-right" />
</div>
<div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click.stop>
<div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @click.stop>
<nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
<div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }" @click="clickCard">
<div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }" @click="clickCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
<cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
<div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">

19
client/middleware/routed.js Normal file
View File

@ -0,0 +1,19 @@
export default function (context) {
if (process.client) {
var route = context.route
var from = context.from
var store = context.store
if (route.name === 'login' || from.name === 'login') return
if (route.name === 'config' || route.name === 'upload' || route.name === 'account' || route.name.startsWith('audiobook-id')) {
if (from.name !== route.name && from.name !== 'audiobook-id-edit' && from.name !== 'config' && from.name !== 'upload' && from.name !== 'account') {
var _history = [...store.state.routeHistory]
if (!_history.length || _history[_history.length - 1] !== from.fullPath) {
_history.push(from.fullPath)
store.commit('setRouteHistory', _history)
}
}
}
}
}

4
client/nuxt.config.js
View File

@ -40,6 +40,10 @@ module.exports = {
]
},
router: {
middleware: ['routed']
},
// Global CSS: https://go.nuxtjs.dev/config-css
css: [
'@/assets/app.css'

2
client/package.json
View File

@ -1,6 +1,6 @@
{
"name": "audiobookshelf-client",
"version": "1.2.6",
"version": "1.2.7",
"description": "Audiobook manager and player",
"main": "index.js",
"scripts": {

2
client/pages/config/index.vue
View File

@ -1,5 +1,5 @@
<template>
<div id="page-wrapper" class="page p-6" :class="streamAudiobook ? 'streaming' : ''">
<div id="page-wrapper" class="page p-6 overflow-y-auto" :class="streamAudiobook ? 'streaming' : ''">
<div class="w-full max-w-4xl mx-auto">
<div class="flex items-center mb-2">
<h1 class="text-2xl">Users</h1>

19
client/store/index.js
View File

@ -15,7 +15,9 @@ export const state = () => ({
coverScanProgress: null,
developerMode: false,
selectedAudiobooks: [],
processingBatch: false
processingBatch: false,
previousPath: '/',
routeHistory: []
})
export const getters = {
@ -52,10 +54,25 @@ export const actions = {
console.error('Update check failed', error)
return false
})
},
popRoute({ commit, state }) {
if (!state.routeHistory.length) {
return null
}
var _history = [...state.routeHistory]
var last = _history.pop()
commit('setRouteHistory', _history)
return last
}
}
export const mutations = {
setRouteHistory(state, val) {
state.routeHistory = val
},
setPreviousPath(state, val) {
state.previousPath = val
},
setVersionData(state, versionData) {
state.versionData = versionData
},

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "audiobookshelf",
"version": "1.2.6",
"version": "1.2.7",
"description": "Self-hosted audiobook server for managing and playing audiobooks",
"main": "index.js",
"scripts": {

3
server/objects/Audiobook.js
View File

@ -488,7 +488,6 @@ class Audiobook {
setChapters() {
// If 1 audio file without chapters, then no chapters will be set
var includedAudioFiles = this.audioFiles.filter(af => !af.exclude)
if (includedAudioFiles.length === 1) {
// 1 audio file with chapters
@ -524,7 +523,7 @@ class Audiobook {
id: currChapterId++,
start: currStartTime,
end: currStartTime + file.duration,
title: `Chapter ${currChapterId}`
title: file.filename ? Path.basename(file.filename, Path.extname(file.filename)) : `Chapter ${currChapterId}`
})
currStartTime += file.duration
}