Multistream Toggle 2

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

@@ -23,7 +23,7 @@ import AnimatedWrapper from 'components-react/shared/AnimatedWrapper';
 /**
  * Allows enabling/disabling platforms and custom destinations for the stream
  */
-export const DestinationSwitchers = memo(() => {
+export const DestinationSwitchers = memo((p: { disabled?: boolean }) => {
   const {
     enabledPlatforms,
     customDestinations,
@@ -40,6 +40,9 @@ export const DestinationSwitchers = memo(() => {
     isLoading,
     isFacebookGrandfathered,
     isTikTokGrandfathered,
+    activeDisplayPlatforms,
+    isUpdateMode,
+    isLiveOutputEditingEnabled,
   } = useGoLiveSettings().extend(module => ({
     get renderedPlatforms() {
       // Some platforms are always shown, even if not linked so add them to the list of platforms to display
@@ -59,6 +62,35 @@ export const DestinationSwitchers = memo(() => {
   const enabledDestRef = useRef(enabledDestinations);
   enabledDestRef.current = enabledDestinations;
 
+  const disabledHorizontalUltraSwitcher = useMemo(() => {
+    // In live output editing, the user is able to toggle platforms freely, so don't disable any switchers
+    if (isLiveOutputEditingEnabled) return null;
+    // In dual output mode, if there is only one platform for a display orientation, disable the switcher for that platform
+    if (
+      isDualOutputMode &&
+      isPrime &&
+      isUpdateMode &&
+      activeDisplayPlatforms.horizontal.length < 2
+    ) {
+      return activeDisplayPlatforms.horizontal[0];
+    }
+
+    // By default, don't disable any switchers
+    return null;
+  }, [isDualOutputMode, isPrime, isUpdateMode, activeDisplayPlatforms, isLiveOutputEditingEnabled]);
+
+  const disabledVerticalUltraSwitcher = useMemo(() => {
+    // In live output editing, the user is able to toggle platforms freely, so don't disable any switchers
+    if (isLiveOutputEditingEnabled) return null;
+    // In dual output mode, if there is only one platform for a display orientation, disable the switcher for that platform
+    if (isDualOutputMode && isPrime && isUpdateMode && activeDisplayPlatforms.vertical.length < 2) {
+      return activeDisplayPlatforms.vertical[0];
+    }
+
+    // By default, don't disable any switchers
+    return null;
+  }, [isDualOutputMode, isPrime, isUpdateMode, activeDisplayPlatforms, isLiveOutputEditingEnabled]);
+
   const emitSwitch = useDebounce(500, (ind?: number, enabled?: boolean) => {
     if (ind !== undefined && enabled !== undefined) {
       switchCustomDestination(ind, enabled);
@@ -80,6 +112,14 @@ export const DestinationSwitchers = memo(() => {
 
   const togglePlatform = useCallback(
     (platform: TPlatform, enabled: boolean) => {
+      // In update mode, prevent toggling off the last platform for a display orientation
+      if (
+        disabledHorizontalUltraSwitcher === platform ||
+        disabledVerticalUltraSwitcher === platform
+      ) {
+        return enabledPlatformsRef.current.includes(platform);
+      }
+
       // Only allow non-ultra users to have 2 platforms, or 1 platform and 1 custom destination enabled
       if (!isPrime) {
         return toggleNonUltraPlatform(platform, enabled);
@@ -99,7 +139,7 @@ export const DestinationSwitchers = memo(() => {
       emitSwitch();
       return enabledPlatformsRef.current.includes(platform);
     },
-    [emitSwitch, isPrime],
+    [emitSwitch, isPrime, disabledHorizontalUltraSwitcher, disabledVerticalUltraSwitcher],
   );
 
   const toggleNonUltraPlatform = useCallback(
@@ -215,7 +255,8 @@ export const DestinationSwitchers = memo(() => {
         const enabled = isEnabled(platform);
         const disabledByBoth =
           !!nonPrimeBothDisplayPlatform && !enabled && platform !== nonPrimeBothDisplayPlatform;
-        const switchDisabled = (!enabled && disableNonUltraSwitchers) || disabledByBoth;
+        const switchDisabled =
+          p?.disabled || (!enabled && disableNonUltraSwitchers) || disabledByBoth;
         const bothDisplayPlatformLabel = disabledByBoth
           ? platformLabels(nonPrimeBothDisplayPlatform!)
           : undefined;
@@ -230,6 +271,10 @@ export const DestinationSwitchers = memo(() => {
             switchDisabled={switchDisabled}
             bothDisplayPlatformLabel={bothDisplayPlatformLabel}
             showDisplaySelector={visible}
+            showDisabledAlert={
+              disabledHorizontalUltraSwitcher === platform ||
+              disabledVerticalUltraSwitcher === platform
+            }
             isPrime={isPrime}
             username={getUsername(platform)}
             index={ind}
@@ -241,6 +286,7 @@ export const DestinationSwitchers = memo(() => {
       {customDestinations?.map((dest, ind) => {
         const disabledByBoth = !!nonPrimeBothDisplayPlatform && !dest.enabled;
         const switchDisabled =
+          p?.disabled ||
           disableCustomDestinationSwitchers ||
           (!dest.enabled && disableNonUltraSwitchers) ||
           disabledByBoth;
@@ -280,6 +326,7 @@ interface IDestinationSwitcherProps {
   isPrime: boolean;
   username?: string;
   isUnlinked?: boolean;
+  showDisabledAlert?: boolean;
   /** Disable the switch while the go live window is loading/refreshing settings */
   isLoading?: boolean;
 }
@@ -345,10 +392,18 @@ const DestinationSwitcher = memo(
           return onChange(!enabled);
         }
 
-        if (disabled) return enabled;
+        if (disabled || p.showDisabledAlert) {
+          if (p.showDisabledAlert) {
+            alertInfo({
+              name: 'switcher-info-alert',
+              text: $t('Cannot toggle off only enabled platform for this display orientation.'),
+            });
+          }
+          return enabled;
+        }
         return onChange(!enabled);
       },
-      [p.enabled, p.isLoading, onChange, p.bothDisplayPlatformLabel, disabled],
+      [p.enabled, p.isLoading, onChange, p.bothDisplayPlatformLabel, disabled, p.showDisabledAlert],
     );
 
     const { title, description } = useMemo(() => {