@gradio/video 0.1.0-beta.7 → 0.1.0

package/shared/VideoTimeline.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+
+	export let videoElement: HTMLVideoElement;
+	export let trimmedDuration: number | null;
+	export let dragStart: number;
+	export let dragEnd: number;
+	export let loadingTimeline: boolean;
+
+	let thumbnails: string[] = [];
+	let numberOfThumbnails = 10;
+	let intervalId: number | NodeJS.Timer;
+	let videoDuration: number;
+
+	let leftHandlePosition = 0;
+	let rightHandlePosition = 100;
+
+	let dragging: string | null = null;
+
+	const startDragging = (side: string | null): void => {
+		dragging = side;
+	};
+
+	$: loadingTimeline = thumbnails.length !== numberOfThumbnails;
+
+	const stopDragging = (): void => {
+		dragging = null;
+	};
+
+	const drag = (event: { clientX: number }, distance?: number): void => {
+		if (dragging) {
+			const timeline = document.getElementById("timeline");
+
+			if (!timeline) return;
+
+			const rect = timeline.getBoundingClientRect();
+			let newPercentage = ((event.clientX - rect.left) / rect.width) * 100;
+
+			if (distance) {
+				// Move handle based on arrow key press
+				newPercentage =
+					dragging === "left"
+						? leftHandlePosition + distance
+						: rightHandlePosition + distance;
+			} else {
+				// Move handle based on mouse drag
+				newPercentage = ((event.clientX - rect.left) / rect.width) * 100;
+			}
+
+			newPercentage = Math.max(0, Math.min(newPercentage, 100)); // Keep within 0 and 100
+
+			if (dragging === "left") {
+				leftHandlePosition = Math.min(newPercentage, rightHandlePosition);
+
+				// Calculate the new time and set it for the videoElement
+				const newTimeLeft = (leftHandlePosition / 100) * videoDuration;
+				videoElement.currentTime = newTimeLeft;
+
+				dragStart = newTimeLeft;
+			} else if (dragging === "right") {
+				rightHandlePosition = Math.max(newPercentage, leftHandlePosition);
+
+				const newTimeRight = (rightHandlePosition / 100) * videoDuration;
+				videoElement.currentTime = newTimeRight;
+
+				dragEnd = newTimeRight;
+			}
+
+			const startTime = (leftHandlePosition / 100) * videoDuration;
+			const endTime = (rightHandlePosition / 100) * videoDuration;
+			trimmedDuration = endTime - startTime;
+
+			leftHandlePosition = leftHandlePosition;
+			rightHandlePosition = rightHandlePosition;
+		}
+	};
+
+	const moveHandle = (e: KeyboardEvent): void => {
+		if (dragging) {
+			// Calculate the movement distance as a percentage of the video duration
+			const distance = (1 / videoDuration) * 100;
+
+			if (e.key === "ArrowLeft") {
+				drag({ clientX: 0 }, -distance);
+			} else if (e.key === "ArrowRight") {
+				drag({ clientX: 0 }, distance);
+			}
+		}
+	};
+
+	const generateThumbnail = (): void => {
+		const canvas = document.createElement("canvas");
+		const ctx = canvas.getContext("2d");
+		if (!ctx) return;
+
+		canvas.width = videoElement.videoWidth;
+		canvas.height = videoElement.videoHeight;
+
+		ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+
+		const thumbnail: string = canvas.toDataURL("image/jpeg", 0.7);
+		thumbnails = [...thumbnails, thumbnail];
+	};
+
+	onMount(() => {
+		const loadMetadata = (): void => {
+			videoDuration = videoElement.duration;
+
+			const interval = videoDuration / numberOfThumbnails;
+			let captures = 0;
+
+			const onSeeked = (): void => {
+				generateThumbnail();
+				captures++;
+
+				if (captures < numberOfThumbnails) {
+					videoElement.currentTime += interval;
+				} else {
+					videoElement.removeEventListener("seeked", onSeeked);
+				}
+			};
+
+			videoElement.addEventListener("seeked", onSeeked);
+			videoElement.currentTime = 0;
+		};
+
+		if (videoElement.readyState >= 1) {
+			loadMetadata();
+		} else {
+			videoElement.addEventListener("loadedmetadata", loadMetadata);
+		}
+	});
+
+	onDestroy(() => {
+		window.removeEventListener("mousemove", drag);
+		window.removeEventListener("mouseup", stopDragging);
+		window.removeEventListener("keydown", moveHandle);
+
+		if (intervalId) {
+			clearInterval(intervalId);
+		}
+	});
+
+	onMount(() => {
+		window.addEventListener("mousemove", drag);
+		window.addEventListener("mouseup", stopDragging);
+		window.addEventListener("keydown", moveHandle);
+	});
+</script>
+
+<div class="container">
+	{#if loadingTimeline}
+		<div class="load-wrap">
+			<span aria-label="loading timeline" class="loader" />
+		</div>
+	{:else}
+		<div id="timeline" class="thumbnail-wrapper">
+			<button
+				class="handle left"
+				on:mousedown={() => startDragging("left")}
+				on:blur={stopDragging}
+				on:keydown={(e) => {
+					if (e.key === "ArrowLeft" || e.key == "ArrowRight") {
+						startDragging("left");
+					}
+				}}
+				style="left: {leftHandlePosition}%;"
+			/>
+
+			<div
+				class="opaque-layer"
+				style="left: {leftHandlePosition}%; right: {100 - rightHandlePosition}%"
+			/>
+
+			{#each thumbnails as thumbnail, i (i)}
+				<img src={thumbnail} alt={`frame-${i}`} draggable="false" />
+			{/each}
+			<button
+				class="handle right"
+				on:mousedown={() => startDragging("right")}
+				on:blur={stopDragging}
+				on:keydown={(e) => {
+					if (e.key === "ArrowLeft" || e.key == "ArrowRight") {
+						startDragging("right");
+					}
+				}}
+				style="left: {rightHandlePosition}%;"
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.load-wrap {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+	}
+	.loader {
+		display: flex;
+		position: relative;
+		background-color: var(--border-color-accent-subdued);
+		animation: shadowPulse 2s linear infinite;
+		box-shadow: -24px 0 var(--border-color-accent-subdued),
+			24px 0 var(--border-color-accent-subdued);
+		margin: var(--spacing-md);
+		border-radius: 50%;
+		width: 10px;
+		height: 10px;
+		scale: 0.5;
+	}
+
+	@keyframes shadowPulse {
+		33% {
+			box-shadow: -24px 0 var(--border-color-accent-subdued), 24px 0 #fff;
+			background: #fff;
+		}
+		66% {
+			box-shadow: -24px 0 #fff, 24px 0 #fff;
+			background: var(--border-color-accent-subdued);
+		}
+		100% {
+			box-shadow: -24px 0 #fff, 24px 0 var(--border-color-accent-subdued);
+			background: #fff;
+		}
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: var(--spacing-lg) var(--spacing-lg) 0 var(--spacing-lg);
+	}
+
+	#timeline {
+		display: flex;
+		height: var(--size-10);
+		flex: 1;
+		position: relative;
+	}
+
+	img {
+		flex: 1 1 auto;
+		min-width: 0;
+		object-fit: cover;
+		height: var(--size-12);
+		border: 1px solid var(--block-border-color);
+		user-select: none;
+		z-index: 1;
+	}
+
+	.handle {
+		width: 3px;
+		background-color: var(--color-accent);
+		cursor: ew-resize;
+		height: var(--size-12);
+		z-index: 3;
+		position: absolute;
+	}
+
+	.opaque-layer {
+		background-color: rgba(230, 103, 40, 0.25);
+		border: 1px solid var(--color-accent);
+		height: var(--size-12);
+		position: absolute;
+		z-index: 2;
+	}
+</style>

package/shared/utils.ts

@@ -1,4 +1,6 @@
-import type { ActionReturn } from "svelte/action";
+import { toBlobURL } from "@ffmpeg/util";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { lookup } from "mrmime";
 
 export const prettyBytes = (bytes: number): string => {
 	let units = ["B", "KB", "MB", "GB", "PB"];
@@ -22,7 +24,7 @@ export const playable = (): boolean => {
 export function loaded(
 	node: HTMLVideoElement,
 	{ autoplay }: { autoplay: boolean }
-): ActionReturn {
+): any {
 	async function handle_playback(): Promise<void> {
 		if (!autoplay) return;
 		await node.play();
@@ -36,3 +38,106 @@ 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";
+
+	await ffmpeg.load({
+		coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
+		wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm")
+	});
+
+	return ffmpeg;
+}
+
+export function blob_to_data_url(blob: Blob): Promise<string> {
+	return new Promise((fulfill, reject) => {
+		let reader = new FileReader();
+		reader.onerror = reject;
+		reader.onload = () => fulfill(reader.result as string);
+		reader.readAsDataURL(blob);
+	});
+}
+
+export async function trimVideo(
+	ffmpeg: FFmpeg,
+	startTime: number,
+	endTime: number,
+	videoElement: HTMLVideoElement
+): Promise<any> {
+	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}`;
+
+		await ffmpeg.writeFile(
+			inputName,
+			new Uint8Array(await vidBlob.arrayBuffer())
+		);
+
+		let command = [
+			"-i",
+			inputName,
+			"-ss",
+			startTime.toString(),
+			"-to",
+			endTime.toString(),
+			"-c:a",
+			"copy",
+			outputName
+		];
+
+		await ffmpeg.exec(command);
+		const outputData = await ffmpeg.readFile(outputName);
+		const outputBlob = new Blob([outputData], {
+			type: `video/${type}`
+		});
+
+		return outputBlob;
+	} catch (error) {
+		console.error("Error initializing FFmpeg:", error);
+	}
+}
+
+const getVideoExtensionFromMimeType = (mimeType: string): string | null => {
+	const videoMimeToExtensionMap: { [key: string]: string } = {
+		"video/mp4": "mp4",
+		"video/webm": "webm",
+		"video/ogg": "ogv",
+		"video/quicktime": "mov",
+		"video/x-msvideo": "avi",
+		"video/x-matroska": "mkv",
+		"video/mpeg": "mpeg",
+		"video/3gpp": "3gp",
+		"video/3gpp2": "3g2",
+		"video/h261": "h261",
+		"video/h263": "h263",
+		"video/h264": "h264",
+		"video/jpeg": "jpgv",
+		"video/jpm": "jpm",
+		"video/mj2": "mj2",
+		"video/mpv": "mpv",
+		"video/vnd.ms-playready.media.pyv": "pyv",
+		"video/vnd.uvvu.mp4": "uvu",
+		"video/vnd.vivo": "viv",
+		"video/x-f4v": "f4v",
+		"video/x-fli": "fli",
+		"video/x-flv": "flv",
+		"video/x-m4v": "m4v",
+		"video/x-ms-asf": "asf",
+		"video/x-ms-wm": "wm",
+		"video/x-ms-wmv": "wmv",
+		"video/x-ms-wmx": "wmx",
+		"video/x-ms-wvx": "wvx",
+		"video/x-sgi-movie": "movie",
+		"video/x-smv": "smv"
+	};
+
+	return videoMimeToExtensionMap[mimeType] || null;
+};

package/shared/StaticVideo.svelte

@@ -1,70 +0,0 @@
-<script lang="ts">
-	import type { HTMLVideoAttributes } from "svelte/elements";
-	import { createEventDispatcher } from "svelte";
-	import { loaded } from "./utils";
-
-	import { resolve_wasm_src } from "@gradio/wasm/svelte";
-
-	export let src: HTMLVideoAttributes["src"] = undefined;
-
-	export let muted: HTMLVideoAttributes["muted"] = undefined;
-	export let playsinline: HTMLVideoAttributes["playsinline"] = undefined;
-	export let preload: HTMLVideoAttributes["preload"] = undefined;
-	export let autoplay: HTMLVideoAttributes["autoplay"] = undefined;
-	export let controls: HTMLVideoAttributes["controls"] = undefined;
-
-	export let currentTime: number | undefined = undefined;
-	export let duration: number | undefined = undefined;
-	export let paused: boolean | undefined = undefined;
-
-	export let node: HTMLVideoElement | undefined = undefined;
-
-	const dispatch = createEventDispatcher();
-</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.
--->
-	<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"]}
-	>
-		<slot />
-	</video>
-{:catch error}
-	<p style="color: red;">{error.message}</p>
-{/await}
-
-<style>
-	video {
-		position: inherit;
-		background-color: black;
-		width: var(--size-full);
-		height: var(--size-full);
-		object-fit: contain;
-	}
-</style>