@gradio/video 0.17.0 → 0.19.0

package/CHANGELOG.md

@@ -1,4 +1,32 @@
 # @gradio/video
+
+## 0.19.0
+
+### Features
+
+- [#12539](https://github.com/gradio-app/gradio/pull/12539) [`f1d83fa`](https://github.com/gradio-app/gradio/commit/f1d83fac3d6e4bad60cf896a026fa2d572f26073) - Add ability to add custom buttons to components.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.20.0
+- @gradio/utils@0.11.0
+- @gradio/client@2.0.1
+- @gradio/statustracker@0.12.1
+- @gradio/upload@0.17.3
+- @gradio/image@0.25.0
+
+## 0.18.0
+
+### Features
+
+- [#12504](https://github.com/gradio-app/gradio/pull/12504) [`4476400`](https://github.com/gradio-app/gradio/commit/44764009dfebecf894298efe80366e42578ea65d) - Add `playback_position` to gr.Audio and gr.Video, which can be updated and read.  Thanks @aliabid94!
+
+## 0.17.0
+
+### Dependency updates
+
+- @gradio/utils@0.10.4
+
 ## 0.17.0
 
 ### Features

package/Index.svelte

@@ -100,10 +100,11 @@
 			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"
-			)}
+			buttons={gradio.props.buttons ?? ["download", "share"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+			bind:playback_position={gradio.props.playback_position}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:stop={() => gradio.dispatch("stop")}
@@ -149,7 +150,10 @@
 			bind:uploading
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
-			show_download_button={(gradio.props.buttons || []).includes("download")}
+			buttons={gradio.props.buttons ?? ["download", "share"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 			sources={gradio.props.sources}
 			{active_source}
 			webcam_options={gradio.props.webcam_options}
@@ -158,6 +162,7 @@
 			root={gradio.shared.root}
 			loop={gradio.props.loop}
 			{handle_reset_value}
+			bind:playback_position={gradio.props.playback_position}
 			on:clear={() => {
 				gradio.props.value = null;
 				gradio.dispatch("clear");

package/dist/Index.svelte

@@ -100,10 +100,11 @@
 			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"
-			)}
+			buttons={gradio.props.buttons ?? ["download", "share"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
+			bind:playback_position={gradio.props.playback_position}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:stop={() => gradio.dispatch("stop")}
@@ -149,7 +150,10 @@
 			bind:uploading
 			label={gradio.shared.label}
 			show_label={gradio.shared.show_label}
-			show_download_button={(gradio.props.buttons || []).includes("download")}
+			buttons={gradio.props.buttons ?? ["download", "share"]}
+			on_custom_button_click={(id) => {
+				gradio.dispatch("custom_button_click", { id });
+			}}
 			sources={gradio.props.sources}
 			{active_source}
 			webcam_options={gradio.props.webcam_options}
@@ -158,6 +162,7 @@
 			root={gradio.shared.root}
 			loop={gradio.props.loop}
 			{handle_reset_value}
+			bind:playback_position={gradio.props.playback_position}
 			on:clear={() => {
 				gradio.props.value = null;
 				gradio.dispatch("clear");

package/dist/shared/InteractiveVideo.svelte

@@ -34,6 +34,7 @@
 	export let loop: boolean;
 	export let uploading = false;
 	export let upload_promise: Promise<any> | null = null;
+	export let playback_position = 0;
 
 	let has_change_history = false;
 
@@ -139,6 +140,7 @@
 				{show_download_button}
 				{handle_clear}
 				{has_change_history}
+				bind:playback_position
 			/>
 		{/key}
 	{:else if value.size}

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

@@ -39,6 +39,7 @@ declare const InteractiveVideo: $$__sveltets_2_IsomorphicComponent<$$__sveltets_
     loop: boolean;
     uploading?: boolean;
     upload_promise?: Promise<any> | null;
+    playback_position?: number;
 }, {
     default: {};
 }>, {

package/dist/shared/Player.svelte

@@ -25,6 +25,7 @@
 	export let value: FileData | null = null;
 	export let handle_clear: () => void = () => {};
 	export let has_change_history = false;
+	export let playback_position = 0;
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
@@ -100,6 +101,10 @@
 
 	$: time = time || 0;
 	$: duration = duration || 0;
+	$: playback_position = time;
+	$: if (playback_position !== time && video) {
+		video.currentTime = playback_position;
+	}
 </script>
 
 <div class="wrap">

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

@@ -31,6 +31,7 @@ declare const Player: $$__sveltets_2_IsomorphicComponent<{
     value?: FileData | null;
     handle_clear?: () => void;
     has_change_history?: boolean;
+    playback_position?: number;
 }, {
     play: CustomEvent<any>;
     pause: CustomEvent<any>;

package/dist/shared/VideoPreview.svelte

@@ -11,6 +11,7 @@
 	import type { FileData, Client } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
@@ -20,12 +21,13 @@
 	export let label: string | undefined = undefined;
 	export let show_label = true;
 	export let autoplay: boolean;
-	export let show_share_button = true;
-	export let show_download_button = true;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 	export let loop: boolean;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let display_icon_button_wrapper_top_corner = false;
+	export let playback_position = 0;
 
 	let old_value: FileData | null = null;
 	let old_subtitle: FileData | null = null;
@@ -84,13 +86,16 @@
 			interactive={false}
 			{upload}
 			{i18n}
+			bind:playback_position
 		/>
 	{/key}
 	<div data-testid="download-div">
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
+			buttons={buttons ?? ["download", "share"]}
+			{on_custom_button_click}
 		>
-			{#if show_download_button}
+			{#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink
 					href={value.is_stream
 						? value.url?.replace("playlist.m3u8", "playlist-file")
@@ -100,7 +105,7 @@
 					<IconButton Icon={Download} label="Download" />
 				</DownloadLink>
 			{/if}
-			{#if show_share_button}
+			{#if buttons?.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
 					on:error

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

@@ -1,4 +1,5 @@
 import type { FileData, Client } from "@gradio/client";
+import type { CustomButton as CustomButtonType } from "@gradio/utils";
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
@@ -19,12 +20,13 @@ declare const VideoPreview: $$__sveltets_2_IsomorphicComponent<{
     label?: string | undefined;
     show_label?: boolean;
     autoplay: boolean;
-    show_share_button?: boolean;
-    show_download_button?: boolean;
+    buttons?: (string | CustomButtonType)[] | null;
+    on_custom_button_click?: ((id: number) => void) | null;
     loop: boolean;
     i18n: I18nFormatter;
     upload: Client["upload"];
     display_icon_button_wrapper_top_corner?: boolean;
+    playback_position?: number;
 }, {
     play: CustomEvent<any>;
     pause: CustomEvent<any>;

package/dist/types.d.ts

@@ -1,18 +1,20 @@
 import type { FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
+import type { CustomButton } from "@gradio/utils";
 import type { WebcamOptions } from "./shared/utils";
 export interface VideoProps {
     value: FileData | null;
     height: number | undefined;
     width: number | undefined;
     autoplay: boolean;
-    buttons: ("share" | "download" | "fullscreen")[];
+    buttons: ("share" | "download" | "fullscreen" | CustomButton)[];
     sources: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
     webcam_options: WebcamOptions;
     include_audio: boolean;
     loop: boolean;
     webcam_constraints: object;
     subtitles: FileData | null;
+    playback_position: number;
 }
 export interface VideoEvents {
     change: never;
@@ -28,4 +30,7 @@ export interface VideoEvents {
     share: any;
     error: any;
     warning: any;
+    custom_button_click: {
+        id: number;
+    };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.17.0",
+  "version": "0.19.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/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"
+    "@gradio/atoms": "^0.20.0",
+    "@gradio/client": "^2.0.1",
+    "@gradio/statustracker": "^0.12.1",
+    "@gradio/image": "^0.25.0",
+    "@gradio/upload": "^0.17.3",
+    "@gradio/utils": "^0.11.0",
+    "@gradio/icons": "^0.15.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.15.0"
+    "@gradio/preview": "^0.15.1"
   },
   "exports": {
     "./package.json": "./package.json",

package/shared/InteractiveVideo.svelte

@@ -34,6 +34,7 @@
 	export let loop: boolean;
 	export let uploading = false;
 	export let upload_promise: Promise<any> | null = null;
+	export let playback_position = 0;
 
 	let has_change_history = false;
 
@@ -139,6 +140,7 @@
 				{show_download_button}
 				{handle_clear}
 				{has_change_history}
+				bind:playback_position
 			/>
 		{/key}
 	{:else if value.size}

package/shared/Player.svelte

@@ -25,6 +25,7 @@
 	export let value: FileData | null = null;
 	export let handle_clear: () => void = () => {};
 	export let has_change_history = false;
+	export let playback_position = 0;
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
@@ -100,6 +101,10 @@
 
 	$: time = time || 0;
 	$: duration = duration || 0;
+	$: playback_position = time;
+	$: if (playback_position !== time && video) {
+		video.currentTime = playback_position;
+	}
 </script>
 
 <div class="wrap">

package/shared/VideoPreview.svelte

@@ -11,6 +11,7 @@
 	import type { FileData, Client } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
+	import type { CustomButton as CustomButtonType } from "@gradio/utils";
 
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
@@ -20,12 +21,13 @@
 	export let label: string | undefined = undefined;
 	export let show_label = true;
 	export let autoplay: boolean;
-	export let show_share_button = true;
-	export let show_download_button = true;
+	export let buttons: (string | CustomButtonType)[] | null = null;
+	export let on_custom_button_click: ((id: number) => void) | null = null;
 	export let loop: boolean;
 	export let i18n: I18nFormatter;
 	export let upload: Client["upload"];
 	export let display_icon_button_wrapper_top_corner = false;
+	export let playback_position = 0;
 
 	let old_value: FileData | null = null;
 	let old_subtitle: FileData | null = null;
@@ -84,13 +86,16 @@
 			interactive={false}
 			{upload}
 			{i18n}
+			bind:playback_position
 		/>
 	{/key}
 	<div data-testid="download-div">
 		<IconButtonWrapper
 			display_top_corner={display_icon_button_wrapper_top_corner}
+			buttons={buttons ?? ["download", "share"]}
+			{on_custom_button_click}
 		>
-			{#if show_download_button}
+			{#if buttons?.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink
 					href={value.is_stream
 						? value.url?.replace("playlist.m3u8", "playlist-file")
@@ -100,7 +105,7 @@
 					<IconButton Icon={Download} label="Download" />
 				</DownloadLink>
 			{/if}
-			{#if show_share_button}
+			{#if buttons?.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
 					on:error

package/types.ts

@@ -1,5 +1,6 @@
 import type { FileData } from "@gradio/client";
 import type { LoadingStatus } from "@gradio/statustracker";
+import type { CustomButton } from "@gradio/utils";
 import type { WebcamOptions } from "./shared/utils";
 
 export interface VideoProps {
@@ -7,7 +8,7 @@ export interface VideoProps {
 	height: number | undefined;
 	width: number | undefined;
 	autoplay: boolean;
-	buttons: ("share" | "download" | "fullscreen")[];
+	buttons: ("share" | "download" | "fullscreen" | CustomButton)[];
 	sources:
 		| ["webcam"]
 		| ["upload"]
@@ -18,6 +19,7 @@ export interface VideoProps {
 	loop: boolean;
 	webcam_constraints: object;
 	subtitles: FileData | null;
+	playback_position: number;
 }
 
 export interface VideoEvents {
@@ -34,4 +36,5 @@ export interface VideoEvents {
 	share: any;
 	error: any;
 	warning: any;
+	custom_button_click: { id: number };
 }