From 54a6d91cfce2afad8a81d145f31b76c57f15b4a2 Mon Sep 17 00:00:00 2001
From: Heiner Lohaus <hlohaus@users.noreply.github.com>
Date: Sat, 7 Dec 2024 23:54:51 +0100
Subject: Fix animation in lightbox

---
 g4f/gui/client/index.html           | 13 ++++++++++---
 g4f/gui/client/static/js/chat.v1.js |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

(limited to 'g4f/gui')

diff --git a/g4f/gui/client/index.html b/g4f/gui/client/index.html
index eb67bb7a..cd1f72a6 100644
--- a/g4f/gui/client/index.html
+++ b/g4f/gui/client/index.html
@@ -39,12 +39,18 @@
     <script src="https://cdn.jsdelivr.net/npm/gpt-tokenizer/dist/cl100k_base.js" async></script>
     <script src="/static/js/text_to_speech/index.js" async></script>
     <script type="module" async>
-        import PhotoSwipeLightbox from 'https://unpkg.com/photoswipe/dist/photoswipe-lightbox.esm.js';
+        import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe/dist/photoswipe-lightbox.esm.js';
         const lightbox = new PhotoSwipeLightbox({
             gallery: '#messages',
             children: 'a:has(img)',
-            showHideAnimationType: 'none',
-            pswpModule: () => import('https://unpkg.com/photoswipe'),
+            secondaryZoomLevel: 2,
+            pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe'),
+        });
+        lightbox.addFilter('itemData', (itemData, index) => {
+            const img = itemData.element.querySelector('img');
+            itemData.width = img.naturalWidth;
+            itemData.height = img.naturalHeight;
+            return itemData;
         });
         lightbox.on('uiRegister', function() {
             lightbox.pswp.ui.registerElement({
@@ -297,6 +303,7 @@
                         <i class="fa-solid fa-thumbtack"></i>
                     </button>
                 </div>
+                <div id="pin_container" class="field"></div>
             </div>
         </div>
         <div class="log hidden"></div>
diff --git a/g4f/gui/client/static/js/chat.v1.js b/g4f/gui/client/static/js/chat.v1.js
index c08f72f0..c117d3eb 100644
--- a/g4f/gui/client/static/js/chat.v1.js
+++ b/g4f/gui/client/static/js/chat.v1.js
@@ -1653,7 +1653,7 @@ async function load_provider_models(providerIndex=null) {
 };
 providerSelect.addEventListener("change", () => load_provider_models());
 document.getElementById("pin").addEventListener("click", async () => {
-    const pin_container = document.getElementById("pin").parentElement;
+    const pin_container = document.getElementById("pin_container");
     let selected_provider = providerSelect.options[providerSelect.selectedIndex];
     selected_provider = selected_provider.value ? selected_provider : null;
     const selected_model = get_selected_model();
-- 
cgit v1.2.3