@gradio/video 0.1.0-beta.5

package/example/Video.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import { playable } from "../shared";
+	import { onMount } from "svelte";
+
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export let value: string;
+	export let samples_dir: string;
+	let video: HTMLVideoElement;
+
+	async function init(): Promise<void> {
+		video.muted = true;
+		video.playsInline = true;
+		video.controls = false;
+		video.setAttribute("muted", "");
+
+		await video.play();
+		video.pause();
+	}
+
+	onMount(() => {
+		init();
+	});
+</script>
+
+{#if playable()}
+	<video
+		muted
+		playsinline
+		bind:this={video}
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+		on:mouseover={video.play}
+		on:mouseout={video.pause}
+		src={samples_dir + value}
+	/>
+{:else}
+	<div>{value}</div>
+{/if}
+
+<style>
+	video {
+		flex: none;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		max-width: none;
+	}
+
+	video:hover,
+	video.selected {
+		border-color: var(--border-color-accent);
+	}
+	.table {
+		margin: 0 auto;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.gallery {
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+</style>

package/example/index.ts

@@ -0,0 +1 @@
+export { default } from "./Video.svelte";

package/interactive/InteractiveVideo.svelte

@@ -0,0 +1,130 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { Gradio } from "@gradio/utils";
+	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
+	import { Block } from "@gradio/atoms";
+	import Video from "./Video.svelte";
+	import { UploadText } from "@gradio/atoms";
+
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: { video: FileData; subtitles: FileData | null } | null =
+		null;
+	let old_value: { video: FileData; subtitles: FileData | null } | null = null;
+
+	export let label: string;
+	export let source: "upload" | "webcam";
+	export let root: string;
+	export let root_url: null | string;
+	export let show_label: boolean;
+	export let loading_status: LoadingStatus;
+	export let height: number | undefined;
+	export let width: number | undefined;
+	export let mirror_webcam: boolean;
+	export let include_audio: boolean;
+	export let container = false;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let autoplay = false;
+	export let gradio: Gradio<{
+		change: never;
+		clear: never;
+		play: never;
+		pause: never;
+		upload: never;
+		stop: never;
+		end: never;
+		start_recording: never;
+		stop_recording: never;
+	}>;
+
+	let _video: FileData | null = null;
+	let _subtitle: FileData | null = null;
+
+	$: {
+		if (value != null) {
+			_video = normalise_file(value.video, root, root_url);
+			_subtitle = normalise_file(value.subtitles, root, root_url);
+		} else {
+			_video = null;
+			_subtitle = null;
+		}
+	}
+
+	let dragging = false;
+
+	function handle_change({ detail }: CustomEvent<FileData | null>): void {
+		if (detail != null) {
+			value = { video: detail, subtitles: null } as {
+				video: FileData;
+				subtitles: FileData | null;
+			} | null;
+		} else {
+			value = null;
+		}
+	}
+
+	$: {
+		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+	}
+</script>
+
+<Block
+	{visible}
+	variant={value === null && source === "upload" ? "dashed" : "solid"}
+	border_mode={dragging ? "focus" : "base"}
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{height}
+	{width}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+
+	<Video
+		value={_video}
+		subtitle={_subtitle}
+		on:change={handle_change}
+		on:drag={({ detail }) => (dragging = detail)}
+		on:error={({ detail }) => {
+			loading_status = loading_status || {};
+			loading_status.status = "error";
+			loading_status.message = detail;
+		}}
+		{label}
+		{show_label}
+		{source}
+		{mirror_webcam}
+		{include_audio}
+		{autoplay}
+		{root}
+		on:clear={() => gradio.dispatch("clear")}
+		on:play={() => gradio.dispatch("play")}
+		on:pause={() => gradio.dispatch("pause")}
+		on:upload={() => gradio.dispatch("upload")}
+		on:stop={() => gradio.dispatch("stop")}
+		on:end={() => gradio.dispatch("end")}
+		on:start_recording={() => gradio.dispatch("start_recording")}
+		on:stop_recording={() => gradio.dispatch("stop_recording")}
+		i18n={gradio.i18n}
+	>
+		<UploadText i18n={gradio.i18n} type="video" />
+	</Video>
+</Block>

package/interactive/Video.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/upload";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Webcam } from "@gradio/image/interactive";
+	import { Video } from "@gradio/icons";
+
+	import { prettyBytes, playable } from "../shared/utils";
+	import Player from "../shared/Player.svelte";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let value: FileData | null = null;
+	export let subtitle: FileData | null = null;
+	export let source: string;
+	export let label: string | undefined = undefined;
+	export let show_label = true;
+	export let mirror_webcam = false;
+	export let include_audio: boolean;
+	export let autoplay: boolean;
+	export let root: string;
+	export let i18n: I18nFormatter;
+
+	const dispatch = createEventDispatcher<{
+		change: any;
+		clear: undefined;
+		play: undefined;
+		pause: undefined;
+		end: undefined;
+		drag: boolean;
+		error: string;
+		upload: FileData;
+		start_recording: undefined;
+		stop_recording: undefined;
+	}>();
+
+	function handle_load({ detail }: CustomEvent<FileData | null>): void {
+		value = detail;
+		dispatch("change", detail);
+		dispatch("upload", detail!);
+	}
+
+	function handle_clear({ detail }: CustomEvent<FileData | null>): void {
+		value = null;
+		dispatch("change", detail);
+		dispatch("clear");
+	}
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={Video} label={label || "Video"} />
+{#if value === null}
+	{#if source === "upload"}
+		<Upload
+			bind:dragging
+			filetype="video/x-m4v,video/*"
+			on:load={handle_load}
+			{root}
+		>
+			<slot />
+		</Upload>
+	{:else if source === "webcam"}
+		<Webcam
+			{mirror_webcam}
+			{include_audio}
+			mode="video"
+			on:error
+			on:capture={({ detail }) => dispatch("change", detail)}
+			on:start_recording
+			on:stop_recording
+			{i18n}
+		/>
+	{/if}
+{:else}
+	<ModifyUpload {i18n} on:clear={handle_clear} />
+	{#if playable()}
+		{#key value?.data}
+			<Player
+				{autoplay}
+				src={value.data}
+				subtitle={subtitle?.data}
+				on:play
+				on:pause
+				on:stop
+				on:end
+				mirror={mirror_webcam && source === "webcam"}
+				{label}
+			/>
+		{/key}
+	{:else if value.size}
+		<div class="file-name">{value.name}</div>
+		<div class="file-size">
+			{prettyBytes(value.size)}
+		</div>
+	{/if}
+{/if}
+
+<style>
+	.file-name {
+		padding: var(--size-6);
+		font-size: var(--text-xxl);
+		word-break: break-all;
+	}
+
+	.file-size {
+		padding: var(--size-2);
+		font-size: var(--text-xl);
+	}
+</style>

package/interactive/index.ts

@@ -0,0 +1 @@
+export { default } from "./InteractiveVideo.svelte";

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@gradio/video",
+  "version": "0.1.0-beta.5",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "main": "index.svelte",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "^0.2.0-beta.3",
+    "@gradio/icons": "^0.2.0-beta.0",
+    "@gradio/image": "^0.3.0-beta.5",
+    "@gradio/statustracker": "^0.3.0-beta.5",
+    "@gradio/upload": "^0.3.0-beta.3",
+    "@gradio/utils": "^0.2.0-beta.3"
+  },
+  "main_changeset": true,
+  "exports": {
+    "./package.json": "./package.json",
+    "./interactive": "./interactive/index.ts",
+    "./static": "./static/index.ts",
+    "./example": "./example/index.ts"
+  }
+}

package/shared/Player.svelte

@@ -0,0 +1,231 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Play, Pause, Maximise, Undo } from "@gradio/icons";
+	import { loaded } from "./utils";
+
+	export let src: string;
+	export let subtitle: string | null = null;
+	export let mirror: boolean;
+	export let autoplay: boolean;
+	export let label = "test";
+
+	const dispatch = createEventDispatcher<{
+		play: undefined;
+		pause: undefined;
+		stop: undefined;
+		end: undefined;
+	}>();
+
+	let time = 0;
+	let duration: number;
+	let paused = true;
+	let video: HTMLVideoElement;
+
+	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 format(seconds: number): string {
+		if (isNaN(seconds) || !isFinite(seconds)) return "...";
+
+		const minutes = Math.floor(seconds / 60);
+		let _seconds: number | string = Math.floor(seconds % 60);
+		if (_seconds < 10) _seconds = `0${_seconds}`;
+
+		return `${minutes}:${_seconds}`;
+	}
+
+	function handle_end(): void {
+		dispatch("stop");
+		dispatch("end");
+	}
+
+	function open_full_screen(): void {
+		video.requestFullscreen();
+	}
+</script>
+
+<div class="wrap">
+	<video
+		{src}
+		preload="auto"
+		on:click={play_pause}
+		on:play
+		on:pause
+		on:ended={handle_end}
+		bind:currentTime={time}
+		bind:duration
+		bind:paused
+		bind:this={video}
+		class:mirror
+		use:loaded={{ autoplay }}
+		data-testid={`${label}-player`}
+	>
+		<track kind="captions" src={subtitle} default />
+	</video>
+
+	<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)} / {format(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>
+
+<style lang="postcss">
+	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);
+	}
+
+	video {
+		position: inherit;
+		background-color: black;
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+	}
+
+	.mirror {
+		transform: scaleX(-1);
+	}
+
+	.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);
+	}
+</style>

package/shared/index.ts

@@ -0,0 +1,2 @@
+export * from "./utils";
+export { default as Player } from "./Player.svelte";

package/shared/utils.ts

@@ -0,0 +1,38 @@
+import type { ActionReturn } from "svelte/action";
+
+export const prettyBytes = (bytes: number): string => {
+	let units = ["B", "KB", "MB", "GB", "PB"];
+	let i = 0;
+	while (bytes > 1024) {
+		bytes /= 1024;
+		i++;
+	}
+	let unit = units[i];
+	return bytes.toFixed(1) + " " + unit;
+};
+
+export const playable = (): boolean => {
+	// TODO: Fix this
+	// let video_element = document.createElement("video");
+	// let mime_type = mime.lookup(filename);
+	// return video_element.canPlayType(mime_type) != "";
+	return true; // FIX BEFORE COMMIT - mime import causing issues
+};
+
+export function loaded(
+	node: HTMLVideoElement,
+	{ autoplay }: { autoplay: boolean }
+): ActionReturn {
+	async function handle_playback(): Promise<void> {
+		if (!autoplay) return;
+		await node.play();
+	}
+
+	node.addEventListener("loadeddata", handle_playback);
+
+	return {
+		destroy(): void {
+			node.removeEventListener("loadeddata", handle_playback);
+		}
+	};
+}