From b0a8b3639e88d84435154188d89bb22bc1ea4386 Mon Sep 17 00:00:00 2001
From: Ajay <dev@ajay.app>
Date: Sat, 14 Sep 2024 23:47:53 -0400
Subject: [PATCH] Support new format for shorts videos in feeds

---
 maze-utils                          | 2 +-
 src/thumbnails/thumbnailRenderer.ts | 7 ++++++-
 src/titles/titleRenderer.ts         | 1 +
 src/utils/cssInjector.ts            | 2 +-
 src/videoBranding/videoBranding.ts  | 4 ++--
 5 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/maze-utils b/maze-utils
index e735dca..e3824d3 160000
--- a/maze-utils
+++ b/maze-utils
@@ -1 +1 @@
-Subproject commit e735dcabe8f378d49b64b04097dbdf6dc7525228
+Subproject commit e3824d3e899e95f7b25587bb9c87c63ceff2143b
diff --git a/src/thumbnails/thumbnailRenderer.ts b/src/thumbnails/thumbnailRenderer.ts
index 347deb4..f52a2f6 100644
--- a/src/thumbnails/thumbnailRenderer.ts
+++ b/src/thumbnails/thumbnailRenderer.ts
@@ -710,6 +710,11 @@ export async function replaceThumbnail(element: HTMLElement, videoID: VideoID, b
                 thumbnail.className = image.className;
             }
 
+            // New shorts UI
+            if (image.classList.contains("ShortsLockupViewModelHostThumbnail")) {
+                thumbnail.classList.add("ShortsLockupViewModelHostThumbnail");
+            }
+
             thumbnail.classList.add("cbCustomThumbnailCanvas");
             thumbnail.style.removeProperty("display");
 
@@ -847,7 +852,7 @@ function resetToShowOriginalThumbnail(image: HTMLImageElement, brandingLocation:
     if (onMobile()
             || brandingLocation === BrandingLocation.Autoplay
             || brandingLocation === BrandingLocation.EmbedSuggestions
-            || BrandingLocation.Related
+            || brandingLocation === BrandingLocation.Related
             || !!image.closest("ytd-grid-playlist-renderer")
             || isLiveCover(image)) {
         hideCanvas(image);
diff --git a/src/titles/titleRenderer.ts b/src/titles/titleRenderer.ts
index a671618..87fa838 100644
--- a/src/titles/titleRenderer.ts
+++ b/src/titles/titleRenderer.ts
@@ -276,6 +276,7 @@ function getTitleSelector(brandingLocation: BrandingLocation): string[] {
                 "#video-title",
                 "#movie-title", // Movies in related
                 "#description #title", // Related videos in description
+                ".ShortsLockupViewModelHostMetadataTitle .yt-core-attributed-string", // New desktop shorts
                 ".details .media-item-headline .yt-core-attributed-string", // Mobile YouTube
                 ".reel-item-metadata h3 .yt-core-attributed-string", // Mobile YouTube Shorts
                 ".details > .yt-core-attributed-string", // Mobile YouTube Channel Feature
diff --git a/src/utils/cssInjector.ts b/src/utils/cssInjector.ts
index 3c4b695..77b5739 100644
--- a/src/utils/cssInjector.ts
+++ b/src/utils/cssInjector.ts
@@ -81,7 +81,7 @@ function buildHideThumbnailCss(): string {
         const thumbnailTypes = getThumbnailElements();
 
         for (const thumbnailType of thumbnailTypes) {
-            result.push(`${start} ${thumbnailType} img:not(.cb-visible, ytd-moving-thumbnail-renderer img, .cbCustomThumbnailCanvas, .yt-spec-avatar-shape__image)`);
+            result.push(`${start} ${thumbnailType} img:not(.cb-visible, ytd-moving-thumbnail-renderer img, .cbCustomThumbnailCanvas, .yt-spec-avatar-shape__image, .cbShowOriginalImage)`);
         }
     }
 
diff --git a/src/videoBranding/videoBranding.ts b/src/videoBranding/videoBranding.ts
index 126a79d..f2a54bc 100644
--- a/src/videoBranding/videoBranding.ts
+++ b/src/videoBranding/videoBranding.ts
@@ -50,7 +50,7 @@ export interface VideoBrandingInstance {
 }
 
 export const brandingBoxSelector = !onMobile() 
-    ? "ytd-rich-grid-media, ytd-video-renderer, ytd-movie-renderer, ytd-compact-video-renderer, ytd-compact-radio-renderer, ytd-compact-movie-renderer, ytd-playlist-video-renderer, ytd-playlist-panel-video-renderer, ytd-grid-video-renderer, ytd-grid-movie-renderer, ytd-rich-grid-slim-media, ytd-radio-renderer, ytd-reel-item-renderer, ytd-compact-playlist-renderer, ytd-playlist-renderer, ytd-grid-playlist-renderer, ytd-grid-show-renderer, ytd-structured-description-video-lockup-renderer, ytd-hero-playlist-thumbnail-renderer"
+    ? "ytd-rich-grid-media, ytd-video-renderer, ytd-movie-renderer, ytd-compact-video-renderer, ytd-compact-radio-renderer, ytd-compact-movie-renderer, ytd-playlist-video-renderer, ytd-playlist-panel-video-renderer, ytd-grid-video-renderer, ytd-grid-movie-renderer, ytd-rich-grid-slim-media, ytd-radio-renderer, ytd-reel-item-renderer, ytd-compact-playlist-renderer, ytd-playlist-renderer, ytd-grid-playlist-renderer, ytd-grid-show-renderer, ytd-structured-description-video-lockup-renderer, ytd-hero-playlist-thumbnail-renderer, ytd-rich-item-renderer"
     : "ytm-video-with-context-renderer, ytm-compact-radio-renderer, ytm-reel-item-renderer, ytm-channel-featured-video-renderer, ytm-compact-video-renderer, ytm-playlist-video-renderer, .playlist-immersive-header-content, ytm-compact-playlist-renderer, ytm-video-card-renderer, ytm-vertical-list-renderer, ytm-playlist-panel-video-renderer";
 
 export const watchPageThumbnailSelector = ".ytp-cued-thumbnail-overlay";
@@ -217,7 +217,7 @@ export function getLinkElement(element: HTMLElement, brandingLocation: BrandingL
     switch (brandingLocation) {
         case BrandingLocation.Related:
             if (!onMobile()) {
-                const link = element.querySelector("a#thumbnail") as HTMLAnchorElement;
+                const link = element.querySelector("a#thumbnail, a.reel-item-endpoint") as HTMLAnchorElement;
                 if (link) {
                     return link;
                 } else if (element.nodeName === "YTD-HERO-PLAYLIST-THUMBNAIL-RENDERER") {