Fix inconsistent go live experiences with custom stream settings and … (#5500)

* Fix inconsistent go live experiences with custom stream settings and dual output

* Code review

* Don't move to video settings when enabling custom rtmp

* Keep stream settings open

* Fix console errors

* Port NavigationService to realm

* Remove unused function

* Fix CI error

Author: gettinToasty

app/components-react/editor/elements/SourceSelector.tsx

@@ -669,7 +669,7 @@ class SourceSelectorController {
         // only open video settings when toggling on dual output
         const skipShowVideoSettings = this.dualOutputService.views.dualOutputMode === true;
 
-        this.dualOutputService.actions.setDualOutputMode(
+        this.dualOutputService.actions.setDualOutputModeIfPossible(
           !this.dualOutputService.views.dualOutputMode,
           skipShowVideoSettings,
         );
@@ -708,7 +708,7 @@ class SourceSelectorController {
   handleAuth() {
     this.userService.actions.showLogin();
     const onboardingCompleted = Services.OnboardingService.onboardingCompleted.subscribe(() => {
-      Services.DualOutputService.actions.setDualOutputMode();
+      Services.DualOutputService.actions.setDualOutputModeIfPossible();
       Services.SettingsService.actions.showSettings('Video');
       onboardingCompleted.unsubscribe();
     });

app/components-react/shared/DualOutputToggle.tsx

@@ -57,7 +57,7 @@ export default function DualOutputToggle(p: IDualOutputToggleProps) {
     }
 
     // toggle dual output
-    DualOutputService.actions.setDualOutputMode(!v.dualOutputMode, true, true);
+    DualOutputService.actions.setDualOutputModeIfPossible(!v.dualOutputMode, true, true);
 
     if (v.dualOutputMode) {
       UsageStatisticsService.recordFeatureUsage('DualOutput');

app/components-react/sidebar/NavTools.tsx

@@ -101,7 +101,7 @@ export default function SideNav() {
 
   const handleAuth = () => {
     if (isLoggedIn) {
-      Services.DualOutputService.actions.setDualOutputMode(false, true);
+      Services.DualOutputService.actions.setDualOutputModeIfPossible(false, true);
       UserService.actions.logOut();
     } else {
       WindowsService.actions.closeChildWindow();

app/components-react/windows/go-live/GoLiveWindow.tsx

@@ -76,7 +76,7 @@ function ModalFooter() {
     },
 
     toggleDualOutputMode() {
-      this.dualOutputService.actions.setDualOutputMode(false, true, true);
+      this.dualOutputService.actions.setDualOutputModeIfPossible(false, true, true);
     },
 
     get horizontalHasTargets() {

app/components-react/windows/settings/Hotkeys.tsx

@@ -55,24 +55,35 @@ export default function Hotkeys(props: HotkeysProps) {
   const [hotkeySet, setHotkeysSet] = useState<IHotkeysSet | null>(null);
 
   useEffect(() => {
+    let isMounted = true;
     if (!hotkeySet) {
       // We don't want hotkeys registering while trying to bind.
       // We may change our minds on this in the future.
       HotkeysService.actions.unregisterAll();
 
       HotkeysService.actions.return
         .getHotkeysSet()
-        .then(setHotkeysSet)
+        .then((hotkeys: IHotkeysSet) => {
+          if (!isMounted) return;
+          setHotkeysSet(hotkeys);
+        })
         .then(() => highlightSearch(searchString));
     }
 
     return () => {
       if (hotkeySet) {
         HotkeysService.actions.applyHotkeySet(hotkeySet);
       }
+      isMounted = false;
     };
   }, [hotkeySet]);
 
+  // Highlight search results when the search string changes
+  useEffect(() => {
+    if (!searchString) return;
+    highlightSearch(searchString);
+  }, [searchString]);
+
   const emptyHotkeySet: IAugmentedHotkeySet = {
     general: {},
     sources: {},
@@ -117,9 +128,6 @@ export default function Hotkeys(props: HotkeysProps) {
     return filteredHotkeySet;
   }, [augmentedHotkeySet, searchString]);
 
-  // Highlight search results when the search string changes
-  useEffect(() => highlightSearch(searchString), [searchString]);
-
   if (!hotkeySet) {
     return <div />;
   }

app/components-react/windows/settings/Stream.tsx

@@ -109,6 +109,10 @@ class StreamSettingsModule {
     return Services.CustomizationService;
   }
 
+  private get dualOutputService() {
+    return Services.DualOutputService;
+  }
+
   // DEFINE MUTATIONS
 
   @mutation()
@@ -182,6 +186,9 @@ class StreamSettingsModule {
 
   disableProtectedMode() {
     this.streamSettingsService.actions.setSettings({ protectedModeEnabled: false });
+    if (this.dualOutputService.views.dualOutputMode) {
+      this.dualOutputService.actions.setDualOutputModeIfPossible(false, true);
+    }
   }
 
   enableProtectedMode() {

app/components-react/windows/settings/Video.tsx

@@ -389,7 +389,7 @@ class VideoSettingsModule {
    */
   setFPSType(value: EFPSType) {
     const obsSettings: ObsSetting[] = [
-      { key: 'fpsType', value: value },
+      { key: 'fpsType', value },
       { key: 'fpsNum', value: 30 },
       { key: 'fpsDen', value: 1 },
     ];
@@ -503,7 +503,7 @@ class VideoSettingsModule {
       }
 
       // toggle dual output
-      this.dualOutputService.actions.setDualOutputMode(
+      this.dualOutputService.actions.setDualOutputModeIfPossible(
         !this.dualOutputService.views.dualOutputMode,
       );
       this.state.setShowDualOutputSettings(!this.state.showDualOutputSettings);
@@ -527,7 +527,7 @@ class VideoSettingsModule {
     Services.WindowsService.actions.closeChildWindow();
     this.userService.actions.showLogin();
     const onboardingCompleted = Services.OnboardingService.onboardingCompleted.subscribe(() => {
-      Services.DualOutputService.actions.setDualOutputMode();
+      Services.DualOutputService.actions.setDualOutputModeIfPossible();
       Services.SettingsService.actions.showSettings('Video');
       onboardingCompleted.unsubscribe();
     });

app/components/windows/Main.vue.ts

@@ -32,8 +32,8 @@ Vue.use(VueResize);
 
 // Pages
 import { Inject } from '../../services/core/injector';
-import { CustomizationService, CustomizationState } from 'services/customization';
-import { NavigationService } from 'services/navigation';
+import { CustomizationService } from 'services/customization';
+import { NavigationService, TAppPage } from 'services/navigation';
 import { AppService } from 'services/app';
 import { UserService } from 'services/user';
 import { IModalOptions, WindowsService } from 'services/windows';
@@ -83,21 +83,26 @@ export default class Main extends Vue {
   };
 
   theme: Theme = 'night-theme';
+  page: TAppPage = 'Studio';
   minEditorWidth = 500;
 
   created() {
     window.addEventListener('resize', this.windowSizeHandler);
   }
 
-  unbind: () => void;
+  unbindCustomization: () => void;
+  unbindNavigation: () => void;
 
   mounted() {
-    this.unbind = this.customizationService.state.bindProps(this, {
+    this.unbindCustomization = this.customizationService.state.bindProps(this, {
       theme: 'theme',
       isDockCollapsed: 'livedockCollapsed',
       leftDock: 'leftDock',
       liveDockSize: 'livedockSize',
     });
+    this.unbindNavigation = this.navigationService.state.bindProps(this, {
+      page: 'currentPage',
+    });
 
     antdThemes[this.theme].use();
     WindowsService.modalChanged.subscribe(modalOptions => {
@@ -130,17 +135,14 @@ export default class Main extends Vue {
 
   destroyed() {
     window.removeEventListener('resize', this.windowSizeHandler);
-    this.unbind();
+    this.unbindCustomization();
+    this.unbindNavigation();
   }
 
   get title() {
     return this.windowsService.state.main.title;
   }
 
-  get page() {
-    return this.navigationService.state.currentPage;
-  }
-
   get params() {
     return this.navigationService.state.params;
   }
@@ -174,7 +176,7 @@ export default class Main extends Vue {
   leftDock = false;
 
   get isOnboarding() {
-    return this.navigationService.state.currentPage === 'Onboarding';
+    return this.page === 'Onboarding';
   }
 
   get platformApps() {

app/components/windows/settings/Settings.vue

@@ -6,7 +6,11 @@
     :contentStyles="{ padding: '0' }"
   >
     <div slot="content" class="settings">
-      <NavMenu v-model="categoryName" class="settings-nav">
+      <NavMenu
+        :value="currentSettingsTab"
+        @input="cat => setCategoryName(cat)"
+        class="settings-nav"
+      >
         <scrollable style="height: 100%" :isResizable="false">
           <form-input
             :value="searchStr"
@@ -73,7 +77,7 @@
       <scrollable className="settings-container">
         <searchable-pages
           ref="settingsContainer"
-          :page="categoryName"
+          :page="currentSettingsTab"
           :pages="categoryNames"
           :searchStr="searchStr"
           :onBeforePageScan="onBeforePageScanHandler"

app/components/windows/settings/Settings.vue.ts

@@ -29,6 +29,7 @@ import { $t } from 'services/i18n';
 import { debounce } from 'lodash-decorators';
 import * as remote from '@electron/remote';
 import Utils from '../../../services/utils';
+import { NavigationService } from 'app-services';
 
 @Component({
   components: {
@@ -57,6 +58,7 @@ export default class Settings extends Vue {
   @Inject() userService: UserService;
   @Inject() dismissablesService: DismissablesService;
   @Inject() dualOutputService: DualOutputService;
+  @Inject() navigationService: NavigationService;
 
   $refs: { settingsContainer: HTMLElement & SearchablePages };
 
@@ -88,34 +90,38 @@ export default class Settings extends Vue {
     ['Appearance']: EDismissable.CustomMenuSettings,
   };
 
-  internalCategoryName: string = null;
-
   created() {
     // Make sure we have the latest settings
     this.settingsService.actions.loadSettingsIntoStore();
   }
 
+  currentSettingsTab = 'General';
+
+  unbind: () => void;
+
+  mounted() {
+    this.unbind = this.navigationService.state.bindProps(this, {
+      currentSettingsTab: 'currentSettingsTab',
+    });
+  }
+
+  destroyed() {
+    this.unbind();
+  }
+
   /**
    * Whether we have built a cache of searchable pages already.
    * If we havne't - we should debounce the user input.
    * If we have - no need to debounce and we should preserve a snappy experience
    */
   scanningDone = false;
 
-  get categoryName() {
-    if (this.internalCategoryName == null) {
-      this.internalCategoryName = this.getInitialCategoryName();
-    }
-
-    return this.internalCategoryName;
-  }
-
   get settingsData() {
-    return this.settingsService.state[this.categoryName]?.formData ?? [];
+    return this.settingsService.state[this.currentSettingsTab]?.formData ?? [];
   }
 
-  set categoryName(val: string) {
-    this.internalCategoryName = val;
+  setCategoryName(val: string) {
+    this.navigationService.actions.setSettingsNavigation(val);
   }
 
   get isPrime() {
@@ -153,11 +159,11 @@ export default class Settings extends Vue {
   }
 
   get shouldShowReactPage() {
-    return this.reactPages.includes(this.categoryName);
+    return this.reactPages.includes(this.currentSettingsTab);
   }
 
   get shouldShowVuePage() {
-    if (this.reactPages.includes(this.categoryName)) return false;
+    if (this.reactPages.includes(this.currentSettingsTab)) return false;
     return ![
       'Stream',
       'API',
@@ -169,7 +175,7 @@ export default class Settings extends Vue {
       'Installed Apps',
       'Virtual Webcam',
       'Developer',
-    ].includes(this.categoryName);
+    ].includes(this.currentSettingsTab);
   }
 
   getInitialCategoryName() {
@@ -194,7 +200,7 @@ export default class Settings extends Vue {
   }
 
   save(settingsData: ISettingsSubCategory[]) {
-    this.settingsService.setSettings(this.categoryName, settingsData);
+    this.settingsService.setSettings(this.currentSettingsTab, settingsData);
   }
 
   done() {
@@ -210,15 +216,15 @@ export default class Settings extends Vue {
 
   onBeforePageScanHandler(page: string) {
     if (this.originalCategory == null) {
-      this.originalCategory = this.categoryName;
+      this.originalCategory = this.currentSettingsTab;
     }
 
-    this.categoryName = page;
+    this.setCategoryName(page);
   }
 
   onScanCompletedHandler() {
     this.scanningDone = true;
-    this.categoryName = this.originalCategory;
+    this.setCategoryName(this.originalCategory);
     this.originalCategory = null;
   }
 
@@ -234,8 +240,8 @@ export default class Settings extends Vue {
       this.searchResultPages = foundPages;
     }
     // if there are not search results for the current page than switch to the first found page
-    if (foundPages.length && !foundPages.includes(this.categoryName)) {
-      this.categoryName = foundPages[0];
+    if (foundPages.length && !foundPages.includes(this.currentSettingsTab)) {
+      this.setCategoryName(foundPages[0]);
     }
   }
 
@@ -264,7 +270,7 @@ export default class Settings extends Vue {
   }
 
   highlightSearch(searchStr: string) {
-    this.$refs.settingsContainer.highlightPage(searchStr);
+    this.$refs.settingsContainer?.highlightPage(searchStr);
   }
 
   handleAuth() {
@@ -279,7 +285,7 @@ export default class Settings extends Vue {
         })
         .then(({ response }) => {
           if (response === 0) {
-            this.dualOutputService.setDualOutputMode(false, true);
+            this.dualOutputService.setDualOutputModeIfPossible(false, true);
             this.userService.logOut();
           }
         });