@gradio/video 0.1.8 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @gradio/video
 
+## 0.2.0
+
+### Features
+
+- [#6726](https://github.com/gradio-app/gradio/pull/6726) [`21cfb0a`](https://github.com/gradio-app/gradio/commit/21cfb0acc309bb1a392f4d8a8e42f6be864c5978) - Remove the styles from the Image/Video primitive components and Fix the container styles.  Thanks [@whitphx](https://github.com/whitphx)!
+- [#6398](https://github.com/gradio-app/gradio/pull/6398) [`67ddd40`](https://github.com/gradio-app/gradio/commit/67ddd40b4b70d3a37cb1637c33620f8d197dbee0) - Lite v4.  Thanks [@whitphx](https://github.com/whitphx)!
+
+### Fixes
+
+- [#6698](https://github.com/gradio-app/gradio/pull/6698) [`798eca5`](https://github.com/gradio-app/gradio/commit/798eca524d44289c536c47eec7c4fdce9fe81905) - Fit video media within Video component.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
+## 0.1.9
+
+### Fixes
+
+- [#6566](https://github.com/gradio-app/gradio/pull/6566) [`d548202`](https://github.com/gradio-app/gradio/commit/d548202d2b5bd8a99e3ebc5bf56820b0282ce0f5) - Improve video trimming and error handling.  Thanks [@hannahblair](https://github.com/hannahblair)!
+
 ## 0.1.8
 
 ### Patch Changes
@@ -228,4 +245,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
   - @gradio/image@0.1.0
   - @gradio/utils@0.0.2
   - @gradio/atoms@0.0.2
-  - @gradio/upload@0.0.2
+  - @gradio/upload@0.0.2

package/Example.svelte

@@ -43,10 +43,13 @@
 <style>
 	.container {
 		flex: none;
-		border: 2px solid var(--border-color-primary);
-		border-radius: var(--radius-lg);
 		max-width: none;
 	}
+	.container :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: cover;
+	}
 
 	.container:hover,
 	.container.selected {
@@ -54,6 +57,9 @@
 	}
 	.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;

package/Video.stories.svelte

@@ -3,30 +3,14 @@
 	import Video from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
+	import { userEvent, within } from "@storybook/testing-library";
 </script>
 
-<Meta
-	title="Components/Video"
-	component={Video}
-	argTypes={{
-		video: {
-			control: "text",
-			description:
-				"A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.",
-			name: "value"
-		},
-		autoplay: {
-			control: [true, false],
-			description: "Whether to autoplay the video on load",
-			name: "autoplay",
-			value: true
-		}
-	}}
-/>
+<Meta title="Components/Video" component={Video} />
 
 <div>
 	<Template let:args>
-		<Video {...args} i18n={get(format)} />
+		<Video i18n={get(format)} {...args} />
 	</Template>
 </div>
 
@@ -59,6 +43,23 @@
 		width: 400
 	}}
 />
+<Story
+	name="Static video with vertical video"
+	args={{
+		value: {
+			video: {
+				path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+				url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world_vertical.mp4",
+				orig_name: "world_vertical.mp4"
+			}
+		},
+		label: "world video",
+		show_label: true,
+		interactive: false,
+		height: 200,
+		width: 400
+	}}
+/>
 
 <Story
 	name="Upload video"
@@ -72,3 +73,26 @@
 		value: null
 	}}
 />
+
+<Story
+	name="Trim video"
+	args={{
+		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"
+			}
+		},
+		label: "world video",
+		show_label: true,
+		interactive: "true",
+		sources: ["upload"],
+		width: 400
+	}}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const trimButton = canvas.getByLabelText("Trim video to selection");
+		userEvent.click(trimButton);
+	}}
+/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -9,14 +9,14 @@
   "dependencies": {
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
-    "@gradio/atoms": "^0.3.0",
-    "@gradio/client": "^0.8.2",
-    "@gradio/icons": "^0.3.0",
-    "@gradio/statustracker": "^0.4.0",
-    "@gradio/image": "^0.4.1",
-    "@gradio/upload": "^0.5.1",
+    "@gradio/atoms": "^0.4.0",
+    "@gradio/client": "^0.9.0",
+    "@gradio/icons": "^0.3.2",
+    "@gradio/statustracker": "^0.4.2",
+    "@gradio/image": "^0.5.0",
+    "@gradio/upload": "^0.5.3",
     "@gradio/utils": "^0.2.0",
-    "@gradio/wasm": "^0.3.0"
+    "@gradio/wasm": "^0.4.0"
   },
   "devDependencies": {
     "mrmime": "^1.0.1"

package/shared/Player.svelte

@@ -99,7 +99,7 @@
 </script>
 
 <div class="wrap">
-	<div class:mirror>
+	<div class="mirror-wrap" class:mirror>
 		<Video
 			{src}
 			preload="auto"
@@ -199,6 +199,12 @@
 		transform: scaleX(-1);
 	}
 
+	.mirror-wrap {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
 	.controls {
 		position: absolute;
 		bottom: 0;
@@ -248,4 +254,8 @@
 		width: var(--size-full);
 		border-radius: var(--radius-xl);
 	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
 </style>

package/shared/Video.svelte

@@ -22,50 +22,69 @@
 	export let processingVideo = false;
 
 	const dispatch = createEventDispatcher();
+
+	let resolved_src: typeof src;
+
+	// The `src` prop can be updated before the Promise from `resolve_wasm_src` is resolved.
+	// In such a case, the resolved value for the old `src` has to be discarded,
+	// This variable `latest_src` is used to pick up only the value resolved for the latest `src` prop.
+	let latest_src: typeof src;
+	$: {
+		// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed `src` props immediately
+		// without waiting for `resolve_wasm_src()` to resolve.
+		// If it waits, a black image is displayed until the async task finishes
+		// and it leads to undesirable flickering.
+		// So set `src` to `resolved_src` here.
+		resolved_src = src;
+
+		latest_src = src;
+		const resolving_src = src;
+		resolve_wasm_src(resolving_src).then((s) => {
+			if (latest_src === resolving_src) {
+				resolved_src = s;
+			}
+		});
+	}
 </script>
 
-{#await resolve_wasm_src(src) then resolved_src}
-	<!--
-	The spread operator with `$$props` or `$$restProps` can't be used here
-	to pass props from the parent component to the <video> element
-	because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
-	For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
-	Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
+<!--
+The spread operator with `$$props` or `$$restProps` can't be used here
+to pass props from the parent component to the <video> element
+because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
+For example, if we add {...$$props} or {...$$restProps}, the boolean props aside it like `controls` will be compiled as string "true" or "false" on the actual DOM.
+Then, even when `controls` is false, the compiled DOM would be `<video controls="false">` which is equivalent to `<video controls>` since the string "false" is even truthy.
 -->
-	<div class:hidden={!processingVideo} class="overlay">
-		<span class="load-wrap">
-			<span class="loader" />
-		</span>
-	</div>
-	<video
-		src={resolved_src}
-		{muted}
-		{playsinline}
-		{preload}
-		{autoplay}
-		{controls}
-		on:loadeddata={dispatch.bind(null, "loadeddata")}
-		on:click={dispatch.bind(null, "click")}
-		on:play={dispatch.bind(null, "play")}
-		on:pause={dispatch.bind(null, "pause")}
-		on:ended={dispatch.bind(null, "ended")}
-		on:mouseover={dispatch.bind(null, "mouseover")}
-		on:mouseout={dispatch.bind(null, "mouseout")}
-		on:focus={dispatch.bind(null, "focus")}
-		on:blur={dispatch.bind(null, "blur")}
-		bind:currentTime
-		bind:duration
-		bind:paused
-		bind:this={node}
-		use:loaded={{ autoplay: autoplay ?? false }}
-		data-testid={$$props["data-testid"]}
-		crossorigin="anonymous"
-	>
-		<slot />
-	</video>
-{:catch error}
-	<p style="color: red;">{error.message}</p>
-{/await}
+<div class:hidden={!processingVideo} class="overlay">
+	<span class="load-wrap">
+		<span class="loader" />
+	</span>
+</div>
+<video
+	src={resolved_src}
+	{muted}
+	{playsinline}
+	{preload}
+	{autoplay}
+	{controls}
+	on:loadeddata={dispatch.bind(null, "loadeddata")}
+	on:click={dispatch.bind(null, "click")}
+	on:play={dispatch.bind(null, "play")}
+	on:pause={dispatch.bind(null, "pause")}
+	on:ended={dispatch.bind(null, "ended")}
+	on:mouseover={dispatch.bind(null, "mouseover")}
+	on:mouseout={dispatch.bind(null, "mouseout")}
+	on:focus={dispatch.bind(null, "focus")}
+	on:blur={dispatch.bind(null, "blur")}
+	bind:currentTime
+	bind:duration
+	bind:paused
+	bind:this={node}
+	use:loaded={{ autoplay: autoplay ?? false }}
+	data-testid={$$props["data-testid"]}
+	crossorigin="anonymous"
+>
+	<slot />
+</video>
 
 <style>
 	.overlay {
@@ -121,13 +140,4 @@
 			background: #fff;
 		}
 	}
-
-	video {
-		position: inherit;
-		background-color: black;
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-		border-radius: var(--radius-xl);
-	}
 </style>

package/shared/VideoControls.svelte

@@ -28,6 +28,11 @@
 		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}`;
 	};
 

package/shared/VideoPreview.svelte

@@ -4,6 +4,7 @@
 	import type { FileData } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
+	import { DownloadLink } from "@gradio/wasm/svelte";
 
 	import Player from "./Player.svelte";
 	import type { I18nFormatter } from "js/app/src/gradio_helper";
@@ -67,13 +68,9 @@
 	{/key}
 	<div class="icon-buttons" data-testid="download-div">
 		{#if show_download_button}
-			<a
-				href={value.url}
-				target={window.__is_colab__ ? "_blank" : null}
-				download={value.orig_name || value.path}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || value.path}>
 				<IconButton Icon={Download} label="Download" />
-			</a>
+			</DownloadLink>
 		{/if}
 		{#if show_share_button}
 			<ShareButton

package/shared/VideoTimeline.svelte

@@ -156,6 +156,7 @@
 	{:else}
 		<div id="timeline" class="thumbnail-wrapper">
 			<button
+				aria-label="start drag handle for trimming video"
 				class="handle left"
 				on:mousedown={() => startDragging("left")}
 				on:blur={stopDragging}
@@ -176,6 +177,7 @@
 				<img src={thumbnail} alt={`frame-${i}`} draggable="false" />
 			{/each}
 			<button
+				aria-label="end drag handle for trimming video"
 				class="handle right"
 				on:mousedown={() => startDragging("right")}
 				on:blur={stopDragging}

package/shared/utils.ts

@@ -66,15 +66,19 @@ export async function trimVideo(
 	endTime: number,
 	videoElement: HTMLVideoElement
 ): Promise<any> {
+	const videoUrl = videoElement.src;
+	const mimeType = lookup(videoElement.src) || "video/mp4";
+	const blobUrl = await toBlobURL(videoUrl, mimeType);
+	const response = await fetch(blobUrl);
+	const vidBlob = await response.blob();
+	const type = getVideoExtensionFromMimeType(mimeType) || "mp4";
+	const inputName = `input.${type}`;
+	const outputName = `output.${type}`;
+
 	try {
-		const videoUrl = videoElement.src;
-		const mimeType = lookup(videoElement.src) || "video/mp4";
-		const blobUrl = await toBlobURL(videoUrl, mimeType);
-		const response = await fetch(blobUrl);
-		const vidBlob = await response.blob();
-		const type = getVideoExtensionFromMimeType(mimeType) || "mp4";
-		const inputName = `input.${type}`;
-		const outputName = `output.${type}`;
+		if (startTime === 0 && endTime === 0) {
+			return vidBlob;
+		}
 
 		await ffmpeg.writeFile(
 			inputName,
@@ -84,10 +88,8 @@ export async function trimVideo(
 		let command = [
 			"-i",
 			inputName,
-			"-ss",
-			startTime.toString(),
-			"-to",
-			endTime.toString(),
+			...(startTime !== 0 ? ["-ss", startTime.toString()] : []),
+			...(endTime !== 0 ? ["-to", endTime.toString()] : []),
 			"-c:a",
 			"copy",
 			outputName
@@ -102,6 +104,7 @@ export async function trimVideo(
 		return outputBlob;
 	} catch (error) {
 		console.error("Error initializing FFmpeg:", error);
+		return vidBlob;
 	}
 }