toggle membership gifting

src/components/AlertDialog.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import {
+    alertDialog
+  } from '../ts/storage';
+  import Dialog from './common/Dialog.svelte';
+  import Button from 'smelte/src/components/Button';
+</script>
+<Dialog active={Boolean($alertDialog)} noCloseButton class="z-50">
+  <svelte:fragment slot="title">{$alertDialog?.title}</svelte:fragment>
+  <div>
+    {$alertDialog?.message}
+  </div>
+  <div slot="actions">
+    <Button on:click={() => {
+      $alertDialog = null;
+    }} color="primary">OK</Button>
+  </div>
+</Dialog>

src/components/GiftedMembershipToggle.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { port } from '../ts/storage';
+  import { toggleMembershipGifting } from '../ts/chat-actions';
+  import { mdiCogOutline } from '@mdi/js';
+  import {
+    isYtFrame
+  } from '../ts/chat-constants';
+</script>
+
+{#if isYtFrame}
+  <div
+    on:click={() => {
+      toggleMembershipGifting($port);
+    }}
+    style="transform: translateX(3.5px);"
+    class="rounded-full flex justify-center items-center cursor-pointer w-8 h-8">
+      <svg viewBox="0 0 24 24" style="height: 20px;">
+        <path d={mdiCogOutline} fill="white" />
+      </svg>
+  </div>
+{/if}

src/components/Hyperchat.svelte

@@ -9,6 +9,7 @@
   import PaidMessage from './PaidMessage.svelte';
   import MembershipItem from './MembershipItem.svelte';
   import ReportBanDialog from './ReportBanDialog.svelte';
+  import AlertDialog from './AlertDialog.svelte';
   import SuperchatViewDialog from './SuperchatViewDialog.svelte';
   import StickyBar from './StickyBar.svelte';
   import {
@@ -235,6 +236,15 @@
           );
         }
         break;
+      case 'toggleMembershipGiftingResponse':
+        if (!response.success) {
+          $alertDialog = {
+            title: 'Error',
+            message: "Please try again from YouTube's membership settings interface.",
+            color: 'error'
+          };
+        }
+        break;
       case 'registerClientResponse':
         break;
       default:
@@ -341,6 +351,7 @@
 
 <ReportBanDialog />
 <SuperchatViewDialog />
+<AlertDialog />
 
 <svelte:window on:resize={() => {
   scrollToBottom();

src/components/MembershipItem.svelte

@@ -3,6 +3,7 @@
   import MessageRun from './MessageRuns.svelte';
   import { showProfileIcons } from '../ts/storage';
   import { membershipBackground, milestoneChatBackground } from '../ts/chat-constants';
+  import GiftedMembershipToggle from './GiftedMembershipToggle.svelte';
 
   export let message: Ytc.ParsedMessage;
 
@@ -21,7 +22,7 @@
 {#if membership || membershipGift}
   <div class={classes} style="background-color: #{membershipBackground};">
     <div
-      class="p-2"
+      class="p-2 relative"
       style="{isMilestoneChat ? `background-color: #${milestoneChatBackground};` : ''}"
     >
       {#if $showProfileIcons}
@@ -44,11 +45,14 @@
         <MessageRun runs={membership.headerSubtext} />
       {/if}
       {#if membershipGift}
-        <img
-          class="h-10 w-10 float-right"
-          src={membershipGift.image.src}
-          alt={membershipGift.image.alt}
-          title={membershipGift.image.alt} />
+        <div class="float-right inline-flex flex-row items-center">
+          <img
+            class="h-10 w-10"
+            src={membershipGift.image.src}
+            alt={membershipGift.image.alt}
+            title={membershipGift.image.alt} />
+          <GiftedMembershipToggle />
+        </div>
       {/if}
     </div>
     {#if isMilestoneChat}

src/components/ReportBanDialog.svelte

@@ -4,8 +4,7 @@
     chatReportUserOptions
   } from '../ts/chat-constants';
   import {
-    reportDialog,
-    alertDialog
+    reportDialog
   } from '../ts/storage';
   import Dialog from './common/Dialog.svelte';
   import type { Writable } from 'svelte/store';
@@ -30,15 +29,3 @@
     }} color="error" disabled={!$optionStore}>Report</Button>
   </div>
 </Dialog>
-
-<Dialog active={Boolean($alertDialog)} noCloseButton>
-  <svelte:fragment slot="title">{$alertDialog?.title}</svelte:fragment>
-  <div>
-    {$alertDialog?.message}
-  </div>
-  <div slot="actions">
-    <Button on:click={() => {
-      $alertDialog = null;
-    }} color="primary">OK</Button>
-  </div>
-</Dialog>

src/components/SuperchatViewDialog.svelte

@@ -2,7 +2,7 @@
   import {
     focusedSuperchat
   } from '../ts/storage';
-  import Dialog from './common/Dialog.svelte';
+  import TransparentDialog from './common/TransparentDialog.svelte';
   import PaidMessage from './PaidMessage.svelte';
   import MembershipItem from './MembershipItem.svelte';
 
@@ -14,21 +14,10 @@
   $: if (!open) closeDialog();
 </script>
 
-<Dialog bind:active={open} noCloseButton class="no-padding">
+<TransparentDialog bind:open>
   {#if ('superChat' in sc || 'superSticker' in sc)}
     <PaidMessage message={sc} />
   {:else}
     <MembershipItem message={sc} />
   {/if}
-</Dialog>
-
-<style>
-  :global(.no-padding>div):nth-child(1), :global(.no-padding>div):nth-child(3) {
-    display: none;
-  }
-  :global(.no-padding) {
-    padding: 0px !important;
-    margin: 1rem !important;
-    background-color: transparent !important;
-  }
-</style>
+</TransparentDialog>

src/components/common/TransparentDialog.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import Dialog from './Dialog.svelte';
+  export let open = false;
+</script>
+
+<Dialog bind:active={open} noCloseButton class="no-padding">
+  <slot />
+</Dialog>
+
+<style>
+  :global(.no-padding>div):nth-child(1), :global(.no-padding>div):nth-child(3) {
+    display: none;
+  }
+  :global(.no-padding) {
+    padding: 0px !important;
+    margin: 1rem !important;
+    background-color: transparent !important;
+  }
+</style>

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "HyperChat by LiveTL",
   "homepage_url": "https://livetl.app/en/hyperchat/",
   "description": "YouTube chat, but it's fast and sleek!",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "permissions": [
     "storage"
   ],

src/scripts/chat-background.ts

@@ -379,6 +379,26 @@ const sendChatUserActionResponse = (
   );
 };
 
+const toggleMembershipGifting = (
+  port: Chat.Port,
+  message: Chat.toggleMembershipGiftingMsg
+): void => {
+  const interceptor = findInterceptorFromClient(port);
+  interceptor?.port?.postMessage(message);
+};
+
+const sendMembershipGiftingResponse = (
+  port: Chat.Port,
+  message: Chat.toggleMembershipGiftingResponse
+): void => {
+  const interceptor = findInterceptorFromPort(port, { message });
+  if (!interceptor) return;
+
+  interceptor.clients.forEach(
+    (clientPort) => clientPort.postMessage(message)
+  );
+};
+
 chrome.runtime.onConnect.addListener((port) => {
   port.onMessage.addListener((message: Chat.BackgroundMessage) => {
     switch (message.type) {
@@ -415,6 +435,12 @@ chrome.runtime.onConnect.addListener((port) => {
       case 'chatUserActionResponse':
         sendChatUserActionResponse(port, message);
         break;
+      case 'toggleMembershipGifting':
+        toggleMembershipGifting(port, message);
+        break;
+      case 'toggleMembershipGiftingResponse':
+        sendMembershipGiftingResponse(port, message);
+        break;
       default:
         console.error('Unknown message type', port, message);
         break;

src/scripts/chat-injector.ts

@@ -46,6 +46,10 @@ const chatLoaded = async (): Promise<void> => {
   const params = new URLSearchParams();
   params.set('tabid', frameInfo.tabId.toString());
   params.set('frameid', frameInfo.frameId.toString());
+  try {
+    params.set('isYtFrame', window.parent.location.href !== window.location.href ? '1' : '0');
+  } catch {
+  }
   if (frameIsReplay) params.set('isReplay', 'true');
   const source = chrome.runtime.getURL(
     (isLiveTL ? 'hyperchat/index.html' : 'hyperchat.html') +