fix: insert CSS unconditionally in overlay (#4987)

stream-labs · May 2, 2024 · 013a7d5 · 013a7d5
1 parent c4c5a4c
commit 013a7d5
Showing 1 changed file with 19 additions and 26 deletions.
diff --git a/app/services/game-overlay/index.ts b/app/services/game-overlay/index.ts
@@ -48,34 +48,27 @@ const hideInteraction = `
   /* Recent Events */
   sheet.insertRule('.recent-events__header, .recent-events__tabs, .popout--recent-events { display: none !important; }');
 
-  // Twitch Chat
-  const twitchChatContainer = document.querySelector('#root .stream-chat');
-
-  if (twitchChatContainer) {
-    // Header
-    sheet.insertRule('.stream-chat .stream-chat-header { display: none !important; }', sheet.cssRules.length);
-    // Chat Input
-    sheet.insertRule('.stream-chat .chat-input { display: none !important; }', sheet.cssRules.length);
-  }
+  /* Twitch Chat */
+  // Header
+  sheet.insertRule('.stream-chat .stream-chat-header { display: none !important; }', sheet.cssRules.length);
+  // Chat Input
+  sheet.insertRule('.stream-chat .chat-input { display: none !important; }', sheet.cssRules.length);
 
-  // Trovo Chat
+  /* Trovo Chat */
   // Fix chat container that's cut off on Game Overlay's 300px wide window
-  const trovoChatContainer = document.querySelector('#__layout .popout-container .chat-wrap');
-  if (trovoChatContainer) {
-    /* 
-     * The input box is rendered way after this code runs, insert a CSS rule to hide it instead of 
-     * manipulating style directly since we will never find the element here. 
-     * Since we're using CSSStyleSheet we add the rest of the rules here. 
-     * 
-     * 1. Fix chat wrapper width.
-     * 2. Hide chat input panel.
-     * 3. Hide all headers, including Gift Rank.
-     */
-    sheet.insertRule('#__layout .popout-container .chat-wrap { min-width: 300px }', sheet.cssRules.length);
-    sheet.insertRule('#__layout .popout-container .chat-wrap .chat-header { display: none }', sheet.cssRules.length);
-    sheet.insertRule('#__layout .popout-container .input-panels-container { display: none }', sheet.cssRules.length);
-    sheet.insertRule('#__layout .popout-container .gift-rank-header { display: none }', sheet.cssRules.length);
-  }
+  /* 
+   * The input box is rendered way after this code runs, insert a CSS rule to hide it instead of 
+   * manipulating style directly since we will never find the element here. 
+   * Since we're using CSSStyleSheet we add the rest of the rules here. 
+   * 
+   * 1. Fix chat wrapper width.
+   * 2. Hide chat input panel.
+   * 3. Hide all headers, including Gift Rank.
+   */
+  sheet.insertRule('#__layout .popout-container .chat-wrap { min-width: 300px }', sheet.cssRules.length);
+  sheet.insertRule('#__layout .popout-container .chat-wrap .chat-header { display: none }', sheet.cssRules.length);
+  sheet.insertRule('#__layout .popout-container .input-panels-container { display: none }', sheet.cssRules.length);
+  sheet.insertRule('#__layout .popout-container .gift-rank-header { display: none }', sheet.cssRules.length);
 `;
 
 export enum EGameOverlayState {