Factory API Migration

app/components-react/highlighter/ClipPreview.m.less

@@ -15,6 +15,11 @@
 .preview-image {
   object-fit: none;
   border-radius: 10px;
+
+  &.vertical-preview {
+    margin: 0px 110px;
+    border-radius: unset !important;
+  }
 }
 
 .deleted-preview {

app/components-react/highlighter/ClipPreview.tsx

@@ -1,5 +1,10 @@
 import { TClip } from 'services/highlighter/models/highlighter.models';
-import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_FRAMES } from 'services/highlighter/constants';
+import {
+  SCRUB_HEIGHT,
+  SCRUB_WIDTH,
+  SCRUB_WIDTH_VERTICAL,
+  SCRUB_FRAMES,
+} from 'services/highlighter/constants';
 import React, { useState } from 'react';
 import { Services } from 'components-react/service-provider';
 import { BoolButtonInput } from 'components-react/shared/inputs/BoolButtonInput';
@@ -10,7 +15,7 @@ import { isAiClip } from './utils';
 import { useVuex } from 'components-react/hooks';
 import ClipPreviewInfo from './ClipPreviewInfo';
 import { EGame } from 'services/highlighter/models/ai-highlighter.models';
-import * as remote from '@electron/remote';
+import cx from 'classnames';
 
 export default function ClipPreview(props: {
   clipId: string;
@@ -33,8 +38,10 @@ export default function ClipPreview(props: {
     return <>deleted</>;
   }
 
+  const width = v.clip.display === 'vertical' ? SCRUB_WIDTH_VERTICAL : SCRUB_WIDTH;
+
   function mouseMove(e: React.MouseEvent) {
-    const frameIdx = Math.floor((e.nativeEvent.offsetX / SCRUB_WIDTH) * SCRUB_FRAMES);
+    const frameIdx = Math.floor((e.nativeEvent.offsetX / width) * SCRUB_FRAMES);
     if (scrubFrame !== frameIdx) {
       setScrubFrame(frameIdx);
     }
@@ -50,12 +57,13 @@ export default function ClipPreview(props: {
         {!v.clip.deleted && (
           <img
             src={clipThumbnail}
-            className={styles.previewImage}
+            className={cx(styles.previewImage, {
+              [styles.verticalPreview]: v.clip.display === 'vertical',
+            })}
             style={{
-              width: `${SCRUB_WIDTH}px`,
+              width: `${width}px`,
               height: `${SCRUB_HEIGHT}px`,
-
-              objectPosition: `-${scrubFrame * SCRUB_WIDTH}px`,
+              objectPosition: `-${scrubFrame * width}px`,
             }}
             onMouseMove={mouseMove}
             onClick={props.emitShowTrim}

app/components-react/highlighter/ClipTrimmer.tsx

@@ -1,6 +1,11 @@
 import React, { useEffect, useRef, useState, RefObject } from 'react';
 import { TClip } from 'services/highlighter/models/highlighter.models';
-import { SCRUB_FRAMES, SCRUB_HEIGHT, SCRUB_WIDTH } from 'services/highlighter/constants';
+import {
+  SCRUB_FRAMES,
+  SCRUB_HEIGHT,
+  SCRUB_WIDTH,
+  SCRUB_WIDTH_VERTICAL,
+} from 'services/highlighter/constants';
 import { Services } from 'components-react/service-provider';
 import times from 'lodash/times';
 import styles from './ClipTrimmer.m.less';
@@ -44,6 +49,7 @@ export default function ClipTrimmer(props: { clip: TClip; streamId: string | und
   const [isPlaying, setIsPlaying] = useStateRef(false);
 
   const endTime = props.clip.duration! - localEndTrim;
+  const width = props.clip?.display === 'vertical' ? SCRUB_WIDTH_VERTICAL : SCRUB_WIDTH;
 
   function playAt(t: number) {
     if (!videoRef.current) return;
@@ -165,7 +171,7 @@ export default function ClipTrimmer(props: { clip: TClip; streamId: string | und
   }
 
   const scrubHeight = 100;
-  const scrubWidth = scrubHeight * (SCRUB_WIDTH / SCRUB_HEIGHT);
+  const scrubWidth = scrubHeight * (width / SCRUB_HEIGHT);
 
   // TODO: React to window size change
   useEffect(() => {
@@ -187,7 +193,7 @@ export default function ClipTrimmer(props: { clip: TClip; streamId: string | und
       <video
         ref={videoRef}
         src={props.clip.path.replace('#', '%23')}
-        style={{ borderRadius: 5 }}
+        style={{ borderRadius: 5, height: '50vh' }}
         width="100%"
         onEnded={() => {
           setIsPlaying(false);
@@ -218,13 +224,13 @@ export default function ClipTrimmer(props: { clip: TClip; streamId: string | und
               <img
                 key={frame}
                 src={props.clip.scrubSprite?.replace('#', '%23')}
-                width={SCRUB_WIDTH}
+                width={width}
                 height={SCRUB_HEIGHT}
                 style={{
                   height: scrubHeight,
                   width: scrubWidth,
                   objectFit: 'cover',
-                  objectPosition: `-${frame * SCRUB_WIDTH * (scrubHeight / SCRUB_HEIGHT)}px`,
+                  objectPosition: `-${frame * width * (scrubHeight / SCRUB_HEIGHT)}px`,
                   pointerEvents: 'none',
                   maxWidth: '100%',
                 }}

app/components-react/highlighter/Export/ExportModal.tsx

@@ -19,7 +19,7 @@ import { useVuex } from 'components-react/hooks';
 import { initStore, useController } from '../../hooks/zustand';
 import { EOrientation, TOrientation } from 'services/highlighter/models/ai-highlighter.models';
 import { fileExists } from 'services/highlighter/file-utils';
-import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_FRAMES } from 'services/highlighter/constants';
+import { SCRUB_WIDTH, SCRUB_WIDTH_VERTICAL } from 'services/highlighter/constants';
 import styles from './ExportModal.m.less';
 import { getCombinedClipsDuration } from '../utils';
 import { formatSecondsToHMS } from '../ClipPreview';
@@ -385,7 +385,7 @@ function ExportFlow({
                 style={
                   currentFormat === EOrientation.HORIZONTAL
                     ? { objectPosition: 'left' }
-                    : { objectPosition: `-${(SCRUB_WIDTH * 1.32) / 3 + 4}px` }
+                    : { objectPosition: `-${(SCRUB_WIDTH * 1.32) / 3 + 4}px` } // @@@
                 }
               />
             </div>

app/components-react/highlighter/MiniClipPreview.tsx

@@ -5,7 +5,7 @@ import { Services } from 'components-react/service-provider';
 import { BoolButtonInput, CheckboxInput } from 'components-react/shared/inputs';
 import { SwitchInput } from 'components-react/shared/inputs/SwitchInput';
 import React from 'react';
-import { SCRUB_HEIGHT, SCRUB_WIDTH } from 'services/highlighter/constants';
+import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_WIDTH_VERTICAL } from 'services/highlighter/constants';
 import { TClip } from 'services/highlighter/models/highlighter.models';
 import styles from './MiniClipPreview.m.less';
 
@@ -24,6 +24,7 @@ export default function MiniClipPreview({
 }) {
   const { HighlighterService } = Services;
   const clip = useVuex(() => HighlighterService.views.clipsDictionary[clipId] as TClip);
+  const width = clip.display === 'vertical' ? SCRUB_WIDTH_VERTICAL : SCRUB_WIDTH;
 
   return (
     <div
@@ -49,7 +50,7 @@ export default function MiniClipPreview({
         className={styles.thumbnailSpecs}
         style={{
           opacity: !clip.enabled ? '0.3' : '1',
-          width: `${SCRUB_WIDTH / 6}px`,
+          width: `${width / 6}px`,
           height: `${SCRUB_HEIGHT / 6}px`,
         }}
       ></img>

app/components-react/highlighter/RemoveModal.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { TClip } from 'services/highlighter/models/highlighter.models';
 import { $t } from 'services/i18n';
 import styles from './RemoveModal.m.less';
-import { SCRUB_HEIGHT, SCRUB_WIDTH } from 'services/highlighter/constants';
+import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_WIDTH_VERTICAL } from 'services/highlighter/constants';
 
 export default function RemoveModal(p: {
   removeType: 'clip' | 'stream';
@@ -17,6 +17,8 @@ export default function RemoveModal(p: {
   const [deleteAllSelected, setDeleteAllSelected] = useState<boolean>(false);
   const [clipsToDelete, setClipsToDelete] = useState<TClip[]>([p.clip]);
 
+  const width = p.clip.display === 'vertical' ? SCRUB_WIDTH_VERTICAL : SCRUB_WIDTH;
+
   function getClipsToDelete(): TClip[] {
     return HighlighterService.getClips(HighlighterService.views.clips, p.streamId).filter(
       clip => clip.path !== p.clip.path && clip.enabled,
@@ -38,7 +40,7 @@ export default function RemoveModal(p: {
             <div
               className={styles.thumbnail}
               style={{
-                width: `${SCRUB_WIDTH / 2}px`,
+                width: `${width / 2}px`,
                 height: `${SCRUB_HEIGHT / 2}px`,
                 rotate: `${clipsToDelete.length !== 1 ? (index - 1) * 6 : 0}deg`,
                 scale: '1.2',

app/components-react/highlighter/SettingsView.tsx

@@ -12,8 +12,8 @@ import Scrollable from 'components-react/shared/Scrollable';
 import styles from './SettingsView.m.less';
 import { $t } from 'services/i18n';
 import { EHighlighterView, IViewState } from 'services/highlighter/models/highlighter.models';
-import { EAvailableFeatures } from 'services/incremental-rollout';
 import SupportedGames from './supportedGames/SupportedGames';
+import { promptAction } from 'components-react/modals';
 
 export default function SettingsView({
   emitSetView,
@@ -22,13 +22,7 @@ export default function SettingsView({
   emitSetView: (data: IViewState) => void;
   close: () => void;
 }) {
-  const {
-    HotkeysService,
-    SettingsService,
-    StreamingService,
-    HighlighterService,
-    IncrementalRolloutService,
-  } = Services;
+  const { HotkeysService, SettingsService, StreamingService, HighlighterService } = Services;
   const aiHighlighterFeatureEnabled = HighlighterService.aiHighlighterFeatureEnabled;
   const [hotkey, setHotkey] = useState<IHotkey | null>(null);
   const hotkeyRef = useRef<IHotkey | null>(null);
@@ -38,8 +32,14 @@ export default function SettingsView({
     isStreaming: StreamingService.isStreaming,
     useAiHighlighter: HighlighterService.views.useAiHighlighter,
     highlighterVersion: HighlighterService.views.highlighterVersion,
+    isVerticalRecording: StreamingService.views.isVerticalRecording,
+    isVerticalReplayBuffer: StreamingService.views.isVerticalReplayBuffer,
+    outputDisplay: StreamingService.views.outputDisplay,
   }));
 
+  const disableAIHighlighter =
+    (v.isVerticalRecording || v.isVerticalReplayBuffer) && v.outputDisplay === 'vertical';
+
   const correctlyConfigured =
     v.settingsValues.Output.RecRB &&
     v.settingsValues.General.ReplayBufferWhileStreaming &&
@@ -112,6 +112,44 @@ export default function SettingsView({
     HighlighterService.actions.toggleAiHighlighter();
   }
 
+  function handleToggleHighlighter() {
+    if (disableAIHighlighter) {
+      const title = v.isVerticalRecording
+        ? $t('Vertical Recording Active')
+        : $t('Vertical Replay Buffer Active');
+
+      const message = v.isVerticalRecording
+        ? $t(
+            'Vertical recording is in-progress. Would you like to stop the recording to enable AI Highlighter?',
+          )
+        : $t(
+            'Vertical replay buffer is active. Would you like to stop the replay buffer to enable AI Highlighter?',
+          );
+
+      const btnText = v.isVerticalRecording ? $t('Stop Recording') : $t('Stop Replay Buffer');
+
+      promptAction({
+        title,
+        message,
+        btnText,
+        fn: () => {
+          if (v.isVerticalRecording) {
+            StreamingService.actions.toggleRecording();
+          } else {
+            StreamingService.actions.stopReplayBuffer();
+          }
+          toggleUseAiHighlighter();
+        },
+        cancelBtnPosition: 'left',
+        cancelBtnText: $t('Cancel'),
+      });
+
+      return;
+    }
+
+    toggleUseAiHighlighter();
+  }
+
   return (
     <div className={styles.settingsViewRoot}>
       <div style={{ display: 'flex', padding: 20 }}>
@@ -175,8 +213,8 @@ export default function SettingsView({
                   <SwitchInput
                     style={{ margin: 0, marginLeft: '-10px' }}
                     size="default"
-                    value={v.useAiHighlighter}
-                    onChange={toggleUseAiHighlighter}
+                    value={disableAIHighlighter ? false : v.useAiHighlighter}
+                    onChange={handleToggleHighlighter}
                   />
                 ) : (
                   <Button

app/components-react/modals.tsx

@@ -125,12 +125,13 @@ export function promptAsync(
 export function promptAction(p: {
   title: string;
   message: string;
-  btnText: string;
+  btns?: { text: string; fn?: () => void }[];
+  btnText?: string;
   btnType?: 'default' | 'primary';
   cancelBtnPosition?: 'left' | 'right' | 'none';
   cancelBtnText?: string;
   fn?(): void | ((props: any) => unknown | void);
-  cancelFn?: void | ((props?: any) => unknown | void);
+  cancelFn?(): void | ((props?: any) => unknown | void);
   icon?: React.ReactNode;
   secondaryActionText?: string;
   secondaryActionFn?: () => unknown;

app/components-react/obs/ObsForm.tsx

@@ -1,4 +1,4 @@
-import React, { LegacyRef, RefObject, forwardRef, useMemo, useRef, useState } from 'react';
+import React, { LegacyRef, RefObject, forwardRef, useRef, useState } from 'react';
 import { ISettingsSubCategory } from '../../services/settings';
 import {
   IObsInput,

app/components-react/pages/RecordingHistory.tsx

@@ -305,6 +305,12 @@ export function RecordingHistory(p: { className?: string }) {
         <Scrollable style={{ height: '100%' }}>
           {recordings.map(recording => (
             <div className={styles.recording} key={recording.timestamp}>
+              {recording?.display && recording.display === 'vertical' && (
+                <i className="icon-phone-case" style={{ paddingRight: '10px' }} />
+              )}
+              {recording?.display && recording.display === 'horizontal' && (
+                <i className="icon-desktop" style={{ paddingRight: '10px' }} />
+              )}
               <span style={{ marginRight: '8px' }}>{formattedTimestamp(recording.timestamp)}</span>
               <Tooltip title={$t('Show in folder')}>
                 <span

app/components-react/root/Banner.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import * as remote from '@electron/remote';
-import { useVuex } from 'components-react/hooks';
 import { Services } from 'components-react/service-provider';
 import { TAppPage } from 'services/navigation';
 import { $t } from 'services/i18n';

app/components-react/root/StartStreamingButton.tsx

@@ -233,13 +233,18 @@ export default function StartStreamingButton(p: { disabled?: boolean }) {
     }
   }, []);
 
-  const getIsRedButton =
-    streamingStatus !== EStreamingState.Offline && streamShiftStatus !== 'pending';
+  const getIsRedButton = useMemo(
+    () => streamingStatus !== EStreamingState.Offline && streamShiftStatus !== 'pending',
+    [streamingStatus],
+  );
 
-  const isDisabled =
-    p.disabled ||
-    (streamingStatus === EStreamingState.Starting && delaySecondsRemaining === 0) ||
-    (streamingStatus === EStreamingState.Ending && delaySecondsRemaining === 0);
+  const isDisabled = useMemo(() => {
+    return (
+      p.disabled ||
+      (streamingStatus === EStreamingState.Starting && delaySecondsRemaining === 0) ||
+      (streamingStatus === EStreamingState.Ending && delaySecondsRemaining === 0)
+    );
+  }, [p.disabled, streamingStatus, delaySecondsRemaining]);
 
   const fetchStreamShiftStatus = useCallback(async () => {
     try {