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