@gradio/image 0.25.4 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @gradio/image
 
+## 0.26.0
+
+### Features
+
+- [#12998](https://github.com/gradio-app/gradio/pull/12998) [`d5e1b8f`](https://github.com/gradio-app/gradio/commit/d5e1b8f6cb7473b70fc8c082589996d5e0402810) - use a real browser environment for unit tests.  Thanks @pngwn!
+
+### Fixes
+
+- [#13004](https://github.com/gradio-app/gradio/pull/13004) [`73d4065`](https://github.com/gradio-app/gradio/commit/73d4065db6a75961693fad60dd26e8dbaa2a56d1) - fix(image): pass onclick to FullscreenButton in ImagePreview.  Thanks @galleon!
+
+### Dependency updates
+
+- @gradio/utils@0.12.1
+- @gradio/statustracker@0.13.0
+
 ## 0.25.4
 
 ### Dependency updates

package/dist/shared/ImagePreview.svelte

@@ -62,7 +62,13 @@
 			{on_custom_button_click}
 		>
 			{#if buttons.some((btn) => typeof btn === "string" && btn === "fullscreen")}
-				<FullscreenButton {fullscreen} on:fullscreen />
+				<FullscreenButton
+					{fullscreen}
+					onclick={(is_fullscreen) => {
+						fullscreen = is_fullscreen;
+						dispatch("fullscreen", is_fullscreen);
+					}}
+				/>
 			{/if}
 			{#if buttons.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>

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

@@ -27,12 +27,12 @@ declare const ImagePreview: $$__sveltets_2_IsomorphicComponent<{
     fullscreen?: boolean;
     show_button_background?: boolean;
 }, {
-    fullscreen: CustomEvent<any>;
     share: CustomEvent<import("@gradio/utils").ShareData>;
     error: CustomEvent<string>;
     load: Event;
     change: CustomEvent<string>;
     select: CustomEvent<SelectData>;
+    fullscreen: CustomEvent<boolean>;
 } & {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/shared/stream_utils.d.ts

@@ -1,7 +1,7 @@
 export declare function get_devices(): Promise<MediaDeviceInfo[]>;
 export declare function handle_error(error: string): void;
-export declare function set_local_stream(local_stream: MediaStream | null, video_source: HTMLVideoElement): void;
-export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, webcam_constraints: {
+export declare function set_local_stream(local_stream: MediaStream | null, video_source: HTMLVideoElement): Promise<void>;
+export declare function get_video_stream(include_audio: boolean, video_source: HTMLVideoElement, webcam_constraints?: {
     [key: string]: any;
 } | null, device_id?: string): Promise<MediaStream>;
 export declare function set_available_devices(devices: MediaDeviceInfo[]): MediaDeviceInfo[];

package/dist/shared/stream_utils.js

@@ -4,10 +4,10 @@ export function get_devices() {
 export function handle_error(error) {
     throw new Error(error);
 }
-export function set_local_stream(local_stream, video_source) {
+export async function set_local_stream(local_stream, video_source) {
     video_source.srcObject = local_stream;
     video_source.muted = true;
-    video_source.play();
+    await video_source.play();
 }
 export async function get_video_stream(include_audio, video_source, webcam_constraints, device_id) {
     const constraints = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/image",
-  "version": "0.25.4",
+  "version": "0.26.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -12,13 +12,13 @@
     "resize-observer-polyfill": "^1.5.1",
     "@gradio/client": "^2.1.0",
     "@gradio/atoms": "^0.22.2",
+    "@gradio/statustracker": "^0.13.0",
+    "@gradio/upload": "^0.17.7",
     "@gradio/icons": "^0.15.1",
-    "@gradio/statustracker": "^0.12.5",
-    "@gradio/utils": "^0.12.0",
-    "@gradio/upload": "^0.17.7"
+    "@gradio/utils": "^0.12.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.16.0"
+    "@gradio/preview": "^0.16.1"
   },
   "main_changeset": true,
   "main": "./Index.svelte",

package/shared/ImagePreview.svelte

@@ -62,7 +62,13 @@
 			{on_custom_button_click}
 		>
 			{#if buttons.some((btn) => typeof btn === "string" && btn === "fullscreen")}
-				<FullscreenButton {fullscreen} on:fullscreen />
+				<FullscreenButton
+					{fullscreen}
+					onclick={(is_fullscreen) => {
+						fullscreen = is_fullscreen;
+						dispatch("fullscreen", is_fullscreen);
+					}}
+				/>
 			{/if}
 			{#if buttons.some((btn) => typeof btn === "string" && btn === "download")}
 				<DownloadLink href={value.url} download={value.orig_name || "image"}>

package/shared/stream_utils.test.ts

@@ -5,121 +5,68 @@ import {
 	set_available_devices,
 	set_local_stream
 } from "./stream_utils";
-
-let test_device: MediaDeviceInfo = {
-	deviceId: "test-device",
-	kind: "videoinput",
-	label: "Test Device",
-	groupId: "camera",
-	toJSON: () => ({
-		deviceId: "test-device",
+import * as stream_utils from "./stream_utils";
+
+let test_devices: MediaDeviceInfo[] = [
+	{
+		deviceId: "",
+		groupId: "",
+		kind: "audioinput",
+		label: "",
+		toJSON: () => ({
+			deviceId: "",
+			groupId: "",
+			kind: "audioinput",
+			label: ""
+		})
+	},
+	{
+		deviceId: "",
+		groupId: "",
 		kind: "videoinput",
-		label: "Test Device",
-		groupId: "camera"
-	})
-};
-
-const mock_enumerateDevices = vi.fn(async () => {
-	return new Promise<MediaDeviceInfo[]>((resolve) => {
-		resolve([test_device]);
-	});
-});
-const mock_getUserMedia = vi.fn(async () => {
-	return new Promise<MediaStream>((resolve) => {
-		resolve(new MediaStream());
-	});
-});
-
-class MockMediaStream extends EventTarget {
-	id: string;
-	active: boolean;
-
-	constructor() {
-		super();
-		this.id = "mock-stream-id";
-		this.active = true;
-	}
-
-	getTracks(): MediaStreamTrack[] {
-		return [];
-	}
-
-	getAudioTracks(): MediaStreamTrack[] {
-		return [];
-	}
-
-	getVideoTracks(): MediaStreamTrack[] {
-		return [];
-	}
-
-	addTrack(): void {}
-	removeTrack(): void {}
-	getTrackById(): MediaStreamTrack | null {
-		return null;
-	}
-
-	clone(): MediaStream {
-		return this as unknown as MediaStream;
+		label: "",
+		toJSON: () => ({
+			deviceId: "",
+			groupId: "",
+			kind: "videoinput",
+			label: ""
+		})
+	},
+	{
+		deviceId: "",
+		groupId: "",
+		kind: "audiooutput",
+		label: "",
+		toJSON: () => ({
+			deviceId: "",
+			groupId: "",
+			kind: "audiooutput",
+			label: ""
+		})
 	}
-}
-
-// @ts-ignore - Override global MediaStream for testing
-window.MediaStream = MockMediaStream as any;
-
-Object.defineProperty(global.navigator, "mediaDevices", {
-	value: {
-		getUserMedia: mock_getUserMedia,
-		enumerateDevices: mock_enumerateDevices
-	}
-});
+];
 
 describe("stream_utils", () => {
 	test("get_devices should enumerate media devices", async () => {
 		const devices = await get_devices();
-		expect(devices).toEqual([test_device]);
+		expect(Array.isArray(devices)).toBe(true);
 	});
 
-	test("set_local_stream should set the local stream to the video source", () => {
-		const mock_stream = new MockMediaStream() as unknown as MediaStream;
-
+	test("set_local_stream should set the local stream to the video source", async () => {
 		const mock_video_source = {
-			srcObject: null as MediaStream | null,
+			srcObject: null,
 			muted: false,
-			play: vi.fn()
+			play: vi.fn().mockResolvedValue(undefined)
 		};
 
 		// @ts-ignore
-		set_local_stream(mock_stream, mock_video_source);
+		await set_local_stream(new MediaStream(), mock_video_source);
 
-		expect(mock_video_source.srcObject).toEqual(mock_stream);
+		expect(mock_video_source.srcObject).toBeInstanceOf(MediaStream);
 		expect(mock_video_source.muted).toBeTruthy();
 		expect(mock_video_source.play).toHaveBeenCalled();
 	});
 
-	test("get_video_stream requests user media with the correct constraints and sets the local stream", async () => {
-		const mock_video_source = {
-			srcObject: null as MediaStream | null,
-			muted: false,
-			play: vi.fn().mockResolvedValue(undefined)
-		} as unknown as HTMLVideoElement;
-		const mock_stream = new MockMediaStream() as unknown as MediaStream;
-
-		global.navigator.mediaDevices.getUserMedia = vi
-			.fn()
-			.mockResolvedValue(mock_stream);
-
-		await get_video_stream(true, mock_video_source, null);
-
-		expect(navigator.mediaDevices.getUserMedia).toHaveBeenCalledWith({
-			video: { width: { ideal: 1920 }, height: { ideal: 1440 } },
-			audio: true
-		});
-
-		expect(mock_video_source.srcObject).toBe(mock_stream);
-		expect(mock_video_source.muted).toBe(true);
-		expect(mock_video_source.play).toHaveBeenCalled();
-	});
-
 	test("set_available_devices should return only video input devices", () => {
 		const mockDevices: MediaDeviceInfo[] = [
 			{

package/shared/stream_utils.ts

@@ -6,19 +6,19 @@ export function handle_error(error: string): void {
 	throw new Error(error);
 }
 
-export function set_local_stream(
+export async function set_local_stream(
 	local_stream: MediaStream | null,
 	video_source: HTMLVideoElement
-): void {
+): Promise<void> {
 	video_source.srcObject = local_stream;
 	video_source.muted = true;
-	video_source.play();
+	await video_source.play();
 }
 
 export async function get_video_stream(
 	include_audio: boolean,
 	video_source: HTMLVideoElement,
-	webcam_constraints: { [key: string]: any } | null,
+	webcam_constraints?: { [key: string]: any } | null,
 	device_id?: string
 ): Promise<MediaStream> {
 	const constraints: MediaStreamConstraints = {

package/Image.test.ts

@@ -1,68 +0,0 @@
-import {
-	test,
-	describe,
-	assert,
-	afterEach,
-	vi,
-	beforeAll,
-	beforeEach
-} from "vitest";
-import { cleanup, render } from "@self/tootils";
-import { setupi18n } from "../core/src/i18n";
-
-import Image from "./Index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker";
-
-const loading_status = {
-	eta: 0,
-	queue_position: 1,
-	queue_size: 1,
-	status: "complete" as LoadingStatus["status"],
-	scroll_to_output: false,
-	visible: true,
-	fn_index: 0,
-	show_progress: "full" as LoadingStatus["show_progress"]
-};
-
-describe("Image", () => {
-	beforeAll(() => {
-		window.HTMLMediaElement.prototype.play = vi.fn();
-		window.HTMLMediaElement.prototype.pause = vi.fn();
-	});
-	beforeEach(async () => {
-		await setupi18n();
-	});
-	afterEach(() => cleanup());
-
-	test.skip("image change event trigger fires when value is changed and only fires once", async () => {
-		const { component, listen } = await render(Image, {
-			show_label: true,
-			loading_status,
-			value: {
-				url: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
-				orig_name: "bus.png",
-				path: "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
-			},
-			streaming: false,
-			pending: false,
-			label: "Test Label",
-			width: 224,
-			height: 224,
-			mirror_webcam: false,
-			// brush_color: "#000000",
-			// brush_radius: 5,
-			// mask_opacity: 0.5,
-			interactive: true,
-			buttons: ["download", "share", "fullscreen"]
-		});
-
-		const mock = listen("change");
-
-		component.value = {
-			url: "https://github.com/gradio-app/gradio/blob/main/gradio/media_assets/images/cheetah1.jpg",
-			orig_name: "cheetah1.jpg",
-			path: "https://github.com/gradio-app/gradio/blob/main/gradio/media_assets/images/cheetah1.jpg"
-		};
-		assert.equal(mock.callCount, 1);
-	});
-});