@gradio/video 0.16.0 → 0.17.0-dev.2

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

@@ -1,52 +1,62 @@
-import { SvelteComponent } from "svelte";
 import type { FileData, Client } from "@gradio/client";
 import type { WebcamOptions } from "./utils";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        value?: FileData | null;
-        subtitle?: FileData | null;
-        sources?: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
-        label?: string | undefined;
-        show_download_button?: boolean;
-        show_label?: boolean;
-        webcam_options: WebcamOptions;
-        include_audio: boolean;
-        autoplay: boolean;
-        root: string;
-        i18n: I18nFormatter;
-        active_source?: "webcam" | "upload";
-        handle_reset_value?: () => void;
-        max_file_size?: number | null;
-        upload: Client["upload"];
-        stream_handler: Client["stream"];
-        loop: boolean;
-        uploading?: 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: {
-        error: CustomEvent<any>;
-        start_recording: CustomEvent<any>;
-        stop_recording: CustomEvent<any>;
-        play: CustomEvent<any>;
-        pause: CustomEvent<any>;
-        stop: CustomEvent<undefined>;
-        end: CustomEvent<any>;
-        change: CustomEvent<any>;
-        clear?: CustomEvent<undefined> | undefined;
-        drag: CustomEvent<boolean>;
-        upload: CustomEvent<FileData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type InteractiveVideoProps = typeof __propDef.props;
-export type InteractiveVideoEvents = typeof __propDef.events;
-export type InteractiveVideoSlots = typeof __propDef.slots;
-export default class InteractiveVideo extends SvelteComponent<InteractiveVideoProps, InteractiveVideoEvents, InteractiveVideoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const InteractiveVideo: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    value?: FileData | null;
+    subtitle?: FileData | null;
+    sources?: ["webcam"] | ["upload"] | ["webcam", "upload"] | ["upload", "webcam"];
+    label?: string | undefined;
+    show_download_button?: boolean;
+    show_label?: boolean;
+    webcam_options: WebcamOptions;
+    include_audio: boolean;
+    autoplay: boolean;
+    root: string;
+    i18n: I18nFormatter;
+    active_source?: "webcam" | "upload";
+    handle_reset_value?: () => void;
+    max_file_size?: number | null;
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+    loop: boolean;
+    uploading?: boolean;
+    upload_promise?: Promise<any> | null;
+}, {
+    default: {};
+}>, {
+    error: CustomEvent<any>;
+    start_recording: CustomEvent<any>;
+    stop_recording: CustomEvent<any>;
+    play: CustomEvent<any>;
+    pause: CustomEvent<any>;
+    stop: CustomEvent<undefined>;
+    end: CustomEvent<any>;
+    change: CustomEvent<FileData | null>;
+    clear?: CustomEvent<undefined> | undefined;
+    drag: CustomEvent<boolean>;
+    upload: CustomEvent<FileData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type InteractiveVideo = InstanceType<typeof InteractiveVideo>;
+export default InteractiveVideo;

package/dist/shared/Player.svelte

@@ -1,73 +1,105 @@
-<script>import { createEventDispatcher } from "svelte";
-import { Play, Pause, Maximize, Undo } from "@gradio/icons";
-import Video from "./Video.svelte";
-import VideoControls from "./VideoControls.svelte";
-import { prepare_files } from "@gradio/client";
-import { format_time } from "@gradio/utils";
-export let root = "";
-export let src;
-export let subtitle = null;
-export let mirror;
-export let autoplay;
-export let loop;
-export let label = "test";
-export let interactive = false;
-export let handle_change = () => {
-};
-export let handle_reset_value = () => {
-};
-export let upload;
-export let is_stream;
-export let i18n;
-export let show_download_button = false;
-export let value = null;
-export let handle_clear = () => {
-};
-export let has_change_history = false;
-const dispatch = createEventDispatcher();
-let time = 0;
-let duration;
-let paused = true;
-let video;
-let processingVideo = false;
-function handleMove(e) {
-  if (!duration) return;
-  if (e.type === "click") {
-    handle_click(e);
-    return;
-  }
-  if (e.type !== "touchmove" && !(e.buttons & 1)) return;
-  const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
-  const { left, right } = e.currentTarget.getBoundingClientRect();
-  time = duration * (clientX - left) / (right - left);
-}
-async function play_pause() {
-  if (document.fullscreenElement != video) {
-    const isPlaying = video.currentTime > 0 && !video.paused && !video.ended && video.readyState > video.HAVE_CURRENT_DATA;
-    if (!isPlaying) {
-      await video.play();
-    } else video.pause();
-  }
-}
-function handle_click(e) {
-  const { left, right } = e.currentTarget.getBoundingClientRect();
-  time = duration * (e.clientX - left) / (right - left);
-}
-function handle_end() {
-  dispatch("stop");
-  dispatch("end");
-}
-const handle_trim_video = async (videoBlob) => {
-  let _video_blob = new File([videoBlob], "video.mp4");
-  const val = await prepare_files([_video_blob]);
-  let value2 = ((await upload(val, root))?.filter(Boolean))[0];
-  handle_change(value2);
-};
-function open_full_screen() {
-  video.requestFullscreen();
-}
-$: time = time || 0;
-$: duration = duration || 0;
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Play, Pause, Maximize, Undo } from "@gradio/icons";
+	import Video from "./Video.svelte";
+	import VideoControls from "./VideoControls.svelte";
+	import type { FileData, Client } from "@gradio/client";
+	import { prepare_files } from "@gradio/client";
+	import { format_time } from "@gradio/utils";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let root = "";
+	export let src: string;
+	export let subtitle: string | null = null;
+	export let mirror: boolean;
+	export let autoplay: boolean;
+	export let loop: boolean;
+	export let label = "test";
+	export let interactive = false;
+	export let handle_change: (video: FileData) => void = () => {};
+	export let handle_reset_value: () => void = () => {};
+	export let upload: Client["upload"];
+	export let is_stream: boolean | undefined;
+	export let i18n: I18nFormatter;
+	export let show_download_button = false;
+	export let value: FileData | null = null;
+	export let handle_clear: () => void = () => {};
+	export let has_change_history = false;
+
+	const dispatch = createEventDispatcher<{
+		play: undefined;
+		pause: undefined;
+		stop: undefined;
+		end: undefined;
+		clear: undefined;
+	}>();
+
+	let time = 0;
+	let duration: number;
+	let paused = true;
+	let video: HTMLVideoElement;
+	let processingVideo = false;
+
+	function handleMove(e: TouchEvent | MouseEvent): void {
+		if (!duration) return;
+
+		if (e.type === "click") {
+			handle_click(e as MouseEvent);
+			return;
+		}
+
+		if (e.type !== "touchmove" && !((e as MouseEvent).buttons & 1)) return;
+
+		const clientX =
+			e.type === "touchmove"
+				? (e as TouchEvent).touches[0].clientX
+				: (e as MouseEvent).clientX;
+		const { left, right } = (
+			e.currentTarget as HTMLProgressElement
+		).getBoundingClientRect();
+		time = (duration * (clientX - left)) / (right - left);
+	}
+
+	async function play_pause(): Promise<void> {
+		if (document.fullscreenElement != video) {
+			const isPlaying =
+				video.currentTime > 0 &&
+				!video.paused &&
+				!video.ended &&
+				video.readyState > video.HAVE_CURRENT_DATA;
+
+			if (!isPlaying) {
+				await video.play();
+			} else video.pause();
+		}
+	}
+
+	function handle_click(e: MouseEvent): void {
+		const { left, right } = (
+			e.currentTarget as HTMLProgressElement
+		).getBoundingClientRect();
+		time = (duration * (e.clientX - left)) / (right - left);
+	}
+
+	function handle_end(): void {
+		dispatch("stop");
+		dispatch("end");
+	}
+
+	const handle_trim_video = async (videoBlob: Blob): Promise<void> => {
+		let _video_blob = new File([videoBlob], "video.mp4");
+		const val = await prepare_files([_video_blob]);
+		let value = ((await upload(val, root))?.filter(Boolean) as FileData[])[0];
+
+		handle_change(value);
+	};
+
+	function open_full_screen(): void {
+		video.requestFullscreen();
+	}
+
+	$: time = time || 0;
+	$: duration = duration || 0;
 </script>
 
 <div class="wrap">
@@ -156,7 +188,7 @@ $: duration = duration || 0;
 	/>
 {/if}
 
-<style>
+<style lang="postcss">
 	span {
 		text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
 	}

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

@@ -1,46 +1,48 @@
-import { SvelteComponent } from "svelte";
 import type { FileData, Client } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        root?: string;
-        src: string;
-        subtitle?: string | null;
-        mirror: boolean;
-        autoplay: boolean;
-        loop: boolean;
-        label?: string;
-        interactive?: boolean;
-        handle_change?: (video: FileData) => void;
-        handle_reset_value?: () => void;
-        upload: Client["upload"];
-        is_stream: boolean | undefined;
-        i18n: I18nFormatter;
-        show_download_button?: boolean;
-        value?: FileData | null;
-        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: {
-        play: CustomEvent<any>;
-        pause: CustomEvent<any>;
-        error: CustomEvent<any>;
-        loadstart: Event;
-        loadeddata: Event;
-        loadedmetadata: Event;
-        stop: CustomEvent<undefined>;
-        end: CustomEvent<undefined>;
-        clear: CustomEvent<undefined>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type PlayerProps = typeof __propDef.props;
-export type PlayerEvents = typeof __propDef.events;
-export type PlayerSlots = typeof __propDef.slots;
-export default class Player extends SvelteComponent<PlayerProps, PlayerEvents, PlayerSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Player: $$__sveltets_2_IsomorphicComponent<{
+    root?: string;
+    src: string;
+    subtitle?: string | null;
+    mirror: boolean;
+    autoplay: boolean;
+    loop: boolean;
+    label?: string;
+    interactive?: boolean;
+    handle_change?: (video: FileData) => void;
+    handle_reset_value?: () => void;
+    upload: Client["upload"];
+    is_stream: boolean | undefined;
+    i18n: I18nFormatter;
+    show_download_button?: boolean;
+    value?: FileData | null;
+    handle_clear?: () => void;
+    has_change_history?: boolean;
+}, {
+    play: CustomEvent<any>;
+    pause: CustomEvent<any>;
+    error: CustomEvent<any>;
+    loadstart: Event;
+    loadeddata: Event;
+    loadedmetadata: Event;
+    stop: CustomEvent<undefined>;
+    end: CustomEvent<undefined>;
+    clear: CustomEvent<undefined>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Player = InstanceType<typeof Player>;
+export default Player;

package/dist/shared/Video.svelte

@@ -1,65 +1,80 @@
-<script>import { createEventDispatcher } from "svelte";
-import { loaded } from "./utils";
-import Hls from "hls.js";
-export let src = void 0;
-export let muted = void 0;
-export let playsinline = void 0;
-export let preload = void 0;
-export let autoplay = void 0;
-export let controls = void 0;
-export let currentTime = void 0;
-export let duration = void 0;
-export let paused = void 0;
-export let node = void 0;
-export let loop;
-export let is_stream;
-export let processingVideo = false;
-let stream_active = false;
-const dispatch = createEventDispatcher();
-function load_stream(src2, is_stream2, node2) {
-  if (!src2 || !is_stream2) return;
-  if (Hls.isSupported() && !stream_active) {
-    const hls = new Hls({
-      maxBufferLength: 1,
-      // 0.5 seconds (500 ms)
-      maxMaxBufferLength: 1,
-      // Maximum max buffer length in seconds
-      lowLatencyMode: true
-      // Enable low latency mode
-    });
-    hls.loadSource(src2);
-    hls.attachMedia(node2);
-    hls.on(Hls.Events.MANIFEST_PARSED, function() {
-      node2.play();
-    });
-    hls.on(Hls.Events.ERROR, function(event, data) {
-      console.error("HLS error:", event, data);
-      if (data.fatal) {
-        switch (data.type) {
-          case Hls.ErrorTypes.NETWORK_ERROR:
-            console.error(
-              "Fatal network error encountered, trying to recover"
-            );
-            hls.startLoad();
-            break;
-          case Hls.ErrorTypes.MEDIA_ERROR:
-            console.error("Fatal media error encountered, trying to recover");
-            hls.recoverMediaError();
-            break;
-          default:
-            console.error("Fatal error, cannot recover");
-            hls.destroy();
-            break;
-        }
-      }
-    });
-    stream_active = true;
-  }
-}
-$: src, stream_active = false;
-$: if (node && src && is_stream) {
-  load_stream(src, is_stream, node);
-}
+<script lang="ts">
+	import type { HTMLVideoAttributes } from "svelte/elements";
+	import { createEventDispatcher } from "svelte";
+	import { loaded } from "./utils";
+
+	import Hls from "hls.js";
+
+	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;
+	export let loop: boolean;
+	export let is_stream;
+
+	export let processingVideo = false;
+
+	let stream_active = false;
+
+	const dispatch = createEventDispatcher();
+
+	function load_stream(
+		src: string | null | undefined,
+		is_stream: boolean,
+		node: HTMLVideoElement
+	): void {
+		if (!src || !is_stream) return;
+
+		if (Hls.isSupported() && !stream_active) {
+			const hls = new Hls({
+				maxBufferLength: 1, // 0.5 seconds (500 ms)
+				maxMaxBufferLength: 1, // Maximum max buffer length in seconds
+				lowLatencyMode: true // Enable low latency mode
+			});
+			hls.loadSource(src);
+			hls.attachMedia(node);
+			hls.on(Hls.Events.MANIFEST_PARSED, function () {
+				(node as HTMLVideoElement).play();
+			});
+			hls.on(Hls.Events.ERROR, function (event, data) {
+				console.error("HLS error:", event, data);
+				if (data.fatal) {
+					switch (data.type) {
+						case Hls.ErrorTypes.NETWORK_ERROR:
+							console.error(
+								"Fatal network error encountered, trying to recover"
+							);
+							hls.startLoad();
+							break;
+						case Hls.ErrorTypes.MEDIA_ERROR:
+							console.error("Fatal media error encountered, trying to recover");
+							hls.recoverMediaError();
+							break;
+						default:
+							console.error("Fatal error, cannot recover");
+							hls.destroy();
+							break;
+					}
+				}
+			});
+			stream_active = true;
+		}
+	}
+
+	$: (src, (stream_active = false));
+
+	$: if (node && src && is_stream) {
+		load_stream(src, is_stream, node);
+	}
 </script>
 
 <!--

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

@@ -1,38 +1,46 @@
-import { SvelteComponent } from "svelte";
-import type { HTMLVideoAttributes } from "svelte/elements";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        src?: HTMLVideoAttributes["src"];
-        muted?: HTMLVideoAttributes["muted"];
-        playsinline?: HTMLVideoAttributes["playsinline"];
-        preload?: HTMLVideoAttributes["preload"];
-        autoplay?: HTMLVideoAttributes["autoplay"];
-        controls?: HTMLVideoAttributes["controls"];
-        currentTime?: number | undefined;
-        duration?: number | undefined;
-        paused?: boolean | undefined;
-        node?: HTMLVideoElement | undefined;
-        loop: boolean;
-        is_stream: any;
-        processingVideo?: boolean | undefined;
+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: {
-        loadstart: Event;
-        loadeddata: Event;
-        loadedmetadata: Event;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: undefined;
-    bindings?: undefined;
-};
-export type VideoProps = typeof __propDef.props;
-export type VideoEvents = typeof __propDef.events;
-export type VideoSlots = typeof __propDef.slots;
-export default class Video extends SvelteComponent<VideoProps, VideoEvents, VideoSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Video: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    [x: string]: any;
+    src?: string | null | undefined;
+    muted?: boolean | null | undefined;
+    playsinline?: boolean | null | undefined;
+    preload?: "" | "auto" | "none" | "metadata" | null | undefined;
+    autoplay?: boolean | null | undefined;
+    controls?: boolean | null | undefined;
+    currentTime?: number | undefined | undefined;
+    duration?: number | undefined | undefined;
+    paused?: boolean | undefined | undefined;
+    node?: HTMLVideoElement | undefined;
+    loop: boolean;
+    is_stream: any;
+    processingVideo?: boolean | undefined;
+}, {
+    default: {};
+}>, {
+    loadstart: Event;
+    loadeddata: Event;
+    loadedmetadata: Event;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Video = InstanceType<typeof Video>;
+export default Video;