tokono.ma
A music player that connects to your cloud/distributed storage.
1---
2layout: layouts/facets.vto
3base: ../../
4title: Build | Facets | Diffuse
5
6styles:
7 - styles/base.css
8 - styles/diffuse/page.css
9 - styles/diffuse/code-editor.css
10 - vendor/@phosphor-icons/bold/style.css
11 - vendor/@phosphor-icons/fill/style.css
12
13scripts:
14 - facets/build.js
15
16examples:
17 - url: "facets/examples/now-playing/index.html"
18 title: "Now playing"
19 desc: >
20 Shows what's currently set to "now playing" in the queue, along with a button to shift the queue to the next track.
21 - url: "facets/examples/generate-playlist/index.html"
22 title: "Generate playlist"
23 desc: >
24 Make a list of what previously played in the queue.
25---
26
27<h1 id="build" hidden>Build</h1>
28
29
30<!-- BUILD -->
31<section style="margin-top: var(--space-lg);">
32 <form id="build-form" class="columns">
33 <div class="flex">
34 <div id="html-input-container" class="code-editor monospace-font">
35 </div>
36 </div>
37
38 <div style="flex: 1; max-width: var(--container-sm)">
39 <p style="margin-top: 0">
40 Your code here builds on the <a href="#foundation">foundation</a> listed below, and will be injected into a <span style="white-space: nowrap"><code><div id="container"></code></span> element in the body.
41 </p>
42 <p>
43 <input id="name-input" type="text" placeholder="Name" name="name" required />
44 </p>
45 <p>
46 <textarea id="description-input" placeholder="Description" name="description" rows="5"></textarea>
47 </p>
48 <p>
49 <span class="button-row">
50 <button class="button--bg-twist-2" name="save">Save</button>
51 <button class="button--bg-twist-2" name="save+open">Save & Open</button>
52 </span>
53 </p>
54 </div>
55 </form>
56</section>
57
58<!-- FOUNDATION -->
59<div class="columns">
60 <section class="flex">
61 <h2 id="foundation">Foundation</h2>
62
63 <p>
64 Diffuse comes with a foundation that preconfigures all elements so you don't have to set them up yourself, along with a combination of elements for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times.
65 </p>
66 <p>
67 <small><i class="ph-fill ph-info"></i> Refer to the <a href="#elements">elements index</a> to find out what each element does.</small>
68 </p>
69 <div class="code-block">
70 <code>
71 {{- echo -}}
72 import foundation from "common/facets/foundation.js"
73 {{ /echo }}
74{{ echo -}}foundation.engine.audio(){{- /echo }}
75{{ echo -}}foundation.engine.queue(){{- /echo }}
76{{ echo -}}foundation.engine.repeatShuffle(){{- /echo }}
77{{ echo -}}foundation.engine.scope(){{- /echo }}
78
79{{ echo -}}foundation.orchestrator.autoQueue(){{- /echo }}
80{{ echo -}}foundation.orchestrator.favourites(){{- /echo }}
81{{ echo -}}foundation.orchestrator.input(){{- /echo }}
82{{ echo -}}foundation.orchestrator.output(){{- /echo }}
83{{ echo -}}foundation.orchestrator.queueAudio(){{- /echo }}
84{{ echo -}}foundation.orchestrator.processTracks(){{- /echo }}
85{{ echo -}}foundation.orchestrator.scopedTracks(){{- /echo }}
86{{ echo -}}foundation.orchestrator.sources(){{- /echo }}
87
88{{ echo -}}foundation.processor.artwork(){{- /echo }}
89{{ echo -}}foundation.processor.metadata(){{- /echo }}
90{{ echo -}}foundation.processor.search(){{- /echo -}}
91 </code>
92 </div>
93
94 <p>
95 <small>Features:</small>
96 </p>
97 <ul style="margin-bottom: 0;">
98 <li>
99 <span>Fill the queue automatically <small>(infinite play)</small></span>
100 <div class="list-description">
101 <code>foundation.features.fillQueueAutomatically()</code>
102 </div>
103 </li>
104 <li>
105 <span>Play audio from the queue</span>
106 <div class="list-description">
107 <code>foundation.features.playAudioFromQueue()</code>
108 </div>
109 </li>
110 <li>
111 <span>Process inputs <small>(into tracks, etc)</small></span>
112 <div class="list-description">
113 <code>foundation.features.processInputs()</code>
114 </div>
115 </li>
116 <li>
117 <span>Search through your collection</span>
118 <div class="list-description" style="margin-bottom: 0;">
119 <code>foundation.features.searchThroughCollection()</code>
120 </div>
121 </li>
122 </ul>
123 </section>
124
125 <section class="flex">
126 <h2 id="examples">Examples</h2>
127
128 <p>
129 Some simple examples to help you understand how to build your own facet. Click the edit button to load them into the code editor above.
130 </p>
131
132 {{ await comp.facets.examples({ id: "examples", items: examples }) }}
133
134 <h2 id="notes">Notes</h2>
135 <p>
136 While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind:
137 </p>
138 <ul>
139 <li><span>In most cases you'll want to call <code>foundation.features.processInputs()</code> so that your audio files and streams actually show up.</span></li>
140 <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>
141 <li><span>You can use facets in combination with themes by adding the elements used in the theme to a group and then passing in the group name as a URL query parameter (eg. <code>group=facets</code>)</span></li>
142 </ul>
143 </section>
144</div>