A music player that connects to your cloud/distributed storage.
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

chore: processing progress sources facet

+27 -16
+27 -16
src/facets/data/sources/index.inline.js
··· 29 29 // SETUP 30 30 //////////////////////////////////////////// 31 31 32 - const [inputConfigurator, sourcesOrchestrator, outputOrchestrator, processOrchestrator] = 33 - await Promise.all([ 34 - foundation.configurator.input(), 35 - foundation.orchestrator.sources(), 36 - foundation.orchestrator.output(), 37 - foundation.orchestrator.processTracks({ disableWhenReady: true }), 38 - ]); 32 + const [ 33 + inputConfigurator, 34 + sourcesOrchestrator, 35 + outputOrchestrator, 36 + processOrchestrator, 37 + ] = await Promise.all([ 38 + foundation.configurator.input(), 39 + foundation.orchestrator.sources(), 40 + foundation.orchestrator.output(), 41 + foundation.orchestrator.processTracks({ disableWhenReady: true }), 42 + ]); 39 43 40 44 await Promise.all([ 41 45 customElements.whenDefined(inputConfigurator.localName), ··· 43 47 customElements.whenDefined(outputOrchestrator.localName), 44 48 ]); 45 49 46 - 47 50 //////////////////////////////////////////// 48 51 // PROCESS BUTTON 49 52 //////////////////////////////////////////// 50 53 51 - const processBtn = /** @type {HTMLButtonElement} */ (document.querySelector("#process-btn")); 52 - const processIcon = /** @type {HTMLElement} */ (document.querySelector("#process-icon")); 53 - const processLabel = /** @type {HTMLElement} */ (document.querySelector("#process-label")); 54 + const processBtn = 55 + /** @type {HTMLButtonElement} */ (document.querySelector("#process-btn")); 56 + const processIcon = 57 + /** @type {HTMLElement} */ (document.querySelector("#process-icon")); 58 + const processLabel = 59 + /** @type {HTMLElement} */ (document.querySelector("#process-label")); 54 60 55 61 effect(() => { 56 62 const isProcessing = processOrchestrator.isProcessing(); 63 + const { processed, total } = processOrchestrator.progress(); 64 + const pct = total > 0 ? Math.round((processed / total) * 100) : null; 57 65 58 66 processBtn.disabled = isProcessing; 59 67 processIcon.className = isProcessing 60 68 ? "ph-fill ph-arrows-clockwise animate-spin" 61 69 : "ph-fill ph-arrows-clockwise"; 62 - processLabel.textContent = isProcessing ? "Processing" : "Process"; 70 + processLabel.textContent = isProcessing 71 + ? (pct !== null ? `Processing (${pct}%)` : "Listing") 72 + : "Process"; 63 73 }); 64 74 65 75 processBtn.addEventListener("click", async () => { ··· 78 88 /** @type {HTMLElement} */ (document.querySelector("#sources-empty")); 79 89 80 90 /** @param {string} uri */ 81 - const trackPrefix = (uri) => { const q = uri.indexOf("?"); return q === -1 ? uri : uri.slice(0, q); }; 91 + const trackPrefix = (uri) => { 92 + const q = uri.indexOf("?"); 93 + return q === -1 ? uri : uri.slice(0, q); 94 + }; 82 95 83 96 effect(() => { 84 97 const sourcesRecord = sourcesOrchestrator.sources(); ··· 99 112 if (scheme === SCHEME_EPHEMERAL_CACHE) { 100 113 const uri = `${SCHEME_EPHEMERAL_CACHE}://`; 101 114 const isDisabled = sourcesOrchestrator.isDisabled(uri); 102 - const trackCount = tracks.filter((t) => 103 - t.uri.startsWith(uri) 104 - ).length; 115 + const trackCount = tracks.filter((t) => t.uri.startsWith(uri)).length; 105 116 return html` 106 117 <li class="sources-scheme">${SCHEME_NAMES[scheme] ?? scheme}</li> 107 118 <li class="sources-item ${isDisabled