feat(Thumbnail): Support sources in Thumbnail.fromResponse (#552)

src/parser/classes/ChannelExternalLinkView.ts

@@ -15,6 +15,6 @@ export default class ChannelExternalLinkView extends YTNode {
 
     this.title = Text.fromAttributed(data.title);
     this.link = Text.fromAttributed(data.link);
-    this.favicon = data.favicon.sources.map((x: any) => new Thumbnail(x)).sort((a: Thumbnail, b: Thumbnail) => b.width - a.width);
+    this.favicon = Thumbnail.fromResponse(data.favicon);
   }
 }

src/parser/classes/ContentPreviewImageView.ts

@@ -10,7 +10,7 @@ export default class ContentPreviewImageView extends YTNode {
 
   constructor(data: RawNode) {
     super();
-    this.image = data.image.sources.map((x: any) => new Thumbnail(x)).sort((a: Thumbnail, b: Thumbnail) => b.width - a.width);
+    this.image = Thumbnail.fromResponse(data.image);
     this.style = data.style;
   }
 }

src/parser/classes/HighlightsCarousel.ts

@@ -1,4 +1,5 @@
 import NavigationEndpoint from './NavigationEndpoint.js';
+import Thumbnail from './misc/Thumbnail.js';
 import { YTNode, observe } from '../helpers.js';
 import { type RawNode } from '../index.js';
 
@@ -6,11 +7,7 @@ export class Panel extends YTNode {
   static type = 'Panel';
 
   thumbnail?: {
-    image: {
-      url: string;
-      width: number;
-      height: number;
-    }[];
+    image: Thumbnail[];
     endpoint: NavigationEndpoint;
     on_long_press_endpoint: NavigationEndpoint;
     content_mode: string;
@@ -18,16 +15,8 @@ export class Panel extends YTNode {
   };
 
   background_image: {
-    image: {
-      url: string;
-      width: number;
-      height: number;
-    }[];
-    gradient_image: {
-      url: string;
-      width: number;
-      height: number;
-    }[];
+    image: Thumbnail[];
+    gradient_image: Thumbnail[];
   };
 
   strapline: string;
@@ -48,7 +37,7 @@ export class Panel extends YTNode {
 
     if (data.thumbnail) {
       this.thumbnail = {
-        image: data.thumbnail.image.sources,
+        image: Thumbnail.fromResponse(data.thumbnail.image),
         endpoint: new NavigationEndpoint(data.thumbnail.onTap),
         on_long_press_endpoint: new NavigationEndpoint(data.thumbnail.onLongPress),
         content_mode: data.thumbnail.contentMode,
@@ -57,8 +46,8 @@ export class Panel extends YTNode {
     }
 
     this.background_image = {
-      image: data.backgroundImage.image.sources,
-      gradient_image: data.backgroundImage.gradientImage.sources
+      image: Thumbnail.fromResponse(data.backgroundImage.image),
+      gradient_image: Thumbnail.fromResponse(data.backgroundImage.gradientImage)
     };
 
     this.strapline = data.strapline;

src/parser/classes/MusicLargeCardItemCarousel.ts

@@ -1,4 +1,5 @@
 import NavigationEndpoint from './NavigationEndpoint.js';
+import Thumbnail from './misc/Thumbnail.js';
 import { YTNode } from '../helpers.js';
 import type { RawNode } from '../index.js';
 
@@ -21,11 +22,7 @@ class ActionButton {
 class Panel {
   static type = 'Panel';
 
-  image: {
-    url: string;
-    width: number;
-    height: number;
-  }[];
+  image: Thumbnail[];
 
   content_mode: string;
   crop_options: string;
@@ -34,7 +31,7 @@ class Panel {
   action_buttons: ActionButton[];
 
   constructor (data: RawNode) {
-    this.image = data.image.image.sources;
+    this.image = Thumbnail.fromResponse(data.image.image);
     this.content_mode = data.image.contentMode;
     this.crop_options = data.image.cropOptions;
     this.image_aspect_ratio = data.imageAspectRatio;

src/parser/classes/VideoAttributeView.ts

@@ -10,9 +10,7 @@ import Thumbnail from './misc/Thumbnail.js';
 export default class VideoAttributeView extends YTNode {
   static type = 'VideoAttributeView';
 
-  image: ContentPreviewImageView | {
-    sources: Thumbnail[];
-  } | null;
+  image: ContentPreviewImageView | Thumbnail[] | null;
   image_style: string;
   title: string;
   subtitle: string;
@@ -26,11 +24,9 @@ export default class VideoAttributeView extends YTNode {
 
   constructor(data: RawNode) {
     super();
-    // @NOTE: "image" is not a renderer so not sure why we're parsing it as one. Leaving this hack here for now to avoid breaking things.
+
     if (data.image?.sources) {
-      this.image = {
-        sources: data.image.sources.map((x: any) => new Thumbnail(x)).sort((a: Thumbnail, b: Thumbnail) => b.width - a.width)
-      };
+      this.image = Thumbnail.fromResponse(data.image);
     } else {
       this.image = Parser.parseItem(data.image, ContentPreviewImageView);
     }

src/parser/classes/misc/Thumbnail.ts

@@ -15,7 +15,20 @@ export default class Thumbnail {
    * Get thumbnails from response object.
    */
   static fromResponse(data: any): Thumbnail[] {
-    if (!data || !data.thumbnails) return [];
-    return data.thumbnails.map((x: any) => new Thumbnail(x)).sort((a: Thumbnail, b: Thumbnail) => b.width - a.width);
+    if (!data) return [];
+
+    let thumbnail_data;
+
+    if (data.thumbnails) {
+      thumbnail_data = data.thumbnails;
+    } else if (data.sources) {
+      thumbnail_data = data.sources;
+    }
+
+    if (thumbnail_data) {
+      return thumbnail_data.map((x: any) => new Thumbnail(x)).sort((a: Thumbnail, b: Thumbnail) => b.width - a.width);
+    }
+
+    return [];
   }
 }