Add start of new local media page for adding folders and scanning local media items

This commit is contained in:
advplyr 2022-03-31 20:23:38 -05:00
parent a8de03b82d
commit a259883979
14 changed files with 698 additions and 73 deletions

View file

@ -5,6 +5,7 @@ import android.os.Handler
import android.os.Looper
import android.util.Log
import androidx.core.content.ContextCompat
import com.audiobookshelf.app.device.DeviceManager
import com.audiobookshelf.app.server.ApiHandler
import com.capacitorjs.plugins.app.AppPlugin
import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
@ -80,6 +81,23 @@ class MyNativeAudio : Plugin() {
}
}
@PluginMethod
fun playLocalLibraryItem(call:PluginCall) {
var localMediaItemId = call.getString("localMediaItemId", "").toString()
var playWhenReady = call.getBoolean("playWhenReady") == true
DeviceManager.dbManager.loadLocalMediaItem(localMediaItemId)?.let {
Handler(Looper.getMainLooper()).post() {
Log.d(tag, "Preparing Local Media item ${jacksonObjectMapper().writeValueAsString(it)}")
playerNotificationService.playLocalMediaItem(it, playWhenReady)
}
return call.resolve(JSObject())
}
var errObj = JSObject()
errObj.put("error", "Item Not Found")
call.resolve(errObj)
}
@PluginMethod
fun getLibraryItems(call: PluginCall) {
var libraryId = call.getString("libraryId", "").toString()

View file

@ -24,6 +24,7 @@ import androidx.media.MediaBrowserServiceCompat
import androidx.media.utils.MediaConstants
import com.anggrayudi.storage.file.isExternalStorageDocument
import com.audiobookshelf.app.data.DbManager
import com.audiobookshelf.app.data.LocalMediaItem
import com.audiobookshelf.app.data.PlaybackSession
import com.getcapacitor.Bridge
import com.getcapacitor.JSObject
@ -706,6 +707,10 @@ class PlayerNotificationService : MediaBrowserServiceCompat() {
currentPlayer.setPlaybackSpeed(1f) // TODO: Playback speed should come from settings
}
fun playLocalMediaItem(localMediaItem: LocalMediaItem, playWhenReady:Boolean) {
Log.d(tag, "playLocalMediaItem ${localMediaItem}")
}
fun initPlayer(audiobookStreamData: AudiobookStreamData) {
currentAudiobookStreamData = audiobookStreamData

View file

@ -10,6 +10,8 @@ import com.anggrayudi.storage.SimpleStorage
import com.anggrayudi.storage.callback.FolderPickerCallback
import com.anggrayudi.storage.callback.StorageAccessCallback
import com.anggrayudi.storage.file.*
import com.audiobookshelf.app.data.LocalFolder
import com.audiobookshelf.app.device.DeviceManager
import com.audiobookshelf.app.device.FolderScanner
import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
import com.getcapacitor.*
@ -21,30 +23,6 @@ class StorageManager : Plugin() {
lateinit var mainActivity:MainActivity
data class MediaFile(val uri: Uri, val name: String, val simplePath: String, val size: Long, val type: String, val isAudio: Boolean) {
fun toJSObject() : JSObject {
var obj = JSObject()
obj.put("uri", this.uri)
obj.put("name", this.name)
obj.put("simplePath", this.simplePath)
obj.put("size", this.size)
obj.put("type", this.type)
obj.put("isAudio", this.isAudio)
return obj
}
}
data class MediaFolder(val uri: Uri, val name: String, val simplePath: String, val mediaFiles:List<MediaFile>) {
fun toJSObject() : JSObject {
var obj = JSObject()
obj.put("uri", this.uri)
obj.put("name", this.name)
obj.put("simplePath", this.simplePath)
obj.put("files", this.mediaFiles.map { it.toJSObject() })
return obj
}
}
override fun load() {
mainActivity = (activity as MainActivity)
@ -79,24 +57,19 @@ class StorageManager : Plugin() {
@PluginMethod
fun selectFolder(call: PluginCall) {
var mediaType = call.data.getString("mediaType", "book").toString()
mainActivity.storage.folderPickerCallback = object : FolderPickerCallback {
override fun onFolderSelected(requestCode: Int, folder: DocumentFile) {
Log.d(TAG, "ON FOLDER SELECTED ${folder.uri} ${folder.name}")
var absolutePath = folder.getAbsolutePath(activity)
var storageId = folder.getStorageId(activity)
var storageType = folder.getStorageType(activity)
var simplePath = folder.getSimplePath(activity)
var basePath = folder.getBasePath(activity)
var jsobj = JSObject()
jsobj.put("uri", folder.uri)
jsobj.put("absolutePath", absolutePath)
jsobj.put("storageId", storageId)
jsobj.put("storageType", storageType)
jsobj.put("simplePath", simplePath)
jsobj.put("basePath", basePath)
call.resolve(jsobj)
var localFolder = LocalFolder(folder.id, folder.name, folder.uri.toString(),absolutePath, simplePath, storageType.toString(), mediaType)
DeviceManager.dbManager.saveLocalFolder(localFolder)
call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(localFolder)))
}
override fun onStorageAccessDenied(requestCode: Int, folder: DocumentFile?, storageType: StorageType) {
@ -155,19 +128,22 @@ class StorageManager : Plugin() {
@PluginMethod
fun searchFolder(call: PluginCall) {
var folderUrl = call.data.getString("folderUrl", "").toString()
var mediaType = call.data.getString("mediaType", "book").toString()
Log.d(TAG, "Searching folder $folderUrl")
var folderScanner = FolderScanner(context)
var folderScanResult = folderScanner.scanForMediaItems(folderUrl, mediaType)
if (folderScanResult == null) {
Log.d(TAG, "NO Scan DATA")
call.resolve(JSObject())
} else {
Log.d(TAG, "Scan DATA ${jacksonObjectMapper().writeValueAsString(folderScanResult)}")
call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(folderScanResult)))
var folderId = call.data.getString("folderId", "").toString()
var folder: LocalFolder? = DeviceManager.dbManager.loadLocalFolder(folderId)
folder?.let {
Log.d(TAG, "Searching folder ${it.contentUrl}")
var folderScanner = FolderScanner(context)
var folderScanResult = folderScanner.scanForMediaItems(it.contentUrl, it.mediaType)
if (folderScanResult == null) {
Log.d(TAG, "NO Scan DATA")
return call.resolve(JSObject())
} else {
Log.d(TAG, "Scan DATA ${jacksonObjectMapper().writeValueAsString(folderScanResult)}")
return call.resolve(JSObject(jacksonObjectMapper().writeValueAsString(folderScanResult)))
}
}
Log.d(TAG, "Folder not found $folderId")
call.resolve(JSObject())
//
// var df: DocumentFile? = DocumentFileCompat.fromUri(context, Uri.parse(folderUrl))

View file

@ -1,6 +1,7 @@
package com.audiobookshelf.app.data
import android.util.Log
import com.fasterxml.jackson.module.kotlin.jacksonObjectMapper
import com.getcapacitor.JSObject
import com.getcapacitor.Plugin
import com.getcapacitor.PluginCall
@ -13,15 +14,54 @@ import org.json.JSONObject
class DbManager : Plugin() {
val tag = "DbManager"
fun loadDeviceData():DeviceData {
var deviceData:DeviceData? = Paper.book("device").read("data")
return deviceData ?: DeviceData(mutableListOf(),null)
fun loadDeviceData(): DeviceData {
return Paper.book("device").read("data") ?: DeviceData(mutableListOf(), null)
}
fun saveDeviceData(deviceData:DeviceData) {
Paper.book("device").write("data", deviceData)
}
fun loadLocalMediaItems():List<LocalMediaItem> {
var localMediaItems:MutableList<LocalMediaItem> = mutableListOf()
Paper.book("localMediaItems").allKeys.forEach {
var localMediaItem:LocalMediaItem? = Paper.book("localMediaItems").read(it)
if (localMediaItem != null) {
localMediaItems.add(localMediaItem)
}
}
return localMediaItems
}
fun loadLocalMediaItem(localMediaItemId:String):LocalMediaItem? {
return Paper.book("localMediaItems").read(localMediaItemId)
}
fun saveLocalMediaItems(localMediaItems:List<LocalMediaItem>) {
localMediaItems.map {
Paper.book("localMediaItems").write(it.id, it)
}
}
fun saveLocalFolder(localFolder:LocalFolder) {
Paper.book("localFolders").write(localFolder.id,localFolder)
}
fun loadLocalFolder(folderId:String):LocalFolder? {
return Paper.book("localFolders").read(folderId)
}
fun getAllLocalFolders():List<LocalFolder> {
var localFolders:MutableList<LocalFolder> = mutableListOf()
Paper.book("localFolders").allKeys.forEach {
var localFolder:LocalFolder? = Paper.book("localFolders").read(it)
if (localFolder != null) {
localFolders.add(localFolder)
}
}
return localFolders
}
fun saveObject(db:String, key:String, value:JSONObject) {
Log.d(tag, "Saving Object $key ${value.toString()}")
Paper.book(db).write(key, value)
@ -60,4 +100,26 @@ class DbManager : Plugin() {
var jsobj = JSObject.fromJSONObject(json)
call.resolve(jsobj)
}
@PluginMethod
fun localFoldersFromWebView(call:PluginCall) {
var folders = getAllLocalFolders()
var folderObjArray = jacksonObjectMapper().writeValueAsString(folders)
var jsobj = JSObject()
jsobj.put("folders", folderObjArray)
call.resolve(jsobj)
}
@PluginMethod
fun loadMediaItemsInFolder(call:PluginCall) {
var folderId = call.getString("folderId", "").toString()
var localMediaItems = loadLocalMediaItems().filter {
it.folderId == folderId
}
var mediaItemsArray = jacksonObjectMapper().writeValueAsString(localMediaItems)
var jsobj = JSObject()
jsobj.put("localMediaItems", mediaItemsArray)
call.resolve(jsobj)
}
}

View file

@ -20,7 +20,10 @@ data class DeviceData(
@JsonIgnoreProperties(ignoreUnknown = true)
data class LocalMediaItem(
var id:String,
var name: String,
var mediaType:String,
var folderId:String,
var contentUrl:String,
var simplePath: String,
var absolutePath:String,
@ -39,3 +42,14 @@ data class LocalFile(
var mimeType:String?,
var size:Long
)
@JsonIgnoreProperties(ignoreUnknown = true)
data class LocalFolder(
var id:String,
var name:String?,
var contentUrl:String,
var absolutePath:String,
var simplePath:String,
var storageType:String,
var mediaType:String
)

View file

@ -20,6 +20,10 @@ class FolderScanner(var ctx: Context) {
Log.e(tag, "Folder Doc File Invalid $folderUrl")
return null
}
var folderName = df.name ?: ""
var folderPath = df.getAbsolutePath(ctx)
var folderUrl = df.uri.toString()
var folderId = df.id
var foldersFound = df.search(false, DocumentFileType.FOLDER)
@ -27,7 +31,7 @@ class FolderScanner(var ctx: Context) {
foldersFound.forEach {
Log.d(tag, "Iterating over Folder Found ${it.name} | ${it.getSimplePath(ctx)} | URI: ${it.uri}")
var folderName = it.name ?: ""
var itemFolderName = it.name ?: ""
var audioTracks = mutableListOf<AudioTrack>()
var localFiles = mutableListOf<LocalFile>()
@ -40,7 +44,7 @@ class FolderScanner(var ctx: Context) {
var mimeType = it2?.mimeType ?: ""
var filename = it2?.name ?: ""
var isAudio = mimeType.startsWith("audio")
Log.d(tag, "Found $mimeType file $filename in folder $folderName")
Log.d(tag, "Found $mimeType file $filename in folder $itemFolderName")
var localFile = LocalFile(it2.id,it2.name,it2.uri.toString(),it2.getAbsolutePath(ctx),it2.getSimplePath(ctx),it2.mimeType,it2.length())
localFiles.add(localFile)
@ -70,15 +74,16 @@ class FolderScanner(var ctx: Context) {
}
}
if (audioTracks.size > 0) {
Log.d(tag, "Found local media item named $folderName with ${audioTracks.size} tracks")
var localMediaItem = LocalMediaItem(folderName, it.uri.toString(), it.getSimplePath(ctx), it.getAbsolutePath(ctx),audioTracks,localFiles,coverPath)
Log.d(tag, "Found local media item named $itemFolderName with ${audioTracks.size} tracks")
var localMediaItem = LocalMediaItem(it.id, itemFolderName, mediaType, folderId, it.uri.toString(), it.getSimplePath(ctx), it.getAbsolutePath(ctx),audioTracks,localFiles,coverPath)
mediaItems.add(localMediaItem)
}
}
return if (mediaItems.size > 0) {
Log.d(tag, "Found ${mediaItems.size} Media Items")
FolderScanResult(df.name, df.getAbsolutePath(ctx), mediaType, df.uri.toString(), mediaItems)
DeviceManager.dbManager.saveLocalMediaItems(mediaItems)
FolderScanResult(folderName, folderPath, mediaType, folderUrl, mediaItems)
} else {
Log.d(tag, "No Media Items Found")
null

View file

@ -488,6 +488,18 @@ export default {
.catch((error) => {
console.error('TEST failed', error)
})
},
async playLocalItem(localMediaItemId) {
console.log('Called play local media item for lmi', localMediaItemId)
MyNativeAudio.playLocalLibraryItem({ localMediaItemId, playWhenReady: true })
.then((data) => {
console.log('TEST library item play response', JSON.stringify(data))
var mediaEntity = data.mediaEntity
this.$store.commit('globals/setMediaEntityPlaying', mediaEntity)
})
.catch((error) => {
console.error('TEST failed', error)
})
}
},
mounted() {
@ -499,6 +511,7 @@ export default {
this.setListeners()
this.$eventBus.$on('play-item', this.playLibraryItem)
this.$eventBus.$on('play-local-item', this.playLocalItem)
this.$eventBus.$on('close_stream', this.closeStreamOnly)
this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
},
@ -514,6 +527,7 @@ export default {
this.$server.socket.off('stream_reset', this.streamReset)
}
this.$eventBus.$off('play-item', this.playLibraryItem)
this.$eventBus.$off('play-local-item', this.playLocalItem)
this.$eventBus.$off('close_stream', this.closeStreamOnly)
this.$store.commit('user/removeSettingsListener', 'streamContainer')
}

View file

@ -83,8 +83,8 @@ export default {
{
icon: 'folder',
iconOutlined: true,
text: 'Downloads',
to: '/downloads'
text: 'Local Media',
to: '/localMedia/folders'
}
// {
// icon: 'settings',

View file

@ -1,8 +1,15 @@
<template>
<button class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @click="click">
<nuxt-link v-if="to" :to="to" class="btn outline-none rounded-md shadow-md relative border border-gray-600 text-center" :disabled="disabled || loading" :class="classList">
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
</nuxt-link>
<button v-else class="btn outline-none rounded-md shadow-md relative border border-gray-600" :disabled="disabled || loading" :type="type" :class="classList" @mousedown.prevent @click="click">
<slot />
<div v-if="loading" class="text-white absolute top-0 left-0 w-full h-full flex items-center justify-center text-opacity-100">
<!-- <span class="material-icons animate-spin">refresh</span> -->
<svg class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
@ -13,6 +20,7 @@
<script>
export default {
props: {
to: String,
color: {
type: String,
default: 'primary'
@ -46,6 +54,9 @@ export default {
if (this.paddingX !== undefined) {
list.push(`px-${this.paddingX}`)
}
if (this.disabled) {
list.push('cursor-not-allowed')
}
return list
}
},
@ -59,7 +70,7 @@ export default {
</script>
<style>
button.btn::before {
.btn::before {
content: '';
position: absolute;
border-radius: 6px;
@ -70,7 +81,7 @@ button.btn::before {
background-color: rgba(255, 255, 255, 0);
transition: all 0.1s ease-in-out;
}
button.btn:hover:not(:disabled)::before {
.btn:hover:not(:disabled)::before {
background-color: rgba(255, 255, 255, 0.1);
}
button:disabled::before {

View file

@ -0,0 +1,93 @@
<template>
<div class="relative w-full" v-click-outside="clickOutsideObj">
<p class="text-sm font-semibold" :class="disabled ? 'text-gray-300' : ''">{{ label }}</p>
<button type="button" :disabled="disabled" class="relative w-full border rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm" :class="buttonClass" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
<span class="flex items-center">
<span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
</span>
<span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<span class="material-icons">expand_more</span>
</span>
</button>
<transition name="menu">
<ul v-show="showMenu" class="absolute z-10 -mt-px w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
<template v-for="item in items">
<li :key="item.value" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="clickedOption(item.value)">
<div class="flex items-center">
<span class="font-normal ml-3 block truncate font-sans text-sm">{{ item.text }}</span>
</div>
</li>
</template>
</ul>
</transition>
</div>
</template>
<script>
export default {
props: {
value: [String, Number],
label: {
type: String,
default: ''
},
items: {
type: Array,
default: () => []
},
disabled: Boolean,
small: Boolean
},
data() {
return {
clickOutsideObj: {
handler: this.clickedOutside,
events: ['mousedown'],
isActive: true
},
showMenu: false
}
},
computed: {
selected: {
get() {
return this.value
},
set(val) {
this.$emit('input', val)
}
},
selectedItem() {
return this.items.find((i) => i.value === this.selected)
},
selectedText() {
return this.selectedItem ? this.selectedItem.text : ''
},
buttonClass() {
var classes = []
if (this.small) classes.push('h-9')
else classes.push('h-10')
if (this.disabled) classes.push('cursor-not-allowed border-gray-600 bg-primary bg-opacity-70 border-opacity-70 text-gray-400')
else classes.push('cursor-pointer border-gray-600 bg-primary text-gray-100')
return classes.join(' ')
}
},
methods: {
clickShowMenu() {
if (this.disabled) return
this.showMenu = !this.showMenu
},
clickedOutside() {
this.showMenu = false
},
clickedOption(itemValue) {
this.selected = itemValue
this.showMenu = false
}
},
mounted() {}
}
</script>

View file

@ -2,6 +2,22 @@
<div class="w-full h-full py-6">
<h1 class="text-2xl px-4">Downloads</h1>
<div v-if="!isIos" class="w-full px-2 py-2">
<template v-for="folder in localFolders">
<div :key="folder.id" class="flex items-center p-2">
<div class="flex-grow">
<p>{{ folder.id }}|{{ folder.name }}|{{ folder.contentUrl }}</p>
</div>
<div class="w-40">
<ui-btn @click="searchFolder(folder.id)">Scan</ui-btn>
</div>
</div>
</template>
<div v-if="!localFolders.length" class="flex justify-center">
<p class="text-center">No Media Folders</p>
</div>
</div>
<div v-if="!isIos" 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>
@ -25,7 +41,7 @@
</div>
</div>
</div>
<div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden bg-primary">
<div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden overflow-y-auto bg-primary">
<template v-if="showingDownloads">
<div v-if="!totalDownloads" class="flex items-center justify-center h-40">
<p>No Downloads</p>
@ -52,8 +68,8 @@
<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 @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>
@ -107,7 +123,8 @@ export default {
totalSize: 0,
showingDownloads: true,
isScanning: false,
localMediaItems: []
localMediaItems: [],
localFolders: []
}
},
computed: {
@ -150,11 +167,19 @@ export default {
if (!this.hasStoragePermission) {
StorageManager.requestStoragePermission()
} else {
var folderObj = await StorageManager.selectFolder()
var folderObj = await StorageManager.selectFolder({ mediaType: 'book' })
if (folderObj.error) {
return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
}
var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.uri })
var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
if (indexOfExisting >= 0) {
this.localFolders.splice(indexOfExisting, 1, folderObj)
} else {
this.localFolders.push(folderObj)
}
var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
if (!permissionsGood) {
this.$toast.error('Folder permissions failed')
@ -163,18 +188,17 @@ export default {
this.$toast.success('Folder permission success')
}
await this.$localStore.setDownloadFolder(folderObj)
await this.searchFolder()
// await this.$localStore.setDownloadFolder(folderObj)
await this.searchFolder(folderObj.id)
if (this.isSocketConnected) {
this.$store.dispatch('downloads/linkOrphanDownloads')
}
}
},
async searchFolder() {
async searchFolder(folderId) {
this.isScanning = true
var response = await StorageManager.searchFolder({ folderUrl: this.downloadFolderUri })
var response = await StorageManager.searchFolder({ folderId })
if (response && response.localMediaItems) {
this.localMediaItems = response.localMediaItems.map((mi) => {
@ -252,10 +276,14 @@ export default {
this.$set(this.downloadingProgress, audiobookId, progress)
}
},
init() {
async init() {
this.localFolders = (await this.$db.loadFolders()) || []
AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
}
},
mounted() {
this.init()
},
beforeDestroy() {
AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
}

View 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>

View file

@ -0,0 +1,278 @@
<template>
<div class="w-full h-full py-6">
<h1 class="text-2xl px-4">Downloads</h1>
<div v-if="!isIos" class="w-full max-w-full px-2 py-2">
<template v-for="folder in localFolders">
<nuxt-link :to="`/localMedia/folders/${folder.id}`" :key="folder.id" class="flex items-center px-2 py-4 bg-primary rounded-md border-bg mb-1">
<span class="material-icons text-xl text-yellow-400">folder</span>
<p class="ml-2">{{ folder.id }}</p>
<div class="flex-grow" />
<p class="text-sm italic text-gray-300 px-2 capitalize">{{ folder.mediaType }}s</p>
<span class="material-icons text-base text-gray-300">arrow_right</span>
</nuxt-link>
</template>
<div v-if="!localFolders.length" class="flex justify-center">
<p class="text-center">No Media Folders</p>
</div>
<div class="flex p-2 border-t border-primary mt-2">
<div class="flex-grow pr-1">
<ui-dropdown v-model="newFolderMediaType" :items="mediaTypeItems" />
</div>
<ui-btn small class="w-28" @click="selectFolder">Add Folder</ui-btn>
</div>
</div>
<!-- <div v-if="!isIos" class="list-content-body relative w-full overflow-x-hidden overflow-y-auto 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">
<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">
<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>
<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>
</template>
<template v-else>
<div class="w-full h-full">
<div class="w-full flex justify-around py-4 px-2">
<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>
<div v-else>
<div v-for="mediaFolder in mediaScanResults.folders" :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>
<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>
</template>
</div> -->
</div>
</template>
<script>
import { Capacitor } from '@capacitor/core'
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,
localMediaItems: [],
localFolders: [],
newFolderMediaType: 'book',
mediaTypeItems: [
{
value: 'book',
text: 'Books'
},
{
value: 'podcast',
text: 'Podcasts'
}
]
}
},
computed: {
isIos() {
return this.$platform === 'ios'
},
isSocketConnected() {
return this.$store.state.socketConnected
},
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.downloads.mediaScanResults
}
},
methods: {
async selectFolder() {
var folderObj = await StorageManager.selectFolder({ mediaType: this.newFolderMediaType })
if (folderObj.error) {
return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
}
var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
if (indexOfExisting >= 0) {
this.localFolders.splice(indexOfExisting, 1, folderObj)
} else {
this.localFolders.push(folderObj)
}
var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
if (!permissionsGood) {
this.$toast.error('Folder permissions failed')
return
} else {
this.$toast.success('Folder permission success')
}
// await this.searchFolder(folderObj.id)
this.$router.push(`/localMedia/folders/${folderObj.id}?scan=1`)
},
async changeDownloadFolderClick() {
if (!this.hasStoragePermission) {
StorageManager.requestStoragePermission()
} else {
var folderObj = await StorageManager.selectFolder({ mediaType: 'book' })
if (folderObj.error) {
return this.$toast.error(`Error: ${folderObj.error || 'Unknown Error'}`)
}
var indexOfExisting = this.localFolders.findIndex((lf) => lf.id == folderObj.id)
if (indexOfExisting >= 0) {
this.localFolders.splice(indexOfExisting, 1, folderObj)
} else {
this.localFolders.push(folderObj)
}
var permissionsGood = await StorageManager.checkFolderPermissions({ folderUrl: folderObj.contentUrl })
if (!permissionsGood) {
this.$toast.error('Folder permissions failed')
return
} else {
this.$toast.success('Folder permission success')
}
await this.searchFolder(folderObj.id)
if (this.isSocketConnected) {
this.$store.dispatch('downloads/linkOrphanDownloads')
}
}
},
async searchFolder(folderId) {
this.isScanning = true
var response = await StorageManager.searchFolder({ 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 resetFolder() {
await this.$localStore.setDownloadFolder(null)
this.$store.commit('downloads/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)
}
},
async init() {
this.localFolders = (await this.$db.loadFolders()) || []
AudioDownloader.addListener('onDownloadProgress', this.onDownloadProgress)
}
},
mounted() {
this.init()
},
beforeDestroy() {
AudioDownloader.removeListener('onDownloadProgress', this.onDownloadProgress)
}
}
</script>

View file

@ -22,6 +22,29 @@ class DbService {
return null
})
}
loadFolders() {
return DbManager.localFoldersFromWebView().then((data) => {
console.log('Loaded local folders', JSON.stringify(data))
if (data.folders && typeof data.folders == 'string') {
return JSON.parse(data.folders)
}
return data.folders
}).catch((error) => {
console.error('Failed to load', error)
return null
})
}
loadLocalMediaItemsInFolder(folderId) {
return DbManager.loadMediaItemsInFolder({ folderId }).then((data) => {
console.log('Loaded local media items in folder', JSON.stringify(data))
if (data.localMediaItems && typeof data.localMediaItems == 'string') {
return JSON.parse(data.localMediaItems)
}
return data.localMediaItems
})
}
}
export default ({ app, store }, inject) => {