@gradio/video 0.17.0-dev.0 → 0.17.0-dev.2

package/dist/shared/VideoControls.svelte

@@ -1,43 +1,52 @@
-<script>import { Undo, Trim, Clear } from "@gradio/icons";
-import VideoTimeline from "./VideoTimeline.svelte";
-import { trimVideo } from "./utils";
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import loadFfmpeg from "./utils";
-import { onMount } from "svelte";
-import { format_time } from "@gradio/utils";
-import { IconButton } from "@gradio/atoms";
-import { ModifyUpload } from "@gradio/upload";
-export let videoElement;
-export let showRedo = false;
-export let interactive = true;
-export let mode = "";
-export let handle_reset_value;
-export let handle_trim_video;
-export let processingVideo = false;
-export let i18n;
-export let value = null;
-export let show_download_button = false;
-export let handle_clear = () => {
-};
-export let has_change_history = false;
-let ffmpeg;
-onMount(async () => {
-  ffmpeg = await loadFfmpeg();
-});
-$: if (mode === "edit" && trimmedDuration === null && videoElement)
-  trimmedDuration = videoElement.duration;
-let trimmedDuration = null;
-let dragStart = 0;
-let dragEnd = 0;
-let loadingTimeline = false;
-const toggleTrimmingMode = () => {
-  if (mode === "edit") {
-    mode = "";
-    trimmedDuration = videoElement.duration;
-  } else {
-    mode = "edit";
-  }
-};
+<script lang="ts">
+	import { Undo, Trim, Clear } from "@gradio/icons";
+	import VideoTimeline from "./VideoTimeline.svelte";
+	import { trimVideo } from "./utils";
+	import { FFmpeg } from "@ffmpeg/ffmpeg";
+	import loadFfmpeg from "./utils";
+	import { onMount } from "svelte";
+	import { format_time } from "@gradio/utils";
+	import { IconButton } from "@gradio/atoms";
+	import { ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
+
+	export let videoElement: HTMLVideoElement;
+
+	export let showRedo = false;
+	export let interactive = true;
+	export let mode = "";
+	export let handle_reset_value: () => void;
+	export let handle_trim_video: (videoBlob: Blob) => void;
+	export let processingVideo = false;
+	export let i18n: (key: string) => string;
+	export let value: FileData | null = null;
+	export let show_download_button = false;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
+
+	let ffmpeg: FFmpeg;
+
+	onMount(async () => {
+		ffmpeg = await loadFfmpeg();
+	});
+
+	$: if (mode === "edit" && trimmedDuration === null && videoElement)
+		trimmedDuration = videoElement.duration;
+
+	let trimmedDuration: number | null = null;
+	let dragStart = 0;
+	let dragEnd = 0;
+
+	let loadingTimeline = false;
+
+	const toggleTrimmingMode = (): void => {
+		if (mode === "edit") {
+			mode = "";
+			trimmedDuration = videoElement.duration;
+		} else {
+			mode = "edit";
+		}
+	};
 </script>
 
 <div class="container" class:hidden={mode !== "edit"}>

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

@@ -1,30 +1,32 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        videoElement: HTMLVideoElement;
-        showRedo?: boolean;
-        interactive?: boolean;
-        mode?: string;
-        handle_reset_value: () => void;
-        handle_trim_video: (videoBlob: Blob) => void;
-        processingVideo?: boolean;
-        i18n: (key: string) => string;
-        value?: FileData | null;
-        show_download_button?: boolean;
-        handle_clear?: () => void;
-        has_change_history?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type VideoControlsProps = typeof __propDef.props;
-export type VideoControlsEvents = typeof __propDef.events;
-export type VideoControlsSlots = typeof __propDef.slots;
-export default class VideoControls extends SvelteComponent<VideoControlsProps, VideoControlsEvents, VideoControlsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const VideoControls: $$__sveltets_2_IsomorphicComponent<{
+    videoElement: HTMLVideoElement;
+    showRedo?: boolean;
+    interactive?: boolean;
+    mode?: string;
+    handle_reset_value: () => void;
+    handle_trim_video: (videoBlob: Blob) => void;
+    processingVideo?: boolean;
+    i18n: (key: string) => string;
+    value?: FileData | null;
+    show_download_button?: boolean;
+    handle_clear?: () => void;
+    has_change_history?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VideoControls = InstanceType<typeof VideoControls>;
+export default VideoControls;

package/dist/shared/VideoPreview.svelte

@@ -1,40 +1,61 @@
-<script>import { createEventDispatcher, afterUpdate, tick } from "svelte";
-import {
-  BlockLabel,
-  Empty,
-  IconButton,
-  ShareButton,
-  IconButtonWrapper,
-  DownloadLink
-} from "@gradio/atoms";
-import { Video, Download } from "@gradio/icons";
-import { uploadToHuggingFace } from "@gradio/utils";
-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;
-export let display_icon_button_wrapper_top_corner = false;
-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 lang="ts">
+	import { createEventDispatcher, afterUpdate, tick } from "svelte";
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		ShareButton,
+		IconButtonWrapper,
+		DownloadLink
+	} from "@gradio/atoms";
+	import type { FileData, Client } from "@gradio/client";
+	import { Video, Download } from "@gradio/icons";
+	import { uploadToHuggingFace } from "@gradio/utils";
+
+	import Player from "./Player.svelte";
+	import type { I18nFormatter } from "js/core/src/gradio_helper";
+
+	export let value: FileData | null = null;
+	export let subtitle: FileData | null = null;
+	export let label: string | undefined = undefined;
+	export let show_label = true;
+	export let autoplay: boolean;
+	export let show_share_button = true;
+	export let show_download_button = true;
+	export let loop: boolean;
+	export let i18n: I18nFormatter;
+	export let upload: Client["upload"];
+	export let display_icon_button_wrapper_top_corner = false;
+
+	let old_value: FileData | null = null;
+	let old_subtitle: FileData | null = null;
+
+	const dispatch = createEventDispatcher<{
+		change: FileData;
+		play: undefined;
+		pause: undefined;
+		end: undefined;
+		stop: undefined;
+		load: undefined;
+	}>();
+
+	$: value && dispatch("change", value);
+
+	afterUpdate(async () => {
+		// needed to bust subtitle caching issues on Chrome
+		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"} />

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

@@ -1,39 +1,41 @@
-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;
-        subtitle?: FileData | null;
-        label?: string | undefined;
-        show_label?: boolean;
-        autoplay: boolean;
-        show_share_button?: boolean;
-        show_download_button?: boolean;
-        loop: boolean;
-        i18n: I18nFormatter;
-        upload: Client["upload"];
-        display_icon_button_wrapper_top_corner?: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        play: CustomEvent<any>;
-        pause: CustomEvent<any>;
-        stop: CustomEvent<any>;
-        end: CustomEvent<any>;
-        error: CustomEvent<string>;
-        share: CustomEvent<import("@gradio/utils").ShareData>;
-        change: CustomEvent<FileData>;
-        load: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const VideoPreview: $$__sveltets_2_IsomorphicComponent<{
+    value?: FileData | null;
+    subtitle?: FileData | null;
+    label?: string | undefined;
+    show_label?: boolean;
+    autoplay: boolean;
+    show_share_button?: boolean;
+    show_download_button?: boolean;
+    loop: boolean;
+    i18n: I18nFormatter;
+    upload: Client["upload"];
+    display_icon_button_wrapper_top_corner?: boolean;
+}, {
+    play: CustomEvent<any>;
+    pause: CustomEvent<any>;
+    stop: CustomEvent<any>;
+    end: CustomEvent<any>;
+    error: CustomEvent<string>;
+    share: CustomEvent<import("@gradio/utils").ShareData>;
+    change: CustomEvent<FileData>;
+    load: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VideoPreview = InstanceType<typeof VideoPreview>;
+export default VideoPreview;

package/dist/shared/VideoTimeline.svelte

@@ -1,109 +1,151 @@
-<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 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: ReturnType<typeof setInterval> | undefined;
+	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 !== undefined) {
+			clearInterval(intervalId);
+		}
+	});
+
+	onMount(() => {
+		window.addEventListener("mousemove", drag);
+		window.addEventListener("mouseup", stopDragging);
+		window.addEventListener("keydown", moveHandle);
+	});
 </script>
 
 <div class="container">

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

@@ -1,22 +1,24 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        videoElement: HTMLVideoElement;
-        trimmedDuration: number | null;
-        dragStart: number;
-        dragEnd: number;
-        loadingTimeline: boolean;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-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> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const VideoTimeline: $$__sveltets_2_IsomorphicComponent<{
+    videoElement: HTMLVideoElement;
+    trimmedDuration: number | null;
+    dragStart: number;
+    dragEnd: number;
+    loadingTimeline: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type VideoTimeline = InstanceType<typeof VideoTimeline>;
+export default VideoTimeline;