@gradio/video 0.1.0-beta.7 → 0.1.0

package/shared/InteractiveVideo.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
-	import type { FileData } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Webcam } from "@gradio/image";
-	import { Video } from "@gradio/icons";
+	import { Video, Upload as UploadIcon } from "@gradio/icons";
 
 	import { prettyBytes, playable } from "./utils";
 	import Player from "./Player.svelte";
@@ -12,7 +12,11 @@
 
 	export let value: FileData | null = null;
 	export let subtitle: FileData | null = null;
-	export let source: string;
+	export let sources:
+		| ["webcam"]
+		| ["upload"]
+		| ["webcam", "upload"]
+		| ["upload", "webcam"] = ["webcam", "upload"];
 	export let label: string | undefined = undefined;
 	export let show_label = true;
 	export let mirror_webcam = false;
@@ -20,18 +24,20 @@
 	export let autoplay: boolean;
 	export let root: string;
 	export let i18n: I18nFormatter;
+	export let active_source: "webcam" | "upload" = "webcam";
+	export let handle_reset_value: () => void = () => {};
 
 	const dispatch = createEventDispatcher<{
-		change: any;
-		clear: undefined;
-		play: undefined;
-		pause: undefined;
-		end: undefined;
+		change: FileData | null;
+		clear?: never;
+		play?: never;
+		pause?: never;
+		end?: never;
 		drag: boolean;
 		error: string;
 		upload: FileData;
-		start_recording: undefined;
-		stop_recording: undefined;
+		start_recording?: never;
+		stop_recording?: never;
 	}>();
 
 	function handle_load({ detail }: CustomEvent<FileData | null>): void {
@@ -40,19 +46,24 @@
 		dispatch("upload", detail!);
 	}
 
-	function handle_clear({ detail }: CustomEvent<FileData | null>): void {
+	function handle_clear(): void {
 		value = null;
-		dispatch("change", detail);
+		active_source = sources[0];
+		dispatch("change", null);
 		dispatch("clear");
 	}
 
+	function handle_change(video: FileData): void {
+		dispatch("change", video);
+	}
+
 	let dragging = false;
 	$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
-{#if value === null}
-	{#if source === "upload"}
+{#if value === null || value.url === undefined}
+	{#if active_source === "upload"}
 		<Upload
 			bind:dragging
 			filetype="video/x-m4v,video/*"
@@ -61,13 +72,13 @@
 		>
 			<slot />
 		</Upload>
-	{:else if source === "webcam"}
+	{:else if active_source === "webcam"}
 		<Webcam
 			{mirror_webcam}
 			{include_audio}
 			mode="video"
 			on:error
-			on:capture={({ detail }) => dispatch("change", detail)}
+			on:capture={() => dispatch("change")}
 			on:start_recording
 			on:stop_recording
 			{i18n}
@@ -76,27 +87,52 @@
 {:else}
 	<ModifyUpload {i18n} on:clear={handle_clear} />
 	{#if playable()}
-		{#key value?.data}
+		{#key value?.url}
 			<Player
+				{root}
+				interactive
 				{autoplay}
-				src={value.data}
-				subtitle={subtitle?.data}
+				src={value.url}
+				subtitle={subtitle?.url}
 				on:play
 				on:pause
 				on:stop
 				on:end
-				mirror={mirror_webcam && source === "webcam"}
+				mirror={mirror_webcam && active_source === "webcam"}
 				{label}
+				{handle_change}
+				{handle_reset_value}
 			/>
 		{/key}
 	{:else if value.size}
-		<div class="file-name">{value.name}</div>
+		<div class="file-name">{value.orig_name || value.url}</div>
 		<div class="file-size">
 			{prettyBytes(value.size)}
 		</div>
 	{/if}
 {/if}
 
+{#if sources.length > 1}
+	<span class="source-selection">
+		<button
+			class="icon"
+			aria-label="Upload video"
+			on:click={() => {
+				handle_clear();
+				active_source = "upload";
+			}}><UploadIcon /></button
+		>
+		<button
+			class="icon"
+			aria-label="Record audio"
+			on:click={() => {
+				handle_clear();
+				active_source = "webcam";
+			}}><Video /></button
+		>
+	</span>
+{/if}
+
 <style>
 	.file-name {
 		padding: var(--size-6);
@@ -108,4 +144,27 @@
 		padding: var(--size-2);
 		font-size: var(--text-xl);
 	}
+
+	.source-selection {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-top: 1px solid var(--border-color-primary);
+		width: 95%;
+		margin: 0 auto;
+	}
+
+	.icon {
+		width: 22px;
+		height: 22px;
+		margin: var(--spacing-lg) var(--spacing-xs);
+		padding: var(--spacing-xs);
+		color: var(--neutral-400);
+		border-radius: var(--radius-md);
+	}
+
+	.icon:hover,
+	.icon:focus {
+		color: var(--color-accent);
+	}
 </style>

package/shared/Player.svelte

@@ -1,13 +1,20 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
 	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
-	import Video from "./StaticVideo.svelte";
+	import Video from "./Video.svelte";
+	import VideoControls from "./VideoControls.svelte";
+	import type { FileData } from "@gradio/client";
+	import { prepare_files, upload } from "@gradio/client";
 
+	export let root = "";
 	export let src: string;
 	export let subtitle: string | null = null;
 	export let mirror: boolean;
 	export let autoplay: boolean;
 	export let label = "test";
+	export let interactive = false;
+	export let handle_change: (video: FileData) => void = () => {};
+	export let handle_reset_value: () => void = () => {};
 
 	const dispatch = createEventDispatcher<{
 		play: undefined;
@@ -20,6 +27,7 @@
 	let duration: number;
 	let paused = true;
 	let video: HTMLVideoElement;
+	let processingVideo = false;
 
 	function handleMove(e: TouchEvent | MouseEvent): void {
 		if (!duration) return;
@@ -77,6 +85,14 @@
 		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();
 	}
@@ -97,6 +113,7 @@
 			bind:paused
 			bind:node={video}
 			data-testid={`${label}-player`}
+			{processingVideo}
 		>
 			<track kind="captions" src={subtitle} default />
 		</Video>
@@ -146,6 +163,15 @@
 		</div>
 	</div>
 </div>
+{#if interactive}
+	<VideoControls
+		videoElement={video}
+		showRedo
+		{handle_trim_video}
+		{handle_reset_value}
+		bind:processingVideo
+	/>
+{/if}
 
 <style lang="postcss">
 	span {
@@ -220,5 +246,6 @@
 		background-color: var(--background-fill-secondary);
 		height: var(--size-full);
 		width: var(--size-full);
+		border-radius: var(--radius-xl);
 	}
 </style>

package/shared/Video.svelte

@@ -19,6 +19,8 @@
 
 	export let node: HTMLVideoElement | undefined = undefined;
 
+	export let processingVideo = false;
+
 	const dispatch = createEventDispatcher();
 </script>
 
@@ -30,6 +32,11 @@
 	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.
 -->
+	<div class:hidden={!processingVideo} class="overlay">
+		<span class="load-wrap">
+			<span class="loader" />
+		</span>
+	</div>
 	<video
 		src={resolved_src}
 		{muted}
@@ -52,6 +59,7 @@
 		bind:this={node}
 		use:loaded={{ autoplay: autoplay ?? false }}
 		data-testid={$$props["data-testid"]}
+		crossorigin="anonymous"
 	>
 		<slot />
 	</video>
@@ -60,11 +68,59 @@
 {/await}
 
 <style>
+	.overlay {
+		position: absolute;
+		background-color: rgba(0, 0, 0, 0.4);
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	.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;
+		}
+	}
+
 	video {
 		position: inherit;
 		background-color: black;
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
+		border-radius: var(--radius-xl);
 	}
 </style>

package/shared/VideoControls.svelte

@@ -0,0 +1,214 @@
+<script lang="ts">
+	import { Undo, Trim } 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";
+
+	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;
+
+	let ffmpeg: FFmpeg;
+
+	onMount(async () => {
+		ffmpeg = await loadFfmpeg();
+	});
+
+	$: if (mode === "edit" && trimmedDuration === null && videoElement)
+		trimmedDuration = videoElement.duration;
+
+	const formatTime = (seconds: number): string => {
+		const minutes = Math.floor(seconds / 60);
+		const secondsRemainder = Math.round(seconds) % 60;
+		const paddedSeconds = `0${secondsRemainder}`.slice(-2);
+		return `${minutes}:${paddedSeconds}`;
+	};
+
+	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">
+	{#if mode === "edit"}
+		<div class="timeline-wrapper">
+			<VideoTimeline
+				{videoElement}
+				bind:dragStart
+				bind:dragEnd
+				bind:trimmedDuration
+				bind:loadingTimeline
+			/>
+		</div>
+	{/if}
+
+	<div class="controls" data-testid="waveform-controls">
+		{#if mode === "edit" && trimmedDuration !== null}
+			<time
+				aria-label="duration of selected region in seconds"
+				class:hidden={loadingTimeline}>{formatTime(trimmedDuration)}</time
+			>
+		{:else}
+			<div />
+		{/if}
+
+		<div class="settings-wrapper">
+			{#if showRedo && mode === ""}
+				<button
+					class="action icon"
+					disabled={processingVideo}
+					aria-label="Reset video to initial value"
+					on:click={() => {
+						handle_reset_value();
+						mode = "";
+					}}
+				>
+					<Undo />
+				</button>
+			{/if}
+
+			{#if interactive}
+				{#if mode === ""}
+					<button
+						disabled={processingVideo}
+						class="action icon"
+						aria-label="Trim video to selection"
+						on:click={toggleTrimmingMode}
+					>
+						<Trim />
+					</button>
+				{:else}
+					<button
+						class:hidden={loadingTimeline}
+						class="text-button"
+						on:click={() => {
+							mode = "";
+							processingVideo = true;
+							trimVideo(ffmpeg, dragStart, dragEnd, videoElement)
+								.then((videoBlob) => {
+									handle_trim_video(videoBlob);
+								})
+								.then(() => {
+									processingVideo = false;
+								});
+						}}>Trim</button
+					>
+					<button
+						class="text-button"
+						class:hidden={loadingTimeline}
+						on:click={toggleTrimmingMode}>Cancel</button
+					>
+				{/if}
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.container {
+		width: 100%;
+	}
+	time {
+		color: var(--color-accent);
+		font-weight: bold;
+		padding-left: var(--spacing-xs);
+	}
+
+	.timeline-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+	}
+	.settings-wrapper {
+		display: flex;
+		justify-self: self-end;
+	}
+	.text-button {
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-sm);
+		font-weight: 300;
+		font-size: var(--size-3);
+		text-align: center;
+		color: var(--neutral-400);
+		height: var(--size-5);
+		font-weight: bold;
+		padding: 0 5px;
+		margin-left: 5px;
+	}
+	.hidden {
+		display: none;
+	}
+
+	.text-button:hover,
+	.text-button:focus {
+		color: var(--color-accent);
+		border-color: var(--color-accent);
+	}
+
+	.controls {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		margin: var(--spacing-lg);
+		overflow: hidden;
+		text-align: left;
+	}
+
+	@media (max-width: 320px) {
+		.controls {
+			display: flex;
+			flex-wrap: wrap;
+		}
+
+		.controls * {
+			margin: var(--spacing-sm);
+		}
+
+		.controls .text-button {
+			margin-left: 0;
+		}
+	}
+	.action {
+		width: var(--size-5);
+		width: var(--size-5);
+		color: var(--neutral-400);
+		margin-left: var(--spacing-md);
+	}
+
+	.action:disabled {
+		cursor: not-allowed;
+		color: var(--border-color-accent-subdued);
+	}
+
+	.action:disabled:hover {
+		color: var(--border-color-accent-subdued);
+	}
+
+	.icon:hover,
+	.icon:focus {
+		color: var(--color-accent);
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+	}
+</style>

package/shared/VideoPreview.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, afterUpdate, tick } from "svelte";
 	import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms";
-	import type { FileData } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 	import { Video, Download } from "@gradio/icons";
 	import { uploadToHuggingFace } from "@gradio/utils";
 
@@ -14,6 +14,7 @@
 	export let show_label = true;
 	export let autoplay: boolean;
 	export let show_share_button = true;
+	export let show_download_button = true;
 	export let i18n: I18nFormatter;
 
 	let old_value: FileData | null = null;
@@ -47,13 +48,13 @@
 </script>
 
 <BlockLabel {show_label} Icon={Video} label={label || "Video"} />
-{#if value === null}
+{#if value === null || value.url === undefined}
 	<Empty unpadded_box={true} size="large"><Video /></Empty>
 {:else}
-	{#key value.data}
+	{#key value.url}
 		<Player
-			src={value.data}
-			subtitle={subtitle?.data}
+			src={value.url}
+			subtitle={subtitle?.url}
 			{autoplay}
 			on:play
 			on:pause
@@ -61,16 +62,19 @@
 			on:end
 			mirror={false}
 			{label}
+			interactive={false}
 		/>
 	{/key}
 	<div class="icon-buttons" data-testid="download-div">
-		<a
-			href={value.data}
-			target={window.__is_colab__ ? "_blank" : null}
-			download={value.orig_name || value.name}
-		>
-			<IconButton Icon={Download} label="Download" />
-		</a>
+		{#if show_download_button}
+			<a
+				href={value.url}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={value.orig_name || value.path}
+			>
+				<IconButton Icon={Download} label="Download" />
+			</a>
+		{/if}
 		{#if show_share_button}
 			<ShareButton
 				{i18n}