@simon_he/vue-tui 1.1.6 → 1.1.7

package/dist/TVideo-D9AOiyq2.js

@@ -0,0 +1,948 @@
+import { TerminalGraphicsActivityKey, intersectRect, textCellWidth$1 as textCellWidth, translateRect, useLayout, useTerminal, useVisibility } from "./rect-JzWMJxxc.js";
+import { TText, TView, createFrameMailbox } from "./frame-mailbox-DaTrfyaF.js";
+import { createTerminalGraphicPngSequence, getTerminalGraphicsOutput, getTerminalGraphicsOutputVersion, subscribeTerminalGraphicsOutput } from "./terminal-graphics-DpSL29OQ.js";
+import { TAgentTerminalGraphic } from "./TAgentTerminalGraphic-B8-YZfuP.js";
+import { computed, defineComponent, getCurrentInstance, h, inject, markRaw, onBeforeUnmount, shallowRef, watch } from "vue";
+
+//#region src/vue/components/TVideo.ts
+const DEFAULT_MAX_FPS = 12;
+const DEFAULT_MAX_PIXEL_WIDTH = 640;
+const DEFAULT_MAX_PIXEL_HEIGHT = 360;
+const MAX_PIXEL_DIMENSION = 4096;
+const MAX_FRAME_BYTES = 8 * 1024 * 1024;
+const MAX_GRAY8_FPS = 10;
+const MAX_GRAY8_WIDTH = 512;
+const MAX_GRAY8_HEIGHT = 256;
+const ASCII_RAMP = " .:-=+*#%@";
+const CONTROL_REFRESH_MS = 250;
+const PLAYBACK_RATES = [
+	1,
+	2,
+	3
+];
+function positiveInt(value, fallback, max) {
+	const parsed = Math.floor(Number(value));
+	if (!Number.isFinite(parsed) || parsed <= 0) return Math.min(max, fallback);
+	return Math.min(max, parsed);
+}
+function positiveNumber(value, fallback, max) {
+	const parsed = Number(value);
+	if (!Number.isFinite(parsed) || parsed <= 0) return fallback;
+	return Math.min(max, parsed);
+}
+function playbackRate(value) {
+	return value === 2 || value === 3 ? value : 1;
+}
+function optionalDuration(value) {
+	const parsed = Number(value);
+	return Number.isFinite(parsed) && parsed > 0 ? parsed : void 0;
+}
+function formatPlaybackTime(valueMs, hourDigits = 0) {
+	if (valueMs == null) return "--:--";
+	const seconds = Math.max(0, Math.floor(valueMs / 1e3));
+	const hours = Math.floor(seconds / 3600);
+	const minutes = Math.floor(seconds % 3600 / 60);
+	const remainder = seconds % 60;
+	if (hours > 0 || hourDigits > 0) return `${String(hours).padStart(Math.max(1, hourDigits), "0")}:${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+	return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
+}
+function readUint32(bytes, offset) {
+	return bytes[offset] * 16777216 + (bytes[offset + 1] << 16) + (bytes[offset + 2] << 8) + bytes[offset + 3] >>> 0;
+}
+function normalizeFrame(frame) {
+	if (frame.format === "gray8") {
+		const pixelWidth$1 = Math.floor(Number(frame.pixelWidth));
+		const pixelHeight$1 = Math.floor(Number(frame.pixelHeight));
+		const pixels = frame.pixels;
+		if (!Number.isFinite(pixelWidth$1) || !Number.isFinite(pixelHeight$1) || pixelWidth$1 <= 0 || pixelHeight$1 <= 0 || pixelWidth$1 > MAX_GRAY8_WIDTH || pixelHeight$1 > MAX_GRAY8_HEIGHT || !(pixels instanceof Uint8Array) || pixels.length !== pixelWidth$1 * pixelHeight$1 || pixels.length > MAX_FRAME_BYTES) throw new Error("TVideo gray8 frame must match its bounded pixel dimensions");
+		return {
+			format: "gray8",
+			pixels,
+			timestampMs: Math.max(0, Number(frame.timestampMs) || 0),
+			pixelWidth: pixelWidth$1,
+			pixelHeight: pixelHeight$1,
+			fingerprint: frame.fingerprint,
+			durationMs: optionalDuration(frame.durationMs)
+		};
+	}
+	const png = frame.png;
+	if (!(png instanceof Uint8Array) || png.length < 24 || png.length > MAX_FRAME_BYTES) throw new Error("TVideo frame must contain a bounded PNG Uint8Array");
+	if (png[0] !== 137 || png[1] !== 80 || png[2] !== 78 || png[3] !== 71 || png[4] !== 13 || png[5] !== 10 || png[6] !== 26 || png[7] !== 10) throw new Error("TVideo frame source emitted invalid PNG data");
+	const pixelWidth = readUint32(png, 16);
+	const pixelHeight = readUint32(png, 20);
+	if (pixelWidth <= 0 || pixelHeight <= 0 || pixelWidth > MAX_PIXEL_DIMENSION || pixelHeight > MAX_PIXEL_DIMENSION) throw new Error(`TVideo frame has an unsupported size: ${pixelWidth}x${pixelHeight}`);
+	return {
+		format: "png",
+		png,
+		timestampMs: Math.max(0, Number(frame.timestampMs) || 0),
+		pixelWidth,
+		pixelHeight,
+		fingerprint: frame.fingerprint,
+		durationMs: optionalDuration(frame.durationMs)
+	};
+}
+function frameBytes(frame) {
+	return frame.format === "gray8" ? frame.pixels : frame.png;
+}
+function gray8ToAscii(frame, cellWidth) {
+	const lines = [];
+	const width = Math.max(1, Math.floor(cellWidth));
+	for (let y = 0; y < frame.pixelHeight; y++) {
+		let line = "";
+		const rowStart = y * frame.pixelWidth;
+		for (let x = 0; x < frame.pixelWidth; x++) {
+			const value = frame.pixels[rowStart + x];
+			const glyph = ASCII_RAMP[Math.min(ASCII_RAMP.length - 1, value * ASCII_RAMP.length >> 8)];
+			line += `${glyph}${glyph}`;
+		}
+		lines.push(line.slice(0, width));
+	}
+	return lines.join("\n");
+}
+function sameBytes(left, right) {
+	if (left.length !== right.length) return false;
+	for (let index = 0; index < left.length; index++) if (left[index] !== right[index]) return false;
+	return true;
+}
+function bytesToBase64(bytes) {
+	const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+	const chunks = [];
+	let chunk = "";
+	for (let index = 0; index < bytes.length; index += 3) {
+		const a = bytes[index];
+		const hasB = index + 1 < bytes.length;
+		const hasC = index + 2 < bytes.length;
+		const b = hasB ? bytes[index + 1] : 0;
+		const c = hasC ? bytes[index + 2] : 0;
+		chunk += alphabet[a >> 2] + alphabet[(a & 3) << 4 | b >> 4] + (hasB ? alphabet[(b & 15) << 2 | c >> 6] : "=") + (hasC ? alphabet[c & 63] : "=");
+		if (chunk.length >= 16384) {
+			chunks.push(chunk);
+			chunk = "";
+		}
+	}
+	if (chunk) chunks.push(chunk);
+	return chunks.join("");
+}
+function createFrameRenderer(frame, cellWidth) {
+	if (frame.format === "gray8") {
+		const text = gray8ToAscii(frame, cellWidth);
+		return () => ({
+			type: "text",
+			text
+		});
+	}
+	let base64;
+	return (_content, context) => {
+		if (!context.visible || !context.rawVisible) return null;
+		base64 ?? (base64 = bytesToBase64(frame.png));
+		const protocol = context.protocol;
+		if (protocol !== "kitty" && protocol !== "iterm2") return null;
+		return createTerminalGraphicPngSequence({
+			protocol,
+			base64,
+			imageId: context.imageId,
+			placementId: context.placementId,
+			cols: context.width,
+			rows: context.height,
+			sourceWidth: frame.pixelWidth,
+			sourceHeight: frame.pixelHeight,
+			placementColumns: Math.max(1, Math.floor(context.viewport.rect.w)),
+			placementRows: Math.max(1, Math.floor(context.viewport.rect.h)),
+			rect: context.viewport.rect,
+			fullRect: context.viewport.fullRect,
+			freeImageData: true
+		});
+	};
+}
+function errorMessage(error) {
+	return error instanceof Error ? error.message : String(error);
+}
+const tVideoProps = {
+	x: {
+		type: Number,
+		required: true
+	},
+	y: {
+		type: Number,
+		required: true
+	},
+	w: {
+		type: Number,
+		required: true
+	},
+	h: {
+		type: Number,
+		required: true
+	},
+	zIndex: {
+		type: Number,
+		default: 0
+	},
+	src: {
+		type: String,
+		required: true
+	},
+	frameSource: {
+		type: Function,
+		required: true
+	},
+	paused: {
+		type: Boolean,
+		default: void 0
+	},
+	playbackRate: {
+		type: Number,
+		default: void 0
+	},
+	controls: {
+		type: Boolean,
+		default: false
+	},
+	controlsLayout: {
+		type: String,
+		default: "compact"
+	},
+	durationMs: {
+		type: Number,
+		default: void 0
+	},
+	loop: {
+		type: Boolean,
+		default: false
+	},
+	maxFps: {
+		type: Number,
+		default: DEFAULT_MAX_FPS
+	},
+	pixelWidth: {
+		type: Number,
+		default: void 0
+	},
+	pixelHeight: {
+		type: Number,
+		default: void 0
+	},
+	fallback: {
+		type: String,
+		default: "[video]"
+	},
+	style: {
+		type: Object,
+		default: void 0
+	},
+	clear: {
+		type: Boolean,
+		default: true
+	}
+};
+const TVideo = defineComponent({
+	name: "TVideo",
+	props: tVideoProps,
+	emits: {
+		frame: (_event) => true,
+		ended: () => true,
+		error: (_error) => true,
+		seek: (_event) => true,
+		"update:paused": (_paused) => true,
+		"update:playbackRate": (_rate) => true
+	},
+	setup(props, { emit }) {
+		const instance = getCurrentInstance();
+		const { terminal, scheduler } = useTerminal();
+		const layout = useLayout();
+		const { visible, rootProps } = useVisibility({ provide: true });
+		const graphicsActivity = inject(TerminalGraphicsActivityKey, null);
+		const frameRenderer = shallowRef();
+		const playbackError = shallowRef("");
+		const internalPaused = shallowRef(props.paused ?? false);
+		const internalPlaybackRate = shallowRef(playbackRate(props.playbackRate));
+		const discoveredDurationMs = shallowRef();
+		const displayedTimestampMs = shallowRef(0);
+		const seekPreviewMs = shallowRef();
+		const seeking = shallowRef(false);
+		const terminalSizeVersion = shallowRef(0);
+		const graphicsOutputVersion = shallowRef(getTerminalGraphicsOutputVersion(terminal));
+		const placementKey = `TVideo:${instance?.uid ?? "unknown"}`;
+		const mailboxId = `${placementKey}:frame`;
+		let alive = true;
+		let generation = 0;
+		let activeAbort = null;
+		let lastSourceBytes = null;
+		let lastQueuedBytes = null;
+		let lastQueuedFormat = null;
+		let lastQueuedFingerprint;
+		let lastTimestampMs = 0;
+		let droppedFrames = 0;
+		let pendingEndedGeneration = null;
+		let suppressNextVideoClick = false;
+		let controlPointerCapture = null;
+		const unsubscribeTerminalResize = terminal.on("resize", () => {
+			terminalSizeVersion.value++;
+		});
+		const unsubscribeGraphicsOutput = subscribeTerminalGraphicsOutput(terminal, () => {
+			graphicsOutputVersion.value = getTerminalGraphicsOutputVersion(terminal);
+		});
+		const showControls = computed(() => props.controls && Math.floor(props.w) >= 14 && Math.floor(props.h) >= 2);
+		const resolvedControlsLayout = computed(() => props.controlsLayout === "cinema" && Math.floor(props.h) >= 3 ? "cinema" : "compact");
+		const controlRows = computed(() => showControls.value ? resolvedControlsLayout.value === "cinema" ? 2 : 1 : 0);
+		const videoHeight = computed(() => Math.max(1, Math.floor(props.h) - controlRows.value));
+		const resolvedMaxFps = computed(() => positiveNumber(props.maxFps, DEFAULT_MAX_FPS, 60));
+		const resolvedPixelSize = computed(() => {
+			const desiredWidth = Math.max(2, Math.floor(props.w) * 8);
+			const desiredHeight = Math.max(2, videoHeight.value * 16);
+			if (props.pixelWidth == null && props.pixelHeight == null) {
+				const scale = Math.min(1, DEFAULT_MAX_PIXEL_WIDTH / desiredWidth, DEFAULT_MAX_PIXEL_HEIGHT / desiredHeight);
+				return {
+					width: Math.max(2, Math.floor(desiredWidth * scale)),
+					height: Math.max(2, Math.floor(desiredHeight * scale))
+				};
+			}
+			if (props.pixelWidth != null && props.pixelHeight == null) {
+				const width = positiveInt(props.pixelWidth, desiredWidth, MAX_PIXEL_DIMENSION);
+				const inferredHeight = width * desiredHeight / desiredWidth;
+				const scale = Math.min(1, MAX_PIXEL_DIMENSION / inferredHeight);
+				return {
+					width: Math.max(2, Math.floor(width * scale)),
+					height: Math.max(2, Math.floor(inferredHeight * scale))
+				};
+			}
+			if (props.pixelWidth == null && props.pixelHeight != null) {
+				const height = positiveInt(props.pixelHeight, desiredHeight, MAX_PIXEL_DIMENSION);
+				const inferredWidth = height * desiredWidth / desiredHeight;
+				const scale = Math.min(1, MAX_PIXEL_DIMENSION / inferredWidth);
+				return {
+					width: Math.max(2, Math.floor(inferredWidth * scale)),
+					height: Math.max(2, Math.floor(height * scale))
+				};
+			}
+			return {
+				width: positiveInt(props.pixelWidth, desiredWidth, MAX_PIXEL_DIMENSION),
+				height: positiveInt(props.pixelHeight, desiredHeight, MAX_PIXEL_DIMENSION)
+			};
+		});
+		const resolvedPixelWidth = computed(() => resolvedPixelSize.value.width);
+		const resolvedPixelHeight = computed(() => resolvedPixelSize.value.height);
+		const paintable = computed(() => {
+			terminalSizeVersion.value;
+			if (!visible.value) return false;
+			const size = terminal.size();
+			const terminalRect = {
+				x: 0,
+				y: 0,
+				w: Math.max(0, Math.floor(size.cols)),
+				h: Math.max(0, Math.floor(size.rows))
+			};
+			const clip = layout.clipRect ? intersectRect(layout.clipRect, terminalRect) : terminalRect;
+			if (!clip) return false;
+			const rect = translateRect({
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: videoHeight.value
+			}, layout.originX, layout.originY);
+			const visibleRect = intersectRect(rect, clip);
+			return Boolean(visibleRect && visibleRect.w > 0 && visibleRect.h > 0);
+		});
+		const graphicsProtocol = computed(() => {
+			graphicsOutputVersion.value;
+			return getTerminalGraphicsOutput(terminal)?.capabilities.preferredProtocol ?? null;
+		});
+		const preferredFormat = computed(() => graphicsProtocol.value === "kitty" || graphicsProtocol.value === "iterm2" ? "png" : "gray8");
+		const resolvedDecodeFps = computed(() => preferredFormat.value === "gray8" ? Math.min(MAX_GRAY8_FPS, resolvedMaxFps.value) : resolvedMaxFps.value);
+		const resolvedDecodeWidth = computed(() => preferredFormat.value === "gray8" ? positiveInt(Math.ceil(props.w / 2), 1, MAX_GRAY8_WIDTH) : resolvedPixelWidth.value);
+		const resolvedDecodeHeight = computed(() => preferredFormat.value === "gray8" ? positiveInt(videoHeight.value, 1, MAX_GRAY8_HEIGHT) : resolvedPixelHeight.value);
+		const resolvedDurationMs = computed(() => optionalDuration(props.durationMs) ?? discoveredDurationMs.value);
+		const effectivePaused = computed(() => props.paused ?? internalPaused.value);
+		const effectivePlaybackRate = computed(() => props.playbackRate == null ? internalPlaybackRate.value : playbackRate(props.playbackRate));
+		const controlTimestampMs = computed(() => seekPreviewMs.value ?? displayedTimestampMs.value);
+		const timeHourDigits = computed(() => {
+			const duration = resolvedDurationMs.value;
+			if (!duration || duration < 36e5) return 0;
+			return String(Math.floor(duration / 36e5)).length;
+		});
+		const currentTimeText = computed(() => formatPlaybackTime(controlTimestampMs.value, timeHourDigits.value));
+		const durationTimeText = computed(() => formatPlaybackTime(resolvedDurationMs.value, timeHourDigits.value));
+		const controlLayout = computed(() => {
+			const width = Math.max(1, Math.floor(props.w));
+			const progressY = videoHeight.value;
+			const current = currentTimeText.value;
+			const duration = durationTimeText.value;
+			const timeWidth = Math.max(textCellWidth(current), textCellWidth(duration));
+			const ratesWidth = 8;
+			if (resolvedControlsLayout.value === "cinema") {
+				const ratesX$1 = Math.max(3, width - ratesWidth);
+				const timeText = `${current} / ${duration}`;
+				return {
+					width,
+					kind: "cinema",
+					progressX: 0,
+					progressY,
+					progressWidth: width,
+					actionY: progressY + 1,
+					ratesX: ratesX$1,
+					showAllRates: true,
+					showTimes: 3 + textCellWidth(timeText) < ratesX$1,
+					current,
+					duration,
+					timeText,
+					timeWidth,
+					currentX: 3,
+					totalX: 0
+				};
+			}
+			const ratesX = width - ratesWidth;
+			const progressX = timeWidth + 4;
+			const totalX = ratesX - timeWidth - 1;
+			const progressWidth = totalX - progressX - 1;
+			if (progressWidth >= 4) return {
+				width,
+				kind: "compact",
+				progressX,
+				progressY,
+				progressWidth,
+				actionY: progressY,
+				ratesX,
+				showAllRates: true,
+				showTimes: true,
+				current,
+				duration,
+				timeText: "",
+				timeWidth,
+				currentX: 3,
+				totalX
+			};
+			const compactRatesX = Math.max(4, width - 2);
+			return {
+				width,
+				kind: "compact",
+				progressX: 3,
+				progressY,
+				progressWidth: Math.max(1, compactRatesX - 4),
+				actionY: progressY,
+				ratesX: compactRatesX,
+				showAllRates: false,
+				showTimes: false,
+				current,
+				duration,
+				timeText: "",
+				timeWidth,
+				currentX: 0,
+				totalX: 0
+			};
+		});
+		const rateStyles = computed(() => PLAYBACK_RATES.map((rate) => rate === effectivePlaybackRate.value ? {
+			...props.style,
+			inverse: true
+		} : props.style));
+		const remainingProgressStyle = computed(() => ({
+			...props.style,
+			dim: true
+		}));
+		const progressThumbStyle = computed(() => ({
+			...props.style,
+			inverse: true
+		}));
+		const progressSegments = computed(() => {
+			const { progressWidth } = controlLayout.value;
+			const duration = resolvedDurationMs.value;
+			if (!duration) return {
+				playedWidth: 0,
+				thumbWidth: 0,
+				remainingWidth: progressWidth
+			};
+			const ratio = Math.max(0, Math.min(1, controlTimestampMs.value / duration));
+			const marker = Math.round(ratio * Math.max(0, progressWidth - 1));
+			return {
+				playedWidth: marker,
+				thumbWidth: 1,
+				remainingWidth: progressWidth - marker - 1
+			};
+		});
+		const controlFill = computed(() => " ".repeat(controlLayout.value.width));
+		const progressGlyphs = computed(() => ({
+			played: "━".repeat(progressSegments.value.playedWidth),
+			remaining: "─".repeat(progressSegments.value.remainingWidth)
+		}));
+		const playbackEnabled = computed(() => alive && !effectivePaused.value && !graphicsActivity?.scrolling.value && props.src.trim().length > 0 && paintable.value);
+		const shouldPlay = computed(() => playbackEnabled.value && !seeking.value);
+		const visibleFallback = computed(() => playbackError.value ? `${props.fallback}: ${playbackError.value}` : props.fallback);
+		function timelineTimestamp(timestampMs) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return Math.max(0, timestampMs);
+			if (props.loop) return Math.max(0, timestampMs) % duration;
+			return Math.max(0, Math.min(duration, timestampMs));
+		}
+		function seekTimestamp(timestampMs) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return Math.max(0, timestampMs);
+			const end = props.loop ? Math.max(0, duration - 1) : duration;
+			return Math.max(0, Math.min(end, timestampMs));
+		}
+		function updateTimestamp(timestampMs, force = false) {
+			const next = timelineTimestamp(timestampMs);
+			lastTimestampMs = next;
+			if (!showControls.value) return;
+			const threshold = CONTROL_REFRESH_MS * effectivePlaybackRate.value;
+			if (force || next < displayedTimestampMs.value || Math.abs(next - displayedTimestampMs.value) >= threshold) displayedTimestampMs.value = next;
+		}
+		function commitFrame(frame, dropped) {
+			if (!alive) return;
+			droppedFrames += dropped;
+			frameRenderer.value = markRaw(createFrameRenderer(frame, props.w));
+			updateTimestamp(frame.timestampMs);
+			const durationMs = resolvedDurationMs.value;
+			emit("frame", {
+				timestampMs: frame.timestampMs,
+				pixelWidth: frame.pixelWidth,
+				pixelHeight: frame.pixelHeight,
+				droppedFrames,
+				...durationMs ? { durationMs } : {},
+				playbackRate: effectivePlaybackRate.value
+			});
+		}
+		const mailbox = createFrameMailbox({
+			scheduler,
+			id: mailboxId,
+			reason: "stream",
+			priority: "low",
+			apply(frame, _context, meta) {
+				commitFrame(frame, meta.dropped);
+				if (pendingEndedGeneration === generation) {
+					pendingEndedGeneration = null;
+					emit("ended");
+				}
+			}
+		});
+		function stopPlayback() {
+			generation++;
+			pendingEndedGeneration = null;
+			const discardedPendingFrame = mailbox.hasPending();
+			mailbox.cancel();
+			if (discardedPendingFrame) {
+				lastQueuedBytes = null;
+				lastQueuedFormat = null;
+				lastQueuedFingerprint = void 0;
+			}
+			activeAbort?.abort();
+			activeAbort = null;
+		}
+		function resetQueuedFrameIdentity() {
+			lastSourceBytes = null;
+			lastQueuedBytes = null;
+			lastQueuedFormat = null;
+			lastQueuedFingerprint = void 0;
+		}
+		function setPaused(paused) {
+			if (effectivePaused.value === paused) return;
+			if (props.paused == null) internalPaused.value = paused;
+			emit("update:paused", paused);
+		}
+		function setPlaybackRate(rate) {
+			const next = playbackRate(rate);
+			if (effectivePlaybackRate.value === next) return;
+			if (props.playbackRate == null) internalPlaybackRate.value = next;
+			emit("update:playbackRate", next);
+		}
+		function applySeek(timestampMs, restart) {
+			const parsed = Number(timestampMs);
+			if (!Number.isFinite(parsed)) return;
+			stopPlayback();
+			resetQueuedFrameIdentity();
+			const next = seekTimestamp(parsed);
+			updateTimestamp(next, true);
+			seekPreviewMs.value = void 0;
+			const durationMs = resolvedDurationMs.value;
+			emit("seek", {
+				timestampMs: next,
+				...durationMs ? { durationMs } : {}
+			});
+			if (restart) startPlayback(effectivePaused.value);
+		}
+		function controlCell(event) {
+			return {
+				x: Math.floor(event.cellX - layout.originX - props.x),
+				y: Math.floor(event.cellY - layout.originY - props.y)
+			};
+		}
+		function previewSeekAt(cellX) {
+			const duration = resolvedDurationMs.value;
+			if (!duration) return;
+			const { progressX, progressWidth } = controlLayout.value;
+			const offset = Math.max(0, Math.min(progressWidth - 1, cellX - progressX));
+			seekPreviewMs.value = progressWidth <= 1 ? 0 : offset / Math.max(1, progressWidth - 1) * duration;
+		}
+		function captureControlPointer(event) {
+			const native = event.nativeEvent;
+			const pointerId = native?.pointerId;
+			const target = native?.target;
+			if (pointerId == null || !target?.setPointerCapture) return;
+			target.setPointerCapture(pointerId);
+			controlPointerCapture = {
+				pointerId,
+				target
+			};
+		}
+		function releaseControlPointer() {
+			if (!controlPointerCapture) return;
+			controlPointerCapture.target.releasePointerCapture?.(controlPointerCapture.pointerId);
+			controlPointerCapture = null;
+		}
+		function rateAt(cellX) {
+			const { ratesX, showAllRates } = controlLayout.value;
+			const offset = cellX - ratesX;
+			if (!showAllRates) {
+				if (offset < 0 || offset >= 2) return void 0;
+				const index = PLAYBACK_RATES.indexOf(effectivePlaybackRate.value);
+				return PLAYBACK_RATES[(index + 1) % PLAYBACK_RATES.length];
+			}
+			if (offset < 0 || offset % 3 >= 2) return void 0;
+			return PLAYBACK_RATES[Math.floor(offset / 3)];
+		}
+		function onInteractivePointerDown(event) {
+			if (event.button != null && event.button !== 0) return;
+			const { x: cellX, y: cellY } = controlCell(event);
+			if (cellY < videoHeight.value) {
+				suppressNextVideoClick = false;
+				return;
+			}
+			if (!showControls.value) return;
+			const { actionY, progressY, progressX, progressWidth } = controlLayout.value;
+			const rate = rateAt(cellX);
+			if (cellY === actionY && cellX <= 1) {
+				event.preventDefault();
+				event.stopPropagation();
+				suppressNextVideoClick = true;
+				setPaused(!effectivePaused.value);
+				return;
+			}
+			if (cellY === actionY && rate) {
+				event.preventDefault();
+				event.stopPropagation();
+				suppressNextVideoClick = true;
+				setPlaybackRate(rate);
+				return;
+			}
+			if (cellY !== progressY || !resolvedDurationMs.value || cellX < progressX || cellX >= progressX + progressWidth) return;
+			event.preventDefault();
+			event.stopPropagation();
+			suppressNextVideoClick = true;
+			seeking.value = true;
+			stopPlayback();
+			previewSeekAt(cellX);
+			captureControlPointer(event);
+		}
+		function onInteractivePointerMove(event) {
+			if (!seeking.value) return;
+			if (event.buttons === 0) {
+				onInteractivePointerUp(event);
+				return;
+			}
+			event.preventDefault();
+			event.stopPropagation();
+			previewSeekAt(controlCell(event).x);
+		}
+		function onInteractivePointerUp(event) {
+			if (!seeking.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			previewSeekAt(controlCell(event).x);
+			const timestampMs = seekPreviewMs.value ?? lastTimestampMs;
+			applySeek(timestampMs, false);
+			seeking.value = false;
+			releaseControlPointer();
+			startPlayback(effectivePaused.value);
+		}
+		function onVideoClick(event) {
+			if (event.button != null && event.button !== 0) return;
+			if (suppressNextVideoClick) {
+				suppressNextVideoClick = false;
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			if (controlCell(event).y >= videoHeight.value) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setPaused(!effectivePaused.value);
+		}
+		function finishControlSeek() {
+			if (!seeking.value) return;
+			const timestampMs = seekPreviewMs.value ?? lastTimestampMs;
+			applySeek(timestampMs, false);
+			seeking.value = false;
+			releaseControlPointer();
+			startPlayback(effectivePaused.value);
+		}
+		function onControlKeydown(event) {
+			if (event.key === "Enter" || event.key === " " || event.key === "Spacebar") {
+				event.preventDefault();
+				event.stopPropagation();
+				setPaused(!effectivePaused.value);
+				return;
+			}
+			if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+				event.preventDefault();
+				event.stopPropagation();
+				const index = PLAYBACK_RATES.indexOf(effectivePlaybackRate.value);
+				const offset = event.key === "ArrowUp" ? 1 : -1;
+				setPlaybackRate(PLAYBACK_RATES[Math.max(0, Math.min(2, index + offset))]);
+				return;
+			}
+			if (!event.repeat && (event.key === "Home" || event.key === "End") && resolvedDurationMs.value) {
+				event.preventDefault();
+				event.stopPropagation();
+				applySeek(event.key === "Home" ? 0 : resolvedDurationMs.value, true);
+				return;
+			}
+			if (event.key === "1" || event.key === "2" || event.key === "3") {
+				event.preventDefault();
+				event.stopPropagation();
+				setPlaybackRate(Number(event.key));
+			}
+		}
+		function queueFrame(frame, expectedFormat) {
+			let normalized = normalizeFrame(frame);
+			if (normalized.format !== expectedFormat) throw new Error(`TVideo frame source did not provide requested ${expectedFormat} frames`);
+			if (normalized.durationMs != null && normalized.durationMs !== discoveredDurationMs.value) discoveredDurationMs.value = normalized.durationMs;
+			normalized = {
+				...normalized,
+				timestampMs: timelineTimestamp(normalized.timestampMs)
+			};
+			const sourceBytes = frameBytes(normalized);
+			const reusesSourceBuffer = sourceBytes === lastSourceBytes;
+			lastSourceBytes = sourceBytes;
+			const stableFrame = reusesSourceBuffer ? normalized.format === "gray8" ? {
+				...normalized,
+				pixels: new Uint8Array(normalized.pixels)
+			} : {
+				...normalized,
+				png: new Uint8Array(normalized.png)
+			} : normalized;
+			const bytes = frameBytes(stableFrame);
+			const sameFingerprint = normalized.format === lastQueuedFormat && normalized.fingerprint != null && lastQueuedFingerprint != null && normalized.fingerprint === lastQueuedFingerprint;
+			const canCompareBytes = normalized.fingerprint == null && lastQueuedFingerprint == null && !reusesSourceBuffer;
+			if (sameFingerprint || canCompareBytes && normalized.format === lastQueuedFormat && lastQueuedBytes && sameBytes(lastQueuedBytes, sourceBytes)) {
+				lastQueuedBytes = bytes;
+				lastQueuedFormat = normalized.format;
+				lastQueuedFingerprint = normalized.fingerprint;
+				updateTimestamp(normalized.timestampMs);
+				if (mailbox.hasPending()) mailbox.replacePending(stableFrame);
+				return;
+			}
+			lastQueuedBytes = bytes;
+			lastQueuedFormat = normalized.format;
+			lastQueuedFingerprint = normalized.fingerprint;
+			if (!mailbox.queue(stableFrame)) {
+				commitFrame(stableFrame, 0);
+				scheduler.invalidate({
+					priority: "low",
+					reason: "stream"
+				});
+			}
+		}
+		function startPlayback(oneFrame = false) {
+			stopPlayback();
+			if (!shouldPlay.value && !(oneFrame && alive && props.src.trim().length > 0 && paintable.value && !graphicsActivity?.scrolling.value)) return;
+			const currentGeneration = generation;
+			const abort = new AbortController();
+			activeAbort = abort;
+			playbackError.value = "";
+			const source = props.frameSource;
+			const format = preferredFormat.value;
+			const context = {
+				src: props.src,
+				signal: abort.signal,
+				maxFps: resolvedDecodeFps.value,
+				pixelWidth: resolvedDecodeWidth.value,
+				pixelHeight: resolvedDecodeHeight.value,
+				startAtMs: lastTimestampMs,
+				preferredFormat: format,
+				playbackRate: effectivePlaybackRate.value,
+				loop: props.loop
+			};
+			(async () => {
+				try {
+					const frames = await source(context);
+					for await (const frame of frames) {
+						if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+						queueFrame(frame, format);
+						if (oneFrame) return;
+					}
+					if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+					if (mailbox.hasPending()) pendingEndedGeneration = currentGeneration;
+					else emit("ended");
+				} catch (error) {
+					if (!alive || abort.signal.aborted || currentGeneration !== generation) return;
+					playbackError.value = errorMessage(error);
+					emit("error", error);
+					scheduler.invalidate({
+						priority: "low",
+						reason: "data"
+					});
+				} finally {
+					if (activeAbort === abort) activeAbort = null;
+				}
+			})();
+		}
+		watch(() => props.paused, (paused) => {
+			if (paused != null) internalPaused.value = paused;
+		});
+		watch(() => props.playbackRate, (rate) => {
+			if (rate != null) internalPlaybackRate.value = playbackRate(rate);
+		});
+		watch([
+			() => props.src,
+			() => props.frameSource,
+			playbackEnabled,
+			resolvedDecodeFps,
+			resolvedDecodeWidth,
+			resolvedDecodeHeight,
+			preferredFormat,
+			effectivePlaybackRate,
+			() => props.loop
+		], (next, previous) => {
+			const sourceChanged = !previous || next[0] !== previous[0] || next[1] !== previous[1];
+			const formatChanged = !previous || next[6] !== previous[6];
+			if (sourceChanged || formatChanged) {
+				resetQueuedFrameIdentity();
+				if (sourceChanged) {
+					lastTimestampMs = 0;
+					displayedTimestampMs.value = 0;
+					discoveredDurationMs.value = void 0;
+					seekPreviewMs.value = void 0;
+					seeking.value = false;
+					suppressNextVideoClick = false;
+					releaseControlPointer();
+					droppedFrames = 0;
+				}
+				playbackError.value = "";
+				frameRenderer.value = void 0;
+			}
+			startPlayback();
+		}, {
+			immediate: true,
+			flush: "post"
+		});
+		onBeforeUnmount(() => {
+			alive = false;
+			stopPlayback();
+			releaseControlPointer();
+			mailbox.dispose();
+			unsubscribeTerminalResize();
+			unsubscribeGraphicsOutput();
+		});
+		return () => {
+			const children = [h(TAgentTerminalGraphic, {
+				x: props.x,
+				y: props.y,
+				w: props.w,
+				h: videoHeight.value,
+				zIndex: props.zIndex,
+				content: props.src.trim() ? props.src : "video",
+				fallback: visibleFallback.value,
+				style: props.style,
+				clear: props.clear,
+				final: false,
+				streaming: true,
+				renderer: frameRenderer.value,
+				placementKey,
+				preserveRawWhileRendering: true,
+				ignoreSamePlaneRawCoverage: true,
+				suspended: !paintable.value
+			})];
+			if (props.controls) children.push(h(TView, {
+				x: props.x,
+				y: props.y,
+				w: Math.max(0, Math.floor(props.w)),
+				h: Math.max(0, Math.floor(props.h)),
+				zIndex: props.zIndex,
+				focusable: true,
+				selectable: false,
+				onClick: onVideoClick,
+				onPointerdown: onInteractivePointerDown,
+				onPointermove: onInteractivePointerMove,
+				onPointerup: onInteractivePointerUp,
+				onKeydown: onControlKeydown,
+				onBlur: finishControlSeek
+			}, () => {
+				if (!showControls.value) return [];
+				const layout$1 = controlLayout.value;
+				const segments = progressSegments.value;
+				const controls = Array.from({ length: controlRows.value }, (_, index) => h(TText, {
+					x: 0,
+					y: videoHeight.value + index,
+					w: layout$1.width,
+					value: controlFill.value,
+					style: props.style
+				}));
+				controls.push(h(TText, {
+					x: 0,
+					y: layout$1.actionY,
+					w: 2,
+					value: effectivePaused.value ? "> " : "||",
+					style: props.style
+				}));
+				if (layout$1.showTimes) if (layout$1.kind === "cinema") controls.push(h(TText, {
+					x: layout$1.currentX,
+					y: layout$1.actionY,
+					w: textCellWidth(layout$1.timeText),
+					value: layout$1.timeText,
+					style: props.style
+				}));
+				else controls.push(h(TText, {
+					x: layout$1.currentX,
+					y: layout$1.actionY,
+					w: layout$1.timeWidth,
+					value: layout$1.current,
+					style: props.style
+				}), h(TText, {
+					x: layout$1.totalX,
+					y: layout$1.actionY,
+					w: layout$1.timeWidth,
+					value: layout$1.duration,
+					style: props.style
+				}));
+				if (segments.playedWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX,
+					y: layout$1.progressY,
+					w: segments.playedWidth,
+					value: progressGlyphs.value.played,
+					style: props.style
+				}));
+				if (segments.thumbWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX + segments.playedWidth,
+					y: layout$1.progressY,
+					w: 1,
+					value: "╋",
+					style: progressThumbStyle.value
+				}));
+				if (segments.remainingWidth > 0) controls.push(h(TText, {
+					x: layout$1.progressX + segments.playedWidth + segments.thumbWidth,
+					y: layout$1.progressY,
+					w: segments.remainingWidth,
+					value: progressGlyphs.value.remaining,
+					style: remainingProgressStyle.value
+				}));
+				if (layout$1.showAllRates) controls.push(...PLAYBACK_RATES.map((rate, index) => h(TText, {
+					x: layout$1.ratesX + index * 3,
+					y: layout$1.actionY,
+					w: 2,
+					value: `${rate}x`,
+					style: rateStyles.value[index]
+				})));
+				else controls.push(h(TText, {
+					x: layout$1.ratesX,
+					y: layout$1.actionY,
+					w: 2,
+					value: `${effectivePlaybackRate.value}x`,
+					style: rateStyles.value[PLAYBACK_RATES.indexOf(effectivePlaybackRate.value)]
+				}));
+				return controls;
+			}));
+			return h("span", rootProps, children);
+		};
+	}
+});
+
+//#endregion
+export { TVideo };