@bubo-squared/gyroview 0.1.0 → 0.3.0

package/dist/packages/player/src/composition/browserPorts.js

@@ -1,11 +1,15 @@
+import { SourceByteStream } from "../../../core/src/application/download/SourceByteStream.js";
 import { Deferred } from "../../../core/src/shared/async/Deferred.js";
 import "../../../core/src/index.js";
 import { BlobRandomAccessSource } from "../../../adapters/blob/src/BlobRandomAccessSource.js";
 import "../../../adapters/blob/src/index.js";
+import { HttpByteStream } from "../../../adapters/fetch/src/HttpByteStream.js";
 import { HttpRangeSource } from "../../../adapters/fetch/src/HttpRangeSource.js";
+import { HttpResource } from "../../../adapters/fetch/src/HttpResource.js";
 import { HttpResourceLocator } from "../../../adapters/fetch/src/HttpResourceLocator.js";
 import "../../../adapters/fetch/src/index.js";
-import { MediabunnyDemuxer } from "../../../adapters/mediabunny/src/MediabunnyDemuxer.js";
+import { MediabunnyCodecReader } from "../../../adapters/mediabunny/src/MediabunnyCodecReader.js";
+import { MediabunnyAudioPackager } from "../../../adapters/mediabunny/src/MediabunnyAudioPackager.js";
 import "../../../adapters/mediabunny/src/index.js";
 import { WebCodecsVideoDecoderPort } from "../../../adapters/webcodecs/src/WebCodecsVideoDecoderPort.js";
 import "../../../adapters/webcodecs/src/index.js";
@@ -20,17 +24,46 @@ function browserPorts(options = {}) {
 	const probeTimeoutMs = options.probeTimeoutMs ?? DEFAULT_PROBE_TIMEOUT_MS;
 	return {
 		sources: browserSources(http),
-		demuxer: new MediabunnyDemuxer(),
+		codecReader: new MediabunnyCodecReader(),
+		audioPackager: new MediabunnyAudioPackager(),
 		decoderPort: new WebCodecsVideoDecoderPort(),
-		locator: new HttpResourceLocator(http),
+		locatorFor: (input) => new HttpResourceLocator(requestOptionsFor(http, input)),
 		probeDeadline: () => deadlineIn(probeTimeoutMs)
 	};
 }
 /**
-* URLs are read with HTTP ranges, blobs by slicing.
+* URLs are read with HTTP ranges, both ways over one resource; blobs by slicing, a range whole.
 */
 function browserSources(http) {
-	return { open: (input, signal) => isUrlInput(input) ? new HttpRangeSource(input.url, http, signal) : new BlobRandomAccessSource(input.blob) };
+	return { open: (input, signal) => isUrlInput(input) ? urlSource(input, http, signal) : blobSource(input) };
+}
+function urlSource(input, http, signal) {
+	const resource = new HttpResource(input.url, requestOptionsFor(http, input), signal);
+	return {
+		source: new HttpRangeSource(resource),
+		stream: new HttpByteStream(resource)
+	};
+}
+function blobSource(input) {
+	const source = new BlobRandomAccessSource(input.blob);
+	return {
+		source,
+		stream: new SourceByteStream(source)
+	};
+}
+/**
+* The shared request settings, with the input's own credentials in place of theirs when it names
+* any: how the element's `crossorigin` reaches every request for its recording (ADR 0027).
+*/
+function requestOptionsFor(http, input) {
+	const { credentials } = input;
+	return credentials === void 0 ? http : {
+		...http,
+		requestInit: {
+			...http.requestInit,
+			credentials
+		}
+	};
 }
 /**
 * A deadline that passes after `ms`: the core has no timers, so the host supplies deadlines.

package/dist/packages/player/src/composition/buildPipeline.js

@@ -5,6 +5,7 @@ import { buildStitchingSetup } from "../../../core/src/domain/stitching/Stitchin
 import { StabilizingFrameSink } from "../../../core/src/application/stabilization/StabilizingFrameSink.js";
 import { GainMatchingFrameSink } from "../../../core/src/application/gainMatching/GainMatchingFrameSink.js";
 import { WallClock } from "../../../core/src/application/playback/WallClock.js";
+import { isFlowing } from "../../../core/src/domain/playback/PlayerState.js";
 import { PlaybackSession } from "../../../core/src/application/playback/PlaybackSession.js";
 import "../../../core/src/index.js";
 import { MediaSourceAudioClock } from "../../../adapters/mse-audio/src/MediaSourceAudioClock.js";
@@ -37,6 +38,7 @@ async function buildPipeline(parts) {
 		disposables.add(() => {
 			session.dispose();
 		});
+		readAheadOnceFlowing(session, parts.opened);
 		return {
 			session,
 			renderer: drawing.renderer,
@@ -94,10 +96,10 @@ function pictureSettingsOf(drawing, session) {
 * otherwise a wall clock, with a warning saying why there is no sound.
 */
 async function clockFor(parts) {
-	const { audioTrack } = parts.opened;
-	if (!audioTrack) return wallClock(NO_AUDIO_WARNING);
+	const { soundSegments } = parts.opened;
+	if (!soundSegments) return wallClock(NO_AUDIO_WARNING);
 	try {
-		const segments = await audioTrack.openSegments();
+		const segments = soundSegments();
 		if (!MediaSourceAudioClock.isSupported(segments)) return wallClock(AUDIO_UNSUPPORTED_WARNING);
 		parts.signal.throwIfAborted();
 		return {
@@ -138,6 +140,15 @@ function sinkOver(renderer, opened) {
 		stabilizing
 	};
 }
+/**
+* The downloads read only what the picture waits for until playing first starts, so a page of
+* players that were never played stays quiet; from then on they read ahead, paused or not.
+*/
+function readAheadOnceFlowing(session, opened) {
+	session.events.on("statechange", (state) => {
+		if (isFlowing(state)) opened.readAhead();
+	});
+}
 function sessionFor(parts, clock, sink) {
 	return new PlaybackSession({
 		frameSources: parts.opened.frameSources,
@@ -145,6 +156,7 @@ function sessionFor(parts, clock, sink) {
 		clock,
 		sink,
 		duration: parts.opened.duration,
+		buffer: parts.opened.buffer,
 		pipeline: DECODE_PIPELINE_OPTIONS,
 		queueCapacity: 4
 	});

package/dist/packages/player/src/composition/openInputs.js

@@ -1,132 +1,70 @@
-import { GyroViewError, ensureInvariant, hasErrorCode } from "../../../core/src/shared/errors/GyroViewError.js";
+import { GyroViewError, ensureInvariant } from "../../../core/src/shared/errors/GyroViewError.js";
 import { seconds } from "../../../core/src/shared/units/time.js";
-import { readRecording } from "../../../core/src/application/recording/readRecording.js";
 import { timeRecording } from "../../../core/src/application/recording/timeRecording.js";
 import { detectLensLayout } from "../../../core/src/domain/format/layout/detectLensLayout.js";
 import { lensFrameOrder } from "../../../core/src/domain/stitching/StitchingSetup.js";
+import { startFileDownload } from "../../../core/src/application/download/startFileDownload.js";
+import { downloadPolicyFor } from "../../../core/src/domain/download/DownloadPolicy.js";
+import { RecordingBuffer } from "../../../core/src/application/download/RecordingBuffer.js";
 import "../../../core/src/index.js";
-import { inputName } from "../PlayerSource.js";
 import { Disposables } from "./Disposables.js";
 import { ensureDecodable } from "./ensureDecodable.js";
+import { describedInput, readInputs } from "./readInputs.js";
 //#region ../../packages/player/src/composition/openInputs.ts
 /**
-* Opens the given inputs as one recording, its metadata from the input that carries the
-* trailer. Everything opened is released again when any step fails or the attempt is aborted.
+* Opens the given inputs as one recording (ADR 0029): their sample tables and codecs read, the
+* lens layout and calibration decided, then one download a file, which the decode probe reads
+* through first. Everything opened is released again when any step fails or the attempt is
+* aborted.
 */
 async function openInputs(inputs, attempt) {
 	const disposables = new Disposables();
 	try {
-		const demuxed = await demuxInputs(inputs, attempt, disposables);
-		const layout = detectLensLayout(demuxed.inputs, demuxed.recording.info);
-		const frameSources = lensFrameOrder(layout).map((key) => trackAt(demuxed.inputs, key));
-		const calibration = calibrationOf(demuxed.recording);
+		const read = await readInputs(inputs, attempt);
+		const described = read.inputs.map((input) => describedInput(input));
+		const layout = detectLensLayout(described, read.recording.info);
+		const calibration = calibrationOf(read.recording);
+		const files = startDownloads(read.inputs, disposables);
+		const frameSources = lensFrameOrder(layout).map((key) => trackAt(files, key));
 		await ensureDecodable(frameSources, attempt);
-		const timing = await timeRecording(demuxed.recording, frameSources[0]);
+		const timing = await timeRecording(read.recording, frameSources[0]);
 		attempt.signal.throwIfAborted();
 		return assemble({
-			demuxed,
+			read,
+			files,
 			layout,
 			frameSources,
 			calibration,
 			timing
-		}, disposables);
+		}, attempt.ports.audioPackager, disposables);
 	} catch (error) {
 		disposables.disposeAll();
 		throw error;
 	}
 }
-async function demuxInputs(inputs, attempt, disposables) {
-	const { ports, signal } = attempt;
-	const given = inputs.map((input) => ({
-		input,
-		source: ports.sources.open(input, signal)
-	}));
-	const recording = await readRecordingOf(given, ports);
-	signal.throwIfAborted();
-	const openings = [...given, ...await declaredSecond(given, recording, attempt)];
-	const settled = await Promise.allSettled(openings.map(({ input, source }) => ports.demuxer.open(source, inputName(input))));
-	const opened = settled.flatMap((result) => result.status === "fulfilled" ? [result.value] : []);
-	for (const input of opened) disposables.add(() => {
-		input.dispose();
-	});
-	const failure = settled.find((result) => result.status === "rejected");
-	if (failure) throw failure.reason;
-	signal.throwIfAborted();
-	return {
-		recording,
-		inputs: opened
-	};
-}
-/**
-* The other lens file a lone file's info record says the recording is split into, when the
-* server has it: found before the lone file's tracks are read, which finding it only once they
-* fell short would read twice. A file that does not say so still gets its sibling looked for
-* once its tracks fall short (see openRecording).
-*/
-async function declaredSecond(given, recording, attempt) {
-	if (!(given.length === 1 && recording.info.fileLayout === "split-files") || !attempt.findSecondFile) return [];
-	const url = await attempt.findSecondFile();
-	attempt.signal.throwIfAborted();
-	if (url === void 0) return [];
-	const input = { url };
-	return [{
-		input,
-		source: attempt.ports.sources.open(input, attempt.signal)
-	}];
-}
-/**
-* The layout hints of a file without an info record: the tracks alone decide.
-*/
-var NO_HINTS = {
-	fileLayout: void 0,
-	trackOrder: void 0
-};
-async function readRecordingOf(openings, ports) {
-	try {
-		return await readTrailerCarrier(openings.map(({ source }) => source));
-	} catch (error) {
-		const [only] = openings;
-		if (openings.length === 1 && hasErrorCode(error, "invalid-trailer") && only) await refuseAsLoneHalf(only, ports);
-		throw error;
-	}
-}
 /**
-* A file without a trailer may be the _10_ half of an older camera's pair, which writes the
-* trailer to _00_ alone: its one square track tells, and the refusal asks for the other file
-* instead of calling it damaged. Anything else leaves the trailer's own refusal standing.
+* One download a file, each with its share of the budget.
 */
-async function refuseAsLoneHalf(opening, ports) {
-	let input;
-	try {
-		input = await ports.demuxer.open(opening.source, inputName(opening.input));
-	} catch {
-		return;
-	}
-	try {
-		detectLensLayout([input], NO_HINTS);
-	} catch (error) {
-		if (hasErrorCode(error, "missing-second-file")) throw error;
-	} finally {
-		input.dispose();
-	}
-}
-/**
-* The recording read from the input that carries the trailer: the first, or the second when the
-* first has none, as the _10_ file of an older camera's pair, which writes it to _00_ alone,
-* when the pair is given the other way round.
-*/
-async function readTrailerCarrier(sources) {
-	const [first, second] = sources;
-	ensureInvariant(first !== void 0, "a recording needs at least one input");
-	try {
-		return await readRecording(first);
-	} catch (error) {
-		if (second === void 0 || !hasErrorCode(error, "invalid-trailer")) throw error;
-		return readRecording(second);
-	}
+function startDownloads(inputs, disposables) {
+	return inputs.map(({ opened, table, codecs, size }) => {
+		const policy = downloadPolicyFor({
+			size,
+			duration: table.duration
+		}, inputs.length);
+		const file = startFileDownload({
+			table,
+			stream: opened.stream,
+			codecs,
+			policy
+		});
+		disposables.add(() => {
+			file.dispose();
+		});
+		return file;
+	});
 }
-function trackAt(inputs, key) {
-	const track = inputs[key.inputIndex]?.videoTracks[key.trackIndex];
+function trackAt(files, key) {
+	const track = files[key.inputIndex]?.videoTracks[key.trackIndex];
 	ensureInvariant(track !== void 0, `the layout points at track ${key.trackIndex} of input ${key.inputIndex}, which does not exist`);
 	return track;
 }
@@ -136,26 +74,30 @@ function calibrationOf(recording) {
 	const detail = warnings.length > 0 ? ` (${warnings.join("; ")})` : "";
 	throw new GyroViewError("no-calibration", `the recording carries no usable lens calibration, so it cannot be stitched${detail}`);
 }
-function assemble(parts, disposables) {
-	const { demuxed, layout, frameSources, calibration, timing } = parts;
-	const duration = seconds(Math.min(...demuxed.inputs.map((input) => input.duration)));
-	const [audioTrack] = demuxed.inputs.flatMap((input) => input.audioTracks);
+function assemble(parts, packager, disposables) {
+	const { read, files, layout, frameSources, calibration, timing } = parts;
+	const duration = seconds(Math.min(...files.map((file) => file.duration)));
+	const [sound] = files.flatMap((file) => file.audioTracks);
 	return {
-		recording: demuxed.recording,
+		recording: read.recording,
 		layout,
 		frameSources,
 		calibration,
 		duration,
 		frameTimes: timing.frameTimes,
 		motion: timing.motion,
-		audioTrack,
-		metadata: metadataOf(parts, duration, audioTrack !== void 0),
+		soundSegments: sound && (() => packager.segmentsOf(sound.samples, sound.configuration)),
+		metadata: metadataOf(parts, duration, sound !== void 0),
 		warnings: timing.warnings,
+		readAhead: () => {
+			for (const file of files) file.download.startReadingAhead();
+		},
+		buffer: new RecordingBuffer(files.map((file) => file.download)),
 		dispose: disposables.toDisposer()
 	};
 }
 function metadataOf(parts, duration, hasAudio) {
-	const { info } = parts.demuxed.recording;
+	const { info } = parts.read.recording;
 	const { motion } = parts.timing;
 	return {
 		model: info.model,

package/dist/packages/player/src/composition/openRecording.js

@@ -21,7 +21,7 @@ async function openRecording(source, ports, signal) {
 		const second = await findSecondFile();
 		signal.throwIfAborted();
 		if (!second) throw error;
-		return openInputs([source.main, { url: second }], attempt);
+		return openInputs([source.main, second], attempt);
 	}
 }
 /**
@@ -32,11 +32,22 @@ function attemptFor(source, ports, signal) {
 	return source.second === void 0 && isUrlInput(main) ? {
 		ports,
 		signal,
-		findSecondFile: lazy(() => locateOtherLensFile(main.url, ports.locator))
+		findSecondFile: lazy(() => otherLensFileOf(main, ports))
 	} : {
 		ports,
 		signal
 	};
 }
+/**
+* The other lens file beside a lone one, when the server has it: one recording, so it is read
+* as the lone file is, with the same credentials.
+*/
+async function otherLensFileOf(main, ports) {
+	const url = await locateOtherLensFile(main.url, ports.locatorFor(main));
+	return url === void 0 ? void 0 : {
+		...main,
+		url
+	};
+}
 //#endregion
 export { openRecording };

package/dist/packages/player/src/composition/readInputs.js

@@ -0,0 +1,111 @@
+import { ensureInvariant, hasErrorCode } from "../../../core/src/shared/errors/GyroViewError.js";
+import { readRecording } from "../../../core/src/application/recording/readRecording.js";
+import { readSampleTable } from "../../../core/src/application/recording/readSampleTable.js";
+import { detectLensLayout } from "../../../core/src/domain/format/layout/detectLensLayout.js";
+import "../../../core/src/index.js";
+import { inputName } from "../PlayerSource.js";
+//#region ../../packages/player/src/composition/readInputs.ts
+/**
+* Reads the given inputs, and the other lens file an info record declares, as one recording: its
+* metadata from the input that carries the trailer, and every input's sample table and codecs.
+*/
+async function readInputs(inputs, attempt) {
+	const { ports, signal } = attempt;
+	const given = inputs.map((input) => ({
+		input,
+		opened: ports.sources.open(input, signal)
+	}));
+	const recording = await readRecordingOf(given, ports);
+	signal.throwIfAborted();
+	const openings = [...given, ...await declaredSecond(given, recording, attempt)];
+	const read = await Promise.all(openings.map((opening) => readInput(opening, ports)));
+	signal.throwIfAborted();
+	return {
+		recording,
+		inputs: read
+	};
+}
+function describedInput(read) {
+	const videoTracks = read.codecs.video.map(({ description }) => ({ description }));
+	return {
+		name: inputName(read.input),
+		videoTracks
+	};
+}
+async function readInput(opening, ports) {
+	const { source } = opening.opened;
+	const { table, movieBytes } = await readSampleTable(source);
+	const codecs = await ports.codecReader.read(movieBytes);
+	return {
+		...opening,
+		table,
+		codecs,
+		size: await source.size()
+	};
+}
+/**
+* The other lens file a lone file's info record says the recording is split into, when the
+* server has it: found before the lone file's tracks are read, which finding it only once they
+* fell short would read twice. A file that does not say so still gets its sibling looked for
+* once its tracks fall short (see openRecording).
+*/
+async function declaredSecond(given, recording, attempt) {
+	if (!(given.length === 1 && recording.info.fileLayout === "split-files") || !attempt.findSecondFile) return [];
+	const input = await attempt.findSecondFile();
+	attempt.signal.throwIfAborted();
+	return input === void 0 ? [] : [{
+		input,
+		opened: attempt.ports.sources.open(input, attempt.signal)
+	}];
+}
+/**
+* The layout hints of a file without an info record: the tracks alone decide.
+*/
+var NO_HINTS = {
+	fileLayout: void 0,
+	trackOrder: void 0
+};
+async function readRecordingOf(openings, ports) {
+	try {
+		return await readTrailerCarrier(openings.map(({ opened }) => opened.source));
+	} catch (error) {
+		const [only] = openings;
+		if (openings.length === 1 && hasErrorCode(error, "invalid-trailer") && only) await refuseAsLoneHalf(only, ports);
+		throw error;
+	}
+}
+/**
+* A file without a trailer may be the _10_ half of an older camera's pair, which writes the
+* trailer to _00_ alone: its one square track tells, and the refusal asks for the other file
+* instead of calling it damaged. Anything else leaves the trailer's own refusal standing.
+*/
+async function refuseAsLoneHalf(opening, ports) {
+	let read;
+	try {
+		read = await readInput(opening, ports);
+	} catch {
+		return;
+	}
+	try {
+		detectLensLayout([describedInput(read)], NO_HINTS);
+	} catch (error) {
+		if (hasErrorCode(error, "missing-second-file")) throw error;
+	}
+}
+/**
+* The recording read from the input that carries the trailer: the first, or the second when the
+* first has none, as the _10_ file of an older camera's pair, which writes it to _00_ alone,
+* when the pair is given the other way round.
+*/
+async function readTrailerCarrier(sources) {
+	const [first, second] = sources;
+	ensureInvariant(first !== void 0, "a recording needs at least one input");
+	try {
+		return await readRecording(first);
+	} catch (error) {
+		if (second === void 0 || !hasErrorCode(error, "invalid-trailer")) throw error;
+		return readRecording(second);
+	}
+}
+//#endregion
+export { describedInput, readInputs };

package/dist/packages/player/src/controls/ChoiceMenu.js

@@ -14,22 +14,27 @@ var FOCUS_STEPS = /* @__PURE__ */ new Map([
 var ON_THE_WAY_IN = { capture: true };
 /**
 * A button opening a popup of choices with the current one checked, as the ARIA menu pattern
-* has it. The button toggles it; a choice, Escape, Tab, a press outside it or the focus moving
-* elsewhere closes it; the arrow keys move between the choices, which are out of the tab order.
+* has it; the button shows the checked one. The button toggles it; a choice, its close button,
+* Escape, Tab, a press outside it or the focus moving elsewhere closes it; the arrow keys move between the choices, which are out of the tab order.
 * A press outside only closes it, so a tap on the picture does not also toggle play, and keys
 * pressed in it stay with it, so one Escape does not also leave fullscreen and the arrows do not
 * turn the view.
 */
 var ChoiceMenu = class {
 	parts;
+	host;
 	items;
-	constructor(root, parts, choose) {
+	constructor(root, parts, host) {
 		this.parts = parts;
+		this.host = host;
 		this.items = [...parts.popup.querySelectorAll(":scope [role=\"menuitemradio\"]")];
 		for (const item of this.items) item.addEventListener("click", () => {
 			this.closeToButton();
 			const { choice } = item.dataset;
-			if (choice !== void 0) choose(choice);
+			if (choice !== void 0) host.choose(choice);
+		});
+		parts.close.addEventListener("click", () => {
+			this.closeToButton();
 		});
 		this.bindButton();
 		this.bindDismissal(root);
@@ -38,8 +43,15 @@ var ChoiceMenu = class {
 	get isOpen() {
 		return !this.parts.popup.hidden;
 	}
+	/**
+	* Checks `choice` and shows it on the button: its icon, and the words the button is named by.
+	*/
 	markChosen(choice) {
 		for (const item of this.items) item.setAttribute("aria-checked", String(item.dataset["choice"] === choice));
+		const icon = this.items.find((item) => item.dataset["choice"] === choice)?.querySelector(":scope .choice-icon > svg");
+		this.parts.icon.replaceChildren(...icon ? [icon.cloneNode(true)] : []);
+		this.parts.button.dataset["choice"] = choice;
+		this.host.wording.write(this.parts.button);
 	}
 	/**
 	* Shows or hides the button; a menu that goes away closes.

package/dist/packages/player/src/controls/PictureMenus.js

@@ -10,19 +10,33 @@ import { ChoiceMenu } from "./ChoiceMenu.js";
 * shown in a stitched view mode.
 */
 var PictureMenus = class {
-	player;
 	viewMode;
 	stabilization;
-	constructor(root, parts, player) {
+	player;
+	constructor(root, parts, host) {
+		const { player, wording } = host;
 		this.player = player;
-		this.viewMode = new ChoiceMenu(root, parts.viewMode, (choice) => {
-			const mode = viewModeOf(choice);
-			if (mode) player.setViewMode(mode);
+		this.viewMode = new ChoiceMenu(root, parts.viewMode, {
+			wording,
+			choose: (choice) => {
+				const mode = viewModeOf(choice);
+				if (mode) player.setViewMode(mode);
+			}
 		});
-		this.stabilization = new ChoiceMenu(root, parts.stabilization, (choice) => {
-			const mode = stabilizationModeOf(choice);
-			if (mode) player.setStabilization(mode);
+		this.stabilization = new ChoiceMenu(root, parts.stabilization, {
+			wording,
+			choose: (choice) => {
+				const mode = stabilizationModeOf(choice);
+				if (mode) player.setStabilization(mode);
+			}
 		});
+		this.followPlayer();
+	}
+	/**
+	* Each menu checks the mode in effect, now and whenever it changes.
+	*/
+	followPlayer() {
+		const { player } = this;
 		player.events.on("viewmodechange", (mode) => {
 			this.viewMode.markChosen(mode);
 			this.offerStabilization();

package/dist/packages/player/src/controls/SeekBar.js

@@ -2,6 +2,7 @@ import { messageOf } from "../../../core/src/shared/errors/GyroViewError.js";
 import "../../../core/src/index.js";
 import "./keyboard.js";
 import { formatTime } from "./formatTime.js";
+import { showSliderFill } from "./sliderFill.js";
 //#region ../../packages/player/src/controls/SeekBar.ts
 /**
 * The slider's arrow keys and the direction each seeks in: the native step is the one the
@@ -110,15 +111,17 @@ var SeekBar = class {
 		this.host.player.seek(Number(this.parts.seek.value));
 	}
 	/**
-	* The time beside the bar, and the same time for screen readers, which would read the slider's
-	* raw seconds.
+	* The time beside the bar and the bar filled up to it, and the same time for screen readers,
+	* which would read the slider's raw seconds.
 	*/
 	showTime(time) {
 		const [shown, total] = [formatTime(time), formatTime(this.host.player.duration)];
-		this.parts.time.textContent = `${shown} / ${total}`;
+		this.parts.elapsed.textContent = shown;
+		this.parts.total.textContent = `/ ${total}`;
 		const { position } = this.host.wording.current.labels;
 		const spoken = position.replaceAll("{time}", () => shown).replaceAll("{duration}", () => total);
 		this.parts.seek.setAttribute("aria-valuetext", spoken);
+		showSliderFill(this.parts.seek);
 	}
 };
 //#endregion

package/dist/packages/player/src/controls/SoundControls.js

@@ -1,4 +1,5 @@
 import { iconNode } from "./icons.js";
+import { showSliderFill } from "./sliderFill.js";
 //#region ../../packages/player/src/controls/SoundControls.ts
 var PERCENT = 100;
 /**
@@ -35,6 +36,7 @@ var SoundControls = class {
 		this.parts.mute.setAttribute("aria-pressed", String(isMuted));
 		this.parts.volume.value = String(shown);
 		this.parts.volume.setAttribute("aria-valuetext", `${Math.round(shown * PERCENT)}%`);
+		showSliderFill(this.parts.volume);
 	}
 };
 //#endregion

package/dist/packages/player/src/controls/TransportButtons.js

@@ -1,8 +1,8 @@
 import { iconNode } from "./icons.js";
 //#region ../../packages/player/src/controls/TransportButtons.ts
 /**
-* Play and pause, on the bar and over the picture, and stop; the play buttons say what a press
-* does.
+* Play and pause, on the bar and over the picture; the buttons say what a press does. Stopping
+* is left to the S key and `stop()`.
 */
 var TransportButtons = class {
 	parts;
@@ -14,9 +14,6 @@ var TransportButtons = class {
 		for (const button of [parts.play, parts.bigPlay]) button.addEventListener("click", () => {
 			host.togglePlay();
 		});
-		parts.stop.addEventListener("click", () => {
-			player.stop();
-		});
 		player.events.on("statuschange", () => {
 			this.reflect(player.isPaused);
 		});