fix(dual-output): persist display settings, YT vert fixes, details follow (#5397)

* Persist changing displays immediately.

Any interaction with displays does not get reflected by any of the
streaming service or dual output service views, until some condition
occurs (going live most likely). Inconsistency in that could result in
bugs. I believe `display` is important enough to be reflected
immediately. Validations in DO service that rely on
`activeDisplayPlatforms` and `activeDisplayDestinations` might've been
looking at stale data.
It is also likely that there has been a regression into how the
Go Live settings work.
* Related to YT, do not attempt to hijack displays when a vertical
platform exists, i.e streaming to Twitch vertical + Youtube Both.

Author: blackxored

app/components-react/shared/DisplaySelector.tsx

@@ -19,8 +19,8 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
   const {
     customDestinations,
     platforms,
+    updatePlatformDisplayAndSaveSettings,
     updateCustomDestinationDisplay,
-    updatePlatform,
     isPrime,
     enabledPlatforms,
     updateShouldUseExtraOutput,
@@ -64,7 +64,8 @@ export default function DisplaySelector(p: IDisplaySelectorProps) {
       const display: TDisplayType =
         // Use horizontal display, vertical stream will be created separately
         supportsExtraOutputs && val === 'both' ? 'horizontal' : (val as TDisplayType);
-      updatePlatform(p.platform, { display });
+
+      updatePlatformDisplayAndSaveSettings(p.platform, display);
 
       // Add or remove the platform from the Dual Output's extra output platforms list
       updateShouldUseExtraOutput(p.platform, val);

app/components-react/windows/go-live/useGoLiveSettings.ts

@@ -444,6 +444,16 @@ export class GoLiveSettingsModule {
   hasExtraOutput(platform: TPlatform) {
     return Services.DualOutputService.views.hasExtraOutput(platform);
   }
+
+  /* Go live window has no persistence until we go live or toggle a platform on/off
+   * As a result we don't get the latest state in any of its views.
+   * This makes changing display immediate and is only used in `DisplaySelector`
+   * to keep the rest of the code as before, but we might need to revisit that.
+   */
+  updatePlatformDisplayAndSaveSettings(platform: TPlatform, display: TDisplayType) {
+    this.state.updatePlatform(platform, { display });
+    this.save(this.state.settings);
+  }
 }
 
 export function useGoLiveSettings() {

app/services/settings/streaming/stream-settings.ts

@@ -146,8 +146,13 @@ export class StreamSettingsService extends PersistentStatefulService<IStreamSett
         if (
           this.streamingService.views.enabledPlatforms.length > 1 &&
           ytSettings?.enabled &&
-          this.dualOutputService.views.hasExtraOutput('youtube')
+          this.dualOutputService.views.hasExtraOutput('youtube') &&
+          !(
+            this.streamingService.views.activeDisplayPlatforms.vertical.length ||
+            this.streamingService.views.activeDisplayDestinations.vertical.length
+          )
         ) {
+          console.log('overrode youtube');
           return 'StreamSecond';
         }
       }
@@ -225,7 +230,7 @@ export class StreamSettingsService extends PersistentStatefulService<IStreamSett
     // transform IGoLiveSettings to ISavedGoLiveSettings
     const patch: Partial<ISavedGoLiveSettings> = settingsPatch;
     if (settingsPatch.platforms) {
-      const pickedFields: (keyof IPlatformFlags)[] = ['enabled', 'useCustomFields'];
+      const pickedFields: (keyof IPlatformFlags)[] = ['enabled', 'useCustomFields', 'display'];
       const platforms: Dictionary<IPlatformFlags> = {};
       Object.keys(settingsPatch.platforms).map(platform => {
         const platformSettings = pick(settingsPatch.platforms![platform], pickedFields);

app/services/streaming/streaming.ts

@@ -1002,11 +1002,20 @@ export class StreamingService
 
       NodeObs.OBS_service_setVideoInfo(horizontalContext, 'horizontal');
       const ytSettings = this.views.getPlatformSettings('youtube');
+      /*
+       * HACK: this needs to be addressed and is the result of the old
+       * streaming API *requiring* you to have both horizontal and vertical
+       * outputs to initialize streaming.
+       */
       // TODO: this can probably be more generic now
       if (
         this.views.enabledPlatforms.length > 1 &&
         ytSettings?.enabled &&
-        this.dualOutputService.views.hasExtraOutput('youtube')
+        this.dualOutputService.views.hasExtraOutput('youtube') &&
+        !(
+          this.views.activeDisplayPlatforms.vertical.length ||
+          this.views.activeDisplayDestinations.vertical.length
+        )
       ) {
         NodeObs.OBS_service_setVideoInfo(horizontalContext, 'vertical');
       } else {