mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2026-08-28 22:27:14 +02:00
Fix: android auto requirements, Change: New UI #33
This commit is contained in:
advplyr
+8
-1
@@ -26,7 +26,7 @@
|
||||
|
||||
<ui-btn v-if="!isUpdateAvailable || immediateUpdateAllowed" class="w-full my-4" color="primary" @click="openAppStore">Open app store</ui-btn>
|
||||
|
||||
<p>UA: {{ updateAvailability }} | Avail: {{ availableVersion }} | Curr: {{ currentVersion }} | ImmedAllowed: {{ immediateUpdateAllowed }}</p>
|
||||
<p class="text-xs text-gray-400">UA: {{ updateAvailability }} | Avail: {{ availableVersion }} | Curr: {{ currentVersion }} | ImmedAllowed: {{ immediateUpdateAllowed }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -34,11 +34,18 @@
|
||||
import { AppUpdate } from '@robingenz/capacitor-app-update'
|
||||
|
||||
export default {
|
||||
asyncData({ redirect, store }) {
|
||||
if (!store.state.socketConnected) {
|
||||
return redirect('/connect')
|
||||
}
|
||||
return {}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
username() {
|
||||
if (!this.user) return ''
|
||||
return this.user.username
|
||||
},
|
||||
user() {
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<home-bookshelf-nav-bar />
|
||||
<home-bookshelf-toolbar v-show="!isHome" />
|
||||
<div class="main-content overflow-y-auto overflow-x-hidden relative" :class="isHome ? 'home-page' : ''">
|
||||
<nuxt-child />
|
||||
|
||||
<div v-if="isLoading" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
|
||||
<ui-loading-indicator />
|
||||
</div>
|
||||
<div v-else-if="!audiobooks.length" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
|
||||
<div>
|
||||
<p class="mb-4 text-center text-xl">
|
||||
Bookshelf empty<span v-show="isSocketConnected">
|
||||
for library <strong>{{ currentLibraryName }}</strong></span
|
||||
>
|
||||
</p>
|
||||
<div v-if="!isSocketConnected" class="flex items-center mb-3">
|
||||
<span class="material-icons text-error text-lg">cloud_off</span>
|
||||
<p class="pl-2 text-error text-sm">Audiobookshelf server not connected</p>
|
||||
</div>
|
||||
<div class="flex justify-center">
|
||||
<ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32"> Connect </ui-btn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
isHome() {
|
||||
return this.$route.name === 'bookshelf'
|
||||
},
|
||||
isLoading() {
|
||||
return this.$store.state.audiobooks.isLoading
|
||||
},
|
||||
audiobooks() {
|
||||
return this.$store.state.audiobooks.audiobooks
|
||||
},
|
||||
currentLibrary() {
|
||||
return this.$store.getters['libraries/getCurrentLibrary']
|
||||
},
|
||||
currentLibraryName() {
|
||||
return this.currentLibrary ? this.currentLibrary.name : 'Main'
|
||||
},
|
||||
isSocketConnected() {
|
||||
return this.$store.state.socketConnected
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async loadAudiobooks() {
|
||||
var currentLibrary = await this.$localStore.getCurrentLibrary()
|
||||
if (currentLibrary) {
|
||||
this.$store.commit('libraries/setCurrentLibrary', currentLibrary.id)
|
||||
}
|
||||
this.$store.dispatch('audiobooks/load')
|
||||
},
|
||||
async loadCollections() {
|
||||
this.$store.dispatch('user/loadUserCollections')
|
||||
},
|
||||
socketConnected(isConnected) {
|
||||
if (isConnected) {
|
||||
console.log('Connected - Load from server')
|
||||
this.loadAudiobooks()
|
||||
if (this.$route.name === 'bookshelf-collections') this.loadCollections()
|
||||
} else {
|
||||
console.log('Disconnected - Reset to local storage')
|
||||
this.$store.commit('audiobooks/reset')
|
||||
this.$store.dispatch('audiobooks/useDownloaded')
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$server.on('connected', this.socketConnected)
|
||||
if (this.$server.connected) {
|
||||
this.loadAudiobooks()
|
||||
} else {
|
||||
console.log('Bookshelf - Server not connected using downloaded')
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$server.off('connected', this.socketConnected)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.main-content {
|
||||
max-height: calc(100% - 72px);
|
||||
min-height: calc(100% - 72px);
|
||||
}
|
||||
.main-content.home-page {
|
||||
max-height: calc(100% - 36px);
|
||||
min-height: calc(100% - 36px);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-group-shelf :key="shelf.id" group-type="collection" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupsPerRow: 2
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
computed: {
|
||||
collections() {
|
||||
return this.$store.state.user.collections || []
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
for (let i = 0; i < this.collections.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.groupsPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.groups.push(this.collections[i])
|
||||
|
||||
if ((i + 1) % this.groupsPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.groups.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
this.$store.dispatch('user/loadUserCollections')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-shelf :key="shelf.id" :label="shelf.label" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
settings: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
books() {
|
||||
return this.$store.getters['audiobooks/getFilteredAndSorted']()
|
||||
},
|
||||
booksWithUserAbData() {
|
||||
var books = this.books.map((b) => {
|
||||
var userAbData = this.$store.getters['user/getMostRecentUserAudiobookData'](b.id)
|
||||
return { ...b, userAbData }
|
||||
})
|
||||
return books
|
||||
},
|
||||
booksCurrentlyReading() {
|
||||
var books = this.booksWithUserAbData
|
||||
.map((b) => ({ ...b }))
|
||||
.filter((b) => b.userAbData && !b.userAbData.isRead && b.userAbData.progress > 0)
|
||||
.sort((a, b) => {
|
||||
return a.userAbData.lastUpdate - b.userAbData.lastUpdate
|
||||
})
|
||||
return books
|
||||
},
|
||||
booksRecentlyAdded() {
|
||||
var books = this.books
|
||||
.map((b) => {
|
||||
return { ...b }
|
||||
})
|
||||
.sort((a, b) => a.addedAt - b.addedAt)
|
||||
return books.slice(0, 10)
|
||||
},
|
||||
booksRead() {
|
||||
var books = this.booksWithUserAbData
|
||||
.filter((b) => b.userAbData && b.userAbData.isRead)
|
||||
.sort((a, b) => {
|
||||
return a.userAbData.lastUpdate - b.userAbData.lastUpdate
|
||||
})
|
||||
return books.slice(0, 10)
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
|
||||
if (this.booksCurrentlyReading.length) {
|
||||
shelves.push({
|
||||
id: 'recent',
|
||||
label: 'Continue Reading',
|
||||
books: this.booksCurrentlyReading
|
||||
})
|
||||
}
|
||||
|
||||
if (this.booksRecentlyAdded.length) {
|
||||
shelves.push({
|
||||
id: 'added',
|
||||
label: 'Recently Added',
|
||||
books: this.booksRecentlyAdded
|
||||
})
|
||||
}
|
||||
|
||||
if (this.booksRead.length) {
|
||||
shelves.push({
|
||||
id: 'read',
|
||||
label: 'Read Again',
|
||||
books: this.booksRead
|
||||
})
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
this.settings = { ...this.$store.state.user.settings }
|
||||
|
||||
// var bookshelfView = await this.$localStore.getBookshelfView()
|
||||
// this.isListView = bookshelfView === 'list'
|
||||
// this.bookshelfReady = true
|
||||
// console.log('Bookshelf view', bookshelfView)
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-library-shelf :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
booksPerRow: 3
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
books() {
|
||||
return this.$store.getters['audiobooks/getFilteredAndSorted']()
|
||||
},
|
||||
shelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
for (let i = 0; i < this.books.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.booksPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.books.push(this.books[i])
|
||||
|
||||
if ((i + 1) % this.booksPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.books.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<template v-for="(shelf, index) in shelves">
|
||||
<bookshelf-group-shelf v-if="!selectedSeriesName" :key="shelf.id" group-type="series" :groups="shelf.groups" :style="{ zIndex: shelves.length - index }" />
|
||||
<bookshelf-library-shelf v-else :key="shelf.id" :books="shelf.books" :style="{ zIndex: shelves.length - index }" />
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupsPerRow: 2,
|
||||
booksPerRow: 3,
|
||||
selectedSeriesName: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
routeQuery: {
|
||||
handler(newVal) {
|
||||
if (newVal && newVal.series) {
|
||||
console.log('Select series')
|
||||
this.selectedSeriesName = this.$decode(newVal.series)
|
||||
} else {
|
||||
this.selectedSeriesName = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
routeQuery() {
|
||||
return this.$route.query
|
||||
},
|
||||
series() {
|
||||
return this.$store.getters['audiobooks/getSeriesGroups']()
|
||||
},
|
||||
seriesShelves() {
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
for (let i = 0; i < this.series.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.groupsPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.groups.push(this.series[i])
|
||||
|
||||
if ((i + 1) % this.groupsPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
groups: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.groups.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
},
|
||||
selectedSeries() {
|
||||
if (!this.selectedSeriesName) return null
|
||||
return this.series.find((s) => s.name === this.selectedSeriesName)
|
||||
},
|
||||
seriesBooksShelves() {
|
||||
if (!this.selectedSeries) return []
|
||||
var seriesBooks = this.selectedSeries.books || []
|
||||
|
||||
var shelves = []
|
||||
var shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
for (let i = 0; i < seriesBooks.length; i++) {
|
||||
var shelfNum = Math.floor((i + 1) / this.booksPerRow)
|
||||
shelf.id = shelfNum
|
||||
shelf.books.push(seriesBooks[i])
|
||||
|
||||
if ((i + 1) % this.booksPerRow === 0) {
|
||||
shelves.push(shelf)
|
||||
shelf = {
|
||||
id: 0,
|
||||
books: []
|
||||
}
|
||||
}
|
||||
}
|
||||
if (shelf.books.length) {
|
||||
shelves.push(shelf)
|
||||
}
|
||||
return shelves
|
||||
},
|
||||
shelves() {
|
||||
if (this.selectedSeries) {
|
||||
return this.seriesBooksShelves
|
||||
} else {
|
||||
return this.seriesShelves
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<div class="w-full h-full overflow-y-auto px-2 py-6 md:p-8">
|
||||
<div class="w-full flex justify-center md:block sm:w-32 md:w-52" style="min-width: 240px">
|
||||
<div class="relative" style="height: fit-content">
|
||||
<cards-collection-cover :book-items="bookItems" :width="240" :height="120 * 1.6" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow px-2 py-6 md:py-0 md:px-10">
|
||||
<div class="flex items-center">
|
||||
<h1 class="text-xl font-sans">
|
||||
{{ collectionName }}
|
||||
</h1>
|
||||
<div class="flex-grow" />
|
||||
<ui-btn v-if="showPlayButton" :disabled="streaming" color="success" :padding-x="4" small class="flex items-center h-9 mr-2 w-20" @click="clickPlay">
|
||||
<span v-show="!streaming" class="material-icons -ml-2 pr-1 text-white">play_arrow</span>
|
||||
{{ streaming ? 'Streaming' : 'Play' }}
|
||||
</ui-btn>
|
||||
</div>
|
||||
|
||||
<!-- <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />
|
||||
|
||||
<ui-icon-btn icon="delete" class="mx-0.5" @click="removeClick" /> -->
|
||||
|
||||
<div class="my-8 max-w-2xl">
|
||||
<p class="text-base text-gray-100">{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<tables-collection-books-table :books="bookItems" :collection-id="collection.id" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="processingRemove" class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-40 flex items-center justify-center">
|
||||
<ui-loading-indicator />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
async asyncData({ store, params, app, redirect, route }) {
|
||||
if (!store.state.user.user) {
|
||||
return redirect(`/connect?redirect=${route.path}`)
|
||||
}
|
||||
|
||||
var collection = await app.$axios.$get(`/api/collection/${params.id}`).catch((error) => {
|
||||
console.error('Failed', error)
|
||||
return false
|
||||
})
|
||||
|
||||
if (!collection) {
|
||||
return redirect('/')
|
||||
}
|
||||
|
||||
store.commit('user/addUpdateCollection', collection)
|
||||
collection.books.forEach((book) => {
|
||||
store.commit('audiobooks/addUpdate', book)
|
||||
})
|
||||
return {
|
||||
collectionId: collection.id
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
processingRemove: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
bookItems() {
|
||||
return this.collection.books || []
|
||||
},
|
||||
collectionName() {
|
||||
return this.collection.name || ''
|
||||
},
|
||||
description() {
|
||||
return this.collection.description || ''
|
||||
},
|
||||
collection() {
|
||||
return this.$store.getters['user/getCollection'](this.collectionId)
|
||||
},
|
||||
playableBooks() {
|
||||
return this.bookItems.filter((book) => {
|
||||
return !book.isMissing && !book.isIncomplete && book.numTracks
|
||||
})
|
||||
},
|
||||
streaming() {
|
||||
return !!this.playableBooks.find((b) => b.id === this.$store.getters['getAudiobookIdStreaming'])
|
||||
},
|
||||
showPlayButton() {
|
||||
return this.playableBooks.length
|
||||
},
|
||||
userAudiobooks() {
|
||||
return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clickPlay() {
|
||||
var nextBookNotRead = this.playableBooks.find((pb) => !this.userAudiobooks[pb.id] || !this.userAudiobooks[pb.id].isRead)
|
||||
if (nextBookNotRead) {
|
||||
var dlObj = this.$store.getters['downloads/getDownload'](nextBookNotRead.id)
|
||||
|
||||
this.$store.commit('setPlayOnLoad', true)
|
||||
if (dlObj && !dlObj.isDownloading && !dlObj.isPreparing) {
|
||||
// Local
|
||||
console.log('[PLAYCLICK] Set Playing Local Download ' + nextBookNotRead.book.title)
|
||||
this.$store.commit('setPlayingDownload', dlObj)
|
||||
} else {
|
||||
// Stream
|
||||
console.log('[PLAYCLICK] Set Playing STREAM ' + nextBookNotRead.book.title)
|
||||
this.$store.commit('setStreamAudiobook', nextBookNotRead)
|
||||
this.$server.socket.emit('open_stream', nextBookNotRead.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div class="w-full h-full">
|
||||
<p class="text-xl text-center py-8">Under Construction...</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {},
|
||||
mounted() {}
|
||||
}
|
||||
</script>
|
||||
+1
-1
@@ -133,7 +133,7 @@ export default {
|
||||
if (this.$route.query && this.$route.query.redirect) {
|
||||
this.$router.replace(this.$route.query.redirect)
|
||||
} else {
|
||||
this.$router.replace('/')
|
||||
this.$router.replace('/bookshelf')
|
||||
}
|
||||
},
|
||||
socketConnected() {
|
||||
|
||||
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="w-full h-full py-6">
|
||||
<h1 class="text-2xl px-4">Downloads</h1>
|
||||
|
||||
<div class="w-full px-2 py-2" :class="hasStoragePermission ? '' : 'text-error'">
|
||||
<div class="flex items-center">
|
||||
<span class="material-icons" @click="changeDownloadFolderClick">{{ hasStoragePermission ? 'folder' : 'error' }}</span>
|
||||
<p v-if="hasStoragePermission" class="text-sm px-4" @click="changeDownloadFolderClick">{{ downloadFolderSimplePath || 'No Download Folder Selected' }}</p>
|
||||
<p v-else class="text-sm px-4" @click="changeDownloadFolderClick">No Storage Permissions. Click here</p>
|
||||
</div>
|
||||
<!-- <p v-if="hasStoragePermission" class="text-xs text-gray-400 break-all max-w-full">{{ downloadFolderUri }}</p> -->
|
||||
</div>
|
||||
|
||||
<div class="w-full h-10 relative">
|
||||
<div class="absolute top-px left-0 z-10 w-full h-full flex">
|
||||
<div class="flex-grow h-full bg-primary rounded-t-md mr-px" @click="showingDownloads = true">
|
||||
<div class="flex items-center justify-center rounded-t-md border-t border-l border-r border-white border-opacity-20 h-full" :class="showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
|
||||
<p>Downloads</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-grow h-full bg-primary rounded-t-md ml-px" @click="showingDownloads = false">
|
||||
<div class="flex items-center justify-center h-full rounded-t-md border-t border-l border-r border-white border-opacity-20" :class="!showingDownloads ? 'text-gray-100' : 'border-b bg-black bg-opacity-20 text-gray-400'">
|
||||
<p>Files</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-content-body relative w-full overflow-x-hidden bg-primary">
|
||||
<template v-if="showingDownloads">
|
||||
<div v-if="!totalDownloads" class="flex items-center justify-center h-40">
|
||||
<p>No Downloads</p>
|
||||
</div>
|
||||
<ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
|
||||
<template v-for="download in downloadsDownloading">
|
||||
<li :key="download.id" class="text-gray-400 select-none relative px-4 py-5 border-b border-white border-opacity-10 bg-black bg-opacity-10">
|
||||
<div class="flex items-center justify-center">
|
||||
<div class="w-3/4">
|
||||
<span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
|
||||
<p class="font-normal truncate text-sm">{{ download.audiobook.book.title }}</p>
|
||||
</div>
|
||||
<div class="flex-grow" />
|
||||
|
||||
<div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
|
||||
<span class="material-icons">refresh</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
<template v-for="download in downloadsReady">
|
||||
<li :key="download.id" class="text-gray-50 select-none relative pr-4 pl-2 py-5 border-b border-white border-opacity-10" @click="jumpToAudiobook(download)">
|
||||
<modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" />
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="w-full h-full">
|
||||
<div class="w-full flex justify-around py-4 px-2">
|
||||
<ui-btn small @click="searchFolder">Re-Scan</ui-btn>
|
||||
<ui-btn small @click="changeDownloadFolderClick">Change Folder</ui-btn>
|
||||
<ui-btn small color="error" @click="resetFolder">Reset</ui-btn>
|
||||
</div>
|
||||
<p v-if="isScanning" class="text-center my-8">Scanning Folder..</p>
|
||||
<p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
|
||||
<template v-else>
|
||||
<template v-for="mediaFolder in mediaScanResults.folders">
|
||||
<div :key="mediaFolder.uri" class="w-full px-2 py-2">
|
||||
<div class="flex items-center">
|
||||
<span class="material-icons text-base text-white text-opacity-50">folder</span>
|
||||
<p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
|
||||
</div>
|
||||
<div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
|
||||
<span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
|
||||
<p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-for="mediaFile in mediaScanResults.files">
|
||||
<div :key="mediaFile.uri" class="w-full px-2 py-2">
|
||||
<div class="flex items-center">
|
||||
<span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
|
||||
<p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Dialog } from '@capacitor/dialog'
|
||||
import AudioDownloader from '@/plugins/audio-downloader'
|
||||
import StorageManager from '@/plugins/storage-manager'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
downloadingProgress: {},
|
||||
totalSize: 0,
|
||||
showingDownloads: true,
|
||||
isScanning: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
hasStoragePermission() {
|
||||
return this.$store.state.hasStoragePermission
|
||||
},
|
||||
downloadFolder() {
|
||||
return this.$store.state.downloadFolder
|
||||
},
|
||||
downloadFolderSimplePath() {
|
||||
return this.downloadFolder ? this.downloadFolder.simplePath : null
|
||||
},
|
||||
downloadFolderUri() {
|
||||
return this.downloadFolder ? this.downloadFolder.uri : null
|
||||
},
|
||||
totalDownloads() {
|
||||
return this.downloadsReady.length + this.downloadsDownloading.length
|
||||
},
|
||||
downloadsDownloading() {
|
||||
return this.downloads.filter((d) => d.isDownloading || d.isPreparing)
|
||||
},
|
||||
downloadsReady() {
|
||||
return this.downloads.filter((d) => !d.isDownloading && !d.isPreparing)
|
||||
},
|
||||
downloads() {
|
||||
return this.$store.state.downloads.downloads
|
||||
},
|
||||
mediaScanResults() {
|
||||
return this.$store.state.mediaScanResults
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async changeDownloadFolderClick() {
|
||||
if (!this.hasStoragePermission) {
|
||||
console.log('Requesting Storage Permission')
|
||||
StorageManager.requestStoragePermission()
|
||||
} else {
|
||||
var folderObj = await StorageManager.selectFolder()
|
||||
if (folderObj.error) {
|
||||
return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
|
||||
}
|
||||
|
||||
var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
|
||||
console.log('Storage Permission check folder ' + permissionsGood)
|
||||
|
||||
if (!permissionsGood) {
|
||||
this.$toast.error('Folder permissions failed')
|
||||
return
|
||||
} else {
|
||||
this.$toast.success('Folder permission success')
|
||||
}
|
||||
|
||||
await this.$localStore.setDownloadFolder(folderObj)
|
||||
|
||||
this.searchFolder()
|
||||
}
|
||||
},
|
||||
async searchFolder() {
|
||||
this.isScanning = true
|
||||
var response = await StorageManager.searchFolder({ folderUrl: this.downloadFolderUri })
|
||||
var searchResults = response
|
||||
searchResults.folders = JSON.parse(searchResults.folders)
|
||||
searchResults.files = JSON.parse(searchResults.files)
|
||||
|
||||
if (searchResults.folders.length) {
|
||||
console.log('Search results folders length', searchResults.folders.length)
|
||||
|
||||
searchResults.folders = searchResults.folders.map((sr) => {
|
||||
if (sr.files) {
|
||||
sr.files = JSON.parse(sr.files)
|
||||
}
|
||||
return sr
|
||||
})
|
||||
this.$store.commit('setMediaScanResults', searchResults)
|
||||
} else {
|
||||
this.$toast.warning('No audio or image files found')
|
||||
}
|
||||
this.isScanning = false
|
||||
},
|
||||
async resetFolder() {
|
||||
await this.$localStore.setDownloadFolder(null)
|
||||
this.$store.commit('setMediaScanResults', {})
|
||||
this.$toast.info('Unlinked Folder')
|
||||
},
|
||||
jumpToAudiobook(download) {
|
||||
this.show = false
|
||||
this.$router.push(`/audiobook/${download.id}`)
|
||||
},
|
||||
async clickDeleteDownload(download) {
|
||||
const { value } = await Dialog.confirm({
|
||||
title: 'Confirm',
|
||||
message: 'Delete this download?'
|
||||
})
|
||||
if (value) {
|
||||
this.deleteDownload(download)
|
||||
}
|
||||
},
|
||||
playDownload(download) {
|
||||
this.$store.commit('setPlayOnLoad', true)
|
||||
this.$store.commit('setPlayingDownload', download)
|
||||
this.show = false
|
||||
},
|
||||
async deleteDownload(download) {
|
||||
console.log('Delete download', download.filename)
|
||||
|
||||
if (this.$store.state.playingDownload && this.$store.state.playingDownload.id === download.id) {
|
||||
console.warn('Deleting download when currently playing download - terminate play')
|
||||
if (this.$refs.streamContainer) {
|
||||
this.$refs.streamContainer.cancelStream()
|
||||
}
|
||||
}
|
||||
if (download.contentUrl) {
|
||||
await StorageManager.delete(download)
|
||||
}
|
||||
this.$store.commit('downloads/removeDownload', download)
|
||||
},
|
||||
onDownloadProgress(data) {
|
||||
var progress = data.progress
|
||||
var audiobookId = data.audiobookId
|
||||
|
||||
var downloadObj = this.$store.getters['downloads/getDownload'](audiobookId)
|
||||
if (downloadObj) {
|
||||
this.$set(this.downloadingProgress, audiobookId, progress)
|
||||
}
|
||||
},
|
||||
init() {
|
||||
AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {
|
||||
AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -27,6 +27,9 @@
|
||||
|
||||
<script>
|
||||
export default {
|
||||
asyncData({ redirect }) {
|
||||
return redirect('/bookshelf')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showSortModal: false,
|
||||
|
||||
Reference in New Issue
Block a user