@gradio/video 0.10.3 → 0.10.4

package/dist/shared/VideoPreview.svelte

@@ -0,0 +1,85 @@
+<script>import { createEventDispatcher, afterUpdate, tick } from "svelte";
+import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
+import { Video, Download } from "@gradio/icons";
+import { uploadToHuggingFace } from "@gradio/utils";
+import { DownloadLink } from "@gradio/wasm/svelte";
+import Player from "./Player.svelte";
+export let value = null;
+export let subtitle = null;
+export let label = void 0;
+export let show_label = true;
+export let autoplay;
+export let show_share_button = true;
+export let show_download_button = true;
+export let loop;
+export let i18n;
+export let upload;
+let old_value = null;
+let old_subtitle = null;
+const dispatch = createEventDispatcher();
+$:
+  value && dispatch("change", value);
+afterUpdate(async () => {
+  if (value !== old_value && subtitle !== old_subtitle && old_subtitle !== null) {
+    old_value = value;
+    value = null;
+    await tick();
+    value = old_value;
+  }
+  old_value = value;
+  old_subtitle = subtitle;
+});
+</script>
+
+<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
+{#if value === null || value.url === undefined}
+	<Empty unpadded_box={true} size="large"><Video /></Empty>
+{:else}
+	{#key value.url}
+		<Player
+			src={value.url}
+			subtitle={subtitle?.url}
+			{autoplay}
+			on:play
+			on:pause
+			on:stop
+			on:end
+			on:load
+			mirror={false}
+			{label}
+			{loop}
+			interactive={false}
+			{upload}
+		/>
+	{/key}
+	<div class="icon-buttons" data-testid="download-div">
+		{#if show_download_button}
+			<DownloadLink href={value.url} download={value.orig_name || value.path}>
+				<IconButton Icon={Download} label="Download" />
+			</DownloadLink>
+		{/if}
+		{#if show_share_button}
+			<ShareButton
+				{i18n}
+				on:error
+				on:share
+				{value}
+				formatter={async (value) => {
+					if (!value) return "";
+					let url = await uploadToHuggingFace(value.data, "url");
+					return url;
+				}}
+			/>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		gap: var(--size-1);
+	}
+</style>

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

@@ -0,0 +1,36 @@
+import { SvelteComponent } from "svelte";
+import type { FileData, Client } from "@gradio/client";
+import type { I18nFormatter } from "js/core/src/gradio_helper";
+declare const __propDef: {
+    props: {
+        value?: (FileData | null) | undefined;
+        subtitle?: (FileData | null) | undefined;
+        label?: string | undefined;
+        show_label?: boolean | undefined;
+        autoplay: boolean;
+        show_share_button?: boolean | undefined;
+        show_download_button?: boolean | undefined;
+        loop: boolean;
+        i18n: I18nFormatter;
+        upload: Client["upload"];
+    };
+    events: {
+        play: CustomEvent<any>;
+        pause: CustomEvent<any>;
+        stop: CustomEvent<any>;
+        end: CustomEvent<any>;
+        load: Event;
+        error: CustomEvent<string>;
+        share: CustomEvent<import("@gradio/utils").ShareData>;
+        change: CustomEvent<FileData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VideoPreviewProps = typeof __propDef.props;
+export type VideoPreviewEvents = typeof __propDef.events;
+export type VideoPreviewSlots = typeof __propDef.slots;
+export default class VideoPreview extends SvelteComponent<VideoPreviewProps, VideoPreviewEvents, VideoPreviewSlots> {
+}
+export {};

package/dist/shared/VideoTimeline.svelte

@@ -0,0 +1,240 @@
+<script>import { onMount, onDestroy } from "svelte";
+export let videoElement;
+export let trimmedDuration;
+export let dragStart;
+export let dragEnd;
+export let loadingTimeline;
+let thumbnails = [];
+let numberOfThumbnails = 10;
+let intervalId;
+let videoDuration;
+let leftHandlePosition = 0;
+let rightHandlePosition = 100;
+let dragging = null;
+const startDragging = (side) => {
+  dragging = side;
+};
+$:
+  loadingTimeline = thumbnails.length !== numberOfThumbnails;
+const stopDragging = () => {
+  dragging = null;
+};
+const drag = (event, distance) => {
+  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) {
+      newPercentage = dragging === "left" ? leftHandlePosition + distance : rightHandlePosition + distance;
+    } else {
+      newPercentage = (event.clientX - rect.left) / rect.width * 100;
+    }
+    newPercentage = Math.max(0, Math.min(newPercentage, 100));
+    if (dragging === "left") {
+      leftHandlePosition = Math.min(newPercentage, rightHandlePosition);
+      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) => {
+  if (dragging) {
+    const distance = 1 / videoDuration * 100;
+    if (e.key === "ArrowLeft") {
+      drag({ clientX: 0 }, -distance);
+    } else if (e.key === "ArrowRight") {
+      drag({ clientX: 0 }, distance);
+    }
+  }
+};
+const generateThumbnail = () => {
+  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 = canvas.toDataURL("image/jpeg", 0.7);
+  thumbnails = [...thumbnails, thumbnail];
+};
+onMount(() => {
+  const loadMetadata = () => {
+    videoDuration = videoElement.duration;
+    const interval = videoDuration / numberOfThumbnails;
+    let captures = 0;
+    const onSeeked = () => {
+      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 !== void 0) {
+    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
+				aria-label="start drag handle for trimming video"
+				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
+				aria-label="end drag handle for trimming video"
+				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/dist/shared/VideoTimeline.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        videoElement: HTMLVideoElement;
+        trimmedDuration: number | null;
+        dragStart: number;
+        dragEnd: number;
+        loadingTimeline: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type VideoTimelineProps = typeof __propDef.props;
+export type VideoTimelineEvents = typeof __propDef.events;
+export type VideoTimelineSlots = typeof __propDef.slots;
+export default class VideoTimeline extends SvelteComponent<VideoTimelineProps, VideoTimelineEvents, VideoTimelineSlots> {
+}
+export {};

package/dist/shared/index.d.ts

@@ -0,0 +1 @@
+export { default as Video } from "./Video.svelte";

package/dist/shared/index.js

@@ -0,0 +1 @@
+export { default as Video } from "./Video.svelte";

package/dist/shared/utils.d.ts

@@ -0,0 +1,9 @@
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+export declare const prettyBytes: (bytes: number) => string;
+export declare const playable: () => boolean;
+export declare function loaded(node: HTMLVideoElement, { autoplay }: {
+    autoplay: boolean;
+}): any;
+export default function loadFfmpeg(): Promise<FFmpeg>;
+export declare function blob_to_data_url(blob: Blob): Promise<string>;
+export declare function trimVideo(ffmpeg: FFmpeg, startTime: number, endTime: number, videoElement: HTMLVideoElement): Promise<any>;

package/dist/shared/utils.js

@@ -0,0 +1,120 @@
+import { toBlobURL } from "@ffmpeg/util";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
+import { lookup } from "mrmime";
+export const prettyBytes = (bytes) => {
+    let units = ["B", "KB", "MB", "GB", "PB"];
+    let i = 0;
+    while (bytes > 1024) {
+        bytes /= 1024;
+        i++;
+    }
+    let unit = units[i];
+    return bytes.toFixed(1) + " " + unit;
+};
+export const playable = () => {
+    // TODO: Fix this
+    // let video_element = document.createElement("video");
+    // let mime_type = mime.lookup(filename);
+    // return video_element.canPlayType(mime_type) != "";
+    return true; // FIX BEFORE COMMIT - mime import causing issues
+};
+export function loaded(node, { autoplay }) {
+    async function handle_playback() {
+        if (!autoplay)
+            return;
+        await node.play();
+    }
+    node.addEventListener("loadeddata", handle_playback);
+    return {
+        destroy() {
+            node.removeEventListener("loadeddata", handle_playback);
+        }
+    };
+}
+export default async function loadFfmpeg() {
+    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) {
+    return new Promise((fulfill, reject) => {
+        let reader = new FileReader();
+        reader.onerror = reject;
+        reader.onload = () => fulfill(reader.result);
+        reader.readAsDataURL(blob);
+    });
+}
+export async function trimVideo(ffmpeg, startTime, endTime, videoElement) {
+    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 {
+        if (startTime === 0 && endTime === 0) {
+            return vidBlob;
+        }
+        await ffmpeg.writeFile(inputName, new Uint8Array(await vidBlob.arrayBuffer()));
+        let command = [
+            "-i",
+            inputName,
+            ...(startTime !== 0 ? ["-ss", startTime.toString()] : []),
+            ...(endTime !== 0 ? ["-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);
+        return vidBlob;
+    }
+}
+const getVideoExtensionFromMimeType = (mimeType) => {
+    const videoMimeToExtensionMap = {
+        "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/video",
-  "version": "0.10.3",
+  "version": "0.10.4",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,24 +10,43 @@
     "@ffmpeg/ffmpeg": "^0.12.7",
     "@ffmpeg/util": "^0.12.1",
     "mrmime": "^2.0.0",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/client": "^1.5.1",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/image": "^0.15.0",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/wasm": "^0.13.0",
-    "@gradio/upload": "^0.12.3"
+    "@gradio/atoms": "^0.8.1",
+    "@gradio/icons": "^0.7.2",
+    "@gradio/image": "^0.15.1",
+    "@gradio/client": "^1.5.2",
+    "@gradio/statustracker": "^0.7.6",
+    "@gradio/utils": "^0.6.1",
+    "@gradio/upload": "^0.12.4",
+    "@gradio/wasm": "^0.13.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1"
   },
   "exports": {
-    ".": "./index.ts",
-    "./example": "./Example.svelte",
-    "./shared": "./shared/index.ts",
-    "./base": "./shared/VideoPreview.svelte",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./index.ts",
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./shared": {
+      "gradio": "./shared/index.ts",
+      "svelte": "./dist/shared/index.js",
+      "types": "./dist/shared/index.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/VideoPreview.svelte",
+      "svelte": "./dist/shared/VideoPreview.svelte",
+      "types": "./dist/shared/VideoPreview.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "main": "index.ts",
   "main_changeset": true,