Add timestamp to Redirect/Summary banners with the time they happened (if timestamps are on)

Author: FlaminSarge

src/components/ChatSummary.svelte

@@ -5,11 +5,14 @@
   import Icon from 'smelte/src/components/Icon';
   import { Theme } from '../ts/chat-constants';
   import { createEventDispatcher } from 'svelte';
+  import { showTimestamps } from '../ts/storage';
 
   export let summary: Ytc.ParsedSummary;
 
   let dismissed = false;
   let shorten = false;
+  $: actionId = summary?.actionId || '';
+  $: showtime = summary?.showtime || 0;
   let autoHideTimeout: NodeJS.Timeout | null = null;
   const classes = 'rounded inline-flex flex-col overflow-visible ' +
    'bg-secondary-900 p-2 w-full text-white z-10 shadow';
@@ -22,11 +25,11 @@
     }
   };
 
-  $: if (summary) {
+  $: if (actionId) {
     dismissed = false;
     shorten = false;
-    if (summary.showtime) {
-      autoHideTimeout = setTimeout(() => { shorten = true; }, summary.showtime);
+    if (showtime) {
+      autoHideTimeout = setTimeout(() => { shorten = true; }, showtime);
     }
   }
 
@@ -55,6 +58,11 @@
             <span class="align-middle">{run.text}</span>
           {/if}
         {/each}
+        {#if summary.timestamp && $showTimestamps}
+          <span class="text-xs ml-1 text-gray-400 dark:text-gray-600 align-middle">
+            {summary.timestamp}
+          </span>
+        {/if}
       </div>
       <div class="flex-none self-end" style="transform: translateY(3px);">
         <Tooltip offsetY={0} small>

src/components/RedirectBanner.svelte

@@ -2,16 +2,18 @@
   import { slide, fade } from 'svelte/transition';
   import MessageRun from './MessageRuns.svelte';
   import Tooltip from './common/Tooltip.svelte';
+  import Button from 'smelte/src/components/Button';
   import Icon from 'smelte/src/components/Icon';
   import { Theme } from '../ts/chat-constants';
   import { createEventDispatcher } from 'svelte';
-  import { showProfileIcons } from '../ts/storage';
-  import Button from 'smelte/src/components/Button';
+  import { showProfileIcons, showTimestamps } from '../ts/storage';
 
   export let redirect: Ytc.ParsedRedirect;
 
   let dismissed = false;
   let shorten = false;
+  $: actionId = redirect?.actionId || '';
+  $: showtime = redirect?.showtime || 0;
   let autoHideTimeout: NodeJS.Timeout | null = null;
   const classes = 'rounded inline-flex flex-col overflow-visible ' +
    'bg-secondary-900 p-2 w-full text-white z-10 shadow';
@@ -24,11 +26,11 @@
     }
   };
 
-  $: if (redirect) {
+  $: if (actionId) {
     dismissed = false;
     shorten = false;
-    if (redirect.showtime) {
-      autoHideTimeout = setTimeout(() => { shorten = true; }, redirect.showtime);
+    if (showtime) {
+      autoHideTimeout = setTimeout(() => { shorten = true; }, showtime);
     }
   }
 
@@ -53,6 +55,11 @@
           </Icon>
         </span>
         <span class="align-middle">Live Redirect Notice</span>
+        {#if redirect.timestamp && $showTimestamps}
+          <span class="text-xs ml-1 text-gray-400 dark:text-gray-600 align-middle">
+            {redirect.timestamp}
+          </span>
+        {/if}
       </div>
       <div class="flex-none self-end" style="transform: translateY(3px);">
         <Tooltip offsetY={0} small>

src/ts/chat-parser.ts

@@ -103,6 +103,7 @@ const parseChatSummary = (renderer: Ytc.AddChatItem, actionId: string, showtime:
       message: splitRuns[2],
     },
     showtime: showtime,
+    timestamp: formatTimestamp(Date.now() * 1000),
   };
   return item;
 }
@@ -132,6 +133,7 @@ const parseRedirectBanner = (renderer: Ytc.AddChatItem, actionId: string, showti
       }
     },
     showtime: showtime,
+    timestamp: formatTimestamp(Date.now() * 1000),
   };
   return item;
 }

src/ts/typings/ytc.d.ts

@@ -489,6 +489,7 @@ declare namespace Ytc {
       message: ParsedRun[];
     };
     showtime: number;
+    timestamp?: string;
   }
 
   interface ParsedRedirect {
@@ -503,6 +504,7 @@ declare namespace Ytc {
       }
     };
     showtime: number;
+    timestamp?: string;
   }
 
   interface ParsedPoll {