add sort time option + minor ui changes

LiveTL · Jun 9, 2024 · c6e8530 · c6e8530
1 parent ce0208b
commit c6e8530
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 18 deletions.
diff --git a/src/components/Hyperchat.svelte b/src/components/Hyperchat.svelte
@@ -519,6 +519,27 @@
     el.value = 'export';
   };
 
+  const sortMessagesByShowtime = () => {
+    messageActions = messageActions.sort((a, b) => {
+      if (isWelcome(a)) return -1;
+      if (isWelcome(b)) return 1;
+      return a.message.showtime - b.message.showtime;
+    });
+  };
+
+  const executeActions = (e: any) => {
+    const el = (e.target as HTMLSelectElement);
+    switch (el.value) {
+      case 'sort':
+        sortMessagesByShowtime();
+        break;
+      case 'clear':
+        clearMessages();
+        break;
+    }
+    el.value = 'actions';
+  };
+
   let archiveEmbedFrame = '';
 
   const executeImport = async (e: any) => {
@@ -639,18 +660,20 @@
   $: showWelcome = $initialized && (messageActions.length === 0 && !paramsArchiveKey);
 
   const clearMessages = () => {
-    $confirmDialog = {
-      action: {
-        callback: () => {
-          messageKeys.clear();
-          messageActions = [];
-        },
-        text: 'Clear'
-      },
-      message: UNDONE_MSG,
-      title: 'Clear Messages?'
-    };
-    scrollToBottom();
+    // $confirmDialog = {
+    //   action: {
+    //     callback: () => {
+    //       messageKeys.clear();
+    //       messageActions = [];
+    //     },
+    //     text: 'Clear'
+    //   },
+    //   message: UNDONE_MSG,
+    //   title: 'Clear Messages?'
+    // };
+    // scrollToBottom();
+    messageKeys.clear();
+    messageActions = [];
   };
   let key = '';
   const initMessageStorage = async () => {
@@ -802,26 +825,36 @@
         <option value="textfile">TXT</option>
         <option value="jsondump">JSON</option>
       </select>
-      <button use:exioButton on:click={clearMessages} class="whitespace-nowrap" disabled={showWelcome}>
+      <select use:exioDropdown style="width: 74px;" on:change={executeActions}>
+        <option selected disabled value="actions">Actions</option>
+        <option value="sort">Sort Time</option>
+        <option value="clear">Clear All</option>
+      </select>
+      <!-- <button use:exioButton on:click={clearMessages} class="whitespace-nowrap" disabled={showWelcome}>
         Clear
         <div use:exioIcon class="shifted-icon inline-block" style="color: inherit;">
           close
         </div>
-      </button>
+      </button> -->
       {#if isPopout}
         <button use:exioButton on:click={openSettings} class="inline-flex gap-1 items-center">
           Settings
           <div use:exioIcon class="inline-block" style="color: inherit;">
             settings
           </div>
         </button>
-      {:else}
+      {:else if !paramsArchiveKey}
         <button use:exioButton on:click={toggleTopBar} class="inline-flex gap-1 items-center">
           Menu
           <div use:exioIcon class="inline-block" style="color: inherit;">
             unfold_{topBarVisible ? 'less' : 'more'}_double
           </div>
         </button>
+        <!-- <button use:exioButton on:click={toggleTopBar} class="inline-flex gap-1 items-center">
+          <div use:exioIcon class="inline-block text-error-500 dark:text-error-200">
+            close
+          </div>
+        </button> -->
       {/if}
     </div>
   </div>

diff --git a/src/components/MembershipItem.svelte b/src/components/MembershipItem.svelte
@@ -31,7 +31,8 @@
     >
       {#if $showProfileIcons}
         <img
-          class="h-5 w-5 inline align-middle rounded-full flex-none mr-1"
+          class="h-5 w-5 inline align-middle rounded-full flex-none whitespace-nowrap overflow-hidden mr-1"
+          style="text-indent: 100%; max-width: 1.25rem;"
           src={message.author.profileIcon.src}
           alt={message.author.profileIcon.alt}
         />

diff --git a/src/components/Message.svelte b/src/components/Message.svelte
@@ -95,7 +95,8 @@
       target="_blank"
     >
       <img
-        class="h-5 w-5 inline align-middle rounded-full flex-none"
+        class="h-5 w-5 inline align-middle rounded-full flex-none whitespace-nowrap overflow-hidden"
+        style="text-indent: 100%; max-width: 1.25rem;"
         src={message.author.profileIcon.src}
         alt={message.author.profileIcon.alt}
       />

diff --git a/src/components/TickerChip.svelte b/src/components/TickerChip.svelte
@@ -25,7 +25,8 @@
 >
   {#if $showProfileIcons}
     <img
-      class="h-5 w-5 inline align-middle rounded-full flex-none mr-1"
+      class="h-5 w-5 inline align-middle rounded-full flex-none whitespace-nowrap overflow-hidden mr-1"
+      style="text-indent: 100%; max-width: 1.25rem;"
       src={item.author.profileIcon.src}
       alt={item.author.profileIcon.alt}
     />

diff --git a/src/scripts/chat-injector.ts b/src/scripts/chat-injector.ts
@@ -146,6 +146,7 @@ const chatLoaded = async (): Promise<void> => {
     if (forceClose || ytcfilterElement.style.display === 'block') {
       activatorText.textContent = 'Embed';
       activatorIcon.textContent = 'expand';
+      // activatorButton.disabled = false;
       ytcfilterElement.style.display = 'none';
       resizeBar.style.display = 'none';
       ytcfilterElement.style.display = 'none';
@@ -156,6 +157,7 @@ const chatLoaded = async (): Promise<void> => {
     }
     activatorText.textContent = 'Hide';
     activatorIcon.textContent = 'cancel_presentation';
+    // activatorButton.disabled = true;
     ytcfilterElement.style.display = 'block';
     resizeBar.style.display = 'flex';
     if (frame && frame.src !== source) {