Fix:User accessible libraries #84

This commit is contained in:
advplyr 2022-01-16 14:14:02 -06:00
parent a2031f1d88
commit c07b527a1d
7 changed files with 48 additions and 54 deletions

View file

@ -319,7 +319,6 @@ export default {
if (this.isFirstInit) return if (this.isFirstInit) return
this.isFirstInit = true this.isFirstInit = true
this.initSizeData() this.initSizeData()
await this.loadPage(0) await this.loadPage(0)
var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf) var lastBookIndex = Math.min(this.totalEntities, this.shelvesPerPage * this.entitiesPerShelf)
this.mountEntites(0, lastBookIndex) this.mountEntites(0, lastBookIndex)

View file

@ -56,7 +56,8 @@ export default {
this.initSocketListeners() this.initSocketListeners()
// Load libraries // Load libraries
this.$store.dispatch('libraries/load') await this.$store.dispatch('libraries/load')
this.$eventBus.$emit('library-changed')
this.$store.dispatch('libraries/fetch', this.currentLibraryId) this.$store.dispatch('libraries/fetch', this.currentLibraryId)
} else { } else {
this.removeSocketListeners() this.removeSocketListeners()

View file

@ -18,10 +18,7 @@
<span class="material-icons text-error text-lg">cloud_off</span> <span class="material-icons text-error text-lg">cloud_off</span>
<p class="pl-2 text-error text-sm">Audiobookshelf server not connected.</p> <p class="pl-2 text-error text-sm">Audiobookshelf server not connected.</p>
</div> </div>
<p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto"> <p class="px-4 text-center text-error absolute bottom-12 left-0 right-0 mx-auto"><strong>Important!</strong> This app requires that you are running <u>your own server</u> and does not provide any content.</p>
<strong>Important!</strong> This app requires that you are running
<u>your own server</u> and does not provide any content.
</p>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32">Connect</ui-btn> <ui-btn v-if="!isSocketConnected" small @click="$router.push('/connect')" class="w-32">Connect</ui-btn>
@ -136,7 +133,7 @@ export default {
this.shelves = categories this.shelves = categories
}, },
async socketInit(isConnected) { async socketInit(isConnected) {
if (isConnected) { if (isConnected && this.currentLibraryId) {
console.log('Connected - Load from server') console.log('Connected - Load from server')
await this.fetchCategories() await this.fetchCategories()
} else { } else {
@ -146,8 +143,7 @@ export default {
this.loading = false this.loading = false
}, },
async libraryChanged(libid) { async libraryChanged(libid) {
console.log('Library changed', libid) if (this.isSocketConnected && this.currentLibraryId) {
if (this.isSocketConnected) {
await this.fetchCategories() await this.fetchCategories()
} else { } else {
this.shelves = this.downloadOnlyShelves this.shelves = this.downloadOnlyShelves
@ -246,7 +242,7 @@ export default {
}, },
mounted() { mounted() {
this.initListeners() this.initListeners()
if (this.$server.initialized) { if (this.$server.initialized && this.currentLibraryId) {
this.fetchCategories() this.fetchCategories()
} else { } else {
this.shelves = this.downloadOnlyShelves this.shelves = this.downloadOnlyShelves

View file

@ -31,26 +31,22 @@
<p>No Downloads</p> <p>No Downloads</p>
</div> </div>
<ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label"> <ul v-else class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
<template v-for="download in downloadsDownloading"> <li v-for="download in downloadsDownloading" :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">
<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="flex items-center justify-center"> <div class="w-3/4">
<div class="w-3/4"> <span class="text-xs">({{ downloadingProgress[download.id] || 0 }}%) {{ download.isPreparing ? 'Preparing' : 'Downloading' }}...</span>
<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>
<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> </div>
</li> <div class="flex-grow" />
</template>
<template v-for="download in downloadsReady"> <div class="shadow-sm text-white flex items-center justify-center rounded-full animate-spin">
<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)"> <span class="material-icons">refresh</span>
<modals-downloads-download-item :download="download" @play="playDownload" @delete="clickDeleteDownload" /> </div>
</li> </div>
</template> </li>
<li v-for="download in downloadsReady" :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>
</ul> </ul>
</template> </template>
<template v-else> <template v-else>
@ -62,29 +58,26 @@
</div> </div>
<p v-if="isScanning" class="text-center my-8">Scanning Folder..</p> <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> <p v-else-if="!mediaScanResults" class="text-center my-8">No Files Found</p>
<template v-else> <div v-else>
<template v-for="mediaFolder in mediaScanResults.folders"> <div v-for="mediaFolder in mediaScanResults.folders" :key="mediaFolder.uri" class="w-full px-2 py-2">
<div :key="mediaFolder.uri" class="w-full px-2 py-2"> <div class="flex items-center">
<div class="flex items-center"> <span class="material-icons text-base text-white text-opacity-50">folder</span>
<span class="material-icons text-base text-white text-opacity-50">folder</span> <p class="ml-1 py-0.5">{{ mediaFolder.name }}</p>
<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> </div>
</template> <div v-for="mediaFile in mediaFolder.files" :key="mediaFile.uri" class="ml-3 flex items-center">
<template v-for="mediaFile in mediaScanResults.files"> <span class="material-icons text-base text-white text-opacity-50">{{ mediaFile.isAudio ? 'music_note' : 'image' }}</span>
<div :key="mediaFile.uri" class="w-full px-2 py-2"> <p class="ml-1 py-0.5">{{ mediaFile.name }}</p>
<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> </div>
</template> </div>
</template> <div v-for="mediaFile in mediaScanResults.files" :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>
</div>
</div> </div>
</template>
</div> </div>
</div> </div>
</template> </template>

View file

@ -23,7 +23,6 @@ class StoreService {
init() { init() {
this.platform = Capacitor.getPlatform() this.platform = Capacitor.getPlatform()
this.store = CapacitorDataStorageSqlite this.store = CapacitorDataStorageSqlite
console.log('in init ', this.platform)
} }
/** /**

View file

@ -18,7 +18,7 @@ export const getters = {
console.error('No book item id', bookItem) console.error('No book item id', bookItem)
} }
if (process.env.NODE_ENV !== 'production') { // Testing if (process.env.NODE_ENV !== 'production') { // Testing
return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}` // return `http://localhost:3333/api/books/${bookItem.id}/cover?token=${userToken}&ts=${bookLastUpdate}`
} }
var url = new URL(`/api/books/${bookItem.id}/cover`, rootState.serverUrl) var url = new URL(`/api/books/${bookItem.id}/cover`, rootState.serverUrl)

View file

@ -2,7 +2,7 @@ export const state = () => ({
libraries: [], libraries: [],
lastLoad: 0, lastLoad: 0,
listeners: [], listeners: [],
currentLibraryId: 'main', currentLibraryId: '',
showModal: false, showModal: false,
folders: [], folders: [],
folderLastUpdate: 0, folderLastUpdate: 0,
@ -65,17 +65,23 @@ export const actions = {
return false return false
} }
this.$axios return this.$axios
.$get(`/api/libraries`) .$get(`/api/libraries`)
.then((data) => { .then((data) => {
// Set current library
if (data.length) {
commit('setCurrentLibrary', data[0].id)
}
commit('set', data) commit('set', data)
commit('setLastLoad') commit('setLastLoad')
return true
}) })
.catch((error) => { .catch((error) => {
console.error('Failed', error) console.error('Failed', error)
commit('set', []) commit('set', [])
return false
}) })
return true
}, },
} }