@gradio/video 0.5.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/video
 
+## 0.6.0
+
+### Features
+
+- [#7183](https://github.com/gradio-app/gradio/pull/7183) [`49d9c48`](https://github.com/gradio-app/gradio/commit/49d9c48537aa706bf72628e3640389470138bdc6) - [WIP] Refactor file normalization to be in the backend and remove it from the frontend of each component.  Thanks [@abidlabs](https://github.com/abidlabs)!
+
+## 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

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

@@ -3,7 +3,7 @@
 <script lang="ts">
 	import type { Gradio, ShareData } from "@gradio/utils";
 
-	import { normalise_file, type FileData } from "@gradio/client";
+	import type { FileData } from "@gradio/client";
 	import { Block, UploadText } from "@gradio/atoms";
 	import StaticVideo from "./shared/VideoPreview.svelte";
 	import Video from "./shared/InteractiveVideo.svelte";
@@ -24,7 +24,6 @@
 		| ["webcam", "upload"]
 		| ["upload", "webcam"];
 	export let root: string;
-	export let proxy_url: null | string;
 	export let show_label: boolean;
 	export let loading_status: LoadingStatus;
 	export let height: number | undefined;
@@ -80,8 +79,8 @@
 
 	$: {
 		if (value != null) {
-			_video = normalise_file(value.video, root, proxy_url);
-			_subtitle = normalise_file(value.subtitles, root, proxy_url);
+			_video = value.video;
+			_subtitle = value.subtitles;
 		} else {
 			_video = null;
 			_subtitle = null;

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>

package/Video.test.ts

@@ -41,8 +41,10 @@ describe("Video", () => {
 			loading_status,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			label: "Test Label",
 			root: "foo",
@@ -56,7 +58,7 @@ describe("Video", () => {
 		let vid = getByTestId("Test Label-player") as HTMLVideoElement;
 		assert.equal(
 			vid.src,
-			"https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
 		);
 		assert.equal(queryAllByText("Test Label").length, 1);
 	});
@@ -67,8 +69,10 @@ describe("Video", () => {
 			loading_status,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			label: "Video Component",
 			root: "foo",
@@ -88,8 +92,10 @@ describe("Video", () => {
 			loading_status,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			root: "foo",
 			proxy_url: null,
@@ -102,7 +108,7 @@ describe("Video", () => {
 		let vid = getByTestId("test-player") as HTMLVideoElement;
 		assert.equal(
 			vid.src,
-			"https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
 		);
 	});
 
@@ -113,8 +119,10 @@ describe("Video", () => {
 			interactive: false,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			root: "foo",
 			proxy_url: null,
@@ -135,8 +143,10 @@ describe("Video", () => {
 			loading_status,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			root: "foo",
 			proxy_url: null,
@@ -158,8 +168,10 @@ describe("Video", () => {
 			interactive: false,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			root: "foo",
 			proxy_url: null,
@@ -189,8 +201,10 @@ describe("Video", () => {
 			interactive: true,
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			},
 			root: "foo",
 			proxy_url: null,
@@ -205,8 +219,10 @@ describe("Video", () => {
 		component.$set({
 			value: {
 				video: {
-					path: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
-				}
+					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
 			}
 		});
 		startButton.dispatchEvent(new Event("loadeddata"));
@@ -215,10 +231,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"
-			},
-			subtitles: {
-				path: "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, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "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.5.0",
-    "@gradio/client": "^0.10.1",
+    "@gradio/atoms": "^0.5.1",
+    "@gradio/client": "^0.12.0",
     "@gradio/icons": "^0.3.2",
-    "@gradio/image": "^0.7.1",
-    "@gradio/statustracker": "^0.4.4",
-    "@gradio/utils": "^0.2.1",
-    "@gradio/wasm": "^0.5.1",
-    "@gradio/upload": "^0.7.0"
+    "@gradio/statustracker": "^0.4.5",
+    "@gradio/image": "^0.9.0",
+    "@gradio/upload": "^0.7.2",
+    "@gradio/utils": "^0.2.2",
+    "@gradio/wasm": "^0.6.0"
   },
   "exports": {
     ".": "./index.ts",

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 />