@gradio/video 0.1.0-beta.6 → 0.1.0-beta.9

package/CHANGELOG.md

@@ -1,18 +1,48 @@
 # @gradio/video
 
+## 0.1.0-beta.9
+
+### Features
+
+- [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6118](https://github.com/gradio-app/gradio/pull/6118) [`88bccfdba`](https://github.com/gradio-app/gradio/commit/88bccfdba3df2df4b2747ea5d649ed528047cf50) - Improve Video Component.  Thanks [@hannahblair](https://github.com/hannahblair)!
+- [#6140](https://github.com/gradio-app/gradio/pull/6140) [`71bf2702c`](https://github.com/gradio-app/gradio/commit/71bf2702cd5b810c89e2e53452532650acdcfb87) - Fix video.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.1.0-beta.8
+
+### Features
+
+- [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+### Fixes
+
+- [#6067](https://github.com/gradio-app/gradio/pull/6067) [`bf38e5f06`](https://github.com/gradio-app/gradio/commit/bf38e5f06a7039be913614901c308794fea83ae0) - remove dupe component.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6046](https://github.com/gradio-app/gradio/pull/6046) [`dbb7de5e0`](https://github.com/gradio-app/gradio/commit/dbb7de5e02c53fee05889d696d764d212cb96c74) - fix tests.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.1.0-beta.7
+
+### Patch Changes
+
+- Updated dependencies [[`174b73619`](https://github.com/gradio-app/gradio/commit/174b736194756e23f51bbaf6f850bac5f1ca95b5), [`5fbda0bd2`](https://github.com/gradio-app/gradio/commit/5fbda0bd2b2bbb2282249b8875d54acf87cd7e84)]:
+  - @gradio/wasm@0.2.0-beta.1
+  - @gradio/image@0.3.0-beta.7
+
 ## 0.1.0-beta.6
 
 ### Features
 
-- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files.  Thanks [@pngwn](https://github.com/pngwn)!
-- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#5960](https://github.com/gradio-app/gradio/pull/5960) [`319c30f3f`](https://github.com/gradio-app/gradio/commit/319c30f3fccf23bfe1da6c9b132a6a99d59652f7) - rererefactor frontend files. Thanks [@pngwn](https://github.com/pngwn)!
+- [#5938](https://github.com/gradio-app/gradio/pull/5938) [`13ed8a485`](https://github.com/gradio-app/gradio/commit/13ed8a485d5e31d7d75af87fe8654b661edcca93) - V4: Use beta release versions for '@gradio' packages. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
 
 ## 0.1.0
 
 ### Features
 
-- [#5627](https://github.com/gradio-app/gradio/pull/5627) [`b67115e8e`](https://github.com/gradio-app/gradio/commit/b67115e8e6e489fffd5271ea830211863241ddc5) - Lite: Make the Examples component display media files using pseudo HTTP requests to the Wasm server.  Thanks [@whitphx](https://github.com/whitphx)!
-- [#5934](https://github.com/gradio-app/gradio/pull/5934) [`8d909624f`](https://github.com/gradio-app/gradio/commit/8d909624f61a49536e3c0f71cb2d9efe91216219) - Fix styling issues with Audio, Image and Video components.  Thanks [@aliabd](https://github.com/aliabd)!
+- [#5627](https://github.com/gradio-app/gradio/pull/5627) [`b67115e8e`](https://github.com/gradio-app/gradio/commit/b67115e8e6e489fffd5271ea830211863241ddc5) - Lite: Make the Examples component display media files using pseudo HTTP requests to the Wasm server. Thanks [@whitphx](https://github.com/whitphx)!
+- [#5934](https://github.com/gradio-app/gradio/pull/5934) [`8d909624f`](https://github.com/gradio-app/gradio/commit/8d909624f61a49536e3c0f71cb2d9efe91216219) - Fix styling issues with Audio, Image and Video components. Thanks [@aliabd](https://github.com/aliabd)!
 
 ## 0.0.11
 

package/Index.svelte

@@ -2,8 +2,8 @@
 
 <script lang="ts">
 	import type { Gradio, ShareData } from "@gradio/utils";
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
+
+	import { normalise_file, type FileData } from "@gradio/client";
 	import { Block, UploadText } from "@gradio/atoms";
 	import StaticVideo from "./shared/VideoPreview.svelte";
 	import Video from "./shared/InteractiveVideo.svelte";
@@ -18,7 +18,11 @@
 	let old_value: { video: FileData; subtitles: FileData | null } | null = null;
 
 	export let label: string;
-	export let source: "upload" | "webcam";
+	export let sources:
+		| ["webcam"]
+		| ["upload"]
+		| ["webcam", "upload"]
+		| ["upload", "webcam"];
 	export let root: string;
 	export let root_url: null | string;
 	export let show_label: boolean;
@@ -44,13 +48,38 @@
 		share: ShareData;
 		error: string;
 	}>;
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 	export let mirror_webcam: boolean;
 	export let include_audio: boolean;
 
 	let _video: FileData | null = null;
 	let _subtitle: FileData | null = null;
 
+	let active_source: "webcam" | "upload";
+
+	let initial_value: { video: FileData; subtitles: FileData | null } | null =
+		value;
+
+	$: if (value && initial_value === null) {
+		initial_value = value;
+	}
+
+	const handle_reset_value = (): void => {
+		if (initial_value === null || value === initial_value) {
+			return;
+		}
+
+		value = initial_value;
+	};
+
+	$: if (sources) {
+		if (sources.length > 1) {
+			active_source = "upload";
+		} else {
+			active_source = sources[0];
+		}
+	}
+
 	$: {
 		if (value != null) {
 			_video = normalise_file(value.video, root, root_url);
@@ -82,10 +111,10 @@
 	}
 </script>
 
-{#if mode === "static"}
+{#if !interactive}
 	<Block
 		{visible}
-		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
@@ -110,6 +139,7 @@
 			{show_label}
 			{autoplay}
 			{show_share_button}
+			show_download_button={true}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:stop={() => gradio.dispatch("stop")}
@@ -122,7 +152,7 @@
 {:else}
 	<Block
 		{visible}
-		variant={value === null && source === "upload" ? "dashed" : "solid"}
+		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
 		border_mode={dragging ? "focus" : "base"}
 		padding={false}
 		{elem_id}
@@ -152,11 +182,13 @@
 			}}
 			{label}
 			{show_label}
-			{source}
+			{sources}
+			{active_source}
 			{mirror_webcam}
 			{include_audio}
 			{autoplay}
 			{root}
+			{handle_reset_value}
 			on:clear={() => gradio.dispatch("clear")}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}

package/README.md

@@ -1,11 +1,43 @@
-# `@gradio/button`
+# `@gradio/video`
 
-```html
+```javascript
 <script>
-	import { Button } from "@gradio/button";
+	import { BaseInteractiveVideo, BaseStaticVideo, BasePlayer } from "@gradio/button";
+	import type { FileData } from "@gradio/upload";
+	import type { Gradio } from "@gradio/utils";
+	export let _video: FileData;
 </script>
 
-<button type="primary|secondary" href="string" on:click="{e.detail === href}">
-	content
-</button>
+<StaticVideo
+	value={_video}
+	{label}
+	{show_label}
+	{autoplay}
+	{show_share_button}
+	i18n={gradio.i18n}
+/>
+
+<Video
+	value={_video}
+	{label}
+	{show_label}
+	source={"upload"}
+	{mirror_webcam}
+	{include_audio}
+	{autoplay}
+	i18n={gradio.i18n}
+>
+	<p>Upload Video Here</p>
+</Video>
+
+<BasePlayer
+	src={value.data}
+	{autoplay}
+	on:play
+	on:pause
+	on:stop
+	on:end
+	mirror={false}
+	{label}
+/>
 ```

package/Video.test.ts

@@ -12,8 +12,7 @@ import { spy, spyOn } from "tinyspy";
 import { cleanup, render } from "@gradio/tootils";
 import { setupi18n } from "../app/src/i18n";
 
-import InteractiveVideo from "./interactive";
-import StaticVideo from "./static";
+import Video from "./Index.svelte";
 
 import type { LoadingStatus } from "@gradio/statustracker";
 
@@ -37,23 +36,22 @@ describe("Video", () => {
 	afterEach(() => cleanup());
 
 	test("renders provided value and label", async () => {
-		const { getByTestId, queryAllByText } = await render(InteractiveVideo, {
+		const { getByTestId, queryAllByText } = await render(Video, {
 			show_label: true,
 			loading_status,
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			label: "Test Label",
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
 			name: "bar",
-			source: "upload"
+			sources: ["upload"],
+			interactive: true
 		});
 		let vid = getByTestId("Test Label-player") as HTMLVideoElement;
 		assert.equal(
@@ -64,13 +62,13 @@ describe("Video", () => {
 	});
 
 	test("hides label", async () => {
-		const { queryAllByText } = await render(InteractiveVideo, {
+		const { queryAllByText } = await render(Video, {
 			show_label: false,
 			loading_status,
 			value: {
-				name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-				data: null,
-				is_file: true
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
+				}
 			},
 			label: "Video Component",
 			root: "foo",
@@ -78,28 +76,28 @@ describe("Video", () => {
 			streaming: false,
 			pending: false,
 			name: "bar",
-			source: "upload"
+			sources: ["upload"],
+			interactive: true
 		});
 		assert.equal(queryAllByText("Video Component").length, 1);
 	});
 
 	test("static Video sets value", async () => {
-		const { getByTestId } = await render(StaticVideo, {
+		const { getByTestId } = await render(Video, {
 			show_label: true,
 			loading_status,
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
 			name: "bar",
-			source: "upload"
+			sources: ["upload"],
+			mode: "static"
 		});
 		let vid = getByTestId("test-player") as HTMLVideoElement;
 		assert.equal(
@@ -109,22 +107,20 @@ describe("Video", () => {
 	});
 
 	test("when autoplay is true `media.play` should be called in static mode", async () => {
-		const { getByTestId } = await render(StaticVideo, {
+		const { getByTestId } = await render(Video, {
 			show_label: true,
 			loading_status,
-			mode: "static",
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			interactive: false,
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "upload",
+			sources: ["upload"],
 			autoplay: true
 		});
 		const startButton = getByTestId("test-player") as HTMLVideoElement;
@@ -134,21 +130,19 @@ describe("Video", () => {
 	});
 
 	test("when autoplay is true `media.play` should be called in dynamic mode", async () => {
-		const { getByTestId } = await render(InteractiveVideo, {
+		const { getByTestId } = await render(Video, {
 			show_label: true,
 			loading_status,
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "upload",
+			sources: ["upload"],
 			autoplay: true
 		});
 		const startButton = getByTestId("test-player") as HTMLVideoElement;
@@ -158,116 +152,107 @@ 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(StaticVideo, {
+		const { component, getByTestId } = await render(Video, {
 			show_label: true,
 			loading_status,
-			mode: "static",
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			interactive: false,
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "upload",
+			sources: ["upload"],
 			autoplay: true
 		});
 		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			]
+			}
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 2);
 	});
 
 	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(InteractiveVideo, {
+		const { component, getByTestId } = await render(Video, {
 			show_label: true,
 			loading_status,
-			mode: "dynamic",
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			interactive: true,
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			],
+			},
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "upload",
+			sources: ["upload"],
 			autoplay: true
 		});
 		const startButton = getByTestId("test-player") as HTMLVideoElement;
 		const fn = spyOn(startButton, "play");
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
-			value: [
-				{
-					name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
-					data: null,
-					is_file: true
+			value: {
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 				}
-			]
+			}
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
 		assert.equal(fn.callCount, 2);
 	});
 	test("renders video and download button", async () => {
-		const data = [
-			{
-				data: null,
-				name: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-				is_file: true
+		const data = {
+			video: {
+				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+			},
+			subtitles: {
+				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
 			}
-		];
-		const results = await render(StaticVideo, {
-			mode: "static",
+		};
+		const results = await render(Video, {
+			interactive: false,
 			label: "video",
 			show_label: true,
 			value: data,
-			root: "foo"
+			root: "https://localhost:8000"
 		});
 
 		const downloadButton = results.getAllByTestId("download-div")[0];
 		expect(
 			downloadButton.getElementsByTagName("a")[0].getAttribute("href")
-		).toBe(data[0].name);
+		).toBe(data.video.path);
 		expect(
 			downloadButton.getElementsByTagName("button").length
 		).toBeGreaterThan(0);
 	});
 
 	test("video change event trigger fires when value is changed and only fires once", async () => {
-		const { component, listen } = await render(InteractiveVideo, {
+		const { component, listen } = await render(Video, {
 			show_label: true,
 			loading_status,
-			mode: "dynamic",
+			interactive: true,
 			value: [
 				{
-					name: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-					data: null,
-					is_file: true
+					path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
 				}
 			],
 			root: "foo",
 			root_url: null,
 			streaming: false,
 			pending: false,
-			source: "upload",
+			sources: ["upload"],
 			autoplay: true
 		});
 
@@ -275,9 +260,7 @@ describe("Video", () => {
 
 		(component.value = [
 			{
-				name: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4",
-				data: null,
-				is_file: true
+				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/b.mp4"
 			}
 		]),
 			assert.equal(mock.callCount, 1);

package/index.ts

@@ -0,0 +1,7 @@
+export { default as BaseInteractiveVideo } from "./shared/InteractiveVideo.svelte";
+export { default as BaseStaticVideo } from "./shared/VideoPreview.svelte";
+export { default as BasePlayer } from "./shared/Player.svelte";
+export { prettyBytes, playable, loaded } from "./shared/utils";
+export { default as BaseExample } from "./Example.svelte";
+import { default as Index } from "./Index.svelte";
+export default Index;

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@gradio/video",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.9",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "^0.2.0-beta.4",
-    "@gradio/icons": "^0.2.0-beta.1",
-    "@gradio/image": "^0.3.0-beta.6",
-    "@gradio/statustracker": "^0.3.0-beta.6",
-    "@gradio/upload": "^0.3.0-beta.4",
-    "@gradio/utils": "^0.2.0-beta.4",
-    "@gradio/wasm": "^0.2.0-beta.0"
+    "@gradio/atoms": "^0.2.0-beta.6",
+    "@gradio/client": "^0.7.0-beta.1",
+    "@gradio/icons": "^0.2.0-beta.3",
+    "@gradio/image": "^0.3.0-beta.9",
+    "@gradio/statustracker": "^0.3.0-beta.8",
+    "@gradio/upload": "^0.3.0-beta.6",
+    "@gradio/utils": "^0.2.0-beta.6",
+    "@gradio/wasm": "^0.2.0-beta.2"
   },
-  "main_changeset": true,
   "exports": {
-    ".": "./Index.svelte",
+    ".": "./index.ts",
     "./example": "./Example.svelte",
     "./package.json": "./package.json"
-  }
+  },
+  "main": "index.ts",
+  "main_changeset": true
 }