From a06525dcb8f227aae7c39f14a2d86860778ab522 Mon Sep 17 00:00:00 2001
From: Pedro Augusto <109992671+aug-dev@users.noreply.github.com>
Date: Thu, 6 Jun 2024 10:58:52 -0300
Subject: [PATCH] fix(google): fix Images page on mobile version of Google
 (#485)

* Add support for udm values on Google Mobile

* Beginning stage of udm=2 serpHandler (Google Mobile)

* Solid implementation of udm=2 serpHandler on Google Mobile

* Fix spacing when there is a "Sponsored" section

* Remove uncessary rules from serpHandler
---
 src/scripts/search-engines/google-mobile.ts | 84 ++++++++++++++++++++-
 src/scripts/search-engines/google.ts        |  2 +-
 2 files changed, 83 insertions(+), 3 deletions(-)

diff --git a/src/scripts/search-engines/google-mobile.ts b/src/scripts/search-engines/google-mobile.ts
index 7b2658d93..265902343 100644
--- a/src/scripts/search-engines/google-mobile.ts
+++ b/src/scripts/search-engines/google-mobile.ts
@@ -367,6 +367,81 @@ const mobileSerpHandlers: Record<string, SerpHandler> = {
       },
     ],
   }),
+  "udm=2": handleSerp({
+    globalStyle: mobileGlobalStyle,
+    controlHandlers: [
+      // Main control on Images page
+      {
+        target: "#appbar",
+        style: {
+          "&:not(.ub-hidden)": {
+            display: "block",
+            padding: "8px 0 8px 16px",
+            fontSize: "13px",
+            ...iOSButtonStyle,
+          },
+        },
+      },
+      // Control on top of additional images
+      {
+        target: ".izYTqe > .PK06q:empty",
+        style: (controlRoot) => {
+          controlRoot.className = css({
+            paddingLeft: "18px",
+            ...iOSButtonStyle,
+          });
+          controlRoot.parentElement?.classList.add(
+            css({
+              marginBottom: "16px",
+            }),
+          );
+        },
+      },
+    ],
+    entryHandlers: [
+      // Regular Image
+      {
+        target: "[data-bla]",
+        level: ".srKDX.cvP2Ce > div",
+        url: "a",
+        title: ".Q6A6Dc",
+        actionTarget: ".N54PNb > [data-snf]:last-child",
+        actionPosition: "afterend",
+        actionStyle: {
+          display: "block",
+          fontSize: "11px",
+          padding: "0 0 8px 0",
+          ...iOSButtonStyle,
+        },
+      },
+      // Additional Images (when you click on a regular image)
+      {
+        target: ".isv-r",
+        url: "a:not([role='button'])",
+        title: "h3",
+        actionTarget: (root) => root,
+        actionStyle: {
+          display: "block",
+          fontSize: "12px",
+          lineHeight: "18px",
+          margin: "-2px 0 8px",
+          ...iOSButtonStyle,
+        },
+      },
+    ],
+    pagerHandlers: [
+      // Continuos Scrolling
+      {
+        target: '[id^="arc-srp"], [decode-data-ved]',
+        innerTargets: "[data-bla]",
+      },
+      // Additional Images
+      {
+        target: "c-wiz",
+        innerTargets: ".isv-r, .PK06q",
+      },
+    ],
+  }),
   // News
   nws: handleSerp({
     globalStyle: mobileGlobalStyle,
@@ -477,8 +552,13 @@ const mobileSerpHandlers: Record<string, SerpHandler> = {
   }),
 };
 
-export function getMobileSerpHandler(tbm: string): SerpHandler | null {
-  const serpHandler = mobileSerpHandlers[tbm];
+export function getMobileSerpHandler(
+  tbm: string,
+  udm: string,
+): SerpHandler | null {
+  const udmKey = `udm=${udm}`;
+  const serpHandler =
+    mobileSerpHandlers[udmKey in mobileSerpHandlers ? udmKey : tbm];
   if (!serpHandler) {
     return null;
   }
diff --git a/src/scripts/search-engines/google.ts b/src/scripts/search-engines/google.ts
index 87173b7e6..9bf15c4d4 100644
--- a/src/scripts/search-engines/google.ts
+++ b/src/scripts/search-engines/google.ts
@@ -11,7 +11,7 @@ export const google: Readonly<SearchEngine> = {
     const tbm = params.get("tbm") ?? "";
     const udm = params.get("udm") ?? "";
     return mobile({ tablet: true })
-      ? getMobileSerpHandler(tbm)
+      ? getMobileSerpHandler(tbm, udm)
       : getDesktopSerpHandler(tbm, udm);
   },
 };