Support new format for shorts videos in feeds

ajayyy · Sep 15, 2024 · b0a8b36 · b0a8b36
1 parent e099155
commit b0a8b36
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 5 deletions.
diff --git a/maze-utils b/maze-utils
diff --git 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
@@ -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
@@ -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
@@ -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") {