[TESTS] Feat/reactive data editor

app/app-services.ts

@@ -64,7 +64,7 @@ export { SettingsManagerService } from 'services/settings-manager';
 export { MarkersService } from 'services/markers';
 export { RealmService } from 'services/realm';
 export { StreamAvatarService } from 'services/stream-avatar/stream-avatar-service';
-import { VirtualWebcamService } from 'services/virtual-webcam';
+export { OnboardingV2Service } from 'services/onboarding/onboarding-v2';
 
 // ONLINE SERVICES
 export { UserService } from './services/user';
@@ -220,6 +220,8 @@ import { VisionService } from 'services/vision';
 import { ReactiveDataService } from 'services/reactive-data';
 import { SignalsService } from 'services/signals-manager';
 import { TroubleshooterService } from 'services/troubleshooter';
+import { OnboardingV2Service } from 'services/onboarding/onboarding-v2';
+import { VirtualWebcamService } from 'services/virtual-webcam';
 
 export const AppServices = {
   AppService,
@@ -307,4 +309,5 @@ export const AppServices = {
   VisionService,
   ReactiveDataService,
   TroubleshooterService,
+  OnboardingV2Service,
 };

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

@@ -8,6 +8,7 @@ import { useController } from 'components-react/hooks/zustand';
 
 interface IDualOutputSourceSelector {
   nodeId: string;
+  sourceName: string;
   sceneId?: string;
 }
 export function DualOutputSourceSelector(p: IDualOutputSourceSelector) {
@@ -48,6 +49,7 @@ export function DualOutputSourceSelector(p: IDualOutputSourceSelector) {
           visible={['icon-desktop', 'icon-desktop-hide'].includes(hoveredIcon)}
         >
           <i
+            data-name={`${p.sourceName}-horizontal`}
             onClick={() => {
               toggleVisibility(p.nodeId);
               makeActive(p.nodeId);
@@ -69,6 +71,7 @@ export function DualOutputSourceSelector(p: IDualOutputSourceSelector) {
           visible={['icon-phone-case', 'icon-phone-case-hide'].includes(hoveredIcon)}
         >
           <i
+            data-name={`${p.sourceName}-vertical`}
             onClick={() => {
               toggleVisibility(v.verticalNodeId);
               makeActive(v.verticalNodeId);

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

@@ -206,6 +206,7 @@ function SceneSelector() {
         title={$t('Scene Collections')}
         dismissableKey={EDismissable.SceneCollectionsHelpTip}
         position={{ top: '-8px', left: '102px' }}
+        style={{ position: 'absolute' }}
       >
         <div>
           {$t(

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

@@ -224,10 +224,15 @@ class SourceSelectorController {
         const parent = this.selectionService.views.globalSelection.getClosestParent();
         if (parent) parentId = parent.id;
       }
+
+      const sceneId =
+        this.scenesService.views.activeScene.id ??
+        this.selectionService.views.globalSelection.sceneId;
+
       this.scenesService.actions.showNameFolder({
         itemsToGroup,
         parentId,
-        sceneId: this.scenesService.views.activeScene.id,
+        sceneId,
       });
     }
   }
@@ -788,6 +793,7 @@ function StudioControls() {
 
       <Tooltip title={ctrl.dualOutputTitle} placement="bottomRight">
         <i
+          data-name="dual-output-toggle"
           className={cx('icon-dual-output icon-button icon-button--lg', {
             active: ctrl.isDualOutputActive,
           })}
@@ -918,7 +924,7 @@ const TreeNode = React.forwardRef(
           <>
             {p.isGuestCamActive && <i className="fa fa-signal" />}
             {p.isDualOutputActive && p.hasNodeMap && (
-              <DualOutputSourceSelector nodeId={p.id} sceneId={p?.sceneId} />
+              <DualOutputSourceSelector nodeId={p.id} sceneId={p?.sceneId} sourceName={p.title} />
             )}
             {p.selectiveRecordingEnabled && (
               <Tooltip title={selectiveRecordingMetadata().tooltip} placement="left">

app/components-react/modals/onboarding/Common.m.less

@@ -0,0 +1,119 @@
+@import "../../../styles/index.less";
+
+.modal-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80% !important;
+  width: 80% !important;
+
+  :global(.ant-modal-content) {
+    z-index: 2000 !important; // show above everything
+    height: 100% !important;
+  }
+
+  :global(.ant-modal-footer) {
+    background-color: var(--background);
+    border-top: none;
+  }
+}
+
+.dark-box {
+  background-color: var(--section);
+  border-radius: 16px;
+}
+
+.centered {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  text-align: center;
+}
+
+.kevin-box {
+  width: 56px;
+  height: 56px;
+  background: var(--teal);
+  border-radius: 16px;
+  position: relative;
+  margin-bottom: 32px;
+
+  svg {
+    .center();
+  }
+}
+
+.big-button {
+  border-radius: 32px !important;
+  width: 240px;
+  height: 64px !important;
+  font-weight: bold !important;
+  display: flex;
+  align-items: center;
+
+  i {
+    margin-right: 4px;
+  }
+}
+
+.big-button.white {
+  background: var(--white);
+  color: var(--section);
+
+  &:hover {
+    border: none;
+    background: var(--icon);
+    color: var(--section);
+  }
+}
+
+.platform-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  button {
+    margin-right: 8px;
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+
+.platforms-container {
+  display: flex;
+  justify-content: space-evenly;
+  width: 800px;
+  flex-wrap: wrap;
+}
+
+.platform-card {
+  width: 240px;
+  height: 140px;
+  border-radius: 16px;
+  background: var(--section);
+  overflow: hidden;
+  margin-top: 16px;
+  padding-top: 16px;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .platform-card-button {
+    background: var(--button);
+    width: 100%;
+    padding: 8px;
+    position: relative;
+    bottom: -12px;
+  }
+
+  :global(.ant-col-16) {
+    max-width: 100%;
+  }
+}

app/components-react/modals/onboarding/ConnectMore.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import cx from 'classnames';
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+import { $t } from 'services/i18n';
+import styles from './Common.m.less';
+import PlatformLogo from 'components-react/shared/PlatformLogo';
+import { ListInput } from 'components-react/shared/inputs';
+import { platformLabels, TPlatform } from 'services/platforms';
+import { Header, IOnboardingStepProps, useAuth } from './Onboarding';
+import Form from 'components-react/shared/inputs/Form';
+
+export function ConnectMore(p: IOnboardingStepProps) {
+  const { UserService } = Services;
+
+  const { isPartialSLAuth } = useVuex(() => ({
+    isPartialSLAuth: UserService.views.isPartialSLAuth,
+  }));
+
+  const subtitle = isPartialSLAuth
+    ? $t(
+        'Streamlabs Desktop requires that you have a connected platform account in order to use all of its features. By skipping this step, you will be logged out and some features may be unavailable.',
+      )
+    : $t('Connect your accounts for the best experience. You can always connect more later.');
+
+  const platformCards: TPlatform[] = ['twitch', 'youtube', 'tiktok', 'kick', 'facebook'];
+  const listedPlatforms: TPlatform[] = ['trovo', 'twitter', 'instagram'];
+
+  const { mergePlatform } = useAuth();
+
+  return (
+    <div className={styles.centered}>
+      <Header title={$t('Connect Platforms')} description={subtitle} />
+      <div className={styles.platformsContainer}>
+        {platformCards.map(platform => (
+          <PlatformCard platform={platform} />
+        ))}
+        <div className={cx(styles.centered, styles.platformCard)}>
+          <i className="icon-platforms" style={{ fontSize: 32, padding: 8 }} />
+          <span>{$t('Select another platform')}</span>
+          <Form style={{ width: '100%', padding: '0 16px' }}>
+            <ListInput
+              options={listedPlatforms.map(platform => ({
+                label: platformLabels(platform),
+                value: platform,
+              }))}
+              onInput={mergePlatform}
+              nolabel
+              style={{ marginTop: 16 }}
+            />
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PlatformCard(p: { platform: TPlatform }) {
+  const { mergePlatform } = useAuth();
+
+  return (
+    <div
+      className={cx(styles.centered, styles.platformCard)}
+      onClick={() => mergePlatform(p.platform)}
+    >
+      <PlatformLogo platform={p.platform} size="medium" />
+      {platformLabels(p.platform)}
+      <div className={styles.platformCardButton}>{$t('Connect')}</div>
+    </div>
+  );
+}

app/components-react/modals/onboarding/Devices.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect } from 'react';
+import { DisplaySection } from 'components-react/pages/onboarding/HardwareSetup';
+import styles from './Common.m.less';
+import { Header, IOnboardingStepProps } from './Onboarding';
+import { $t } from 'services/i18n';
+import { ListInput } from 'components-react/shared/inputs';
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+import Form from 'components-react/shared/inputs/Form';
+
+export function Devices(p: IOnboardingStepProps) {
+  const { DefaultHardwareService, WindowsService } = Services;
+
+  const { videoDevices, audioDevices, selectedAudioDevice, selectedVideoDevice } = useVuex(() => ({
+    videoDevices: DefaultHardwareService.videoDevices.map(device => ({
+      label: device.description,
+      value: device.id,
+    })),
+    audioDevices: DefaultHardwareService.audioDevices.map(device => ({
+      label: device.description,
+      value: device.id,
+    })),
+    selectedVideoDevice: DefaultHardwareService.state.defaultVideoDevice,
+    selectedAudioDevice: DefaultHardwareService.state.defaultAudioDevice,
+  }));
+
+  // Set up temporary sources
+  useEffect(() => {
+    DefaultHardwareService.createTemporarySources();
+
+    if (!selectedVideoDevice && videoDevices.length) {
+      DefaultHardwareService.actions.setDefault('video', videoDevices[0].value);
+    }
+
+    return () => {
+      DefaultHardwareService.actions.clearTemporarySources();
+    };
+  }, []);
+
+  function setDevice(type: 'video' | 'audio') {
+    return (value: string) => {
+      DefaultHardwareService.actions.setDefault(type, value);
+    };
+  }
+
+  return (
+    <div className={styles.centered}>
+      <Header
+        title={$t('Set Up Your Mic & Webcam')}
+        description={$t('Connect your most essential devices now or later on')}
+      />
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-evenly',
+          alignItems: 'center',
+          width: '100%',
+        }}
+      >
+        <DisplaySection />
+        <div className={styles.darkBox} style={{ width: 360, height: 240, padding: 32 }}>
+          <Form layout="vertical">
+            <ListInput
+              label={$t('Webcam')}
+              options={videoDevices}
+              value={selectedVideoDevice}
+              onChange={setDevice('video')}
+              style={{ width: 200 }}
+            />
+            <ListInput
+              label={$t('Microphone')}
+              options={audioDevices}
+              value={selectedAudioDevice}
+              onChange={setDevice('audio')}
+              style={{ width: 200 }}
+            />
+          </Form>
+        </div>
+      </div>
+    </div>
+  );
+}