@gradio/video 0.1.9 → 0.2.1

package/CHANGELOG.md

@@ -1,10 +1,30 @@
 # @gradio/video
 
+## 0.2.1
+
+### Patch Changes
+
+- Updated dependencies [[`5d51fbc`](https://github.com/gradio-app/gradio/commit/5d51fbce7826da840a2fd4940feb5d9ad6f1bc5a), [`34f9431`](https://github.com/gradio-app/gradio/commit/34f943101bf7dd6b8a8974a6131c1ed7c4a0dac0)]:
+  - @gradio/upload@0.5.4
+  - @gradio/client@0.9.1
+  - @gradio/image@0.5.1
+
+## 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)!
+- [#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
 
@@ -234,4 +254,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

@@ -4,7 +4,6 @@
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
 	import { userEvent, within } from "@storybook/testing-library";
-	import { waitFor } from "@testing-library/dom";
 </script>
 
 <Meta title="Components/Video" component={Video} />
@@ -44,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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "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.1",
-    "@gradio/client": "^0.8.2",
-    "@gradio/icons": "^0.3.1",
-    "@gradio/image": "^0.4.2",
-    "@gradio/statustracker": "^0.4.1",
-    "@gradio/wasm": "^0.3.0",
+    "@gradio/atoms": "^0.4.0",
+    "@gradio/client": "^0.9.1",
+    "@gradio/image": "^0.5.1",
+    "@gradio/upload": "^0.5.4",
+    "@gradio/icons": "^0.3.2",
+    "@gradio/wasm": "^0.4.0",
     "@gradio/utils": "^0.2.0",
-    "@gradio/upload": "^0.5.2"
+    "@gradio/statustracker": "^0.4.2"
   },
   "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/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