A music player that connects to your cloud/distributed storage.
chore: improve demo feedback
+29
-2
+20
-1
src/index.vto
+20
-1
src/index.vto
···
392
392
const output = component(Output)
393
393
const processTracks = component(ProcessTracks)
394
394
395
+
// Demo
396
+
const addDemoBtn = document.querySelector("#add-sample-content")
397
+
395
398
async function addSampleContent() {
399
+
addDemoBtn.setAttribute("disabled", "")
400
+
addDemoBtn.innerHTML = `<span>
401
+
<i class="ph-fill ph-hourglass-medium"></i>
402
+
Adding source
403
+
</span>`
404
+
396
405
const demo = await s3Input.demo()
397
406
const tracks = await output.tracks.collection()
398
407
399
408
await output.tracks.save([ ...tracks, demo.track ])
409
+
410
+
addDemoBtn.innerHTML = `<span>
411
+
<i class="ph-fill ph-hourglass-medium"></i>
412
+
Processing source
413
+
</span>`
414
+
400
415
await processTracks.process()
416
+
417
+
addDemoBtn.innerHTML = `<span>
418
+
<i class="ph-fill ph-check-fat"></i> Added
419
+
</span>`
401
420
}
402
421
403
-
document.querySelector("#add-sample-content")?.addEventListener("click", addSampleContent)
422
+
addDemoBtn?.addEventListener("click", addSampleContent)
404
423
</script>
+9
-1
src/styles/diffuse/page.css
+9
-1
src/styles/diffuse/page.css
···
23
23
font-weight: 500;
24
24
line-height: var(--leading-tight);
25
25
padding: var(--space-2xs) var(--space-xs);
26
+
transition-duration: 500ms;
27
+
transition-property: opacity;
28
+
29
+
&[disabled] {
30
+
opacity: 0.5;
31
+
}
26
32
27
33
& > span {
28
-
display: inline-block;
34
+
align-items: center;
35
+
display: inline-flex;
36
+
gap: var(--space-3xs);
29
37
padding-top: 1px;
30
38
}
31
39
}