(WIP) [Highlighter] - performance improvements

app/components-react/highlighter/ClipPreview.tsx

@@ -18,6 +18,7 @@ export default function ClipPreview(props: {
   emitShowTrim: () => void;
   emitShowRemove: () => void;
   emitOpenFileInLocation: () => void;
+  game: EGame;
 }) {
   const { HighlighterService } = Services;
   const v = useVuex(() => ({
@@ -28,8 +29,6 @@ export default function ClipPreview(props: {
   const clipThumbnail = v.clip.scrubSprite || '';
   const enabled = v.clip.deleted ? false : v.clip.enabled;
 
-  const game = HighlighterService.getGameByStreamId(props.streamId);
-
   if (!v.clip) {
     return <>deleted</>;
   }
@@ -108,7 +107,7 @@ export default function ClipPreview(props: {
                 }}
               >
                 {isAiClip(v.clip) ? (
-                  <ClipPreviewInfo clip={v.clip} game={game} />
+                  <ClipPreviewInfo clip={v.clip} game={props.game} />
                 ) : (
                   <div className={styles.highlighterIcon}>
                     <i className="icon-highlighter" />
@@ -151,8 +150,9 @@ export function formatSecondsToHMS(seconds: number): string {
   const hours = Math.floor(totalSeconds / 3600);
   const minutes = Math.floor((totalSeconds % 3600) / 60);
   const remainingSeconds = totalSeconds % 60;
-  return `${hours !== 0 ? hours.toString() + 'h ' : ''} ${minutes !== 0 ? minutes.toString() + 'm ' : ''
-    }${remainingSeconds !== 0 ? remainingSeconds.toString() + 's' : ''}`;
+  return `${hours !== 0 ? hours.toString() + 'h ' : ''} ${
+    minutes !== 0 ? minutes.toString() + 'm ' : ''
+  }${remainingSeconds !== 0 ? remainingSeconds.toString() + 's' : ''}`;
 }
 
 function FlameHypeScore({ score }: { score: number }) {

app/components-react/highlighter/ClipsView.tsx

@@ -55,6 +55,7 @@ export default function ClipsView({
   const [activeFilter, setActiveFilter] = useState('all'); // Currently not using the setActiveFilter option
 
   const [clipsLoaded, setClipsLoaded] = useState<boolean>(false);
+
   const loadClips = useCallback(async (id: string | undefined) => {
     await HighlighterService.actions.return.loadClips(id);
     setClipsLoaded(true);
@@ -316,6 +317,7 @@ export default function ClipsView({
                                 remote.shell.showItemInFolder(clip.path);
                               }}
                               streamId={streamId}
+                              game={game}
                             />
                           </div>
                         );

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

@@ -23,7 +23,6 @@ import { SCRUB_HEIGHT, SCRUB_WIDTH, SCRUB_FRAMES } from 'services/highlighter/co
 import styles from './ExportModal.m.less';
 import { getCombinedClipsDuration } from '../utils';
 import { formatSecondsToHMS } from '../ClipPreview';
-import { set } from 'lodash';
 import PlatformSelect from './Platform';
 import cx from 'classnames';
 import { getVideoResolution } from 'services/highlighter/cut-highlight-clips';
@@ -55,9 +54,7 @@ class ExportController {
   getClips(streamId?: string) {
     return this.service.getClips(this.service.views.clips, streamId).filter(clip => clip.enabled);
   }
-  getClipThumbnail(streamId?: string) {
-    return this.getClips(streamId).find(clip => clip.enabled)?.scrubSprite;
-  }
+
   getDuration(streamId?: string) {
     return getCombinedClipsDuration(this.getClips(streamId));
   }
@@ -185,14 +182,20 @@ function ExportFlow({
     getStreamTitle,
     getClips,
     getDuration,
-    getClipThumbnail,
     getClipResolution,
   } = useController(ExportModalCtx);
 
   const [currentFormat, setCurrentFormat] = useState<TOrientation>(EOrientation.HORIZONTAL);
 
-  const clipsAmount = getClips(streamId).length;
-  const clipsDuration = formatSecondsToHMS(getDuration(streamId));
+  const { amount, duration, thumbnail } = useMemo(() => {
+    const clips = getClips(streamId);
+
+    return {
+      amount: clips.length,
+      duration: formatSecondsToHMS(getCombinedClipsDuration(clips)),
+      thumbnail: clips.find(clip => clip.enabled)?.scrubSprite,
+    };
+  }, [streamId]);
 
   function settingMatcher(initialSetting: TSetting) {
     const matchingSetting = settings.find(
@@ -215,42 +218,41 @@ function ExportFlow({
   const [currentSetting, setSetting] = useState<TSetting | null>(null);
   const [isLoadingResolution, setIsLoadingResolution] = useState(true);
 
-  useEffect(() => {
-    setIsLoadingResolution(true);
-
-    async function initializeSettings() {
-      try {
-        const resolution = await getClipResolution(streamId);
-        let setting: TSetting;
-        if (resolution?.height === 720 && exportInfo.resolution !== 720) {
-          setting = settings.find(s => s.resolution === 720) || settings[settings.length - 1];
-        } else if (resolution?.height === 1080 && exportInfo.resolution !== 1080) {
-          setting = settings.find(s => s.resolution === 1080) || settings[settings.length - 1];
-        } else {
-          setting = settingMatcher({
-            name: 'from default',
-            fps: exportInfo.fps,
-            resolution: exportInfo.resolution,
-            preset: exportInfo.preset,
-          });
-        }
-
-        setSetting(setting);
-      } catch (error: unknown) {
-        console.error('Failed to detect clip resolution, setting default. Error: ', error);
-        setSetting(
-          settingMatcher({
-            name: 'from default',
-            fps: exportInfo.fps,
-            resolution: exportInfo.resolution,
-            preset: exportInfo.preset,
-          }),
-        );
-      } finally {
-        setIsLoadingResolution(false);
+  async function initializeSettings() {
+    try {
+      const resolution = await getClipResolution(streamId);
+      let setting: TSetting;
+      if (resolution?.height === 720 && exportInfo.resolution !== 720) {
+        setting = settings.find(s => s.resolution === 720) || settings[settings.length - 1];
+      } else if (resolution?.height === 1080 && exportInfo.resolution !== 1080) {
+        setting = settings.find(s => s.resolution === 1080) || settings[settings.length - 1];
+      } else {
+        setting = settingMatcher({
+          name: 'from default',
+          fps: exportInfo.fps,
+          resolution: exportInfo.resolution,
+          preset: exportInfo.preset,
+        });
       }
+
+      setSetting(setting);
+    } catch (error: unknown) {
+      console.error('Failed to detect clip resolution, setting default. Error: ', error);
+      setSetting(
+        settingMatcher({
+          name: 'from default',
+          fps: exportInfo.fps,
+          resolution: exportInfo.resolution,
+          preset: exportInfo.preset,
+        }),
+      );
+    } finally {
+      setIsLoadingResolution(false);
     }
+  }
 
+  useEffect(() => {
+    setIsLoadingResolution(true);
     initializeSettings();
   }, [streamId]);
 
@@ -376,7 +378,7 @@ function ExportFlow({
                 </div>
               )}
               <img
-                src={getClipThumbnail(streamId)}
+                src={thumbnail}
                 style={
                   currentFormat === EOrientation.HORIZONTAL
                     ? { objectPosition: 'left' }
@@ -398,7 +400,7 @@ function ExportFlow({
                     marginLeft: '8px',
                   }}
                 >
-                  {clipsDuration} | {$t('%{clipsAmount} clips', { clipsAmount })}
+                  {duration} | {$t('%{clipsAmount} clips', { clipsAmount: amount })}
                 </p>
               </div>
               <OrientationToggle

app/components-react/highlighter/PreviewModal.tsx

@@ -10,7 +10,7 @@ import { Button } from 'antd';
 import { TModalClipsView } from './ClipsView';
 import { CheckboxInput } from 'components-react/shared/inputs';
 import { formatSecondsToHMS } from './ClipPreview';
-import { duration } from 'moment';
+import { TModalStreamCard } from './StreamCardModal';
 
 interface IPlaylist {
   src: string;
@@ -29,7 +29,7 @@ export default function PreviewModal({
 }: {
   close: () => void;
   streamId: string | undefined;
-  emitSetShowModal: (modal: TModalClipsView | null) => void;
+  emitSetShowModal: (modal: 'export' | null) => void;
 }) {
   const { HighlighterService, UsageStatisticsService } = Services;
   const clips = HighlighterService.getClips(HighlighterService.views.clips, streamId);
@@ -369,7 +369,6 @@ export default function PreviewModal({
           <Button
             type="primary"
             onClick={() => {
-              close();
               emitSetShowModal('export');
             }}
           >