Partial membership gift support

src/components/Hyperchat.svelte

@@ -299,7 +299,7 @@
   const containerClass = 'h-screen w-screen text-black dark:text-white dark:bg-black dark:bg-opacity-25 flex flex-col justify-between';
 
   const isSuperchat = (action: Chat.MessageAction) => (action.message.superChat || action.message.superSticker);
-  const isMembership = (action: Chat.MessageAction) => (action.message.membership);
+  const isMembership = (action: Chat.MessageAction) => (action.message.membership || action.message.membershipGiftPurchase);
 
   $: $useSystemEmojis, onRefresh();
 

src/components/MembershipItem.svelte

@@ -1,30 +1,28 @@
 <script lang="ts">
   import Message from './Message.svelte';
   import MessageRun from './MessageRuns.svelte';
-  import { focusedSuperchat, showProfileIcons } from '../ts/storage';
+  import { showProfileIcons } from '../ts/storage';
+  import { membershipBackground, milestoneChatBackground } from '../ts/chat-constants';
 
-  export let message: Ytc.ParsedTimedItem;
-  export let chip = false;
-  export let detailText: string = '';
-  export let fillPortion = 1;
+  export let message: Ytc.ParsedMessage;
 
-  const classes = `inline-flex flex-col rounded text-white ${chip ? 'w-fit whitespace-nowrap' : 'w-full break-words'}`;
+  const classes = 'inline-flex flex-col rounded break-words overflow-hidden w-full text-white';
 
   $: membership = message.membership;
-  $: if (!membership) {
+  $: membershipGift = message.membershipGiftPurchase;
+  $: if (!(membership || membershipGift)) {
     console.error('Not a membership item', { message });
   }
   $: isMilestoneChat = message.message.length > 0;
+
+  $: primaryText = (membership || membershipGift)?.headerPrimaryText;
 </script>
 
-{#if membership}
-  <div class={classes} style={chip ? '' : 'background-color: #0f9d58;'}>
+{#if membership || membershipGift}
+  <div class={classes} style="background-color: #{membershipBackground};">
     <div
-      class="relative {chip ? 'rounded-full flex items-center cursor-pointer w-max p-1.5 overflow-hidden' : 'rounded p-2'}"
-      style="background-color: #{isMilestoneChat ? '107516' : '0f9d58'};"
-      on:click={() => {
-        if (chip) $focusedSuperchat = message;
-      }}
+      class="p-2"
+      style="{isMilestoneChat ? `background-color: #${milestoneChatBackground};` : ''}"
     >
       {#if $showProfileIcons}
         <img
@@ -33,29 +31,27 @@
           alt={message.author.profileIcon.alt}
         />
       {/if}
-      {#if chip}
-        <div class="absolute top-0 right-0 h-full" style="
-          background-color: rgba(0, 0, 0, 0.1);
-          width: {Math.round(fillPortion * 100)}%;
-        " />
+      <span class="font-bold tracking-wide align-middle mr-3">
+        {message.author.name}
+      </span>
+      {#if primaryText && primaryText.length > 0}
+        <MessageRun
+          class="font-medium mr-3"
+          runs={primaryText}
+        />
       {/if}
-      {#if !chip}
-        <span class="font-bold tracking-wide mr-3 align-middle">
-          {message.author.name}
-        </span>
-        {#if membership.headerPrimaryText.length > 0}
-          <MessageRun
-            class="font-medium mr-3 align-middle"
-            runs={membership.headerPrimaryText}
-          />
-        {/if}
+      {#if membership}
         <MessageRun runs={membership.headerSubtext} />
       {/if}
-      {#if chip && detailText}
-        <span class="font-bold align-middle">{detailText}</span>
+      {#if membershipGift}
+        <img
+          class="h-10 w-10 float-right"
+          src={membershipGift.image.src}
+          alt={membershipGift.image.alt}
+          title={membershipGift.image.alt} />
       {/if}
     </div>
-    {#if !chip && isMilestoneChat}
+    {#if isMilestoneChat}
       <div class="p-2">
         <Message message={message} hideName />
       </div>

src/components/Message.svelte

@@ -128,7 +128,16 @@
       </span>
       <span class="mr-1.5" class:hidden={!showUserMargin} />
     {/if}
-    <MessageRun runs={message.message} {forceDark} deleted={deleted != null} {forceTLColor} />
+    <MessageRun
+      runs={message.message}
+      {forceDark}
+      deleted={deleted != null}
+      {forceTLColor}
+      class={message.membershipGiftRedeem ? 'text-gray-700 dark:text-gray-600 italic font-medium' : ''}
+    />
+    {#if message.membershipGiftRedeem}
+      <Icon class="inline align-middle ml-1 text-gray-700 dark:text-gray-600" small>redeem</Icon>
+    {/if}
   </div>
   {#if message.author.id !== $selfChannelId}
     <Menu items={menuItems} visible={$hoveredItem === message.messageId} class="mr-2 ml-auto context-menu">

src/components/PaidMessage.svelte

@@ -2,11 +2,9 @@
   import Message from './Message.svelte';
   import isDarkColor from 'is-dark-color';
   import { Theme } from '../ts/chat-constants';
-  import { focusedSuperchat, showProfileIcons } from '../ts/storage';
+  import { showProfileIcons } from '../ts/storage';
 
-  export let message: Ytc.ParsedTimedItem;
-  export let chip = false;
-  export let fillPortion = 1;
+  export let message: Ytc.ParsedMessage;
 
   let headerStyle = '';
 
@@ -23,41 +21,27 @@
     headerStyle = '';
   }
 
-  const classes = `inline-flex flex-col rounded ${chip ? 'w-fit whitespace-nowrap' : 'w-full break-words'}`;
+  const classes = 'inline-flex flex-col rounded break-words overflow-hidden w-full';
 
   $: if (!paid) {
     console.error('Not a paid message', { message });
   }
 </script>
 
 {#if paid}
-  <div class={classes} style={(chip ? '' : backgroundColor) + textColor}>
-    <div
-      class="relative {chip ? 'rounded-full items-center flex cursor-pointer w-max p-1.5 overflow-hidden' : 'rounded p-2'}"
-      style={headerStyle}
-      on:click={() => {
-        if (chip) $focusedSuperchat = message;
-      }}
-    >
+  <div class={classes} style={backgroundColor + textColor}>
+    <div class="p-2" style={headerStyle}>
       {#if $showProfileIcons}
         <img
           class="h-5 w-5 inline align-middle rounded-full flex-none mr-1"
           src={message.author.profileIcon.src}
           alt={message.author.profileIcon.alt}
         />
       {/if}
-      {#if chip}
-        <div class="absolute top-0 right-0 h-full" style="
-          background-color: rgba(0, 0, 0, 0.1);
-          width: {Math.round(fillPortion * 100)}%;
-        " />
-      {/if}
-      <span class="underline font-bold align-middle">{amount}</span>
-      {#if !chip}
-        <span class="font-bold tracking-wide" style={nameColor}>
-          {message.author.name}
-        </span>
-      {/if}
+      <span class="mr-1 underline font-bold">{amount}</span>
+      <span class="font-bold tracking-wide" style={nameColor}>
+        {message.author.name}
+      </span>
       {#if message.superSticker}
         <img
           class="h-10 w-10 float-right"
@@ -66,7 +50,7 @@
           title={message.superSticker.alt} />
       {/if}
     </div>
-    {#if !chip && message.message.length > 0}
+    {#if message.message.length > 0}
       <div class="p-2">
         <Message message={message} hideName forceTLColor={
           isDarkColor(`#${message.superChat?.headerTextColor}`) ? Theme.LIGHT : Theme.DARK

src/components/StickyBar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
   import dark from 'smelte/src/dark';
   import { stickySuperchats, currentProgress } from '../ts/storage';
-  import TimedItem from './TimedItem.svelte';
   import { onDestroy, onMount } from 'svelte';
+  import Chip from './TickerChip.svelte';
 
   const isDark = dark();
   let scrollableElem: HTMLDivElement;
@@ -52,13 +52,10 @@
       "
     >
       {#each $stickySuperchats as sc (sc.messageId)}
-        <span class="mx-0.5 h-8 mt-1">
-          <TimedItem
-            item={sc}
-            chip
-            fillPortion={Math.max(0, (($currentProgress || 0) - sc.showtime / 1000) / sc.tickerDuration)}
-          />
-        </span>
+        <Chip
+          item={sc}
+          fillPortion={Math.max(0, (($currentProgress || 0) - sc.showtime / 1000) / sc.tickerDuration)}
+        />
       {/each}
     </div>
   </div>

src/components/SuperchatViewDialog.svelte

@@ -3,7 +3,9 @@
     focusedSuperchat
   } from '../ts/storage';
   import Dialog from './common/Dialog.svelte';
-  import TimedItem from './TimedItem.svelte';
+  import PaidMessage from './PaidMessage.svelte';
+  import MembershipItem from './MembershipItem.svelte';
+
   $: sc = $focusedSuperchat as Ytc.ParsedTimedItem;
   let open = false;
   const openDialog = () => (open = true);
@@ -13,7 +15,11 @@
 </script>
 
 <Dialog bind:active={open} noCloseButton class="no-padding">
-  <TimedItem item={sc}  />
+  {#if ('superChat' in sc || 'superSticker' in sc)}
+    <PaidMessage message={sc} />
+  {:else}
+    <MembershipItem message={sc} />
+  {/if}
 </Dialog>
 
 <style>

src/components/TickerChip.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { focusedSuperchat, showProfileIcons } from '../ts/storage';
+  import { membershipBackground, milestoneChatBackground } from '../ts/chat-constants';
+  import Icon from './common/Icon.svelte';
+
+  export let item: Ytc.ParsedTicker;
+  export let fillPortion = 1;
+
+  let backgroundColor = '';
+  $: if (item.membership && item.message.length > 0) {
+    backgroundColor = milestoneChatBackground;
+  } else if (item.membership || item.membershipGiftPurchase) {
+    backgroundColor = membershipBackground;
+  } else if (item.superChat) {
+    backgroundColor = item.superChat.bodyBackgroundColor;
+  }
+
+  const classes = 'h-8 mx-0.5 relative rounded-full flex flex-none items-center cursor-pointer p-1.5 text-white overflow-hidden whitespace-nowrap';
+</script>
+
+<div
+  class="{classes} {$$props.class ?? ''}"
+  style="background-color: #{backgroundColor}; {$$props.style ?? ''}"
+  on:click={() => ($focusedSuperchat = item)}
+>
+  {#if $showProfileIcons}
+    <img
+      class="h-5 w-5 inline align-middle rounded-full flex-none mr-1"
+      src={item.author.profileIcon.src}
+      alt={item.author.profileIcon.alt}
+    />
+  {/if}
+  <div class="absolute top-0 right-0 h-full" style="
+    background-color: rgba(0, 0, 0, 0.1);
+    width: {Math.round(fillPortion * 100)}%;
+  " />
+  {#if item.membershipGiftPurchase}
+    <Icon class="inline align-middle mr-1" small>redeem</Icon>
+  {/if}
+  <span
+    class="font-bold align-middle {item.superChat ? 'underline' : ''}"
+    style={item.superChat ? `color: #${item.superChat?.bodyTextColor}` : ''}
+  >
+    {item.detailText ?? item.superChat?.amount}
+  </span>
+</div>

src/components/common/Dialog.svelte

@@ -11,7 +11,7 @@
   export let bgColor = 'bg-white dark:bg-dark-800';
   export let noCloseButton = false;
   $: classes = `items-center z-50 rounded p-4 shadow ${bgColor}` +
-    ' max-h-full overflow-y-auto ' +
+    ' max-h-full overflow-y-auto text-xs ' +
     (expandWidth ? 'w-full mx-2 ' : ' ') +
     ($$props.class ?? '');
 </script>

src/ts/chat-constants.ts

@@ -98,3 +98,6 @@ export const chatUserActionsItems = [
     }
   }
 ];
+
+export const membershipBackground = '0f9d58';
+export const milestoneChatBackground = '107516';