feat(multistream): relax primary platform requirement

app/components-react/pages/onboarding/PrimaryPlatformSelect.tsx

@@ -16,9 +16,10 @@ import { useVuex, useWatchVuex } from 'components-react/hooks';
 
 export function PrimaryPlatformSelect() {
   const { UserService, OnboardingService } = Services;
-  const { linkedPlatforms, isLogin } = useVuex(() => ({
+  const { linkedPlatforms, isLogin, isPrime } = useVuex(() => ({
     linkedPlatforms: UserService.views.linkedPlatforms,
     isLogin: OnboardingService.state.options.isLogin,
+    isPrime: UserService.state.isPrime,
   }));
   const { loading, authInProgress, authPlatform, finishSLAuth } = useModule(LoginModule);
   const platforms = ['twitch', 'youtube', 'facebook', 'twitter', 'tiktok', 'trovo'];
@@ -62,17 +63,22 @@ export function PrimaryPlatformSelect() {
 
   // There's probably a better way to do this
   useEffect(() => {
-    // If user has exactly one streaming platform linked, we can proceed straight
-    // to a logged in state.
-    if (UserService.views.linkedPlatforms.length === 1) {
+    /*
+     * Per new requirements, we automatically select a platform for the user since they
+     * are now able to switch them off from the Go Live window. This makes this component
+     * obsolete except for the case where the user has no linked accounts at all.
+     */
+    // TODO: we're still doing render side-effects here, which is not ideal
+    if (UserService.views.linkedPlatforms.length) {
       selectPrimary(UserService.views.linkedPlatforms[0]);
       return;
     }
 
+    // TODO: This is probably dead code now
     if (linkedPlatforms.length) {
       setSelectedPlatform(linkedPlatforms[0]);
     }
-  }, [linkedPlatforms.length]);
+  }, [linkedPlatforms.length, isPrime]);
 
   // You may be confused why this component doesn't ever call `next()` to
   // continue to the next step.  The index-based step system makes this more

app/components-react/root/Chat.tsx

@@ -22,15 +22,6 @@ export default function Chat(props: {
 
   let leaveFullScreenTrigger: Function;
 
-  const showTikTokInfo =
-    props.visibleChat === 'tiktok' ||
-    (props.visibleChat === 'default' &&
-      Services.UserService.state.auth?.primaryPlatform === 'tiktok');
-
-  const setTikTokChat =
-    Services.UserService.state.auth?.primaryPlatform === 'tiktok' &&
-    props.visibleChat === 'restream';
-
   // Setup resize/fullscreen listeners
   useEffect(() => {
     resizeInterval = window.setInterval(() => {
@@ -66,9 +57,6 @@ export default function Chat(props: {
     const cancelUnload = onUnload(() => service.actions.unmountChat(remote.getCurrentWindow().id));
 
     return () => {
-      if (setTikTokChat) {
-        props.setChat('tiktok');
-      }
       service.actions.unmountChat(remote.getCurrentWindow().id);
       cancelUnload();
     };
@@ -111,21 +99,5 @@ export default function Chat(props: {
     );
   }
 
-  return showTikTokInfo ? <TikTokChatInfo /> : <div className={styles.chat} ref={chatEl} />;
-}
-
-function TikTokChatInfo() {
-  function openPlatformDash() {
-    remote.shell.openExternal(Services.TikTokService.dashboardUrl);
-  }
-  return (
-    <div style={{ display: 'flex', flexDirection: 'column', marginTop: '30px' }}>
-      <div style={{ marginBottom: '5px' }}>
-        {$t('Access chat for TikTok in the TikTok Live Center.')}
-      </div>
-      <Button style={{ width: '200px', marginBottom: '10px' }} onClick={() => openPlatformDash()}>
-        {$t('Open TikTok Live Center')}
-      </Button>
-    </div>
-  );
+  return <div className={styles.chat} ref={chatEl} />;
 }

app/components-react/root/LiveDock.m.less

@@ -168,10 +168,7 @@
 
 .live-dock-platform-tools {
   .flex();
-
-  i {
-    padding-right: 8px;
-  }
+  gap: 16px;
 }
 
 .live-dock-chat-apps__popout {

app/components-react/root/LiveDock.tsx

@@ -7,7 +7,7 @@ import pick from 'lodash/pick';
 import { initStore, useController } from 'components-react/hooks/zustand';
 import { EStreamingState } from 'services/streaming';
 import { EAppPageSlot, ILoadedApp } from 'services/platform-apps';
-import { TPlatform, getPlatformService } from 'services/platforms';
+import { getPlatformService, TPlatform } from 'services/platforms';
 import { $t } from 'services/i18n';
 import { Services } from '../service-provider';
 import Chat from './Chat';
@@ -17,6 +17,7 @@ import PlatformAppPageView from 'components-react/shared/PlatformAppPageView';
 import { useVuex } from 'components-react/hooks';
 import { useRealmObject } from 'components-react/hooks/realm';
 import { $i } from 'services/utils';
+import { TikTokChatInfo } from './TiktokChatInfo';
 
 const LiveDockCtx = React.createContext<LiveDockController | null>(null);
 
@@ -323,6 +324,30 @@ function LiveDock(p: { onLeft: boolean }) {
     });
   }
 
+  const chat = useMemo(() => {
+    const primaryChat = Services.UserService.state.auth!.primaryPlatform;
+    const showTiktokInfo = visibleChat === 'tiktok' || primaryChat === 'tiktok';
+
+    if (showTiktokInfo && !isRestreaming) {
+      return <TikTokChatInfo />;
+    }
+
+    const showInstagramInfo = primaryChat === 'instagram';
+    if (showInstagramInfo) {
+      // FIXME: empty tab
+      return <></>;
+    }
+
+    return (
+      <Chat
+        restream={isRestreaming && visibleChat === 'restream'}
+        key={visibleChat}
+        visibleChat={visibleChat}
+        setChat={setChat}
+      />
+    );
+  }, [Services.UserService.state.auth!.primaryPlatform, visibleChat]);
+
   return (
     <div
       className={cx(styles.liveDock, {
@@ -429,14 +454,7 @@ function LiveDock(p: { onLeft: boolean }) {
                       )}
                     </div>
                   )}
-                  {!applicationLoading && !collapsed && (
-                    <Chat
-                      restream={isRestreaming && visibleChat === 'restream'}
-                      key={visibleChat}
-                      visibleChat={visibleChat}
-                      setChat={setChat}
-                    />
-                  )}
+                  {!applicationLoading && !collapsed && chat}
                   {!['default', 'restream'].includes(visibleChat) && (
                     <PlatformAppPageView
                       className={styles.liveDockPlatformAppWebview}

app/components-react/root/TiktokChatInfo.tsx

@@ -0,0 +1,34 @@
+import * as remote from '@electron/remote';
+import { Services } from '../service-provider';
+import { $t } from '../../services/i18n';
+import { Button } from 'antd';
+import React from 'react';
+
+export function TikTokChatInfo() {
+  function openPlatformDash() {
+    remote.shell.openExternal(Services.TikTokService.dashboardUrl);
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: '30px',
+      }}
+    >
+      <div style={{ marginBottom: '5px' }}>
+        {$t('Access chat for TikTok in the TikTok Live Center.')}
+      </div>
+      <Button
+        style={{
+          width: '200px',
+          marginBottom: '10px',
+        }}
+        onClick={() => openPlatformDash()}
+      >
+        {$t('Open TikTok Live Center')}
+      </Button>
+    </div>
+  );
+}

app/components-react/shared/PlatformLogo.m.less

@@ -45,6 +45,7 @@
   height: 40px;
   background-size: contain;
   background-repeat: no-repeat;
+  vertical-align: middle;
 
   &.twitter--black {
     background-image: url(https://slobs-cdn.streamlabs.com/media/twitter-logo-black.png);

app/components-react/sidebar/NavTools.tsx

@@ -14,6 +14,7 @@ import PlatformLogo from 'components-react/shared/PlatformLogo';
 import SubMenu from 'components-react/shared/SubMenu';
 import MenuItem from 'components-react/shared/MenuItem';
 import UltraIcon from 'components-react/shared/UltraIcon';
+import PlatformIndicator from './PlatformIndicator';
 
 export default function SideNav() {
   const {
@@ -77,6 +78,12 @@ export default function SideNav() {
 
   const throttledOpenDashboard = throttle(openDashboard, 2000, { trailing: false });
 
+  // Instagram doesn't provide a username, since we're not really linked, pass undefined for a generic logout msg w/o it
+  const username =
+    isLoggedIn && UserService.views.auth!.primaryPlatform !== 'instagram'
+      ? UserService.username
+      : undefined;
+
   function openHelp() {
     UsageStatisticsService.actions.recordClick('SideNav2', 'help');
     remote.shell.openExternal(
@@ -195,7 +202,7 @@ export default function SideNav() {
         showModal={showModal}
         handleAuth={handleAuth}
         handleShowModal={handleShowModal}
-        username={UserService.username}
+        username={username}
       />
     </>
   );
@@ -258,6 +265,11 @@ function LogoutModal(p: {
   handleShowModal: (status: boolean) => void;
   username?: string;
 }) {
+  const { username } = p;
+  const confirmMsg = username
+    ? $t('Are you sure you want to log out %{username}?', { username })
+    : $t('Are you sure you want to log out?');
+
   return (
     <Modal
       footer={null}
@@ -268,9 +280,7 @@ function LogoutModal(p: {
     >
       <Form className={styles.confirmLogout}>
         <h2>{$t('Confirm')}</h2>
-        {$t('Are you sure you want to log out %{username}?', {
-          username: p.username,
-        })}
+        {confirmMsg}
         <div className={styles.buttons}>
           <Button onClick={() => p.handleAuth()}>{$t('Yes')}</Button>
           <Button onClick={() => p.handleShowModal(false)}>{$t('No')}</Button>
@@ -307,21 +317,7 @@ function LoginMenuItem(p: {
       {!isLoggedIn ? (
         <span className={styles.loggedOut}>{menuTitles(menuItem.key)}</span>
       ) : (
-        isOpen && (
-          <>
-            {platform && (
-              <PlatformLogo
-                platform={platform?.type!}
-                className={cx(
-                  styles.platformLogo,
-                  styles[`platform-logo-${platform?.type ?? 'default'}`],
-                )}
-              />
-            )}
-            <span className={styles.username}>{platform?.username || $t('Log Out')}</span>
-            <i className={cx('icon-logout', styles.loginArrow)} />
-          </>
-        )
+        isOpen && <PlatformIndicator platform={platform} />
       )}
     </MenuItem>
   );

app/components-react/sidebar/PlatformIndicator.m.less

@@ -0,0 +1,75 @@
+// TODO: these are duplicated from NavTools.m.less, consider refactoring out if not needed there
+.platform-logo {
+  margin-right: 10px;
+
+  &-twitch {
+    color: var(--twitch) !important;
+  }
+  &-youtube {
+    color: var(--youtube) !important;
+  }
+  &-facebook {
+    color: var(--facebook) !important;
+  }
+  &-trovo, &-twitter, &-tiktok, &-instagram {
+    width: 15px;
+    height: 15px;
+  }
+  &-tiktok {
+    color: var(--tiktok) !important;
+  }
+  &-streamlabs {
+    color: var(--teal) !important;
+  }
+  &-default {
+    color: var(--logged-in) !important;
+  }
+}
+
+.username {
+  margin-bottom: 0px;
+  flex-grow: 1;
+  line-height: 20px;
+  margin: 2px 0 0 0;
+}
+
+.login-arrow {
+  justify-self: flex-end;
+  margin-left: 5px;
+  transform: scaleX(-1);
+  -moz-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transition: all 0.2s ease-in-out;
+}
+
+.platform-icons {
+  display: flex;
+  flex-direction: row;
+  gap: 1px;
+  align-items: center;
+  justify-content: center;
+
+  // Override the zooming effect applied to sidebar icons
+  i {
+    &,
+    &:hover {
+      transform: none !important;
+      transition: none !important;
+    }
+  }
+
+  // Custom destination icon
+  :global(.fa-globe) {
+    margin-right: 10px;
+  }
+
+  :global(.fa-globe) {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--icon) !important;
+    }
+  }
+}