@gradio/video 0.20.8 → 0.21.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @gradio/video
 
+## 0.21.0
+
+### Features
+
+- [#13526](https://github.com/gradio-app/gradio/pull/13526) [`53cb4ca`](https://github.com/gradio-app/gradio/commit/53cb4cae1ec3521e9170d12867253516413ba37a) - Run `pnpm lint` and `pnpm ts:check` on CI.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/atoms@0.25.0
+- @gradio/statustracker@0.15.0
+- @gradio/utils@0.13.0
+- @gradio/client@2.3.0
+- @gradio/upload@0.18.0
+- @gradio/image@0.27.0
+
+## 0.20.9
+
+### Dependency updates
+
+- @gradio/client@2.2.2
+
+## 0.20.9
+
+### Fixes
+
+- [#13463](https://github.com/gradio-app/gradio/pull/13463) [`58088ad`](https://github.com/gradio-app/gradio/commit/58088ad1d75eee0f93ba1c02f427ee04f60847b4) - Self-host frontend assets so that Gradio works offline!.  Thanks @abidlabs!
+
+## 0.20.8
+
+### Dependency updates
+
+- @gradio/client@2.2.1
+- @gradio/upload@0.17.10
+
 ## 0.20.8
 
 ### Dependency updates

package/Video.stories.svelte

@@ -56,24 +56,6 @@
 	}}
 	{template}
 />
-<Story
-	name="Static video with vertical video"
-	args={{
-		value: {
-			path: video_sample,
-			url: video_sample,
-			orig_name: "video_sample.mp4"
-		},
-		label: "world video",
-		show_label: true,
-		buttons: [],
-		interactive: false,
-		height: 200,
-		width: 400,
-		webcam_options: { mirror: true, constraints: null }
-	}}
-	{template}
-/>
 <Story
 	name="Upload video"
 	args={{
@@ -88,25 +70,6 @@
 	}}
 	{template}
 />
-<Story
-	name="Upload video with download button"
-	args={{
-		label: "world video",
-		show_label: true,
-		interactive: true,
-		sources: ["upload", "webcam"],
-		buttons: ["download"],
-		width: 400,
-		height: 400,
-		value: {
-			path: video_sample,
-			url: video_sample,
-			orig_name: "video_sample.mp4"
-		},
-		webcam_options: { mirror: true, constraints: null }
-	}}
-	{template}
-/>
 <Story
 	name="Trim video"
 	args={{

package/Video.test.ts

@@ -37,7 +37,7 @@ vi.mock("@ffmpeg/util", () => ({
 }));
 
 import Video from "./Index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 
 const loading_status: LoadingStatus = {
 	eta: 0,

package/dist/shared/Player.svelte

@@ -51,7 +51,7 @@
 		handle_change = () => {},
 		handle_reset_value = () => {},
 		upload,
-		is_stream = undefined,
+		is_stream = false,
 		i18n,
 		show_download_button = false,
 		value = null,
@@ -189,7 +189,11 @@
 	});
 
 	$effect(() => {
-		if (playback_position !== time && video) {
+		if (
+			playback_position !== undefined &&
+			playback_position !== time &&
+			video
+		) {
 			video.currentTime = playback_position;
 		}
 	});

package/dist/shared/Video.svelte

@@ -33,6 +33,7 @@
 		onloadedmetadata?: () => void;
 		"data-testid"?: string;
 		children?: Snippet;
+		[key: string]: any;
 	}
 
 	let {

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

@@ -28,6 +28,7 @@ interface Props {
     onloadedmetadata?: () => void;
     "data-testid"?: string;
     children?: Snippet;
+    [key: string]: any;
 }
 declare const Video: import("svelte").Component<Props, {}, "currentTime" | "duration" | "paused" | "node">;
 type Video = ReturnType<typeof Video>;

package/dist/shared/VolumeControl.svelte

@@ -7,7 +7,7 @@
 	}
 
 	let {
-		current_volume = $bindable(1),
+		current_volume = $bindable(),
 		show_volume_slider = $bindable(false)
 	}: Props = $props();
 
@@ -22,8 +22,8 @@
 		if (!slider) return;
 
 		slider.style.background = `linear-gradient(to right, white ${
-			current_volume * 100
-		}%, rgba(255, 255, 255, 0.3) ${current_volume * 100}%)`;
+			(current_volume ?? 1) * 100
+		}%, rgba(255, 255, 255, 0.3) ${(current_volume ?? 1) * 100}%)`;
 	};
 
 	$effect(() => {
@@ -40,7 +40,7 @@
 	min="0"
 	max="1"
 	step="0.01"
-	value={current_volume}
+	value={current_volume ?? 1}
 	onfocusout={() => (show_volume_slider = false)}
 	oninput={(e) => {
 		if (e.target instanceof HTMLInputElement) {

package/dist/shared/utils.js

@@ -33,7 +33,8 @@ export function loaded(node, { autoplay }) {
 }
 export default async function loadFfmpeg() {
     const ffmpeg = new FFmpeg();
-    const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.4/dist/esm";
+    const root = (typeof window !== "undefined" && window.gradio_config?.root) || "";
+    const baseURL = `${root}/static/ffmpeg`;
     await ffmpeg.load({
         coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
         wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
@@ -73,7 +74,8 @@ export async function trimVideo(ffmpeg, startTime, endTime, videoElement) {
         ];
         await ffmpeg.exec(command);
         const outputData = await ffmpeg.readFile(outputName);
-        const outputBlob = new Blob([outputData], {
+        const outputBytes = typeof outputData === "string" ? outputData : new Uint8Array(outputData);
+        const outputBlob = new Blob([outputBytes], {
             type: `video/${type}`
         });
         return outputBlob;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import type { FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { CustomButton } from "@gradio/utils";
 import type { WebcamOptions } from "./shared/utils";
 export interface VideoProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.20.8",
+  "version": "0.21.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -11,13 +11,13 @@
     "@ffmpeg/util": "^0.12.2",
     "hls.js": "^1.6.13",
     "mrmime": "^2.0.1",
-    "@gradio/client": "^2.2.0",
-    "@gradio/atoms": "^0.24.0",
+    "@gradio/atoms": "^0.25.0",
+    "@gradio/client": "^2.3.0",
     "@gradio/icons": "^0.15.1",
-    "@gradio/image": "^0.26.3",
-    "@gradio/upload": "^0.17.9",
-    "@gradio/statustracker": "^0.14.1",
-    "@gradio/utils": "^0.12.2"
+    "@gradio/image": "^0.27.0",
+    "@gradio/statustracker": "^0.15.0",
+    "@gradio/upload": "^0.18.0",
+    "@gradio/utils": "^0.13.0"
   },
   "devDependencies": {
     "@gradio/preview": "^0.16.2"

package/shared/Player.svelte

@@ -51,7 +51,7 @@
 		handle_change = () => {},
 		handle_reset_value = () => {},
 		upload,
-		is_stream = undefined,
+		is_stream = false,
 		i18n,
 		show_download_button = false,
 		value = null,
@@ -189,7 +189,11 @@
 	});
 
 	$effect(() => {
-		if (playback_position !== time && video) {
+		if (
+			playback_position !== undefined &&
+			playback_position !== time &&
+			video
+		) {
 			video.currentTime = playback_position;
 		}
 	});

package/shared/Video.svelte

@@ -33,6 +33,7 @@
 		onloadedmetadata?: () => void;
 		"data-testid"?: string;
 		children?: Snippet;
+		[key: string]: any;
 	}
 
 	let {

package/shared/VolumeControl.svelte

@@ -7,7 +7,7 @@
 	}
 
 	let {
-		current_volume = $bindable(1),
+		current_volume = $bindable(),
 		show_volume_slider = $bindable(false)
 	}: Props = $props();
 
@@ -22,8 +22,8 @@
 		if (!slider) return;
 
 		slider.style.background = `linear-gradient(to right, white ${
-			current_volume * 100
-		}%, rgba(255, 255, 255, 0.3) ${current_volume * 100}%)`;
+			(current_volume ?? 1) * 100
+		}%, rgba(255, 255, 255, 0.3) ${(current_volume ?? 1) * 100}%)`;
 	};
 
 	$effect(() => {
@@ -40,7 +40,7 @@
 	min="0"
 	max="1"
 	step="0.01"
-	value={current_volume}
+	value={current_volume ?? 1}
 	onfocusout={() => (show_volume_slider = false)}
 	oninput={(e) => {
 		if (e.target instanceof HTMLInputElement) {

package/shared/utils.ts

@@ -41,7 +41,9 @@ export function loaded(
 
 export default async function loadFfmpeg(): Promise<FFmpeg> {
 	const ffmpeg = new FFmpeg();
-	const baseURL = "https://unpkg.com/@ffmpeg/core@0.12.4/dist/esm";
+	const root =
+		(typeof window !== "undefined" && window.gradio_config?.root) || "";
+	const baseURL = `${root}/static/ffmpeg`;
 
 	await ffmpeg.load({
 		coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
@@ -97,7 +99,9 @@ export async function trimVideo(
 
 		await ffmpeg.exec(command);
 		const outputData = await ffmpeg.readFile(outputName);
-		const outputBlob = new Blob([outputData], {
+		const outputBytes =
+			typeof outputData === "string" ? outputData : new Uint8Array(outputData);
+		const outputBlob = new Blob([outputBytes], {
 			type: `video/${type}`
 		});
 

package/types.ts

@@ -1,5 +1,5 @@
 import type { FileData } from "@gradio/client";
-import type { LoadingStatus } from "@gradio/statustracker";
+import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { CustomButton } from "@gradio/utils";
 import type { WebcamOptions } from "./shared/utils";