pico-pixel-player

pico-pixel-player/webclient/src/App.tsx
App.tsx
⎇
Raw
1import { createSignal, createEffect, onMount, on, createResource, batch } from "solid-js";
2import type { Component } from "solid-js";
3import { type PlaylistItem, type PlayerState, type AppOptions, getItemName } from "./types";
4import OptionsModal from "./components/OptionsModal";
5import PlayerControls from "./components/PlayerControls";
6import FileBrowser from "./components/FileBrowser";
7import {
8 ClosedFolderSVG,
9 CogSVG,
10 DownloadManagerSVG,
11 FullscreenSVG,
12 OpenFolderSVG,
13 PlaylistSVG,
14} from "./components/SVG";
15import { LocalStorageValues, toast } from "./utils";
16import Playlist from "./components/Playlist";
17import { getCover, getSrc, listFiles } from "./offline";
18import { type Directory, type MediaFile, MediaFormat } from "music-server-shared/types";
19import PlaylistManager from "./components/PlaylistManager";
20import { BUILD_HASH } from "./build-info";
21import { createStore, reconcile } from "solid-js/store";
22import { decodePath, encodePath } from "music-server-shared/utils";
23import DownloadManager from "./components/DownloadManager";
24
25//TODO: keep synced-aborted in downloadmanager
26//TODO: bypass music-metadata if it fails
27//TODO: search
28//TODO: better touch controls?
29//TODO: Add documentation to functions
30//TODO: allow syncing playlists to server
31//TODO: button to show metadata
32//TODO: show cover of playing item
33//TODO: video support
34//TODO: virtual rendering for playlist
35//TODO: custom serialization?
36
37export type FlatFileListing = [string, Directory | MediaFile][];
38
39const App: Component = () => {
40 const [showFileBrowser, setShowFileBrowser] = createSignal(false);
41 const [currentDir, setCurrentDir] = createSignal(decodePath(window.location.hash.slice(1)));
42 const [playlist, setPlaylist] = createSignal<PlaylistItem[]>([]);
43 const [playerState, setPlayerState] = createStore<PlayerState>({
44 isPlaying: false,
45 currentTrack: null,
46 currentTime: 0,
47 volume: 0.5,
48 buffered: [],
49 rate: 1,
50 waitingForStart: false,
51 });
52 const [showOptions, setShowOptions] = createSignal(false);
53 const [showPlaylistManager, setShowPlaylistManager] = createSignal(false);
54 const [showDownloadManager, setShowDownloadManager] = createSignal(false);
55 const [options, setOptions] = createStore<AppOptions>({
56 //default settings
57 bitrate: 128000,
58 enableTranscoding: true,
59 disableChunkedTranscoding: false,
60 maxTranscodes: 4,
61 maxDownloads: 2,
62 rememberDir: false,
63 format: MediaFormat["opus/webm"],
64 hideVolume: false,
65 duplicateWarning: true,
66 fontResolution: 12,
67 hideCover: false,
68 });
69 const [breadcrumbs, setBreadcrumbs] = createSignal<string[]>([]);
70 const [isShuffled, setShuffled] = createSignal(false);
71 const [isRepeated, setRepeated] = createSignal(false);
72 const [isOffline, setOffline] = createSignal(true);
73 const [files, fetchFiles] = createResource<FlatFileListing, { dir: string; offline: boolean }>(
74 () => ({ dir: currentDir(), offline: isOffline() }),
75 async (args) => {
76 function fileSort(a: [string, Directory | MediaFile], b: [string, Directory | MediaFile]): number {
77 //sort directories first
78 if ("metadata" in b[1] && !("metadata" in a[1])) return -1;
79 if ("metadata" in a[1] && !("metadata" in b[1])) return 1;
80 return a[0].localeCompare(b[0], undefined, { numeric: true });
81 }
82 return Array.from(await listFiles(args.dir, args.offline, false)).sort(fileSort);
83 },
84 { initialValue: [] },
85 );
86
87 createEffect(() => {
88 const parts = currentDir().split("/").filter(Boolean);
89 setBreadcrumbs(["root", ...parts]);
90 // Update URL fragment when directory changes
91 window.location.hash = encodePath(currentDir());
92 });
93
94 createEffect(() => {
95 const new_font = new FontFace(
96 "ark-latin",
97 `url(assets/ark-pixel-${options.fontResolution}px-proportional-latin.woff2) format(woff2)`,
98 );
99 document.fonts.clear();
100 document.fonts.add(new_font);
101 });
102
103 function stopPlaying() {
104 batch(() => {
105 setPlayerState("isPlaying", false);
106 setPlayerState("currentTime", 0);
107 setPlayerState("currentTrack", null);
108 });
109 audioElement.pause();
110 if (audioElement.src.startsWith("blob:")) URL.revokeObjectURL(audioElement.src);
111 audioElement.srcObject = null;
112 }
113
114 createEffect(
115 on(playlist, () => {
116 if (playlist().length === 0) {
117 stopPlaying();
118 }
119 }),
120 );
121
122 if ("mediaSession" in navigator) {
123 createEffect(async () => {
124 if (!playerState.currentTrack) {
125 navigator.mediaSession.metadata = new MediaMetadata();
126 return;
127 }
128 const oldSrc = navigator.mediaSession.metadata?.artwork[0]?.src ?? "";
129 if (oldSrc.startsWith("blob:")) URL.revokeObjectURL(oldSrc);
130 const artwork = await getCover(playerState.currentTrack.path.split("/").slice(0, -1).join("/"), isOffline());
131 navigator.mediaSession.metadata = new MediaMetadata({
132 title: getItemName(playerState.currentTrack),
133 artwork: [
134 {
135 src: artwork ?? "",
136 },
137 ],
138 });
139 });
140 }
141
142 let audioElement!: HTMLAudioElement;
143
144 function handlePlayerError(e: unknown) {
145 if (e instanceof Error && e.name === "AbortError") return;
146 if (e instanceof Error && e.name === "NotSupportedError") {
147 toast(
148 "Playing track failed: Format not supported, check if the server is up when playing a remote file, or change your transcoding settings",
149 "error",
150 );
151 } else {
152 toast("Playing track failed", "error", e);
153 }
154 }
155
156 // Play a track from the playlist
157 async function playTrack(track: PlaylistItem) {
158 try {
159 const src = await getSrc(track.path, options, isOffline());
160 if (!src) return;
161 if (audioElement.src.startsWith("blob:")) URL.revokeObjectURL(audioElement.src);
162
163 //need both of these lines to work without logging an error
164 //just removeAttribute doesn't work at all
165 //just srcObject = null works, but logs a weird csp error
166 audioElement.removeAttribute("src");
167 audioElement.srcObject = null;
168 audioElement.src = src;
169 batch(() => {
170 setPlayerState("isPlaying", true);
171 setPlayerState("currentTime", 0);
172 setPlayerState("buffered", []);
173 //clone, otherwise it shares the reference
174 setPlayerState("currentTrack", { ...track });
175 setPlayerState("waitingForStart", true);
176 });
177
178 await audioElement.play();
179 } catch (e) {
180 setPlayerState("isPlaying", false);
181 handlePlayerError(e);
182 }
183 }
184
185 // Play next track
186 function playNext() {
187 const currentTrack = playerState.currentTrack;
188 if (!currentTrack) return;
189
190 let nextTrack: PlaylistItem | null = null;
191
192 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
193 if (isShuffled()) {
194 // Pick a different random track
195 if (playlist().length > 1) {
196 const otherTracks = playlist().filter((_, idx) => idx !== currentIndex);
197 nextTrack = otherTracks[Math.floor(Math.random() * otherTracks.length)];
198 } else {
199 nextTrack = isRepeated() ? currentTrack : null;
200 }
201 } else if (currentIndex >= 0 && currentIndex < playlist().length - 1) {
202 nextTrack = playlist()[currentIndex + 1];
203 } else if (isRepeated()) {
204 nextTrack = playlist()[0];
205 }
206 if (nextTrack) {
207 playTrack(nextTrack);
208 } else {
209 stopPlaying();
210 }
211 }
212
213 // Play previous track
214 function playPrevious() {
215 const currentTrack = playerState.currentTrack;
216 if (!currentTrack) return;
217 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
218 if (currentIndex > 0) playTrack(playlist()[currentIndex - 1]);
219 }
220
221 // Toggle play/pause
222 function togglePlay() {
223 if (playerState.currentTrack === null) return;
224 const newIsPlaying = !playerState.isPlaying;
225 setPlayerState("isPlaying", newIsPlaying);
226
227 if (newIsPlaying) {
228 setPlayerState("waitingForStart", true);
229 audioElement
230 .play()
231 .catch((e) => {
232 setPlayerState("isPlaying", false);
233 setPlayerState("currentTime", 0);
234 handlePlayerError(e);
235 })
236 .finally(() => {
237 setPlayerState("waitingForStart", false);
238 });
239 } else {
240 audioElement.pause();
241 }
242 }
243
244 function timeRangesToArray(timeRanges: TimeRanges) {
245 const result = [];
246 for (let i = 0; i < timeRanges.length; i++) {
247 result.push({
248 start: timeRanges.start(i),
249 end: timeRanges.end(i),
250 });
251 }
252 return result;
253 }
254
255 // Update progress when the time updates
256 function updateProgress() {
257 setPlayerState("currentTime", audioElement.currentTime);
258 setPlayerState("buffered", reconcile(timeRangesToArray(audioElement.buffered)));
259 }
260
261 // Initialize app
262 onMount(async () => {
263 // Load from localStorage
264 try {
265 const savedOptions = localStorage.getItem(LocalStorageValues.options);
266 if (savedOptions) {
267 //keep default settings when no override exists
268 setOptions({ ...options, ...JSON.parse(savedOptions) });
269 }
270 const savedVolume = Number.parseFloat(localStorage.getItem(LocalStorageValues.volume) ?? "");
271 if (savedVolume && !Number.isNaN(savedVolume)) {
272 setPlayerState("volume", savedVolume);
273 }
274 const savedPlaylist = localStorage.getItem(LocalStorageValues.playlist);
275 if (savedPlaylist) {
276 setPlaylist(JSON.parse(savedPlaylist));
277 }
278 const savedShuffle = localStorage.getItem(LocalStorageValues.shuffle);
279 setShuffled(savedShuffle === "true");
280 const savedRepeat = localStorage.getItem(LocalStorageValues.repeat);
281 setRepeated(savedRepeat === "true");
282 const savedOffline = localStorage.getItem(LocalStorageValues.offline);
283 setOffline(savedOffline === "true");
284 const savedPath = localStorage.getItem(LocalStorageValues.path);
285 if (options.rememberDir && savedPath !== null && !window.location.hash) {
286 setCurrentDir(savedPath);
287 }
288 } catch (e) {
289 toast("loading values from localStorage failed", "error", e);
290 localStorage.clear();
291 }
292 // Sync to localStorage
293 createEffect(() => localStorage.setItem(LocalStorageValues.options, JSON.stringify(options)));
294 createEffect(() => localStorage.setItem(LocalStorageValues.volume, playerState.volume.toString()));
295 createEffect(() => localStorage.setItem(LocalStorageValues.playlist, JSON.stringify(playlist())));
296 createEffect(() => localStorage.setItem(LocalStorageValues.shuffle, isShuffled().toString()));
297 createEffect(() => localStorage.setItem(LocalStorageValues.repeat, isRepeated().toString()));
298 createEffect(() => localStorage.setItem(LocalStorageValues.path, currentDir()));
299 createEffect(() => localStorage.setItem(LocalStorageValues.offline, isOffline().toString()));
300
301 // Set initial audio element volume
302 audioElement.volume = playerState.volume;
303
304 // Set up audio element event handlers
305 audioElement.addEventListener("ended", playNext);
306 audioElement.addEventListener("timeupdate", updateProgress);
307 // audioElement.addEventListener("durationchange", updateProgress);
308 audioElement.addEventListener("pause", () => setPlayerState("isPlaying", false));
309 audioElement.addEventListener("play", () => setPlayerState("isPlaying", true));
310 audioElement.addEventListener("volumechange", () => setPlayerState("volume", audioElement.volume));
311 audioElement.addEventListener("canplay", () => setPlayerState("waitingForStart", false));
312
313 window.addEventListener("hashchange", () => {
314 setCurrentDir(decodePath(window.location.hash.slice(1)));
315 });
316
317 document.addEventListener("keydown", (e) => {
318 if (e.key === " ") {
319 togglePlay();
320 e.preventDefault();
321 }
322 });
323 });
324
325 createEffect(() => {
326 audioElement.volume = playerState.volume;
327 audioElement.playbackRate = playerState.rate;
328 });
329
330 return (
331 <div class="app-container">
332 <div class="app-header">
333 <div style={{ "min-width": 0 }}>
334 <div class="title">Pico Pixel Player</div>
335 <sub style={{ display: "block", "line-height": "1em" }}>{BUILD_HASH}</sub>
336 </div>
337
338 <div class="spacer" />
339 <div class="app-buttons">
340 <button
341 title="Switch between online and offline mode. In offline mode only locally cached files are listed"
342 class="offline-button"
343 style={{ background: isOffline() ? "lightgreen" : "indianred" }}
344 textContent={isOffline() ? "Go online" : "Go offline"}
345 onclick={() => setOffline(!isOffline())}
346 />
347 <div>
348 <button
349 title="Toggle File Browser"
350 class="filebrowser-toggle"
351 onClick={() => setShowFileBrowser((prev) => !prev)}
352 >
353 {showFileBrowser() ? <OpenFolderSVG /> : <ClosedFolderSVG forButton={true} />}
354 </button>
355 <button title="Manage Downloads" onClick={() => setShowDownloadManager(true)}>
356 <DownloadManagerSVG />
357 </button>
358 <button title="Manage playlists" onClick={() => setShowPlaylistManager(true)}>
359 <PlaylistSVG />
360 </button>
361 <button
362 title="Toggle Fullscreen"
363 onClick={() =>
364 document.fullscreenElement
365 ? document.exitFullscreen()
366 : document.documentElement.requestFullscreen({ navigationUI: "hide" })
367 }
368 >
369 <FullscreenSVG />
370 </button>
371 <button title="Settings" onClick={() => setShowOptions(true)}>
372 <CogSVG />
373 </button>
374 </div>
375 </div>
376 </div>
377
378 <div class="main-content">
379 <FileBrowser
380 breadcrumbs={breadcrumbs}
381 currentDir={currentDir}
382 setCurrentDir={setCurrentDir}
383 playTrack={playTrack}
384 playlist={playlist}
385 setPlaylist={setPlaylist}
386 showFileBrowser={showFileBrowser}
387 setShowFileBrowser={setShowFileBrowser}
388 options={options}
389 isOffline={isOffline}
390 files={files}
391 fetchFiles={fetchFiles}
392 />
393
394 <Playlist
395 playlist={playlist}
396 setPlaylist={setPlaylist}
397 playerState={playerState}
398 setPlayerState={setPlayerState}
399 playTrack={playTrack}
400 playNext={playNext}
401 audioElement={audioElement}
402 options={options}
403 fetchFiles={fetchFiles}
404 />
405 </div>
406
407 <audio ref={audioElement} preload="auto" />
408
409 <PlayerControls
410 playerState={playerState}
411 setPlayerState={setPlayerState}
412 togglePlay={togglePlay}
413 playPrevious={playPrevious}
414 playNext={playNext}
415 isShuffled={isShuffled}
416 setShuffled={setShuffled}
417 isRepeated={isRepeated}
418 setRepeated={setRepeated}
419 audioElement={audioElement}
420 options={options}
421 />
422
423 <OptionsModal
424 showOptions={showOptions}
425 setShowOptions={setShowOptions}
426 options={options}
427 setOptions={setOptions}
428 />
429
430 <PlaylistManager
431 showPlaylistManager={showPlaylistManager}
432 setShowPlaylistManager={setShowPlaylistManager}
433 playlist={playlist}
434 setPlaylist={setPlaylist}
435 playTrack={playTrack}
436 />
437 <DownloadManager showDownloadManager={showDownloadManager} setShowDownloadManager={setShowDownloadManager} />
438 </div>
439 );
440};
441
442export default App;
443