feat(parser): Add ListView, ListItemView and SubscribeButtonView (#1025)

src/parser/classes/DialogView.ts

@@ -3,6 +3,7 @@ import { Parser, type RawNode } from '../index.js';
 import DialogHeaderView from './DialogHeaderView.js';
 import FormFooterView from './FormFooterView.js';
 import CreatePlaylistDialogFormView from './CreatePlaylistDialogFormView.js';
+import ListView from './ListView.js';
 import PanelFooterView from './PanelFooterView.js';
 
 export default class DialogView extends YTNode {
@@ -10,12 +11,12 @@ export default class DialogView extends YTNode {
 
   public header: DialogHeaderView | null;
   public footer: FormFooterView | PanelFooterView | null;
-  public custom_content: CreatePlaylistDialogFormView | null;
+  public custom_content: CreatePlaylistDialogFormView | ListView | null;
 
   constructor (data: RawNode) {
     super();
     this.header = Parser.parseItem(data.header, DialogHeaderView);
     this.footer = Parser.parseItem(data.footer, [ FormFooterView, PanelFooterView ]);
-    this.custom_content = Parser.parseItem(data.customContent, CreatePlaylistDialogFormView);
+    this.custom_content = Parser.parseItem(data.customContent, [ CreatePlaylistDialogFormView, ListView ]);
   }
 }

src/parser/classes/ListItemView.ts

@@ -0,0 +1,32 @@
+import type { ObservedArray } from '../helpers.js';
+import type { RawNode } from '../types/RawResponse.js';
+import { YTNode } from '../helpers.js';
+import { Parser } from '../index.js';
+
+import AvatarView from './AvatarView.js';
+import RendererContext from './misc/RendererContext.js';
+import SubscribeButtonView from './SubscribeButtonView.js';
+import Text from './misc/Text.js';
+
+export default class ListItemView extends YTNode {
+  static type = 'ListItemView';
+
+  public title: Text;
+  public subtitle: Text;
+  public leading_accessory: AvatarView | null;
+  public renderer_context: RendererContext;
+  public trailing_buttons?: ObservedArray<SubscribeButtonView>;
+
+  constructor(data: RawNode) {
+    super();
+
+    this.title = Text.fromAttributed(data.title);
+    this.subtitle = Text.fromAttributed(data.subtitle);
+    this.leading_accessory = Parser.parseItem(data.leadingAccessory, AvatarView);
+    this.renderer_context = new RendererContext(data.rendererContext);
+
+    if ('trailingButtons' in data) {
+      this.trailing_buttons = Parser.parseArray(data.trailingButtons.buttons, SubscribeButtonView);
+    }
+  }
+}

src/parser/classes/ListView.ts

@@ -0,0 +1,18 @@
+import type { ObservedArray } from '../helpers.js';
+import type { RawNode } from '../types/RawResponse.js';
+import { YTNode } from '../helpers.js';
+import { Parser } from '../index.js';
+
+import ListItemView from './ListItemView.js';
+
+export default class ListView extends YTNode {
+  static type = 'ListView';
+
+  public items: ObservedArray<ListItemView>;
+
+  constructor(data: RawNode) {
+    super();
+
+    this.items = Parser.parseArray(data.listItems, ListItemView);
+  }
+}

src/parser/classes/SubscribeButtonView.ts

@@ -0,0 +1,70 @@
+import type { RawNode } from '../types/RawResponse.js';
+import { YTNode } from '../helpers.js';
+import NavigationEndpoint from './NavigationEndpoint.js';
+
+interface ButtonContent {
+  button_text: string;
+  accessibility_text: string;
+  image_name: string;
+  subscribe_state_subscribed: boolean;
+  endpoint: NavigationEndpoint;
+}
+
+export default class SubscribeButtonView extends YTNode {
+  static type = 'SubscribeButtonView';
+
+  public subscribe_button_content: ButtonContent;
+  public unsubscribe_button_content: ButtonContent;
+  public disable_notification_bell: boolean;
+  public button_style: {
+    unsubscribed_state_style: string;
+    subscribed_state_style: string;
+  };
+  public is_signed_out: boolean;
+  public background_style: string;
+  public disable_subscribe_button: boolean;
+  public on_show_subscription_options: NavigationEndpoint;
+  public channel_id: string;
+  public enable_subscribe_button_post_click_animation: boolean;
+  public bell_accessiblity_data: {
+    off_label: string;
+    all_label: string;
+    occasional_label: string;
+    disabled_label: string;
+  };
+
+  constructor(data: RawNode) {
+    super();
+
+    this.subscribe_button_content = this.#parseButtonContent(data.subscribeButtonContent);
+    this.unsubscribe_button_content = this.#parseButtonContent(data.unsubscribeButtonContent);
+
+    this.disable_notification_bell = data.disableNotificationBell;
+    this.button_style = {
+      unsubscribed_state_style: data.buttonStyle.unsubscribedStateStyle,
+      subscribed_state_style: data.buttonStyle.subscribedStateStyle
+    };
+    this.is_signed_out = data.isSignedOut;
+    this.background_style = data.backgroundStyle;
+    this.disable_subscribe_button = data.disableSubscribeButton;
+    this.on_show_subscription_options = new NavigationEndpoint(data.onShowSubscriptionOptions);
+    this.channel_id = data.channelId;
+    this.enable_subscribe_button_post_click_animation = data.enableSubscribeButtonPostClickAnimation;
+    this.bell_accessiblity_data = {
+      off_label: data.bellAccessibilityData.offLabel,
+      all_label: data.bellAccessibilityData.allLabel,
+      occasional_label: data.bellAccessibilityData.occasionalLabel,
+      disabled_label: data.bellAccessibilityData.disabledLabel
+    };
+  }
+
+  #parseButtonContent(data: RawNode): ButtonContent {
+    return {
+      button_text: data.buttonText,
+      accessibility_text: data.accessibilityText,
+      image_name: data.imageName,
+      subscribe_state_subscribed: data.subscribeState.subscribed,
+      endpoint: new NavigationEndpoint(data.onTapCommand)
+    };
+  }
+}