merged with vision_service

Author: Tom Maneri

app/components-react/sidebar/NavTools.m.less

@@ -233,3 +233,11 @@
     }
   }
 }
+
+.vision {
+  color: var(--nav-active) !important;
+
+  i {
+    color: var(--nav-active) !important;
+  }
+}

app/components-react/sidebar/NavTools.tsx

@@ -15,6 +15,7 @@ import MenuItem from 'components-react/shared/MenuItem';
 import UltraIcon from 'components-react/shared/UltraIcon';
 import PlatformIndicator from './PlatformIndicator';
 import { AuthModal } from 'components-react/shared/AuthModal';
+import { useRealmObject } from 'components-react/hooks/realm';
 
 export default function SideNav() {
   const {
@@ -25,8 +26,11 @@ export default function SideNav() {
     SideNavService,
     WindowsService,
     UrlService,
+    VisionService,
   } = Services;
 
+  const visionState = useRealmObject(VisionService.state);
+
   const isDevMode = Utils.isDevMode();
 
   const {
@@ -53,8 +57,7 @@ export default function SideNav() {
   const [dashboardOpening, setDashboardOpening] = useState(false);
   const [showModal, setShowModal] = useState(false);
 
-  function openSettingsWindow(type?: string, category?: string) {
-    UsageStatisticsService.actions.recordClick('SideNav2', type ?? 'settings');
+  function openSettingsWindow(category?: string) {
     SettingsService.actions.showSettings(category);
   }
 
@@ -182,6 +185,15 @@ export default function SideNav() {
                 onClick={() => openHelp()}
               />
             );
+          } else if (menuItem.key === EMenuItemKey.Vision) {
+            return (
+              <NavToolsItem
+                key={menuItem.key}
+                menuItem={menuItem}
+                className={visionState.isRunning ? styles.vision : undefined}
+                onClick={() => openSettingsWindow('Vision')}
+              />
+            );
           } else if (menuItem.key === EMenuItemKey.Settings) {
             return (
               <NavToolsItem

app/components-react/windows/settings/Vision.tsx

@@ -1,35 +1,82 @@
 import { useRealmObject } from 'components-react/hooks/realm';
 import { Services } from 'components-react/service-provider';
 import React, { useEffect } from 'react';
-import { Button } from 'antd';
+import { Button, Progress } from 'antd';
+import { ObsSettingsSection } from './ObsSettings';
+import { confirmAsync } from 'components-react/modals';
+
+function VisionInstalling(props: { percent: number; isUpdate: boolean }) {
+  const message = props.isUpdate ? 'Updating...' : 'Installing...';
+
+  return (
+    <ObsSettingsSection title={message}>
+      <div style={{ marginBottom: 16 }}>
+        <Progress
+          percent={props.percent * 100}
+          status="active"
+          format={percent => `${(percent || 0).toFixed(0)}%`}
+        />
+      </div>
+    </ObsSettingsSection>
+  );
+}
+
+function VisionInfo(props: {
+  installedVersion: string;
+  isRunning: boolean;
+  isCurrentlyUpdating: boolean;
+  pid: number;
+  port: number;
+}) {
+  return (
+    <ObsSettingsSection title="Streamlabs Vision">
+      <div style={{ marginBottom: 16 }}>
+        <div>Installed: {props.installedVersion ? 'Yes' : 'No'}</div>
+        <div>Version: {props.installedVersion}</div>
+        <div>Running: {props.isRunning ? 'Yes' : 'No'}</div>
+        {props.isRunning && props.pid && <div>PID: {props.pid}</div>}
+        {props.isRunning && props.port && <div>Port: {props.port}</div>}
+      </div>
+    </ObsSettingsSection>
+  );
+}
 
 export function VisionSettings() {
   const { VisionService } = Services;
   const state = useRealmObject(VisionService.state);
 
   useEffect(() => {
-    VisionService.loadCurrentManifest();
-  }, []);
+    if (state.needsUpdate) {
+      let message = 'Streamlabs Vision must be updated before you can use it.';
+      let button = 'Update Now';
 
-  function installVision() {
-    VisionService.actions.ensureVision();
-  }
+      if (!state.installedVersion) {
+        message =
+          'Streamlabs needs to download additional components. Would you like to install them now?';
+        button = 'Install';
+      }
+
+      confirmAsync({ title: message, okText: button }).then(confirmed => {
+        if (confirmed) {
+          VisionService.actions.installOrUpdate();
+        }
+      });
+    }
+  }, []);
 
   return (
     <div>
-      <div>Installed: {state.installedVersion ? 'Yes' : 'No'}</div>
-      {state.installedVersion && <div>Version: {state.installedVersion}</div>}
-      {state.installedVersion && <div>Running: {state.isRunning ? 'Yes' : 'No'}</div>}
-      {state.isCurrentlyUpdating && <div>Progress: {state.percentDownloaded}</div>}
-      {state.isCurrentlyUpdating && state.isInstalling && <div>Installing...</div>}
-      {!state.installedVersion && !state.isCurrentlyUpdating && (
-        <Button onClick={() => installVision()}>Install</Button>
-      )}
-      {state.installedVersion && !state.isRunning && (
-        <Button onClick={() => installVision()}>Start</Button>
+      <VisionInfo
+        installedVersion={state.installedVersion}
+        isRunning={state.isRunning}
+        isCurrentlyUpdating={state.isCurrentlyUpdating}
+        pid={state.pid || 0}
+        port={state.port || 0}
+      />
+
+      {state.isCurrentlyUpdating && (
+        <VisionInstalling percent={state.percentDownloaded} isUpdate={!!state.installedVersion} />
       )}
-      {state.isRunning && state.pid && <div>PID: {state.pid}</div>}
-      {state.isRunning && state.port && <div>Port: {state.port}</div>}
     </div>
   );
 }

app/services/side-nav/menu-data.ts

@@ -25,6 +25,7 @@ export enum EMenuItemKey {
   GetHelp = 'get-help',
   Settings = 'settings',
   Login = 'login',
+  Vision = 'vision',
 }
 
 /**
@@ -160,6 +161,7 @@ export const menuTitles = (item: EMenuItemKey | ESubMenuItemKey | string) => {
     [ESubMenuItemKey.Widgets]: $t('Widgets'),
     [ESubMenuItemKey.TipSettings]: $t('Tip Settings'),
     [ESubMenuItemKey.Multistream]: $t('Multistream'),
+    [EMenuItemKey.Vision]: 'Vision',
   }[item];
 };
 
@@ -190,6 +192,7 @@ export const SideBarBottomNavData = (): IMenu => ({
     SideNavMenuItems()[EMenuItemKey.GetPrime],
     SideNavMenuItems()[EMenuItemKey.Dashboard],
     SideNavMenuItems()[EMenuItemKey.GetHelp],
+    SideNavMenuItems()[EMenuItemKey.Vision],
     SideNavMenuItems()[EMenuItemKey.Settings],
     SideNavMenuItems()[EMenuItemKey.Login],
   ],
@@ -306,6 +309,12 @@ export const SideNavMenuItems = (): TMenuItems => ({
     isActive: true,
     isExpanded: false,
   },
+  [EMenuItemKey.Vision]: {
+    key: EMenuItemKey.Vision,
+    icon: 'fas fa-eye',
+    isActive: true,
+    isExpanded: false,
+  },
   [EMenuItemKey.Settings]: {
     key: EMenuItemKey.Settings,
     icon: 'icon-settings',

app/services/sources/properties-managers/smart-browser-source-manager.ts

@@ -16,10 +16,11 @@ export class SmartBrowserSourceManager extends PropertiesManager {
 
       if (['visionEvent', 'userStateUpdated'].includes(e.type)) {
         //@ts-ignore
-        console.log("success", JSON.stringify(e));
+        console.log('success', JSON.stringify(e));
         this.obsSource.sendMessage({ message: JSON.stringify(e) });
       }
     });
+    this.visionService.ensureVision();
   }
 
   destroy() {

app/services/vision/index.ts

@@ -8,7 +8,7 @@ import { OutputStreamHandler } from 'services/platform-apps/api/modules/native-c
 import crypto from 'crypto';
 import { importExtractZip } from 'util/slow-imports';
 import { pipeline } from 'stream/promises';
-import { HostsService, SourcesService, UserService } from 'app-services';
+import { HostsService, SourcesService, SettingsService, UserService } from 'app-services';
 import { RealmObject } from 'services/realm';
 import { ObjectSchema } from 'realm';
 import http from 'http';
@@ -34,6 +34,7 @@ export class VisionState extends RealmObject {
   isRunning: boolean;
   pid: number;
   port: number;
+  needsUpdate: boolean;
 
   static schema: ObjectSchema = {
     name: 'VisionState',
@@ -44,7 +45,8 @@ export class VisionState extends RealmObject {
       isRunning: { type: 'bool', default: false },
       isInstalling: { type: 'bool', default: false },
       pid: { type: 'int', default: 0 },
-      port: { type: 'int', default: 0 }
+      port: { type: 'int', default: 0 },
+      needsUpdate: { type: 'bool', default: false },
     },
   };
 }
@@ -64,6 +66,7 @@ export class VisionService extends Service {
   @Inject() userService: UserService;
   @Inject() hostsService: HostsService;
   @Inject() private sourcesService: SourcesService;
+  @Inject() settingsService: SettingsService;
 
   state = VisionState.inject();
 
@@ -104,25 +107,46 @@ export class VisionService extends Service {
   }
 
   /**
-   * Ensures the following:
-   * - vision is downloaded and up to date
-   * - vision is running and sending events
-   * - we are subscribed to events
+   * Will pop up a dialog if vision is not installed
+   * or requires an update.
    */
   async ensureVision() {
+    if (this.proc && this.proc.exitCode != null) return;
+
     const needsUpdate = await this.isNewVersionAvailable();
 
+    this.state.db.write(() => {
+      this.state.needsUpdate = needsUpdate;
+    });
+
     if (needsUpdate) {
-      await this.update(progress => {
-        this.state.db.write(() => {
-          this.state.percentDownloaded = progress.percent;
-        });
+      this.settingsService.showSettings('Vision');
+    } else {
+      await this.startVision();
+    }
+  }
+
+  async installOrUpdate() {
+    if (this.state.isCurrentlyUpdating) return;
+
+    await this.update(progress => {
+      this.state.db.write(() => {
+        this.state.percentDownloaded = progress.percent;
       });
+    });
 
-      await this.loadCurrentManifest();
-    }
+    await this.loadCurrentManifest();
+
+    this.state.db.write(() => {
+      this.state.needsUpdate = false;
+      this.state.percentDownloaded = 0;
+    });
 
-    if (this.proc && this.proc.killed) {
+    await this.startVision();
+  }
+
+  async startVision() {
+    if (this.proc && this.proc.exitCode != null) {
       this.proc = null;
     }
 
@@ -435,6 +459,9 @@ export class VisionService extends Service {
     this.eventSource.onmessage = e => {
       console.log('GOT EVENT', e.data);
 
+      // Filter out game process detection events
+      if (e.data['events'].find((e: any) => e.name === 'game_process_detected')) return;
+
       const headers = authorizedHeaders(
         this.userService.apiToken,
         new Headers({ 'Content-Type': 'application/json' }),