New channel member and super sticker support

[aaronpk]

New channel member and super sticker support

[dantz]

Since they should be the same color for every level that works for me. Thanks. One of my channel members is working on porting the script for Twitch as well.

[aaronpk]

Very nice! And nice lighting in your set!

I'm not sure new channel members is possible since this just takes the contents of the live chat web page and restyles it. I haven't seen new subscribers appear in the chat section. Stickers should work since they do show up there I think, I just haven't received any yet!

[dantz]

I wasn't not talking about subscribers but youtubes channel memberships. They definitely show up in the chat view since I tried memberships and stickers in my stream yesterday and both did nothing. I'll happily send a sticker your way in the next stream 😀

[aaronpk]

Ahh great! Testing this stuff is kind of hard since it's using the real YouTube page, one way I've found is to find a popular channels live stream and try things out with theirs. The other option would be to capture the html when you get a sticker or membership and we could try to style it offline

[aaronpk]

Grabbed the HTML of a new membership. The question is what this should look like!

<yt-live-chat-membership-item-renderer class="style-scope yt-live-chat-item-list-renderer show-comment" show-only-header="" id="ChwKGkNLMm8wcGVzc2VrQ0ZabWVnZ29kSkNvQlhB">

    <div id="card" class="style-scope yt-live-chat-membership-item-renderer">
      <div id="header" class="style-scope yt-live-chat-membership-item-renderer">
        
          <yt-img-shadow id="author-photo" height="40" width="40" class="style-scope yt-live-chat-membership-item-renderer no-transition" loaded="" style="background-color: transparent;"><img id="img" class="style-scope yt-img-shadow" alt="" height="40" width="40" src="https://yt3.ggpht.com/-16KI7qGXwpc/AAAAAAAAAAI/AAAAAAAAAAA/7azbvNTAx48/s32-c-k-no-mo-rj-c0xffffff/photo.jpg"></yt-img-shadow>
        <dom-if restamp="" class="style-scope yt-live-chat-membership-item-renderer"><template is="dom-if"></template></dom-if>
        <dom-if class="style-scope yt-live-chat-membership-item-renderer"><template is="dom-if"></template></dom-if>
        <div id="header-content" class="style-scope yt-live-chat-membership-item-renderer">
          <div id="header-content-primary-column" class="style-scope yt-live-chat-membership-item-renderer">
            <div id="header-content-inner-column" class="style-scope yt-live-chat-membership-item-renderer">
              
                <yt-live-chat-author-chip class="style-scope yt-live-chat-membership-item-renderer"><span id="author-name" dir="auto" class="member style-scope yt-live-chat-author-chip">Danny Grizzle<span id="chip-badges" class="style-scope yt-live-chat-author-chip"></span></span><span id="chat-badges" class="style-scope yt-live-chat-author-chip"><yt-live-chat-author-badge-renderer class="style-scope yt-live-chat-author-chip" aria-label="New member" type="member" shared-tooltip-text="New member"><div id="image" class="style-scope yt-live-chat-author-badge-renderer"><img src="https://yt3.ggpht.com/fh_jo83pw7D8us7s0MwuBWIKJrER3r0ccqNwym2CnaSFwIaiqID1b8S8pdstjewglw0wf3DPyg=s16-c-k" class="style-scope yt-live-chat-author-badge-renderer" alt="New member"></div></yt-live-chat-author-badge-renderer></span></yt-live-chat-author-chip>
              <dom-if restamp="" class="style-scope yt-live-chat-membership-item-renderer"><template is="dom-if"></template></dom-if>
              <div id="header-primary-text" class="style-scope yt-live-chat-membership-item-renderer"></div>
            </div>
            <div id="header-subtext" class="style-scope yt-live-chat-membership-item-renderer">Welcome to Early Access+Live Archive!</div>
          </div>
          <div id="timestamp" class="style-scope yt-live-chat-membership-item-renderer">10:17 AM</div>
        </div>
        <div id="menu" class="style-scope yt-live-chat-membership-item-renderer">
          <yt-icon-button id="menu-button" class="style-scope yt-live-chat-membership-item-renderer"><button id="button" class="style-scope yt-icon-button" aria-label="Comment actions">
            <yt-icon icon="more_vert" class="style-scope yt-live-chat-membership-item-renderer"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope yt-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope yt-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 yt-icon"></path>
      </g></svg>
    
    
  </yt-icon>
          </button></yt-icon-button>
        </div>
      </div>
      <div id="content" class="style-scope yt-live-chat-membership-item-renderer">
        <div id="message" dir="auto" class="style-scope yt-live-chat-membership-item-renderer"></div>
        <div id="input-container" class="style-scope yt-live-chat-membership-item-renderer">
          <dom-if class="style-scope yt-live-chat-membership-item-renderer"><template is="dom-if"></template></dom-if>
        </div>
        <yt-formatted-string id="deleted-state" class="style-scope yt-live-chat-membership-item-renderer"></yt-formatted-string>
      </div>
    </div>
    <div id="inline-action-button-container" class="style-scope yt-live-chat-membership-item-renderer" aria-hidden="true">
      <div id="inline-action-buttons" class="style-scope yt-live-chat-membership-item-renderer"></div>
    </div>
</yt-live-chat-membership-item-renderer>

[aaronpk]

I added initial support for new members in f007702. I couldn't get pulling the background color for memberships to work yet.

[aaronpk]

Closing this issue since it looks like this is working! If there are any bugs with membership messages please let me know in a new issue! Super sticker support is being tracked in #12