fix(multistreaming): filter out platforms that don't have chat

With Tiktok being part of the active platforms seemingly at all times, will make `PrimaryChatSwitcher` blow up since it doesn't technically support chat. We have refactored to make this explicit in code, by not only making sure that we only pass chat-enabled platforms to this component but also that we hide it if there's no other platform aside from the primary that could be set for primary chat. That is such the case for example when using Twitch as primary and also streaming to Tiktok.
stream-labs · Apr 22, 2024 · faa17ea · faa17ea
1 parent f1f9555
commit faa17ea
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/app/components-react/windows/go-live/EditStreamWindow.tsx b/app/components-react/windows/go-live/EditStreamWindow.tsx
@@ -29,9 +29,8 @@ export default function EditStreamWindow() {
     prepopulate,
     isLoading,
     form,
-    enabledPlatforms,
-    hasMultiplePlatforms,
-    isRestreamEnabled,
+    shouldShowPrimaryChatSwitcher,
+    chatPlatforms,
     primaryChat,
     setPrimaryChat,
   } = useGoLiveSettingsRoot({ isUpdateMode: true });
@@ -89,8 +88,6 @@ export default function EditStreamWindow() {
     );
   }
 
-  const shouldShowPrimaryChatSwitcher = isRestreamEnabled && hasMultiplePlatforms;
-
   return (
     <ModalLayout footer={renderFooter()}>
       <Form
@@ -109,7 +106,7 @@ export default function EditStreamWindow() {
               {shouldShowPrimaryChatSwitcher && (
                 <PrimaryChatSwitcher
                   layout="horizontal"
-                  enabledPlatforms={enabledPlatforms}
+                  chatPlatforms={chatPlatforms}
                   primaryChat={primaryChat}
                   onSetPrimaryChat={setPrimaryChat}
                 />

diff --git a/app/components-react/windows/go-live/GoLiveSettings.tsx b/app/components-react/windows/go-live/GoLiveSettings.tsx
@@ -36,9 +36,8 @@ export default function GoLiveSettings() {
     showSelector,
     showTweet,
     addDestination,
-    hasDestinations,
-    hasMultiplePlatforms,
-    enabledPlatforms,
+    shouldShowPrimaryChatSwitcher,
+    chatPlatforms,
     primaryChat,
     setPrimaryChat,
   } = useGoLiveSettings().extend(module => {
@@ -75,7 +74,6 @@ export default function GoLiveSettings() {
   const shouldShowSettings = !error && !isLoading;
   const shouldShowLeftCol = protectedModeEnabled;
   const shouldShowAddDestButton = canAddDestinations && isPrime;
-  const shouldShowPrimaryChatSwitcher = hasMultiplePlatforms;
 
   return (
     <Row gutter={16} style={{ height: 'calc(100% + 24px)' }}>
@@ -97,7 +95,7 @@ export default function GoLiveSettings() {
           </Scrollable>
           {shouldShowPrimaryChatSwitcher && (
             <PrimaryChatSwitcher
-              enabledPlatforms={enabledPlatforms}
+              chatPlatforms={chatPlatforms}
               onSetPrimaryChat={setPrimaryChat}
               primaryChat={primaryChat}
             />

diff --git a/app/components-react/windows/go-live/PrimaryChatSwitcher.tsx b/app/components-react/windows/go-live/PrimaryChatSwitcher.tsx
@@ -7,30 +7,31 @@ import PlatformLogo from 'components-react/shared/PlatformLogo';
 import { $t } from 'services/i18n';
 
 interface IPrimaryChatSwitcherProps {
-  enabledPlatforms: TPlatform[];
+  /** A filtered list of enabled platforms where all support chat **/
+  chatPlatforms: TPlatform[];
   primaryChat: TPlatform;
   onSetPrimaryChat: (platform: TPlatform) => void;
   style?: React.CSSProperties;
   layout?: 'vertical' | 'horizontal';
 }
 
 export default function PrimaryChatSwitcher({
-  enabledPlatforms,
+  chatPlatforms,
   primaryChat,
   onSetPrimaryChat,
   style = {},
   layout = 'vertical',
 }: IPrimaryChatSwitcherProps) {
   const primaryChatOptions = useMemo(
     () =>
-      enabledPlatforms.map(platform => {
+      chatPlatforms.map(platform => {
         const service = getPlatformService(platform);
         return {
           label: service.displayName,
           value: platform,
         };
       }),
-    [enabledPlatforms],
+    [chatPlatforms],
   );
 
   return (

diff --git a/app/components-react/windows/go-live/dual-output/DualOutputGoLiveSettings.tsx b/app/components-react/windows/go-live/dual-output/DualOutputGoLiveSettings.tsx
@@ -27,9 +27,8 @@ export default function DualOutputGoLiveSettings() {
     isLoading,
     isPrime,
     canUseOptimizedProfile,
-    isRestreamEnabled,
-    hasMultiplePlatforms,
-    enabledPlatforms,
+    shouldShowPrimaryChatSwitcher,
+    chatPlatforms,
     primaryChat,
     setPrimaryChat,
   } = useGoLiveSettings().extend(module => {
@@ -47,7 +46,6 @@ export default function DualOutputGoLiveSettings() {
     };
   });
 
-  const shouldShowPrimaryChatSwitcher = isRestreamEnabled && hasMultiplePlatforms;
   // TODO: make sure this doesn't jank the UI
   const leftPaneHeight = shouldShowPrimaryChatSwitcher ? '82%' : '100%';
 
@@ -62,7 +60,7 @@ export default function DualOutputGoLiveSettings() {
         {shouldShowPrimaryChatSwitcher && (
           <PrimaryChatSwitcher
             style={{ padding: '0 16px' }}
-            enabledPlatforms={enabledPlatforms}
+            chatPlatforms={chatPlatforms}
             primaryChat={primaryChat}
             onSetPrimaryChat={setPrimaryChat}
           />

diff --git a/app/components-react/windows/go-live/useGoLiveSettings.ts b/app/components-react/windows/go-live/useGoLiveSettings.ts
@@ -354,6 +354,17 @@ export class GoLiveSettingsModule {
   get isRestreamEnabled() {
     return Services.RestreamService.views.canEnableRestream;
   }
+
+  get chatPlatforms() {
+    return this.state.enabledPlatforms.filter(platform => {
+      const service = getPlatformService(platform);
+      return service.hasCapability('chat');
+    });
+  }
+  get shouldShowPrimaryChatSwitcher() {
+    // TODO: adjust for the tiktok scenarios if needed
+    return this.isRestreamEnabled && this.chatPlatforms.length > 1;
+  }
 }
 
 export function useGoLiveSettings() {