import type { AudioFile, Directory, FileListing } from "music-server-shared/types"; import type { AppOptions, Playlist, PlaylistItem } from "./types"; import { joinPath, toast } from "./utils"; import { createSignal, type ResourceActions, type Signal } from "solid-js"; import { AsyncSemaphore } from "./semaphore"; interface Progress { bytes: number; } export type SignalMapEntry = undefined | Progress | "DirectoryProgress" | "CachedFile"; export const signalMap = new Map>(); function updateOfflineFileTree(path: string, duration: number): void { const basePath = path.split("/").slice(0, -1).join("/"); const name = path.split("/").toReversed()[0]; const node = getDirInTree(basePath, true); const existingFileIndex = node.files.findIndex((f) => f.name === name); const file = { name: name, duration: duration }; if (existingFileIndex >= 0) { node.files[existingFileIndex] = file; } else { node.files.push(file); } } export async function loadDataFromDB() { try { const db = await openDB(); const files = await db.listFiles(FileMetadataStore); for (const file of files) { signalMap.set(file.path, createSignal("CachedFile")); updateOfflineFileTree(file.path, file.duration); } } catch (e) { toast("Loading offline files failed", "error", e); console.error(e); } } interface DirectoryNode { directories: Record; files: AudioFile[]; } const directoryTree: DirectoryNode = { directories: {}, files: [], }; // get a DirectoryNode from the directory tree, and optionally create it if it doesn't exist yet function getDirInTree(path: string, create: true): DirectoryNode; function getDirInTree(path: string, create: false): DirectoryNode | null; function getDirInTree(path: string, create: boolean): DirectoryNode | null { const parts = path.split("/").filter(Boolean); let current = directoryTree; for (const part of parts) { if (!current.directories[part]) { if (!create) return null; current.directories[part] = { directories: {}, files: [] }; } current = current.directories[part]; } return current; } function deletePath(path: string): void { const basePath = path.split("/").slice(0, -1).join("/"); const node = getDirInTree(basePath, false); if (!node) return; const name = path.split("/").toReversed()[0]; delete node.directories[name]; node.files = node.files.filter((file) => file.name !== name); } type FileEntry = { name: string } & ({ type: "Directory" } | { type: "File"; duration: number }); const directoryCache = new Map(); export const clearDirectoryCache = (path: string) => directoryCache.delete(path); async function requestFileList(dir: string, recursive: boolean): Promise { const response = await fetch(`/list/${dir}?recursive=${recursive}`).catch(() => {}); if (response?.status === 404) { toast(`Directory not found: ${dir}`, "error"); return; } if (!response || !response.ok) { toast( `Fetching files for ${dir === "" ? "root" : dir} failed${response ? `: ${response.statusText}` : ""}`, "error", ); return; } const data: Directory = await response.json(); return data.files; } function saveFileListToCache(basePath: string, files: FileListing, recursive: boolean) { const converted: FileEntry[] = files.map((item) => { if ("files" in item) { if (recursive) saveFileListToCache(joinPath(basePath, item.name), item.files, true); return { ...item, type: "Directory" }; } return { ...item, type: "File" }; }); directoryCache.set(basePath, converted); } function cachedToDirectory(fullPath: string, entries: FileEntry[] | undefined, recursive: boolean): FileListing | null { if (!entries) return null; const result = []; for (const item of entries) { const newPath = joinPath(fullPath, item.name); let children = undefined; if (item.type !== "File") { children = recursive ? cachedToDirectory(newPath, directoryCache.get(newPath), true) : []; if (!children) return null; result.push({ name: item.name, files: children }); } else { result.push({ name: item.name, duration: item.duration }); } } return result; } function listOfflineFiles(dir: string, recursive: boolean): FileListing { const node = getDirInTree(dir, false); if (!node) return []; const entries: FileListing = []; entries.push(...node.files); if (recursive) { for (const [name, childNode] of Object.entries(node.directories)) { const directoryEntry: Directory = { name, files: childNode.files, }; directoryEntry.files = listOfflineFiles(joinPath(dir, name), true); entries.push(directoryEntry); } } else { entries.push(...Object.keys(node.directories).map((dir) => ({ name: dir, files: [] }))); } return entries.sort((a, b) => a.name.localeCompare(b.name)); } export async function listFiles(dir: string, offline: boolean, recursive: boolean): Promise { if (offline) { const res = listOfflineFiles(dir, recursive); return res; } const cached = cachedToDirectory(dir, directoryCache.get(dir), recursive); if (cached !== null) return cached; const files = await requestFileList(dir, recursive); if (!files) return []; saveFileListToCache(dir, files, recursive); return files; } export async function getCover(dir: string, offline: boolean) { const db = await openDB(); const dbResult = await db.get(CoverStore, dir); if (dbResult !== undefined) { const cached = dbResult as StoredCover; return cached.data === null ? undefined : URL.createObjectURL(new Blob([cached.data])); } if (offline) return undefined; const response = await fetch(`/cover/${dir}`, { method: "GET" }).catch(() => {}); if (!response || response.status === 404) { db.put(CoverStore, { path: dir, data: null }); return undefined; } const blob = await response.blob(); db.put(CoverStore, { path: dir, data: blob }); return URL.createObjectURL(blob); } export const clearCoverCache = async (path: string) => { const db = await openDB(); return db.delete(CoverStore, path); }; export async function getSrc(path: string, options: AppOptions) { const db = await openDB(); const dbResult = (await db.get(FileBlobStore, path)) as StoredFileBlob; if (dbResult) return URL.createObjectURL(dbResult.data); if (options.enableTranscoding) { return `${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}`; } return joinPath("/download", path); } export async function loadPlaylists() { const db = await openDB(); return await db.listPlaylists(PlaylistStore); } export async function savePlaylist(playlist: Playlist, overwrite: boolean) { const db = await openDB(); playlist.items = playlist.items.map((item) => { //some less space in the db by omitting ids const { id, ...itemWithoutId } = item as PlaylistItem; return itemWithoutId; }); if (overwrite) await db.put(PlaylistStore, playlist); else await db.add(PlaylistStore, playlist); } export async function deletePlaylist(name: string) { const db = await openDB(); await db.delete(PlaylistStore, name); } export async function deleteFile( item: AudioFile | Directory, basePath: string, fetchFiles: ResourceActions, listing?: FileListing, ) { console.log(item); const fullPath = joinPath(basePath, item.name); const signal = signalMap.get(fullPath); if (!signal) return; if (!("duration" in item)) { const newBasePath = joinPath(basePath, item.name); const result = listing ?? listOfflineFiles(newBasePath, true); for (const childItem of result) { await deleteFile(childItem, newBasePath, fetchFiles, "files" in childItem ? childItem.files : undefined); } } deletePath(fullPath); const db = await openDB(); await db.delete(FileBlobStore, fullPath); await db.delete(FileMetadataStore, fullPath); signalMap.get(fullPath)?.[1](undefined); fetchFiles.refetch(); console.log("here"); } const downloadSemaphore = new AsyncSemaphore(1); async function downloadFile( path: string, progressSignal: Signal, options: AppOptions, duration: number, fetchFiles: ResourceActions, ): Promise { const [getProgress, setProgress] = progressSignal; const progress = getProgress(); if (typeof progress === "object" && "bytes" in progress) return; // download already in progress const db = await openDB(); let mimeType: string | undefined; try { setProgress({ bytes: 0 }); downloadSemaphore.setMaxConcurrency(options.enableTranscoding ? options.maxTranscodes : options.maxDownloads); let blob: Blob; try { await downloadSemaphore.acquire(); let res: Response; if (options.enableTranscoding) { res = await fetch(`${joinPath("/transcode", path)}?bitrate=${options.bitrate}&format=${options.format}`); } else { res = await fetch(joinPath("/download", path)); } //let the browser do the actual download const blobPromise = res.clone().blob(); if (!res.ok || !res.body) throw res.statusText; //we just iterate over the chunks to get the current progress const reader = res.body.getReader(); mimeType = res.headers.get("content-type") ?? undefined; let received = 0; let lastUpdate = 0; while (true) { const { done, value } = await reader.read(); if (done) break; received += value.length; const now = Date.now(); if (now - lastUpdate < 250) continue; lastUpdate = now; setProgress({ bytes: received }); } blob = await blobPromise; } finally { downloadSemaphore.release(); } await db.put(FileBlobStore, { path, data: blob, } as StoredFileBlob); await db.put(FileMetadataStore, { path, duration, } as StoredFileMetadata); updateOfflineFileTree(path, duration); setProgress("CachedFile"); fetchFiles.refetch(); } catch (e) { toast(`Downloading ${path} failed`, "error", e); setProgress(undefined); } } export async function download( item: AudioFile | Directory, basePath: string, options: AppOptions, fetchFiles: ResourceActions, listing?: FileListing, ) { const fullPath = joinPath(basePath, item.name); let signal = signalMap.get(fullPath); if (!signal) { signal = createSignal(); signalMap.set(fullPath, signal); } const [, setProgress] = signal; if ("duration" in item) { await downloadFile(fullPath, signal, options, item.duration, fetchFiles); } else { getCover(fullPath, false); setProgress("DirectoryProgress"); try { const result = listing ?? (await listFiles(fullPath, false, true)); const promises: Promise[] = []; for (const childItem of result) { promises.push( download(childItem, fullPath, options, fetchFiles, "files" in childItem ? childItem.files : undefined), ); } await Promise.allSettled(promises); } finally { setProgress(undefined); } } } interface StoredFileBlob { path: string; data: Blob; } interface StoredFileMetadata { path: string; duration: number; } interface StoredCover { path: string; data: Blob | null; } //separate blobs and metadata, so we don't have to load all file contents at startup, which would consume huge amounts of ram, and be very slow const FileBlobStore = "fileblobs"; const FileMetadataStore = "filemetadata"; const CoverStore = "covers"; const PlaylistStore = "playlists"; async function openDB() { return new Promise((resolve, reject) => { const req = indexedDB.open("music-files"); req.onerror = () => reject(req.error); req.onupgradeneeded = () => { const db = req.result; if (!db.objectStoreNames.contains(FileBlobStore)) db.createObjectStore(FileBlobStore, { keyPath: "path" }); if (!db.objectStoreNames.contains(FileMetadataStore)) db.createObjectStore(FileMetadataStore, { keyPath: "path" }); if (!db.objectStoreNames.contains(CoverStore)) db.createObjectStore(CoverStore, { keyPath: "path" }); if (!db.objectStoreNames.contains(PlaylistStore)) db.createObjectStore(PlaylistStore, { keyPath: "name" }); }; req.onsuccess = () => resolve(wrapDB(req.result)); }); } interface DatabaseWrapper { get(store: typeof CoverStore | typeof FileBlobStore, key: string): Promise; put(store: typeof FileBlobStore, value: StoredFileBlob): Promise; put(store: typeof FileMetadataStore, value: StoredFileMetadata): Promise; put(store: typeof CoverStore, value: StoredCover): Promise; put(store: typeof PlaylistStore, value: Playlist): Promise; add(store: typeof PlaylistStore, value: Playlist): Promise; delete( store: typeof FileBlobStore | typeof CoverStore | typeof FileMetadataStore | typeof PlaylistStore, key: string, ): Promise; clear(store: string): Promise; listFiles(store: typeof FileMetadataStore): Promise; listPlaylists(store: typeof PlaylistStore): Promise; } function wrapDB(db: IDBDatabase): DatabaseWrapper { return { get: (store: string, key: string) => new Promise((res, rej) => { const tx = db.transaction(store, "readonly"); const req = tx.objectStore(store).get(key); req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); }), put: (store: string, value: unknown) => new Promise((res, rej) => { const tx = db.transaction(store, "readwrite"); const req: IDBRequest = tx.objectStore(store).put(value); req.onsuccess = () => res(); req.onerror = () => rej(req.error); }), add: (store: string, value: unknown) => new Promise((res, rej) => { const tx = db.transaction(store, "readwrite"); const req: IDBRequest = tx.objectStore(store).add(value); req.onsuccess = () => res(); req.onerror = () => rej(req.error); }), delete: (store: string, key: string) => new Promise((res, rej) => { const tx = db.transaction(store, "readwrite"); const req = tx.objectStore(store).delete(key); req.onsuccess = () => res(); req.onerror = () => rej(req.error); }), clear: (store: string) => new Promise((res, rej) => { const tx = db.transaction(store, "readwrite"); const req = tx.objectStore(store).clear(); req.onsuccess = () => res(); req.onerror = () => rej(req.error); }), listFiles: (store: typeof FileMetadataStore) => new Promise((res, rej) => { const tx = db.transaction(store, "readonly"); const req = tx.objectStore(store).getAll(); req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); }), listPlaylists: (store: typeof PlaylistStore) => new Promise((res, rej) => { const tx = db.transaction(store, "readonly"); const req = tx.objectStore(store).getAll(); req.onsuccess = () => res(req.result); req.onerror = () => rej(req.error); }), }; }