@gradio/gallery 0.11.4 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @gradio/gallery
 
+## 0.12.1
+
+### Features
+
+- [#9118](https://github.com/gradio-app/gradio/pull/9118) [`e1c404d`](https://github.com/gradio-app/gradio/commit/e1c404da1143fb52b659d03e028bdba1badf443d) - setup npm-previews of all packages.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.6.0
+- @gradio/upload@0.12.3
+- @gradio/atoms@0.8.0
+- @gradio/client@1.5.1
+- @gradio/statustracker@0.7.5
+- @gradio/icons@0.7.1
+- @gradio/image@0.15.0
+- @gradio/file@0.9.3
+
+## 0.12.0
+
+### Features
+
+- [#8964](https://github.com/gradio-app/gradio/pull/8964) [`bf6bbd9`](https://github.com/gradio-app/gradio/commit/bf6bbd971acddbf78f03bea431ed7d1e0003ccf9) - Add min/max-imize button to gr.Image and gr.Gallery.  Thanks @hannahblair!
+
+### Dependency updates
+
+- @gradio/atoms@0.7.9
+- @gradio/statustracker@0.7.4
+- @gradio/client@1.5.0
+- @gradio/icons@0.7.0
+- @gradio/upload@0.12.2
+- @gradio/image@0.14.0
+- @gradio/file@0.9.2
+
 ## 0.11.4
 
 ### Dependency updates

package/Gallery.stories.svelte

@@ -2,6 +2,8 @@
 	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import Gallery from "./Index.svelte";
 	import { allModes } from "../storybook/modes";
+	import { within } from "@testing-library/dom";
+	import { userEvent } from "@storybook/test";
 
 	export const meta = {
 		title: "Components/Gallery",
@@ -134,6 +136,16 @@
 <Story
 	name="Gallery with label"
 	args={{ label: "My Cheetah Gallery", show_label: true }}
+	play={async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		const image = canvas.getByLabelText("Thumbnail 1 of 7");
+		await userEvent.click(image);
+		const expand_btn = canvas.getByRole("button", {
+			name: "View in full screen"
+		});
+		await userEvent.click(expand_btn);
+	}}
 />
 <Story
 	name="Gallery without label"

package/Gallery.test.ts

@@ -1,6 +1,6 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
 import { cleanup, render } from "@gradio/tootils";
-import { setupi18n } from "../app/src/i18n";
+import { setupi18n } from "../core/src/i18n";
 
 import Gallery from "./Index.svelte";
 import type { LoadingStatus } from "@gradio/statustracker";

package/Index.svelte

@@ -43,6 +43,7 @@
 		prop_change: Record<string, any>;
 		clear_status: LoadingStatus;
 	}>;
+	export let show_fullscreen_button = true;
 
 	const dispatch = createEventDispatcher();
 
@@ -113,6 +114,7 @@
 			{show_download_button}
 			i18n={gradio.i18n}
 			_fetch={gradio.client.fetch}
+			{show_fullscreen_button}
 		/>
 	{/if}
 </Block>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/gallery",
-  "version": "0.11.4",
+  "version": "0.12.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -8,17 +8,17 @@
   "private": false,
   "dependencies": {
     "dequal": "^2.0.2",
-    "@gradio/atoms": "^0.7.8",
-    "@gradio/client": "^1.4.0",
-    "@gradio/icons": "^0.6.1",
-    "@gradio/image": "^0.13.1",
-    "@gradio/utils": "^0.5.2",
-    "@gradio/upload": "^0.12.1",
-    "@gradio/statustracker": "^0.7.3",
-    "@gradio/file": "^0.9.1"
+    "@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"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.10.2"
+    "@gradio/preview": "^0.11.0"
   },
   "main": "./Index.svelte",
   "main_changeset": true,
@@ -26,5 +26,10 @@
     ".": "./Index.svelte",
     "./package.json": "./package.json",
     "./base": "./shared/Gallery.svelte"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/gallery"
   }
 }

package/shared/Gallery.svelte

@@ -4,10 +4,16 @@
 	import type { SelectData } from "@gradio/utils";
 	import { Image } from "@gradio/image/shared";
 	import { dequal } from "dequal";
-	import { createEventDispatcher } from "svelte";
+	import { createEventDispatcher, onMount } from "svelte";
 	import { tick } from "svelte";
 
-	import { Download, Image as ImageIcon } from "@gradio/icons";
+	import {
+		Download,
+		Image as ImageIcon,
+		Maximize,
+		Minimize,
+		Clear
+	} from "@gradio/icons";
 	import { FileData } from "@gradio/client";
 	import { format_gallery_for_sharing } from "./utils";
 	import { IconButton } from "@gradio/atoms";
@@ -33,6 +39,10 @@
 	export let interactive: boolean;
 	export let _fetch: typeof fetch;
 	export let mode: "normal" | "minimal" = "normal";
+	export let show_fullscreen_button = true;
+
+	let is_full_screen = false;
+	let gallery_container: HTMLElement;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -195,6 +205,20 @@
 		selected_index != null && resolved_value != null
 			? resolved_value[selected_index]
 			: null;
+
+	onMount(() => {
+		document.addEventListener("fullscreenchange", () => {
+			is_full_screen = !!document.fullscreenElement;
+		});
+	});
+
+	const toggle_full_screen = async (): Promise<void> => {
+		if (!is_full_screen) {
+			await gallery_container.requestFullscreen();
+		} else {
+			await document.exitFullscreen();
+		}
+	};
 </script>
 
 <svelte:window bind:innerHeight={window_height} />
@@ -205,15 +229,15 @@
 {#if value == null || resolved_value == null || resolved_value.length === 0}
 	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
 {:else}
-	{#if selected_image && allow_preview}
-		<button
-			on:keydown={on_keydown}
-			class="preview"
-			class:minimal={mode === "minimal"}
-		>
-			<div class="icon-buttons">
-				{#if show_download_button}
-					<div class="download-button-container">
+	<div class="gallery-container" bind:this={gallery_container}>
+		{#if selected_image && allow_preview}
+			<button
+				on:keydown={on_keydown}
+				class="preview"
+				class:minimal={mode === "minimal"}
+			>
+				<div class="icon-buttons">
+					{#if show_download_button}
 						<IconButton
 							Icon={Download}
 							label={i18n("common.download")}
@@ -228,117 +252,156 @@
 								}
 							}}
 						/>
-					</div>
-				{/if}
+					{/if}
 
-				<ModifyUpload
-					{i18n}
-					absolute={false}
-					on:clear={() => (selected_index = null)}
-				/>
-			</div>
-			<button
-				class="image-button"
-				on:click={(event) => handle_preview_click(event)}
-				style="height: calc(100% - {selected_image.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 show_fullscreen_button && !is_full_screen}
+						<IconButton
+							Icon={is_full_screen ? Minimize : Maximize}
+							label={is_full_screen
+								? "Exit full screen"
+								: "View in full screen"}
+							on:click={toggle_full_screen}
+						/>
+					{/if}
+
+					{#if show_fullscreen_button && is_full_screen}
+						<IconButton
+							Icon={Minimize}
+							label="Exit full screen"
+							on:click={toggle_full_screen}
+						/>
+					{/if}
+
+					{#if !is_full_screen}
+						<IconButton
+							Icon={Clear}
+							label="Close"
+							on:click={() => (selected_index = null)}
+						/>
+					{/if}
+				</div>
+				<button
+					class="image-button"
+					on:click={(event) => handle_preview_click(event)}
+					style="height: calc(100% - {selected_image.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"
+					/>
+				</button>
+				{#if selected_image?.caption}
+					<caption class="caption">
+						{selected_image.caption}
+					</caption>
+				{/if}
+				<div
+					bind:this={container_element}
+					class="thumbnails scroll-hide"
+					data-testid="container_el"
+				>
+					{#each resolved_value as image, i}
+						<button
+							bind:this={el[i]}
+							on:click={() => (selected_index = i)}
+							class="thumbnail-item thumbnail-small"
+							class:selected={selected_index === i && mode !== "minimal"}
+							aria-label={"Thumbnail " +
+								(i + 1) +
+								" of " +
+								resolved_value.length}
+						>
+							<Image
+								src={image.image.url}
+								title={image.caption || null}
+								data-testid={"thumbnail " + (i + 1)}
+								alt=""
+								loading="lazy"
+							/>
+						</button>
+					{/each}
+				</div>
 			</button>
-			{#if selected_image?.caption}
-				<caption class="caption">
-					{selected_image.caption}
-				</caption>
-			{/if}
+		{/if}
+
+		<div
+			class="grid-wrap"
+			class:minimal={mode === "minimal"}
+			class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
+			class:hidden={is_full_screen}
+		>
 			<div
-				bind:this={container_element}
-				class="thumbnails scroll-hide"
-				data-testid="container_el"
+				class="grid-container"
+				style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
+				class:pt-6={show_label}
 			>
-				{#each resolved_value as image, i}
+				{#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}
+						/>
+					</div>
+				{/if}
+				{#each resolved_value as entry, i}
 					<button
-						bind:this={el[i]}
+						class="thumbnail-item thumbnail-lg"
+						class:selected={selected_index === i}
 						on:click={() => (selected_index = i)}
-						class="thumbnail-item thumbnail-small"
-						class:selected={selected_index === i && mode !== "minimal"}
 						aria-label={"Thumbnail " + (i + 1) + " of " + resolved_value.length}
 					>
 						<Image
-							src={image.image.url}
-							title={image.caption || null}
-							data-testid={"thumbnail " + (i + 1)}
-							alt=""
+							alt={entry.caption || ""}
+							src={typeof entry.image === "string"
+								? entry.image
+								: entry.image.url}
 							loading="lazy"
 						/>
+						{#if entry.caption}
+							<div class="caption-label">
+								{entry.caption}
+							</div>
+						{/if}
 					</button>
 				{/each}
 			</div>
-		</button>
-	{/if}
-
-	<div
-		class="grid-wrap"
-		class:minimal={mode === "minimal"}
-		class:fixed-height={mode !== "minimal" && (!height || height == "auto")}
-	>
-		<div
-			class="grid-container"
-			style="--grid-cols:{columns}; --grid-rows:{rows}; --object-fit: {object_fit}; height: {height};"
-			class:pt-6={show_label}
-		>
-			{#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}
-					/>
-				</div>
-			{/if}
-			{#each resolved_value as entry, i}
-				<button
-					class="thumbnail-item thumbnail-lg"
-					class:selected={selected_index === i}
-					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 entry.caption}
-						<div class="caption-label">
-							{entry.caption}
-						</div>
-					{/if}
-				</button>
-			{/each}
 		</div>
 	</div>
 {/if}
 
 <style lang="postcss">
+	.image-container {
+		height: 100%;
+		position: relative;
+	}
+	.image-container :global(img),
+	button {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+		display: block;
+		border-radius: var(--radius-lg);
+	}
+
 	.preview {
 		display: flex;
 		position: absolute;
@@ -400,6 +463,10 @@
 		height: auto;
 	}
 
+	.selectable {
+		cursor: crosshair;
+	}
+
 	.caption {
 		padding: var(--size-2) var(--size-3);
 		overflow: hidden;
@@ -526,10 +593,9 @@
 		display: flex;
 		position: absolute;
 		right: 0;
-	}
-
-	.icon-buttons .download-button-container {
-		margin: var(--size-1) 0;
+		gap: var(--size-1);
+		z-index: 1;
+		margin: var(--size-1);
 	}
 
 	.grid-wrap.minimal {