tokono.ma
A music player that connects to your cloud/distributed storage.
1<main>
2 <div class="panel">
3 <div class="row">
4 <button id="repeat" title="Toggle repeat">
5 <span class="with-icon"><i class="ph-bold ph-repeat"></i> Repeat</span>
6 </button>
7 <button id="shuffle" title="Toggle shuffle">
8 <span class="with-icon"><i class="ph-bold ph-shuffle"></i> Shuffle</span>
9 </button>
10 </div>
11 <hr />
12 <div class="row">
13 <label class="with-icon" for="playlist">
14 <i class="ph-bold ph-playlist"></i>
15 <select id="playlist">
16 <option value="">All tracks</option>
17 </select>
18 </label>
19 </div>
20 <div class="row">
21 <label class="with-icon" for="search">
22 <i class="ph-bold ph-magnifying-glass"></i>
23 <input id="search" type="search" placeholder="Search" />
24 </label>
25 </div>
26 <div class="row">
27 <label class="with-icon" for="sort-by" style="width: min(80vw, var(--container-xs))">
28 <i class="ph-bold ph-arrows-down-up"></i>
29 <select id="sort-by">
30 <option value="[]">Default order</option>
31 <option value='["createdAt"]'>Added to collection</option>
32 <option value='["tags.title"]'>Title</option>
33 <option value='["tags.album","tags.disc.no","tags.track.no"]'>Album</option>
34 <option value='["tags.artist","tags.album","tags.disc.no","tags.track.no"]'>
35 Artist
36 </option>
37 <option value='["tags.year"]'>Year</option>
38 <option value='["tags.date"]'>Date</option>
39 </select>
40 <button id="sort-direction" style="flex: none">DESC</button>
41 </label>
42 </div>
43 </div>
44</main>
45
46<style>
47 @import "./styles/base.css";
48 @import "./styles/wireframe/ui.css";
49 @import "./vendor/@phosphor-icons/web/bold/style.css";
50
51 body {
52 display: flex;
53 align-items: center;
54 justify-content: center;
55 height: 100dvh;
56 }
57
58 main {
59 opacity: 0;
60 padding: var(--space-md);
61 pointer-events: none;
62 transition: opacity 750ms;
63
64 &.has-loaded {
65 opacity: 1;
66 pointer-events: auto;
67 }
68 }
69
70 label {
71 flex: 1;
72 flex-wrap: wrap;
73 letter-spacing: var(--leading-relaxed);
74 text-transform: uppercase;
75 }
76
77 label input,
78 label select {
79 flex: 1;
80 }
81
82 .row button {
83 flex: 1;
84 }
85</style>
86
87<script type="module" src="facets/playback/auto-queue/index.inline.js"></script>