@gradio/gallery 0.12.1 → 0.13.0-beta.1

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @gradio/gallery
 
+## 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!
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/image@0.16.0-beta.0
+- @gradio/video@0.11.0-beta.0
+- @gradio/file@0.9.4-beta.0
+
 ## 0.12.1
 
 ### Features

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

@@ -1,5 +1,5 @@
 import { test, describe, assert, afterEach, vi } from "vitest";
-import { cleanup, render } from "@gradio/tootils";
+import { cleanup, render } from "@self/tootils";
 import { setupi18n } from "../core/src/i18n";
 
 import Gallery from "./Index.svelte";
@@ -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}
 			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 }) => {

package/dist/Index.svelte

@@ -0,0 +1,110 @@
+<script context="module">export { default as BaseGallery } from "./shared/Gallery.svelte";
+</script>
+
+<script>import { Block, UploadText } from "@gradio/atoms";
+import Gallery from "./shared/Gallery.svelte";
+import { StatusTracker } from "@gradio/statustracker";
+import { createEventDispatcher } from "svelte";
+import { BaseFileUpload } from "@gradio/file";
+export let loading_status;
+export let show_label;
+export let label;
+export let root;
+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;
+export let columns = [2];
+export let rows = void 0;
+export let height = "auto";
+export let preview;
+export let allow_preview = true;
+export let selected_index = null;
+export let object_fit = "cover";
+export let show_share_button = false;
+export let interactive;
+export let show_download_button = false;
+export let gradio;
+export let show_fullscreen_button = true;
+const dispatch = createEventDispatcher();
+$:
+  no_value = value === null ? true : value.length === 0;
+$:
+  selected_index, dispatch("prop_change", { selected_index });
+</script>
+
+<Block
+	{visible}
+	variant="solid"
+	padding={false}
+	{elem_id}
+	{elem_classes}
+	{container}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	height={typeof height === "number" ? height : undefined}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+		on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+	/>
+	{#if interactive && no_value}
+		<BaseFileUpload
+			value={null}
+			{root}
+			{label}
+			max_file_size={gradio.max_file_size}
+			file_count={"multiple"}
+			{file_types}
+			i18n={gradio.i18n}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+			on:upload={(e) => {
+				const files = Array.isArray(e.detail) ? e.detail : [e.detail];
+				value = files.map((x) =>
+					x.mime_type?.includes("video")
+						? { video: x, caption: null }
+						: { image: x, caption: null }
+				);
+				gradio.dispatch("upload", value);
+			}}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+		>
+			<UploadText i18n={gradio.i18n} type="gallery" />
+		</BaseFileUpload>
+	{:else}
+		<Gallery
+			on:change={() => gradio.dispatch("change", value)}
+			on:select={(e) => gradio.dispatch("select", e.detail)}
+			on:share={(e) => gradio.dispatch("share", e.detail)}
+			on:error={(e) => gradio.dispatch("error", e.detail)}
+			{label}
+			{show_label}
+			{columns}
+			{rows}
+			{height}
+			{preview}
+			{object_fit}
+			{interactive}
+			{allow_preview}
+			bind:selected_index
+			bind:value
+			{show_share_button}
+			{show_download_button}
+			i18n={gradio.i18n}
+			_fetch={gradio.client.fetch}
+			{show_fullscreen_button}
+		/>
+	{/if}
+</Block>

package/dist/Index.svelte.d.ts

@@ -0,0 +1,52 @@
+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";
+declare const __propDef: {
+    props: {
+        loading_status: LoadingStatus;
+        show_label: boolean;
+        label: string;
+        root: string;
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: ((GalleryImage | GalleryVideo)[] | null) | undefined;
+        file_types?: (string[] | null) | undefined;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        columns?: number | number[] | undefined;
+        rows?: number | number[] | undefined;
+        height?: (number | "auto") | undefined;
+        preview: boolean;
+        allow_preview?: boolean | undefined;
+        selected_index?: (number | null) | undefined;
+        object_fit?: ("contain" | "cover" | "fill" | "none" | "scale-down") | undefined;
+        show_share_button?: boolean | undefined;
+        interactive: boolean;
+        show_download_button?: boolean | undefined;
+        gradio: Gradio<{
+            change: (GalleryImage | GalleryVideo)[] | null;
+            upload: (GalleryImage | GalleryVideo)[] | null;
+            select: SelectData;
+            share: ShareData;
+            error: string;
+            prop_change: Record<string, any>;
+            clear_status: LoadingStatus;
+        }>;
+        show_fullscreen_button?: boolean | undefined;
+    };
+    events: {
+        prop_change: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+}