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