forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: more processing improvements
+140
-70
+1
-1
src/_data/facets.json
+1
-1
src/_data/facets.json
···
5
5
"kind": "prelude",
6
6
"category": "Playback",
7
7
"featured": true,
8
-
"desc": "Automatically put tracks into the queue. **Always on.**"
8
+
"desc": "Automatically put tracks into the queue. **Always on.** These tracks will always be located after the ones you've added manually."
9
9
},
10
10
{
11
11
"url": "facets/playback/auto-queue/index.html",
+4
-3
src/_includes/layouts/diffuse.vto
+4
-3
src/_includes/layouts/diffuse.vto
···
42
42
"imports": {
43
43
"~/": "./",
44
44
45
-
"@atcute/tid": "./vendor/@atcute/tid/index.js",
46
-
47
45
"@awesome.me/webawesome/dist/": "./vendor/@awesome.me/webawesome/",
48
46
"@awesome.me/webawesome/dist-cdn/": "./vendor/@awesome.me/webawesome/",
49
47
"@phosphor-icons/web/": "./vendor/@phosphor-icons/web/",
48
+
49
+
"@atcute/tid": "./vendor/@atcute/tid/index.js",
50
50
"idb-keyval": "./vendor/idb-keyval/index.js",
51
-
"lit-html": "./vendor/lit-html/index.js"
51
+
"lit-html": "./vendor/lit-html/index.js",
52
+
"throttle-debounce": "./vendor/throttle-debounce/index.js"
52
53
}
53
54
}
54
55
</script>
+16
-4
src/components/orchestrator/process-tracks/element.js
+16
-4
src/components/orchestrator/process-tracks/element.js
···
63
63
strategy: "replicate",
64
64
fn: this.#performedInitialProcess.set,
65
65
},
66
+
getIsProcessing: {
67
+
strategy: "leaderOnly",
68
+
fn: this.#isProcessing.get,
69
+
},
70
+
setIsProcessing: {
71
+
strategy: "replicate",
72
+
fn: this.#isProcessing.set,
73
+
},
66
74
process: { strategy: "leaderOnly", fn: this.process },
67
75
});
68
76
69
77
if (!actions) return;
70
78
71
79
this.process = actions.process;
72
-
this.#isProcessing.set = actions.setPerfInit;
80
+
this.#isProcessing.set = actions.setIsProcessing;
73
81
74
-
// Sync #performedInitialProcess with leader
82
+
// Sync #performedInitialProcess and #isProcessing with leader
75
83
actions.getPerfInit().then((val) => {
76
84
this.#performedInitialProcess.value = val;
85
+
});
86
+
87
+
actions.getIsProcessing().then((val) => {
88
+
this.#isProcessing.value = val;
77
89
});
78
90
}
79
91
···
161
173
if (this.#isProcessing.value) return;
162
174
163
175
// Start
164
-
this.#isProcessing.value = true;
176
+
this.#isProcessing.set(true);
165
177
console.log("🪵 Processing initiated");
166
178
167
179
const tracksCol = this.output.tracks.collection();
···
173
185
174
186
// Fin
175
187
console.log("🪵 Processing completed");
176
-
this.#isProcessing.value = false;
188
+
this.#isProcessing.set(false);
177
189
}
178
190
}
179
191
+5
-1
src/components/orchestrator/sources/element.js
+5
-1
src/components/orchestrator/sources/element.js
···
1
+
import deepDiff from "@fry69/deep-diff";
2
+
1
3
import { BroadcastableDiffuseElement, query } from "~/common/element.js";
2
4
import { groupTracksPerScheme } from "~/common/utils.js";
3
5
import { signal } from "~/common/signal.js";
···
74
76
record[scheme] = sources;
75
77
});
76
78
77
-
this.#sources.value = record;
79
+
if (deepDiff(this.#sources.value, record)) {
80
+
this.#sources.value = record;
81
+
}
78
82
});
79
83
}
80
84
}
+1
-2
src/facets/connect/index.inline.js
+1
-2
src/facets/connect/index.inline.js
···
49
49
<div class="card-body">
50
50
<p>
51
51
These are some of the options available to add as an audio source, or to
52
-
use as user-data storage. Some offer both, the remainder offers only one
53
-
or the other.
52
+
use as user-data storage. Some offer both.
54
53
</p>
55
54
<wa-divider></wa-divider>
56
55
<ul class="connect-list">
+36
-7
src/facets/data/process-tracks/prelude/index.inline.js
+36
-7
src/facets/data/process-tracks/prelude/index.inline.js
···
1
+
import { debounce } from "throttle-debounce";
2
+
1
3
import * as Output from "~/common/output.js";
2
4
import foundation from "~/common/foundation.js";
5
+
import { effect } from "~/common/signal.js";
3
6
4
7
const KEY = "facets/data/process-tracks/timestamp";
5
8
const MAX_TIME_DIFF = 10 * 60 * 1000;
6
9
10
+
////////////////////////////////////////////
11
+
// ON LOAD
12
+
////////////////////////////////////////////
13
+
14
+
const output = await foundation.orchestrator.output();
15
+
await Output.data(output.tracks);
16
+
7
17
const lastTimestamp = localStorage.getItem(KEY);
8
18
const now = Date.now();
9
19
const diff = lastTimestamp ? now - JSON.parse(lastTimestamp) : MAX_TIME_DIFF;
10
20
11
-
if (diff >= MAX_TIME_DIFF) {
12
-
const output = await foundation.orchestrator.output();
13
-
await Output.data(output.tracks);
21
+
const orchestrator = await foundation.orchestrator.processTracks({
22
+
disableWhenReady: true,
23
+
});
14
24
15
-
const orchestrator = await foundation.orchestrator.processTracks({
16
-
disableWhenReady: true,
17
-
});
18
-
25
+
if (diff >= MAX_TIME_DIFF && await orchestrator.isLeader()) {
19
26
// Wait until we're actually done processing, only then set the timestamp
20
27
await orchestrator.process();
21
28
localStorage.setItem(KEY, JSON.stringify(now));
22
29
}
30
+
31
+
////////////////////////////////////////////
32
+
// WHEN SOURCES CHANGE
33
+
////////////////////////////////////////////
34
+
35
+
const { sources } = await foundation.orchestrator.sources();
36
+
let initialised = false;
37
+
38
+
const debounced = debounce(
39
+
2500,
40
+
/** @param {import("~/components/input/types.d.ts").Source} _sources */ async (
41
+
_sources,
42
+
) => {
43
+
if (initialised && await orchestrator.isLeader()) orchestrator.process();
44
+
else initialised = true;
45
+
},
46
+
{ atBegin: false },
47
+
);
48
+
49
+
effect(() => {
50
+
debounced(sources());
51
+
});
+76
-52
src/guide.vto
+76
-52
src/guide.vto
···
8
8
9
9
<div class="columns">
10
10
<section>
11
-
<h3>Tutorial</h3>
12
-
13
-
<p>
14
-
<strong>Diffuse is not your typical streaming service, we have to add sources of audio so we have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away.
15
-
</p>
11
+
<h3>Concept</h3>
16
12
17
13
<p>
18
-
<button id="add-sample-content">
19
-
<span>Add sample content</span>
20
-
</button>
14
+
Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
21
15
</p>
22
16
23
17
<p>
24
-
Now we should explore what is possible with our audio. Because Diffuse is cooperative and malleable software, our interface can look like anything, and we can pick the features we like. That might sound overwhelming, so let's keep it simple for now.
18
+
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
25
19
</p>
26
20
27
21
<p>
28
-
<strong>Let's pick an interface</strong> that automatically puts audio from our collection into the queue, and another to play what got put into the queue.
22
+
These features and interfaces are housed into units that we call "facets". They consist of <a href="elements/">Diffuse elements</a> that are connected, they broadcast their state and the parts of your data that have been updated.
29
23
</p>
30
24
31
25
<p>
32
-
<span class="button-row">
33
-
<a class="button button--bg-twist-2" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
34
-
<span class="with-icon">
35
-
<i class="ph-fill ph-number-circle-one"></i>
36
-
Fill up queue
37
-
</span>
38
-
</a>
39
-
<a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
40
-
<span class="with-icon">
41
-
<i class="ph-fill ph-number-circle-two"></i>
42
-
Play audio
43
-
</span>
44
-
</a>
45
-
</span>
26
+
Finally, facets are just regular web pages so they can live wherever. We save them to the user-data storage that's configured and give the user the option to share it. This means that you can load features and interfaces from other people, <strong>building software cooperatively</strong>.
46
27
</p>
28
+
</section>
47
29
48
-
<p>
49
-
<em>So you said I could pick the features and interfaces that I liked, how does that work?</em>
50
-
</p>
30
+
<section>
31
+
<h3>Getting started</h3>
51
32
52
-
<p>
53
-
To do that, we have to look at the other pages shown in the navigation here, such as the <a href="featured/">featured page</a>. There you'll be able to browse through all the features and interfaces that are provided by Diffuse.
54
-
</p>
33
+
<ul style="display: flex; flex-direction: column; gap: var(--space-sm); padding-left: 0">
34
+
<!-- 1 -->
35
+
<li class="with-icon" style="gap: var(--space-xs)">
36
+
<i class="ph-fill ph-file-audio"></i>
37
+
<span>Add audio files or streams. The <a href="{{ ('facets/data/connect/index.html') |> facetLoaderURL }}">connect</a> interfaces can be used for this, or use the demo from the tutorial below.</span>
38
+
</li>
55
39
56
-
<p>
57
-
<strong>To use a feature, you click the toggle to enable it</strong>, this will add it to your software. Interfaces can be added too, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="themes/">themes</a>.
58
-
</p>
40
+
<!-- 2 -->
41
+
<li class="with-icon" style="gap: var(--space-xs)">
42
+
<i class="ph-fill ph-gear-six"></i>
43
+
<span>Wait until the processing of audio sources into tracks is completed.</span>
44
+
</li>
59
45
60
-
<p>
61
-
TODO: explain adding your own inputs, syncing user data, etc.
62
-
</p>
46
+
<!-- 3 -->
47
+
<li class="with-icon" style="gap: var(--space-xs)">
48
+
<i class="ph-fill ph-paint-brush"></i>
49
+
<span>Explore the interfaces that can be used.</span>
50
+
</li>
51
+
</ul>
63
52
</section>
53
+
</div>
64
54
65
-
<section>
66
-
<h3>Concept</h3>
55
+
<section>
56
+
<h3>Tutorial</h3>
67
57
68
-
<p>
69
-
Diffuse is unlike traditional software; instead of combining several features into a single user interface and producing data output, we do the opposite, we start with the data and work our way up from there.
70
-
</p>
58
+
<p>
59
+
<strong>Diffuse is not your typical streaming service, we have to add sources of audio so we have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away.
60
+
</p>
71
61
72
-
<p>
73
-
<strong>It provides every user the ability to choose which features and interfaces they want to layer on top of their data.</strong>
74
-
</p>
62
+
<p>
63
+
<button id="add-sample-content">
64
+
<span>Add sample content</span>
65
+
</button>
66
+
</p>
75
67
76
-
<p>
77
-
These features and interfaces are housed into units that we call "facets". They consist of <a href="elements/">Diffuse elements</a> that are connected, they broadcast their state and your data that has been updated.
78
-
</p>
68
+
<p>
69
+
Now we should explore what is possible with our audio. Because Diffuse is cooperative and malleable software, our interface can look like anything, and we can pick the features we like. That might sound overwhelming, so let's keep it simple for now.
70
+
</p>
79
71
80
-
<p>
81
-
Finally, facets are just regular web pages so they can live wherever. We save them to the user-data storage that's configured and give the user the option to share it. This means that you can load features and interfaces from other people, <strong>building software cooperatively</strong>.
82
-
</p>
83
-
</section>
84
-
</div>
72
+
<p>
73
+
<strong>Let's pick an interface</strong> that automatically puts audio from our collection into the queue, and another to play what got put into the queue.
74
+
</p>
75
+
76
+
<p>
77
+
<span class="button-row">
78
+
<a class="button button--bg-twist-2" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
79
+
<span class="with-icon">
80
+
<i class="ph-fill ph-number-circle-one"></i>
81
+
Fill up queue
82
+
</span>
83
+
</a>
84
+
<a class="button button--bg-twist-2" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
85
+
<span class="with-icon">
86
+
<i class="ph-fill ph-number-circle-two"></i>
87
+
Play audio
88
+
</span>
89
+
</a>
90
+
</span>
91
+
</p>
92
+
93
+
<p>
94
+
<em>So you said I could pick the features and interfaces that I liked, how does that work?</em>
95
+
</p>
96
+
97
+
<p>
98
+
To do that, we have to look at the other pages shown in the navigation here, such as the <a href="featured/">featured page</a>. There you'll be able to browse through all the features and interfaces that are provided by Diffuse.
99
+
</p>
100
+
101
+
<p>
102
+
<strong>To use a feature, you click the toggle to enable it</strong>, this will add it to your software. Interfaces can be added too, but it's not required, you can try them out right away by clicking the link in their title. For interfaces that are more like traditional web applications, delivering more encompassing experiences, look at <a href="themes/">themes</a>.
103
+
</p>
104
+
105
+
<p>
106
+
TODO: explain adding your own inputs, syncing user data, etc.
107
+
</p>
108
+
</section>
+1
src/vendor/throttle-debounce/index.js
+1
src/vendor/throttle-debounce/index.js
···
1
+
export * from "throttle-debounce";