Migrate video settings to realm and refactor Go Live window.

app/components-react/hooks/zustand.tsx

@@ -27,9 +27,9 @@ export function initStore<TState extends any>(initialStateDraft: TState) {
   const useState = createBoundedUseStore(store);
   (store as any).useState = useState;
 
-  const update = (key: keyof TState, value: any) =>
+  const update = <T extends keyof Draft<TState>>(key: T, value: Draft<TState>[T]) =>
     store.setState((s: Draft<TState>) => {
-      (s as any)[key] = value;
+      s[key] = value;
     });
   (store as any).update = update;
 
@@ -87,7 +87,7 @@ export function useController<T>(ControllerCtx: Context<T>): NonNullable<T> {
       if (actionName === 'constructor') continue;
       if (!(controller as any)[actionName]?.bind) continue;
       // Run initialize actions if they exist
-      if (actionName === 'init') controller[actionName]();
+      if (actionName === 'init') (controller as any)[actionName]();
       actions[actionName] = (controller as any)[actionName].bind(controller);
     }
 

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

@@ -13,58 +13,67 @@
     width: 100%;
   }
 
-  button.add-destination-btn {
-    width: 100%;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    position: relative;
-    margin: auto;
-
-    &:global(.ant-btn) {
-      display: flex;
-      font-weight: 500;
-      padding: 20px 10px;
-      background: var(--dropdown-bg);
+  &.ultra-btn-group {
+    margin: 15px 3px;
+  }
+}
 
-      &:hover {
-        transition: 0.3s !important;
-      }
+button.add-destination-btn {
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  margin: auto;
+  background-color: var(--background);
 
-      &.default {
-        min-height: 58px;
-        transition: box-shadow 0.3s;
-        border: 1px solid var(--dropdown-bg);
-        border-radius: 4px;
+  &:hover {
+    transition: 0.3s !important;
+    box-shadow: 0 0 50px rgba(255, 255, 255, 0.1) inset;
+  }
 
-        &:hover {
-          box-shadow: 0 0 50px rgba(255, 255, 255, 0.1) inset;
-        }
-      }
-    }
+  .add-destination-icon {
+    font-size: 18px;
+    margin-right: 10px;
+  }
 
-    i.add-destination-icon {
-      font-size: 18px;
-      margin-right: 10px;
-    }
+  .btn-text {
+    display: flex;
+    align-items: center;
+    font-weight: 500;
+  }
 
-    .btn-text {
-      display: flex;
-      align-items: center;
-    }
+  .btn-text:hover {
+    font-weight: 500;
+  }
+}
 
-    &.ultra-btn {
-      justify-content: space-between;
+.single-output-btn:extend(button.add-destination-btn) {
+  border: 1px dashed var(--border) !important;
+  min-height: 58px;
+  transition: border 0.3s, box-shadow 0.3s !important;
+  margin-bottom: 15px;
 
-      .ultra-icon {
-        height: 15px;
-        width: 15px;
-      }
-    }
+  &:hover {
+    border: 1px solid var(--button) !important;
   }
+}
+
+.dual-output-btn:extend(button.add-destination-btn) {
+  min-height: 58px;
+  justify-content: center !important;
+  transition: box-shadow 0.3s !important;
+  border: unset !important;
+  background-color: var(--dropdown-bg) !important;
+}
+
+.ultra-btn:extend(button.add-destination-btn) {
+  font-weight: 500;
 
-  .dual-output {
-    margin: 15px;
+  .ultra-icon {
+    height: 15px;
+    width: 15px;
   }
 }

app/components-react/shared/AddDestinationButton.tsx

@@ -6,86 +6,142 @@ import { Button } from 'antd';
 import { ButtonGroup } from 'components-react/shared/ButtonGroup';
 import UltraIcon from './UltraIcon';
 import ButtonHighlighted from './ButtonHighlighted';
+import { PlusOutlined } from '@ant-design/icons';
 import styles from './AddDestinationButton.m.less';
 import cx from 'classnames';
+
+const PlusIcon = PlusOutlined as Function;
 interface IAddDestinationButtonProps {
-  type?: 'default' | 'ultra';
+  type?: 'single-output' | 'dual-output' | 'ultra';
   text?: string;
   className?: string;
   style?: CSSProperties;
 }
 
 export default function AddDestinationButton(p: IAddDestinationButtonProps) {
-  const { addDestination, shouldShowPrimeLabel, isDualOutputMode } = useGoLiveSettings().extend(
-    module => {
-      const {
-        RestreamService,
-        SettingsService,
-        MagicLinkService,
-        UserService,
-        UsageStatisticsService,
-        WebsocketService,
-      } = Services;
+  const { addDestination, btnType, isDualOutputMode } = useGoLiveSettings().extend(module => {
+    const {
+      RestreamService,
+      SettingsService,
+      MagicLinkService,
+      UsageStatisticsService,
+      WebsocketService,
+    } = Services;
 
-      return {
-        addDestination() {
-          // open the stream settings or prime page
-          if (UserService.views.isPrime) {
-            SettingsService.actions.showSettings('Stream');
-          } else if (isDualOutputMode) {
-            // record dual output analytics event
-            const ultraSubscription = WebsocketService.ultraSubscription.subscribe(() => {
-              UsageStatisticsService.recordAnalyticsEvent('DualOutput', {
-                type: 'UpgradeToUltra',
-              });
-              ultraSubscription.unsubscribe();
+    return {
+      addDestination() {
+        // open the stream settings or prime page
+        if (module.isPrime) {
+          SettingsService.actions.showSettings('Stream');
+        } else if (module.isDualOutputMode) {
+          // record dual output analytics event
+          const ultraSubscription = WebsocketService.ultraSubscription.subscribe(() => {
+            UsageStatisticsService.recordAnalyticsEvent('DualOutput', {
+              type: 'UpgradeToUltra',
             });
-            MagicLinkService.linkToPrime('slobs-multistream');
-          } else {
-            MagicLinkService.linkToPrime('slobs-multistream');
-          }
-        },
+            ultraSubscription.unsubscribe();
+          });
+          MagicLinkService.linkToPrime('slobs-multistream');
+        } else {
+          MagicLinkService.linkToPrime('slobs-multistream');
+        }
+      },
 
-        shouldShowPrimeLabel:
-          p.type === 'ultra' ||
-          (!RestreamService.state.grandfathered && !UserService.views.isPrime),
-      };
-    },
-  );
+      get canAddDestinations() {
+        const linkedPlatforms = module.state.linkedPlatforms;
+        const customDestinations = module.state.customDestinations;
+        return linkedPlatforms.length + customDestinations.length < 8;
+      },
+
+      get btnType() {
+        if (!RestreamService.state.grandfathered && !module.isPrime) return 'ultra';
+        if (module.isDualOutputMode) return 'dual-output';
+        if (!module.isDualOutputMode) return 'single-output';
+      },
+    };
+  });
+
+  const type = p?.type ?? btnType;
 
   return (
     <ButtonGroup
-      className={cx(styles.addDestinationGroup, { [styles.dualOutput]: isDualOutputMode })}
+      className={cx(styles.addDestinationGroup, {
+        [styles.ultraBtnGroup]: type === 'ultra',
+      })}
       align="center"
       direction="vertical"
       size="middle"
       style={p?.style}
     >
-      {shouldShowPrimeLabel && (
-        <ButtonHighlighted
-          faded
-          className={cx(styles.addDestinationBtn, p.className, styles.ultraBtn)}
-          onClick={addDestination}
-        >
-          <div className={styles.btnText}>
-            <i className={cx('icon-add', styles.addDestinationIcon)} />
-            {$t('Add Destination with Ultra')}
-          </div>
-          <UltraIcon type="night" className={styles.ultraIcon} />
-        </ButtonHighlighted>
+      {type === 'single-output' && (
+        <SingleOutputAddButton className={p?.className} addDestination={addDestination} />
+      )}
+      {type === 'dual-output' && (
+        <DualOutputAddButton className={p?.className} addDestination={addDestination} />
       )}
-      {!shouldShowPrimeLabel && (
-        <Button
-          className={cx(styles.addDestinationBtn, styles.default, p.className)}
-          onClick={addDestination}
-          block
-        >
-          <div className={styles.btnText}>
-            <i className={cx('icon-add', styles.addDestinationIcon)} />
-            {$t('Add Destination')}
-          </div>
-        </Button>
+      {type === 'ultra' && (
+        <UltraAddButton
+          className={p?.className}
+          addDestination={addDestination}
+          isDualOutputMode={isDualOutputMode}
+        />
       )}
     </ButtonGroup>
   );
 }
+
+function SingleOutputAddButton(p: { className?: string; addDestination: () => void }) {
+  return (
+    <Button
+      data-test="single-output-add-destination"
+      className={cx(styles.addDestinationBtn, styles.singleOutputBtn, p.className)}
+      onClick={p.addDestination}
+      block
+    >
+      <PlusIcon style={{ paddingLeft: '17px', fontSize: '24px' }} />
+      <span style={{ flex: 1 }}>{$t('Add Destination')}</span>
+    </Button>
+  );
+}
+
+function DualOutputAddButton(p: { className?: string; addDestination: () => void }) {
+  return (
+    <Button
+      data-test="dual-output-add-destination"
+      className={cx(styles.addDestinationBtn, styles.dualOutputBtn, p.className)}
+      onClick={p.addDestination}
+      block
+    >
+      <div className={styles.btnText}>
+        <i className={cx('icon-add', styles.addDestinationIcon)} />
+        {$t('Add Destination')}
+      </div>
+    </Button>
+  );
+}
+
+function UltraAddButton(p: {
+  className?: string;
+  addDestination: () => void;
+  isDualOutputMode: boolean;
+}) {
+  return (
+    <ButtonHighlighted
+      data-test="ultra-add-destination"
+      faded
+      className={cx(
+        styles.addDestinationBtn,
+        styles.ultraBtn,
+        { [styles.dualOutputUltraBtn]: p.isDualOutputMode },
+        p.className,
+      )}
+      onClick={p.addDestination}
+    >
+      <div className={styles.btnText}>
+        <i className={cx('icon-add', styles.addDestinationIcon)} />
+        {$t('Add Destination with Ultra')}
+      </div>
+      <UltraIcon type="night" className={styles.ultraIcon} />
+    </ButtonHighlighted>
+  );
+}