search

grubeninspekteur / BetterRBTV

Web extension for YouTube Live chats.
MIT License
21 stars 6 forks source link

For reference: YT VIP message markup #57

Closed DoomDesign closed 5 years ago

DoomDesign commented 7 years ago

To use and access a rather rare event in the chat, the YT native pinned VIP message, I copied the markup and post it here for reference.

The pinned VIP message, a direct child of the div#contents:

<yt-live-chat-legacy-paid-message-renderer id="ChwKGkNOcXJoczdzNXRBQ0ZRWlFUZ29kTENVTFhn" class="style-scope yt-live-chat-item-list-renderer x-scope yt-live-chat-legacy-paid-message-renderer-1">
    <img is="yt-img" id="author-photo" height="40" width="40" class="style-scope yt-live-chat-legacy-paid-message-renderer no-transition" src="https://yt3.ggpht.com/-GjvvaMg05eM/AAAAAAAAAAI/AAAAAAAAAAA/W-Owf4_SX2I/s32-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" loaded="">
    <div id="content" class="style-scope yt-live-chat-legacy-paid-message-renderer">
      <div id="author-name" class="style-scope yt-live-chat-legacy-paid-message-renderer">7h34p3</div>
      <div id="event-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">Neuer VIP!</div>
      <div id="detail-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">Herzlich willkommen 7h34p3!</div>
    </div>
    <div id="menu" class="style-scope yt-live-chat-legacy-paid-message-renderer">
      <paper-icon-button id="menu-button" icon="yt-icons:more_vert" class="style-scope yt-live-chat-legacy-paid-message-renderer x-scope paper-icon-button-1" role="button" tabindex="0" aria-disabled="false"><iron-icon id="icon" class="style-scope paper-icon-button x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon">
        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope iron-icon"></path>
      </g></svg>

  </iron-icon></paper-icon-button>
    </div>
</yt-live-chat-legacy-paid-message-renderer>

And this is the markup INSIDE the chat, between all the regular messages:

<yt-live-chat-legacy-paid-message-renderer class="style-scope yt-live-chat-item-list-renderer x-scope yt-live-chat-legacy-paid-message-renderer-0" id="ChwKGkNOcXJoczdzNXRBQ0ZRWlFUZ29kTENVTFhn">
    <img is="yt-img" id="author-photo" height="40" width="40" class="style-scope yt-live-chat-legacy-paid-message-renderer no-transition" src="https://yt3.ggpht.com/-GjvvaMg05eM/AAAAAAAAAAI/AAAAAAAAAAA/W-Owf4_SX2I/s32-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" loaded="">
    <div id="content" class="style-scope yt-live-chat-legacy-paid-message-renderer">
      <div id="author-name" class="style-scope yt-live-chat-legacy-paid-message-renderer">7h34p3</div>
      <div id="event-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">Neuer VIP!</div>
      <div id="detail-text" class="style-scope yt-live-chat-legacy-paid-message-renderer">Herzlich willkommen 7h34p3!</div>
    </div>
    <div id="menu" class="style-scope yt-live-chat-legacy-paid-message-renderer">
      <paper-icon-button id="menu-button" icon="yt-icons:more_vert" class="style-scope yt-live-chat-legacy-paid-message-renderer x-scope paper-icon-button-1" role="button" tabindex="0" aria-disabled="false"><iron-icon id="icon" class="style-scope paper-icon-button x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon">
        <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" class="style-scope iron-icon"></path>
      </g></svg>

  </iron-icon></paper-icon-button>
    </div>
</yt-live-chat-legacy-paid-message-renderer>
grubeninspekteur commented 5 years ago

Closing since the markup has changed since 2016.