@gradio/video 0.17.0-dev.2 → 0.17.0

package/CHANGELOG.md

@@ -1,4 +1,21 @@
 # @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
 

package/Index.svelte

@@ -89,7 +89,7 @@
 			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
 			{...gradio.shared.loading_status}
-			on:clear_status={() =>
+			on_clear_status={() =>
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
@@ -135,7 +135,7 @@
 			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
 			{...gradio.shared.loading_status}
-			on:clear_status={() =>
+			on_clear_status={() =>
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 

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,

package/dist/Index.svelte

@@ -89,7 +89,7 @@
 			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
 			{...gradio.shared.loading_status}
-			on:clear_status={() =>
+			on_clear_status={() =>
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 
@@ -135,7 +135,7 @@
 			autoscroll={gradio.shared.autoscroll}
 			i18n={gradio.i18n}
 			{...gradio.shared.loading_status}
-			on:clear_status={() =>
+			on_clear_status={() =>
 				gradio.dispatch("clear_status", gradio.shared.loading_status)}
 		/>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.17.0-dev.2",
+  "version": "0.17.0",
   "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.19.0-dev.1",
-    "@gradio/icons": "^0.15.0-dev.0",
-    "@gradio/client": "^2.0.0-dev.2",
-    "@gradio/image": "^0.24.0-dev.2",
-    "@gradio/statustracker": "^0.12.0-dev.1",
-    "@gradio/upload": "^0.17.2-dev.2",
-    "@gradio/utils": "^0.10.3-dev.0"
+    "@gradio/client": "^2.0.0",
+    "@gradio/icons": "^0.15.0",
+    "@gradio/atoms": "^0.19.0",
+    "@gradio/image": "^0.24.0",
+    "@gradio/statustracker": "^0.12.0",
+    "@gradio/upload": "^0.17.2",
+    "@gradio/utils": "^0.10.3"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.0-dev.0"
+    "@gradio/preview": "^0.15.0"
   },
   "exports": {
     "./package.json": "./package.json",