Add auto-collapse capability to pinned messages based on timeout prov…

…ided by bannerProperties

Also updates the impl in ChatSummary

src/components/ChatSummary.svelte

@@ -20,7 +20,7 @@
       clearTimeout(autoHideTimeout);
       autoHideTimeout = null;
     }
-   };
+  };
 
   $: if (summary) {
     dismissed = false;

src/components/PinnedMessage.svelte

@@ -10,14 +10,24 @@
 
   let dismissed = false;
   let shorten = false;
+  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';
 
-  const onShorten = () => { shorten = !shorten; };
-
+  const onShorten = () => { 
+    shorten = !shorten;
+    if (autoHideTimeout) {
+      clearTimeout(autoHideTimeout);
+      autoHideTimeout = null;
+    }
+  };
+  
   $: if (pinned) {
     dismissed = false;
     shorten = false;
+    if (pinned.showtime) {
+      autoHideTimeout = setTimeout(() => { shorten = true; }, pinned.showtime);
+    }
   }
 
   const dispatch = createEventDispatcher();

src/ts/chat-parser.ts

@@ -74,7 +74,7 @@ const splitRunsByNewline = (runs: Ytc.ParsedRun[], maxSplit: number = -1): Ytc.P
     return acc;
   }, [[]]);
 
-const parseChatSummary = (renderer: Ytc.AddChatItem, isEphemeral: boolean, bannerTimeoutMs: number): Ytc.ParsedSummary | undefined => {
+const parseChatSummary = (renderer: Ytc.AddChatItem, showtime: number): Ytc.ParsedSummary | undefined => {
   if (!renderer.liveChatBannerChatSummaryRenderer) {
     return;
   }
@@ -101,7 +101,7 @@ const parseChatSummary = (renderer: Ytc.AddChatItem, isEphemeral: boolean, banne
       message: splitRuns[2],
     },
     id: baseRenderer.liveChatSummaryId,
-    showtime: isEphemeral ? bannerTimeoutMs : 0,
+    showtime: showtime,
   };
   return item;
 }
@@ -230,8 +230,14 @@ const parseMessageDeletedAction = (action: Ytc.MessageDeletedAction): Ytc.Parsed
 
 const parseBannerAction = (action: Ytc.AddPinnedAction): Ytc.ParsedPinned | Ytc.ParsedSummary | undefined => {
   const baseRenderer = action.bannerRenderer.liveChatBannerRenderer;
+
+  // fold both auto-disappear and auto-collapse into just collapse for showtime
+  const showtime = action.bannerProperties?.isEphemeral
+   ? (action.bannerProperties?.bannerTimeoutMs || 0)
+   : 1000 * (action.bannerProperties?.autoCollapseDelay?.seconds || baseRenderer.bannerProperties?.autoCollapseDelay?.seconds || 0);
+
   if (baseRenderer.contents.liveChatBannerChatSummaryRenderer) {
-    return parseChatSummary(baseRenderer.contents, action.bannerProperties?.isEphemeral ?? false, action.bannerProperties?.bannerTimeoutMs ?? 0);
+    return parseChatSummary(baseRenderer.contents, showtime);
   }
   const parsedContents = parseAddChatItemAction(
     { item: baseRenderer.contents }, true
@@ -246,7 +252,8 @@ const parseBannerAction = (action: Ytc.AddPinnedAction): Ytc.ParsedPinned | Ytc.
         baseRenderer.header.liveChatBannerHeaderRenderer.text.runs
       ),
       contents: parsedContents
-    }
+    },
+    showtime: showtime,
   };
 };
 

src/ts/typings/ytc.d.ts

@@ -86,11 +86,19 @@ declare namespace Ytc {
             text: RunsObj;
           };
         };
+        /** Gets used for pinned messages */
+        bannerProperties?: BannerPropertiesObj;
       };
     };
-    bannerProperties?: {
-      isEphemeral: boolean;
-      bannerTimeoutMs: number;
+    /** Gets used for chat summary/redirects */
+    bannerProperties?: BannerPropertiesObj;
+  }
+
+  interface BannerPropertiesObj {
+    isEphemeral?: boolean;
+    bannerTimeoutMs?: number;
+    autoCollapseDelay?: {
+      seconds: number;
     }
   }
 
@@ -378,6 +386,7 @@ declare namespace Ytc {
       header: ParsedRun[];
       contents: ParsedMessage;
     };
+    showtime: number;
   }
 
   interface ParsedSummary {