@gradio/gallery 0.12.2 → 0.13.0-beta.2

package/CHANGELOG.md

@@ -1,5 +1,44 @@
 # @gradio/gallery
 
+## 0.13.0-beta.2
+
+### Features
+
+- [#9339](https://github.com/gradio-app/gradio/pull/9339) [`4c8c6f2`](https://github.com/gradio-app/gradio/commit/4c8c6f2fe603081941c5fdc43f48a0632b9f31ad) - Ssr part 2.  Thanks @pngwn!
+- [#9250](https://github.com/gradio-app/gradio/pull/9250) [`350b0a5`](https://github.com/gradio-app/gradio/commit/350b0a5cafb9176f914f62e7c90de51d4352cc77) - Improve Icon Button consistency.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.9.0-beta.2
+- @gradio/upload@0.13.0-beta.2
+- @gradio/client@1.6.0-beta.2
+- @gradio/icons@0.8.0-beta.2
+- @gradio/statustracker@0.8.0-beta.2
+- @gradio/utils@0.7.0-beta.2
+- @gradio/file@0.10.0-beta.2
+- @gradio/image@0.16.0-beta.2
+- @gradio/video@0.11.0-beta.2
+
+## 0.13.0-beta.1
+
+### Dependency updates
+
+- @gradio/video@0.11.0-beta.1
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/image@0.16.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/file@0.9.4-beta.1
+
+## 0.13.0-beta.0
+
+### Features
+
+- [#9052](https://github.com/gradio-app/gradio/pull/9052) [`f3652eb`](https://github.com/gradio-app/gradio/commit/f3652ebe08211e12739df73c15fd97e5ff81276a) - Video gallery.  Thanks @dawoodkhan82!
+
 ## 0.12.2
 
 ### Fixes

package/Gallery.stories.svelte

@@ -86,6 +86,14 @@
 				},
 				caption: "A fast cheetah"
 			},
+			{
+				video: {
+					path: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
+					url: "https://gradio-builds.s3.amazonaws.com/demo-files/world.mp4",
+					orig_name: "world.mp4"
+				},
+				caption: "The world"
+			},
 			{
 				image: {
 					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
@@ -139,7 +147,7 @@
 	play={async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
 
-		const image = canvas.getByLabelText("Thumbnail 1 of 7");
+		const image = canvas.getByLabelText("Thumbnail 1 of 8");
 		await userEvent.click(image);
 		const expand_btn = canvas.getByRole("button", {
 			name: "View in full screen"

package/Gallery.test.ts

@@ -33,8 +33,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}
@@ -43,7 +43,30 @@ describe("Gallery", () => {
 		let item = getByTestId("detailed-image") as HTMLImageElement;
 		assert.equal(
 			item.src,
-			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
+		);
+	});
+
+	test("renders the video provided", async () => {
+		const { getByTestId } = await render(Gallery, {
+			show_label: true,
+			label: "Gallery",
+			loading_status: loading_status,
+			preview: true,
+			value: [
+				{
+					video: {
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
+					},
+					caption: null
+				}
+			]
+		});
+		let item = getByTestId("detailed-video") as HTMLVideoElement;
+		assert.equal(
+			item.src,
+			"https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/world.mp4"
 		);
 	});
 
@@ -56,8 +79,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}
@@ -69,8 +92,8 @@ describe("Gallery", () => {
 			value: [
 				{
 					image: {
-						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4",
-						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/video_component/files/a.mp4"
+						path: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg",
+						url: "https://raw.githubusercontent.com/gradio-app/gradio/main/gradio/demo/gallery_component/files/cheetah.jpg"
 					},
 					caption: null
 				}

package/Index.svelte

@@ -3,15 +3,17 @@
 </script>
 
 <script lang="ts">
+	import type { GalleryImage, GalleryVideo } from "./types";
 	import type { Gradio, ShareData, SelectData } from "@gradio/utils";
 	import { Block, UploadText } from "@gradio/atoms";
 	import Gallery from "./shared/Gallery.svelte";
 	import type { LoadingStatus } from "@gradio/statustracker";
 	import { StatusTracker } from "@gradio/statustracker";
-	import type { FileData } from "@gradio/client";
 	import { createEventDispatcher } from "svelte";
 	import { BaseFileUpload } from "@gradio/file";
 
+	type GalleryData = GalleryImage | GalleryVideo;
+
 	export let loading_status: LoadingStatus;
 	export let show_label: boolean;
 	export let label: string;
@@ -19,7 +21,8 @@
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: { image: FileData; caption: string | null }[] | null = null;
+	export let value: GalleryData[] | null = null;
+	export let file_types: string[] | null = ["image", "video"];
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
@@ -47,7 +50,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	$: no_value = Array.isArray(value) ? value.length === 0 : !value;
+	$: no_value = value === null ? true : value.length === 0;
 	$: selected_index, dispatch("prop_change", { selected_index });
 </script>
 
@@ -76,13 +79,17 @@
 			{label}
 			max_file_size={gradio.max_file_size}
 			file_count={"multiple"}
-			file_types={["image"]}
+			{file_types}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			on:upload={(e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-				value = files.map((x) => ({ image: x, caption: null }));
+				value = files.map((x) =>
+					x.mime_type?.includes("video")
+						? { video: x, caption: null }
+						: { image: x, caption: null }
+				);
 				gradio.dispatch("upload", value);
 			}}
 			on:error={({ detail }) => {
@@ -113,7 +120,7 @@
 			{show_share_button}
 			{show_download_button}
 			i18n={gradio.i18n}
-			_fetch={gradio.client.fetch}
+			_fetch={(...args) => gradio.client.fetch(...args)}
 			{show_fullscreen_button}
 		/>
 	{/if}

package/dist/Index.svelte

@@ -14,6 +14,7 @@ export let elem_id = "";
 export let elem_classes = [];
 export let visible = true;
 export let value = null;
+export let file_types = ["image", "video"];
 export let container = true;
 export let scale = null;
 export let min_width = void 0;
@@ -31,7 +32,7 @@ export let gradio;
 export let show_fullscreen_button = true;
 const dispatch = createEventDispatcher();
 $:
-  no_value = Array.isArray(value) ? value.length === 0 : !value;
+  no_value = value === null ? true : value.length === 0;
 $:
   selected_index, dispatch("prop_change", { selected_index });
 </script>
@@ -61,13 +62,17 @@ $:
 			{label}
 			max_file_size={gradio.max_file_size}
 			file_count={"multiple"}
-			file_types={["image"]}
+			{file_types}
 			i18n={gradio.i18n}
-			upload={gradio.client.upload}
-			stream_handler={gradio.client.stream}
+			upload={(...args) => gradio.client.upload(...args)}
+			stream_handler={(...args) => gradio.client.stream(...args)}
 			on:upload={(e) => {
 				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
-				value = files.map((x) => ({ image: x, caption: null }));
+				value = files.map((x) =>
+					x.mime_type?.includes("video")
+						? { video: x, caption: null }
+						: { image: x, caption: null }
+				);
 				gradio.dispatch("upload", value);
 			}}
 			on:error={({ detail }) => {
@@ -98,7 +103,7 @@ $:
 			{show_share_button}
 			{show_download_button}
 			i18n={gradio.i18n}
-			_fetch={gradio.client.fetch}
+			_fetch={(...args) => gradio.client.fetch(...args)}
 			{show_fullscreen_button}
 		/>
 	{/if}

package/dist/Index.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 export { default as BaseGallery } from "./shared/Gallery.svelte";
+import type { GalleryImage, GalleryVideo } from "./types";
 import type { Gradio, ShareData, SelectData } from "@gradio/utils";
 import type { LoadingStatus } from "@gradio/statustracker";
-import type { FileData } from "@gradio/client";
 declare const __propDef: {
     props: {
         loading_status: LoadingStatus;
@@ -12,10 +12,8 @@ declare const __propDef: {
         elem_id?: string | undefined;
         elem_classes?: string[] | undefined;
         visible?: boolean | undefined;
-        value?: ({
-            image: FileData;
-            caption: string | null;
-        }[] | null) | undefined;
+        value?: ((GalleryImage | GalleryVideo)[] | null) | undefined;
+        file_types?: (string[] | null) | undefined;
         container?: boolean | undefined;
         scale?: (number | null) | undefined;
         min_width?: number | undefined;
@@ -30,14 +28,8 @@ declare const __propDef: {
         interactive: boolean;
         show_download_button?: boolean | undefined;
         gradio: Gradio<{
-            change: {
-                image: FileData;
-                caption: string | null;
-            }[] | null;
-            upload: {
-                image: FileData;
-                caption: string | null;
-            }[] | null;
+            change: (GalleryImage | GalleryVideo)[] | null;
+            upload: (GalleryImage | GalleryVideo)[] | null;
             select: SelectData;
             share: ShareData;
             error: string;

package/dist/shared/Gallery.svelte

@@ -1,6 +1,7 @@
 <script>import { BlockLabel, Empty, ShareButton } from "@gradio/atoms";
 import { ModifyUpload } from "@gradio/upload";
 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";
@@ -9,11 +10,12 @@ import {
   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 { IconButton, IconButtonWrapper } from "@gradio/atoms";
 export let show_label = true;
 export let label;
 export let value = null;
@@ -39,10 +41,17 @@ $:
   was_reset = value == null || value.length === 0 ? true : was_reset;
 let resolved_value = null;
 $:
-  resolved_value = value == null ? null : value.map((data) => ({
-    image: data.image,
-    caption: data.caption
-  }));
+  resolved_value = value == null ? null : value.map((data) => {
+    if ("video" in data) {
+      return {
+        video: data.video,
+        caption: data.caption
+      };
+    } else if ("image" in data) {
+      return { image: data.image, caption: data.caption };
+    }
+    return {};
+  });
 let prev_value = value;
 if (selected_index == null && preview && value?.length) {
   selected_index = 0;
@@ -148,7 +157,7 @@ async function download(file_url, name) {
   URL.revokeObjectURL(url);
 }
 $:
-  selected_image = selected_index != null && resolved_value != null ? resolved_value[selected_index] : null;
+  selected_media = selected_index != null && resolved_value != null ? resolved_value[selected_index] : null;
 onMount(() => {
   document.addEventListener("fullscreenchange", () => {
     is_full_screen = !!document.fullscreenElement;
@@ -172,19 +181,22 @@ const toggle_full_screen = async () => {
 	<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"
 				class:minimal={mode === "minimal"}
 			>
-				<div class="icon-buttons">
+				<IconButtonWrapper>
 					{#if show_download_button}
 						<IconButton
 							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;
 								}
@@ -221,27 +233,42 @@ const toggle_full_screen = async () => {
 							on:click={() => (selected_index = null)}
 						/>
 					{/if}
-				</div>
+				</IconButtonWrapper>
 				<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
@@ -249,7 +276,7 @@ const toggle_full_screen = async () => {
 					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)}
@@ -260,13 +287,26 @@ const toggle_full_screen = async () => {
 								" 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>
@@ -286,24 +326,22 @@ const toggle_full_screen = async () => {
 			>
 				{#if interactive}
 					<div class="icon-button">
-						<ModifyUpload
-							{i18n}
-							absolute={false}
-							on:clear={() => (value = null)}
-						/>
-					</div>
-				{/if}
-				{#if show_share_button}
-					<div class="icon-button">
-						<ShareButton
-							{i18n}
-							on:share
-							on:error
-							value={resolved_value}
-							formatter={format_gallery_for_sharing}
-						/>
+						<ModifyUpload {i18n} on:clear={() => (value = [])} />
 					</div>
 				{/if}
+				<IconButtonWrapper>
+					{#if show_share_button}
+						<div class="icon-button">
+							<ShareButton
+								{i18n}
+								on:share
+								on:error
+								value={resolved_value}
+								formatter={format_gallery_for_sharing}
+							/>
+						</div>
+					{/if}
+				</IconButtonWrapper>
 				{#each resolved_value as entry, i}
 					<button
 						class="thumbnail-item thumbnail-lg"
@@ -311,13 +349,26 @@ const toggle_full_screen = async () => {
 						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}
@@ -382,12 +433,13 @@ const toggle_full_screen = async () => {
 		}
 	}
 
-	.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;
@@ -397,6 +449,14 @@ const toggle_full_screen = async () => {
 		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);
 	}
@@ -458,6 +518,23 @@ const toggle_full_screen = async () => {
 		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);
@@ -465,7 +542,6 @@ const toggle_full_screen = async () => {
 		width: var(--size-9);
 		height: var(--size-9);
 	}
-
 	.thumbnail-small.selected {
 		--ring-color: var(--color-accent);
 		transform: scale(1);
@@ -525,19 +601,8 @@ const toggle_full_screen = async () => {
 	}
 
 	.icon-button {
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		z-index: var(--layer-1);
-	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		right: 0;
-		gap: var(--size-1);
-		z-index: 1;
-		margin: var(--size-1);
+		top: 1px;
+		right: 1px;
 	}
 
 	.grid-wrap.minimal {

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

@@ -1,15 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { SelectData } from "@gradio/utils";
-import { FileData } from "@gradio/client";
+import type { GalleryImage, GalleryVideo } from "../types";
 import type { I18nFormatter } from "@gradio/utils";
 declare const __propDef: {
     props: {
         show_label?: boolean | undefined;
         label: string;
-        value?: ({
-            image: FileData;
-            caption: string | null;
-        }[] | null) | undefined;
+        value?: ((GalleryImage | GalleryVideo)[] | null) | undefined;
         columns?: number | number[] | undefined;
         rows?: number | number[] | undefined;
         height?: (number | "auto") | undefined;

package/dist/types.d.ts

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

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.12.2",
+  "version": "0.13.0-beta.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,14 +8,15 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.8.1",
-    "@gradio/icons": "^0.7.2",
-    "@gradio/image": "^0.15.1",
-    "@gradio/statustracker": "^0.7.6",
-    "@gradio/client": "^1.5.2",
-    "@gradio/utils": "^0.6.1",
-    "@gradio/file": "^0.9.4",
-    "@gradio/upload": "^0.12.4"
+    "@gradio/atoms": "^0.9.0-beta.2",
+    "@gradio/client": "^1.6.0-beta.2",
+    "@gradio/image": "^0.16.0-beta.2",
+    "@gradio/icons": "^0.8.0-beta.2",
+    "@gradio/statustracker": "^0.8.0-beta.2",
+    "@gradio/upload": "^0.13.0-beta.2",
+    "@gradio/utils": "^0.7.0-beta.2",
+    "@gradio/video": "^0.11.0-beta.2",
+    "@gradio/file": "^0.10.0-beta.2"
   },
   "devDependencies": {
     "@gradio/preview": "^0.11.1"

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 { IconButton, IconButtonWrapper } 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,19 +240,22 @@
 	<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"
 				class:minimal={mode === "minimal"}
 			>
-				<div class="icon-buttons">
+				<IconButtonWrapper>
 					{#if show_download_button}
 						<IconButton
 							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;
 								}
@@ -279,27 +292,42 @@
 							on:click={() => (selected_index = null)}
 						/>
 					{/if}
-				</div>
+				</IconButtonWrapper>
 				<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>
@@ -344,24 +385,22 @@
 			>
 				{#if interactive}
 					<div class="icon-button">
-						<ModifyUpload
-							{i18n}
-							absolute={false}
-							on:clear={() => (value = null)}
-						/>
-					</div>
-				{/if}
-				{#if show_share_button}
-					<div class="icon-button">
-						<ShareButton
-							{i18n}
-							on:share
-							on:error
-							value={resolved_value}
-							formatter={format_gallery_for_sharing}
-						/>
+						<ModifyUpload {i18n} on:clear={() => (value = [])} />
 					</div>
 				{/if}
+				<IconButtonWrapper>
+					{#if show_share_button}
+						<div class="icon-button">
+							<ShareButton
+								{i18n}
+								on:share
+								on:error
+								value={resolved_value}
+								formatter={format_gallery_for_sharing}
+							/>
+						</div>
+					{/if}
+				</IconButtonWrapper>
 				{#each resolved_value as entry, i}
 					<button
 						class="thumbnail-item thumbnail-lg"
@@ -369,13 +408,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 +492,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 +508,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 +577,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 +601,6 @@
 		width: var(--size-9);
 		height: var(--size-9);
 	}
-
 	.thumbnail-small.selected {
 		--ring-color: var(--color-accent);
 		transform: scale(1);
@@ -583,19 +660,8 @@
 	}
 
 	.icon-button {
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		z-index: var(--layer-1);
-	}
-
-	.icon-buttons {
-		display: flex;
-		position: absolute;
-		right: 0;
-		gap: var(--size-1);
-		z-index: 1;
-		margin: var(--size-1);
+		top: 1px;
+		right: 1px;
 	}
 
 	.grid-wrap.minimal {

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;
+}