pico-pixel-player

pico-pixel-player/webclient/src/App.tsx
App.tsx
⎇
Raw
1import {
2 AudioCodec,
3 type Directory,
4 MediaContainer,
5 type MediaFile,
6 VideoCodec,
7 VideoEncodingSetting,
8} from "music-server-shared/types";
9import { createRFC6381String, decodePath, encodePath } from "music-server-shared/utils";
10import type { Component } from "solid-js";
11import { batch, createEffect, createResource, createSignal, on, onMount, Show } from "solid-js";
12import { createStore, reconcile } from "solid-js/store";
13import { BUILD_HASH } from "./build-info";
14import DownloadManager from "./components/DownloadManager";
15import FileBrowser from "./components/FileBrowser";
16import OptionsModal from "./components/OptionsModal";
17import PlayerControls from "./components/PlayerControls";
18import Playlist from "./components/Playlist";
19import PlaylistManager from "./components/PlaylistManager";
20import { SignIn } from "./components/SignIn";
21import {
22 ClosedFolderSVG,
23 CogSVG,
24 DownloadManagerSVG,
25 FullscreenSVG,
26 LoginSVG,
27 LogoutSVG,
28 OpenFolderSVG,
29 PlaylistSVG,
30} from "./components/SVG";
31import { getCover, getSrc, listFiles } from "./offline";
32import { type AppOptions, FileDisplay, type PlayerState, type PlaylistItem } from "./types";
33import { formatFilename, handleUnauthorized, LocalStorageValues, setUnauthorizedHandler, toast } from "./utils";
34
35//TODO: bypass music-metadata if it fails, maybe only use for fallback for files with weird encodings
36//TODO: more file display options
37//TODO: keep synced-aborted in downloadmanager
38//TODO: Add documentation to functions
39//TODO: allow syncing playlists to server
40//TODO: video support
41//TODO: virtual rendering for playlist
42//TODO: custom serialization?
43
44export type FlatFileListing = [string, Directory | MediaFile][];
45
46const App: Component = () => {
47 const [showFileBrowser, setShowFileBrowser] = createSignal(false);
48 const [currentDir, setCurrentDir] = createSignal(decodePath(window.location.hash.slice(1)));
49 const [playlist, setPlaylist] = createSignal<PlaylistItem[]>([]);
50 const [playerState, setPlayerState] = createStore<PlayerState>({
51 isPlaying: false,
52 currentTrack: null,
53 currentTime: 0,
54 volume: 0.5,
55 buffered: [],
56 rate: 1,
57 waitingForStart: false,
58 });
59 const [showOptions, setShowOptions] = createSignal(false);
60 const [showPlaylistManager, setShowPlaylistManager] = createSignal(false);
61 const [showDownloadManager, setShowDownloadManager] = createSignal(false);
62 const [showSignIn, setShowSignIn] = createSignal(false);
63 const [authRequired, setAuthRequired] = createSignal(false);
64 const [loggedIn, setLoggedIn] = createSignal(false);
65 const [options, setOptions] = createStore<AppOptions>({
66 //default settings
67 enableTranscoding: true,
68 languages: "",
69 disableChunkedTranscoding: false,
70 maxTranscodes: 4,
71 maxDownloads: 2,
72 transcodeCovers: false,
73
74 hideVolume: false,
75 hideCover: false,
76 hidePlaylistCover: false,
77 fontResolution: 12,
78 filebrowserDisplay: FileDisplay.TRACKNO_TITLE,
79 playlistDisplay: FileDisplay.TRACKNO_TITLE,
80 controlsDisplay: FileDisplay.TITLE,
81 progressBarHeight: 10,
82
83 useMSE: "MediaSource" in window,
84 rememberDir: false,
85 duplicateWarning: true,
86
87 videoSettings: {
88 container: MediaContainer.mp4,
89 videoCodec: VideoCodec.av1,
90 videoBitrate: 8000000, //8mbit
91 videoEncodingSetting: VideoEncodingSetting.fast,
92 audioCodec: AudioCodec.opus,
93 audioBitrate: 128000, //128kbit
94 },
95
96 audioSettings: {
97 container: MediaContainer.webm,
98 audioBitrate: 128000, //128kbit
99 audioCodec: AudioCodec.opus,
100 },
101 });
102 const [breadcrumbs, setBreadcrumbs] = createSignal<string[]>([]);
103 const [isShuffled, setShuffled] = createSignal(false);
104 const [isRepeated, setRepeated] = createSignal(false);
105 const [isOffline, setOffline] = createSignal(true);
106 const [files, fetchFiles] = createResource<FlatFileListing, { dir: string; offline: boolean }>(
107 () => ({ dir: currentDir(), offline: isOffline() }),
108 async (args) => {
109 return Array.from(await listFiles(args.dir, args.offline, false));
110 },
111 { initialValue: [] },
112 );
113 const [videoShown, setVideoShown] = createSignal(false);
114
115 async function refreshAuthStatus() {
116 try {
117 const res = await fetch("/auth/status", { credentials: "same-origin" });
118 if (!res.ok) return;
119 const status = (await res.json()) as { authRequired: boolean; loggedIn: boolean };
120 setAuthRequired(status.authRequired);
121 setLoggedIn(status.loggedIn);
122 } catch {
123 //server unreachable (e.g. offline) - leave the last known state untouched
124 }
125 }
126
127 async function doLogout() {
128 const res = await fetch("/logout", { method: "POST", credentials: "same-origin" }).catch(() => {});
129 if (res?.ok) {
130 setLoggedIn(false);
131 toast("Signed out", "success");
132 } else {
133 toast("Sign out failed", "error");
134 }
135 }
136
137 //a 401 from any request means the session is no longer valid
138 setUnauthorizedHandler(() => setLoggedIn(false));
139
140 //re-check auth whenever we (re)enter online mode
141 createEffect(() => {
142 if (!isOffline()) refreshAuthStatus();
143 });
144
145 createEffect(() => {
146 const parts = currentDir().split("/").filter(Boolean);
147 setBreadcrumbs(["root", ...parts]);
148 // Update URL fragment when directory changes
149 window.location.hash = encodePath(currentDir());
150 });
151
152 createEffect(
153 on(currentDir, () => {
154 setShowFileBrowser(true);
155 }),
156 );
157
158 createEffect(() => {
159 const new_font = new FontFace(
160 "ark-latin",
161 `url(assets/ark-pixel-${options.fontResolution}px-proportional-latin.woff2) format(woff2)`,
162 );
163 document.fonts.clear();
164 document.fonts.add(new_font);
165 });
166
167 createEffect(() => {
168 videoElement.style.display = videoShown() ? "block" : "none";
169 });
170
171 //incremented on every playTrack call so a slow/older invocation can detect it has been superseded
172 //and bail before clobbering the newer track's state
173 let playGeneration = 0;
174
175 function stopPlaying() {
176 //invalidate any in-flight playTrack so a stale invocation bails instead of restarting playback
177 playGeneration++;
178 batch(() => {
179 setPlayerState("isPlaying", false);
180 setPlayerState("currentTime", 0);
181 setPlayerState("currentTrack", null);
182 setPlayerState("waitingForStart", false);
183 });
184 videoElement.pause();
185
186 //tear down any in-flight MSE stream, otherwise the fetch + server-side ffmpeg transcode keeps running
187 mediaSourceAbortController?.abort();
188 mediaSourceAbortController = null;
189 if (mediaSource) {
190 try {
191 mediaSource.endOfStream();
192 } catch {}
193 mediaSource = null;
194 }
195
196 if (videoElement.src.startsWith("blob:")) URL.revokeObjectURL(videoElement.src);
197 //remove the src before clearing srcObject, otherwise the media load algorithm
198 //re-fetches the just-revoked blob url and parks the element in an error state
199 videoElement.removeAttribute("src");
200 videoElement.srcObject = null;
201 }
202
203 createEffect(
204 on(playlist, () => {
205 if (playlist().length === 0) {
206 stopPlaying();
207 }
208 }),
209 );
210
211 if ("mediaSession" in navigator) {
212 createEffect(async () => {
213 //revoked before the early return as well, otherwise the last track's artwork leaks on every stop
214 const oldSrc = navigator.mediaSession.metadata?.artwork[0]?.src ?? "";
215 if (oldSrc.startsWith("blob:")) URL.revokeObjectURL(oldSrc);
216 if (!playerState.currentTrack) {
217 navigator.mediaSession.metadata = new MediaMetadata();
218 navigator.mediaSession.setActionHandler("pause", null);
219 navigator.mediaSession.setActionHandler("play", null);
220 navigator.mediaSession.setActionHandler("stop", null);
221 navigator.mediaSession.setActionHandler("previoustrack", null);
222 navigator.mediaSession.setActionHandler("nexttrack", null);
223 return;
224 }
225 const artwork = await getCover(playerState.currentTrack.path, options, false, isOffline());
226 navigator.mediaSession.metadata = new MediaMetadata({
227 title: formatFilename(playerState.currentTrack, options.controlsDisplay),
228 album: playerState.currentTrack.metadata.album,
229 artist: playerState.currentTrack.metadata.artist,
230 artwork: [
231 {
232 src: artwork ?? "",
233 },
234 ],
235 });
236
237 navigator.mediaSession.setActionHandler("nexttrack", playNext);
238 navigator.mediaSession.setActionHandler("previoustrack", playPrevious);
239 navigator.mediaSession.setActionHandler("stop", stopPlaying);
240 });
241 createEffect(() => {
242 if (!playerState.currentTrack) {
243 navigator.mediaSession.setActionHandler("pause", null);
244 navigator.mediaSession.setActionHandler("play", null);
245 return;
246 }
247 if (playerState.isPlaying) {
248 navigator.mediaSession.setActionHandler("pause", togglePlay);
249 navigator.mediaSession.setActionHandler("play", null);
250 } else {
251 navigator.mediaSession.setActionHandler("pause", null);
252 navigator.mediaSession.setActionHandler("play", togglePlay);
253 }
254 });
255 }
256
257 let videoElement!: HTMLVideoElement;
258
259 function handlePlayerError(e: unknown) {
260 if (e instanceof Error && e.name === "AbortError") return;
261 if (e instanceof Error && e.name === "NotSupportedError") {
262 console.error(e);
263 toast(
264 "Playing track failed: Format not supported, check if the server is up when playing a remote file, or change your transcoding settings",
265 "error",
266 );
267 } else {
268 toast("Playing track failed", "error", e);
269 }
270 }
271
272 let mediaSource: MediaSource | null = null;
273 let mediaSourceAbortController: AbortController | null = null;
274 async function getMSEUrl(srcUrl: string, offsetSeconds: number, isVideo: boolean) {
275 let mimeType: string;
276 if (isVideo) {
277 mimeType = createRFC6381String(
278 options.videoSettings.container,
279 options.videoSettings.videoCodec,
280 options.videoSettings.audioCodec,
281 );
282 } else {
283 mimeType = createRFC6381String(
284 options.audioSettings.container,
285 VideoCodec.none,
286 options.audioSettings.audioCodec,
287 );
288 }
289
290 if (!MediaSource.isTypeSupported(mimeType)) return null;
291 mediaSource = new MediaSource();
292 const thisMediaSource = mediaSource;
293 const onSourceOpen = async () => {
294 if (!thisMediaSource) return;
295
296 const sourceBuffer = thisMediaSource.addSourceBuffer(mimeType);
297 thisMediaSource.duration = playerState.currentTrack?.metadata.duration || 0;
298 sourceBuffer.mode = "sequence";
299 sourceBuffer.timestampOffset = offsetSeconds;
300
301 try {
302 mediaSourceAbortController = new AbortController();
303 const signal = mediaSourceAbortController.signal;
304 const response = await fetch(srcUrl, { credentials: "same-origin", signal });
305 if (handleUnauthorized(response)) return;
306 if (!response.ok || !response.body) throw new Error("Failed to fetch stream");
307 const reader = response.body.getReader();
308
309 function waitUntilUpdateDone() {
310 return new Promise((resolve) => {
311 if (!sourceBuffer.updating) return resolve(undefined);
312 sourceBuffer.addEventListener("updateend", resolve, { once: true });
313 });
314 }
315
316 //wait until playback time is progressed far enough to appending to the buffer again
317 //keep only 30 seconds of buffer ahead
318 function waitForBufferLimit() {
319 return new Promise((resolve) => {
320 //shared cleanup so whichever of timeupdate/abort fires first removes both listeners
321 const cleanup = () => {
322 videoElement.removeEventListener("timeupdate", cb);
323 signal.removeEventListener("abort", onAbort);
324 };
325 //after stopPlaying pauses the element, timeupdate never fires again, so also resolve on abort
326 //to avoid parking the append loop forever holding the reader/SourceBuffer
327 const onAbort = () => {
328 cleanup();
329 resolve(undefined);
330 };
331 const cb = () => {
332 try {
333 if (
334 sourceBuffer.buffered.length === 0 ||
335 sourceBuffer.buffered.end(0) - videoElement.currentTime < 30
336 ) {
337 cleanup();
338 resolve(undefined);
339 return true;
340 }
341 return false;
342 } catch (_e) {
343 cleanup();
344 resolve(undefined);
345 }
346 };
347 //if already aborted, don't wait for a timeupdate that will never come
348 if (signal.aborted) {
349 resolve(undefined);
350 return;
351 }
352 //check once immediately before starting the event listener
353 if (!cb()) {
354 videoElement.addEventListener("timeupdate", cb);
355 signal.addEventListener("abort", onAbort, { once: true });
356 }
357 });
358 }
359
360 async function saveUpdate(action: () => void) {
361 while (true) {
362 // bail if the stream is gone or the media element entered a fatal error state:
363 // when videoElement.error is set the MediaSource stays "open" but every
364 // appendBuffer throws InvalidStateError, which would otherwise spin forever
365 if (thisMediaSource.readyState !== "open" || videoElement.error) return;
366 try {
367 await waitUntilUpdateDone();
368 action();
369 return;
370 } catch (e) {
371 if (!(e instanceof Error && e.name === "InvalidStateError")) throw e;
372 // an InvalidStateError while we are not updating is unrecoverable
373 // (e.g. element error / detached buffer) - don't retry into an infinite loop
374 if (!sourceBuffer.updating) return;
375 }
376 }
377 }
378
379 while (true) {
380 const { done, value } = await reader.read();
381 if (done || thisMediaSource.readyState !== "open") {
382 //release the connection (and the server-side ffmpeg transcode) when we stop early
383 if (!done) reader.cancel().catch(() => {});
384 break;
385 }
386
387 const CHUNK_SIZE = 1000000; // 1MB chunks
388 for (let offset = 0; offset < value.length; offset += CHUNK_SIZE) {
389 const chunk = value.slice(offset, offset + CHUNK_SIZE);
390 await saveUpdate(() => sourceBuffer.appendBuffer(chunk));
391
392 //keep last 20 seconds of buffer
393 await saveUpdate(() => {
394 if (sourceBuffer.buffered.length > 0 && videoElement.currentTime - sourceBuffer.buffered.start(0) > 20) {
395 return sourceBuffer.remove(0, videoElement.currentTime - 20);
396 }
397 });
398 await waitForBufferLimit();
399 }
400 }
401 // Wait for buffer to finish updating
402 await waitUntilUpdateDone();
403 } catch (error) {
404 if (!(error instanceof Error && error.name === "AbortError")) {
405 console.error(error);
406 }
407 } finally {
408 try {
409 thisMediaSource.endOfStream();
410 } catch {}
411 }
412 };
413 //once:true - a single MediaSource must only run one sourceopen handler
414 mediaSource.addEventListener("sourceopen", onSourceOpen, { once: true });
415 return URL.createObjectURL(thisMediaSource);
416 }
417
418 //without this, seeking via mse will cause an infinite loop
419 let ignoreSeek = false;
420 // Play a track from the playlist
421 async function playTrack(track: PlaylistItem, seekTo?: number) {
422 const generation = ++playGeneration;
423 try {
424 const srcResult = await getSrc(track.path, track.metadata, options, isOffline(), seekTo || 0);
425 //undefined means offline and not cached, getSrc already explained that via toast
426 if (!srcResult) return;
427 const { src, isVideo } = srcResult;
428 if (generation !== playGeneration) {
429 //superseded while getSrc ran: for a synced file it already minted a blob url that
430 //nothing will ever assign to the element, so revoke it instead of leaking it
431 if (src.startsWith("blob:")) URL.revokeObjectURL(src);
432 return;
433 }
434 //Cleanup
435 if (videoElement.src.startsWith("blob:")) URL.revokeObjectURL(videoElement.src);
436 if (mediaSource) {
437 //without this abort, the old fetch keeps running and the old ffmpeg instance keeps transcoding
438 mediaSourceAbortController?.abort();
439 mediaSourceAbortController = null;
440 //null out before endOfStream: it throws when readyState isn't "open", which would
441 //otherwise leave a stale non-null mediaSource and make needMSESeek misfire on later tracks
442 const oldMediaSource = mediaSource;
443 mediaSource = null;
444 try {
445 oldMediaSource.endOfStream();
446 } catch {}
447 }
448
449 //need both of these lines to work without logging an error
450 //just removeAttribute doesn't work at all
451 //just srcObject = null works, but logs a weird csp error
452 videoElement.removeAttribute("src");
453 videoElement.srcObject = null;
454 const mseURL =
455 options.enableTranscoding && options.useMSE && !src.startsWith("blob:")
456 ? await getMSEUrl(src, seekTo || 0, isVideo === true)
457 : null;
458 if (generation !== playGeneration) {
459 //superseded while getMSEUrl ran: it created a detached MediaSource + object URL, but its
460 //sourceopen handler never fired (we never set videoElement.src), so no fetch/transcode was
461 //started and there's nothing to abort. Just revoke the URL and drop the now-stale module
462 //reference so a later needMSESeek can't misfire on it.
463 if (mseURL) {
464 URL.revokeObjectURL(mseURL);
465 mediaSource = null;
466 }
467 return;
468 }
469 setVideoShown(false);
470 videoElement.src = mseURL || src;
471 if (mseURL && seekTo) {
472 ignoreSeek = true;
473 videoElement.currentTime = seekTo;
474 }
475 batch(() => {
476 setPlayerState("isPlaying", true);
477 setPlayerState("currentTime", videoElement.currentTime);
478 setPlayerState("buffered", []);
479 //clone, otherwise it shares the reference
480 setPlayerState("currentTrack", { ...track });
481 setPlayerState("waitingForStart", true);
482 });
483
484 await videoElement.play();
485 } catch (e) {
486 setPlayerState("isPlaying", false);
487 handlePlayerError(e);
488 }
489 }
490
491 // Play next track
492 function playNext() {
493 const currentTrack = playerState.currentTrack;
494 if (!currentTrack) return;
495
496 let nextTrack: PlaylistItem | null = null;
497
498 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
499 if (isShuffled()) {
500 // Pick a different random track
501 if (playlist().length > 1) {
502 const otherTracks = playlist().filter((_, idx) => idx !== currentIndex);
503 nextTrack = otherTracks[Math.floor(Math.random() * otherTracks.length)];
504 } else {
505 nextTrack = isRepeated() ? currentTrack : null;
506 }
507 } else if (currentIndex >= 0 && currentIndex < playlist().length - 1) {
508 nextTrack = playlist()[currentIndex + 1];
509 } else if (isRepeated()) {
510 nextTrack = playlist()[0];
511 }
512 if (nextTrack) {
513 playTrack(nextTrack);
514 } else {
515 stopPlaying();
516 }
517 }
518
519 // Play previous track
520 function playPrevious() {
521 const currentTrack = playerState.currentTrack;
522 if (!currentTrack) return;
523 const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
524 if (currentIndex > 0) playTrack(playlist()[currentIndex - 1]);
525 }
526
527 // Toggle play/pause
528 function togglePlay() {
529 if (playerState.currentTrack === null) return;
530 const newIsPlaying = !playerState.isPlaying;
531 setPlayerState("isPlaying", newIsPlaying);
532
533 if (newIsPlaying) {
534 setPlayerState("waitingForStart", true);
535 videoElement
536 .play()
537 .catch((e) => {
538 setPlayerState("isPlaying", false);
539 setPlayerState("currentTime", 0);
540 handlePlayerError(e);
541 })
542 .finally(() => {
543 setPlayerState("waitingForStart", false);
544 });
545 } else {
546 videoElement.pause();
547 }
548 }
549
550 function timeRangesToArray(timeRanges: TimeRanges) {
551 const result = [];
552 for (let i = 0; i < timeRanges.length; i++) {
553 result.push({
554 start: timeRanges.start(i),
555 end: timeRanges.end(i),
556 });
557 }
558 return result;
559 }
560
561 function updateTime() {
562 setPlayerState("currentTime", videoElement.currentTime);
563 //also call updateProgress here, because some browsers send the "progress" events too slow
564 updateProgress();
565 }
566 function updateProgress() {
567 setPlayerState("buffered", reconcile(timeRangesToArray(videoElement.buffered)));
568 }
569
570 function needMSESeek(seekTo: number) {
571 function isInTimeRanges(timeRanges: TimeRanges, targetTime: number): boolean {
572 for (let i = 0; i < timeRanges.length; i++) {
573 if (targetTime >= timeRanges.start(i) && targetTime <= timeRanges.end(i)) {
574 return true;
575 }
576 }
577
578 // Special case: if seeking to exactly 0 and the first buffered range starts very close to 0
579 // (accounting for common MSE container overhead), treat it as within range
580 if (targetTime === 0 && timeRanges.length > 0 && timeRanges.start(0) < 0.1) {
581 return true;
582 }
583 return false;
584 }
585 return mediaSource !== null && !isInTimeRanges(videoElement.buffered, seekTo);
586 }
587
588 // Initialize app
589 onMount(async () => {
590 // Load from localStorage
591 try {
592 const savedOptions = localStorage.getItem(LocalStorageValues.options);
593 if (savedOptions) {
594 //keep default settings when no override exists
595 setOptions({ ...options, ...JSON.parse(savedOptions) });
596 }
597 const savedVolume = Number.parseFloat(localStorage.getItem(LocalStorageValues.volume) ?? "");
598 if (savedVolume && !Number.isNaN(savedVolume)) {
599 setPlayerState("volume", savedVolume);
600 }
601 const savedPlaylist = localStorage.getItem(LocalStorageValues.playlist);
602 if (savedPlaylist) {
603 setPlaylist(JSON.parse(savedPlaylist));
604 }
605 const savedShuffle = localStorage.getItem(LocalStorageValues.shuffle);
606 setShuffled(savedShuffle === "true");
607 const savedRepeat = localStorage.getItem(LocalStorageValues.repeat);
608 setRepeated(savedRepeat === "true");
609 const savedOffline = localStorage.getItem(LocalStorageValues.offline);
610 setOffline(savedOffline === "true");
611 const savedPath = localStorage.getItem(LocalStorageValues.path);
612 if (options.rememberDir && savedPath !== null && !window.location.hash) {
613 setCurrentDir(savedPath);
614 }
615 } catch (e) {
616 toast("loading values from localStorage failed", "error", e);
617 localStorage.clear();
618 }
619 // Sync to localStorage
620 createEffect(() => localStorage.setItem(LocalStorageValues.options, JSON.stringify(options)));
621 createEffect(() => localStorage.setItem(LocalStorageValues.volume, playerState.volume.toString()));
622 createEffect(() => {
623 //a large playlist can exceed the localStorage quota; swallow the error so it doesn't
624 //propagate out of the reactive flush and break every subsequent playlist update
625 try {
626 localStorage.setItem(LocalStorageValues.playlist, JSON.stringify(playlist()));
627 } catch (e) {
628 console.error("Persisting playlist to localStorage failed", e);
629 }
630 });
631 createEffect(() => localStorage.setItem(LocalStorageValues.shuffle, isShuffled().toString()));
632 createEffect(() => localStorage.setItem(LocalStorageValues.repeat, isRepeated().toString()));
633 createEffect(() => localStorage.setItem(LocalStorageValues.path, currentDir()));
634 createEffect(() => localStorage.setItem(LocalStorageValues.offline, isOffline().toString()));
635
636 // Set initial video element volume
637 videoElement.volume = playerState.volume;
638
639 // Set up video element event handlers
640 videoElement.addEventListener("ended", playNext);
641 videoElement.addEventListener("timeupdate", updateTime);
642 videoElement.addEventListener("progress", updateProgress);
643 videoElement.addEventListener("pause", () => setPlayerState("isPlaying", false));
644 videoElement.addEventListener("play", () => setPlayerState("isPlaying", true));
645 videoElement.addEventListener("volumechange", () => setPlayerState("volume", videoElement.volume));
646 videoElement.addEventListener("canplay", () => setPlayerState("waitingForStart", false));
647 videoElement.addEventListener("seeking", () => {
648 if (!ignoreSeek && playerState.currentTrack && needMSESeek(videoElement.currentTime)) {
649 playTrack(playerState.currentTrack, videoElement.currentTime);
650 }
651 ignoreSeek = false;
652 });
653 videoElement.addEventListener("loadedmetadata", () => {
654 setVideoShown(videoElement.videoWidth !== 0 || videoElement.videoHeight !== 0);
655 });
656 videoElement.addEventListener("click", (e) => {
657 e.preventDefault();
658 togglePlay();
659 });
660 videoElement.addEventListener("fullscreenchange", () => {
661 if (document.fullscreenElement !== videoElement) {
662 videoElement.controls = false;
663 }
664 });
665
666 window.addEventListener("hashchange", () => {
667 setCurrentDir(decodePath(window.location.hash.slice(1)));
668 });
669
670 document.addEventListener("keydown", (e) => {
671 const activeElementTag = document.activeElement?.tagName.toLowerCase();
672 if (activeElementTag === "input") {
673 return;
674 }
675 if (e.key === " " && document.fullscreenElement !== videoElement) {
676 togglePlay();
677 e.preventDefault();
678 } else if (e.key === "ArrowLeft") {
679 videoElement.currentTime -= 10;
680 e.preventDefault();
681 } else if (e.key === "ArrowRight") {
682 videoElement.currentTime += 10;
683 e.preventDefault();
684 } else if (e.key === "ArrowUp") {
685 videoElement.volume += 0.1;
686 e.preventDefault();
687 } else if (e.key === "ArrowDown") {
688 videoElement.volume -= 0.1;
689 e.preventDefault();
690 }
691 });
692 });
693
694 createEffect(() => {
695 videoElement.volume = playerState.volume;
696 videoElement.playbackRate = playerState.rate;
697 });
698
699 return (
700 <div class="app-container">
701 <div class="app-header">
702 <div style={{ "min-width": 0 }}>
703 <div class="title">Pico Pixel Player</div>
704 <sub style={{ display: "block", "line-height": "1em" }}>{BUILD_HASH}</sub>
705 </div>
706
707 <div class="spacer" />
708 <div class="app-buttons">
709 <div class="signin-offline-group">
710 <SignIn showSignIn={showSignIn} setShowSignIn={setShowSignIn} onLoggedIn={() => setLoggedIn(true)} />
711 <Show when={authRequired() && !isOffline()}>
712 <Show
713 when={loggedIn()}
714 fallback={
715 <button title="Sign in" onclick={() => setShowSignIn(true)}>
716 <LoginSVG />
717 </button>
718 }
719 >
720 <button title="Sign out" onclick={doLogout}>
721 <LogoutSVG />
722 </button>
723 </Show>
724 </Show>
725
726 <button
727 title="Switch between online and offline mode. In offline mode only locally cached files are listed"
728 class="offline-button"
729 style={{ background: isOffline() ? "lightgreen" : "indianred" }}
730 textContent={isOffline() ? "Go online" : "Go offline"}
731 onclick={() => setOffline(!isOffline())}
732 />
733 </div>
734 <div>
735 <button
736 title="Toggle File Browser"
737 class="filebrowser-toggle"
738 onClick={() => setShowFileBrowser((prev) => !prev)}
739 >
740 {showFileBrowser() ? <OpenFolderSVG /> : <ClosedFolderSVG forButton={true} />}
741 </button>
742 <button title="Manage Downloads" onClick={() => setShowDownloadManager(true)}>
743 <DownloadManagerSVG />
744 </button>
745 <button title="Manage playlists" onClick={() => setShowPlaylistManager(true)}>
746 <PlaylistSVG />
747 </button>
748 <button
749 title="Toggle Fullscreen"
750 onClick={() =>
751 document.fullscreenElement
752 ? document.exitFullscreen()
753 : document.documentElement.requestFullscreen({ navigationUI: "hide" })
754 }
755 >
756 <FullscreenSVG />
757 </button>
758 <button title="Settings" onClick={() => setShowOptions(true)}>
759 <CogSVG />
760 </button>
761 </div>
762 </div>
763 </div>
764
765 <div class="main-content">
766 <FileBrowser
767 breadcrumbs={breadcrumbs}
768 currentDir={currentDir}
769 setCurrentDir={setCurrentDir}
770 playTrack={playTrack}
771 playlist={playlist}
772 setPlaylist={setPlaylist}
773 showFileBrowser={showFileBrowser}
774 setShowFileBrowser={setShowFileBrowser}
775 options={options}
776 isOffline={isOffline}
777 files={files}
778 fetchFiles={fetchFiles}
779 />
780
781 <Playlist
782 playlist={playlist}
783 setPlaylist={setPlaylist}
784 playerState={playerState}
785 setPlayerState={setPlayerState}
786 playTrack={playTrack}
787 playNext={playNext}
788 videoElement={(el) => {
789 videoElement = el;
790 }}
791 videoShown={videoShown}
792 options={options}
793 fetchFiles={fetchFiles}
794 isOffline={isOffline}
795 />
796 </div>
797
798 <PlayerControls
799 playerState={playerState}
800 setPlayerState={setPlayerState}
801 togglePlay={togglePlay}
802 playPrevious={playPrevious}
803 playNext={playNext}
804 isShuffled={isShuffled}
805 setShuffled={setShuffled}
806 isRepeated={isRepeated}
807 setRepeated={setRepeated}
808 videoElement={videoElement}
809 needMSESeek={(seekTo: number) => needMSESeek(seekTo)}
810 seekTo={(seekTo: number) => playerState.currentTrack && playTrack(playerState.currentTrack, seekTo)}
811 options={options}
812 />
813
814 <OptionsModal
815 showOptions={showOptions}
816 setShowOptions={setShowOptions}
817 options={options}
818 setOptions={setOptions}
819 />
820
821 <PlaylistManager
822 showPlaylistManager={showPlaylistManager}
823 setShowPlaylistManager={setShowPlaylistManager}
824 playlist={playlist}
825 setPlaylist={setPlaylist}
826 playTrack={playTrack}
827 options={options}
828 />
829 <DownloadManager showDownloadManager={showDownloadManager} setShowDownloadManager={setShowDownloadManager} />
830 </div>
831 );
832};
833
834export default App;
835