@gradio/video 0.17.0-dev.0 → 0.17.0-dev.2

package/dist/Index.svelte

@@ -1,103 +1,109 @@
 <svelte:options accessors={true} />
 
-<script>import { Block, UploadText } from "@gradio/atoms";
-import StaticVideo from "./shared/VideoPreview.svelte";
-import Video from "./shared/InteractiveVideo.svelte";
-import { StatusTracker } from "@gradio/statustracker";
-export let elem_id = "";
-export let elem_classes = [];
-export let visible = true;
-export let value = null;
-let old_value = null;
-export let subtitles = null;
-export let label;
-export let sources;
-export let root;
-export let show_label;
-export let loading_status;
-export let height;
-export let width;
-export let container = false;
-export let scale = null;
-export let min_width = void 0;
-export let autoplay = false;
-export let buttons = null;
-export let gradio;
-export let interactive;
-export let webcam_options;
-export let include_audio;
-export let loop = false;
-export let input_ready;
-let uploading = false;
-$: input_ready = !uploading;
-let active_source;
-let initial_value = null;
-$: if (value && initial_value === null) {
-  initial_value = value;
-}
-const handle_reset_value = () => {
-  if (initial_value === null || value === initial_value) {
-    return;
-  }
-  value = initial_value;
-};
-$: if (sources && !active_source) {
-  active_source = sources[0];
-}
-let dragging = false;
-$: {
-  if (JSON.stringify(value) !== JSON.stringify(old_value)) {
-    old_value = value;
-    gradio.dispatch("change");
-  }
-}
-function handle_change({ detail }) {
-  if (detail != null) {
-    value = detail;
-  } else {
-    value = null;
-  }
-}
-function handle_error({ detail }) {
-  const [level, status] = detail.includes("Invalid file type") ? ["warning", "complete"] : ["error", "error"];
-  loading_status = loading_status || {};
-  loading_status.status = status;
-  loading_status.message = detail;
-  gradio.dispatch(level, detail);
-}
+<script lang="ts">
+	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 { Gradio } from "@gradio/utils";
+	import type { VideoProps, VideoEvents } from "./types";
+
+	const props = $props();
+
+	let upload_promise = $state<Promise<any>>();
+
+	class VideoGradio extends Gradio<VideoEvents, VideoProps> {
+		async get_data() {
+			if (upload_promise) {
+				await upload_promise;
+				await tick();
+			}
+			const data = await super.get_data();
+
+			return data;
+		}
+	}
+
+	const gradio = new VideoGradio(props);
+	let old_value = $state(gradio.props.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) {
+			gradio.props.value = detail as FileData;
+		} else {
+			gradio.props.value = null;
+		}
+	}
+
+	function handle_error({ detail }: CustomEvent<string>): void {
+		const [level, status] = detail.includes("Invalid file type")
+			? ["warning", "complete"]
+			: ["error", "error"];
+		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")}
@@ -105,50 +111,57 @@ function handle_error({ detail }) {
 			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")}
@@ -157,9 +170,9 @@ function handle_error({ detail }) {
 			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/dist/Index.svelte.d.ts

@@ -1,155 +1,3 @@
-import { SvelteComponent } from "svelte";
-import type { Gradio, ShareData } from "@gradio/utils";
-import type { FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
-import type { WebcamOptions } from "./shared/utils";
-declare const __propDef: {
-    props: {
-        elem_id?: string;
-        elem_classes?: string[];
-        visible?: boolean | "hidden";
-        value?: null | FileData;
-        subtitles?: null | FileData;
-        label: string;
-        sources: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
-        root: string;
-        show_label: boolean;
-        loading_status: LoadingStatus;
-        height: number | undefined;
-        width: number | undefined;
-        container?: boolean;
-        scale?: number | null;
-        min_width?: number | undefined;
-        autoplay?: boolean;
-        buttons?: string[] | null;
-        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;
-        }>;
-        interactive: boolean;
-        webcam_options: WebcamOptions;
-        include_audio: boolean;
-        loop?: boolean;
-        input_ready: boolean;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type IndexProps = typeof __propDef.props;
-export type IndexEvents = typeof __propDef.events;
-export type IndexSlots = typeof __propDef.slots;
-export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
-    get elem_id(): string | undefined;
-    /**accessor*/
-    set elem_id(_: string | undefined);
-    get elem_classes(): string[] | undefined;
-    /**accessor*/
-    set elem_classes(_: string[] | undefined);
-    get visible(): boolean | "hidden" | undefined;
-    /**accessor*/
-    set visible(_: boolean | "hidden" | undefined);
-    get value(): any;
-    /**accessor*/
-    set value(_: any);
-    get subtitles(): any;
-    /**accessor*/
-    set subtitles(_: any);
-    get label(): string;
-    /**accessor*/
-    set label(_: string);
-    get sources(): ["upload"] | ["webcam"] | ["webcam", "upload"] | ["upload", "webcam"];
-    /**accessor*/
-    set sources(_: ["upload"] | ["webcam"] | ["webcam", "upload"] | ["upload", "webcam"]);
-    get root(): string;
-    /**accessor*/
-    set root(_: string);
-    get show_label(): boolean;
-    /**accessor*/
-    set show_label(_: boolean);
-    get loading_status(): LoadingStatus;
-    /**accessor*/
-    set loading_status(_: LoadingStatus);
-    get height(): number | undefined;
-    /**accessor*/
-    set height(_: number | undefined);
-    get width(): number | undefined;
-    /**accessor*/
-    set width(_: number | undefined);
-    get container(): boolean | undefined;
-    /**accessor*/
-    set container(_: boolean | undefined);
-    get scale(): number | null | undefined;
-    /**accessor*/
-    set scale(_: number | null | undefined);
-    get min_width(): number | undefined;
-    /**accessor*/
-    set min_width(_: number | undefined);
-    get autoplay(): boolean | undefined;
-    /**accessor*/
-    set autoplay(_: boolean | undefined);
-    get buttons(): string[] | null | undefined;
-    /**accessor*/
-    set buttons(_: string[] | null | undefined);
-    get 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;
-    }>;
-    /**accessor*/
-    set 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;
-    }>);
-    get interactive(): boolean;
-    /**accessor*/
-    set interactive(_: boolean);
-    get webcam_options(): WebcamOptions;
-    /**accessor*/
-    set webcam_options(_: WebcamOptions);
-    get include_audio(): boolean;
-    /**accessor*/
-    set include_audio(_: boolean);
-    get loop(): boolean | undefined;
-    /**accessor*/
-    set loop(_: boolean | undefined);
-    get input_ready(): boolean;
-    /**accessor*/
-    set input_ready(_: boolean);
-}
-export {};
+declare const Index: import("svelte").Component<$$ComponentProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/dist/shared/InteractiveVideo.svelte

@@ -1,61 +1,89 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Upload, ModifyUpload } from "@gradio/upload";
-import { BlockLabel } from "@gradio/atoms";
-import { Webcam } from "@gradio/image";
-import { Video } from "@gradio/icons";
-import { prettyBytes, playable } from "./utils";
-import Player from "./Player.svelte";
-import { SelectSource } from "@gradio/atoms";
-export let value = null;
-export let subtitle = null;
-export let sources = ["webcam", "upload"];
-export let label = void 0;
-export let show_download_button = false;
-export let show_label = true;
-export let webcam_options;
-export let include_audio;
-export let autoplay;
-export let root;
-export let i18n;
-export let active_source = "webcam";
-export let handle_reset_value = () => {
-};
-export let max_file_size = null;
-export let upload;
-export let stream_handler;
-export let loop;
-export let uploading = false;
-let has_change_history = false;
-const dispatch = createEventDispatcher();
-function handle_load({ detail }) {
-  value = detail;
-  dispatch("change", detail);
-  dispatch("upload", detail);
-}
-function handle_clear() {
-  value = null;
-  dispatch("change", null);
-  dispatch("clear");
-}
-function handle_change(video) {
-  has_change_history = true;
-  dispatch("change", video);
-}
-function handle_capture({
-  detail
-}) {
-  dispatch("change", detail);
-}
-let dragging = false;
-$: dispatch("drag", dragging);
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Webcam } from "@gradio/image";
+	import { Video } from "@gradio/icons";
+	import type { WebcamOptions } from "./utils";
+	import { prettyBytes, playable } from "./utils";
+	import Player from "./Player.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { SelectSource } from "@gradio/atoms";
+
+	export let value: FileData | null = null;
+	export let subtitle: FileData | null = null;
+	export let sources:
+		| ["webcam"]
+		| ["upload"]
+		| ["webcam", "upload"]
+		| ["upload", "webcam"] = ["webcam", "upload"];
+	export let label: string | undefined = undefined;
+	export let show_download_button = false;
+	export let show_label = true;
+	export let webcam_options: WebcamOptions;
+	export let include_audio: boolean;
+	export let autoplay: boolean;
+	export let root: string;
+	export let i18n: I18nFormatter;
+	export let active_source: "webcam" | "upload" = "webcam";
+	export let handle_reset_value: () => void = () => {};
+	export let max_file_size: number | null = null;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+	export let loop: boolean;
+	export let uploading = false;
+	export let upload_promise: Promise<any> | null = null;
+
+	let has_change_history = false;
+
+	const dispatch = createEventDispatcher<{
+		change: FileData | null;
+		clear?: never;
+		play?: never;
+		pause?: never;
+		end?: never;
+		drag: boolean;
+		error: string;
+		upload: FileData;
+		start_recording?: never;
+		stop_recording?: never;
+	}>();
+
+	function handle_load({ detail }: CustomEvent<FileData | null>): void {
+		value = detail;
+		dispatch("change", detail);
+		dispatch("upload", detail!);
+	}
+
+	function handle_clear(): void {
+		value = null;
+		dispatch("change", null);
+		dispatch("clear");
+	}
+
+	function handle_change(video: FileData): void {
+		has_change_history = true;
+		dispatch("change", video);
+	}
+
+	function handle_capture({
+		detail
+	}: CustomEvent<FileData | any | null>): void {
+		dispatch("change", detail);
+	}
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
 <div data-testid="video" class="video-container">
-	{#if value === null || value.url === undefined}
+	{#if value === null || value?.url === undefined}
 		<div class="upload-container">
 			{#if active_source === "upload"}
 				<Upload
+					bind:upload_promise
 					bind:dragging
 					bind:uploading
 					filetype="video/x-m4v,video/*"