Merge branch 'master' into sb_port_main_window

.gitignore

@@ -31,3 +31,4 @@ license_en.txt
 !.yarn/sdks
 !.yarn/versions
 chromedriver.log
+shared-resources/ai-highlighter/*

app/app-services.ts

@@ -74,13 +74,15 @@ export {
 export { FacebookService } from 'services/platforms/facebook';
 export { TikTokService } from 'services/platforms/tiktok';
 export { TrovoService } from 'services/platforms/trovo';
+export { KickService } from 'services/platforms/kick';
 export { RestreamService } from 'services/restream';
 export { TwitterService } from 'services/integrations/twitter';
 export { TwitterPlatformService } from 'services/platforms/twitter';
 export { InstagramService } from 'services/platforms/instagram';
 export { UsageStatisticsService } from './services/usage-statistics';
 export { GameOverlayService } from 'services/game-overlay';
 export { SharedStorageService } from 'services/integrations/shared-storage';
+export { RemoteControlService } from 'services/api/remote-control-api';
 
 export { MediaGalleryService } from 'services/media-gallery';
 export { MediaBackupService } from 'services/media-backup';
@@ -205,7 +207,9 @@ import { SharedStorageService } from 'services/integrations/shared-storage';
 import { RealmService } from 'services/realm';
 import { InstagramService } from 'services/platforms/instagram';
 import { TwitchStudioImporterService } from 'services/ts-importer';
+import { RemoteControlService } from 'services/api/remote-control-api';
 import { UrlService } from 'services/hosts';
+import { KickService } from 'services/platforms/kick';
 
 export const AppServices = {
   AppService,
@@ -238,6 +242,7 @@ export const AppServices = {
   TwitchTagsService,
   TwitchContentClassificationService,
   TrovoService,
+  KickService,
   InstagramService,
   DismissablesService,
   HighlighterService,
@@ -284,5 +289,6 @@ export const AppServices = {
   MarkersService,
   SharedStorageService,
   RealmService,
+  RemoteControlService,
   UrlService,
 };

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

@@ -6,7 +6,7 @@
   align-items: center;
   justify-content: flex-end;
 
-  > div:last-child {
+  >div:last-child {
     top: 44px !important;
     height: calc(100% - 44px);
   }
@@ -34,7 +34,7 @@
 }
 
 :global(.no-top-padding) {
-  .top-container > div:last-child {
+  .top-container>div:last-child {
     top: 32px !important;
     height: calc(100% - 32px);
   }
@@ -99,9 +99,15 @@
     border-radius: 0 !important;
   }
 
+  :global(.ant-tree-treenode) {
+    padding: 0 !important;
+  }
+
   :global(.ant-tree-node-content-wrapper) {
     padding-left: 16px !important;
     display: flex;
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
   }
 
   :global(.ant-tree-node-selected) {
@@ -165,7 +171,7 @@
   display: flex;
   align-items: center;
 
-  > i {
+  >i {
     margin-right: 8px;
     opacity: 0;
   }
@@ -196,14 +202,21 @@
 .sources-container {
   :global(.ant-tree-switcher) {
     width: 0;
-    display: block;
+    display: flex;
+    align-items: center;
     z-index: 1;
     left: 10px;
   }
 
   :global(.ant-tree-node-content-wrapper) {
     padding-left: 32px !important;
     display: flex;
+    padding-top: 4px !important;
+    padding-bottom: 4px !important;
+  }
+
+  :global(.ant-tree-treenode) {
+    padding: 0 !important;
   }
 
   :global(.ant-tree-title) {
@@ -216,9 +229,16 @@
       &::before {
         content: '\f07c';
       }
+
       color: var(--title);
     }
   }
+
+  :global(.ant-tree-switcher i) {
+    vertical-align: middle;
+    // Icomoon icons have needed this all along
+    display: inline-block;
+  }
 }
 
 .tree-mask {
@@ -231,6 +251,7 @@
 .toggle-error {
   padding: 0px !important;
   text-align: unset !important;
+
   :global(.ant-message-notice-content) {
     padding: 4px 16px;
   }

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

@@ -53,6 +53,7 @@ class SourceSelectorController {
   private guestCamService = Services.GuestCamService;
   private dualOutputService = Services.DualOutputService;
   private userService = Services.UserService;
+  private tiktokService = Services.TikTokService;
 
   store = initStore({
     expandedFoldersIds: [] as string[],
@@ -676,6 +677,9 @@ class SourceSelectorController {
         Services.UsageStatisticsService.recordAnalyticsEvent('DualOutput', {
           type: 'ToggleOnDualOutput',
           source: 'SourceSelector',
+          isPrime: this.userService.isPrime,
+          platforms: this.streamingService.views.linkedPlatforms,
+          tiktokStatus: this.tiktokService.scope,
         });
 
         if (!this.dualOutputService.views.dualOutputMode && this.selectiveRecordingEnabled) {
@@ -784,6 +788,7 @@ function StudioControls() {
             active: ctrl.isDualOutputActive,
           })}
           onClick={() => ctrl.toggleDualOutput()}
+          data-testid={ctrl.isDualOutputActive ? 'dual-output-active' : 'dual-output-inactive'}
         />
       </Tooltip>
 

app/components-react/editor/elements/mixer/GLVolmeters.tsx

@@ -1,13 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { IVolmeter } from 'services/audio';
-import { Subscription } from 'rxjs';
 import electron, { ipcRenderer } from 'electron';
 import difference from 'lodash/difference';
 import { compileShader, createProgram } from 'util/webgl/utils';
 import vShaderSrc from 'util/webgl/shaders/volmeter.vert';
 import fShaderSrc from 'util/webgl/shaders/volmeter.frag';
 import { Services } from 'components-react/service-provider';
-import { injectWatch, useModule } from 'slap';
 import { assertIsDefined, getDefined } from 'util/properties-type-guards';
 
 // Configuration
@@ -47,13 +45,20 @@ interface IVolmeterSubscription {
  * Component that renders the volume for audio sources via WebGL
  */
 export default function GLVolmeters() {
-  const { setupNewCanvas } = useModule(GLVolmetersModule);
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
+  // init controller on mount
+  const controller = useMemo(() => {
+    const controller = new GLVolmetersController();
+    controller.init();
+    return controller;
+  }, []);
+
   // start rendering volmeters when the canvas is ready
   useEffect(() => {
     assertIsDefined(canvasRef.current);
-    setupNewCanvas(canvasRef.current);
+    controller.setupNewCanvas(canvasRef.current);
+    return () => controller.beforeDestroy(); // cleanup on unmount
   }, []);
 
   return (
@@ -75,9 +80,10 @@ export default function GLVolmeters() {
   );
 }
 
-class GLVolmetersModule {
+class GLVolmetersController {
   private customizationService = Services.CustomizationService;
   private audioService = Services.AudioService;
+  private sourcesService = Services.SourcesService;
 
   subscriptions: Dictionary<IVolmeterSubscription> = {};
 
@@ -113,7 +119,6 @@ class GLVolmetersModule {
   private workerId: number;
   private requestedFrameId: number;
   private bgMultiplier = this.customizationService.isDarkTheme ? 0.2 : 0.5;
-  private customizationServiceSubscription: Subscription = null!;
 
   init() {
     this.workerId = electron.ipcRenderer.sendSync('getWorkerWindowId');
@@ -133,12 +138,6 @@ class GLVolmetersModule {
     });
   }
 
-  // update volmeters subscriptions when audio sources change
-  watchAudioSources = injectWatch(
-    () => this.audioSources,
-    () => this.subscribeVolmeters(),
-  );
-
   /**
    * add or remove subscription for volmeters depending on current scene
    */
@@ -164,13 +163,19 @@ class GLVolmetersModule {
         subscription.lastEventTime = performance.now();
       };
 
+      const IDLE_PEAK = -60;
+      const INITIAL_PEAKS = [IDLE_PEAK, IDLE_PEAK];
+
       // create a subscription object
       this.subscriptions[sourceId] = {
         sourceId,
         // Assume 2 channels until we know otherwise. This prevents too much
         // visual jank as the volmeters are initializing.
         channelsCount: 2,
-        currentPeaks: [],
+        // HACK: Initialize currentPeaks to an idle-ish peak, if the source
+        // has never emitted any events, volmeters won't get drawn and we get
+        // a missing bar on app load or source device switch.
+        currentPeaks: INITIAL_PEAKS,
         prevPeaks: [],
         interpolatedPeaks: [],
         lastEventTime: 0,
@@ -217,7 +222,6 @@ class GLVolmetersModule {
 
     // cancel next frame rendering
     cancelAnimationFrame(this.requestedFrameId);
-    this.customizationServiceSubscription.unsubscribe();
   }
 
   setupNewCanvas($canvasEl: HTMLCanvasElement) {
@@ -282,14 +286,7 @@ class GLVolmetersModule {
 
     // Vertex geometry for a unit square
     // eslint-disable-next-line
-    const positions = [
-      0, 0,
-      0, 1,
-      1, 0,
-      1, 0,
-      0, 1,
-      1, 1,
-    ];
+    const positions = [0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 1, 1];
 
     this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(positions), this.gl.STATIC_DRAW);
 
@@ -326,7 +323,10 @@ class GLVolmetersModule {
   private setColorUniform(uniform: string, color: number[]) {
     const location = this.gl.getUniformLocation(this.program, uniform);
     // eslint-disable-next-line
-    this.gl.uniform3fv(location, color.map(c => c / 255));
+    this.gl.uniform3fv(
+      location,
+      color.map(c => c / 255),
+    );
   }
 
   private setCanvasSize() {