@gradio/video 0.20.2 → 0.20.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @gradio/video
 
+## 0.20.3
+
+### Fixes
+
+- [#12830](https://github.com/gradio-app/gradio/pull/12830) [`a2a0078`](https://github.com/gradio-app/gradio/commit/a2a0078de878481752b952f9ed0e759a0e884d0b) - `Video` to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/utils@0.11.3
+- @gradio/atoms@0.22.0
+- @gradio/statustracker@0.12.4
+- @gradio/upload@0.17.6
+- @gradio/image@0.25.3
+
 ## 0.20.2
 
 ### Dependency updates

package/Example.svelte

@@ -3,13 +3,19 @@
 	import { playable } from "./shared/utils";
 	import { type FileData } from "@gradio/client";
 
-	export let type: "gallery" | "table";
-	export let selected = false;
-	export let value: null | FileData = null;
-	export let loop: boolean;
-	let video: HTMLVideoElement;
+	interface Props {
+		type: "gallery" | "table";
+		selected?: boolean;
+		value?: null | FileData;
+		loop: boolean;
+	}
+
+	let { type, selected = false, value = null, loop }: Props = $props();
+
+	let video: HTMLVideoElement | undefined = $state();
 
 	async function init(): Promise<void> {
+		if (!video) return;
 		video.muted = true;
 		video.playsInline = true;
 		video.controls = false;
@@ -32,9 +38,9 @@
 				muted
 				playsinline
 				bind:node={video}
-				on:loadeddata={init}
-				on:mouseover={video.play.bind(video)}
-				on:mouseout={video.pause.bind(video)}
+				onloadeddata={init}
+				onmouseover={() => video?.play()}
+				onmouseout={() => video?.pause()}
 				src={value?.url}
 				is_stream={false}
 				{loop}

package/Index.svelte

@@ -50,7 +50,7 @@
 		gradio.props.value = initial_value;
 	};
 
-	function handle_change({ detail }: CustomEvent<FileData | null>): void {
+	function handle_change(detail: FileData | null): void {
 		if (detail != null) {
 			gradio.props.value = detail as FileData;
 		} else {
@@ -58,7 +58,7 @@
 		}
 	}
 
-	function handle_error({ detail }: CustomEvent<string>): void {
+	function handle_error(detail: string): void {
 		const [level, status] = detail.includes("Invalid file type")
 			? ["warning", "complete"]
 			: ["error", "error"];
@@ -105,12 +105,12 @@
 				gradio.dispatch("custom_button_click", { id });
 			}}
 			bind:playback_position={gradio.props.playback_position}
-			on:play={() => gradio.dispatch("play")}
-			on:pause={() => gradio.dispatch("pause")}
-			on:stop={() => gradio.dispatch("stop")}
-			on:end={() => gradio.dispatch("end")}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			onplay={() => gradio.dispatch("play")}
+			onpause={() => gradio.dispatch("pause")}
+			onstop={() => gradio.dispatch("stop")}
+			onend={() => gradio.dispatch("end")}
+			onshare={(detail) => gradio.dispatch("share", detail)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.shared.client.upload(...args)}
 		/>
@@ -144,9 +144,9 @@
 			bind:upload_promise
 			value={gradio.props.value}
 			subtitle={gradio.props.subtitles}
-			on:change={handle_change}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:error={handle_error}
+			onchange={handle_change}
+			ondrag={(detail) => (dragging = detail)}
+			onerror={handle_error}
 			bind:uploading
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
@@ -163,21 +163,21 @@
 			loop={gradio.props.loop}
 			{handle_reset_value}
 			bind:playback_position={gradio.props.playback_position}
-			on:clear={() => {
+			onclear={() => {
 				gradio.props.value = null;
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:play={() => gradio.dispatch("play")}
-			on:pause={() => gradio.dispatch("pause")}
-			on:upload={() => {
+			onplay={() => gradio.dispatch("play")}
+			onpause={() => gradio.dispatch("pause")}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:stop={() => gradio.dispatch("stop")}
-			on:end={() => gradio.dispatch("end")}
-			on:start_recording={() => gradio.dispatch("start_recording")}
-			on:stop_recording={() => gradio.dispatch("stop_recording")}
+			onstop={() => gradio.dispatch("stop")}
+			onend={() => gradio.dispatch("end")}
+			onstart_recording={() => gradio.dispatch("start_recording")}
+			onstop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
 			max_file_size={gradio.shared.max_file_size}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/Example.svelte

@@ -3,13 +3,19 @@
 	import { playable } from "./shared/utils";
 	import { type FileData } from "@gradio/client";
 
-	export let type: "gallery" | "table";
-	export let selected = false;
-	export let value: null | FileData = null;
-	export let loop: boolean;
-	let video: HTMLVideoElement;
+	interface Props {
+		type: "gallery" | "table";
+		selected?: boolean;
+		value?: null | FileData;
+		loop: boolean;
+	}
+
+	let { type, selected = false, value = null, loop }: Props = $props();
+
+	let video: HTMLVideoElement | undefined = $state();
 
 	async function init(): Promise<void> {
+		if (!video) return;
 		video.muted = true;
 		video.playsInline = true;
 		video.controls = false;
@@ -32,9 +38,9 @@
 				muted
 				playsinline
 				bind:node={video}
-				on:loadeddata={init}
-				on:mouseover={video.play.bind(video)}
-				on:mouseout={video.pause.bind(video)}
+				onloadeddata={init}
+				onmouseover={() => video?.play()}
+				onmouseout={() => video?.pause()}
 				src={value?.url}
 				is_stream={false}
 				{loop}

package/dist/Example.svelte.d.ts

@@ -1,24 +1,10 @@
 import { type FileData } from "@gradio/client";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Example: $$__sveltets_2_IsomorphicComponent<{
+interface Props {
     type: "gallery" | "table";
     selected?: boolean;
     value?: null | FileData;
     loop: boolean;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Example = InstanceType<typeof Example>;
+}
+declare const Example: import("svelte").Component<Props, {}, "">;
+type Example = ReturnType<typeof Example>;
 export default Example;

package/dist/Index.svelte

@@ -50,7 +50,7 @@
 		gradio.props.value = initial_value;
 	};
 
-	function handle_change({ detail }: CustomEvent<FileData | null>): void {
+	function handle_change(detail: FileData | null): void {
 		if (detail != null) {
 			gradio.props.value = detail as FileData;
 		} else {
@@ -58,7 +58,7 @@
 		}
 	}
 
-	function handle_error({ detail }: CustomEvent<string>): void {
+	function handle_error(detail: string): void {
 		const [level, status] = detail.includes("Invalid file type")
 			? ["warning", "complete"]
 			: ["error", "error"];
@@ -105,12 +105,12 @@
 				gradio.dispatch("custom_button_click", { id });
 			}}
 			bind:playback_position={gradio.props.playback_position}
-			on:play={() => gradio.dispatch("play")}
-			on:pause={() => gradio.dispatch("pause")}
-			on:stop={() => gradio.dispatch("stop")}
-			on:end={() => gradio.dispatch("end")}
-			on:share={({ detail }) => gradio.dispatch("share", detail)}
-			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			onplay={() => gradio.dispatch("play")}
+			onpause={() => gradio.dispatch("pause")}
+			onstop={() => gradio.dispatch("stop")}
+			onend={() => gradio.dispatch("end")}
+			onshare={(detail) => gradio.dispatch("share", detail)}
+			onerror={(detail) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
 			upload={(...args) => gradio.shared.client.upload(...args)}
 		/>
@@ -144,9 +144,9 @@
 			bind:upload_promise
 			value={gradio.props.value}
 			subtitle={gradio.props.subtitles}
-			on:change={handle_change}
-			on:drag={({ detail }) => (dragging = detail)}
-			on:error={handle_error}
+			onchange={handle_change}
+			ondrag={(detail) => (dragging = detail)}
+			onerror={handle_error}
 			bind:uploading
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
@@ -163,21 +163,21 @@
 			loop={gradio.props.loop}
 			{handle_reset_value}
 			bind:playback_position={gradio.props.playback_position}
-			on:clear={() => {
+			onclear={() => {
 				gradio.props.value = null;
 				gradio.dispatch("clear");
 				gradio.dispatch("input");
 			}}
-			on:play={() => gradio.dispatch("play")}
-			on:pause={() => gradio.dispatch("pause")}
-			on:upload={() => {
+			onplay={() => gradio.dispatch("play")}
+			onpause={() => gradio.dispatch("pause")}
+			onupload={() => {
 				gradio.dispatch("upload");
 				gradio.dispatch("input");
 			}}
-			on:stop={() => gradio.dispatch("stop")}
-			on:end={() => gradio.dispatch("end")}
-			on:start_recording={() => gradio.dispatch("start_recording")}
-			on:stop_recording={() => gradio.dispatch("stop_recording")}
+			onstop={() => gradio.dispatch("stop")}
+			onend={() => gradio.dispatch("end")}
+			onstart_recording={() => gradio.dispatch("start_recording")}
+			onstop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
 			max_file_size={gradio.shared.max_file_size}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/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/dist/shared/InteractiveVideo.svelte.d.ts

@@ -1,29 +1,13 @@
 import type { FileData, Client } from "@gradio/client";
 import type { WebcamOptions } from "./utils";
 import type { I18nFormatter } from "@gradio/utils";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const InteractiveVideo: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+import type { Snippet } from "svelte";
+import type { CustomButton as CustomButtonType } from "@gradio/utils";
+interface Props {
     value?: FileData | null;
     subtitle?: FileData | null;
     sources?: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
-    label?: string | undefined;
+    label?: string;
     show_download_button?: boolean;
     show_label?: boolean;
     webcam_options: WebcamOptions;
@@ -40,24 +24,21 @@ declare const InteractiveVideo: $$__sveltets_2_IsomorphicComponent<$$__sveltets_
     uploading?: boolean;
     upload_promise?: Promise<any> | null;
     playback_position?: number;
-}, {
-    default: {};
-}>, {
-    error: CustomEvent<any>;
-    start_recording: CustomEvent<any>;
-    stop_recording: CustomEvent<any>;
-    play: CustomEvent<any>;
-    pause: CustomEvent<any>;
-    stop: CustomEvent<undefined>;
-    end: CustomEvent<any>;
-    change: CustomEvent<FileData | null>;
-    clear?: CustomEvent<undefined> | undefined;
-    drag: CustomEvent<boolean>;
-    upload: CustomEvent<FileData>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type InteractiveVideo = InstanceType<typeof InteractiveVideo>;
+    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;
+}
+declare const InteractiveVideo: import("svelte").Component<Props, {}, "value" | "uploading" | "upload_promise" | "playback_position">;
+type InteractiveVideo = ReturnType<typeof InteractiveVideo>;
 export default InteractiveVideo;