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