a simple web player for subsonic
tinysub.devins.page
subsonic
navidrome
javascript
refactor: move loop button to playback controls
and some other cleanup
+46
-41
+28
-24
src/css/components.css
+28
-24
src/css/components.css
···
26
26
flex: 1;
27
27
}
28
28
29
+
#playback #loop-btn {
30
+
opacity: 0.5;
31
+
}
32
+
33
+
#playback #loop-btn.active {
34
+
opacity: 1;
35
+
}
36
+
29
37
/* BASE STYLES */
30
38
button {
31
39
background: none;
···
37
45
font: inherit;
38
46
}
39
47
40
-
/* animations */
41
48
@keyframes pulse {
42
49
0%,
43
50
100% {
···
84
91
padding-inline: 1rem;
85
92
}
86
93
87
-
/* sidebar - tree items */
88
-
#sidebar .tree-item {
94
+
/* sidebar - library - tree items */
95
+
#sidebar #library .tree-item {
89
96
display: flex;
90
97
align-items: center;
91
98
gap: 0.5rem;
92
99
}
93
100
94
-
#sidebar .tree-toggle,
95
-
#sidebar .tree-name {
101
+
#sidebar #library .tree-toggle,
102
+
#sidebar #library .tree-name {
96
103
color: inherit;
97
104
text-decoration: none;
98
105
flex: 1;
···
102
109
min-width: 0;
103
110
}
104
111
105
-
#sidebar .tree-toggle span,
106
-
#sidebar .tree-name span {
112
+
#sidebar #library .tree-toggle span,
113
+
#sidebar #library .tree-name span {
107
114
overflow: hidden;
108
115
text-overflow: ellipsis;
109
116
white-space: nowrap;
110
117
}
111
118
112
-
#sidebar .tree-action.disabled {
119
+
#sidebar #library .tree-action.disabled {
113
120
opacity: 0.5;
114
121
}
115
122
116
-
#sidebar .tree-toggle img,
117
-
#sidebar .tree-name img {
123
+
#sidebar #library .tree-toggle img,
124
+
#sidebar #library .tree-name img {
118
125
width: var(--art-artist);
119
126
height: var(--art-artist);
120
127
aspect-ratio: 1 / 1;
121
128
object-fit: cover;
122
129
}
123
130
124
-
#sidebar ul.nested > li .tree-toggle img,
125
-
#sidebar ul.nested > li .tree-name img {
131
+
#sidebar #library ul.nested > li .tree-toggle img,
132
+
#sidebar #library ul.nested > li .tree-name img {
126
133
width: var(--art-album);
127
134
height: var(--art-album);
128
135
}
129
136
130
-
/* sidebar - nested tree lists */
131
-
#sidebar .nested {
137
+
#sidebar #library .nested {
132
138
list-style: none;
133
139
margin-inline-start: 1rem;
134
140
}
135
141
136
-
#sidebar .nested li {
142
+
#sidebar #library .nested li {
137
143
margin-block-start: 0.25rem;
138
144
}
139
145
···
277
283
opacity: 1;
278
284
}
279
285
280
-
/* ACTIONS */
281
-
#actions {
286
+
/* FOOTER */
287
+
#footer {
282
288
grid-area: footer;
283
289
display: flex;
284
290
align-items: center;
291
+
justify-content: space-between;
285
292
gap: 1rem;
286
293
padding: 0.5rem 1rem;
287
294
border-top: 1px solid var(--border-subtle);
288
295
background: var(--bg-tertiary);
289
296
}
290
297
291
-
#actions #loop-btn {
292
-
margin-inline-start: auto;
293
-
opacity: 0.5;
294
-
}
295
-
296
-
#actions #loop-btn.active {
297
-
opacity: 1;
298
+
#footer #actions {
299
+
display: flex;
300
+
align-items: center;
301
+
gap: 1rem;
298
302
}
299
303
300
304
/* CONTEXT MENU */
+18
-17
src/index.html
+18
-17
src/index.html
···
141
141
alt="next"
142
142
/>
143
143
</button>
144
+
<button id="loop-btn" aria-label="loop">
145
+
<img src="static/famfamfam-silk/control_repeat.png" alt="loop" />
146
+
</button>
144
147
<input type="range" id="progress" min="0" max="100" value="0" />
145
148
<span id="time-display">0:00 / 0:00</span>
146
149
</header>
···
187
190
</table>
188
191
</main>
189
192
190
-
<footer id="actions">
193
+
<footer id="footer">
191
194
<span
192
195
><a href="https://tangled.org/devins.page/tinysub">tinysub</a>
193
196
1.6.1</span
194
197
>
195
-
<button id="loop-btn" aria-label="loop">
196
-
<img src="static/famfamfam-silk/control_repeat.png" alt="loop" />
197
-
<span>loop</span>
198
-
</button>
199
-
<button id="clear-btn" aria-label="clear">
200
-
<img src="static/famfamfam-silk/cross.png" alt="clear" />
201
-
<span>clear</span>
202
-
</button>
203
-
<button id="sort-btn" aria-label="sort">
204
-
<img src="static/famfamfam-silk/arrow_switch.png" alt="sort" />
205
-
<span>sort</span>
206
-
</button>
207
-
<button id="settings-btn" aria-label="settings">
208
-
<img src="static/famfamfam-silk/cog.png" alt="settings" />
209
-
<span>settings</span>
210
-
</button>
198
+
<div id="actions">
199
+
<button id="clear-btn" aria-label="clear">
200
+
<img src="static/famfamfam-silk/cross.png" alt="clear" />
201
+
<span>clear</span>
202
+
</button>
203
+
<button id="sort-btn" aria-label="sort">
204
+
<img src="static/famfamfam-silk/arrow_switch.png" alt="sort" />
205
+
<span>sort</span>
206
+
</button>
207
+
<button id="settings-btn" aria-label="settings">
208
+
<img src="static/famfamfam-silk/cog.png" alt="settings" />
209
+
<span>settings</span>
210
+
</button>
211
+
</div>
211
212
</footer>
212
213
213
214
<script src="js/constants.js"></script>