[WIP] feat(automations): port Stream Avatar automations natively into Desktop

app/app-services.ts

@@ -64,6 +64,9 @@ 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';
+export { StreamAvatarApiService } from 'services/stream-avatar/stream-avatar-api-service';
+export { AutomationsService } from 'services/stream-avatar/automations-service';
+export { AutomationsEngineService } from 'services/stream-avatar/automations-engine-service';
 export { OnboardingV2Service } from 'services/onboarding/onboarding-v2';
 
 // ONLINE SERVICES
@@ -210,6 +213,9 @@ import { SignalsService } from 'services/signals-manager';
 import { TroubleshooterService } from 'services/troubleshooter';
 import { OnboardingV2Service } from 'services/onboarding/onboarding-v2';
 import { VirtualWebcamService } from 'services/virtual-webcam';
+import { StreamAvatarApiService } from 'services/stream-avatar/stream-avatar-api-service';
+import { AutomationsService } from 'services/stream-avatar/automations-service';
+import { AutomationsEngineService } from 'services/stream-avatar/automations-engine-service';
 
 export const AppServices = {
   AppService,
@@ -298,4 +304,7 @@ export const AppServices = {
   ReactiveDataService,
   TroubleshooterService,
   OnboardingV2Service,
+  StreamAvatarApiService,
+  AutomationsService,
+  AutomationsEngineService,
 };

app/components-react/editor/elements/AutomationsElement.m.less

@@ -0,0 +1,118 @@
+@import '../../../styles/index';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.topBar {
+  display: flex;
+  align-items: center;
+  padding: 4px 8px 4px 12px;
+  flex-shrink: 0;
+  gap: 4px;
+}
+
+.title {
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--title);
+  margin-right: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.list {
+  flex: 1;
+  background: var(--section);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  cursor: pointer;
+  transition: background 0.1s;
+
+  &:hover {
+    background: var(--solid-input);
+
+    .name {
+      color: var(--title);
+    }
+  }
+}
+
+.rowInfo {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.name {
+  font-size: 12px;
+  color: var(--paragraph);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.4;
+}
+
+.condition {
+  font-size: 10px;
+  color: var(--paragraph);
+  opacity: 0.6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.3;
+}
+
+.rowActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+
+  i {
+    font-size: 14px;
+    opacity: 0.7;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.disabled {
+  opacity: 0.4 !important;
+  cursor: not-allowed !important;
+}
+
+.empty {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--paragraph);
+  opacity: 0.6;
+  font-size: 12px;
+  text-align: center;
+  padding: 16px;
+}
+
+.center {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

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

@@ -0,0 +1,157 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Spin, Switch, Tooltip } from 'antd';
+import Scrollable from 'components-react/shared/Scrollable';
+import { useVuex } from 'components-react/hooks';
+import { Services } from 'components-react/service-provider';
+import { $t } from 'services/i18n';
+import { Conditions } from 'services/stream-avatar/engine/conditions';
+import type { TAutomationExport } from 'services/stream-avatar/engine/automations';
+import useBaseElement from './hooks';
+import styles from './AutomationsElement.m.less';
+
+const mins = { x: 220, y: 120 };
+
+function conditionLabel(automation: TAutomationExport) {
+  const c = automation.conditions[0];
+  if (!c?.type) return '';
+  const def = Conditions[c.type as keyof typeof Conditions];
+  return def ? def.label : c.type;
+}
+
+function AutomationsContent() {
+  const { AutomationsService, AutomationsEngineService, UserService } = Services;
+  const { automations, loaded, error, isLoggedIn } = useVuex(() => ({
+    automations: AutomationsService.state.automations,
+    loaded: AutomationsService.state.loaded,
+    error: AutomationsService.state.error,
+    isLoggedIn: UserService.views.isLoggedIn,
+  }));
+
+  const [simulatingId, setSimulatingId] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!isLoggedIn) return;
+    AutomationsService.actions.fetchAll();
+  }, [isLoggedIn]);
+
+  async function simulate(e: React.MouseEvent, id: number) {
+    e.stopPropagation();
+    if (simulatingId !== null) return;
+    setSimulatingId(id);
+    try {
+      await AutomationsEngineService.actions.return.simulateAutomation(id);
+    } finally {
+      setSimulatingId(null);
+    }
+  }
+
+  function toggleEnabled(automation: TAutomationExport) {
+    if (!automation.id) return;
+    AutomationsService.actions.update(automation.id, {
+      ...automation,
+      enabled: !automation.enabled,
+    });
+  }
+
+  function openCreate() {
+    AutomationsService.actions.showCreateAutomation();
+  }
+
+  function retryNow() {
+    AutomationsService.actions.fetchAll();
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <div className={styles.empty}>
+        <span>{$t('Log in to use Automations.')}</span>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.empty}>
+        <span>{$t('Unable to reach the automations server. Retrying…')}</span>
+        <Tooltip title={$t('Retry Now')}>
+          <i className="icon-repeat icon-button" style={{ marginLeft: 6 }} onClick={retryNow} />
+        </Tooltip>
+      </div>
+    );
+  }
+
+  if (!loaded) {
+    return (
+      <div className={styles.center}>
+        <Spin size="small" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.topBar}>
+        <span className={styles.title}>{$t('Automations')}</span>
+        <Tooltip title={$t('Add Automation')}>
+          <i className="icon-add-circle icon-button icon-button--lg" onClick={openCreate} />
+        </Tooltip>
+      </div>
+
+      {automations.length === 0 ? (
+        <div className={styles.empty}>
+          <span>{$t('No automations yet.')}</span>
+        </div>
+      ) : (
+        <Scrollable className={styles.list}>
+          {automations.map(automation => (
+            <div
+              key={automation.id}
+              className={styles.row}
+              onClick={() =>
+                automation.id != null &&
+                AutomationsService.actions.showAutomationEditor(automation.id)
+              }
+            >
+              <div className={styles.rowInfo}>
+                <span className={styles.name}>
+                  {automation.description || $t('(no description)')}
+                </span>
+                <span className={styles.condition}>{conditionLabel(automation)}</span>
+              </div>
+              <div className={styles.rowActions} onClick={e => e.stopPropagation()}>
+                {simulatingId === automation.id ? (
+                  <Spin size="small" />
+                ) : (
+                  <Tooltip title={$t('Test')}>
+                    <i
+                      className={`icon-play-round ${simulatingId !== null ? styles.disabled : ''}`}
+                      onClick={e => automation.id != null && simulate(e, automation.id)}
+                    />
+                  </Tooltip>
+                )}
+                <Switch
+                  size="small"
+                  checked={automation.enabled}
+                  onChange={() => toggleEnabled(automation)}
+                />
+              </div>
+            </div>
+          ))}
+        </Scrollable>
+      )}
+    </div>
+  );
+}
+
+export function AutomationsElement() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { renderElement } = useBaseElement(<AutomationsContent />, mins, containerRef.current);
+
+  return (
+    <div ref={containerRef} style={{ height: '100%' }}>
+      {renderElement()}
+    </div>
+  );
+}
+
+AutomationsElement.mins = mins;

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

@@ -9,6 +9,7 @@ import { Services } from 'components-react/service-provider';
 import { useVuex } from 'components-react/hooks';
 import HelpTip from 'components-react/shared/HelpTip';
 import Scrollable from 'components-react/shared/Scrollable';
+import { AutomationsIcon } from 'components-react/shared/icons';
 import { useTree, IOnDropInfo } from 'components-react/hooks/useTree';
 import { $t } from 'services/i18n';
 import { EDismissable } from 'services/dismissables';
@@ -25,23 +26,28 @@ function SceneSelector() {
     SourceFiltersService,
     ProjectorService,
     EditorCommandsService,
+    AutomationsService,
+    UserService,
   } = Services;
 
   const { treeSort } = useTree(true);
 
   const [showDropdown, setShowDropdown] = useState(false);
-  const { scenes, activeSceneId, activeScene, collections, activeCollection } = useVuex(() => ({
-    scenes: ScenesService.views.scenes.map(scene => ({
-      title: <TreeNode scene={scene} removeScene={removeScene} />,
-      key: scene.id,
-      selectable: true,
-      isLeaf: true,
-    })),
-    activeScene: ScenesService.views.activeScene,
-    activeSceneId: ScenesService.views.activeSceneId,
-    activeCollection: SceneCollectionsService.activeCollection,
-    collections: SceneCollectionsService.collections,
-  }));
+  const { scenes, activeSceneId, activeScene, collections, activeCollection, isLoggedIn } = useVuex(
+    () => ({
+      scenes: ScenesService.views.scenes.map(scene => ({
+        title: <TreeNode scene={scene} removeScene={removeScene} />,
+        key: scene.id,
+        selectable: true,
+        isLeaf: true,
+      })),
+      activeScene: ScenesService.views.activeScene,
+      activeSceneId: ScenesService.views.activeSceneId,
+      activeCollection: SceneCollectionsService.activeCollection,
+      collections: SceneCollectionsService.collections,
+      isLoggedIn: UserService.views.isLoggedIn,
+    }),
+  );
 
   function showContextMenu(info: { event: React.MouseEvent }) {
     info.event.preventDefault();
@@ -174,6 +180,16 @@ function SceneSelector() {
           <i className="icon-add-circle icon-button icon-button--lg" onClick={addScene} />
         </Tooltip>
 
+        {isLoggedIn && (
+          <Tooltip title={$t('Edit Automations.')} placement="bottomRight">
+            <span
+              className="icon-button icon-button--lg"
+              onClick={() => AutomationsService.actions.showAutomations()}
+            >
+              <AutomationsIcon style={{ width: '15px', height: '15px' }} />
+            </span>
+          </Tooltip>
+        )}
         <Tooltip title={$t('Edit Scene Transitions.')} placement="bottomRight">
           <i className="icon-transition icon-button icon-button--lg" onClick={showTransitions} />
         </Tooltip>

app/components-react/editor/elements/index.ts

@@ -7,3 +7,4 @@ export { RecordingPreview } from './RecordingPreview';
 export { StreamPreview } from './StreamPreview';
 export { Browser } from './Browser';
 export { Display } from './Display';
+export { AutomationsElement as Automations } from './AutomationsElement';