Migrate Recording + Replay Buffer to Factory API

app/components-react/pages/RecordingHistory.tsx

@@ -293,7 +293,11 @@ export function RecordingHistory() {
             <div className={styles.recording} key={recording.timestamp}>
               <span style={{ marginRight: '8px' }}>{formattedTimestamp(recording.timestamp)}</span>
               <Tooltip title={$t('Show in folder')}>
-                <span onClick={() => showFile(recording.filename)} className={styles.filename}>
+                <span
+                  data-test="filename"
+                  onClick={() => showFile(recording.filename)}
+                  className={styles.filename}
+                >
                   {recording.filename}
                 </span>
               </Tooltip>

app/components-react/root/NotificationsArea.tsx

@@ -48,7 +48,7 @@ class NotificationsModule {
 
     message
       .info({
-        content: <MessageNode notif={notif} />,
+        content: <MessageNode notif={notif} data-testid="notification" />,
         duration: notif.lifeTime === -1 ? 0 : notif.lifeTime / 1000,
         key: `${notif.message}${notif.date}`,
         onClick: () => this.clickNotif(),

app/components-react/root/StudioFooter.tsx

@@ -4,7 +4,7 @@ import { EStreamQuality } from '../../services/performance';
 import { EStreamingState, EReplayBufferState, ERecordingState } from '../../services/streaming';
 import { Services } from '../service-provider';
 import { $t } from '../../services/i18n';
-import { useVuex } from '../hooks';
+import { useDebounce, useVuex } from '../hooks';
 import styles from './StudioFooter.m.less';
 import PerformanceMetrics from '../shared/PerformanceMetrics';
 import TestWidgets from './TestWidgets';
@@ -42,9 +42,12 @@ export default function StudioFooterComponent() {
       StreamingService.views.supports('stream-schedule') &&
       !RecordingModeService.views.isRecordingModeEnabled,
     streamQuality: PerformanceService.views.streamQuality,
-    replayBufferOffline: StreamingService.state.replayBufferStatus === EReplayBufferState.Offline,
-    replayBufferStopping: StreamingService.state.replayBufferStatus === EReplayBufferState.Stopping,
-    replayBufferSaving: StreamingService.state.replayBufferStatus === EReplayBufferState.Saving,
+    replayBufferOffline:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Offline,
+    replayBufferStopping:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Stopping,
+    replayBufferSaving:
+      StreamingService.state.status.horizontal.replayBuffer === EReplayBufferState.Saving,
     recordingModeEnabled: RecordingModeService.views.isRecordingModeEnabled,
     replayBufferEnabled: SettingsService.views.values.Output.RecRB,
   }));
@@ -83,7 +86,7 @@ export default function StudioFooterComponent() {
   }
 
   function toggleReplayBuffer() {
-    if (StreamingService.state.replayBufferStatus === EReplayBufferState.Offline) {
+    if (replayBufferOffline) {
       StreamingService.actions.startReplayBuffer();
     } else {
       StreamingService.actions.stopReplayBuffer();
@@ -197,7 +200,7 @@ function RecordingButton() {
   const { StreamingService } = Services;
   const { isRecording, recordingStatus } = useVuex(() => ({
     isRecording: StreamingService.views.isRecording,
-    recordingStatus: StreamingService.state.recordingStatus,
+    recordingStatus: StreamingService.state.status.horizontal.recording,
   }));
 
   function toggleRecording() {
@@ -214,7 +217,7 @@ function RecordingButton() {
         >
           <button
             className={cx(styles.recordButton, 'record-button', { active: isRecording })}
-            onClick={toggleRecording}
+            onClick={useDebounce(200, toggleRecording)}
           >
             <span>
               {recordingStatus === ERecordingState.Stopping ? (

app/i18n/en-US/streaming.json

@@ -289,6 +289,8 @@
   "Issues": "Issues",
   "Multistream Error": "Multistream Error",
   "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.": "One of destinations might have incomplete permissions. Reconnect the destinations in settings and try again.",
+  "A new Highlight has been saved. Click to edit in the Highlighter": "A new Highlight has been saved. Click to edit in the Highlighter",
+  "An unknown %{type} error occurred.": "An unknown %{type} error occurred.",
   "Failed Checks": "Failed Checks",
   "Video Transmission": "Video Transmission",
   "Optimized Settings": "Optimized Settings",

app/services/api/external-api/streaming/streaming.ts

@@ -23,6 +23,7 @@ enum ERecordingState {
   Starting = 'starting',
   Recording = 'recording',
   Stopping = 'stopping',
+  Start = 'start',
   Wrote = 'wrote',
 }
 
@@ -34,6 +35,7 @@ enum EReplayBufferState {
   Stopping = 'stopping',
   Offline = 'offline',
   Saving = 'saving',
+  Wrote = 'wrote',
 }
 
 /**
@@ -42,9 +44,13 @@ enum EReplayBufferState {
  */
 interface IStreamingState {
   streamingStatus: EStreamingState;
+  verticalStreamingStatus: EStreamingState;
   streamingStatusTime: string;
+  verticalStreamingStatusTime: string;
   recordingStatus: ERecordingState;
+  verticalRecordingStatus: ERecordingState;
   recordingStatusTime: string;
+  verticalRecordingStatusTime: string;
   replayBufferStatus: EReplayBufferState;
   replayBufferStatusTime: string;
   streamErrorCreated?: string;

app/services/app/app.ts

@@ -44,6 +44,7 @@ import { DualOutputService } from 'services/dual-output';
 import { OS, getOS } from 'util/operating-systems';
 import * as remote from '@electron/remote';
 import { RealmService } from 'services/realm';
+import { StreamingService } from 'services/streaming';
 
 interface IAppState {
   loading: boolean;
@@ -96,6 +97,7 @@ export class AppService extends StatefulService<IAppState> {
   @Inject() private videoSettingsService: VideoSettingsService;
   @Inject() private dualOutputService: DualOutputService;
   @Inject() private realmService: RealmService;
+  @Inject() private streamingService: StreamingService;
 
   static initialState: IAppState = {
     loading: true,
@@ -192,6 +194,7 @@ export class AppService extends StatefulService<IAppState> {
       this.shutdownStarted.next();
       this.keyListenerService.shutdown();
       this.platformAppsService.unloadAllApps();
+      this.streamingService.shutdown();
       await this.usageStatisticsService.flushEvents();
       this.windowsService.shutdown();
       this.ipcServerService.stopListening();

app/services/highlighter/index.ts

@@ -353,6 +353,18 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     }
 
     this.handleStreamingChanges();
+
+    if (!this.userService.isLoggedIn) return;
+
+    this.streamingService.replayBufferFileWrite.subscribe(async clipPath => {
+      const message = $t('A new Highlight has been saved. Click to edit in the Highlighter');
+
+      this.notificationsService.push({
+        type: ENotificationType.SUCCESS,
+        message,
+        action: this.jsonrpcService.createRequest(Service.getResourceId(this), 'showHighlighter'),
+      });
+    });
   }
 
   private handleStreamingChanges() {
@@ -1544,6 +1556,10 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     return id;
   }
 
+  showHighlighter() {
+    this.navigationService.navigate('Highlighter');
+  }
+
   /**
    * Utility function that returns a promise that resolves after a specified delay
    * @param ms Delay in milliseconds

app/services/platform-apps/api/modules/replay.ts

@@ -107,8 +107,8 @@ export class ReplayModule extends Module {
 
   private serializeState(): IReplayBufferState {
     return {
-      status: this.streamingService.state.replayBufferStatus,
-      statusTime: this.streamingService.state.replayBufferStatusTime,
+      status: this.streamingService.state.status.horizontal.replayBuffer,
+      statusTime: this.streamingService.state.status.horizontal.replayBufferTime,
     };
   }
 }

app/services/recording-mode.ts

@@ -8,7 +8,7 @@ import { ELayout, ELayoutElement, LayoutService } from './layout';
 import { ScenesService } from './scenes';
 import { EObsSimpleEncoder, SettingsService } from './settings';
 import { AnchorPoint, ScalableRectangle } from 'util/ScalableRectangle';
-import { VideoSettingsService } from './settings-v2/video';
+import { TDisplayType, VideoSettingsService } from './settings-v2/video';
 import { ENotificationType, NotificationsService } from 'services/notifications';
 import { DefaultHardwareService } from './hardware';
 import { RunInLoadingMode } from './app/app-decorators';
@@ -18,6 +18,7 @@ import { NavigationService, UsageStatisticsService, SharedStorageService } from
 import { getPlatformService } from 'services/platforms';
 import { IYoutubeUploadResponse } from 'services/platforms/youtube/uploader';
 import { YoutubeService } from 'services/platforms/youtube';
+import { capitalize } from 'lodash';
 
 export interface IRecordingEntry {
   timestamp: string;
@@ -180,12 +181,22 @@ export class RecordingModeService extends PersistentStatefulService<IRecordingMo
     }, 10 * 1000);
   }
 
-  addRecordingEntry(filename: string) {
+  /**
+   * Add entry to recording history and show notification
+   * @param filename - name of file to show in recording history
+   * @param showNotification - primarily used when recording in dual output mode to only show the notification once
+   */
+  addRecordingEntry(filename: string, display?: TDisplayType) {
     const timestamp = moment().format();
     this.ADD_RECORDING_ENTRY(timestamp, filename);
+
+    const message = display
+      ? $t(`A new ${capitalize(display)} Recording has been completed. Click for more info`)
+      : $t('A new Recording has been completed. Click for more info');
+
     this.notificationsService.actions.push({
       type: ENotificationType.SUCCESS,
-      message: $t('A new Recording has been completed. Click for more info'),
+      message,
       action: this.jsonrpcService.createRequest(
         Service.getResourceId(this),
         'showRecordingHistory',