@gradio/video 0.10.2 → 0.10.4

package/dist/shared/Player.svelte

@@ -0,0 +1,229 @@
+<script>import { createEventDispatcher } from "svelte";
+import { Play, Pause, Maximise, 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;
+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 value = ((await upload(val, root))?.filter(Boolean))[0];
+  handle_change(value);
+};
+function open_full_screen() {
+  video.requestFullscreen();
+}
+</script>
+
+<div class="wrap">
+	<div class="mirror-wrap" class:mirror>
+		<Video
+			{src}
+			preload="auto"
+			{autoplay}
+			{loop}
+			on:click={play_pause}
+			on:play
+			on:pause
+			on:ended={handle_end}
+			bind:currentTime={time}
+			bind:duration
+			bind:paused
+			bind:node={video}
+			data-testid={`${label}-player`}
+			{processingVideo}
+			on:load
+		>
+			<track kind="captions" src={subtitle} default />
+		</Video>
+	</div>
+
+	<div class="controls">
+		<div class="inner">
+			<span
+				role="button"
+				tabindex="0"
+				class="icon"
+				aria-label="play-pause-replay-button"
+				on:click={play_pause}
+				on:keydown={play_pause}
+			>
+				{#if time === duration}
+					<Undo />
+				{:else if paused}
+					<Play />
+				{:else}
+					<Pause />
+				{/if}
+			</span>
+
+			<span class="time">{format_time(time)} / {format_time(duration)}</span>
+
+			<!-- TODO: implement accessible video timeline for 4.0 -->
+			<!-- svelte-ignore a11y-click-events-have-key-events -->
+			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<progress
+				value={time / duration || 0}
+				on:mousemove={handleMove}
+				on:touchmove|preventDefault={handleMove}
+				on:click|stopPropagation|preventDefault={handle_click}
+			/>
+
+			<div
+				role="button"
+				tabindex="0"
+				class="icon"
+				aria-label="full-screen"
+				on:click={open_full_screen}
+				on:keypress={open_full_screen}
+			>
+				<Maximise />
+			</div>
+		</div>
+	</div>
+</div>
+{#if interactive}
+	<VideoControls
+		videoElement={video}
+		showRedo
+		{handle_trim_video}
+		{handle_reset_value}
+		bind:processingVideo
+	/>
+{/if}
+
+<style>
+	span {
+		text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
+	}
+
+	progress {
+		margin-right: var(--size-3);
+		border-radius: var(--radius-sm);
+		width: var(--size-full);
+		height: var(--size-2);
+	}
+
+	progress::-webkit-progress-bar {
+		border-radius: 2px;
+		background-color: rgba(255, 255, 255, 0.2);
+		overflow: hidden;
+	}
+
+	progress::-webkit-progress-value {
+		background-color: rgba(255, 255, 255, 0.9);
+	}
+
+	.mirror {
+		transform: scaleX(-1);
+	}
+
+	.mirror-wrap {
+		position: relative;
+		height: 100%;
+		width: 100%;
+	}
+
+	.controls {
+		position: absolute;
+		bottom: 0;
+		opacity: 0;
+		transition: 500ms;
+		margin: var(--size-2);
+		border-radius: var(--radius-md);
+		background: var(--color-grey-800);
+		padding: var(--size-2) var(--size-1);
+		width: calc(100% - 0.375rem * 2);
+		width: calc(100% - var(--size-2) * 2);
+	}
+	.wrap:hover .controls {
+		opacity: 1;
+	}
+
+	.inner {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-right: var(--size-2);
+		padding-left: var(--size-2);
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+
+	.icon {
+		display: flex;
+		justify-content: center;
+		cursor: pointer;
+		width: var(--size-6);
+		color: white;
+	}
+
+	.time {
+		flex-shrink: 0;
+		margin-right: var(--size-3);
+		margin-left: var(--size-3);
+		color: white;
+		font-size: var(--text-sm);
+		font-family: var(--font-mono);
+	}
+	.wrap {
+		position: relative;
+		background-color: var(--background-fill-secondary);
+		height: var(--size-full);
+		width: var(--size-full);
+		border-radius: var(--radius-xl);
+	}
+	.wrap :global(video) {
+		height: var(--size-full);
+		width: var(--size-full);
+	}
+</style>

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

@@ -0,0 +1,33 @@
+import { SvelteComponent } from "svelte";
+import type { FileData, Client } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        root?: string | undefined;
+        src: string;
+        subtitle?: (string | null) | undefined;
+        mirror: boolean;
+        autoplay: boolean;
+        loop: boolean;
+        label?: string | undefined;
+        interactive?: boolean | undefined;
+        handle_change?: ((video: FileData) => void) | undefined;
+        handle_reset_value?: (() => void) | undefined;
+        upload: Client["upload"];
+    };
+    events: {
+        play: CustomEvent<any>;
+        pause: CustomEvent<any>;
+        load: Event;
+        stop: CustomEvent<undefined>;
+        end: CustomEvent<undefined>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/Video.svelte

@@ -0,0 +1,126 @@
+<script>import { createEventDispatcher } from "svelte";
+import { loaded } from "./utils";
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+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 processingVideo = false;
+let resolved_src;
+let latest_src;
+$: {
+  resolved_src = src;
+  latest_src = src;
+  const resolving_src = src;
+  resolve_wasm_src(resolving_src).then((s) => {
+    if (latest_src === resolving_src) {
+      resolved_src = s;
+    }
+  });
+}
+const dispatch = createEventDispatcher();
+</script>
+
+<!--
+The spread operator with `$$props` or `$$restProps` can't be used here
+to pass props from the parent component to the <video> element
+because of its unexpected behavior: https://github.com/sveltejs/svelte/issues/7404
+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}
+	{playsinline}
+	{preload}
+	{autoplay}
+	{controls}
+	{loop}
+	on:loadeddata={dispatch.bind(null, "loadeddata")}
+	on:click={dispatch.bind(null, "click")}
+	on:play={dispatch.bind(null, "play")}
+	on:pause={dispatch.bind(null, "pause")}
+	on:ended={dispatch.bind(null, "ended")}
+	on:mouseover={dispatch.bind(null, "mouseover")}
+	on:mouseout={dispatch.bind(null, "mouseout")}
+	on:focus={dispatch.bind(null, "focus")}
+	on:blur={dispatch.bind(null, "blur")}
+	on:load
+	bind:currentTime
+	bind:duration
+	bind:paused
+	bind:this={node}
+	use:loaded={{ autoplay: autoplay ?? false }}
+	data-testid={$$props["data-testid"]}
+	crossorigin="anonymous"
+>
+	<slot />
+</video>
+
+<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;
+		}
+	}
+</style>

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

@@ -0,0 +1,33 @@
+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;
+        processingVideo?: boolean | undefined;
+    };
+    events: {
+        load: Event;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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> {
+}
+export {};

package/dist/shared/VideoControls.svelte

@@ -0,0 +1,200 @@
+<script>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";
+import { format_time } from "@gradio/utils";
+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;
+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>
+
+<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}>{format_time(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/dist/shared/VideoControls.svelte.d.ts

@@ -0,0 +1,22 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        videoElement: HTMLVideoElement;
+        showRedo?: boolean | undefined;
+        interactive?: boolean | undefined;
+        mode?: string | undefined;
+        handle_reset_value: () => void;
+        handle_trim_video: (videoBlob: Blob) => void;
+        processingVideo?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};