src/frontend/shared/VideoSliderPreview.svelte

<!-- videoslider/frontend/shared/VideoSliderPreview.svelte -->
<script lang="ts">
	// Svelte and Gradio imports
	import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
	import type { FileData, Client } from "@gradio/client";
	import type { I18nFormatter } from "@gradio/utils";
	import Slider from "./Slider.svelte";
	import Player from "./Player.svelte";
	import { BlockLabel, Empty, IconButton, IconButtonWrapper, FullscreenButton } from "@gradio/atoms";
	import { Video as VideoIcon, Download, Clear, VolumeMuted, VolumeHigh } from "@gradio/icons";
	import { DownloadLink } from "@gradio/wasm/svelte";

	// ------------------
	// Props
	// ------------------
	export let value: [FileData | null, FileData | null] = [null, null];
	export let label: string | undefined = undefined;
	export let show_download_button = true;
	export let show_label: boolean;
	export let i18n: I18nFormatter;
	export let position: number = 0.5;
	export let slider_color: string;
	export let show_fullscreen_button = true;
	export let show_mute_button = true;
	export let fullscreen = false;
	export let interactive = true;
	export let autoplay = false;
	export let loop = false;
	export let upload: Client["upload"];

	const dispatch = createEventDispatcher<{
		clear: void;
		fullscreen: boolean;
		load: { top: number; left: number; width: number; height: number };
	}>();

	// -----------------
	// Internal State & Element References
	// -----------------
	let video1_el: HTMLVideoElement | undefined;
	let video2_el: HTMLVideoElement | undefined;
	let main_wrapper_el: HTMLDivElement | undefined;
	let image_size = { top: 0, left: 0, width: 0, height: 0 };
	let viewport_width = 0;
	let resizeObserver: ResizeObserver | undefined;
	/** Tracks the muted state for both videos. Starts true to allow autoplay. */
	let isMuted = true;
	/** A flag to prevent the main click handler from firing when interacting with overlay buttons. */
	let isInteractingWithButtons = false;
	/** A flag to ensure the dimension initialization logic runs only once. */
	let is_initialized = false;

	// -----------------
	// Event Handlers
	// -----------------

	/** Toggles the muted state for both videos. */
	function toggleMute(event: Event) {
		event.stopPropagation();
		isInteractingWithButtons = true;
		if (video1_el && video2_el) {
			isMuted = !isMuted;
			video1_el.muted = isMuted;
			video2_el.muted = isMuted;
		}
		setTimeout(() => (isInteractingWithButtons = false), 0);
	}

	/** Clears both videos and resets the slider position. */
	function removeVideos(event: Event) {
		event.stopPropagation();
		isInteractingWithButtons = true;
		value = [null, null];
		position = 0.5;
		dispatch("clear");
		setTimeout(() => (isInteractingWithButtons = false), 0);
	}

	/** Toggles play/pause for both videos simultaneously. */
	function toggle_playback(event: Event): void {
		event.stopPropagation();
		if (!video1_el || !video2_el) return;
		const is_paused = video1_el.paused;
		if (is_paused) {
			video1_el.play().catch(() => {});
			video2_el.play().catch(() => {});
		} else {
			video1_el.pause();
			video2_el.pause();
		}
	}

	/** Handles the fullscreen event from the button, resets position, and dispatches. */
    function handle_fullscreen_toggle(event: CustomEvent<boolean>) {
		position = 0.5; // We still want to reset the position
		dispatch("fullscreen", event.detail);
	}

	/** Handles the load event from the Player component to update dimensions. */
	function handle_video_load(event: CustomEvent) {
		image_size = event.detail;
		if (main_wrapper_el) {
			viewport_width = main_wrapper_el.getBoundingClientRect().width;
		}
		position = 0.5;
		dispatch("load", image_size);
	}
	
	/** A utility function to constrain a value within a minimum and maximum range. */
	function clamp(value: number, min: number, max: number): number {
		return Math.min(Math.max(value, min), max);
	}

	/**
	 * Calculates the clipped position of the slider based on the video's
	 * dimensions and offset within the viewport.
	 */
	function get_coords_at_viewport(
		viewport_percent_x: number,
		viewportWidth: number,
		video_width: number,
		video_offset_x: number
	): number {
		const px_relative_to_video = viewport_percent_x * video_width;
		const pixel_position = px_relative_to_video + video_offset_x;
		const percent_position = pixel_position / viewportWidth;
		return clamp(percent_position, 0, 1);
	}

	/**
	 * Sets up a ResizeObserver to monitor the video and its container,
	 * updating the `image_size` state whenever their dimensions change.
	 */
	function init_video(video: HTMLVideoElement | null, wrapper: HTMLDivElement | null): void {
		if (!video || !wrapper) return;

		resizeObserver?.disconnect();
		const updateVideoDimensions = () => {
			const rect = video.getBoundingClientRect();
			const wrapperRect = wrapper.getBoundingClientRect();
			image_size = {
				top: rect.top - wrapperRect.top,
				left: rect.left - wrapperRect.left,
				width: rect.width || wrapperRect.width,
				height: rect.height || wrapperRect.height
			};
			viewport_width = wrapperRect.width;
			dispatch("load", image_size);
		};

		resizeObserver = new ResizeObserver(() => {
			updateVideoDimensions();
			position = 0.5;
		});

		video.addEventListener('loadedmetadata', updateVideoDimensions);
		resizeObserver.observe(wrapper);
		resizeObserver.observe(video);
		updateVideoDimensions();
	}

	// -----------------
	// Reactive Logic & Lifecycle
	// -----------------

	/** Calculates the coordinates for the CSS clip-path. */
	$: coords_at_viewport = get_coords_at_viewport(
		position,
		viewport_width || 640,
		image_size.width || viewport_width || 640,
		image_size.left || 0
	);
	/** A reactive CSS style to create the "reveal" effect. */
	$: style = `clip-path: inset(0 0 0 ${coords_at_viewport * 100}%)`;

	/** Initializes the video dimension tracking once the necessary elements are available. */
	$: if (main_wrapper_el && video1_el && !is_initialized) {
		init_video(video1_el, main_wrapper_el);
		is_initialized = true;
	}

	/** Synchronizes the state of the two videos (playback time and pause state). */
	$: {
		if (video1_el && autoplay && !video1_el.played.length) {
			video1_el.play().catch(() => {});
		}
		if (video1_el && video2_el) {
			if (Math.abs(video1_el.currentTime - video2_el.currentTime) > 0.1) {
				video2_el.currentTime = video1_el.currentTime;
			}
			if (video1_el.paused !== video2_el.paused) {
				if (video1_el.paused) {
					video2_el.pause();
				} else {
					video2_el.play().catch(() => {});
				}
			}
		}
	}

	/** On mount, sets initial state and cleans up the observer on destroy. */
	onMount(() => {
		position = 0.5;
		if (video1_el) video1_el.muted = true;
		if (video2_el) video2_el.muted = true;
		return () => {
			resizeObserver?.disconnect();
		};
	});
</script>

<BlockLabel {show_label} Icon={VideoIcon} label={label || "Video Slider"} />

{#if value === null || value[0] === null || value[1] === null}
	<Empty unpadded_box={true} size="large"><VideoIcon /></Empty>
{:else}
	<div class="video-container">
		<div
			class="icon-button-wrapper"
			role="group"
		>
			<IconButtonWrapper>
				{#if show_fullscreen_button}
					<FullscreenButton 
						bind:fullscreen
						on:fullscreen={handle_fullscreen_toggle} 
					/>
				{/if}
				{#if show_download_button && value[1]}
					<DownloadLink href={value[1]?.url} download={value[1]?.orig_name || "video"}>
						<IconButton Icon={Download} label={i18n("common.download")} />
					</DownloadLink>
				{/if}
				{#if show_mute_button}
					<div role="button" tabindex="0" on:mousedown|stopPropagation on:touchstart|stopPropagation>
						<IconButton
							Icon={isMuted ? VolumeMuted : VolumeHigh}
							label={isMuted ? i18n("common.unmute") : i18n("common.mute")}
							on:click={toggleMute}
							on:keydown={(event) => {
								if (event.key === "Enter" || event.key === " ") {
									toggleMute(event);
								}
							}}
						/>
					</div>
				{/if}
				{#if interactive}
					<div role="button" tabindex="0" on:mousedown|stopPropagation on:touchstart|stopPropagation>
						<IconButton
							Icon={Clear}
							label="Remove Videos"
							on:click={removeVideos}
							on:keydown={(event) => {
								if (event.key === "Enter" || event.key === " ") {
									removeVideos(event);
								}
							}}
						/>
					</div>
				{/if}
			</IconButtonWrapper>
		</div>

		<div
			class="main-wrapper"
			bind:this={main_wrapper_el}
			on:mousedown|stopPropagation={toggle_playback}
			on:touchstart|stopPropagation={toggle_playback}
			on:keydown={(event) => {
				if (event.key === "Enter" || event.key === " ") {
					toggle_playback(event);
				}
			}}
			role="button"
			tabindex="0"
		>
			<Slider bind:position {slider_color} {image_size} disabled={isInteractingWithButtons} bind:parent_el={main_wrapper_el}>
				<div class="player-wrapper">
					{#if value[0]}
						<Player
							src={value[0].meta?._base64 || value[0].url}
							bind:video_el={video1_el}
							on:load={handle_video_load}
							{loop}
							muted={isMuted}
							{i18n}
							{upload}
							mirror={false}
							is_stream={value[0].is_stream}
							interactive={false}
							{fullscreen}
						/>
					{/if}
				</div>
				<div class="player-wrapper fixed" style={style}>
					{#if value[1]}
						<Player
							src={value[1].meta?._base64 || value[1].url}
							bind:video_el={video2_el}
							{loop}
							muted={isMuted}
							{i18n}
							{upload}
							mirror={false}
							is_stream={value[1].is_stream}
							interactive={false}
							{fullscreen}
						/>
					{/if}
				</div>
			</Slider>
		</div>
	</div>
{/if}

<style>
	.video-container {
		height: 100%;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: hidden;
		z-index: 1;
	}
	.main-wrapper {
		user-select: none;
		height: 100%;
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 2;
	}
	.player-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 3;
		pointer-events: none;
	}
	.player-wrapper.fixed {
		background: var(--block-background-fill);
		z-index: 4;
	}
	.player-wrapper :global(video) {
		width: 100%;
		height: 100%;
		object-fit: contain;
		z-index: 5;
		pointer-events: none;
	}
	:global(.main-wrapper > .wrap) {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		cursor: default;
	}
	.icon-button-wrapper {
		z-index: 1001; /* Above slider's z-index: 1000 */
		pointer-events: auto;
		position: absolute;
		top: 10px;
		right: 10px;
	}
</style>