@gradio/gallery 0.12.1 → 0.13.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.12.1",
+  "version": "0.13.0-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,24 +8,36 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/client": "^1.5.1",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/image": "^0.15.0",
-    "@gradio/upload": "^0.12.3",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/file": "^0.9.3",
-    "@gradio/statustracker": "^0.7.5"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/client": "^1.6.0-beta.1",
+    "@gradio/image": "^0.16.0-beta.1",
+    "@gradio/statustracker": "^0.8.0-beta.1",
+    "@gradio/icons": "^0.8.0-beta.1",
+    "@gradio/upload": "^0.12.4-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1",
+    "@gradio/video": "^0.11.0-beta.1",
+    "@gradio/file": "^0.9.4-beta.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1-beta.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
   "exports": {
-    ".": "./Index.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
     "./package.json": "./package.json",
-    "./base": "./shared/Gallery.svelte"
+    "./base": {
+      "gradio": "./shared/Gallery.svelte",
+      "svelte": "./dist/shared/Gallery.svelte",
+      "types": "./dist/shared/Gallery.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
   },
   "repository": {
     "type": "git",

package/shared/Gallery.svelte

@@ -3,28 +3,30 @@
 	import { ModifyUpload } from "@gradio/upload";
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
+	import { Video } from "@gradio/video/shared";
 	import { dequal } from "dequal";
 	import { createEventDispatcher, onMount } from "svelte";
 	import { tick } from "svelte";
+	import type { GalleryImage, GalleryVideo } from "../types";
 
 	import {
 		Download,
 		Image as ImageIcon,
 		Maximize,
 		Minimize,
-		Clear
+		Clear,
+		Play
 	} from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import { IconButton } from "@gradio/atoms";
 	import type { I18nFormatter } from "@gradio/utils";
 
-	type GalleryImage = { image: FileData; caption: string | null };
-	type GalleryData = GalleryImage[];
+	type GalleryData = GalleryImage | GalleryVideo;
 
 	export let show_label = true;
 	export let label: string;
-	export let value: GalleryData | null = null;
+	export let value: GalleryData[] | null = null;
 	export let columns: number | number[] | undefined = [2];
 	export let rows: number | number[] | undefined = undefined;
 	export let height: number | "auto" = "auto";
@@ -54,16 +56,24 @@
 
 	$: was_reset = value == null || value.length === 0 ? true : was_reset;
 
-	let resolved_value: GalleryData | null = null;
+	let resolved_value: GalleryData[] | null = null;
+
 	$: resolved_value =
 		value == null
 			? null
-			: value.map((data) => ({
-					image: data.image as FileData,
-					caption: data.caption
-				}));
-
-	let prev_value: GalleryData | null = value;
+			: (value.map((data) => {
+					if ("video" in data) {
+						return {
+							video: data.video as FileData,
+							caption: data.caption
+						};
+					} else if ("image" in data) {
+						return { image: data.image as FileData, caption: data.caption };
+					}
+					return {};
+				}) as GalleryData[]);
+
+	let prev_value: GalleryData[] | null = value;
 	if (selected_index == null && preview && value?.length) {
 		selected_index = 0;
 	}
@@ -201,7 +211,7 @@
 		URL.revokeObjectURL(url);
 	}
 
-	$: selected_image =
+	$: selected_media =
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
 			: null;
@@ -230,7 +240,7 @@
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
 	<div class="gallery-container" bind:this={gallery_container}>
-		{#if selected_image && allow_preview}
+		{#if selected_media && allow_preview}
 			<button
 				on:keydown={on_keydown}
 				class="preview"
@@ -242,7 +252,10 @@
 							Icon={Download}
 							label={i18n("common.download")}
 							on:click={() => {
-								const image = selected_image?.image;
+								const image =
+									"image" in selected_media
+										? selected_media?.image
+										: selected_media?.video;
 								if (image == null) {
 									return;
 								}
@@ -281,25 +294,40 @@
 					{/if}
 				</div>
 				<button
-					class="image-button"
-					on:click={(event) => handle_preview_click(event)}
-					style="height: calc(100% - {selected_image.caption
+					class="media-button"
+					on:click={"image" in selected_media
+						? (event) => handle_preview_click(event)
+						: null}
+					style="height: calc(100% - {selected_media.caption
 						? '80px'
 						: '60px'})"
 					aria-label="detailed view of selected image"
 				>
-					<Image
-						data-testid="detailed-image"
-						src={selected_image.image.url}
-						alt={selected_image.caption || ""}
-						title={selected_image.caption || null}
-						class={selected_image.caption && "with-caption"}
-						loading="lazy"
-					/>
+					{#if "image" in selected_media}
+						<Image
+							data-testid="detailed-image"
+							src={selected_media.image.url}
+							alt={selected_media.caption || ""}
+							title={selected_media.caption || null}
+							class={selected_media.caption && "with-caption"}
+							loading="lazy"
+						/>
+					{:else}
+						<Video
+							src={selected_media.video.url}
+							data-testid={"detailed-video"}
+							alt={selected_media.caption || ""}
+							loading="lazy"
+							loop={false}
+							is_stream={false}
+							muted={false}
+							controls={true}
+						/>
+					{/if}
 				</button>
-				{#if selected_image?.caption}
+				{#if selected_media?.caption}
 					<caption class="caption">
-						{selected_image.caption}
+						{selected_media.caption}
 					</caption>
 				{/if}
 				<div
@@ -307,7 +335,7 @@
 					class="thumbnails scroll-hide"
 					data-testid="container_el"
 				>
-					{#each resolved_value as image, i}
+					{#each resolved_value as media, i}
 						<button
 							bind:this={el[i]}
 							on:click={() => (selected_index = i)}
@@ -318,13 +346,26 @@
 								" of " +
 								resolved_value.length}
 						>
-							<Image
-								src={image.image.url}
-								title={image.caption || null}
-								data-testid={"thumbnail " + (i + 1)}
-								alt=""
-								loading="lazy"
-							/>
+							{#if "image" in media}
+								<Image
+									src={media.image.url}
+									title={media.caption || null}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+								/>
+							{:else}
+								<Play />
+								<Video
+									src={media.video.url}
+									title={media.caption || null}
+									is_stream={false}
+									data-testid={"thumbnail " + (i + 1)}
+									alt=""
+									loading="lazy"
+									loop={false}
+								/>
+							{/if}
 						</button>
 					{/each}
 				</div>
@@ -347,7 +388,7 @@
 						<ModifyUpload
 							{i18n}
 							absolute={false}
-							on:clear={() => (value = null)}
+							on:clear={() => (value = [])}
 						/>
 					</div>
 				{/if}
@@ -369,13 +410,26 @@
 						on:click={() => (selected_index = i)}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
-						<Image
-							alt={entry.caption || ""}
-							src={typeof entry.image === "string"
-								? entry.image
-								: entry.image.url}
-							loading="lazy"
-						/>
+						{#if "image" in entry}
+							<Image
+								alt={entry.caption || ""}
+								src={typeof entry.image === "string"
+									? entry.image
+									: entry.image.url}
+								loading="lazy"
+							/>
+						{:else}
+							<Play />
+							<Video
+								src={entry.video.url}
+								title={entry.caption || null}
+								is_stream={false}
+								data-testid={"thumbnail " + (i + 1)}
+								alt=""
+								loading="lazy"
+								loop={false}
+							/>
+						{/if}
 						{#if entry.caption}
 							<div class="caption-label">
 								{entry.caption}
@@ -440,12 +494,13 @@
 		}
 	}
 
-	.image-button {
+	.media-button {
 		height: calc(100% - 60px);
 		width: 100%;
 		display: flex;
 	}
-	.image-button :global(img) {
+	.media-button :global(img),
+	.media-button :global(video) {
 		width: var(--size-full);
 		height: var(--size-full);
 		object-fit: contain;
@@ -455,6 +510,14 @@
 		width: var(--size-full);
 		height: var(--size-full);
 	}
+	.thumbnails :global(svg) {
+		position: absolute;
+		top: var(--size-2);
+		left: var(--size-2);
+		width: 50%;
+		height: 50%;
+		opacity: 50%;
+	}
 	.preview :global(img.with-caption) {
 		height: var(--size-full);
 	}
@@ -516,6 +579,23 @@
 		border-color: var(--color-accent);
 	}
 
+	.thumbnail-item :global(svg) {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		width: 50%;
+		height: 50%;
+		opacity: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+	.thumbnail-item :global(video) {
+		width: var(--size-full);
+		height: var(--size-full);
+		overflow: hidden;
+		object-fit: cover;
+	}
+
 	.thumbnail-small {
 		flex: none;
 		transform: scale(0.9);
@@ -523,7 +603,6 @@
 		width: var(--size-9);
 		height: var(--size-9);
 	}
-
 	.thumbnail-small.selected {
 		--ring-color: var(--color-accent);
 		transform: scale(1);

package/types.ts

@@ -0,0 +1,11 @@
+import type { FileData } from "@gradio/client";
+
+export interface GalleryImage {
+	image: FileData;
+	caption: string | null;
+}
+
+export interface GalleryVideo {
+	video: FileData;
+	caption: string | null;
+}