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
iorate · Jun 6, 2024 · a06525d · a06525d
1 parent 1f6a26b
commit a06525d
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 3 deletions.
diff --git 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
@@ -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);
   },
 };