feat(multistream): add ultra features page

app/components-react/shared/AddDestinationButton.tsx

@@ -30,7 +30,7 @@ export default function AddDestinationButton(p: IAddDestinationButtonProps) {
         if (module.isPrime) {
           SettingsService.actions.showSettings('Stream');
         } else if (module.isDualOutputMode) {
-          MagicLinkService.linkToPrime('slobs-dual-output', 'DualOutput');
+          MagicLinkService.linkToPrime('slobs-dual-output', { event: 'DualOutput' });
         } else {
           MagicLinkService.linkToPrime('slobs-single-output');
         }

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

@@ -58,6 +58,15 @@ button.highlighted {
       padding-box !important;
   }
 
+  &.filled-dark,
+  &.filled-dark:hover,
+  &.filled-dark:active,
+  &.filled-dark:focus,
+  &.filled-dark:visited {
+    background: linear-gradient(123.53deg, #2de8b0 0%, #cbe953 48.8%, #ffab48 75.86%, #ff5151 100%)
+      padding-box !important;
+  }
+
   &.faded,
   &.faded:active,
   &.faded:focus,

app/components-react/shared/ButtonHighlighted.tsx

@@ -9,6 +9,7 @@ interface IButtonHighlighted extends ButtonProps {
   disabled?: boolean;
   style?: CSSProperties;
   filled?: boolean;
+  filledDark?: boolean;
   faded?: boolean;
   text?: string;
   noMargin?: boolean;
@@ -22,6 +23,7 @@ export default function ButtonHighlighted(p: IButtonHighlighted) {
         styles.highlighted,
         p.className,
         { [styles.filled]: p.filled },
+        { [styles.filledDark]: p.filledDark },
         { [styles.faded]: p.faded },
         { [styles.noMargin]: p.noMargin },
       )}

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

@@ -0,0 +1,62 @@
+@import '../../styles/index';
+
+.callout {
+  position: relative;
+  width: 100%;
+  padding: 12px;
+  font-size: 16px;
+  font-style: normal;
+  border: 1px solid;
+  border-radius: 8px;
+  color: var(--title);
+
+  .icon {
+    margin-right: 0.4em;
+  }
+
+  .title {
+    display: block;
+    margin-bottom: 0.8em;
+  }
+
+  .close {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+
+  .message {
+    flex: 1;
+    overflow: visible;
+    text-wrap: wrap;
+    line-break: auto;
+    line-height: normal;
+  }
+
+  &.info {
+    border-color: var(--callout-border);
+    background-color: var(--callout-semi);
+
+    .title {
+      color: var(--callout);
+    }
+  }
+
+  &.warning {
+    border-color: var(--info-border);
+    background-color: var(--info-semi);
+
+    .title {
+      color: var(--info);
+    }
+  }
+
+  &.error {
+    border-color: var(--warning-border);
+    background-color: var(--warning-semi);
+
+    .title {
+      color: var(--warning);
+    }
+  }
+}

app/components-react/shared/Callout.tsx

@@ -0,0 +1,69 @@
+import React, { CSSProperties } from 'react';
+import styles from './Callout.m.less';
+import cx from 'classnames';
+import { EDismissable } from 'services/dismissables';
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+
+interface ICalloutProps {
+  type?: 'info' | 'warning' | 'error';
+  icon?: string | JSX.Element;
+  title?: string | JSX.Element;
+  message: string | JSX.Element;
+  dismissableKey?: EDismissable;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export default function Callout(p: ICalloutProps) {
+  const { shouldShow } = useVuex(() => ({
+    shouldShow: p?.dismissableKey
+      ? Services.DismissablesService.views.shouldShow(p?.dismissableKey)
+      : true,
+  }));
+
+  if (!shouldShow) return <></>;
+
+  function handleDismiss(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
+    if (!p?.dismissableKey) return;
+    e.stopPropagation();
+    Services.DismissablesService.actions.dismiss(p?.dismissableKey);
+  }
+
+  return (
+    <aside
+      className={cx(
+        styles.callout,
+        { [styles.info]: !p.type || p.type === 'info' },
+        { [styles.warning]: p.type === 'warning' },
+        { [styles.error]: p.type === 'error' },
+        p.className,
+      )}
+      style={p.style}
+    >
+      {p?.dismissableKey && (
+        <i className={cx(styles.close, 'icon-close')} onClick={handleDismiss} />
+      )}
+      {(p.title || p.icon) ? (
+        <title className={styles.title}>
+          {p.icon ? (
+            typeof p.icon === 'string' ? (
+              <i className={cx(styles.icon, p.icon)} />
+            ) : (
+              <span>{p.icon}</span>
+            )
+          ) : (
+            <i className={cx(
+              styles.icon,
+              { 'icon-question': !p.type || p.type === 'info' },
+              { 'icon-information': p.type === 'warning' },
+              { 'icon-error': p.type === 'error' },
+            )} />
+          )}
+          {p.title ? (<span>{p.title}</span>) : (<></>)}
+        </title>
+      ) : (<></>)}
+      <span className={styles.message}>{p.message}</span>
+    </aside>
+  );
+}

app/components-react/shared/StreamShiftToggle.tsx

@@ -46,7 +46,7 @@ export default function StreamShiftToggle(p: IStreamShiftToggle) {
                 onClick={() => {
                   Services.MagicLinkService.actions.linkToPrime(
                     'slobs-streamswitcher',
-                    'StreamShift',
+                    { event: 'StreamShift' },
                   );
                 }}
               >

app/components-react/windows/settings/Multistreaming.m.less

@@ -1,13 +1,72 @@
 @import '../../../styles/index.less';
 @import '../../../styles/mixins';
 
-.multistreaming-wrapper .section {
-  margin-top: 16px;
+.multistream-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
-.wrapper {
-  margin-bottom: 16px;
+
+.multistream-ultra {
+  max-width: 800px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+
+  & > h1,
+  & > p {
+    margin-bottom: 0;
+  }
+
+  p {
+    line-height: 1.5em;
+  }
+
+  .multistream-image {
+    margin-right: -16px;
+  }
+
+  .callout {
+    font-size: 14px;
+    margin-top: 16px;
+  }
+
+  .callout-footnote {
+    margin-top: 2px;
+    font-size: 12px;
+    color: var(--paragraph);
+  }
+
+  :global(.ant-btn-link) {
+    color: var(--paragraph) !important;
+    border: none !important;
+    padding: 0 !important;
+    height: unset !important;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: var(--title) !important;
+    }
+
+    span {
+      text-decoration: underline;
+    }
+  }
 }
 
-.prime {
-  color: var(--prime);
+.big-button {
+  font-size: 14px !important;
+  font-weight: 500 !important;
+  border-radius: 32px !important;
+  width: 240px;
+  height: 64px !important;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 4px;
+  }
 }