import {
	AudioCodec,
	type Directory,
	MediaContainer,
	type MediaFile,
	VideoCodec,
	VideoEncodingSetting,
} from "music-server-shared/types";
import { createRFC6381String, decodePath, encodePath, videoStreamInfo } from "music-server-shared/utils";
import type { Component } from "solid-js";
import { batch, createEffect, createResource, createSignal, on, onMount, Show } from "solid-js";
import { createStore, reconcile } from "solid-js/store";
import { BUILD_HASH } from "./build-info";
import { DEFAULT_STREAMING_MODE, playableSettings } from "./capabilities";
import DownloadManager from "./components/DownloadManager";
import FileBrowser from "./components/FileBrowser";
import OptionsModal from "./components/OptionsModal";
import PlayerControls from "./components/PlayerControls";
import Playlist from "./components/Playlist";
import PlaylistManager from "./components/PlaylistManager";
import { SignIn } from "./components/SignIn";
import StorageManager from "./components/StorageManager";
import {
	ClosedFolderSVG,
	CogSVG,
	DatabaseSVG,
	DownloadManagerSVG,
	FullscreenSVG,
	LoginSVG,
	LogoutSVG,
	OpenFolderSVG,
	PlaylistSVG,
} from "./components/SVG";
import { getCover, getSrc, listFiles, loadVideoExtras, revokeVideoExtras } from "./offline";
import {
	type AppOptions,
	FileDisplay,
	type LoadedVideoExtras,
	type PlayerState,
	type PlaylistItem,
	StreamingMode,
} from "./types";
import {
	formatFilename,
	handleUnauthorized,
	LocalStorageValues,
	setForbiddenPathHandler,
	setUnauthorizedHandler,
	statusLabel,
	toast,
} from "./utils";

//TODO: bypass music-metadata if it fails, maybe only use for fallback for files with weird encodings
//TODO: more file display options
//TODO: keep synced-aborted in downloadmanager
//TODO: Add documentation to functions
//TODO: allow syncing playlists to server
//TODO: virtual rendering for playlist
//TODO: custom serialization?

export type FlatFileListing = [string, Directory | MediaFile][];

const BUFFER_AHEAD_TARGET = 30; //stop appending once this much media sits past the playhead
const BUFFER_BEHIND_TARGET = 20; //keep this much behind it, so short backwards seeks stay in the buffer
const BUFFER_BEHIND_MIN = 2; //how far quota pressure may shrink that before we give up
const BUFFER_BEHIND_SLACK = 5; //let the behind-window overshoot this much before trimming it again
const BUFFER_POLL_INTERVAL = 250; //ms between buffer checks while the append loop is parked
const RANGE_START_TOLERANCE = 0.25; //seconds of slack when deciding which range a time sits in
const SEEK_MIN_AHEAD = 0.5; //playable seconds a seek target needs ahead of it, or it lands on the buffer edge

//how much contiguous media is buffered ahead of `time`. buffered is a *list* of disjoint ranges, so
//end(0) is only the playhead's range while the buffer happens to be contiguous - once a gap appears
//it reports the end of a range behind the playhead and the caller's arithmetic goes negative
function bufferedAhead(ranges: TimeRanges, time: number): number {
	for (let i = 0; i < ranges.length; i++) {
		//tolerance at the start: the playhead can sit a frame before a range boundary
		if (time >= ranges.start(i) - RANGE_START_TOLERANCE && time <= ranges.end(i)) return ranges.end(i) - time;
	}
	return 0; //the playhead is starving, so append immediately
}

//a hand-edited hash can hold a stray "%", which makes decodeURIComponent throw
function dirFromHash(): string {
	try {
		return decodePath(window.location.hash.slice(1));
	} catch {
		return "";
	}
}

//initial directory, resolved synchronously so the very first listing fetch already targets it
function initialDir(): string {
	if (window.location.hash.length > 1) return dirFromHash();
	try {
		const savedOptions = localStorage.getItem(LocalStorageValues.options);
		const rememberDir = savedOptions ? (JSON.parse(savedOptions) as Partial<AppOptions>).rememberDir : false;
		const savedPath = localStorage.getItem(LocalStorageValues.path);
		if (rememberDir && savedPath !== null) return savedPath;
	} catch {}
	return decodePath("");
}

const App: Component = () => {
	const [showFileBrowser, setShowFileBrowser] = createSignal(false);
	const [currentDir, setCurrentDir] = createSignal(initialDir());
	const [playlist, setPlaylist] = createSignal<PlaylistItem[]>([]);
	const [playerState, setPlayerState] = createStore<PlayerState>({
		isPlaying: false,
		currentTrack: null,
		currentTime: 0,
		volume: 0.5,
		buffered: [],
		rate: 1,
		waitingForStart: false,
	});
	const [showOptions, setShowOptions] = createSignal(false);
	const [showStorage, setShowStorage] = createSignal(false);
	const [showPlaylistManager, setShowPlaylistManager] = createSignal(false);
	const [showDownloadManager, setShowDownloadManager] = createSignal(false);
	const [showSignIn, setShowSignIn] = createSignal(false);
	//the server always requires a login, so assume so until /auth/status says otherwise. starting at
	//false would hide the sign-in button whenever that first request fails
	const [authRequired, setAuthRequired] = createSignal(true);
	const [loggedIn, setLoggedIn] = createSignal(false);
	const [options, setOptions] = createStore<AppOptions>({
		//default settings
		enableTranscoding: true,
		languages: "",
		audioLanguagePreference: "",
		maxTranscodes: 4,
		maxDownloads: 2,
		transcodeCovers: false,

		hideVolume: false,
		hideCover: false,
		hidePlaylistCover: false,
		fontResolution: 12,
		filebrowserDisplay: FileDisplay.TRACKNO_TITLE,
		playlistDisplay: FileDisplay.TRACKNO_TITLE,
		controlsDisplay: FileDisplay.TITLE,
		progressBarHeight: 10,

		rememberDir: false,
		duplicateWarning: true,

		videoSettings: {
			streamingMode: DEFAULT_STREAMING_MODE,
			container: MediaContainer.mp4,
			videoCodec: VideoCodec.av1,
			videoBitrate: 8000000, //8mbit
			videoEncodingSetting: VideoEncodingSetting.fast,
			audioCodec: AudioCodec.opus,
			audioBitrate: 128000, //128kbit
		},

		audioSettings: {
			streamingMode: DEFAULT_STREAMING_MODE,
			container: MediaContainer.webm,
			audioBitrate: 128000, //128kbit
			audioCodec: AudioCodec.opus,
		},
	});
	const [isShuffled, setShuffled] = createSignal(false);
	const [isRepeated, setRepeated] = createSignal(false);
	//read the persisted mode synchronously so the very first listing fetch below already runs in the
	//correct mode
	const [isOffline, setOffline] = createSignal(
		(() => {
			try {
				return localStorage.getItem(LocalStorageValues.offline) === "true";
			} catch {
				return false;
			}
		})(),
	);
	const [files, fetchFiles] = createResource<FlatFileListing, { dir: string; offline: boolean; loggedIn: boolean }>(
		//loggedIn is part of the key so signing in refetches: the listing before it was a 401, which
		//leaves an empty browser behind with nothing to trigger a retry
		() => ({ dir: currentDir(), offline: isOffline(), loggedIn: loggedIn() }),
		async (args) => {
			return Object.entries(await listFiles(args.dir, args.offline, false));
		},
		{ initialValue: [] },
	);
	const [isVideoTrack, setIsVideoTrack] = createSignal(false);
	const [videoTheater, setVideoTheater] = createSignal(false);
	const [selectedSubtitle, setSelectedSubtitle] = createSignal<"off" | number>("off");
	//path the currently served extras belong to; while the resource refetches, it still serves the
	//previous track's extras, and this keeps consumers from treating those as the new track's data
	let extrasLoadedForPath: string | undefined;
	//track path the language-based auto-selection last ran for, so refetches of the same track
	//(e.g. offline toggle) don't override a manual subtitle choice
	let lastAutoSelectedPath: string | undefined;
	const [videoExtras] = createResource<LoadedVideoExtras, { path?: string; offline: boolean }>(
		() => ({ path: playerState.currentTrack?.path, offline: isOffline() }),
		async (args) => {
			if (!args.path || playerState.currentTrack?.metadata.videoCodec === undefined) {
				extrasLoadedForPath = args.path;
				return { subtitleTracks: [], chapters: [], subtitleSources: {} };
			}
			try {
				const loaded = await loadVideoExtras(args.path, args.offline);
				extrasLoadedForPath = args.path;
				return loaded;
			} catch (error) {
				toast("Loading video extras failed", "error", error);
				extrasLoadedForPath = args.path;
				return { subtitleTracks: [], chapters: [], subtitleSources: {} };
			}
		},
		{ initialValue: { subtitleTracks: [], chapters: [], subtitleSources: {} } },
	);
	//revoke the previous extras only once the new value has landed (and with it the new <track>
	//elements) - revoking at fetch start would leave the still-rendered old tracks pointing at
	//dead blob urls for the whole fetch window
	createEffect(
		on(videoExtras, (_current, previous) => {
			if (previous) revokeVideoExtras(previous);
		}),
	);

	async function refreshAuthStatus() {
		try {
			const res = await fetch("/auth/status", { credentials: "same-origin" });
			if (!res.ok) return;
			const status = (await res.json()) as { authRequired: boolean; loggedIn: boolean };
			setAuthRequired(status.authRequired);
			setLoggedIn(status.loggedIn);
		} catch {
			//server unreachable (e.g. offline) - leave the last known state untouched
		}
	}

	async function doLogout() {
		const res = await fetch("/logout", { method: "POST", credentials: "same-origin" }).catch(() => {});
		if (res?.ok) {
			setLoggedIn(false);
			toast("Signed out", "success");
		} else {
			toast("Sign out failed", "error");
		}
	}

	//a 401 from any request means the session is no longer valid
	setUnauthorizedHandler(() => setLoggedIn(false));

	//a 403 on a listing means the path names a root this user does not have, e.g. a bookmark from
	//before roots existed. without this the bad path stays in localStorage and fails on every reload
	setForbiddenPathHandler(() => setCurrentDir(""));

	//re-check auth whenever we (re)enter online mode
	createEffect(() => {
		if (!isOffline()) refreshAuthStatus();
	});

	// Update URL fragment when directory changes
	createEffect(() => {
		window.location.hash = encodePath(currentDir());
	});

	createEffect(
		on(currentDir, () => {
			setShowFileBrowser(true);
		}),
	);

	createEffect(() => {
		const new_font = new FontFace(
			"ark-latin",
			`url(assets/ark-pixel-${options.fontResolution}px-proportional-latin.woff2) format(woff2)`,
		);
		document.fonts.clear();
		document.fonts.add(new_font);
	});

	//incremented on every playTrack call so a slow/older invocation can detect it has been superseded
	//and bail before clobbering the newer track's state
	let playGeneration = 0;

	function stopPlaying() {
		//invalidate any in-flight playTrack so a stale invocation bails instead of restarting playback
		playGeneration++;
		cancelTranscode(activeTranscodeId);
		activeTranscodeId = undefined;
		batch(() => {
			setPlayerState("isPlaying", false);
			setPlayerState("currentTime", 0);
			setPlayerState("currentTrack", null);
			setPlayerState("waitingForStart", false);
			setIsVideoTrack(false);
			setVideoTheater(false);
			setSelectedSubtitle("off");
		});
		videoElement.pause();

		//tear down any in-flight MSE stream, otherwise the fetch + server-side ffmpeg transcode keeps running
		mediaSourceAbortController?.abort();
		mediaSourceAbortController = null;
		if (mediaSource) {
			try {
				mediaSource.endOfStream();
			} catch {}
			mediaSource = null;
		}

		if (videoElement.src.startsWith("blob:")) URL.revokeObjectURL(videoElement.src);
		//remove the src before clearing srcObject, otherwise the media load algorithm
		//re-fetches the just-revoked blob url and parks the element in an error state
		videoElement.removeAttribute("src");
		videoElement.srcObject = null;
	}

	createEffect(
		on(playlist, () => {
			if (playlist().length === 0) {
				stopPlaying();
			}
		}),
	);

	if ("mediaSession" in navigator) {
		createEffect(async () => {
			//revoked before the early return as well, otherwise the last track's artwork leaks on every stop
			const oldSrc = navigator.mediaSession.metadata?.artwork[0]?.src ?? "";
			if (oldSrc.startsWith("blob:")) URL.revokeObjectURL(oldSrc);
			if (!playerState.currentTrack) {
				navigator.mediaSession.metadata = new MediaMetadata();
				navigator.mediaSession.setActionHandler("pause", null);
				navigator.mediaSession.setActionHandler("play", null);
				navigator.mediaSession.setActionHandler("stop", null);
				navigator.mediaSession.setActionHandler("previoustrack", null);
				navigator.mediaSession.setActionHandler("nexttrack", null);
				return;
			}
			const artwork = await getCover(playerState.currentTrack.path, options, false, isOffline());
			navigator.mediaSession.metadata = new MediaMetadata({
				title: formatFilename(playerState.currentTrack, options.controlsDisplay),
				album: playerState.currentTrack.metadata.album,
				artist: playerState.currentTrack.metadata.artist,
				artwork: [
					{
						src: artwork ?? "",
					},
				],
			});

			navigator.mediaSession.setActionHandler("nexttrack", playNext);
			navigator.mediaSession.setActionHandler("previoustrack", playPrevious);
			navigator.mediaSession.setActionHandler("stop", stopPlaying);
		});
		createEffect(() => {
			if (!playerState.currentTrack) {
				navigator.mediaSession.setActionHandler("pause", null);
				navigator.mediaSession.setActionHandler("play", null);
				return;
			}
			if (playerState.isPlaying) {
				navigator.mediaSession.setActionHandler("pause", togglePlay);
				navigator.mediaSession.setActionHandler("play", null);
			} else {
				navigator.mediaSession.setActionHandler("pause", null);
				navigator.mediaSession.setActionHandler("play", togglePlay);
			}
		});
	}

	let videoElement!: HTMLVideoElement;
	let activeTranscodeId: string | undefined;

	function cancelTranscode(transcodeId: string | undefined) {
		if (!transcodeId) return;
		const url = `/cancel-transcode/${encodeURIComponent(transcodeId)}`;
		try {
			if (navigator.sendBeacon(url)) return;
		} catch {}
		void fetch(url, { method: "POST", credentials: "same-origin", keepalive: true }).catch(() => {});
	}

	function closeVideoTheater() {
		if (document.fullscreenElement === videoElement) void document.exitFullscreen();
		setVideoTheater(false);
	}

	function toggleVideoTheater() {
		if (isVideoTrack()) setVideoTheater((open) => !open);
	}

	function applySubtitleModes() {
		if (!videoElement) return;
		const extras = videoExtras();
		const selected = selectedSubtitle();
		for (let index = 0; index < videoElement.textTracks.length; index++) {
			const track = extras?.subtitleTracks[index];
			const showing = selected !== "off" && track?.streamIndex === selected;
			videoElement.textTracks[index].mode = showing ? "showing" : "disabled";
		}
	}

	createEffect(() => {
		videoExtras();
		selectedSubtitle();
		queueMicrotask(applySubtitleModes);
	});
	function subtitleSelectionForLanguage(extras: LoadedVideoExtras | undefined): "off" | number {
		const preferences = options.languages
			.split(",")
			.map((language) => language.trim().toLowerCase())
			.filter(Boolean);
		if (!extras || preferences.length === 0) return "off";

		let selected: number | undefined;
		let selectedPreference = Number.POSITIVE_INFINITY;
		for (const track of extras.subtitleTracks) {
			const language = track.language?.trim().toLowerCase();
			if (!language) continue;
			const preference = preferences.indexOf(language);
			if (preference >= 0 && preference < selectedPreference) {
				selected = track.streamIndex;
				selectedPreference = preference;
			}
		}
		return selected ?? "off";
	}

	createEffect(() => {
		const track = playerState.currentTrack;
		if (!track) {
			lastAutoSelectedPath = undefined;
			setSelectedSubtitle("off");
			return;
		}
		//auto-select once per track change, and only against that track's own extras
		const extras = videoExtras();
		if (!extras || extrasLoadedForPath !== track.path || lastAutoSelectedPath === track.path) return;
		lastAutoSelectedPath = track.path;
		setSelectedSubtitle(subtitleSelectionForLanguage(extras));
	});
	createEffect(() => {
		if (!isVideoTrack()) closeVideoTheater();
	});

	function handlePlayerError(e: unknown) {
		if (e instanceof Error && e.name === "AbortError") return;
		if (e instanceof Error && e.name === "NotSupportedError") {
			console.error(e);
			toast(
				"Playing track failed: Format not supported, check if the server is up when playing a remote file, or change your transcoding settings",
				"error",
			);
		} else {
			toast("Playing track failed", "error", e);
		}
	}

	let mediaSource: MediaSource | null = null;
	let mediaSourceAbortController: AbortController | null = null;
	async function getMSEUrl(srcUrl: string, offsetSeconds: number, isVideo: boolean) {
		const settings = isVideo ? options.videoSettings : options.audioSettings;
		const mimeType = createRFC6381String(
			settings.container,
			isVideo ? options.videoSettings.videoCodec : VideoCodec.none,
			settings.audioCodec,
			isVideo ? videoStreamInfo(playerState.currentTrack?.metadata, options.videoSettings.videoBitrate) : undefined,
		);

		if (!MediaSource.isTypeSupported(mimeType)) return null;
		mediaSource = new MediaSource();
		const thisMediaSource = mediaSource;
		const onSourceOpen = async () => {
			if (!thisMediaSource) return;

			const sourceBuffer = thisMediaSource.addSourceBuffer(mimeType);
			thisMediaSource.duration = playerState.currentTrack?.metadata.duration || 0;
			sourceBuffer.mode = "sequence";
			sourceBuffer.timestampOffset = offsetSeconds;

			try {
				mediaSourceAbortController = new AbortController();
				const signal = mediaSourceAbortController.signal;
				const response = await fetch(srcUrl, { credentials: "same-origin", signal });
				if (handleUnauthorized(response)) return;
				//the body carries the server's ffmpeg error, which is the only useful part of a failed transcode
				if (!response.ok || !response.body)
					throw new Error((await response.text().catch(() => "")) || statusLabel(response));
				const reader = response.body.getReader();

				function waitUntilUpdateDone() {
					return new Promise((resolve) => {
						if (!sourceBuffer.updating) return resolve(undefined);
						sourceBuffer.addEventListener("updateend", resolve, { once: true });
					});
				}

				//park the append loop until there is room ahead of the playhead again. the interval is what
				//guarantees a wakeup: timeupdate does not fire at all while the element is paused (and is only
				//loosely specified otherwise), so it must not be the sole liveness signal - it and seeking
				//merely make the wakeup prompt. also resolves on abort/teardown so the loop can never park
				//forever holding the reader, the SourceBuffer and the server-side ffmpeg process
				function waitForBufferSpace() {
					return new Promise<void>((resolve) => {
						//every listener is registered against this controller, so one abort() detaches them all and
						//no separate "already settled" bookkeeping is needed - resolving and clearing twice are no-ops.
						//note the outer abort listener must be scoped to it too: that signal outlives a single wait
						//(it is the whole track's), so a listener left on it would accumulate once per chunk
						const controller = new AbortController();
						const finish = () => {
							clearInterval(timer);
							controller.abort();
							resolve();
						};
						const check = () => {
							try {
								if (signal.aborted || thisMediaSource.readyState !== "open" || videoElement.error) return finish();
								if (bufferedAhead(sourceBuffer.buffered, videoElement.currentTime) < BUFFER_AHEAD_TARGET) finish();
							} catch (_e) {
								//reading buffered throws once the SourceBuffer is detached - nothing left to wait for
								finish();
							}
						};
						const timer = setInterval(check, BUFFER_POLL_INTERVAL);
						videoElement.addEventListener("timeupdate", check, { signal: controller.signal });
						videoElement.addEventListener("seeking", check, { signal: controller.signal });
						signal.addEventListener("abort", finish, { signal: controller.signal });
						//check once immediately, so a loop that already has room never waits an interval
						check();
					});
				}

				async function saveUpdate(action: () => void) {
					while (true) {
						// bail if the stream is gone or the media element entered a fatal error state:
						// when videoElement.error is set the MediaSource stays "open" but every
						// appendBuffer throws InvalidStateError, which would otherwise spin forever
						if (thisMediaSource.readyState !== "open" || videoElement.error) return;
						try {
							await waitUntilUpdateDone();
							action();
							return;
						} catch (e) {
							if (!(e instanceof Error && e.name === "InvalidStateError")) throw e;
							// an InvalidStateError while we are not updating is unrecoverable
							// (e.g. element error / detached buffer) - don't retry into an infinite loop
							if (!sourceBuffer.updating) return;
						}
					}
				}

				//drop everything more than `keepBehind` seconds before the playhead. returns false when there
				//was nothing worth dropping, so the caller knows to stop retrying instead of spinning.
				//minGain is the smallest removal considered worthwhile: the steady-state trim wants slack, or it
				//would issue a remove() for a few milliseconds on every single chunk, while a quota retry passes 0
				//because any freed byte is worth having
				async function evictBehind(keepBehind: number, minGain: number): Promise<boolean> {
					const ranges = sourceBuffer.buffered;
					if (ranges.length === 0) return false;
					const cutoff = videoElement.currentTime - keepBehind;
					if (cutoff - ranges.start(0) <= minGain) return false;
					await saveUpdate(() => sourceBuffer.remove(ranges.start(0), cutoff));
					//remove() is asynchronous, so a caller about to retry an append has to wait it out
					await waitUntilUpdateDone();
					return true;
				}

				//what MSE actually enforces is a *byte* budget per SourceBuffer, and it varies by browser,
				//codec and bitrate - the time window above is only a proxy for it. so treat QuotaExceededError
				//as "make room and retry", which is what the spec intends, rather than as fatal: letting it
				//propagate ends the stream early and truncates the track with no user-visible error
				async function appendWithEviction(chunk: BufferSource) {
					let keepBehind = BUFFER_BEHIND_TARGET;
					while (true) {
						try {
							await saveUpdate(() => sourceBuffer.appendBuffer(chunk));
							return;
						} catch (e) {
							if (!(e instanceof Error && e.name === "QuotaExceededError")) throw e;
							//keep tightening the behind-window until a removal actually frees something. a single
							//halving is not enough: early in a track the playhead has less than keepBehind seconds
							//behind it, so the first cutoff lands before the buffer start and frees nothing even
							//though a tighter one still would
							let freed = false;
							while (!freed && keepBehind > BUFFER_BEHIND_MIN) {
								keepBehind = Math.max(BUFFER_BEHIND_MIN, Math.floor(keepBehind / 2));
								freed = await evictBehind(keepBehind, 0);
							}
							//nothing behind the playhead left to give up - the configured bitrate simply needs more
							//than the browser's per-SourceBuffer byte budget for BUFFER_AHEAD_TARGET seconds
							if (!freed) throw e;
						}
					}
				}

				while (true) {
					const { done, value } = await reader.read();
					if (done || thisMediaSource.readyState !== "open") {
						//release the connection (and the server-side ffmpeg transcode) when we stop early
						if (!done) reader.cancel().catch(() => {});
						break;
					}

					//a fetch body never yields SharedArrayBuffer-backed views, so narrowing to ArrayBuffer is safe
					await appendWithEviction(value as Uint8Array<ArrayBuffer>);
					//trim eagerly as well, so the quota is normally never reached in the first place
					await evictBehind(BUFFER_BEHIND_TARGET, BUFFER_BEHIND_SLACK);
					await waitForBufferSpace();
				}
				// Wait for buffer to finish updating
				await waitUntilUpdateDone();
			} catch (error) {
				if (error instanceof Error && error.name === "QuotaExceededError") {
					//endOfStream() below makes what is already buffered play out and then simply stop, which
					//is indistinguishable from the track ending - so say why it was cut short
					toast(
						"Playback was cut short: the browser's media buffer is full, try a lower bitrate in the transcoding settings",
						"error",
						error,
					);
				} else if (!(error instanceof Error && error.name === "AbortError")) {
					toast("Streaming the transcode failed", "error", error);
				}
			} finally {
				try {
					thisMediaSource.endOfStream();
				} catch {}
			}
		};
		//once:true - a single MediaSource must only run one sourceopen handler
		mediaSource.addEventListener("sourceopen", onSourceOpen, { once: true });
		return URL.createObjectURL(thisMediaSource);
	}

	//without this, seeking via mse will cause an infinite loop
	let ignoreSeek = false;
	// Play a track from the playlist
	async function playTrack(track: PlaylistItem, seekTo?: number) {
		cancelTranscode(activeTranscodeId);
		activeTranscodeId = undefined;
		const generation = ++playGeneration;
		try {
			const srcResult = await getSrc(track.path, track.metadata, options, isOffline(), seekTo || 0);
			//undefined means offline and not cached, getSrc already explained that via toast
			if (!srcResult) return;
			const { src, isVideo, transcodeId } = srcResult;
			if (generation !== playGeneration) {
				cancelTranscode(transcodeId);
				//superseded while getSrc ran: for a synced file it already minted a blob url that
				//nothing will ever assign to the element, so revoke it instead of leaking it
				if (src.startsWith("blob:")) URL.revokeObjectURL(src);
				return;
			}
			activeTranscodeId = transcodeId;
			//Cleanup
			if (videoElement.src.startsWith("blob:")) URL.revokeObjectURL(videoElement.src);
			if (mediaSource) {
				//without this abort, the old fetch keeps running and the old ffmpeg instance keeps transcoding
				mediaSourceAbortController?.abort();
				mediaSourceAbortController = null;
				//null out before endOfStream: it throws when readyState isn't "open", which would
				//otherwise leave a stale non-null mediaSource and make needMSESeek misfire on later tracks
				const oldMediaSource = mediaSource;
				mediaSource = null;
				try {
					oldMediaSource.endOfStream();
				} catch {}
			}

			//each transcoding profile carries its own streaming mode, so which one applies depends on what
			//is being played. a blob url is an already-synced file, which is never streamed
			const streamingMode = isVideo ? options.videoSettings.streamingMode : options.audioSettings.streamingMode;
			const mseURL =
				options.enableTranscoding && streamingMode === StreamingMode.mse && !src.startsWith("blob:")
					? await getMSEUrl(src, seekTo || 0, isVideo === true)
					: null;
			if (generation !== playGeneration) {
				cancelTranscode(transcodeId);
				//superseded while getMSEUrl ran: it created a detached MediaSource + object URL, but its
				//sourceopen handler never fired (we never set videoElement.src), so no fetch/transcode was
				//started and there's nothing to abort. Just revoke the URL and drop the now-stale module
				//reference so a later needMSESeek can't misfire on it.
				if (mseURL) {
					URL.revokeObjectURL(mseURL);
					mediaSource = null;
				}
				return;
			}
			setIsVideoTrack(false);
			videoElement.removeAttribute("src");
			videoElement.srcObject = null;
			videoElement.src = mseURL || src;
			setIsVideoTrack(
				track.metadata.videoCodec !== undefined &&
					(!options.enableTranscoding || options.videoSettings.videoCodec !== VideoCodec.none),
			);
			if (mseURL && seekTo) {
				ignoreSeek = true;
				videoElement.currentTime = seekTo;
			}
			batch(() => {
				setPlayerState("isPlaying", true);
				setPlayerState("currentTime", videoElement.currentTime);
				setPlayerState("buffered", []);
				//clone, otherwise it shares the reference
				setPlayerState("currentTrack", { ...track });
				setPlayerState("waitingForStart", true);
			});

			await videoElement.play();
		} catch (e) {
			setPlayerState("isPlaying", false);
			handlePlayerError(e);
		}
	}

	// Play next track
	function playNext() {
		const currentTrack = playerState.currentTrack;
		if (!currentTrack) return;

		let nextTrack: PlaylistItem | null = null;

		const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
		if (isShuffled()) {
			// Pick a different random track
			if (playlist().length > 1) {
				const otherTracks = playlist().filter((_, idx) => idx !== currentIndex);
				nextTrack = otherTracks[Math.floor(Math.random() * otherTracks.length)];
			} else {
				nextTrack = isRepeated() ? currentTrack : null;
			}
		} else if (currentIndex >= 0 && currentIndex < playlist().length - 1) {
			nextTrack = playlist()[currentIndex + 1];
		} else if (isRepeated()) {
			nextTrack = playlist()[0];
		}
		if (nextTrack) {
			playTrack(nextTrack);
		} else {
			stopPlaying();
		}
	}

	// Play previous track
	function playPrevious() {
		const currentTrack = playerState.currentTrack;
		if (!currentTrack) return;
		const currentIndex = playlist().findIndex((item) => item.id === currentTrack.id);
		if (currentIndex > 0) playTrack(playlist()[currentIndex - 1]);
	}

	// Toggle play/pause
	function togglePlay() {
		if (playerState.currentTrack === null) return;
		const newIsPlaying = !playerState.isPlaying;
		setPlayerState("isPlaying", newIsPlaying);

		if (newIsPlaying) {
			setPlayerState("waitingForStart", true);
			videoElement
				.play()
				.catch((e) => {
					setPlayerState("isPlaying", false);
					setPlayerState("currentTime", 0);
					handlePlayerError(e);
				})
				.finally(() => {
					setPlayerState("waitingForStart", false);
				});
		} else {
			videoElement.pause();
		}
	}

	function timeRangesToArray(timeRanges: TimeRanges) {
		const result = [];
		for (let i = 0; i < timeRanges.length; i++) {
			result.push({
				start: timeRanges.start(i),
				end: timeRanges.end(i),
			});
		}
		return result;
	}

	function updateTime() {
		setPlayerState("currentTime", videoElement.currentTime);
		//also call updateProgress here, because some browsers send the "progress" events too slow
		updateProgress();
	}
	function updateProgress() {
		setPlayerState("buffered", reconcile(timeRangesToArray(videoElement.buffered)));
	}

	//whether the target can be played straight out of the buffer, or needs a fresh transcode seeked with -ss.
	//"buffered" is not the same question as "playable from": a target landing on the trailing edge of a range
	//is inside it, yet seeking there stalls with nothing ahead to play and nothing to trigger a re-fetch
	function needMSESeek(seekTo: number) {
		if (mediaSource === null) return false;
		const ranges = videoElement.buffered;
		//while the source is still open the append loop is alive, so a target near the buffer head only has to
		//wait for the next chunk. once it is "ended" nothing more will ever arrive - endOfStream() has run, which
		//also happens when the stream died early - and seeking to the edge would stall there for good
		const willRefill = mediaSource.readyState === "open";
		//the track's own duration, not mediaSource.duration: endOfStream() redefines the media end as whatever
		//was buffered, so after a stream dies early the two are equal and a truncated track is indistinguishable
		//from a complete one - which is exactly the case where a seek has to force a fresh transcode
		const trackDuration = playerState.currentTrack?.metadata.duration;
		const mediaEnd = trackDuration && Number.isFinite(trackDuration) ? trackDuration : mediaSource.duration;
		//RANGE_START_TOLERANCE covers container/frame-alignment slack at a range start - MSE containers do not
		//begin at exactly 0, which is why seeking to the very start used to need a special case here
		for (let i = 0; i < ranges.length; i++) {
			//no headroom demanded where the range already reaches the end of the media either: there is nothing
			//further to buffer there, so requiring it would re-transcode the whole track just to seek near the end
			const atMediaEnd = Number.isFinite(mediaEnd) && ranges.end(i) >= mediaEnd - SEEK_MIN_AHEAD;
			const minAhead = willRefill || atMediaEnd ? 0 : SEEK_MIN_AHEAD;
			if (seekTo >= ranges.start(i) - RANGE_START_TOLERANCE && seekTo <= ranges.end(i) - minAhead) return false;
		}
		return true;
	}

	// Initialize app
	onMount(async () => {
		// Load from localStorage
		try {
			const savedOptions = localStorage.getItem(LocalStorageValues.options);
			if (savedOptions) {
				//keep default settings when no override exists. the two transcoding profiles have to be merged
				//one level deeper than the rest: a spread would replace them wholesale, so a setting added
				//after the options were last saved would come back undefined instead of taking its default
				const saved = JSON.parse(savedOptions) as Partial<AppOptions>;
				//playableSettings, because nothing downstream re-checks: the transcode url is built straight
				//from these, so a combination this browser cannot play would reach the element as a format
				//error with no explanation, and one with an unrecognised container would throw on sight
				setOptions({
					...options,
					...saved,
					videoSettings: playableSettings({ ...options.videoSettings, ...saved.videoSettings }),
					audioSettings: playableSettings({ ...options.audioSettings, ...saved.audioSettings }),
				});
			}
			const savedVolume = Number.parseFloat(localStorage.getItem(LocalStorageValues.volume) ?? "");
			if (!Number.isNaN(savedVolume)) {
				setPlayerState("volume", savedVolume);
			}
			const savedPlaylist = localStorage.getItem(LocalStorageValues.playlist);
			if (savedPlaylist) {
				setPlaylist(JSON.parse(savedPlaylist));
			}
			const savedShuffle = localStorage.getItem(LocalStorageValues.shuffle);
			setShuffled(savedShuffle === "true");
			const savedRepeat = localStorage.getItem(LocalStorageValues.repeat);
			setRepeated(savedRepeat === "true");
		} catch (e) {
			toast("loading values from localStorage failed", "error", e);
			localStorage.clear();
		}
		// Sync to localStorage
		createEffect(() => localStorage.setItem(LocalStorageValues.options, JSON.stringify(options)));
		createEffect(() => localStorage.setItem(LocalStorageValues.volume, playerState.volume.toString()));
		createEffect(() => {
			//a large playlist can exceed the localStorage quota; swallow the error so it doesn't
			//propagate out of the reactive flush and break every subsequent playlist update
			try {
				localStorage.setItem(LocalStorageValues.playlist, JSON.stringify(playlist()));
			} catch (e) {
				console.error("Persisting playlist to localStorage failed", e);
			}
		});
		createEffect(() => localStorage.setItem(LocalStorageValues.shuffle, isShuffled().toString()));
		createEffect(() => localStorage.setItem(LocalStorageValues.repeat, isRepeated().toString()));
		createEffect(() => localStorage.setItem(LocalStorageValues.path, currentDir()));
		createEffect(() => localStorage.setItem(LocalStorageValues.offline, isOffline().toString()));

		// Set initial video element volume
		videoElement.volume = playerState.volume;

		// Set up video element event handlers
		videoElement.addEventListener("ended", playNext);
		videoElement.addEventListener("timeupdate", updateTime);
		videoElement.addEventListener("progress", updateProgress);
		videoElement.addEventListener("pause", () => setPlayerState("isPlaying", false));
		videoElement.addEventListener("play", () => setPlayerState("isPlaying", true));
		videoElement.addEventListener("volumechange", () => setPlayerState("volume", videoElement.volume));
		videoElement.addEventListener("canplay", () => setPlayerState("waitingForStart", false));
		videoElement.addEventListener("seeking", () => {
			if (!ignoreSeek && playerState.currentTrack && needMSESeek(videoElement.currentTime)) {
				playTrack(playerState.currentTrack, videoElement.currentTime);
			}
			ignoreSeek = false;
		});
		videoElement.addEventListener("click", (e) => {
			e.preventDefault();
			togglePlay();
		});
		videoElement.addEventListener("fullscreenchange", () => {
			if (document.fullscreenElement !== videoElement) {
				videoElement.controls = false;
			}
		});
		//Firefox can leave a media fetch alive while tearing down a tab. Remove the source and abort the
		//MSE fetch synchronously during pagehide so the server gets a chance to cancel its ffmpeg process.
		window.addEventListener("pagehide", stopPlaying);

		window.addEventListener("hashchange", () => {
			setCurrentDir(dirFromHash());
		});

		document.addEventListener("keydown", (e) => {
			if (e.key === "Escape" && videoTheater()) {
				closeVideoTheater();
				e.preventDefault();
				return;
			}
			const activeElementTag = document.activeElement?.tagName.toLowerCase();
			if (activeElementTag === "input") {
				return;
			}
			if (e.key === " " && document.fullscreenElement !== videoElement) {
				togglePlay();
				e.preventDefault();
			} else if (e.key === "ArrowLeft") {
				videoElement.currentTime -= 10;
				e.preventDefault();
			} else if (e.key === "ArrowRight") {
				videoElement.currentTime += 10;
				e.preventDefault();
			} else if (e.key === "ArrowUp") {
				videoElement.volume = Math.min(1, videoElement.volume + 0.1);
				e.preventDefault();
			} else if (e.key === "ArrowDown") {
				videoElement.volume = Math.max(0, videoElement.volume - 0.1);
				e.preventDefault();
			}
		});
	});

	createEffect(() => {
		videoElement.volume = playerState.volume;
		videoElement.playbackRate = playerState.rate;
	});

	return (
		<div class="app-container">
			<div class="app-header">
				<div style={{ "min-width": 0 }}>
					<div class="title">Pico Pixel Player</div>
					<sub style={{ display: "block", "line-height": "1em" }}>{BUILD_HASH}</sub>
				</div>

				<div class="spacer" />
				<div class="app-buttons">
					<div class="signin-offline-group">
						<SignIn showSignIn={showSignIn} setShowSignIn={setShowSignIn} onLoggedIn={() => setLoggedIn(true)} />
						<Show when={authRequired() && !isOffline()}>
							<Show
								when={loggedIn()}
								fallback={
									<button title="Sign in" onclick={() => setShowSignIn(true)}>
										<LoginSVG />
									</button>
								}
							>
								<button title="Sign out" onclick={doLogout}>
									<LogoutSVG />
								</button>
							</Show>
						</Show>

						<button
							title="Switch between online and offline mode. In offline mode only locally cached files are listed"
							class="offline-button"
							style={{ background: isOffline() ? "lightgreen" : "indianred" }}
							textContent={isOffline() ? "Go online" : "Go offline"}
							onclick={() => setOffline(!isOffline())}
						/>
					</div>
					<div>
						<button
							title="Toggle File Browser"
							class="filebrowser-toggle"
							onClick={() => setShowFileBrowser((prev) => !prev)}
						>
							{showFileBrowser() ? <OpenFolderSVG /> : <ClosedFolderSVG forButton={true} />}
						</button>
						<button title="Manage Downloads" onClick={() => setShowDownloadManager(true)}>
							<DownloadManagerSVG />
						</button>
						<button title="Manage playlists" onClick={() => setShowPlaylistManager(true)}>
							<PlaylistSVG />
						</button>
						<button
							title="Toggle Fullscreen"
							onClick={() =>
								document.fullscreenElement
									? document.exitFullscreen()
									: document.documentElement.requestFullscreen({ navigationUI: "hide" })
							}
						>
							<FullscreenSVG />
						</button>
						<button title="Storage" onClick={() => setShowStorage(true)}>
							<DatabaseSVG />
						</button>
						<button title="Settings" onClick={() => setShowOptions(true)}>
							<CogSVG />
						</button>
					</div>
				</div>
			</div>

			<div class="main-content">
				<FileBrowser
					currentDir={currentDir}
					setCurrentDir={setCurrentDir}
					playTrack={playTrack}
					playlist={playlist}
					setPlaylist={setPlaylist}
					showFileBrowser={showFileBrowser}
					setShowFileBrowser={setShowFileBrowser}
					options={options}
					isOffline={isOffline}
					files={files}
					fetchFiles={fetchFiles}
				/>

				<Playlist
					playlist={playlist}
					setPlaylist={setPlaylist}
					playerState={playerState}
					setPlayerState={setPlayerState}
					playTrack={playTrack}
					playNext={playNext}
					videoElement={(el) => {
						videoElement = el;
					}}
					isVideoTrack={isVideoTrack}
					videoTheater={videoTheater}
					setVideoTheater={setVideoTheater}
					videoExtras={videoExtras}
					options={options}
					fetchFiles={fetchFiles}
					isOffline={isOffline}
				/>
			</div>

			<PlayerControls
				playerState={playerState}
				setPlayerState={setPlayerState}
				togglePlay={togglePlay}
				playPrevious={playPrevious}
				playNext={playNext}
				stopPlaying={stopPlaying}
				isShuffled={isShuffled}
				setShuffled={setShuffled}
				isRepeated={isRepeated}
				setRepeated={setRepeated}
				videoElement={videoElement}
				needMSESeek={(seekTo: number) => needMSESeek(seekTo)}
				seekTo={(seekTo: number) => playerState.currentTrack && playTrack(playerState.currentTrack, seekTo)}
				isVideoTrack={isVideoTrack}
				videoExtras={videoExtras}
				selectedSubtitle={selectedSubtitle}
				setSelectedSubtitle={setSelectedSubtitle}
				videoTheater={videoTheater}
				toggleVideoTheater={toggleVideoTheater}
				options={options}
			/>

			<OptionsModal
				showOptions={showOptions}
				setShowOptions={setShowOptions}
				options={options}
				setOptions={setOptions}
			/>

			<PlaylistManager
				showPlaylistManager={showPlaylistManager}
				setShowPlaylistManager={setShowPlaylistManager}
				playlist={playlist}
				setPlaylist={setPlaylist}
				playTrack={playTrack}
				options={options}
			/>
			<DownloadManager showDownloadManager={showDownloadManager} setShowDownloadManager={setShowDownloadManager} />
			<StorageManager showStorage={showStorage} setShowStorage={setShowStorage} fetchFiles={fetchFiles} />
		</div>
	);
};

export default App;