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