offline.ts
| 1 | import Dexie, { liveQuery } from "dexie"; |
| 2 | import type { |
| 3 | Directory, |
| 4 | DirectoryWithStatus, |
| 5 | FileListing, |
| 6 | FileListingWithStatus, |
| 7 | MediaFile, |
| 8 | Metadata, |
| 9 | } from "music-server-shared/types"; |
| 10 | import { AsyncSemaphore } from "music-server-shared/semaphore"; |
| 11 | import { audioCodecHasBitrate, encodePath } from "music-server-shared/utils"; |
| 12 | import { batch, from, type ResourceActions, untrack } from "solid-js"; |
| 13 | import { createStore } from "solid-js/store"; |
| 14 | import type { FlatFileListing } from "./App"; |
| 15 | import { type AppOptions, type Playlist, StreamingMode } from "./types"; |
| 16 | import { basename, dirname, handleUnauthorized, joinPath, parentPaths, toast, unproxy } from "./utils"; |
| 17 | |
| 18 | interface StoredFile { |
| 19 | path: string; |
| 20 | data: Blob; |
| 21 | metadata: Metadata; |
| 22 | } |
| 23 | |
| 24 | interface StoredCover { |
| 25 | path: string; |
| 26 | data: Blob | null; |
| 27 | } |
| 28 | |
| 29 | interface Database extends Dexie { |
| 30 | files: Dexie.Table<StoredFile, string>; |
| 31 | covers: Dexie.Table<StoredCover, string>; |
| 32 | playlists: Dexie.Table<Playlist, string>; |
| 33 | } |
| 34 | |
| 35 | const db = new Dexie("music-files") as Database; |
| 36 | db.version(1).stores({ |
| 37 | files: "path", |
| 38 | covers: "path", |
| 39 | playlists: "name", |
| 40 | }); |
| 41 | |
| 42 | export type Progress = |
| 43 | | { status: number; abort: () => void } |
| 44 | | { status: "Aborted"; retry: () => void } |
| 45 | | { status: "Failed"; retry: () => void; reason: string }; |
| 46 | |
| 47 | interface LoadingChildren { |
| 48 | amount: number; |
| 49 | } |
| 50 | |
| 51 | export type DownloadStatus = Progress | LoadingChildren | "Synced" | undefined; |
| 52 | export const [downloadStatusMap, setDownloadStatusMap] = createStore<Record<string, DownloadStatus>>({}); |
| 53 | |
| 54 | //creates entry if it doesn't exist, so reactivity works |
| 55 | export function getDownloadStatus(path: string): DownloadStatus { |
| 56 | untrack(() => { |
| 57 | if (!Object.keys(downloadStatusMap).includes(path)) setDownloadStatusMap(path, undefined); |
| 58 | }); |
| 59 | return downloadStatusMap[path]; |
| 60 | } |
| 61 | |
| 62 | function updateRecursiveStatus(path: string, loadChange: number, includeCurrent: boolean) { |
| 63 | function updateProgressAmount(path: string) { |
| 64 | const currentStatus = downloadStatusMap[path]; |
| 65 | if (typeof currentStatus !== "object" || !("amount" in currentStatus)) { |
| 66 | setDownloadStatusMap(path, loadChange > 0 ? { amount: loadChange } : undefined); |
| 67 | return; |
| 68 | } |
| 69 | |
| 70 | const newAmount = currentStatus.amount + loadChange; |
| 71 | setDownloadStatusMap(path, newAmount > 0 ? { amount: newAmount } : undefined); |
| 72 | } |
| 73 | |
| 74 | if (includeCurrent) updateProgressAmount(path); |
| 75 | // Update all parent directories |
| 76 | for (const parent of parentPaths(path)) { |
| 77 | updateProgressAmount(parent); |
| 78 | } |
| 79 | } |
| 80 | |
| 81 | function startProgress(path: string, status: DownloadStatus) { |
| 82 | updateRecursiveStatus(path, 1, false); |
| 83 | setDownloadStatusMap(path, status); |
| 84 | } |
| 85 | |
| 86 | function stopProgress(path: string, status: DownloadStatus) { |
| 87 | updateRecursiveStatus(path, -1, false); |
| 88 | setDownloadStatusMap(path, status); |
| 89 | } |
| 90 | |
| 91 | //initialize filetrees and download statuses from indexedDB |
| 92 | export async function loadDataFromDB() { |
| 93 | try { |
| 94 | const files = await db.files.toArray(); |
| 95 | for (const file of files) { |
| 96 | setDownloadStatusMap(file.path, "Synced"); |
| 97 | updateFileTree(file.path, { metadata: file.metadata }, true); |
| 98 | } |
| 99 | const covers = await db.covers.toArray(); |
| 100 | for (const cover of covers) { |
| 101 | coverCache.set(cover.path, { data: cover.data }); |
| 102 | } |
| 103 | } catch (e) { |
| 104 | toast("Loading offline files failed", "error", e); |
| 105 | console.error(e); |
| 106 | } |
| 107 | } |
| 108 | |
| 109 | //contains all locally synced files |
| 110 | const offlineTreeRoot: Directory = { |
| 111 | files: {}, |
| 112 | }; |
| 113 | //used for caching online file listings |
| 114 | const onlineTreeRoot: DirectoryWithStatus = { |
| 115 | files: {}, |
| 116 | status: "Unknown", |
| 117 | }; |
| 118 | |
| 119 | //merges "Scanned" directories from "other" to "target" |
| 120 | function mergeTrees(target: DirectoryWithStatus, other: DirectoryWithStatus) { |
| 121 | if (other.status === "Unknown") return; |
| 122 | target.status = other.status; |
| 123 | for (const [fileName, file] of Object.entries(other.files)) { |
| 124 | const targetFile = target.files[fileName]; |
| 125 | if (targetFile && "files" in targetFile && "files" in file) { |
| 126 | mergeTrees(targetFile, file); |
| 127 | } else { |
| 128 | target.files[fileName] = file; |
| 129 | } |
| 130 | } |
| 131 | } |
| 132 | |
| 133 | //TODO: improve typing to avoid "as" |
| 134 | //overloads for typecheking |
| 135 | //offline tree only stores files, directories are created ad-hoc |
| 136 | function updateFileTree(path: string, file: MediaFile, offline: true): void; |
| 137 | //online tree only stores cached directory listings |
| 138 | function updateFileTree(path: string, file: DirectoryWithStatus, offline: false): void; |
| 139 | // Updates file tree structure with new data (offline or online) |
| 140 | function updateFileTree(path: string, file: DirectoryWithStatus | MediaFile, offline: boolean) { |
| 141 | if (offline && path === "") throw new Error("Trying to update root in offline mode"); |
| 142 | const basePath = dirname(path); |
| 143 | const fileName = basename(path); |
| 144 | const node = getDirInTree(basePath, true, offline); |
| 145 | //widen so the writes below don't have to satisfy both tree flavors at once |
| 146 | const nodeFiles: Record<string, DirectoryWithStatus | Directory | MediaFile> = node.files; |
| 147 | |
| 148 | if (offline) { |
| 149 | nodeFiles[fileName] = file; |
| 150 | } else { |
| 151 | if (path === "") mergeTrees(node as DirectoryWithStatus, file as DirectoryWithStatus); |
| 152 | else { |
| 153 | let target = nodeFiles[fileName] as DirectoryWithStatus; |
| 154 | if (!target) target = { files: {}, status: "Unknown" }; |
| 155 | mergeTrees(target as DirectoryWithStatus, file as DirectoryWithStatus); |
| 156 | nodeFiles[fileName] = target; |
| 157 | } |
| 158 | } |
| 159 | } |
| 160 | |
| 161 | //overloads for typechecking |
| 162 | function getDirInTree(path: string, create: true, offline: true): Directory; |
| 163 | function getDirInTree(path: string, create: true, offline: false): DirectoryWithStatus; |
| 164 | function getDirInTree(path: string, create: false, offline: true): Directory | null; |
| 165 | function getDirInTree(path: string, create: false, offline: false): DirectoryWithStatus | null; |
| 166 | function getDirInTree(path: string, create: true, offline: boolean): DirectoryWithStatus | Directory; |
| 167 | function getDirInTree(path: string, create: false, offline: boolean): DirectoryWithStatus | Directory | null; |
| 168 | // get a DirectoryNode from the directory tree matching the path, and optionally creating missing nodes it if they don't exist yet |
| 169 | function getDirInTree(path: string, create: boolean, offline: boolean): DirectoryWithStatus | Directory | null { |
| 170 | let current = offline ? offlineTreeRoot : onlineTreeRoot; |
| 171 | if (path === "") return current; |
| 172 | const parts = path.split("/"); |
| 173 | |
| 174 | for (const part of parts) { |
| 175 | //widen so reads and writes don't have to satisfy both tree flavors at once |
| 176 | const files: Record<string, DirectoryWithStatus | Directory | MediaFile> = current.files; |
| 177 | let next: DirectoryWithStatus | Directory | MediaFile | undefined = files[part]; |
| 178 | if (!next || "metadata" in next) { |
| 179 | if (!create) return null; |
| 180 | //if mediafile already exists, we overwrite it with a directory anyway |
| 181 | if (offline) next = { files: {} }; |
| 182 | else next = { files: {}, status: "Unknown" }; |
| 183 | files[part] = next; |
| 184 | } |
| 185 | current = next; |
| 186 | } |
| 187 | return current; |
| 188 | } |
| 189 | |
| 190 | function deleteInOfflineTree(path: string): void { |
| 191 | if (path === "") return; |
| 192 | const basePath = dirname(path); |
| 193 | const fileName = basename(path); |
| 194 | |
| 195 | const node = getDirInTree(basePath, false, true); |
| 196 | if (!node) return; |
| 197 | |
| 198 | delete node.files[fileName]; |
| 199 | if (Object.keys(node.files).length === 0) { |
| 200 | db.covers.delete(basePath); //remove stored cover for this dir if there are not files left |
| 201 | deleteInOfflineTree(basePath); |
| 202 | } |
| 203 | } |
| 204 | |
| 205 | export const clearDirectoryCache = async (path: string) => { |
| 206 | const node = getDirInTree(path, false, false); |
| 207 | if (!node) return; |
| 208 | |
| 209 | // Save existing children before clearing |
| 210 | const preservedChildren = { ...node.files }; |
| 211 | |
| 212 | node.files = {}; |
| 213 | node.status = "Unknown"; |
| 214 | |
| 215 | // restore any preserved subtrees where the parent directory still exist |
| 216 | const newListing = await listFiles(path, false, false); |
| 217 | for (const [name, child] of Object.entries(preservedChildren)) { |
| 218 | if ("files" in child && newListing[name] !== undefined) { |
| 219 | node.files[name] = child; |
| 220 | } |
| 221 | } |
| 222 | }; |
| 223 | async function listOnlineFiles(dir: string, recursive: boolean): Promise<FileListingWithStatus | undefined> { |
| 224 | const response = await fetch(`/list/${encodePath(dir)}?recursive=${recursive}`, { credentials: "same-origin" }).catch( |
| 225 | () => {}, |
| 226 | ); |
| 227 | if (handleUnauthorized(response)) return; |
| 228 | if (response?.status === 404) { |
| 229 | toast(`Directory not found: ${dir}`, "error"); |
| 230 | return; |
| 231 | } |
| 232 | if (!response?.ok) { |
| 233 | toast( |
| 234 | `Fetching files for ${dir === "" ? "root" : dir} failed${response ? `: ${response.statusText}` : ""}`, |
| 235 | "error", |
| 236 | ); |
| 237 | return; |
| 238 | } |
| 239 | |
| 240 | return (await response.json()) as FileListingWithStatus; |
| 241 | } |
| 242 | |
| 243 | function listOfflineFiles(dir: string): FileListing { |
| 244 | const node = getDirInTree(dir, false, true); |
| 245 | if (!node?.files) return {}; |
| 246 | return node.files; |
| 247 | } |
| 248 | |
| 249 | //checks if this Directory is completely scanned, i.e. suitable for a recursive listing result |
| 250 | function fullyKnown(dir: DirectoryWithStatus) { |
| 251 | if (dir.status === "Unknown") { |
| 252 | return false; |
| 253 | } |
| 254 | if (Object.values(dir.files).some((value) => "files" in value && !fullyKnown(value))) { |
| 255 | return false; |
| 256 | } |
| 257 | return true; |
| 258 | } |
| 259 | |
| 260 | //non-recursive listing should not include nested children |
| 261 | function pruneChildren(listing: FileListing) { |
| 262 | const pruned: FileListing = {}; |
| 263 | for (const [name, item] of Object.entries(listing)) { |
| 264 | if ("metadata" in item) pruned[name] = item; |
| 265 | else pruned[name] = { files: {} }; |
| 266 | } |
| 267 | return pruned; |
| 268 | } |
| 269 | |
| 270 | //used for combining the online and offline results, to be able to show files that only exist locally |
| 271 | function combineFileListings(listing1: FileListing, listing2: FileListing): FileListing { |
| 272 | const result: FileListing = { ...listing1 }; |
| 273 | |
| 274 | for (const [key, value2] of Object.entries(listing2)) { |
| 275 | const value1 = result[key]; |
| 276 | |
| 277 | if (value1 && "files" in value1 && "files" in value2) { |
| 278 | result[key] = { files: combineFileListings(value1.files, value2.files) }; |
| 279 | } else { |
| 280 | result[key] = value2; |
| 281 | } |
| 282 | } |
| 283 | |
| 284 | return result; |
| 285 | } |
| 286 | |
| 287 | // File listing logic with hybrid online/offline support |
| 288 | // Combines: |
| 289 | // 1. Direct IndexedDB lookups for offline mode |
| 290 | // 2. Cached online listings |
| 291 | // 3. Merged online+offline results |
| 292 | export async function listFiles(dir: string, offline: boolean, recursive: boolean): Promise<FileListing> { |
| 293 | if (offline) { |
| 294 | const files = listOfflineFiles(dir); |
| 295 | return recursive ? files : pruneChildren(files); |
| 296 | } |
| 297 | const cached = getDirInTree(dir, false, false); |
| 298 | if (cached !== null && cached.status === "Scanned" && (!recursive || fullyKnown(cached))) { |
| 299 | const combined = combineFileListings(cached.files, listOfflineFiles(dir)); |
| 300 | return recursive ? combined : pruneChildren(combined); |
| 301 | } |
| 302 | const files = await listOnlineFiles(dir, recursive); |
| 303 | if (!files) return {}; |
| 304 | updateFileTree(dir, { files, status: "Scanned" }, false); |
| 305 | const combined = combineFileListings(files, listOfflineFiles(dir)); |
| 306 | return recursive ? combined : pruneChildren(combined); |
| 307 | } |
| 308 | |
| 309 | const coverCache = new Map<string, { data: Blob | null }>(); |
| 310 | |
| 311 | //get cover art object-url for a file or directory with cache-first strategy |
| 312 | export async function getCover( |
| 313 | dir: string, |
| 314 | options: AppOptions, |
| 315 | saveToDb: boolean, |
| 316 | offline: boolean, |
| 317 | forceRefresh = false, |
| 318 | ) { |
| 319 | try { |
| 320 | const cached = coverCache.get(dir); |
| 321 | if (!forceRefresh && cached !== undefined) { |
| 322 | if (saveToDb) db.covers.add({ path: dir, data: cached.data }).catch(() => {}); |
| 323 | return cached.data === null ? undefined : URL.createObjectURL(cached.data); |
| 324 | } |
| 325 | |
| 326 | if (offline) return undefined; |
| 327 | const response = await fetch(`/cover/${encodePath(dir)}${options.transcodeCovers ? "?transcode=true" : ""}`, { |
| 328 | method: "GET", |
| 329 | credentials: "same-origin", |
| 330 | }).catch(() => {}); |
| 331 | if (handleUnauthorized(response)) return undefined; |
| 332 | if (!response || response.status === 404) { |
| 333 | coverCache.set(dir, { data: null }); |
| 334 | if (saveToDb) db.covers.add({ path: dir, data: null }).catch(() => {}); |
| 335 | //only update a row that already exists, otherwise merely browsing a directory would |
| 336 | //persist its cover - note the await, without it the promise is always truthy |
| 337 | else if (forceRefresh && (await db.covers.get(dir)) !== undefined) |
| 338 | db.covers.put({ path: dir, data: null }).catch(() => {}); |
| 339 | return undefined; |
| 340 | } |
| 341 | const blob = await response.blob(); |
| 342 | coverCache.set(dir, { data: blob }); |
| 343 | if (saveToDb) db.covers.add({ path: dir, data: blob }).catch(() => {}); |
| 344 | //see above: the await is what makes this an "already stored" check |
| 345 | else if (forceRefresh && (await db.covers.get(dir)) !== undefined) |
| 346 | db.covers.put({ path: dir, data: blob }).catch(() => {}); |
| 347 | return URL.createObjectURL(blob); |
| 348 | } catch { |
| 349 | return undefined; |
| 350 | } |
| 351 | } |
| 352 | |
| 353 | //returns an object url to the blob if synced, otherwise the server url |
| 354 | //with forceUrl it always resolves, without it returns undefined for an uncached file in offline mode |
| 355 | export async function getSrc( |
| 356 | path: string, |
| 357 | metadata: Metadata, |
| 358 | options: AppOptions, |
| 359 | offline: boolean, |
| 360 | seekTo: number, |
| 361 | forceUrl: true, |
| 362 | ): Promise<{ src: string; isVideo?: boolean }>; |
| 363 | export async function getSrc( |
| 364 | path: string, |
| 365 | metadata: Metadata, |
| 366 | options: AppOptions, |
| 367 | offline: boolean, |
| 368 | seekTo: number, |
| 369 | ): Promise<{ src: string; isVideo?: boolean } | undefined>; |
| 370 | export async function getSrc( |
| 371 | path: string, |
| 372 | metadata: Metadata, |
| 373 | options: AppOptions, |
| 374 | offline: boolean, |
| 375 | seekTo: number, |
| 376 | forceUrl?: boolean, |
| 377 | ) { |
| 378 | if (!forceUrl) { |
| 379 | const dbResult = await db.files.get(path); |
| 380 | if (dbResult) return { src: URL.createObjectURL(dbResult.data), isVideo: undefined }; |
| 381 | |
| 382 | if (offline) { |
| 383 | toast("This file is not cached, leave offline mode to play it", "error"); |
| 384 | return undefined; |
| 385 | } |
| 386 | } |
| 387 | if (options.enableTranscoding) { |
| 388 | const isVideo = metadata.videoCodec !== undefined; |
| 389 | const settings = isVideo ? options.videoSettings : options.audioSettings; |
| 390 | const disableChunkedTranscoding = settings.streamingMode === StreamingMode.buffered; |
| 391 | const audioBitrate = audioCodecHasBitrate(settings.audioCodec) ? settings.audioBitrate : undefined; |
| 392 | |
| 393 | const query = new URLSearchParams({ |
| 394 | disableChunkedTranscoding: String(disableChunkedTranscoding), |
| 395 | container: settings.container, |
| 396 | audioCodec: settings.audioCodec, |
| 397 | languages: options.languages, |
| 398 | }); |
| 399 | if (isVideo) { |
| 400 | query.set("videoCodec", options.videoSettings.videoCodec); |
| 401 | query.set("videoBitrate", options.videoSettings.videoBitrate.toString()); |
| 402 | query.set("videoEncodingSetting", options.videoSettings.videoEncodingSetting); |
| 403 | } |
| 404 | if (audioBitrate !== undefined) query.set("audioBitrate", audioBitrate.toString()); |
| 405 | if (seekTo !== 0) query.set("seekTo", seekTo.toString()); |
| 406 | |
| 407 | return { |
| 408 | src: `${joinPath("transcode", encodePath(path))}?${query}`, |
| 409 | isVideo: isVideo, |
| 410 | }; |
| 411 | } |
| 412 | return { src: joinPath("download", encodePath(path)), isVideo: undefined }; |
| 413 | } |
| 414 | |
| 415 | export async function loadPlaylists() { |
| 416 | return await db.playlists.toArray(); |
| 417 | } |
| 418 | |
| 419 | //save playlist to indexedDB, throws error if playlist with that name already exists and overwrite=false |
| 420 | export async function savePlaylist(playlist: Playlist, overwrite: boolean) { |
| 421 | playlist.items = playlist.items.map((item) => { |
| 422 | //some less space in the db by omitting ids |
| 423 | return { path: item.path, metadata: unproxy(item.metadata) }; |
| 424 | }); |
| 425 | |
| 426 | if (overwrite) { |
| 427 | await db.playlists.put(playlist); |
| 428 | } else { |
| 429 | await db.playlists.add(playlist); |
| 430 | } |
| 431 | } |
| 432 | |
| 433 | export async function deletePlaylist(name: string) { |
| 434 | await db.playlists.delete(name); |
| 435 | } |
| 436 | |
| 437 | function collectMediaFilePaths(listing: FileListing, basePath: string): string[] { |
| 438 | const paths: string[] = []; |
| 439 | |
| 440 | for (const [name, item] of Object.entries(listing)) { |
| 441 | const currentPath = joinPath(basePath, name); |
| 442 | |
| 443 | if ("metadata" in item) { |
| 444 | paths.push(currentPath); |
| 445 | } else if ("files" in item) { |
| 446 | paths.push(...collectMediaFilePaths(item.files, currentPath)); |
| 447 | } |
| 448 | } |
| 449 | |
| 450 | return paths; |
| 451 | } |
| 452 | |
| 453 | //deletes file or directory(+recursive contents) from indexedDB and updates their download statuses |
| 454 | export async function deleteFile( |
| 455 | fullPath: string, |
| 456 | item: MediaFile | Directory, |
| 457 | fetchFiles: ResourceActions<FlatFileListing>, |
| 458 | ) { |
| 459 | try { |
| 460 | if ("metadata" in item && downloadStatusMap[fullPath] !== "Synced") return; |
| 461 | startProgress(fullPath, { amount: 1 }); |
| 462 | |
| 463 | let toDelete: string[]; |
| 464 | if ("files" in item) { |
| 465 | toDelete = collectMediaFilePaths(listOfflineFiles(fullPath), fullPath); |
| 466 | } else { |
| 467 | toDelete = [fullPath]; |
| 468 | } |
| 469 | |
| 470 | //covers are keyed by file path (embedded art) and by directory path (directory art), so deleting a |
| 471 | //directory also has to drop its own cover row plus every nested one, or they stay orphaned forever |
| 472 | const coversToDelete = new Set(toDelete); |
| 473 | if ("files" in item) { |
| 474 | coversToDelete.add(fullPath); |
| 475 | for (const filePath of toDelete) { |
| 476 | for (const dir of parentPaths(filePath)) { |
| 477 | //stop at the deleted root itself, parents of it may still hold other synced files |
| 478 | if (dir === fullPath) break; |
| 479 | coversToDelete.add(dir); |
| 480 | } |
| 481 | } |
| 482 | } |
| 483 | |
| 484 | await db.files.bulkDelete(toDelete); //delete file from database |
| 485 | await db.covers.bulkDelete([...coversToDelete]); //delete embedded/directory covers from database |
| 486 | //also drop them from the session cache, otherwise a later getCover(saveToDb) would re-add them |
| 487 | for (const coverPath of coversToDelete) coverCache.delete(coverPath); |
| 488 | deleteInOfflineTree(fullPath); //delete node from tree |
| 489 | batch(() => { |
| 490 | for (const path of toDelete) { |
| 491 | setDownloadStatusMap(path, undefined); // set all children to unsynced |
| 492 | } |
| 493 | }); |
| 494 | fetchFiles.refetch(); |
| 495 | } finally { |
| 496 | stopProgress(fullPath, undefined); |
| 497 | } |
| 498 | } |
| 499 | |
| 500 | const downloadSemaphore = new AsyncSemaphore(1); |
| 501 | |
| 502 | //Download file to indexedDB and updates the offline file tree |
| 503 | //concurrency control via the downloadSemaphore |
| 504 | async function downloadFile( |
| 505 | path: string, |
| 506 | options: AppOptions, |
| 507 | item: MediaFile, |
| 508 | fetchFiles: ResourceActions<FlatFileListing>, |
| 509 | redownload: boolean, |
| 510 | ): Promise<void> { |
| 511 | const retry = () => downloadFile(path, options, item, fetchFiles, redownload); |
| 512 | |
| 513 | // file already downloaded or download already in progress |
| 514 | const initialProgress = downloadStatusMap[path]; |
| 515 | if ( |
| 516 | (!redownload && initialProgress === "Synced") || |
| 517 | //an in-progress download carries a numeric byte count, without this check clicking a |
| 518 | //downloading item would start a second fetch racing the first one on db.files.put |
| 519 | (typeof initialProgress === "object" && "status" in initialProgress && typeof initialProgress.status === "number") |
| 520 | ) |
| 521 | return; |
| 522 | |
| 523 | const controller = new AbortController(); |
| 524 | const abortDownload = () => { |
| 525 | controller.abort(); |
| 526 | stopProgress( |
| 527 | path, |
| 528 | // if it was already synced, restore it |
| 529 | initialProgress === "Synced" ? "Synced" : { status: "Aborted", retry }, |
| 530 | ); |
| 531 | }; |
| 532 | startProgress(path, { status: 0, abort: abortDownload }); |
| 533 | |
| 534 | try { |
| 535 | //options might change at any point, update the semaphore to the current value |
| 536 | downloadSemaphore.setMaxConcurrency(options.enableTranscoding ? options.maxTranscodes : options.maxDownloads); |
| 537 | |
| 538 | //make sure to only allow the set amount of parallel downloads. passing the signal makes an abort |
| 539 | //while still queued reject here instead of entering the section below, so the release() in its |
| 540 | //finally can't hand out a permit that was never acquired (which would leak a concurrency slot) |
| 541 | await downloadSemaphore.acquire(controller.signal); |
| 542 | try { |
| 543 | const res = await fetch((await getSrc(path, item.metadata, options, false, 0, true)).src, { |
| 544 | signal: controller.signal, |
| 545 | credentials: "same-origin", |
| 546 | }); |
| 547 | |
| 548 | handleUnauthorized(res); |
| 549 | if (!res.ok || !res.body) throw res.statusText; |
| 550 | //read the body ourselves to track progress, and assemble the blob from the same chunks - |
| 551 | //res.clone().blob() would buffer the whole body a second time and reject unobserved on a mid-body error |
| 552 | const reader = res.body.getReader(); |
| 553 | //a fetch body never yields SharedArrayBuffer-backed views, so narrowing to ArrayBuffer is safe |
| 554 | const chunks: Uint8Array<ArrayBuffer>[] = []; |
| 555 | let received = 0; |
| 556 | |
| 557 | let lastUpdate = 0; |
| 558 | while (true) { |
| 559 | const { done, value } = await reader.read(); |
| 560 | if (done) break; |
| 561 | chunks.push(value as Uint8Array<ArrayBuffer>); |
| 562 | received += value.length; |
| 563 | |
| 564 | //debouncing logic to not update UI too fast |
| 565 | const now = Date.now(); |
| 566 | if (now - lastUpdate < 250) continue; |
| 567 | lastUpdate = now; |
| 568 | setDownloadStatusMap(path, { status: received, abort: abortDownload }); |
| 569 | } |
| 570 | const blob = new Blob(chunks, { type: res.headers.get("content-type") ?? undefined }); |
| 571 | |
| 572 | await db.files.put({ |
| 573 | path, |
| 574 | data: blob, |
| 575 | metadata: unproxy(item.metadata), |
| 576 | }); |
| 577 | |
| 578 | updateFileTree(path, item, true); |
| 579 | stopProgress(path, "Synced"); |
| 580 | fetchFiles.refetch(); |
| 581 | |
| 582 | //iterate through all parent directories and download their covers to database |
| 583 | for (const dir of [path, ...parentPaths(path)]) { |
| 584 | getCover(dir, options, true, false).then((cover) => URL.revokeObjectURL(cover || "")); |
| 585 | } |
| 586 | } finally { |
| 587 | downloadSemaphore.release(); |
| 588 | } |
| 589 | } catch (e) { |
| 590 | if (e instanceof Error && e.name === "AbortError") return; |
| 591 | stopProgress( |
| 592 | path, |
| 593 | // if it was already synced, restore it |
| 594 | initialProgress === "Synced" |
| 595 | ? "Synced" |
| 596 | : { |
| 597 | status: "Failed", |
| 598 | reason: e ? e.toString() : "Unknown error", |
| 599 | retry, |
| 600 | }, |
| 601 | ); |
| 602 | } |
| 603 | } |
| 604 | |
| 605 | export async function download( |
| 606 | fullPath: string, |
| 607 | item: MediaFile | Directory, |
| 608 | options: AppOptions, |
| 609 | fetchFiles: ResourceActions<FlatFileListing>, |
| 610 | redownload = false, |
| 611 | ) { |
| 612 | if ("metadata" in item) { |
| 613 | await downloadFile(fullPath, options, item, fetchFiles, redownload || false); |
| 614 | } else { |
| 615 | updateRecursiveStatus(fullPath, 1, true); |
| 616 | try { |
| 617 | //start downloads for all children to allow them to run in parallel, then wait for the results |
| 618 | const promises: Promise<unknown>[] = []; |
| 619 | const listing = await listFiles(fullPath, false, false); |
| 620 | batch(() => { |
| 621 | for (const [childName, childItem] of Object.entries(listing)) { |
| 622 | promises.push(download(joinPath(fullPath, childName), childItem, options, fetchFiles, redownload)); |
| 623 | } |
| 624 | }); |
| 625 | await Promise.allSettled(promises); |
| 626 | } finally { |
| 627 | updateRecursiveStatus(fullPath, -1, true); |
| 628 | } |
| 629 | } |
| 630 | } |
| 631 | |
| 632 | //aborts all in-progress downloads and deletes every synced file and cover from indexedDB. |
| 633 | export async function clearAllDownloads(fetchFiles: ResourceActions<FlatFileListing>) { |
| 634 | //abort first, so in-flight fetches reject with AbortError instead of writing to a cleared |
| 635 | //database. a download already past its fetch (sitting at db.files.put) cannot be aborted this |
| 636 | //way and may re-insert one row after the clear - harmless, and gone on the next clear/reload |
| 637 | for (const status of Object.values(downloadStatusMap)) { |
| 638 | if (status && typeof status === "object" && "status" in status && typeof status.status === "number") { |
| 639 | status.abort(); |
| 640 | } |
| 641 | } |
| 642 | |
| 643 | await db.files.clear(); |
| 644 | await db.covers.clear(); |
| 645 | coverCache.clear(); |
| 646 | offlineTreeRoot.files = {}; |
| 647 | |
| 648 | batch(() => { |
| 649 | for (const path of Object.keys(downloadStatusMap)) { |
| 650 | setDownloadStatusMap(path, undefined); |
| 651 | } |
| 652 | }); |
| 653 | fetchFiles.refetch(); |
| 654 | } |
| 655 | |
| 656 | //deletes every local trace of the app |
| 657 | export async function clearLocalData(): Promise<string | undefined> { |
| 658 | localStorage.clear(); |
| 659 | |
| 660 | db.close(); |
| 661 | if ("serviceWorker" in navigator) { |
| 662 | const registrations = await navigator.serviceWorker.getRegistrations().catch(() => []); |
| 663 | await Promise.all(registrations.map((registration) => registration.unregister().catch(() => false))); |
| 664 | } |
| 665 | if ("caches" in window) { |
| 666 | const cacheNames = await caches.keys().catch(() => []); |
| 667 | //awaited, otherwise the reload races the cleanup and can leave caches behind |
| 668 | await Promise.all(cacheNames.map((cacheName) => caches.delete(cacheName).catch(() => false))); |
| 669 | } |
| 670 | |
| 671 | //onsuccess alone can hang forever: another open tab blocks the delete, and errors never resolve |
| 672 | return await new Promise<string | undefined>((resolve) => { |
| 673 | const request = indexedDB.deleteDatabase("music-files"); |
| 674 | request.onsuccess = () => resolve(undefined); |
| 675 | request.onerror = () => resolve("Deleting the local database failed, close all other tabs and try again."); |
| 676 | request.onblocked = () => |
| 677 | resolve("Another tab still has this app open, close it and try again to delete the local database."); |
| 678 | }); |
| 679 | } |
| 680 | |
| 681 | export const storedFilesLive = from( |
| 682 | liveQuery(async () => await db.files.toCollection().keys()), |
| 683 | [], |
| 684 | ); |
| 685 | |
| 686 | export const storageStatsLive = from( |
| 687 | liveQuery(async () => { |
| 688 | let fileBytes = 0; |
| 689 | await db.files.each((file) => { |
| 690 | fileBytes += file.data.size; |
| 691 | }); |
| 692 | return { |
| 693 | fileCount: await db.files.count(), |
| 694 | fileBytes, |
| 695 | coverCount: await db.covers.count(), |
| 696 | playlistCount: await db.playlists.count(), |
| 697 | }; |
| 698 | }), |
| 699 | { fileCount: 0, fileBytes: 0, coverCount: 0, playlistCount: 0 }, |
| 700 | ); |
| 701 |