forked from
tokono.ma/diffuse
A music player that connects to your cloud/distributed storage.
chore: more dashboard and guide improvements
+41
-32
+1
src/build.vto
+1
src/build.vto
···
110
110
</p>
111
111
<ul>
112
112
<li><span>Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation.</span></li>
113
+
<li><span>All URLs in a facet are relative to the root of Diffuse (not the root of the server) due to the base element in the header of the facet loader.</span></li>
113
114
</ul>
114
115
</section>
115
116
</div>
+12
-2
src/common/pages/dashboard.js
+12
-2
src/common/pages/dashboard.js
···
13
13
import { openAddFromURIModal } from "./from-uri.js";
14
14
15
15
// Signals
16
-
const activeFilter = signal("all");
16
+
const FILTER_STORAGE_KEY = "diffuse/dashboard/filter";
17
+
const storedFilter = localStorage.getItem(FILTER_STORAGE_KEY);
18
+
const activeFilter = signal(
19
+
storedFilter === "prelude" || storedFilter === "interface"
20
+
? storedFilter
21
+
: "all",
22
+
);
23
+
24
+
effect(() => {
25
+
localStorage.setItem(FILTER_STORAGE_KEY, activeFilter.get());
26
+
});
17
27
18
28
/**
19
29
* @import OutputOrchestrator from "~/components/orchestrator/output/element.js";
···
134
144
@click="${() => openAddFromURIModal()}"
135
145
>
136
146
<i class="ph-fill ph-plus-circle"></i>
137
-
Add from URI
147
+
<span class="button__supplementary-text">Add from URI</span>
138
148
</button>
139
149
140
150
<div style="flex: 1"></div>
+11
-28
src/guide.vto
+11
-28
src/guide.vto
···
6
6
7
7
<h1 hidden>Guide</h1>
8
8
9
-
<style>
10
-
strong {
11
-
font-weight: 600;
12
-
}
13
-
</style>
14
-
15
9
<div class="columns">
16
10
<section>
17
11
<h3>Concept</h3>
···
44
38
<!-- 1 -->
45
39
<li class="with-icon" style="gap: var(--space-sm)">
46
40
<i class="ph-fill ph-file-audio" style="opacity: 0.4"></i>
47
-
<span><strong>Add some audio files or streams.</strong> 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>
41
+
<span><strong>Add some audio files or streams.</strong> The wide range of <a href="{{ ('facets/connect/index.html') |> facetLoaderURL }}">connect interfaces</a> can be used for this, or use the demo from the tutorial below.</span>
48
42
</li>
49
43
50
44
<!-- 2 -->
51
45
<li class="with-icon" style="gap: var(--space-sm)">
52
46
<i class="ph-fill ph-gear-six" style="opacity: 0.4"></i>
53
-
<span><strong>Wait until the processing of audio sources into tracks is completed.</strong> The demo button will show you the status or you can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>.</span>
47
+
<span><strong>Wait until the processing of audio sources into tracks is completed.</strong> You can monitor it using this <a href="{{ ('facets/data/process-tracks/index.html') |> facetLoaderURL }}">interface</a>. The tutorial demo will show it directly.</span>
54
48
</li>
55
49
56
50
<!-- 3 -->
57
51
<li class="with-icon" style="gap: var(--space-sm)">
58
52
<i class="ph-fill ph-paint-brush" style="opacity: 0.4"></i>
59
-
<span><strong style="color: var(--accent-twist-2)">Explore the interfaces that can be used.</strong> Check out the <a href="featured/?filter=interface">featured interfaces</a>.</span>
53
+
<span><strong style="color: var(--accent-twist-2)">Explore the interfaces that can be used to play and manage your audio.</strong> Check out the <a href="featured/?filter=interface">featured interfaces</a>.</span>
60
54
</li>
61
55
62
56
<!-- 4 -->
63
57
<li class="with-icon" style="gap: var(--space-sm)">
64
58
<i class="ph-fill ph-sparkle" style="opacity: 0.4"></i>
65
-
<span><strong style="color: var(--accent-twist-4)">Continue exploring, enable some additional features</strong>, such as making played audio available offline automatically.</span>
59
+
<span><strong style="color: var(--accent-twist-4)">Continue exploring, enable some additional features</strong> such as making played audio available offline automatically.</span>
66
60
</li>
67
61
68
62
<!-- 5 -->
69
63
<li class="with-icon" style="gap: var(--space-sm)">
70
64
<i class="ph-fill ph-person" style="opacity: 0.4"></i>
71
-
<span><strong>Sync your user-data with your other devices.</strong> Or share your data with other people.</span>
65
+
<span><strong>Sync your configuration and playlists with your other devices.</strong> Or share it with other people.</span>
72
66
</li>
73
67
</ul>
74
68
</section>
···
78
72
<h3 id="tutorial">Tutorial</h3>
79
73
80
74
<p>
81
-
<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.
75
+
<strong>Diffuse is not your typical streaming service, you have to add sources of audio so you have stuff to play.</strong> This button below adds some demo content, so you can experiment with the software right away.
82
76
</p>
83
77
84
78
<p>
···
92
86
</p>
93
87
94
88
<p>
95
-
<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.
89
+
By default a feature is enabled which puts audio in the queue automatically. <strong>Let's pick an interface</strong> to play what got put into the queue for us.
96
90
</p>
97
91
98
92
<p>
99
-
<span class="button-row">
100
-
<a class="button button--bg-accent" href="{{ ('facets/playback/auto-queue/index.html') |> facetLoaderURL }}" target="_blank">
101
-
<span class="with-icon">
102
-
<i class="ph-fill ph-number-circle-one"></i>
103
-
Fill up queue
104
-
</span>
105
-
</a>
106
-
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
107
-
<span class="with-icon">
108
-
<i class="ph-fill ph-number-circle-two"></i>
109
-
Play audio
110
-
</span>
111
-
</a>
112
-
</span>
93
+
<a class="button button--bg-accent" href="{{ ('themes/blur/artwork-controller/facet/index.html') |> facetLoaderURL }}" target="_blank">
94
+
Play audio
95
+
</a>
113
96
</p>
114
97
115
98
<p>
···
125
108
</p>
126
109
127
110
<p>
128
-
TODO: explain adding your own inputs, syncing user data, etc.
111
+
TODO: explain adding your own inputs, syncing user data, editing/forking facets, creating your own facet, etc.
129
112
</p>
130
113
</section>
+17
-2
src/styles/diffuse/page.css
+17
-2
src/styles/diffuse/page.css
···
165
165
166
166
dialog {
167
167
background: var(--bg-color);
168
-
border: 2px solid var(--border-color);
168
+
border: 0;
169
169
border-radius: var(--radius-md);
170
170
padding: var(--space-lg);
171
171
min-width: min(87.5dvw, var(--container-sm));
···
390
390
391
391
.grid-filter--output {
392
392
font-size: var(--fs-xs);
393
-
font-weight: 700;
393
+
font-weight: 600;
394
+
overflow: hidden;
395
+
text-overflow: ellipsis;
396
+
white-space: nowrap;
394
397
}
395
398
396
399
.grid-filter--label-output,
···
582
585
}
583
586
}
584
587
588
+
.button__supplementary-text {
589
+
display: none;
590
+
591
+
@media (min-width: 42rem) {
592
+
display: inline-flex;
593
+
}
594
+
}
595
+
585
596
& > span {
586
597
align-items: center;
587
598
display: inline-flex;
···
596
607
a {
597
608
text-underline-offset: 3px;
598
609
}
610
+
}
611
+
612
+
strong {
613
+
font-weight: 600;
599
614
}
600
615
601
616
.button-col {