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