@gradio/video 0.20.4 → 0.20.6

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @gradio/video
 
+## 0.20.6
+
+### Features
+
+- [#13167](https://github.com/gradio-app/gradio/pull/13167) [`a4e1c92`](https://github.com/gradio-app/gradio/commit/a4e1c92c11e05bee332ff69e19b533fbd9abc840) - Audio and Video unit tests.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/utils@0.12.2
+- @gradio/atoms@0.23.0
+- @gradio/statustracker@0.13.1
+- @gradio/upload@0.17.8
+- @gradio/image@0.26.1
+
+## 0.20.5
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/statustracker@0.13.0
+- @gradio/image@0.26.0
+
 ## 0.20.4
 
 ### Dependency updates

package/Index.svelte

@@ -27,7 +27,8 @@
 	}
 
 	const gradio = new VideoGradio(props);
-	let old_value = $state(gradio.props.value);
+	let old_value = gradio.props.value;
+	let mounted = false;
 
 	let uploading = $state(false);
 	let dragging = $state(false);
@@ -37,6 +38,11 @@
 	let initial_value: FileData | null = gradio.props.value;
 
 	$effect(() => {
+		if (!mounted) {
+			old_value = gradio.props.value;
+			mounted = true;
+			return;
+		}
 		if (old_value != gradio.props.value) {
 			old_value = gradio.props.value;
 			gradio.dispatch("change");

package/Video.test.ts

@@ -5,11 +5,19 @@ import {
 	afterEach,
 	vi,
 	beforeAll,
-	beforeEach,
 	expect
 } from "vitest";
-import { spyOn } from "tinyspy";
-import { cleanup, render } from "@self/tootils";
+import {
+	cleanup,
+	render,
+	fireEvent,
+	waitFor,
+	upload_file,
+	drop_file,
+	mock_client,
+	TEST_MP4
+} from "@self/tootils/render";
+import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 import { setupi18n } from "../core/src/i18n";
 
 vi.mock("@ffmpeg/ffmpeg", () => ({
@@ -29,316 +37,501 @@ vi.mock("@ffmpeg/util", () => ({
 }));
 
 import Video from "./Index.svelte";
-
 import type { LoadingStatus } from "@gradio/statustracker";
 
-const loading_status = {
+const loading_status: LoadingStatus = {
 	eta: 0,
 	queue_position: 1,
 	queue_size: 1,
-	status: "complete" as LoadingStatus["status"],
+	status: "complete",
 	scroll_to_output: false,
 	visible: true,
 	fn_index: 0,
-	show_progress: "full" as LoadingStatus["show_progress"]
+	show_progress: "full",
+	type: "input" as const,
+	stream_state: "closed" as const
+};
+
+const fake_value = {
+	path: "video_sample.mp4",
+	url: "https://example.com/video_sample.mp4",
+	orig_name: "video_sample.mp4",
+	size: 261179,
+	mime_type: "video/mp4",
+	is_stream: false
+};
+
+const default_props = {
+	loading_status,
+	label: "Video",
+	show_label: true,
+	value: null as any,
+	sources: ["upload", "webcam"] as ("upload" | "webcam")[],
+	interactive: true,
+	streaming: false,
+	pending: false,
+	autoplay: false,
+	loop: false,
+	webcam_options: { mirror: false, constraints: {} },
+	buttons: [] as (string | { value: string; id: number; icon: null })[]
 };
 
+beforeAll(() => {
+	window.HTMLMediaElement.prototype.play = vi.fn();
+	window.HTMLMediaElement.prototype.pause = vi.fn();
+});
+
+run_shared_prop_tests({
+	component: Video,
+	name: "Video",
+	base_props: {
+		...default_props
+	},
+	has_label: false,
+	has_validation_error: false
+});
+
 describe("Video", () => {
-	beforeAll(() => {
-		window.HTMLMediaElement.prototype.play = vi.fn();
-		window.HTMLMediaElement.prototype.pause = vi.fn();
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("renders upload area when value is null", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
+			sources: ["upload"],
+			value: null
+		});
+
+		expect(getByLabelText("video.drop_to_upload")).toBeVisible();
+	});
+
+	test("renders video player when value is set", async () => {
+		const { getByTestId } = await render(Video, {
+			...default_props,
+			label: "Test Video",
+			value: fake_value
+		});
+
+		const vid = getByTestId("Test Video-player") as HTMLVideoElement;
+		expect(vid).toBeTruthy();
+		expect(vid.src).toContain("video_sample.mp4");
 	});
-	beforeEach(setupi18n);
+});
+
+describe("Props: sources", () => {
+	setupi18n();
 	afterEach(() => cleanup());
 
-	test("renders provided value and label", async () => {
-		const { getByTestId, queryAllByText } = await render(Video, {
-			show_label: true,
-			loading_status,
-			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"
-			},
-			label: "Test Label",
-			root: "foo",
-			proxy_url: null,
-			streaming: false,
-			pending: false,
-			name: "bar",
+	test("multiple sources renders source selection buttons", async () => {
+		const { getByTestId } = await render(Video, {
+			...default_props,
+			sources: ["upload", "webcam"]
+		});
+
+		expect(getByTestId("source-select")).toBeTruthy();
+	});
+
+	test("single upload source does not render source selection", async () => {
+		const { queryByTestId } = await render(Video, {
+			...default_props,
+			sources: ["upload"]
+		});
+
+		expect(queryByTestId("source-select")).toBeNull();
+	});
+
+	test("upload and webcam sources render corresponding buttons", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
+			sources: ["upload", "webcam"]
+		});
+
+		expect(getByLabelText("Upload file")).toBeTruthy();
+		expect(getByLabelText("Capture from camera")).toBeTruthy();
+	});
+});
+
+describe("Props: interactive", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("interactive=true shows upload area when value is null", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
+			interactive: true,
 			sources: ["upload"],
+			value: null
+		});
+
+		expect(getByLabelText("video.drop_to_upload")).toBeTruthy();
+	});
+
+	test("interactive=false renders the video without upload controls", async () => {
+		const { queryByLabelText } = await render(Video, {
+			...default_props,
+			interactive: false,
+			value: fake_value
+		});
+
+		expect(queryByLabelText("video.drop_to_upload")).toBeNull();
+		expect(queryByLabelText("Upload file")).toBeNull();
+	});
+
+	test("interactive=false with null value does not show upload area", async () => {
+		const { queryByLabelText } = await render(Video, {
+			...default_props,
+			interactive: false,
+			value: null
+		});
+
+		expect(queryByLabelText("video.drop_to_upload")).toBeNull();
+	});
+});
+
+describe("Events: change", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("setting value triggers change event", async () => {
+		const { listen, set_data } = await render(Video, {
+			...default_props,
+			value: null
+		});
+
+		const change = listen("change");
+
+		await set_data({ value: fake_value });
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("change event is not triggered on mount with a default value", async () => {
+		const { listen } = await render(Video, {
+			...default_props,
+			value: fake_value
+		});
+
+		const change = listen("change", { retrospective: true });
+
+		expect(change).not.toHaveBeenCalled();
+	});
+
+	test("changing value multiple times triggers change each time", async () => {
+		const { listen, set_data } = await render(Video, {
+			...default_props,
+			value: null
+		});
+
+		const change = listen("change");
+
+		const value_a = { ...fake_value, url: "https://example.com/a.mp4" };
+		const value_b = { ...fake_value, url: "https://example.com/b.mp4" };
+
+		await set_data({ value: value_a });
+		await set_data({ value: value_b });
+
+		expect(change).toHaveBeenCalledTimes(2);
+	});
+
+	test("setting value to null after a value triggers change", async () => {
+		const { listen, set_data } = await render(Video, {
+			...default_props,
+			value: fake_value
+		});
+
+		const change = listen("change");
+
+		await set_data({ value: null });
+
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("Props: buttons (static mode)", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("buttons with download shows download button", async () => {
+		const { getAllByTestId } = await render(Video, {
+			...default_props,
+			interactive: false,
+			value: fake_value,
+			buttons: ["download"]
+		});
+
+		const downloadDiv = getAllByTestId("download-div")[0];
+		expect(downloadDiv).toBeTruthy();
+		const link = downloadDiv.querySelector("a");
+		expect(link?.getAttribute("href")).toContain("video_sample.mp4");
+	});
+
+	test("custom button renders and dispatches custom_button_click", async () => {
+		const { listen, getByLabelText } = await render(Video, {
+			...default_props,
+			interactive: false,
+			value: fake_value,
+			buttons: [{ value: "Analyze", id: 5, icon: null }]
+		});
+
+		const custom = listen("custom_button_click");
+		const btn = getByLabelText("Analyze");
+
+		await fireEvent.click(btn);
+
+		expect(custom).toHaveBeenCalledTimes(1);
+		expect(custom).toHaveBeenCalledWith({ id: 5 });
+	});
+});
+
+describe("Props: buttons (interactive mode)", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("clear button appears when video has a value", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
 			interactive: true,
-			webcam_options: {
-				mirror: true,
-				constraints: null
-			}
+			value: fake_value
 		});
-		let vid = getByTestId("Test Label-player") as HTMLVideoElement;
-		assert.equal(
-			vid.src,
-			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
-		);
-		assert.equal(queryAllByText("Test Label").length, 1);
+
+		const clearBtn = getByLabelText("common.clear");
+		expect(clearBtn).toBeTruthy();
 	});
 
-	test("hides label", async () => {
-		const { queryAllByText } = await render(Video, {
-			show_label: false,
-			loading_status,
-			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"
-			},
-			label: "Video Component",
-			root: "foo",
-			proxy_url: null,
-			streaming: false,
-			pending: false,
-			name: "bar",
-			sources: ["upload"],
+	test("clicking clear button removes the video and dispatches clear and input", async () => {
+		const { getByLabelText, listen } = await render(Video, {
+			...default_props,
 			interactive: true,
-			webcam_options: {
-				mirror: true,
-				constraints: null
-			}
+			value: fake_value
 		});
-		assert.equal(queryAllByText("Video Component").length, 1);
+
+		const clear = listen("clear");
+		const input = listen("input");
+		const clearBtn = getByLabelText("common.clear");
+
+		await fireEvent.click(clearBtn);
+
+		expect(clear).toHaveBeenCalledTimes(1);
+		expect(input).toHaveBeenCalledTimes(1);
 	});
+});
 
-	test("static Video sets value", async () => {
-		const { getByTestId } = await render(Video, {
-			show_label: true,
-			loading_status,
-			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,
-			name: "bar",
-			sources: ["upload"],
-			mode: "static",
-			webcam_options: {
-				mirror: true,
-				constraints: null
-			}
+describe("get_data", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("get_data returns the current value", async () => {
+		const { get_data, set_data } = await render(Video, {
+			...default_props,
+			value: null
 		});
-		let vid = getByTestId("test-player") as HTMLVideoElement;
-		assert.equal(
-			vid.src,
-			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
-		);
+
+		const initial = await get_data();
+		expect(initial.value).toBeNull();
+
+		await set_data({ value: fake_value });
+
+		const updated = await get_data();
+		expect(updated.value).toEqual(fake_value);
 	});
+});
 
-	test("when autoplay is true `media.play` should be called in static mode", async () => {
+describe("Autoplay", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("autoplay calls media.play in static mode", async () => {
 		const { getByTestId } = await render(Video, {
-			show_label: true,
-			loading_status,
+			...default_props,
 			interactive: false,
-			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
-			}
+			value: fake_value,
+			autoplay: true
 		});
-		const startButton = getByTestId("test-player") as HTMLVideoElement;
-		const fn = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn.callCount, 1);
+
+		const video = getByTestId("Video-player") as HTMLVideoElement;
+		const fn = vi.spyOn(video, "play").mockResolvedValue(undefined);
+		video.dispatchEvent(new Event("loadeddata"));
+		expect(fn).toHaveBeenCalledTimes(1);
 	});
 
-	test("when autoplay is true `media.play` should be called in dynamic mode", async () => {
+	test("autoplay calls media.play in interactive mode", async () => {
 		const { getByTestId } = await render(Video, {
-			show_label: true,
-			loading_status,
-			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
-			}
+			...default_props,
+			interactive: true,
+			value: fake_value,
+			autoplay: true
 		});
-		const startButton = getByTestId("test-player") as HTMLVideoElement;
-		const fn = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn.callCount, 1);
+
+		const video = getByTestId("Video-player") as HTMLVideoElement;
+		const fn = vi.spyOn(video, "play").mockResolvedValue(undefined);
+		video.dispatchEvent(new Event("loadeddata"));
+		expect(fn).toHaveBeenCalled();
 	});
+});
 
-	test("when autoplay is true `media.play` should be called in static mode when the Video data is updated", async () => {
-		const { getByTestId, unmount } = await render(Video, {
-			show_label: true,
-			loading_status,
-			interactive: false,
-			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
-			}
+describe("Player controls", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("play/pause button is rendered when video has a value", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
+			interactive: true,
+			value: fake_value
 		});
-		let startButton = getByTestId("test-player") as HTMLVideoElement;
-		const fn = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		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",
-				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
-			}
+		expect(getByLabelText("play-pause-replay-button")).toBeTruthy();
+	});
+
+	test("volume button is rendered", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
+			interactive: true,
+			value: fake_value
 		});
-		startButton = result.getByTestId("test-player") as HTMLVideoElement;
-		const fn2 = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn2.callCount, 1);
+
+		expect(getByLabelText("Adjust volume")).toBeTruthy();
 	});
 
-	test("when autoplay is true `media.play` should be called in dynamic mode when the Video data is updated", async () => {
-		const { getByTestId, unmount } = await render(Video, {
-			show_label: true,
-			loading_status,
+	test("fullscreen button is rendered", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
 			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
-			}
+			value: fake_value
 		});
-		let startButton = getByTestId("test-player") as HTMLVideoElement;
-		const fn = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fn.callCount, 1);
-		unmount();
 
-		const result = await render(Video, {
-			show_label: true,
-			loading_status,
+		expect(getByLabelText("full-screen")).toBeTruthy();
+	});
+
+	test("trim button is rendered in interactive mode", async () => {
+		const { getByLabelText } = await render(Video, {
+			...default_props,
 			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
-			}
+			value: fake_value
 		});
-		startButton = result.getByTestId("test-player") as HTMLVideoElement;
-		const fnResult = spyOn(startButton, "play");
-		startButton.dispatchEvent(new Event("loadeddata"));
-		assert.equal(fnResult.callCount, 1);
+
+		expect(getByLabelText("Trim video to selection")).toBeTruthy();
 	});
-	test("renders video and download button", async () => {
-		const data = {
-			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"
-		};
-		const results = await render(Video, {
+
+	test("trim button is not rendered in static mode", async () => {
+		const { queryByLabelText } = await render(Video, {
+			...default_props,
 			interactive: false,
-			label: "video",
-			show_label: true,
-			value: data,
-			root: "https://localhost:8000",
-			webcam_options: {
-				mirror: true,
-				constraints: null
-			}
+			value: fake_value
 		});
 
-		const downloadButton = results.getAllByTestId("download-div")[0];
-		expect(
-			downloadButton.getElementsByTagName("a")[0].getAttribute("href")
-		).toBe(data.path);
-		expect(
-			downloadButton.getElementsByTagName("button").length
-		).toBeGreaterThan(0);
+		expect(queryByLabelText("Trim video to selection")).toBeNull();
 	});
 
-	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,
+	test("clicking trim button enters edit mode with Trim and Cancel buttons", async () => {
+		const { getByLabelText, getByText } = await render(Video, {
+			...default_props,
 			interactive: true,
-			value: [
-				{
-					path: "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
-			}
+			value: fake_value
+		});
+
+		await fireEvent.click(getByLabelText("Trim video to selection"));
+
+		expect(getByText("Trim")).toBeTruthy();
+		expect(getByText("Cancel")).toBeTruthy();
+	});
+
+	test("clicking Cancel exits edit mode and restores trim button", async () => {
+		const { getByLabelText, getByText, queryByText } = await render(Video, {
+			...default_props,
+			interactive: true,
+			value: fake_value
+		});
+
+		await fireEvent.click(getByLabelText("Trim video to selection"));
+		expect(getByText("Cancel")).toBeTruthy();
+
+		await fireEvent.click(getByText("Cancel"));
+
+		expect(queryByText("Cancel")).toBeNull();
+		expect(getByLabelText("Trim video to selection")).toBeTruthy();
+	});
+
+	test("time display is rendered", async () => {
+		const { container } = await render(Video, {
+			...default_props,
+			interactive: true,
+			value: fake_value
+		});
+
+		const timeDisplay = container.querySelector(".time");
+		expect(timeDisplay).toBeTruthy();
+	});
+});
+
+const upload_props = {
+	...default_props,
+	sources: ["upload"] as "upload"[],
+	interactive: true,
+	value: null,
+	root: "https://example.com",
+	client: mock_client()
+};
+
+describe("Events: upload via file input", () => {
+	setupi18n();
+	afterEach(() => cleanup());
+
+	test("selecting a file triggers upload, change, and input events", async () => {
+		const { listen } = await render(Video, upload_props);
+
+		const upload = listen("upload");
+		const change = listen("change");
+		const input = listen("input");
+
+		await upload_file(TEST_MP4);
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
 		});
+		expect(input).toHaveBeenCalledTimes(1);
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("drag and drop a file triggers upload, change, and input events", async () => {
+		const { listen } = await render(Video, upload_props);
 
-		const mock = listen("change");
+		const upload = listen("upload");
+		const change = listen("change");
+		const input = listen("input");
 
-		((component.value = [
-			{
-				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4"
+		await drop_file(TEST_MP4, "[aria-label='video.drop_to_upload']");
+
+		await waitFor(() => {
+			expect(upload).toHaveBeenCalledTimes(1);
+		});
+		expect(input).toHaveBeenCalledTimes(1);
+		expect(change).toHaveBeenCalledTimes(1);
+	});
+
+	test("upload failure dispatches error event with the message", async () => {
+		const failing_upload = vi
+			.fn()
+			.mockRejectedValue(new Error("File too large"));
+		const { listen } = await render(Video, {
+			...upload_props,
+			client: {
+				upload: failing_upload,
+				stream: async () => ({ onmessage: null, close: () => {} })
 			}
-		]),
-			assert.equal(mock.callCount, 1));
+		});
+
+		const error = listen("error");
+
+		await upload_file(TEST_MP4);
+
+		await waitFor(() => {
+			expect(failing_upload).toHaveBeenCalled();
+		});
+
+		await waitFor(() => {
+			expect(error).toHaveBeenCalledTimes(1);
+		});
+		expect(error).toHaveBeenCalledWith("File too large");
 	});
 });

package/dist/Index.svelte

@@ -27,7 +27,8 @@
 	}
 
 	const gradio = new VideoGradio(props);
-	let old_value = $state(gradio.props.value);
+	let old_value = gradio.props.value;
+	let mounted = false;
 
 	let uploading = $state(false);
 	let dragging = $state(false);
@@ -37,6 +38,11 @@
 	let initial_value: FileData | null = gradio.props.value;
 
 	$effect(() => {
+		if (!mounted) {
+			old_value = gradio.props.value;
+			mounted = true;
+			return;
+		}
 		if (old_value != gradio.props.value) {
 			old_value = gradio.props.value;
 			gradio.dispatch("change");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.20.4",
+  "version": "0.20.6",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,16 +11,16 @@
     "@ffmpeg/util": "^0.12.2",
     "hls.js": "^1.6.13",
     "mrmime": "^2.0.1",
-    "@gradio/atoms": "^0.22.2",
+    "@gradio/atoms": "^0.23.0",
+    "@gradio/image": "^0.26.1",
     "@gradio/client": "^2.1.0",
-    "@gradio/image": "^0.25.4",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.12.5",
-    "@gradio/utils": "^0.12.0",
-    "@gradio/upload": "^0.17.7"
+    "@gradio/statustracker": "^0.13.1",
+    "@gradio/upload": "^0.17.8",
+    "@gradio/utils": "^0.12.2"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.2"
   },
   "exports": {
     "./package.json": "./package.json",