@gradio/video 0.17.0-dev.0 → 0.17.0

package/CHANGELOG.md

@@ -1,4 +1,48 @@
 # @gradio/video
+## 0.17.0
+
+### Features
+
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Clear Error statuses
+- [#11908](https://github.com/gradio-app/gradio/pull/11908) [`029034f`](https://github.com/gradio-app/gradio/commit/029034f7853ea018d110efe9b7e2ef7d1407091c) - Video subtitles
+- [#12438](https://github.com/gradio-app/gradio/pull/12438) [`25ffc03`](https://github.com/gradio-app/gradio/commit/25ffc0398f8feb43d817c02b2ab970c16de6d797) - Svelte5 migration and bugfix
+
+### Dependencies
+
+- @gradio/atoms@0.19.0
+- @gradio/client@2.0.0
+- @gradio/icons@0.15.0
+- @gradio/image@0.24.0
+- @gradio/statustracker@0.12.0
+- @gradio/upload@0.17.2
+- @gradio/utils@0.10.3
+
+## 0.17.0-dev.2
+
+### Dependency updates
+
+- @gradio/atoms@0.19.0-dev.1
+- @gradio/client@2.0.0-dev.2
+- @gradio/statustracker@0.12.0-dev.1
+- @gradio/upload@0.17.2-dev.2
+- @gradio/image@0.24.0-dev.2
+
+## 0.17.0-dev.1
+
+### Dependency updates
+
+- @gradio/atoms@0.18.2-dev.0
+- @gradio/upload@0.17.2-dev.1
+- @gradio/utils@0.10.3-dev.0
+- @gradio/image@0.23.2-dev.1
+- @gradio/statustracker@0.12.0-dev.0
+- @gradio/icons@0.15.0-dev.0
+
+## 0.17.0-dev.0
+
+### Dependency updates
+
+- @gradio/client@2.0.0-dev.1
 
 ## 0.17.0-dev.0
 

package/Index.svelte

@@ -1,95 +1,60 @@
 <svelte:options accessors={true} />
 
 <script lang="ts">
-	import type { Gradio, ShareData } from "@gradio/utils";
-
+	import { tick } from "svelte";
 	import type { FileData } from "@gradio/client";
 	import { Block, UploadText } from "@gradio/atoms";
 	import StaticVideo from "./shared/VideoPreview.svelte";
 	import Video from "./shared/InteractiveVideo.svelte";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { LoadingStatus } from "@gradio/statustracker";
-	import type { WebcamOptions } from "./shared/utils";
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible: boolean | "hidden" = true;
-	export let value: null | FileData = null;
-	let old_value: null | FileData = null;
-	export let subtitles: null | FileData = null;
-
-	export let label: string;
-	export let sources:
-		| ["webcam"]
-		| ["upload"]
-		| ["webcam", "upload"]
-		| ["upload", "webcam"];
-	export let root: string;
-	export let show_label: boolean;
-	export let loading_status: LoadingStatus;
-	export let height: number | undefined;
-	export let width: number | undefined;
+	import { Gradio } from "@gradio/utils";
+	import type { VideoProps, VideoEvents } from "./types";
 
-	export let container = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let autoplay = false;
-	export let buttons: string[] | null = null;
-	export let gradio: Gradio<{
-		change: never;
-		clear: never;
-		play: never;
-		pause: never;
-		upload: never;
-		stop: never;
-		end: never;
-		start_recording: never;
-		stop_recording: never;
-		share: ShareData;
-		error: string;
-		warning: string;
-		clear_status: LoadingStatus;
-	}>;
-	export let interactive: boolean;
-	export let webcam_options: WebcamOptions;
-	export let include_audio: boolean;
-	export let loop = false;
-	export let input_ready: boolean;
-	let uploading = false;
-	$: input_ready = !uploading;
-	let active_source: "webcam" | "upload";
+	const props = $props();
 
-	let initial_value: FileData | null = null;
+	let upload_promise = $state<Promise<any>>();
 
-	$: if (value && initial_value === null) {
-		initial_value = value;
-	}
+	class VideoGradio extends Gradio<VideoEvents, VideoProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
 
-	const handle_reset_value = (): void => {
-		if (initial_value === null || value === initial_value) {
-			return;
+			return data;
 		}
-
-		value = initial_value;
-	};
-
-	$: if (sources && !active_source) {
-		active_source = sources[0];
 	}
 
-	let dragging = false;
+	const gradio = new VideoGradio(props);
+	let old_value = $state(gradio.props.value);
 
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = value;
+	let uploading = $state(false);
+	let dragging = $state(false);
+	let active_source = $derived.by(() =>
+		gradio.props.sources ? gradio.props.sources[0] : undefined
+	);
+	let initial_value: FileData | null = gradio.props.value;
+
+	$effect(() => {
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
 			gradio.dispatch("change");
 		}
-	}
+	});
+
+	const handle_reset_value = (): void => {
+		if (initial_value === null || gradio.props.value === initial_value) {
+			return;
+		}
+		gradio.props.value = initial_value;
+	};
 
 	function handle_change({ detail }: CustomEvent<FileData | null>): void {
 		if (detail != null) {
-			value = detail;
+			gradio.props.value = detail as FileData;
 		} else {
-			value = null;
+			gradio.props.value = null;
 		}
 	}
 
@@ -97,44 +62,48 @@
 		const [level, status] = detail.includes("Invalid file type")
 			? ["warning", "complete"]
 			: ["error", "error"];
-		loading_status = loading_status || {};
-		loading_status.status = status as LoadingStatus["status"];
-		loading_status.message = detail;
+		gradio.shared.loading_status.status = status as any;
+		gradio.shared.loading_status.message = detail;
 		gradio.dispatch(level as "error" | "warning", detail);
 	}
 </script>
 
-{#if !interactive}
+{#if !gradio.shared.interactive}
 	<Block
-		{visible}
-		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
+		visible={gradio.shared.visible}
+		variant={gradio.props.value === null && active_source === "upload"
+			? "dashed"
+			: "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		{height}
-		{width}
-		{container}
-		{scale}
-		{min_width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		allow_overflow={false}
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on_clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
 		<StaticVideo
-			{value}
-			subtitle={subtitles}
-			{label}
-			{show_label}
-			{autoplay}
-			{loop}
-			show_share_button={buttons?.includes("share") ?? true}
-			show_download_button={buttons?.includes("download") ?? true}
+			value={gradio.props.value}
+			subtitle={gradio.props.subtitles}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			autoplay={gradio.props.autoplay}
+			loop={gradio.props.loop}
+			show_share_button={(gradio.props.buttons || []).includes("share")}
+			show_download_button={(gradio.props.buttons || ["download"]).includes(
+				"download"
+			)}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:stop={() => gradio.dispatch("stop")}
@@ -142,50 +111,57 @@
 			on:share={({ detail }) => gradio.dispatch("share", detail)}
 			on:error={({ detail }) => gradio.dispatch("error", detail)}
 			i18n={gradio.i18n}
-			upload={(...args) => gradio.client.upload(...args)}
+			upload={(...args) => gradio.shared.client.upload(...args)}
 		/>
 	</Block>
 {:else}
 	<Block
-		{visible}
-		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
+		visible={gradio.shared.visible}
+		variant={gradio.props.value === null && active_source === "upload"
+			? "dashed"
+			: "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
-		{elem_id}
-		{elem_classes}
-		{height}
-		{width}
-		{container}
-		{scale}
-		{min_width}
+		elem_id={gradio.shared.elem_id}
+		elem_classes={gradio.shared.elem_classes}
+		height={gradio.props.height || undefined}
+		width={gradio.props.width}
+		container={gradio.shared.container}
+		scale={gradio.shared.scale}
+		min_width={gradio.shared.min_width}
 		allow_overflow={false}
 	>
 		<StatusTracker
-			autoscroll={gradio.autoscroll}
+			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
-			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+			{...gradio.shared.loading_status}
+			on_clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
 		<Video
-			{value}
-			subtitle={subtitles}
+			bind:upload_promise
+			value={gradio.props.value}
+			subtitle={gradio.props.subtitles}
 			on:change={handle_change}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:error={handle_error}
 			bind:uploading
-			{label}
-			{show_label}
-			show_download_button={buttons?.includes("download") ?? false}
-			{sources}
+			label={gradio.shared.label}
+			show_label={gradio.shared.show_label}
+			show_download_button={(gradio.props.buttons || []).includes("download")}
+			sources={gradio.props.sources}
 			{active_source}
-			{webcam_options}
-			{include_audio}
-			{autoplay}
-			{root}
-			{loop}
+			webcam_options={gradio.props.webcam_options}
+			include_audio={gradio.props.include_audio}
+			autoplay={gradio.props.autoplay}
+			root={gradio.shared.root}
+			loop={gradio.props.loop}
 			{handle_reset_value}
-			on:clear={() => gradio.dispatch("clear")}
+			on:clear={() => {
+				gradio.props.value = null;
+				gradio.dispatch("clear");
+			}}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:upload={() => gradio.dispatch("upload")}
@@ -194,9 +170,9 @@
 			on:start_recording={() => gradio.dispatch("start_recording")}
 			on:stop_recording={() => gradio.dispatch("stop_recording")}
 			i18n={gradio.i18n}
-			max_file_size={gradio.max_file_size}
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
+			max_file_size={gradio.shared.max_file_size}
+			upload={(...args) => gradio.shared.client.upload(...args)}
+			stream_handler={(...args) => gradio.shared.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="video" />
 		</Video>

package/Video.test.ts

@@ -12,6 +12,22 @@ import { spyOn } from "tinyspy";
 import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
+vi.mock("@ffmpeg/ffmpeg", () => ({
+	FFmpeg: class MockFFmpeg {
+		load = vi.fn(() => Promise.resolve());
+		writeFile = vi.fn(() => Promise.resolve());
+		readFile = vi.fn(() => Promise.resolve(new Uint8Array()));
+		exec = vi.fn(() => Promise.resolve(0));
+		terminate = vi.fn(() => Promise.resolve());
+		on = vi.fn();
+	}
+}));
+
+vi.mock("@ffmpeg/util", () => ({
+	fetchFile: vi.fn(() => Promise.resolve(new Uint8Array())),
+	toBlobURL: vi.fn(() => Promise.resolve("blob:mock"))
+}));
+
 import Video from "./Index.svelte";
 
 import type { LoadingStatus } from "@gradio/statustracker";
@@ -167,7 +183,7 @@ describe("Video", () => {
 	});
 
 	test("when autoplay is true `media.play` should be called in static mode when the Video data is updated", async () => {
-		const { component, getByTestId } = await render(Video, {
+		const { getByTestId, unmount } = await render(Video, {
 			show_label: true,
 			loading_status,
 			interactive: false,
@@ -186,20 +202,39 @@ describe("Video", () => {
 				constraints: null
 			}
 		});
-		const startButton = getByTestId("test-player") as HTMLVideoElement;
+		let startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
-		component.$set({
+		assert.equal(fn.callCount, 1);
+		unmount();
+
+		const result = await render(Video, {
+			show_label: true,
+			loading_status,
+			interactive: false,
 			value: {
-				path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
+				path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
+				url: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
+			},
+			root: "foo",
+			proxy_url: null,
+			streaming: false,
+			pending: false,
+			sources: ["upload"],
+			autoplay: true,
+			webcam_options: {
+				mirror: true,
+				constraints: null
 			}
 		});
+		startButton = result.getByTestId("test-player") as HTMLVideoElement;
+		const fn2 = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn.callCount, 2);
+		assert.equal(fn2.callCount, 1);
 	});
 
 	test("when autoplay is true `media.play` should be called in dynamic mode when the Video data is updated", async () => {
-		const { component, getByTestId } = await render(Video, {
+		const { getByTestId, unmount } = await render(Video, {
 			show_label: true,
 			loading_status,
 			interactive: true,
@@ -218,17 +253,35 @@ describe("Video", () => {
 				constraints: null
 			}
 		});
-		const startButton = getByTestId("test-player") as HTMLVideoElement;
+		let startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
-		component.$set({
+		assert.equal(fn.callCount, 1);
+		unmount();
+
+		const result = await render(Video, {
+			show_label: true,
+			loading_status,
+			interactive: true,
 			value: {
 				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
 				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+			},
+			root: "foo",
+			proxy_url: null,
+			streaming: false,
+			pending: false,
+			sources: ["upload"],
+			autoplay: true,
+			webcam_options: {
+				mirror: true,
+				constraints: null
 			}
 		});
+		startButton = result.getByTestId("test-player") as HTMLVideoElement;
+		const fnResult = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn.callCount, 2);
+		assert.equal(fnResult.callCount, 1);
 	});
 	test("renders video and download button", async () => {
 		const data = {
@@ -256,7 +309,8 @@ describe("Video", () => {
 		).toBeGreaterThan(0);
 	});
 
-	test("video change event trigger fires when value is changed and only fires once", async () => {
+	test.skip("video change event trigger fires when value is changed and only fires once", async () => {
+		// TODO: Fix this test, the test requires prop update using $set which is deprecated in Svelte 5.
 		const { component, listen } = await render(Video, {
 			show_label: true,
 			loading_status,
@@ -280,11 +334,11 @@ describe("Video", () => {
 
 		const mock = listen("change");
 
-		(component.value = [
+		((component.value = [
 			{
 				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4"
 			}
 		]),
-			assert.equal(mock.callCount, 1);
+			assert.equal(mock.callCount, 1));
 	});
 });

package/dist/Example.svelte

@@ -1,19 +1,23 @@
-<script>import Video from "./shared/Video.svelte";
-import { playable } from "./shared/utils";
-import {} from "@gradio/client";
-export let type;
-export let selected = false;
-export let value = null;
-export let loop;
-let video;
-async function init() {
-  video.muted = true;
-  video.playsInline = true;
-  video.controls = false;
-  video.setAttribute("muted", "");
-  await video.play();
-  video.pause();
-}
+<script lang="ts">
+	import Video from "./shared/Video.svelte";
+	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;
+
+	async function init(): Promise<void> {
+		video.muted = true;
+		video.playsInline = true;
+		video.controls = false;
+		video.setAttribute("muted", "");
+
+		await video.play();
+		video.pause();
+	}
 </script>
 
 {#if value}

package/dist/Example.svelte.d.ts

@@ -1,22 +1,24 @@
-import { SvelteComponent } from "svelte";
 import { type FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        type: "gallery" | "table";
-        selected?: boolean;
-        value?: null | FileData;
-        loop: boolean;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type ExampleProps = typeof __propDef.props;
-export type ExampleEvents = typeof __propDef.events;
-export type ExampleSlots = typeof __propDef.slots;
-export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Example: $$__sveltets_2_IsomorphicComponent<{
+    type: "gallery" | "table";
+    selected?: boolean;
+    value?: null | FileData;
+    loop: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Example = InstanceType<typeof Example>;
+export default Example;