From ea2489710fcc330bad5bb559300712f51c023782 Mon Sep 17 00:00:00 2001
From: Hannah <hannahblair@users.noreply.github.com>
Date: Mon, 4 Dec 2023 21:38:55 +0000
Subject: [PATCH] Improve video trimming and error handling (#6566)

* amend trimming logic and return original file when error occurs

* add interactive story test

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/purple-deer-double.md     |  6 +++
 js/video/Video.stories.svelte        | 62 +++++++++++++++++++---------
 js/video/shared/VideoControls.svelte |  5 +++
 js/video/shared/VideoTimeline.svelte |  2 +
 js/video/shared/utils.ts             | 27 ++++++------
 5 files changed, 71 insertions(+), 31 deletions(-)
 create mode 100644 .changeset/purple-deer-double.md

diff --git a/.changeset/purple-deer-double.md b/.changeset/purple-deer-double.md
new file mode 100644
index 000000000000..17f8cb28d3a9
--- /dev/null
+++ b/.changeset/purple-deer-double.md
@@ -0,0 +1,6 @@
+---
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:Improve video trimming and error handling
diff --git a/js/video/Video.stories.svelte b/js/video/Video.stories.svelte
index eae239d3f9ac..e0c2355718cc 100644
--- a/js/video/Video.stories.svelte
+++ b/js/video/Video.stories.svelte
@@ -3,30 +3,15 @@
 	import Video from "./Index.svelte";
 	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}
-	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>
 
@@ -72,3 +57,42 @@
 		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);
+
+		await new Promise((r) => setTimeout(r, 4000));
+
+		const rightHandle = canvas.getByLabelText(
+			"end drag handle for trimming video"
+		);
+
+		userEvent.click(rightHandle);
+
+		for (let i = 0; i < 4; i++) {
+			await userEvent.keyboard("[ArrowRight]");
+		}
+
+		userEvent.click(canvas.getByText("Trim"));
+	}}
+/>
diff --git a/js/video/shared/VideoControls.svelte b/js/video/shared/VideoControls.svelte
index 95379bc95284..7c215704c8ee 100644
--- a/js/video/shared/VideoControls.svelte
+++ b/js/video/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}`;
 	};
 
diff --git a/js/video/shared/VideoTimeline.svelte b/js/video/shared/VideoTimeline.svelte
index 35dff6d2d965..9993677d65d1 100644
--- a/js/video/shared/VideoTimeline.svelte
+++ b/js/video/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}
diff --git a/js/video/shared/utils.ts b/js/video/shared/utils.ts
index 09317ba25cf5..89a85de68f9e 100644
--- a/js/video/shared/utils.ts
+++ b/js/video/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;
 	}
 }