From 9b232546659fc8408ef78a204c4e6ca26c410af6 Mon Sep 17 00:00:00 2001
From: Matt Gabrenya <matt@buildyourweb.app>
Date: Thu, 17 Oct 2024 11:58:08 -0400
Subject: [PATCH] refactor(ui): extract lightbox logic to its own component,
 show close button on small viewports when zooming

---
 ui/src/lib/LightboxImage.svelte               | 42 +++++++++++++++++++
 ui/src/routes/conversations/[id]/+page.svelte | 27 +-----------
 2 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 ui/src/lib/LightboxImage.svelte

diff --git a/ui/src/lib/LightboxImage.svelte b/ui/src/lib/LightboxImage.svelte
new file mode 100644
index 0000000..5551a48
--- /dev/null
+++ b/ui/src/lib/LightboxImage.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+  import BiggerPicture from 'bigger-picture';
+  import 'bigger-picture/css';
+
+  export let btnClass = "";
+  export let src = "";
+  export let alt = "";
+
+  let biggerPicture = BiggerPicture({
+		target: document.body
+	});
+  
+  function show(e: PointerEvent | MouseEvent) {
+    const targetImg = e.target as HTMLImageElement;
+    biggerPicture.open({
+      items: [
+        {
+          // Because we don't know the original image dimensions,
+          // we scale by 10x and let bigger-picture handle constaining within window
+          // TODO: use the original image dimensions either by publishing to DHT or determining after downloading image
+          width: targetImg.width * 10,
+          height: targetImg.height * 10,
+          img: src,
+        }
+      ]
+    })
+  }
+</script>
+
+<button on:click={(e) => show(e)} class={btnClass}}>
+  <img {src} {alt} class="object-cover" />
+</button>
+
+<style>
+  :global(.bp-zoomed.bp-small .bp-controls) {
+    opacity: 1 !important;  
+  }
+
+  :global(.bp-close) {
+    z-index: 50;
+  }
+</style>
\ No newline at end of file
diff --git a/ui/src/routes/conversations/[id]/+page.svelte b/ui/src/routes/conversations/[id]/+page.svelte
index b6a6fec..7d70674 100644
--- a/ui/src/routes/conversations/[id]/+page.svelte
+++ b/ui/src/routes/conversations/[id]/+page.svelte
@@ -16,8 +16,7 @@
   import { copyToClipboard, isMobile, linkify, sanitizeHTML, shareText } from '$lib/utils';
   import { RelayStore } from '$store/RelayStore';
   import { Privacy, type Conversation, type Message, type Image } from '../../../types';
-  import BiggerPicture from 'bigger-picture';
-  import 'bigger-picture/css';
+  import LightboxImage from '$lib/LightboxImage.svelte';
 
   // Silly hack to get around issues with typescript in sveltekit-i18n
   const tAny = t as any;
@@ -46,10 +45,6 @@
   let scrollAtBottom = true;
   let scrollAtTop = false;
 
-	let biggerPicture = BiggerPicture({
-		target: document.body
-	});
-
   const SCROLL_BOTTOM_THRESHOLD = 100; // How close to the bottom must the user be to consider it "at the bottom"
   const SCROLL_TOP_THRESHOLD = 300; // How close to the top must the user be to consider it "at the top"
 
@@ -241,22 +236,6 @@
       })
     }
   }
-
-  function handleOpenImageLightbox(e: PointerEvent | MouseEvent, url: string) {
-    const targetImg = e.target as HTMLImageElement;
-    biggerPicture.open({
-      items: [
-        {
-          // Because we don't know the original image dimensions,
-          // we scale by 10x and let bigger-picture handle constaining within window
-          // TODO: use the original image dimensions either by publishing to DHT or determining after downloading image
-          width: targetImg.width * 10,
-          height: targetImg.height * 10,
-          img: url,
-        }
-      ]
-    })
-  }
 </script>
 
 <Header>
@@ -384,9 +363,7 @@
                       {#each message.images as image}
                         <div class='flex {fromMe ? 'justify-end' : 'justify-start'}'>
                           {#if image.status === 'loaded'}
-                            <button class='inline max-w-2/3 mb-2' on:click={(e) => handleOpenImageLightbox(e, image.dataURL) }>
-                              <img src={image.dataURL} alt={image.name} class="object-cover" />
-                            </button>
+                            <LightboxImage btnClass='inline max-w-2/3 mb-2' src={image.dataURL} alt={image.name} />
                           {:else if image.status === 'loading' || image.status === 'pending'}
                             <div class='w-20 h-20 bg-surface-800 mb-2 flex items-center justify-center'>
                               <SvgIcon icon='spinner' color={$modeCurrent ? '%232e2e2e' : 'white'} size='30' />