@gradio/video 0.4.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/video
 
+## 0.5.1
+
+### Features
+
+- [#7274](https://github.com/gradio-app/gradio/pull/7274) [`fdd1521`](https://github.com/gradio-app/gradio/commit/fdd15213c24b9cbc58bbc1b6beb4af7c18f48557) - chore: Change time format (thanks @jjshoots for the independent contribution).  Thanks [@arian81](https://github.com/arian81)!
+
+### Fixes
+
+- [#7192](https://github.com/gradio-app/gradio/pull/7192) [`8dd6f4b`](https://github.com/gradio-app/gradio/commit/8dd6f4bc1901792f05cd59e86df7b1dbab692739) - Handle the case where examples is `null` for all components.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 0.5.0
+
+### Features
+
+- [#7104](https://github.com/gradio-app/gradio/pull/7104) [`bc2cdc1`](https://github.com/gradio-app/gradio/commit/bc2cdc1df95b38025486cf76df4a494b66d98585) - Allow download button for interactive Audio and Video components.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.4.0
 
 ### Fixes

package/Example.svelte

@@ -20,25 +20,27 @@
 	}
 </script>
 
-{#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={samples_dir + value?.video.path}
-		/>
-	</div>
-{:else}
-	<div>{value}</div>
+{#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={samples_dir + value?.video.path}
+			/>
+		</div>
+	{:else}
+		<div>{value}</div>
+	{/if}
 {/if}
 
 <style>

package/Index.svelte

@@ -35,6 +35,7 @@
 	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;
@@ -146,7 +147,7 @@
 			{show_label}
 			{autoplay}
 			{show_share_button}
-			show_download_button={true}
+			{show_download_button}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
 			on:stop={() => gradio.dispatch("stop")}
@@ -185,6 +186,7 @@
 			on:error={handle_error}
 			{label}
 			{show_label}
+			{show_download_button}
 			{sources}
 			{active_source}
 			{mirror_webcam}

package/Video.stories.svelte

@@ -1,12 +1,24 @@
-<script>
-	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+<script context="module">
+	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import Video from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
 	import { userEvent, within } from "@storybook/testing-library";
-</script>
+	import { allModes } from "../storybook/modes";
 
-<Meta title="Components/Video" component={Video} />
+	export const meta = {
+		title: "Components/Video",
+		component: Video,
+		parameters: {
+			chromatic: {
+				modes: {
+					desktop: allModes["desktop"],
+					mobile: allModes["mobile"]
+				}
+			}
+		}
+	};
+</script>
 
 <div>
 	<Template let:args>
@@ -38,6 +50,7 @@
 		},
 		label: "world video",
 		show_label: true,
+		show_download_button: true,
 		interactive: false,
 		height: 200,
 		width: 400
@@ -55,6 +68,7 @@
 		},
 		label: "world video",
 		show_label: true,
+		show_download_button: false,
 		interactive: false,
 		height: 200,
 		width: 400
@@ -74,6 +88,26 @@
 	}}
 />
 
+<Story
+	name="Upload video with download button"
+	args={{
+		label: "world video",
+		show_label: true,
+		interactive: true,
+		sources: ["upload", "webcam"],
+		show_download_button: true,
+		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"
+			}
+		}
+	}}
+/>
+
 <Story
 	name="Trim video"
 	args={{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,14 +10,14 @@
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.4.1",
-    "@gradio/client": "^0.10.1",
+    "@gradio/client": "^0.11.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/image": "^0.7.0",
-    "@gradio/statustracker": "^0.4.3",
-    "@gradio/upload": "^0.6.1",
-    "@gradio/wasm": "^0.5.0",
-    "@gradio/utils": "^0.2.0"
+    "@gradio/image": "^0.8.0",
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/upload": "^0.7.1",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/wasm": "^0.6.0",
+    "@gradio/atoms": "^0.5.1"
   },
   "exports": {
     ".": "./index.ts",

package/shared/InteractiveVideo.svelte

@@ -19,6 +19,7 @@
 		| ["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 mirror_webcam = false;
 	export let include_audio: boolean;
@@ -96,7 +97,11 @@
 			{/if}
 		</div>
 	{:else}
-		<ModifyUpload {i18n} on:clear={handle_clear} />
+		<ModifyUpload
+			{i18n}
+			on:clear={handle_clear}
+			download={show_download_button ? value.url : null}
+		/>
 		{#if playable()}
 			{#key value?.url}
 				<Player

package/shared/Player.svelte

@@ -5,6 +5,7 @@
 	import VideoControls from "./VideoControls.svelte";
 	import type { FileData } from "@gradio/client";
 	import { prepare_files, upload } from "@gradio/client";
+	import { format_time } from "@gradio/utils";
 
 	export let root = "";
 	export let src: string;
@@ -70,16 +71,6 @@
 		time = (duration * (e.clientX - left)) / (right - left);
 	}
 
-	function format(seconds: number): string {
-		if (isNaN(seconds) || !isFinite(seconds)) return "...";
-
-		const minutes = Math.floor(seconds / 60);
-		let _seconds: number | string = Math.floor(seconds % 60);
-		if (_seconds < 10) _seconds = `0${_seconds}`;
-
-		return `${minutes}:${_seconds}`;
-	}
-
 	function handle_end(): void {
 		dispatch("stop");
 		dispatch("end");
@@ -138,7 +129,7 @@
 				{/if}
 			</span>
 
-			<span class="time">{format(time)} / {format(duration)}</span>
+			<span class="time">{format_time(time)} / {format_time(duration)}</span>
 
 			<!-- TODO: implement accessible video timeline for 4.0 -->
 			<!-- svelte-ignore a11y-click-events-have-key-events -->

package/shared/VideoControls.svelte

@@ -5,6 +5,7 @@
 	import { FFmpeg } from "@ffmpeg/ffmpeg";
 	import loadFfmpeg from "./utils";
 	import { onMount } from "svelte";
+	import { format_time } from "@gradio/utils";
 
 	export let videoElement: HTMLVideoElement;
 
@@ -24,18 +25,6 @@
 	$: if (mode === "edit" && trimmedDuration === null && videoElement)
 		trimmedDuration = videoElement.duration;
 
-	const formatTime = (seconds: number): string => {
-		const minutes = Math.floor(seconds / 60);
-		const secondsRemainder = Math.round(seconds) % 60;
-		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
-
-		if (Number.isNaN(minutes) || Number.isNaN(secondsRemainder)) {
-			return "00:00";
-		}
-
-		return `${minutes}:${paddedSeconds}`;
-	};
-
 	let trimmedDuration: number | null = null;
 	let dragStart = 0;
 	let dragEnd = 0;
@@ -69,7 +58,7 @@
 		{#if mode === "edit" && trimmedDuration !== null}
 			<time
 				aria-label="duration of selected region in seconds"
-				class:hidden={loadingTimeline}>{formatTime(trimmedDuration)}</time
+				class:hidden={loadingTimeline}>{format_time(trimmedDuration)}</time
 			>
 		{:else}
 			<div />