Remove duplicate chip code

Both files are reverted to pre #79
LiveTL · Jul 5, 2022 · ea81c15 · ea81c15
1 parent ef4e17b
commit ea81c15
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 58 deletions.
diff --git a/src/components/MembershipItem.svelte b/src/components/MembershipItem.svelte
@@ -1,14 +1,12 @@
 <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 } from '../ts/chat-constants';
 
   export let message: Ytc.ParsedTimedItem;
-  export let chip = false;
-  export let detailText: string = '';
-  export let fillPortion = 1;
 
-  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) {
@@ -18,13 +16,10 @@
 </script>
 
 {#if membership}
-  <div class={classes} style={chip ? '' : 'background-color: #0f9d58;'}>
+  <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: #107516;' : ''}"
     >
       {#if $showProfileIcons}
         <img
@@ -33,29 +28,18 @@
           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}
-      {#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}
-        <MessageRun runs={membership.headerSubtext} />
-      {/if}
-      {#if chip && detailText}
-        <span class="font-bold align-middle">{detailText}</span>
+      <span class="font-bold tracking-wide align-middle mr-3">
+        {message.author.name}
+      </span>
+      {#if membership.headerPrimaryText.length > 0}
+        <MessageRun
+          class="font-medium mr-3"
+          runs={membership.headerPrimaryText}
+        />
       {/if}
+      <MessageRun runs={membership.headerSubtext} />
     </div>
-    {#if !chip && isMilestoneChat}
+    {#if isMilestoneChat}
       <div class="p-2">
         <Message message={message} hideName />
       </div>

diff --git a/src/components/PaidMessage.svelte b/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