@gradio/video 0.10.2 → 0.10.4

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @gradio/video
 
+## 0.10.4
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.1
+- @gradio/statustracker@0.7.6
+- @gradio/atoms@0.8.1
+- @gradio/icons@0.7.2
+- @gradio/wasm@0.13.1
+- @gradio/client@1.5.2
+- @gradio/upload@0.12.4
+- @gradio/image@0.15.1
+
+## 0.10.3
+
+### Features
+
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+- [#9102](https://github.com/gradio-app/gradio/pull/9102) [`efdc323`](https://github.com/gradio-app/gradio/commit/efdc3231a7bde38cfe45d10086d0d36a24c1b9b4) - Initial SSR refactor.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/wasm@0.13.0
+- @gradio/icons@0.7.1
+- @gradio/image@0.15.0
+
 ## 0.10.2
 
 ### Dependency updates

package/Video.test.ts

@@ -8,9 +8,9 @@ import {
 	beforeEach,
 	expect
 } from "vitest";
-import { spy, spyOn } from "tinyspy";
-import { cleanup, render } from "@gradio/tootils";
-import { setupi18n } from "../app/src/i18n";
+import { spyOn } from "tinyspy";
+import { cleanup, render } from "@self/tootils";
+import { setupi18n } from "../core/src/i18n";
 
 import Video from "./Index.svelte";
 

package/dist/Example.svelte

@@ -0,0 +1,73 @@
+<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>
+
+{#if value}
+	{#if playable()}
+		<div
+			class="container"
+			class:table={type === "table"}
+			class:gallery={type === "gallery"}
+			class:selected
+		>
+			<Video
+				muted
+				playsinline
+				bind:node={video}
+				on:loadeddata={init}
+				on:mouseover={video.play.bind(video)}
+				on:mouseout={video.pause.bind(video)}
+				src={value?.video.url}
+				{loop}
+			/>
+		</div>
+	{:else}
+		<div>{value}</div>
+	{/if}
+{/if}
+
+<style>
+	.container {
+		flex: none;
+		max-width: none;
+	}
+	.container :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
+
+	.container:hover,
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+	.container.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		height: var(--size-20);
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,23 @@
+import { SvelteComponent } from "svelte";
+import { type FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+        value: {
+            video: FileData;
+            subtitles: FileData | null;
+        } | null;
+        loop: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExampleProps = typeof __propDef.props;
+export type ExampleEvents = typeof __propDef.events;
+export type ExampleSlots = typeof __propDef.slots;
+export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,176 @@
+<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 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 show_share_button = true;
+export let show_download_button;
+export let gradio;
+export let interactive;
+export let mirror_webcam;
+export let include_audio;
+export let loop = false;
+let _video = null;
+let _subtitle = null;
+let active_source;
+let initial_value = value;
+$:
+  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];
+  }
+$: {
+  if (value != null) {
+    _video = value.video;
+    _subtitle = value.subtitles;
+  } else {
+    _video = null;
+    _subtitle = null;
+  }
+}
+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 = { video: detail, subtitles: null };
+  } 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>
+
+{#if !interactive}
+	<Block
+		{visible}
+		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<StaticVideo
+			value={_video}
+			subtitle={_subtitle}
+			{label}
+			{show_label}
+			{autoplay}
+			{loop}
+			{show_share_button}
+			{show_download_button}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			on:share={({ detail }) => gradio.dispatch("share", detail)}
+			on:error={({ detail }) => gradio.dispatch("error", detail)}
+			i18n={gradio.i18n}
+			upload={gradio.client.upload}
+		/>
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null && active_source === "upload" ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{height}
+		{width}
+		{container}
+		{scale}
+		{min_width}
+		allow_overflow={false}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<Video
+			value={_video}
+			subtitle={_subtitle}
+			on:change={handle_change}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:error={handle_error}
+			{label}
+			{show_label}
+			{show_download_button}
+			{sources}
+			{active_source}
+			{mirror_webcam}
+			{include_audio}
+			{autoplay}
+			{root}
+			{loop}
+			{handle_reset_value}
+			on:clear={() => gradio.dispatch("clear")}
+			on:play={() => gradio.dispatch("play")}
+			on:pause={() => gradio.dispatch("pause")}
+			on:upload={() => gradio.dispatch("upload")}
+			on:stop={() => gradio.dispatch("stop")}
+			on:end={() => gradio.dispatch("end")}
+			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={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+		>
+			<UploadText i18n={gradio.i18n} type="video" />
+		</Video>
+	</Block>
+{/if}

package/dist/Index.svelte.d.ts

@@ -0,0 +1,157 @@
+import { SvelteComponent } from "svelte";
+import type { Gradio, ShareData } from "@gradio/utils";
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "@gradio/statustracker";
+declare const __propDef: {
+    props: {
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: ({
+            video: FileData;
+            subtitles: FileData | null;
+        } | null) | undefined;
+        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 | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        autoplay?: boolean | undefined;
+        show_share_button?: boolean | undefined;
+        show_download_button: boolean;
+        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;
+        mirror_webcam: boolean;
+        include_audio: boolean;
+        loop?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 | undefined;
+    /**accessor*/
+    set visible(_: boolean | undefined);
+    get value(): {
+        video: FileData;
+        subtitles: FileData | null;
+    } | null | undefined;
+    /**accessor*/
+    set value(_: {
+        video: FileData;
+        subtitles: FileData | null;
+    } | null | undefined);
+    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 show_share_button(): boolean | undefined;
+    /**accessor*/
+    set show_share_button(_: boolean | undefined);
+    get show_download_button(): boolean;
+    /**accessor*/
+    set show_download_button(_: boolean);
+    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 mirror_webcam(): boolean;
+    /**accessor*/
+    set mirror_webcam(_: boolean);
+    get include_audio(): boolean;
+    /**accessor*/
+    set include_audio(_: boolean);
+    get loop(): boolean | undefined;
+    /**accessor*/
+    set loop(_: boolean | undefined);
+}
+export {};

package/dist/index.d.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/dist/index.js

@@ -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/dist/shared/InteractiveVideo.svelte

@@ -0,0 +1,144 @@
+<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 mirror_webcam = false;
+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;
+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) {
+  dispatch("change", video);
+}
+function handle_capture({
+  detail
+}) {
+  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}
+		<div class="upload-container">
+			{#if active_source === "upload"}
+				<Upload
+					bind:dragging
+					filetype="video/x-m4v,video/*"
+					on:load={handle_load}
+					{max_file_size}
+					on:error={({ detail }) => dispatch("error", detail)}
+					{root}
+					{upload}
+					{stream_handler}
+				>
+					<slot />
+				</Upload>
+			{:else if active_source === "webcam"}
+				<Webcam
+					{root}
+					{mirror_webcam}
+					{include_audio}
+					mode="video"
+					on:error
+					on:capture={handle_capture}
+					on:start_recording
+					on:stop_recording
+					{i18n}
+					{upload}
+				/>
+			{/if}
+		</div>
+	{:else}
+		<ModifyUpload
+			{i18n}
+			on:clear={handle_clear}
+			download={show_download_button ? value.url : null}
+		/>
+		{#if playable()}
+			{#key value?.url}
+				<Player
+					{upload}
+					{root}
+					interactive
+					{autoplay}
+					src={value.url}
+					subtitle={subtitle?.url}
+					on:play
+					on:pause
+					on:stop
+					on:end
+					mirror={mirror_webcam && active_source === "webcam"}
+					{label}
+					{handle_change}
+					{handle_reset_value}
+					{loop}
+				/>
+			{/key}
+		{:else if value.size}
+			<div class="file-name">{value.orig_name || value.url}</div>
+			<div class="file-size">
+				{prettyBytes(value.size)}
+			</div>
+		{/if}
+	{/if}
+
+	<SelectSource {sources} bind:active_source {handle_clear} />
+</div>
+
+<style>
+	.file-name {
+		padding: var(--size-6);
+		font-size: var(--text-xxl);
+		word-break: break-all;
+	}
+
+	.file-size {
+		padding: var(--size-2);
+		font-size: var(--text-xl);
+	}
+
+	.upload-container {
+		height: 100%;
+		width: 100%;
+	}
+
+	.video-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/shared/InteractiveVideo.svelte.d.ts

@@ -0,0 +1,48 @@
+import { SvelteComponent } from "svelte";
+import type { FileData, Client } from "@gradio/client";
+import type { I18nFormatter } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        value?: (FileData | null) | undefined;
+        subtitle?: (FileData | null) | undefined;
+        sources?: (["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"]) | undefined;
+        label?: string | undefined;
+        show_download_button?: boolean | undefined;
+        show_label?: boolean | undefined;
+        mirror_webcam?: boolean | undefined;
+        include_audio: boolean;
+        autoplay: boolean;
+        root: string;
+        i18n: I18nFormatter;
+        active_source?: ("webcam" | "upload") | undefined;
+        handle_reset_value?: (() => void) | undefined;
+        max_file_size?: (number | null) | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+        loop: boolean;
+    };
+    events: {
+        error: CustomEvent<any>;
+        start_recording: CustomEvent<any>;
+        stop_recording: CustomEvent<any>;
+        play: CustomEvent<any>;
+        pause: CustomEvent<any>;
+        stop: CustomEvent<undefined>;
+        end: CustomEvent<any>;
+        change: CustomEvent<FileData | null>;
+        clear?: CustomEvent<undefined> | undefined;
+        drag: CustomEvent<boolean>;
+        upload: CustomEvent<FileData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type InteractiveVideoProps = typeof __propDef.props;
+export type InteractiveVideoEvents = typeof __propDef.events;
+export type InteractiveVideoSlots = typeof __propDef.slots;
+export default class InteractiveVideo extends SvelteComponent<InteractiveVideoProps, InteractiveVideoEvents, InteractiveVideoSlots> {
+}
+export {};