@gradio/video 0.20.2 → 0.20.4

package/shared/VideoControls.svelte

@@ -10,19 +10,35 @@
 	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;
+	interface 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;
+	}
+
+	let {
+		videoElement = undefined,
+		showRedo = false,
+		interactive = true,
+		mode = $bindable(""),
+		handle_reset_value,
+		handle_trim_video,
+		processingVideo = $bindable(false),
+		i18n,
+		value = null,
+		show_download_button = false,
+		handle_clear = () => {},
+		has_change_history = false
+	}: Props = $props();
 
 	let ffmpeg: FFmpeg;
 
@@ -30,19 +46,24 @@
 		ffmpeg = await loadFfmpeg();
 	});
 
-	$: if (mode === "edit" && trimmedDuration === null && videoElement)
-		trimmedDuration = videoElement.duration;
+	$effect(() => {
+		if (mode === "edit" && trimmedDuration === null && videoElement) {
+			trimmedDuration = videoElement.duration;
+		}
+	});
 
-	let trimmedDuration: number | null = null;
-	let dragStart = 0;
-	let dragEnd = 0;
+	let trimmedDuration = $state<number | null>(null);
+	let dragStart = $state(0);
+	let dragEnd = $state(0);
 
-	let loadingTimeline = false;
+	let loadingTimeline = $state(false);
 
 	const toggleTrimmingMode = (): void => {
 		if (mode === "edit") {
 			mode = "";
-			trimmedDuration = videoElement.duration;
+			if (videoElement) {
+				trimmedDuration = videoElement.duration;
+			}
 		} else {
 			mode = "edit";
 		}
@@ -50,7 +71,7 @@
 </script>
 
 <div class="container" class:hidden={mode !== "edit"}>
-	{#if mode === "edit"}
+	{#if mode === "edit" && videoElement}
 		<div class="timeline-wrapper">
 			<VideoTimeline
 				{videoElement}
@@ -72,7 +93,8 @@
 				<button
 					class:hidden={loadingTimeline}
 					class="text-button"
-					on:click={() => {
+					onclick={() => {
+						if (!videoElement) return;
 						mode = "";
 						processingVideo = true;
 						trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
@@ -87,7 +109,7 @@
 				<button
 					class="text-button"
 					class:hidden={loadingTimeline}
-					on:click={toggleTrimmingMode}>Cancel</button
+					onclick={toggleTrimmingMode}>Cancel</button
 				>
 			</div>
 		{:else}

package/shared/VideoPreview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, afterUpdate, tick } from "svelte";
+	import { tick } from "svelte";
 	import {
 		BlockLabel,
 		Empty,
@@ -16,47 +16,78 @@
 	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 buttons: (string | CustomButtonType)[] | null = null;
-	export let on_custom_button_click: ((id: number) => void) | null = null;
-	export let loop: boolean;
-	export let i18n: I18nFormatter;
-	export let upload: Client["upload"];
-	export let display_icon_button_wrapper_top_corner = false;
-	export let playback_position = 0;
+	interface Props {
+		value?: FileData | null;
+		subtitle?: FileData | null;
+		label?: string;
+		show_label?: boolean;
+		autoplay: boolean;
+		buttons?: (string | CustomButtonType)[] | null;
+		on_custom_button_click?: ((id: number) => void) | null;
+		loop: boolean;
+		i18n: I18nFormatter;
+		upload: Client["upload"];
+		display_icon_button_wrapper_top_corner?: boolean;
+		playback_position?: number;
+		onplay?: () => void;
+		onpause?: () => void;
+		onend?: () => void;
+		onstop?: () => void;
+		onload?: () => void;
+		onchange?: (value: FileData) => void;
+		onerror?: (error: string) => void;
+		onshare?: (detail: unknown) => void;
+	}
 
-	let old_value: FileData | null = null;
-	let old_subtitle: FileData | null = null;
+	let {
+		value = $bindable(null),
+		subtitle = null,
+		label = undefined,
+		show_label = true,
+		autoplay,
+		buttons = null,
+		on_custom_button_click = null,
+		loop,
+		i18n,
+		upload,
+		display_icon_button_wrapper_top_corner = false,
+		playback_position = $bindable(),
+		onplay,
+		onpause,
+		onend,
+		onstop,
+		onload,
+		onchange,
+		onerror,
+		onshare
+	}: Props = $props();
 
-	const dispatch = createEventDispatcher<{
-		change: FileData;
-		play: undefined;
-		pause: undefined;
-		end: undefined;
-		stop: undefined;
-		load: undefined;
-	}>();
+	let old_value = $state<FileData | null>(null);
+	let old_subtitle = $state<FileData | null>(null);
 
-	$: value && dispatch("change", value);
+	$effect(() => {
+		if (value) {
+			onchange?.(value);
+		}
+	});
 
-	afterUpdate(async () => {
-		// needed to bust subtitle caching issues on Chrome
-		if (
-			value !== old_value &&
-			subtitle !== old_subtitle &&
-			old_subtitle !== null
-		) {
+	$effect(() => {
+		async function updateValue(): Promise<void> {
+			// 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;
-			value = null;
-			await tick();
-			value = old_value;
+			old_subtitle = subtitle;
 		}
-		old_value = value;
-		old_subtitle = subtitle;
+		updateValue();
 	});
 </script>
 
@@ -70,15 +101,15 @@
 			subtitle={subtitle?.url}
 			is_stream={value.is_stream}
 			{autoplay}
-			on:play
-			on:pause
-			on:stop
-			on:end
-			on:loadedmetadata={() => {
+			onplay={() => onplay?.()}
+			onpause={() => onpause?.()}
+			onstop={() => onstop?.()}
+			onend={() => onend?.()}
+			onloadedmetadata={() => {
 				// Deal with `<video>`'s `loadedmetadata` event as `VideoPreview`'s `load` event
 				// to represent not only the video is loaded but also the metadata is loaded
 				// so its dimensions (w/h) are known. This is used for Chatbot's auto scroll.
-				dispatch("load");
+				onload?.();
 			}}
 			mirror={false}
 			{label}
@@ -108,8 +139,8 @@
 			{#if buttons?.some((btn) => typeof btn === "string" && btn === "share")}
 				<ShareButton
 					{i18n}
-					on:error
-					on:share
+					onerror={(detail) => onerror?.(detail)}
+					onshare={(detail) => onshare?.(detail)}
 					{value}
 					formatter={async (value) => {
 						if (!value) return "";

package/shared/VideoTimeline.svelte

@@ -1,27 +1,41 @@
 <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;
+	interface Props {
+		videoElement: HTMLVideoElement;
+		trimmedDuration?: number | null;
+		dragStart?: number;
+		dragEnd?: number;
+		loadingTimeline?: boolean;
+	}
+
+	let {
+		videoElement,
+		trimmedDuration = $bindable(null),
+		dragStart = $bindable(0),
+		dragEnd = $bindable(0),
+		loadingTimeline = $bindable(false)
+	}: Props = $props();
 
-	let thumbnails: string[] = [];
+	let thumbnails = $state<string[]>([]);
 	let numberOfThumbnails = 10;
 	let intervalId: ReturnType<typeof setInterval> | undefined;
 	let videoDuration: number;
 
-	let leftHandlePosition = 0;
-	let rightHandlePosition = 100;
+	let leftHandlePosition = $state(0);
+	let rightHandlePosition = $state(100);
 
-	let dragging: string | null = null;
+	let dragging = $state<string | null>(null);
 
 	const startDragging = (side: string | null): void => {
 		dragging = side;
 	};
 
-	$: loadingTimeline = thumbnails.length !== numberOfThumbnails;
+	let loadingTimelineValue = $derived(thumbnails.length !== numberOfThumbnails);
+
+	$effect(() => {
+		loadingTimeline = loadingTimelineValue;
+	});
 
 	const stopDragging = (): void => {
 		dragging = null;
@@ -149,7 +163,7 @@
 </script>
 
 <div class="container">
-	{#if loadingTimeline}
+	{#if loadingTimelineValue}
 		<div class="load-wrap">
 			<span aria-label="loading timeline" class="loader" />
 		</div>
@@ -158,20 +172,20 @@
 			<button
 				aria-label="start drag handle for trimming video"
 				class="handle left"
-				on:mousedown={() => startDragging("left")}
-				on:blur={stopDragging}
-				on:keydown={(e) => {
+				onmousedown={() => startDragging("left")}
+				onblur={stopDragging}
+				onkeydown={(e) => {
 					if (e.key === "ArrowLeft" || e.key == "ArrowRight") {
 						startDragging("left");
 					}
 				}}
 				style="left: {leftHandlePosition}%;"
-			/>
+			></button>
 
 			<div
 				class="opaque-layer"
 				style="left: {leftHandlePosition}%; right: {100 - rightHandlePosition}%"
-			/>
+			></div>
 
 			{#each thumbnails as thumbnail, i (i)}
 				<img src={thumbnail} alt={`frame-${i}`} draggable="false" />
@@ -179,15 +193,15 @@
 			<button
 				aria-label="end drag handle for trimming video"
 				class="handle right"
-				on:mousedown={() => startDragging("right")}
-				on:blur={stopDragging}
-				on:keydown={(e) => {
+				onmousedown={() => startDragging("right")}
+				onblur={stopDragging}
+				onkeydown={(e) => {
 					if (e.key === "ArrowLeft" || e.key == "ArrowRight") {
 						startDragging("right");
 					}
 				}}
 				style="left: {rightHandlePosition}%;"
-			/>
+			></button>
 		</div>
 	{/if}
 </div>

package/shared/VolumeControl.svelte

@@ -1,10 +1,17 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	export let current_volume = 1;
-	export let show_volume_slider = false;
+	interface Props {
+		current_volume?: number;
+		show_volume_slider?: boolean;
+	}
+
+	let {
+		current_volume = $bindable(1),
+		show_volume_slider = $bindable(false)
+	}: Props = $props();
 
-	let volume_element: HTMLInputElement;
+	let volume_element: HTMLInputElement | undefined = $state();
 
 	onMount(() => {
 		adjustSlider();
@@ -19,7 +26,10 @@
 		}%, rgba(255, 255, 255, 0.3) ${current_volume * 100}%)`;
 	};
 
-	$: (current_volume, adjustSlider());
+	$effect(() => {
+		current_volume;
+		adjustSlider();
+	});
 </script>
 
 <input
@@ -31,8 +41,8 @@
 	max="1"
 	step="0.01"
 	value={current_volume}
-	on:focusout={() => (show_volume_slider = false)}
-	on:input={(e) => {
+	onfocusout={() => (show_volume_slider = false)}
+	oninput={(e) => {
 		if (e.target instanceof HTMLInputElement) {
 			current_volume = parseFloat(e.target.value);
 		}