bunch of fixes for image injections

WorldBrain · Jun 10, 2024 · 6a7e636 · 6a7e636
1 parent 306e12c
commit 6a7e636
Showing 1 changed file with 25 additions and 17 deletions.
diff --git a/src/search-injection/img-action-buttons.tsx b/src/search-injection/img-action-buttons.tsx
@@ -155,7 +155,7 @@ export const handleRenderImgActionButtons = async (
         return
     }
 
-    const renderComponent = (imageElement, target, index) => {
+    const renderComponent = (imageElement, target, index, isFullScreen) => {
         const existingButton = document.getElementById(
             constants.REACT_ROOTS.imgActionButtons + '-' + index,
         )
@@ -169,8 +169,13 @@ export const handleRenderImgActionButtons = async (
         wrapperSpan.style.display = 'flex' // Use flexbox for alignment
         wrapperSpan.style.justifyContent = 'center' // Center content horizontally
         wrapperSpan.style.alignItems = 'center' // Center content vertically
-        wrapperSpan.style.width = '100%' // Span takes full width
-        wrapperSpan.style.height = '100%' // Span takes full width
+        if (isFullScreen) {
+            wrapperSpan.style.width = '100vw' // Span takes full width
+            wrapperSpan.style.height = '100vh' // Span takes full width
+        } else {
+            wrapperSpan.style.width = '100%' // Span takes full width
+            wrapperSpan.style.height = '100%' // Span takes full width
+        }
         wrapperSpan.style.position = 'relative' // Positioning context for the absolute positioned target
 
         // Insert the wrapper before the imageElement in the DOM
@@ -203,7 +208,7 @@ export const handleRenderImgActionButtons = async (
             imageUrl = element.src
         }
 
-        if (element.naturalWidth < 100 || element.naturalHeight < 100) {
+        if (element.width < 100 || element.height < 100) {
             continue
         }
 
@@ -229,21 +234,9 @@ export const handleRenderImgActionButtons = async (
         if (imageData == null) {
             continue
         }
-        renderComponent(element, target, i)
-
-        const arrayOfSpecialCases = ['https://www.google.com/search?']
-
-        const currentUrl = window.location.href
-
-        if (arrayOfSpecialCases.some((url) => currentUrl.includes(url))) {
-            element = element.parentNode.parentNode
-                .parentNode as HTMLImageElement
-            if (element.getAttribute('jsaction')) {
-                element.setAttribute('jsaction', null)
-            }
-        }
 
         let renderTimeout
+        let isFullScreen = false
 
         let elementRect, elementTopRightX, elementTopRightY, windowWidth
 
@@ -252,12 +245,27 @@ export const handleRenderImgActionButtons = async (
             elementTopRightX = elementRect.right
             elementTopRightY = elementRect.top
             windowWidth = window.innerWidth
+            isFullScreen = true
         } else {
             elementTopRightX = 0
             elementTopRightY = 0
             windowWidth = 0
         }
 
+        renderComponent(element, target, i, isFullScreen)
+
+        const arrayOfSpecialCases = ['https://www.google.com/search?']
+
+        const currentUrl = window.location.href
+
+        if (arrayOfSpecialCases.some((url) => currentUrl.includes(url))) {
+            element = element.parentNode.parentNode
+                .parentNode as HTMLImageElement
+            if (element.getAttribute('jsaction')) {
+                element.setAttribute('jsaction', null)
+            }
+        }
+
         element.onmouseenter = () => {
             if (shouldShow) {
                 renderTimeout = setTimeout(() => {