@gradio/video 0.16.0 → 0.17.0-dev.2

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @gradio/video
 
+## 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
+
+### Features
+
+- [#12041](https://github.com/gradio-app/gradio/pull/12041) [`90e8a2c`](https://github.com/gradio-app/gradio/commit/90e8a2c23774e1d2a7401bccf4bdc86f70531de5) - Video subtitles.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/upload@0.17.2-dev.0
+- @gradio/client@2.0.0-dev.0
+- @gradio/image@0.23.2-dev.0
+
+## 0.16.0
+
+### Dependency updates
+
+- @gradio/client@1.19.1
+
+## 0.16.0
+
+### Dependency updates
+
+- @gradio/image@0.23.1
+- @gradio/upload@0.17.1
+- @gradio/atoms@0.18.1
+
 ## 0.16.0
 
 ### Features

package/Example.svelte

@@ -5,7 +5,7 @@
 
 	export let type: "gallery" | "table";
 	export let selected = false;
-	export let value: { video: FileData; subtitles: FileData | null } | null;
+	export let value: null | FileData = null;
 	export let loop: boolean;
 	let video: HTMLVideoElement;
 
@@ -35,7 +35,7 @@
 				on:loadeddata={init}
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
-				src={value?.video.url}
+				src={value?.url}
 				is_stream={false}
 				{loop}
 			/>

package/Index.svelte

@@ -1,114 +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: { video: FileData; subtitles: FileData | null } | null =
-		null;
-	let old_value: { video: FileData; subtitles: FileData | null } | null = 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;
-
-	export let container = false;
-	export let scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export let autoplay = false;
-	export let show_share_button = true;
-	export let show_download_button: boolean;
-	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;
+	import { Gradio } from "@gradio/utils";
+	import type { VideoProps, VideoEvents } from "./types";
 
-	let _video: FileData | null = null;
-	let _subtitle: FileData | null = null;
+	const props = $props();
 
-	let active_source: "webcam" | "upload";
+	let upload_promise = $state<Promise<any>>();
 
-	let initial_value: { video: FileData; subtitles: FileData | null } | null =
-		value;
-
-	$: 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];
 	}
 
-	$: {
-		if (value != null) {
-			_video = value.video;
-			_subtitle = value.subtitles;
-		} else {
-			_video = null;
-			_subtitle = null;
-		}
-	}
+	const gradio = new VideoGradio(props);
+	let old_value = $state(gradio.props.value);
 
-	let dragging = false;
+	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;
 
-	$: {
-		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-			old_value = 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 = { video: detail, subtitles: null } as {
-				video: FileData;
-				subtitles: FileData | null;
-			} | null;
+			gradio.props.value = detail as FileData;
 		} else {
-			value = null;
+			gradio.props.value = null;
 		}
 	}
 
@@ -116,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={_video}
-			subtitle={_subtitle}
-			{label}
-			{show_label}
-			{autoplay}
-			{loop}
-			{show_share_button}
-			{show_download_button}
+			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")}
@@ -161,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={_video}
-			subtitle={_subtitle}
+			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}
-			{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")}
@@ -213,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.stories.svelte

@@ -46,11 +46,9 @@
 	name="Static video"
 	args={{
 		value: {
-			video: {
-				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				orig_name: "world.mp4"
-			}
+			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			orig_name: "world.mp4"
 		},
 		label: "world video",
 		show_label: true,
@@ -68,11 +66,9 @@
 	name="Static video with vertical video"
 	args={{
 		value: {
-			video: {
-				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
-				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
-				orig_name: "world_vertical.mp4"
-			}
+			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+			orig_name: "world_vertical.mp4"
 		},
 		label: "world video",
 		show_label: true,
@@ -115,11 +111,9 @@
 		width: 400,
 		height: 400,
 		value: {
-			video: {
-				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				orig_name: "world.mp4"
-			}
+			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			orig_name: "world.mp4"
 		},
 		webcam_options: {
 			mirror: true,
@@ -132,11 +126,9 @@
 	name="Trim video"
 	args={{
 		value: {
-			video: {
-				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
-				orig_name: "world.mp4"
-			}
+			path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4",
+			orig_name: "world.mp4"
 		},
 		label: "world video",
 		show_label: true,

package/Video.test.ts

@@ -40,11 +40,8 @@ describe("Video", () => {
 			show_label: true,
 			loading_status,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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",
@@ -72,11 +69,8 @@ describe("Video", () => {
 			show_label: false,
 			loading_status,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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",
@@ -99,11 +93,8 @@ describe("Video", () => {
 			show_label: true,
 			loading_status,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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,
@@ -130,11 +121,8 @@ describe("Video", () => {
 			loading_status,
 			interactive: false,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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,
@@ -158,11 +146,8 @@ describe("Video", () => {
 			show_label: true,
 			loading_status,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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,
@@ -187,11 +172,8 @@ describe("Video", () => {
 			loading_status,
 			interactive: false,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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,
@@ -209,9 +191,7 @@ describe("Video", () => {
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
 			value: {
-				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+				path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
 			}
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
@@ -224,11 +204,8 @@ describe("Video", () => {
 			loading_status,
 			interactive: true,
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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,
@@ -246,11 +223,8 @@ describe("Video", () => {
 		startButton.dispatchEvent(new Event("loadeddata"));
 		component.$set({
 			value: {
-				video: {
-					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"
-				},
-				subtitles: null
+				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"
 			}
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
@@ -258,10 +232,8 @@ describe("Video", () => {
 	});
 	test("renders video and download button", async () => {
 		const data = {
-			video: {
-				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"
-			}
+			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, {
 			interactive: false,
@@ -278,7 +250,7 @@ describe("Video", () => {
 		const downloadButton = results.getAllByTestId("download-div")[0];
 		expect(
 			downloadButton.getElementsByTagName("a")[0].getAttribute("href")
-		).toBe(data.video.path);
+		).toBe(data.path);
 		expect(
 			downloadButton.getElementsByTagName("button").length
 		).toBeGreaterThan(0);
@@ -308,11 +280,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;
-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}
@@ -31,7 +35,7 @@ async function init() {
 				on:loadeddata={init}
 				on:mouseover={video.play.bind(video)}
 				on:mouseout={video.pause.bind(video)}
-				src={value?.video.url}
+				src={value?.url}
 				is_stream={false}
 				{loop}
 			/>