A music player that connects to your cloud/distributed storage.
1---
2layout: layouts/kitchen.vto
3base: ../
4title: Create | Diffuse
5
6examples:
7 - url: "facets/examples/now-playing/index.html"
8 title: "Now playing"
9 desc: >
10 Shows what's currently set to "now playing" in the queue, along with a button to shift the queue to the next track.
11 - url: "facets/examples/generate-playlist/index.html"
12 title: "Generate playlist"
13 desc: >
14 Make a list of what previously played in the queue.
15---
16
17<style>
18 h2 {
19 font-size: var(--fs-lg);
20 opacity: 0.6;
21 }
22</style>
23
24
25<h1 id="create" hidden>Create</h1>
26
27
28<!-- BUILD -->
29<section style="margin-top: var(--space-lg);">
30 <form id="code-form" class="columns">
31 <div class="flex" style="flex-basis: 35%">
32 <div id="html-input-container" class="code-editor monospace-font">
33 </div>
34 </div>
35
36 <div style="flex: 1; font-size: var(--fs-sm); max-width: var(--container-sm)">
37 <p style="margin-top: 0">
38 <label for="name-input">Name</label>
39 <input id="name-input" type="text" placeholder="Name" name="name" value="New facet" required />
40 </p>
41 <p>
42 <label for="kind-input">Kind</label>
43 <select id="kind-input" name="kind">
44 <option value="interactive" selected>Interactive (Interface)</option>
45 <option value="prelude">Prelude (Feature)</option>
46 </select>
47 </p>
48 <p>
49 <label for="description-input">Description</label>
50 <textarea id="description-input" placeholder="Description" name="description" rows="5"></textarea>
51 </p>
52 <p>
53 <span class="button-row">
54 <button class="button--bg-accent" name="save">Save</button>
55 <button class="button--bg-accent" name="save+open">Save & Open</button>
56 </span>
57 </p>
58 </div>
59 </form>
60</section>
61
62<!-- GENERATE -->
63<div class="columns">
64 <section class="flex">
65 <h2 id="generate">Generate</h2>
66
67 <p>
68 <strong>You can generate interfaces or features easily using AI.</strong> Diffuse provides a skill to use with LLMs. Claude usage example:
69 </p>
70
71 <ul>
72 <li>
73 <p>
74 <a href="skills/diffuse-facet.zip" class="button" download>Download skill</a>
75 </p>
76 </li>
77 <li>
78 <p>
79 Open up <a href="https://claude.ai/customize/skills" target="_blank">skills screen</a> <small>(Customise tab in sidebar)</small>
80 </p>
81 </li>
82 <li>
83 <p>
84 <span class="with-icon">
85 <i class="ph-bold ph-plus"></i>
86 <span>Create skill</span>
87 <i class="ph-bold ph-arrow-right"></i>
88 <span>Upload skill</span>
89 </span>
90 </p>
91 </li>
92 <li>
93 <p>
94 Select downloaded zip file
95 </p>
96 </li>
97 <li>
98 <p>
99 Try in chat and follow directions
100 </p>
101 </li>
102 </ul>
103 </section>
104
105 <section class="flex">
106 <h2 id="notes">Notes</h2>
107
108 <p>
109 Facets will be injected into a <span style="white-space: nowrap"><code><div id="container"></code></span> element in the body.
110 </p>
111 <p>
112 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:
113 </p>
114 <ul>
115 <li><span>Prelude (feature) facets are loaded in alphabetical order by the facet loader.</span></li>
116 <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>
117 <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>
118 </ul>
119 </section>
120</div>
121
122<!-- FOUNDATION -->
123<div class="columns">
124 <section class="flex">
125 <h2 id="foundation">Foundation</h2>
126
127 <p>
128 <strong>Diffuse comes with a foundation that preconfigures a lot of the built-in Diffuse web components so you don't have to set them up yourself</strong>, along with a combination of components 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. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature.
129 </p>
130 <p>
131 That said, you are not required not use this! You can, for example, setup a Diffuse audio engine element yourself that's in a different group so that it doesn't communicate with the default one; in case you want to make a dj-deck, or something like that, which would have multiple audio items playing at the same time. This does mean you will need to pay attention to more things, such as, how does this interact with other features the user has enabled.
132 </p>
133 <p>
134 <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>
135 </p>
136 <div class="code-block">
137 <code>
138 {{- echo -}}
139 import foundation from "common/foundation.js"
140 {{ /echo }}
141{{ echo -}}await foundation.configurator.artwork(){{- /echo }}
142{{ echo -}}await foundation.configurator.input(){{- /echo }}
143{{ echo -}}await foundation.configurator.metadata(){{- /echo }}
144{{ echo -}}await foundation.configurator.scrobbles(){{- /echo }}
145
146{{ echo -}}await foundation.engine.audio(){{- /echo }}
147{{ echo -}}await foundation.engine.queue(){{- /echo }}
148{{ echo -}}await foundation.engine.repeatShuffle(){{- /echo }}
149{{ echo -}}await foundation.engine.scope(){{- /echo }}
150
151{{ echo -}}await foundation.orchestrator.autoQueue(){{- /echo }}
152{{ echo -}}await foundation.orchestrator.favourites(){{- /echo }}
153{{ echo -}}await foundation.orchestrator.mediaSession(){{- /echo }}
154{{ echo -}}await foundation.orchestrator.output(){{- /echo }}
155{{ echo -}}await foundation.orchestrator.queueAudio(){{- /echo }}
156{{ echo -}}await foundation.orchestrator.processTracks(){{- /echo }}
157{{ echo -}}await foundation.orchestrator.scopedTracks(){{- /echo }}
158{{ echo -}}await foundation.orchestrator.scrobbleAudio(){{- /echo }}
159{{ echo -}}await foundation.orchestrator.sources(){{- /echo }}
160
161{{ echo -}}await foundation.orchestrator.artwork(){{- /echo -}}
162 </code>
163 </div>
164 </section>
165
166 <section class="flex">
167 <h2 id="examples">Examples</h2>
168
169 <p>
170 Some simple examples to help you understand how to write your own facet. Click the edit button to load them into the code editor above.
171 </p>
172
173 {{ await comp.examples({ id: "examples", items: examples }) }}
174 </section>
175</div>