@gradio/video 0.20.2 → 0.20.4

package/shared/InteractiveVideo.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import { Upload, ModifyUpload } from "@gradio/upload";
+	import { Upload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Webcam } from "@gradio/image";
@@ -10,72 +9,123 @@
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { SelectSource } from "@gradio/atoms";
+	import type { Snippet } from "svelte";
 
-	export let value: FileData | null = null;
-	export let subtitle: FileData | null = null;
-	export let sources:
-		| ["webcam"]
-		| ["upload"]
-		| ["webcam", "upload"]
-		| ["upload", "webcam"] = ["webcam", "upload"];
-	export let label: string | undefined = undefined;
-	export let show_download_button = false;
-	export let show_label = true;
-	export let webcam_options: WebcamOptions;
-	export let include_audio: boolean;
-	export let autoplay: boolean;
-	export let root: string;
-	export let i18n: I18nFormatter;
-	export let active_source: "webcam" | "upload" = "webcam";
-	export let handle_reset_value: () => void = () => {};
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let loop: boolean;
-	export let uploading = false;
-	export let upload_promise: Promise<any> | null = null;
-	export let playback_position = 0;
-
-	let has_change_history = false;
-
-	const dispatch = createEventDispatcher<{
-		change: FileData | null;
-		clear?: never;
-		play?: never;
-		pause?: never;
-		end?: never;
-		drag: boolean;
-		error: string;
-		upload: FileData;
-		start_recording?: never;
-		stop_recording?: never;
-	}>();
+	interface Props {
+		value?: FileData | null;
+		subtitle?: FileData | null;
+		sources?:
+			| ["webcam"]
+			| ["upload"]
+			| ["webcam", "upload"]
+			| ["upload", "webcam"];
+		label?: string;
+		show_download_button?: boolean;
+		show_label?: boolean;
+		webcam_options: WebcamOptions;
+		include_audio: boolean;
+		autoplay: boolean;
+		root: string;
+		i18n: I18nFormatter;
+		active_source?: "webcam" | "upload";
+		handle_reset_value?: () => void;
+		max_file_size?: number | null;
+		upload: Client["upload"];
+		stream_handler: Client["stream"];
+		loop: boolean;
+		uploading?: boolean;
+		upload_promise?: Promise<any> | null;
+		playback_position?: number;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+		onchange?: (value: FileData | null) => void;
+		onclear?: () => void;
+		onplay?: () => void;
+		onpause?: () => void;
+		onend?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onerror?: (error: string) => void;
+		onupload?: (value: FileData) => void;
+		onstart_recording?: () => void;
+		onstop_recording?: () => void;
+		onstop?: () => void;
+		children?: Snippet;
+	}
+
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
+
+	let {
+		value = $bindable(null),
+		subtitle = null,
+		sources = ["webcam", "upload"],
+		label = undefined,
+		show_download_button = false,
+		show_label = true,
+		webcam_options,
+		include_audio,
+		autoplay,
+		root,
+		i18n,
+		active_source: initial_active_source = "webcam",
+		handle_reset_value = () => {},
+		max_file_size = null,
+		upload,
+		stream_handler,
+		loop,
+		uploading = $bindable(),
+		upload_promise = $bindable(),
+		playback_position = $bindable(),
+		buttons = null,
+		on_custom_button_click = null,
+		onchange,
+		onclear,
+		onplay,
+		onpause,
+		onend,
+		ondrag,
+		onerror,
+		onupload,
+		onstart_recording,
+		onstop_recording,
+		onstop,
+		children
+	}: Props = $props();
+
+	let has_change_history = $state(false);
+	let active_source = $derived.by(() => {
+		return initial_active_source ?? "webcam";
+	});
 
 	function handle_load(detail: FileData | null): void {
 		value = detail;
-		dispatch("change", detail);
-		dispatch("upload", detail!);
+		onchange?.(detail);
+		if (detail) {
+			onupload?.(detail);
+		}
 	}
 
 	function handle_clear(): void {
 		value = null;
-		dispatch("change", null);
-		dispatch("clear");
+		onchange?.(null);
+		onclear?.();
 	}
 
 	function handle_change(video: FileData): void {
 		has_change_history = true;
-		dispatch("change", video);
+		onchange?.(video);
 	}
 
 	function handle_capture({
 		detail
 	}: CustomEvent<FileData | any | null>): void {
-		dispatch("change", detail);
+		onchange?.(detail);
 	}
 
-	let dragging = false;
-	$: dispatch("drag", dragging);
+	let dragging = $state(false);
+
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
@@ -90,13 +140,15 @@
 					filetype="video/x-m4v,video/*"
 					onload={handle_load}
 					{max_file_size}
-					onerror={(detail) => dispatch("error", detail)}
+					onerror={(detail) => onerror?.(detail)}
 					{root}
 					{upload}
 					{stream_handler}
 					aria_label={i18n("video.drop_to_upload")}
 				>
-					<slot />
+					{#if children}
+						{@render children()}
+					{/if}
 				</Upload>
 			{:else if active_source === "webcam"}
 				<Webcam
@@ -105,10 +157,10 @@
 					webcam_constraints={webcam_options.constraints}
 					{include_audio}
 					mode="video"
-					on:error
+					on:error={({ detail }) => onerror?.(detail)}
 					on:capture={handle_capture}
-					on:start_recording
-					on:stop_recording
+					on:start_recording={() => onstart_recording?.()}
+					on:stop_recording={() => onstop_recording?.()}
 					{i18n}
 					{upload}
 					stream_every={1}
@@ -125,11 +177,11 @@
 				src={value.url}
 				subtitle={subtitle?.url}
 				is_stream={false}
-				on:play
-				on:pause
-				on:stop
-				on:end
-				on:error
+				onplay={() => onplay?.()}
+				onpause={() => onpause?.()}
+				onstop={() => onstop?.()}
+				onend={() => onend?.()}
+				onerror={(error) => onerror?.(error)}
 				mirror={webcam_options.mirror && active_source === "webcam"}
 				{label}
 				{handle_change}

package/shared/Player.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount, onDestroy } from "svelte";
+	import { onMount, onDestroy } from "svelte";
 	import { Play, Pause, Maximize, Undo } from "@gradio/icons";
 	import Video from "./Video.svelte";
 	import VideoControls from "./VideoControls.svelte";
@@ -10,41 +10,72 @@
 	import { format_time } from "@gradio/utils";
 	import type { I18nFormatter } from "@gradio/utils";
 
-	export let root = "";
-	export let src: string;
-	export let subtitle: string | null = null;
-	export let mirror: boolean;
-	export let autoplay: boolean;
-	export let loop: boolean;
-	export let label = "test";
-	export let interactive = false;
-	export let handle_change: (video: FileData) => void = () => {};
-	export let handle_reset_value: () => void = () => {};
-	export let upload: Client["upload"];
-	export let is_stream: boolean | undefined;
-	export let i18n: I18nFormatter;
-	export let show_download_button = false;
-	export let value: FileData | null = null;
-	export let handle_clear: () => void = () => {};
-	export let has_change_history = false;
-	export let playback_position = 0;
-
-	const dispatch = createEventDispatcher<{
-		play: undefined;
-		pause: undefined;
-		stop: undefined;
-		end: undefined;
-		clear: undefined;
-	}>();
-
-	let time = 0;
-	let duration: number;
-	let paused = true;
-	let video: HTMLVideoElement;
-	let processingVideo = false;
-	let show_volume_slider = false;
-	let current_volume = 1;
-	let is_fullscreen = false;
+	interface Props {
+		root?: string;
+		src: string;
+		subtitle?: string | null;
+		mirror: boolean;
+		autoplay: boolean;
+		loop: boolean;
+		label?: string;
+		interactive?: boolean;
+		handle_change?: (video: FileData) => void;
+		handle_reset_value?: () => void;
+		upload: Client["upload"];
+		is_stream?: boolean;
+		i18n: I18nFormatter;
+		show_download_button?: boolean;
+		value?: FileData | null;
+		handle_clear?: () => void;
+		has_change_history?: boolean;
+		playback_position?: number;
+		onplay?: () => void;
+		onpause?: () => void;
+		onstop?: () => void;
+		onend?: () => void;
+		onerror?: (error: string) => void;
+		onloadstart?: () => void;
+		onloadeddata?: () => void;
+		onloadedmetadata?: () => void;
+	}
+
+	let {
+		root = "",
+		src,
+		subtitle = null,
+		mirror,
+		autoplay,
+		loop,
+		label = "test",
+		interactive = false,
+		handle_change = () => {},
+		handle_reset_value = () => {},
+		upload,
+		is_stream = undefined,
+		i18n,
+		show_download_button = false,
+		value = null,
+		handle_clear = () => {},
+		has_change_history = false,
+		playback_position = $bindable(),
+		onplay,
+		onpause,
+		onstop,
+		onend,
+		onerror,
+		onloadstart,
+		onloadeddata,
+		onloadedmetadata
+	}: Props = $props();
+
+	let time = $state(0);
+	let duration = $state<number>(0);
+	let paused = $state(true);
+	let video = $state<HTMLVideoElement>();
+	let processingVideo = $state(false);
+	let show_volume_slider = $state(false);
+	let current_volume = $state(1);
+	let is_fullscreen = $state(false);
 
 	function handleMove(e: TouchEvent | MouseEvent): void {
 		if (!duration) return;
@@ -67,6 +98,7 @@
 	}
 
 	async function play_pause(): Promise<void> {
+		if (!video) return;
 		if (document.fullscreenElement != video) {
 			const isPlaying =
 				video.currentTime > 0 &&
@@ -81,6 +113,7 @@
 	}
 
 	function handle_click(e: MouseEvent): void {
+		if (!duration) return;
 		const { left, right } = (
 			e.currentTarget as HTMLProgressElement
 		).getBoundingClientRect();
@@ -88,8 +121,8 @@
 	}
 
 	function handle_end(): void {
-		dispatch("stop");
-		dispatch("end");
+		onstop?.();
+		onend?.();
 	}
 
 	const handle_trim_video = async (videoBlob: Blob): Promise<void> => {
@@ -101,6 +134,7 @@
 	};
 
 	function open_full_screen(): void {
+		if (!video) return;
 		if (!is_fullscreen) {
 			video.requestFullscreen();
 		} else {
@@ -140,30 +174,41 @@
 		}
 	});
 
-	$: if (video && video !== previous_video) {
-		if (previous_video) {
-			previous_video.removeEventListener("volumechange", handleVolumeChange);
+	$effect(() => {
+		if (video && video !== previous_video) {
+			if (previous_video) {
+				previous_video.removeEventListener("volumechange", handleVolumeChange);
+			}
+			video.addEventListener("volumechange", handleVolumeChange);
+			previous_video = video;
 		}
-		video.addEventListener("volumechange", handleVolumeChange);
-		previous_video = video;
-	}
+	});
 
-	$: time = time || 0;
-	$: duration = duration || 0;
-	$: playback_position = time;
-	$: if (playback_position !== time && video) {
-		video.currentTime = playback_position;
-	}
-	$: if (video && !is_fullscreen) {
-		if (Math.abs(video.volume - current_volume) > VOLUME_EPSILON) {
-			video.volume = current_volume;
-			last_synced_volume = current_volume;
+	$effect(() => {
+		playback_position = time;
+	});
+
+	$effect(() => {
+		if (playback_position !== time && video) {
+			video.currentTime = playback_position;
 		}
-		video.controls = false;
-	}
-	$: if (video && is_fullscreen) {
-		last_synced_volume = video.volume;
-	}
+	});
+
+	$effect(() => {
+		if (video && !is_fullscreen) {
+			if (Math.abs(video.volume - current_volume) > VOLUME_EPSILON) {
+				video.volume = current_volume;
+				last_synced_volume = current_volume;
+			}
+			video.controls = false;
+		}
+	});
+
+	$effect(() => {
+		if (video && is_fullscreen) {
+			last_synced_volume = video.volume;
+		}
+	});
 </script>
 
 <div class="wrap">
@@ -175,20 +220,20 @@
 			{loop}
 			{is_stream}
 			controls={is_fullscreen}
-			on:click={play_pause}
-			on:play
-			on:pause
-			on:error
-			on:ended={handle_end}
+			onclick={play_pause}
+			onplay={() => onplay?.()}
+			onpause={() => onpause?.()}
+			onerror={(error) => onerror?.(error)}
+			onended={handle_end}
 			bind:currentTime={time}
 			bind:duration
 			bind:paused
 			bind:node={video}
 			data-testid={`${label}-player`}
 			{processingVideo}
-			on:loadstart
-			on:loadeddata
-			on:loadedmetadata
+			onloadstart={() => onloadstart?.()}
+			onloadeddata={() => onloadeddata?.()}
+			onloadedmetadata={() => onloadedmetadata?.()}
 		>
 			<track kind="captions" src={subtitle} default />
 		</Video>
@@ -201,8 +246,8 @@
 				tabindex="0"
 				class="icon"
 				aria-label="play-pause-replay-button"
-				on:click={play_pause}
-				on:keydown={play_pause}
+				onclick={play_pause}
+				onkeydown={play_pause}
 			>
 				{#if time === duration}
 					<Undo />
@@ -216,21 +261,28 @@
 			<span class="time">{format_time(time)} / {format_time(duration)}</span>
 
 			<!-- TODO: implement accessible video timeline for 4.0 -->
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<progress
 				value={time / duration || 0}
-				on:mousemove={handleMove}
-				on:touchmove|preventDefault={handleMove}
-				on:click|stopPropagation|preventDefault={handle_click}
-			/>
+				onmousemove={handleMove}
+				ontouchmove={(e) => {
+					e.preventDefault();
+					handleMove(e);
+				}}
+				onclick={(e) => {
+					e.stopPropagation();
+					e.preventDefault();
+					handle_click(e);
+				}}
+			></progress>
 
 			<div class="volume-control-wrapper">
 				<button
 					class="icon volume-button"
 					style:color={show_volume_slider ? "var(--color-accent)" : "white"}
 					aria-label="Adjust volume"
-					on:click={() => (show_volume_slider = !show_volume_slider)}
+					onclick={() => (show_volume_slider = !show_volume_slider)}
 				>
 					<VolumeLevels currentVolume={current_volume} />
 				</button>
@@ -246,8 +298,8 @@
 					tabindex="0"
 					class="icon"
 					aria-label="full-screen"
-					on:click={open_full_screen}
-					on:keypress={open_full_screen}
+					onclick={open_full_screen}
+					onkeypress={open_full_screen}
 				>
 					<Maximize />
 				</div>

package/shared/Video.svelte

@@ -1,31 +1,71 @@
 <script lang="ts">
 	import type { HTMLVideoAttributes } from "svelte/elements";
-	import { createEventDispatcher } from "svelte";
 	import { loaded } from "./utils";
+	import type { Snippet } from "svelte";
 
 	import Hls from "hls.js";
 
-	export let src: HTMLVideoAttributes["src"] = undefined;
-
-	export let muted: HTMLVideoAttributes["muted"] = undefined;
-	export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
-	export let preload: HTMLVideoAttributes["preload"] = undefined;
-	export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
-	export let controls: HTMLVideoAttributes["controls"] = undefined;
-
-	export let currentTime: number | undefined = undefined;
-	export let duration: number | undefined = undefined;
-	export let paused: boolean | undefined = undefined;
-
-	export let node: HTMLVideoElement | undefined = undefined;
-	export let loop: boolean;
-	export let is_stream;
-
-	export let processingVideo = false;
-
-	let stream_active = false;
+	interface Props {
+		src?: HTMLVideoAttributes["src"];
+		muted?: HTMLVideoAttributes["muted"];
+		playsinline?: HTMLVideoAttributes["playsinline"];
+		preload?: HTMLVideoAttributes["preload"];
+		autoplay?: HTMLVideoAttributes["autoplay"];
+		controls?: HTMLVideoAttributes["controls"];
+		currentTime?: number;
+		duration?: number;
+		paused?: boolean;
+		node?: HTMLVideoElement;
+		loop: boolean;
+		is_stream: boolean;
+		processingVideo?: boolean;
+		onloadeddata?: () => void;
+		onclick?: () => void;
+		onplay?: () => void;
+		onpause?: () => void;
+		onended?: () => void;
+		onmouseover?: () => void;
+		onmouseout?: () => void;
+		onfocus?: () => void;
+		onblur?: () => void;
+		onerror?: (error: string) => void;
+		onloadstart?: () => void;
+		onloadedmetadata?: () => void;
+		"data-testid"?: string;
+		children?: Snippet;
+	}
 
-	const dispatch = createEventDispatcher();
+	let {
+		src = undefined,
+		muted = undefined,
+		playsinline = undefined,
+		preload = undefined,
+		autoplay = undefined,
+		controls = undefined,
+		currentTime = $bindable(undefined),
+		duration = $bindable(undefined),
+		paused = $bindable(undefined),
+		node = $bindable(undefined),
+		loop,
+		is_stream,
+		processingVideo = false,
+		onloadeddata,
+		onclick,
+		onplay,
+		onpause,
+		onended,
+		onmouseover,
+		onmouseout,
+		onfocus,
+		onblur,
+		onerror,
+		onloadstart,
+		onloadedmetadata,
+		"data-testid": dataTestid,
+		children
+	}: Props = $props();
+
+	let stream_active = $state(false);
 
 	function load_stream(
 		src: string | null | undefined,
@@ -70,11 +110,16 @@
 		}
 	}
 
-	$: (src, (stream_active = false));
+	$effect(() => {
+		src;
+		stream_active = false;
+	});
 
-	$: if (node && src && is_stream) {
-		load_stream(src, is_stream, node);
-	}
+	$effect(() => {
+		if (node && src && is_stream) {
+			load_stream(src, is_stream, node);
+		}
+	});
 </script>
 
 <!--
@@ -97,28 +142,29 @@ Then, even when `controls` is false, the compiled DOM would be `<video controls=
 	{autoplay}
 	{controls}
 	{loop}
-	on:loadeddata={dispatch.bind(null, "loadeddata")}
-	on:click={dispatch.bind(null, "click")}
-	on:play={dispatch.bind(null, "play")}
-	on:pause={dispatch.bind(null, "pause")}
-	on:ended={dispatch.bind(null, "ended")}
-	on:mouseover={dispatch.bind(null, "mouseover")}
-	on:mouseout={dispatch.bind(null, "mouseout")}
-	on:focus={dispatch.bind(null, "focus")}
-	on:blur={dispatch.bind(null, "blur")}
-	on:error={dispatch.bind(null, "error", "Video not playable")}
-	on:loadstart
-	on:loadeddata
-	on:loadedmetadata
+	onloadeddata={() => onloadeddata?.()}
+	onclick={() => onclick?.()}
+	onplay={() => onplay?.()}
+	onpause={() => onpause?.()}
+	onended={() => onended?.()}
+	onmouseover={() => onmouseover?.()}
+	onmouseout={() => onmouseout?.()}
+	onfocus={() => onfocus?.()}
+	onblur={() => onblur?.()}
+	onerror={() => onerror?.("Video not playable")}
+	onloadstart={() => onloadstart?.()}
+	onloadedmetadata={() => onloadedmetadata?.()}
 	bind:currentTime
 	bind:duration
 	bind:paused
 	bind:this={node}
 	use:loaded={{ autoplay: autoplay ?? false }}
-	data-testid={$$props["data-testid"]}
+	data-testid={dataTestid}
 	crossorigin="anonymous"
 >
-	<slot />
+	{#if children}
+		{@render children()}
+	{/if}
 </video>
 
 <style>