mirror of
https://github.com/advplyr/audiobookshelf-app.git
synced 2025-08-04 01:54:33 +02:00
Add start of new local media page for adding folders and scanning local media items
This commit is contained in:
parent
a8de03b82d
commit
a259883979
14 changed files with 698 additions and 73 deletions
98
pages/localMedia/folders/_id.vue
Normal file
98
pages/localMedia/folders/_id.vue
Normal file
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="w-full h-full py-6 px-2">
|
||||
<div class="flex justify-between mb-4">
|
||||
<ui-btn to="/localMedia/folders">Back</ui-btn>
|
||||
<ui-btn :loading="isScanning" @click="searchFolder">Scan</ui-btn>
|
||||
</div>
|
||||
<p class="text-lg mb-0.5 text-white text-opacity-75">Folder: {{ folderId }}</p>
|
||||
<p class="mb-4 text-xl">Local Media Items ({{ localMediaItems.length }})</p>
|
||||
<div v-if="isScanning" class="w-full text-center p-4">
|
||||
<p>Scanning...</p>
|
||||
</div>
|
||||
<div v-else class="w-full media-item-container overflow-y-auto">
|
||||
<template v-for="mediaItem in localMediaItems">
|
||||
<div :key="mediaItem.id" class="flex my-1">
|
||||
<div class="w-12 h-12 bg-primary">
|
||||
<img v-if="mediaItem.coverPathSrc" :src="mediaItem.coverPathSrc" class="w-full h-full object-contain" />
|
||||
</div>
|
||||
<div class="flex-grow px-2">
|
||||
<p>{{ mediaItem.name }}</p>
|
||||
<p>{{ mediaItem.audioTracks.length }} Tracks</p>
|
||||
</div>
|
||||
<div class="w-12 h-12 flex items-center justify-center">
|
||||
<button v-if="!isMissing" class="shadow-sm text-accent flex items-center justify-center rounded-full" @click.stop="play(mediaItem)">
|
||||
<span class="material-icons" style="font-size: 2rem">play_arrow</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Capacitor } from '@capacitor/core'
|
||||
import StorageManager from '@/plugins/storage-manager'
|
||||
|
||||
export default {
|
||||
asyncData({ params, query }) {
|
||||
return {
|
||||
folderId: params.id,
|
||||
shouldScan: !!query.scan
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localMediaItems: [],
|
||||
isScanning: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
play(mediaItem) {
|
||||
this.$eventBus.$emit('play-local-item', mediaItem.id)
|
||||
},
|
||||
async searchFolder() {
|
||||
this.isScanning = true
|
||||
var response = await StorageManager.searchFolder({ folderId: this.folderId })
|
||||
|
||||
if (response && response.localMediaItems) {
|
||||
this.localMediaItems = response.localMediaItems.map((mi) => {
|
||||
if (mi.coverPath) {
|
||||
mi.coverPathSrc = Capacitor.convertFileSrc(mi.coverPath)
|
||||
}
|
||||
return mi
|
||||
})
|
||||
console.log('Set Local Media Items', this.localMediaItems.length)
|
||||
} else {
|
||||
console.log('No Local media items found')
|
||||
}
|
||||
|
||||
this.isScanning = false
|
||||
},
|
||||
async init() {
|
||||
var items = (await this.$db.loadLocalMediaItemsInFolder(this.folderId)) || []
|
||||
console.log('Init folder', this.folderId, items)
|
||||
this.localMediaItems = items.map((lmi) => {
|
||||
return {
|
||||
...lmi,
|
||||
coverPathSrc: lmi.coverPath ? Capacitor.convertFileSrc(lmi.coverPath) : null
|
||||
}
|
||||
})
|
||||
if (this.shouldScan) {
|
||||
this.searchFolder()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.media-item-container {
|
||||
height: calc(100vh - 200px);
|
||||
max-height: calc(100vh - 200px);
|
||||
}
|
||||
</style>
|
Loading…
Add table
Add a link
Reference in a new issue