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, FileDisplay } 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 LoginSVG,
13 OpenFolderSVG,
14 PlaylistSVG,
15} from "./components/SVG";
16import { formatFilename, LocalStorageValues, toast } from "./utils";
17import Playlist from "./components/Playlist";
18import { getCover, getSrc, listFiles } from "./offline";
19import { type Directory, type MediaFile, MediaFormat } from "music-server-shared/types";
20import PlaylistManager from "./components/PlaylistManager";
21import { BUILD_HASH } from "./build-info";
22import { createStore, reconcile } from "solid-js/store";
23import { decodePath, encodePath } from "music-server-shared/utils";
24import DownloadManager from "./components/DownloadManager";
25import { SignIn } from "./components/SignIn";
26
27//TODO: add bitrate+format to metadata
28//TODO: more file display options
29//TODO: keep synced-aborted in downloadmanager
30//TODO: bypass music-metadata if it fails
31//TODO: Add documentation to functions
32//TODO: allow syncing playlists to server
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 [showSignIn, setShowSignIn] = createSignal(false);
56 const [options, setOptions] = createStore<AppOptions>({
57 //default settings
58 enableTranscoding: true,
59 disableChunkedTranscoding: false,
60 bitrate: 128000,
61 format: MediaFormat["opus/webm"],
62 maxTranscodes: 4,
63 maxDownloads: 2,
64 transcodeCovers: false,
65
66 hideVolume: false,
67 hideCover: false,
68 hidePlaylistCover: false,
69 fontResolution: 12,
70 filebrowserDisplay: FileDisplay.TRACKNO_TITLE,
71 playlistDisplay: FileDisplay.TRACKNO_TITLE,
72 controlsDisplay: FileDisplay.TITLE,
73 progressBarHeight: 10,
74
75 useMSE: "MediaSource" in window,
76 rememberDir: false,
77 duplicateWarning: true,
78 });
79 const [breadcrumbs, setBreadcrumbs] = createSignal<string[]>([]);
80 const [isShuffled, setShuffled] = createSignal(false);
81 const [isRepeated, setRepeated] = createSignal(false);
82 const [isOffline, setOffline] = createSignal(true);
83 const [files, fetchFiles] = createResource<FlatFileListing, { dir: string; offline: boolean }>(
84 () => ({ dir: currentDir(), offline: isOffline() }),
85 async (args) => {
86 return Array.from(await listFiles(args.dir, args.offline, false));
87 },
88 { initialValue: [] },
89 );
90
91 createEffect(() => {
92 const parts = currentDir().split("/").filter(Boolean);
93 setBreadcrumbs(["root", ...parts]);
94 // Update URL fragment when directory changes
95 window.location.hash = encodePath(currentDir());
96 });
97
98 createEffect(
99 on(currentDir, () => {
100 setShowFileBrowser(true);
101 }),
102 );
103
104 createEffect(() => {
105 const new_font = new FontFace(
106 "ark-latin",
107 `url(assets/ark-pixel-${options.fontResolution}px-proportional-latin.woff2) format(woff2)`,
108 );
109 document.fonts.clear();
110 document.fonts.add(new_font);
111 });
112
113 function stopPlaying() {
114 batch(() => {
115 setPlayerState("isPlaying", false);
116 setPlayerState("currentTime", 0);
117 setPlayerState("currentTrack", null);
118 });
119 audioElement.pause();
120 if (audioElement.src.startsWith("blob:")) URL.revokeObjectURL(audioElement.src);
121 audioElement.srcObject = null;
122 }
123
124 createEffect(
125 on(playlist, () => {
126 if (playlist().length === 0) {
127 stopPlaying();
128 }
129 }),
130 );
131
132 if ("mediaSession" in navigator) {
133 createEffect(async () => {
134 if (!playerState.currentTrack) {
135 navigator.mediaSession.metadata = new MediaMetadata();
136 navigator.mediaSession.setActionHandler("pause", null);
137 navigator.mediaSession.setActionHandler("play", null);
138 navigator.mediaSession.setActionHandler("stop", null);
139 navigator.mediaSession.setActionHandler("previoustrack", null);
140 navigator.mediaSession.setActionHandler("nexttrack", null);
141 return;
142 }
143 const oldSrc = navigator.mediaSession.metadata?.artwork[0]?.src ?? "";
144 if (oldSrc.startsWith("blob:")) URL.revokeObjectURL(oldSrc);
145 const artwork = await getCover(playerState.currentTrack.path, options, false, isOffline());
146 navigator.mediaSession.metadata = new MediaMetadata({
147 title: formatFilename(playerState.currentTrack, options.controlsDisplay),
148 album: playerState.currentTrack.metadata.album,
149 artist: playerState.currentTrack.metadata.artist,
150 artwork: [
151 {
152 src: artwork ?? "",
153 },
154 ],
155 });
156
157 navigator.mediaSession.setActionHandler("nexttrack", playNext);
158 navigator.mediaSession.setActionHandler("previoustrack", playPrevious);
159 navigator.mediaSession.setActionHandler("stop", stopPlaying);
160 });
161 createEffect(() => {
162 if (!playerState.currentTrack) {
163 navigator.mediaSession.setActionHandler("pause", null);
164 navigator.mediaSession.setActionHandler("play", null);
165 return;
166 }
167 if (playerState.isPlaying) {
168 navigator.mediaSession.setActionHandler("pause", togglePlay);
169 navigator.mediaSession.setActionHandler("play", null);
170 } else {
171 navigator.mediaSession.setActionHandler("pause", null);
172 navigator.mediaSession.setActionHandler("play", togglePlay);
173 }
174 });
175 }
176
177 let audioElement!: HTMLAudioElement;
178
179 function handlePlayerError(e: unknown) {
180 if (e instanceof Error && e.name === "AbortError") return;
181 if (e instanceof Error && e.name === "NotSupportedError") {
182 toast(
183 "Playing track failed: Format not supported, check if the server is up when playing a remote file, or change your transcoding settings",
184 "error",
185 );
186 } else {
187 toast("Playing track failed", "error", e);
188 }
189 }
190
191 let mediaSource: MediaSource | null = null;
192
193 function getMSEUrl(srcUrl: string, mimeType: string, offsetSeconds: number) {
194 if (!MediaSource.isTypeSupported(mimeType)) return null;
195 mediaSource = new MediaSource();
196 const thisMediaSource = mediaSource;
197 mediaSource.addEventListener("sourceopen", async () => {
198 if (!thisMediaSource) return;
199
200 const sourceBuffer = thisMediaSource.addSourceBuffer(mimeType);
201 sourceBuffer.timestampOffset = offsetSeconds;
202
203 try {
204 const response = await fetch(srcUrl, { credentials: "same-origin" });
205 if (!response.ok || !response.body) throw new Error("Failed to fetch stream");
206 const reader = response.body.getReader();
207
208 while (true) {
209 const { done, value } = await reader.read();
210 if (done) break;
211 const push = () => {
212 // If buffer updating, wait
213 if (sourceBuffer.updating) {
214 sourceBuffer.addEventListener("updateend", push, { once: true });
215 return;
216 }
217 if (thisMediaSource.readyState !== "open") return;
218 // thisMediaSource.duration = 100;
219 sourceBuffer.appendBuffer(value.slice(0).buffer);
220 };
221 push();
222 }
223 if (sourceBuffer.updating) {
224 sourceBuffer.addEventListener(
225 "updateend",
226 () => {
227 try {
228 thisMediaSource.endOfStream();
229 } catch {}
230 },
231 { once: true },
232 );
233 } else {
234 try {
235 thisMediaSource.endOfStream();
236 } catch {}
237 }
238 } catch (error) {
239 console.error(error);
240 try {
241 thisMediaSource.endOfStream();
242 } catch {}
243 }
244 });
245 return URL.createObjectURL(thisMediaSource);
246 }
247
248 // Play a track from the playlist
249 async function playTrack(track: PlaylistItem, seekTo?: number) {
250 try {
251 const src = await getSrc(track.path, options, isOffline(), seekTo || 0);
252 if (!src) return;
253 //Cleanup
254 if (audioElement.src.startsWith("blob:")) URL.revokeObjectURL(audioElement.src);
255 if (mediaSource) {
256 try {
257 mediaSource.endOfStream();
258 mediaSource = null;
259 } catch {}
260 }
261
262 //need both of these lines to work without logging an error
263 //just removeAttribute doesn't work at all
264 //just srcObject = null works, but logs a weird csp error
265 audioElement.removeAttribute("src");
266 audioElement.srcObject = null;
267 //TODO: get correct mimetype
268 const mseURL =
269 options.enableTranscoding && options.useMSE && !src.startsWith("blob:")
270 ? getMSEUrl(src, 'audio/webm; codecs="opus"', seekTo || 0)
271 : null;
272 audioElement.src = mseURL || src;
273 audioElement.currentTime = (mseURL && seekTo) || 0;
274 batch(() => {
275 setPlayerState("isPlaying", true);
276 setPlayerState("currentTime", audioElement.currentTime);
277 setPlayerState("buffered", []);
278 //clone, otherwise it shares the reference
279 setPlayerState("currentTrack", { ...track });
280 setPlayerState("waitingForStart", true);
281 });
282
283 await audioElement.play();
284 } catch (e) {
285 setPlayerState("isPlaying", false);
286 handlePlayerError(e);
287 }
288 }
289
290 // Play next track
291 function playNext() {
292 const currentTrack = playerState.currentTrack;
293 if (!currentTrack) return;
294
295 let nextTrack: PlaylistItem | null = null;
296
297 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
298 if (isShuffled()) {
299 // Pick a different random track
300 if (playlist().length > 1) {
301 const otherTracks = playlist().filter((_, idx) => idx !== currentIndex);
302 nextTrack = otherTracks[Math.floor(Math.random() * otherTracks.length)];
303 } else {
304 nextTrack = isRepeated() ? currentTrack : null;
305 }
306 } else if (currentIndex >= 0 && currentIndex < playlist().length - 1) {
307 nextTrack = playlist()[currentIndex + 1];
308 } else if (isRepeated()) {
309 nextTrack = playlist()[0];
310 }
311 if (nextTrack) {
312 playTrack(nextTrack);
313 } else {
314 stopPlaying();
315 }
316 }
317
318 // Play previous track
319 function playPrevious() {
320 const currentTrack = playerState.currentTrack;
321 if (!currentTrack) return;
322 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
323 if (currentIndex > 0) playTrack(playlist()[currentIndex - 1]);
324 }
325
326 // Toggle play/pause
327 function togglePlay() {
328 if (playerState.currentTrack === null) return;
329 const newIsPlaying = !playerState.isPlaying;
330 setPlayerState("isPlaying", newIsPlaying);
331
332 if (newIsPlaying) {
333 setPlayerState("waitingForStart", true);
334 audioElement
335 .play()
336 .catch((e) => {
337 setPlayerState("isPlaying", false);
338 setPlayerState("currentTime", 0);
339 handlePlayerError(e);
340 })
341 .finally(() => {
342 setPlayerState("waitingForStart", false);
343 });
344 } else {
345 audioElement.pause();
346 }
347 }
348
349 function timeRangesToArray(timeRanges: TimeRanges) {
350 const result = [];
351 for (let i = 0; i < timeRanges.length; i++) {
352 result.push({
353 start: timeRanges.start(i),
354 end: timeRanges.end(i),
355 });
356 }
357 return result;
358 }
359
360 function updateTime() {
361 setPlayerState("currentTime", audioElement.currentTime);
362 //also call updateProgress here, because some browsers send the "progress" events too slow
363 updateProgress()
364 }
365 function updateProgress() {
366 setPlayerState("buffered", reconcile(timeRangesToArray(audioElement.buffered)));
367 }
368
369 // Initialize app
370 onMount(async () => {
371 // Load from localStorage
372 try {
373 const savedOptions = localStorage.getItem(LocalStorageValues.options);
374 if (savedOptions) {
375 //keep default settings when no override exists
376 setOptions({ ...options, ...JSON.parse(savedOptions) });
377 }
378 const savedVolume = Number.parseFloat(localStorage.getItem(LocalStorageValues.volume) ?? "");
379 if (savedVolume && !Number.isNaN(savedVolume)) {
380 setPlayerState("volume", savedVolume);
381 }
382 const savedPlaylist = localStorage.getItem(LocalStorageValues.playlist);
383 if (savedPlaylist) {
384 setPlaylist(JSON.parse(savedPlaylist));
385 }
386 const savedShuffle = localStorage.getItem(LocalStorageValues.shuffle);
387 setShuffled(savedShuffle === "true");
388 const savedRepeat = localStorage.getItem(LocalStorageValues.repeat);
389 setRepeated(savedRepeat === "true");
390 const savedOffline = localStorage.getItem(LocalStorageValues.offline);
391 setOffline(savedOffline === "true");
392 const savedPath = localStorage.getItem(LocalStorageValues.path);
393 if (options.rememberDir && savedPath !== null && !window.location.hash) {
394 setCurrentDir(savedPath);
395 }
396 } catch (e) {
397 toast("loading values from localStorage failed", "error", e);
398 localStorage.clear();
399 }
400 // Sync to localStorage
401 createEffect(() => localStorage.setItem(LocalStorageValues.options, JSON.stringify(options)));
402 createEffect(() => localStorage.setItem(LocalStorageValues.volume, playerState.volume.toString()));
403 createEffect(() => localStorage.setItem(LocalStorageValues.playlist, JSON.stringify(playlist())));
404 createEffect(() => localStorage.setItem(LocalStorageValues.shuffle, isShuffled().toString()));
405 createEffect(() => localStorage.setItem(LocalStorageValues.repeat, isRepeated().toString()));
406 createEffect(() => localStorage.setItem(LocalStorageValues.path, currentDir()));
407 createEffect(() => localStorage.setItem(LocalStorageValues.offline, isOffline().toString()));
408
409 // Set initial audio element volume
410 audioElement.volume = playerState.volume;
411
412 // Set up audio element event handlers
413 audioElement.addEventListener("ended", playNext);
414 audioElement.addEventListener("timeupdate", updateTime);
415 audioElement.addEventListener("progress", updateProgress);
416 audioElement.addEventListener("pause", () => setPlayerState("isPlaying", false));
417 audioElement.addEventListener("play", () => setPlayerState("isPlaying", true));
418 audioElement.addEventListener("volumechange", () => setPlayerState("volume", audioElement.volume));
419 audioElement.addEventListener("canplay", () => setPlayerState("waitingForStart", false));
420
421 window.addEventListener("hashchange", () => {
422 setCurrentDir(decodePath(window.location.hash.slice(1)));
423 });
424
425 document.addEventListener("keydown", (e) => {
426 const activeElementTag = document.activeElement?.tagName.toLowerCase();
427 if (activeElementTag === "input") {
428 return;
429 }
430 if (e.key === " ") {
431 togglePlay();
432 e.preventDefault();
433 }
434 });
435 });
436
437 createEffect(() => {
438 audioElement.volume = playerState.volume;
439 audioElement.playbackRate = playerState.rate;
440 });
441
442 return (
443 <div class="app-container">
444 <div class="app-header">
445 <div style={{ "min-width": 0 }}>
446 <div class="title">Pico Pixel Player</div>
447 <sub style={{ display: "block", "line-height": "1em" }}>{BUILD_HASH}</sub>
448 </div>
449
450 <div class="spacer" />
451 <div class="app-buttons">
452 <div class="signin-offline-group">
453 <SignIn showSignIn={showSignIn} setShowSignIn={setShowSignIn} />
454 <button
455 style={{ display: isOffline() ? "none" : undefined }}
456 title="Sign in"
457 onclick={() => setShowSignIn(true)}
458 >
459 <LoginSVG />
460 </button>
461
462 <button
463 title="Switch between online and offline mode. In offline mode only locally cached files are listed"
464 class="offline-button"
465 style={{ background: isOffline() ? "lightgreen" : "indianred" }}
466 textContent={isOffline() ? "Go online" : "Go offline"}
467 onclick={() => setOffline(!isOffline())}
468 />
469 </div>
470 <div>
471 <button
472 title="Toggle File Browser"
473 class="filebrowser-toggle"
474 onClick={() => setShowFileBrowser((prev) => !prev)}
475 >
476 {showFileBrowser() ? <OpenFolderSVG /> : <ClosedFolderSVG forButton={true} />}
477 </button>
478 <button title="Manage Downloads" onClick={() => setShowDownloadManager(true)}>
479 <DownloadManagerSVG />
480 </button>
481 <button title="Manage playlists" onClick={() => setShowPlaylistManager(true)}>
482 <PlaylistSVG />
483 </button>
484 <button
485 title="Toggle Fullscreen"
486 onClick={() =>
487 document.fullscreenElement
488 ? document.exitFullscreen()
489 : document.documentElement.requestFullscreen({ navigationUI: "hide" })
490 }
491 >
492 <FullscreenSVG />
493 </button>
494 <button title="Settings" onClick={() => setShowOptions(true)}>
495 <CogSVG />
496 </button>
497 </div>
498 </div>
499 </div>
500
501 <div class="main-content">
502 <FileBrowser
503 breadcrumbs={breadcrumbs}
504 currentDir={currentDir}
505 setCurrentDir={setCurrentDir}
506 playTrack={playTrack}
507 playlist={playlist}
508 setPlaylist={setPlaylist}
509 showFileBrowser={showFileBrowser}
510 setShowFileBrowser={setShowFileBrowser}
511 options={options}
512 isOffline={isOffline}
513 files={files}
514 fetchFiles={fetchFiles}
515 />
516
517 <Playlist
518 playlist={playlist}
519 setPlaylist={setPlaylist}
520 playerState={playerState}
521 setPlayerState={setPlayerState}
522 playTrack={playTrack}
523 playNext={playNext}
524 audioElement={audioElement}
525 options={options}
526 fetchFiles={fetchFiles}
527 isOffline={isOffline}
528 />
529 </div>
530
531 <audio ref={audioElement} preload="auto" />
532
533 <PlayerControls
534 playerState={playerState}
535 setPlayerState={setPlayerState}
536 togglePlay={togglePlay}
537 playPrevious={playPrevious}
538 playNext={playNext}
539 isShuffled={isShuffled}
540 setShuffled={setShuffled}
541 isRepeated={isRepeated}
542 setRepeated={setRepeated}
543 audioElement={audioElement}
544 isMSE={() => mediaSource !== null}
545 seekTo={(seekTo: number) => playerState.currentTrack && playTrack(playerState.currentTrack, seekTo)}
546 options={options}
547 />
548
549 <OptionsModal
550 showOptions={showOptions}
551 setShowOptions={setShowOptions}
552 options={options}
553 setOptions={setOptions}
554 />
555
556 <PlaylistManager
557 showPlaylistManager={showPlaylistManager}
558 setShowPlaylistManager={setShowPlaylistManager}
559 playlist={playlist}
560 setPlaylist={setPlaylist}
561 playTrack={playTrack}
562 options={options}
563 />
564 <DownloadManager showDownloadManager={showDownloadManager} setShowDownloadManager={setShowDownloadManager} />
565 </div>
566 );
567};
568
569export default App;
570