feat(RichRenderers): Parse more UI elements

YouTube is currently A/B testing a new You/Library page that uses RichShelf nodes instead of Shelf. There are no major visual changes, other than the page being much more responsive due to how RichShelf is styled.

Author: LuanRT

src/parser/classes/RichSection.ts

@@ -4,10 +4,17 @@ import { Parser, type RawNode } from '../index.js';
 export default class RichSection extends YTNode {
   static type = 'RichSection';
 
-  content: YTNode;
+  public content: YTNode;
+  public full_bleed: boolean;
+  public target_id?: string;
 
   constructor(data: RawNode) {
     super();
     this.content = Parser.parseItem(data.content);
+    this.full_bleed = !!data.fullBleed;
+
+    if ('targetId' in data) {
+      this.target_id = data.targetId;
+    }
   }
 }

src/parser/classes/RichShelf.ts

@@ -1,27 +1,50 @@
-import { YTNode, type ObservedArray } from '../helpers.js';
+import { type ObservedArray, YTNode } from '../helpers.js';
 import { Parser, type RawNode } from '../index.js';
 import NavigationEndpoint from './NavigationEndpoint.js';
 import Text from './misc/Text.js';
 
 export default class RichShelf extends YTNode {
   static type = 'RichShelf';
 
-  title: Text;
-  contents: ObservedArray<YTNode>;
-  endpoint?: NavigationEndpoint;
-  subtitle?: Text;
-
+  public title: Text;
+  public contents: ObservedArray<YTNode>;
+  public endpoint?: NavigationEndpoint;
+  public subtitle?: Text;
+  public is_expanded: boolean;
+  public is_bottom_divider_hidden: boolean;
+  public is_top_divider_hidden: boolean;
+  public layout_sizing?: 'RICH_GRID_LAYOUT_SIZING_UNSPECIFIED'
+    | 'RICH_GRID_LAYOUT_SIZING_STANDARD'
+    | 'RICH_GRID_LAYOUT_SIZING_COMPACT'
+    | 'RICH_GRID_LAYOUT_SIZING_EXTRA_COMPACT'
+    | 'RICH_GRID_LAYOUT_SIZING_TINY';
+  public menu: YTNode | null;
+  public next_button: YTNode | null;
+  public previous_button: YTNode | null;
+  
   constructor(data: RawNode) {
     super();
     this.title = new Text(data.title);
     this.contents = Parser.parseArray(data.contents);
 
-    if (Reflect.has(data, 'endpoint')) {
+    this.is_expanded = !!data.is_expanded;
+    this.is_bottom_divider_hidden = !!data.isBottomDividerHidden;
+    this.is_top_divider_hidden = !!data.isTopDividerHidden;
+
+    if ('endpoint' in data) {
       this.endpoint = new NavigationEndpoint(data.endpoint);
     }
 
-    if (Reflect.has(data, 'subtitle')) {
+    if ('subtitle' in data) {
       this.subtitle = new Text(data.subtitle);
     }
+
+    if ('layoutSizing' in data) {
+      this.layout_sizing = data.layoutSizing;
+    }
+    
+    this.menu = Parser.parseItem(data.menu);
+    this.next_button = Parser.parseItem(data.nextButton);
+    this.previous_button = Parser.parseItem(data.previousButton);
   }
 }