From 9a6ce6f6b089d94c06da0b8620f28967f39f8383 Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 5 Dec 2024 23:51:30 +0000 Subject: [PATCH] Refactor full screen logic to be reusable (#10098) --- .changeset/kind-laws-heal.md | 10 +++++ js/annotatedimage/Index.svelte | 37 ++++------------- js/atoms/src/FullscreenButton.svelte | 46 +++++++++++++++++++++ js/atoms/src/index.ts | 1 + js/chatbot/shared/ChatBot.svelte | 61 +--------------------------- js/gallery/shared/Gallery.svelte | 39 ++++++------------ js/image/shared/ImagePreview.svelte | 43 ++++---------------- js/image/shared/ImageUploader.svelte | 28 ++----------- 8 files changed, 88 insertions(+), 177 deletions(-) create mode 100644 .changeset/kind-laws-heal.md create mode 100644 js/atoms/src/FullscreenButton.svelte diff --git a/.changeset/kind-laws-heal.md b/.changeset/kind-laws-heal.md new file mode 100644 index 0000000000000..ef32939d48b1b --- /dev/null +++ b/.changeset/kind-laws-heal.md @@ -0,0 +1,10 @@ +--- +"@gradio/annotatedimage": minor +"@gradio/atoms": minor +"@gradio/chatbot": minor +"@gradio/gallery": minor +"@gradio/image": minor +"gradio": minor +--- + +feat:Refactor full screen logic to be reusable diff --git a/js/annotatedimage/Index.svelte b/js/annotatedimage/Index.svelte index 1b031e8946caa..fe11946bf4928 100644 --- a/js/annotatedimage/Index.svelte +++ b/js/annotatedimage/Index.svelte @@ -6,8 +6,8 @@ Block, BlockLabel, Empty, - IconButton, - IconButtonWrapper + IconButtonWrapper, + FullscreenButton } from "@gradio/atoms"; import { Image, Maximize, Minimize } from "@gradio/icons"; import { StatusTracker } from "@gradio/statustracker"; @@ -47,22 +47,8 @@ export let loading_status: LoadingStatus; export let show_fullscreen_button = true; - let is_full_screen = false; let image_container: HTMLElement; - - onMount(() => { - document.addEventListener("fullscreenchange", () => { - is_full_screen = !!document.fullscreenElement; - }); - }); - - const toggle_full_screen = async (): Promise => { - if (!is_full_screen) { - await image_container.requestFullscreen(); - } else { - await document.exitFullscreen(); - } - }; + let is_full_screen = false; // `value` can be updated before the Promises from `resolve_wasm_src` are resolved. // In such a case, the resolved values for the old `value` have to be discarded, @@ -166,19 +152,10 @@ {:else}
- {#if !is_full_screen && show_fullscreen_button} - - {/if} - - {#if is_full_screen} - (is_full_screen = e.detail)} /> {/if} diff --git a/js/atoms/src/FullscreenButton.svelte b/js/atoms/src/FullscreenButton.svelte new file mode 100644 index 0000000000000..bbf385df2bfee --- /dev/null +++ b/js/atoms/src/FullscreenButton.svelte @@ -0,0 +1,46 @@ + + +{#if !is_full_screen} + +{/if} + +{#if is_full_screen} + +{/if} diff --git a/js/atoms/src/index.ts b/js/atoms/src/index.ts index 2279aed7ef881..a4342fe2547d9 100644 --- a/js/atoms/src/index.ts +++ b/js/atoms/src/index.ts @@ -9,5 +9,6 @@ export { default as UploadText } from "./UploadText.svelte"; export { default as Toolbar } from "./Toolbar.svelte"; export { default as SelectSource } from "./SelectSource.svelte"; export { default as IconButtonWrapper } from "./IconButtonWrapper.svelte"; +export { default as FullscreenButton } from "./FullscreenButton.svelte"; export const BLOCK_KEY = {}; diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte index 8ab270a0e65c0..9b6d5a0696add 100644 --- a/js/chatbot/shared/ChatBot.svelte +++ b/js/chatbot/shared/ChatBot.svelte @@ -15,7 +15,6 @@ import { dequal } from "dequal/lite"; import { - afterUpdate, createEventDispatcher, type SvelteComponent, type ComponentType, @@ -24,13 +23,7 @@ } from "svelte"; import { Image } from "@gradio/image/shared"; - import { - Clear, - Trash, - Community, - ScrollDownArrow, - Download - } from "@gradio/icons"; + import { Trash, Community, ScrollDownArrow } from "@gradio/icons"; import { IconButtonWrapper, IconButton } from "@gradio/atoms"; import type { SelectData, LikeData } from "@gradio/utils"; import type { ExampleMessage } from "../types"; @@ -173,24 +166,6 @@ }; }); - let image_preview_source: string; - let image_preview_source_alt: string; - let is_image_preview_open = false; - - afterUpdate(() => { - if (!div) return; - div.querySelectorAll("img").forEach((n) => { - n.addEventListener("click", (e) => { - const target = e.target as HTMLImageElement; - if (target) { - image_preview_source = target.src; - image_preview_source_alt = target.alt; - is_image_preview_open = true; - } - }); - }); - }); - $: { if (!dequal(value, old_value)) { old_value = value; @@ -300,26 +275,6 @@ {@const role = messages[0].role === "user" ? "user" : "bot"} {@const avatar_img = avatar_images[role === "user" ? 0 : 1]} {@const opposite_avatar_img = avatar_images[role === "user" ? 0 : 1]} - {#if is_image_preview_open} -
- {image_preview_source_alt} - - (is_image_preview_open = false)} - label={"Clear"} - /> - {#if allow_file_downloads} - - - - {/if} - -
- {/if} - import { BlockLabel, Empty, ShareButton } from "@gradio/atoms"; + import { + BlockLabel, + Empty, + ShareButton, + IconButton, + IconButtonWrapper, + FullscreenButton + } from "@gradio/atoms"; import { ModifyUpload } from "@gradio/upload"; import type { SelectData } from "@gradio/utils"; import { Image } from "@gradio/image/shared"; @@ -19,7 +26,6 @@ } from "@gradio/icons"; import { FileData } from "@gradio/client"; import { format_gallery_for_sharing } from "./utils"; - import { IconButton, IconButtonWrapper } from "@gradio/atoms"; import type { I18nFormatter } from "@gradio/utils"; type GalleryData = GalleryImage | GalleryVideo; @@ -44,7 +50,7 @@ export let show_fullscreen_button = true; let is_full_screen = false; - let gallery_container: HTMLElement; + let image_container: HTMLElement; const dispatch = createEventDispatcher<{ change: undefined; @@ -221,14 +227,6 @@ is_full_screen = !!document.fullscreenElement; }); }); - - const toggle_full_screen = async (): Promise => { - if (!is_full_screen) { - await gallery_container.requestFullscreen(); - } else { - await document.exitFullscreen(); - } - }; @@ -239,7 +237,7 @@ {#if value == null || resolved_value == null || resolved_value.length === 0} {:else} -
+
{#if selected_media && allow_preview}