[WIP] - Realtime highlighter

app/app-services.ts

@@ -62,6 +62,7 @@ export { VideoSettingsService } from 'services/settings-v2/video';
 export { SettingsManagerService } from 'services/settings-manager';
 export { MarkersService } from 'services/markers';
 export { RealmService } from 'services/realm';
+export { RealtimeHighlighterService } from 'services/highlighter/realtime-highlighter-service';
 import { VirtualWebcamService } from 'services/virtual-webcam';
 
 // ONLINE SERVICES
@@ -164,6 +165,7 @@ import { PatchNotesService } from './services/patch-notes';
 import { VideoService } from './services/video';
 import { ChatService } from './services/chat';
 import { HighlighterService } from './services/highlighter';
+import { RealtimeHighlighterService } from './services/highlighter/realtime-highlighter-service';
 import { GrowService } from './services/grow/grow';
 import { TransitionsService } from './services/transitions';
 import { TcpServerService } from './services/api/tcp-server';
@@ -293,4 +295,5 @@ export const AppServices = {
   RemoteControlService,
   UrlService,
   VirtualWebcamService,
+  RealtimeHighlighterService,
 };

app/components-react/highlighter/ClipPreviewInfo.tsx

@@ -1,4 +1,4 @@
-import { EGame } from 'services/highlighter/models/ai-highlighter.models';
+import { EGame, IAiClipInfo } from 'services/highlighter/models/ai-highlighter.models';
 import { IAiClip } from 'services/highlighter/models/highlighter.models';
 import { getConfigByGame, getEventConfig } from 'services/highlighter/models/game-config.models';
 import styles from './ClipPreview.m.less';
@@ -15,33 +15,7 @@ export default function ClipPreviewInfo({
     return <span>No event data</span>;
   }
 
-  const uniqueInputTypes = new Set<string>();
-  if (clip.aiInfo.inputs && Array.isArray(clip.aiInfo.inputs)) {
-    clip.aiInfo.inputs.forEach(input => {
-      if (input.type) {
-        uniqueInputTypes.add(input.type);
-      }
-    });
-  }
-
-  const eventDisplays = Array.from(uniqueInputTypes).map(type => {
-    const eventInfo = getEventConfig(game, type);
-
-    if (eventInfo) {
-      return {
-        emoji: eventInfo.emoji,
-        description: eventInfo.description.singular,
-        type,
-      };
-    }
-
-    return {
-      emoji: '⚡',
-      description: type,
-      type,
-    };
-  });
-
+  const eventDisplays = getUniqueEmojiConfigFromAiInfo(clip.aiInfo);
   return (
     <div
       style={{
@@ -53,9 +27,53 @@ export default function ClipPreviewInfo({
       {eventDisplays.map((event, index) => {
         return <React.Fragment key={index}>{event.emoji}</React.Fragment>;
       })}
-      {clip.aiInfo.metadata?.round && (
-        <div className={styles.roundTag}>{`Round: ${clip.aiInfo.metadata.round}`}</div>
-      )}{' '}
+      {clip.aiInfo.metadata?.round !== undefined &&
+        clip.aiInfo.metadata?.round !== null &&
+        clip.aiInfo.metadata?.round !== 0 && (
+          <div className={styles.roundTag}>{`Round: ${clip.aiInfo.metadata.round}`}</div>
+        )}
     </div>
   );
 }
+
+export interface EmojiConfig {
+  emoji: string;
+  count: number;
+  description: string;
+  type: string;
+}
+
+export function getUniqueEmojiConfigFromAiInfo(aiInfos: IAiClipInfo): EmojiConfig[] {
+  const typeCounts: Record<string, number> = {};
+  if (aiInfos.inputs && Array.isArray(aiInfos.inputs)) {
+    aiInfos.inputs.forEach(aiInput => {
+      if (aiInput.type) {
+        typeCounts[aiInput.type] = (typeCounts[aiInput.type] || 0) + 1;
+      }
+    });
+  }
+
+  const uniqueInputTypes = Object.keys(typeCounts);
+
+  const eventDisplays = uniqueInputTypes.map(type => {
+    const count = typeCounts[type];
+    if (aiInfos.metadata?.game) {
+      const eventInfo = getEventConfig(aiInfos.metadata.game, type);
+      if (eventInfo) {
+        return {
+          emoji: eventInfo.emoji,
+          description: count > 1 ? eventInfo.description.plural : eventInfo.description.singular,
+          count,
+          type,
+        };
+      }
+    }
+    return {
+      emoji: '⚡',
+      description: type,
+      count,
+      type,
+    };
+  });
+  return eventDisplays;
+}

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

@@ -0,0 +1,99 @@
+.pulseWrapper {
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.pulse {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: #f85640;
+  opacity: 0.3;
+  top: 0;
+  left: 0;
+  animation: pulse 2.5s infinite;
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #f85640;
+  position: relative;
+  z-index: 1;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+  99% {
+    transform: scale(1.4);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(0.5);
+    opacity: 0.5;
+  }
+}
+.realtime-detection-action {
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  position: relative;
+  justify-content: space-between;
+  display: flex;
+  padding: 4px 8px;
+  padding-right: 10px;
+  width: 236px;
+  align-items: center;
+  gap: 8px;
+  border-radius: 48px;
+  background: #301e24;
+  color: white;
+  overflow: hidden;
+}
+
+.realtime-detection-streamcard {
+  background-color: var(--button);
+  color: var(--paragraph);
+  font-weight: 400;
+  font-size: 16px;
+  border-radius: 8px;
+  height: 40px;
+  width: 100%;
+}
+
+.activity-animation {
+  transform: translateX(200%);
+}
+
+.background-pulse {
+  left: -100%;
+  position: absolute;
+  width: 200px;
+  height: 40px;
+  background: linear-gradient(90deg, #ffffff00, #5d1e1e, #ffffff00);
+  transition: transform 0.5s ease-in-out;
+}
+
+.emoji {
+  z-index: 999;
+  margin-right: 4px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}

app/components-react/highlighter/RealtimeIndicator.tsx

@@ -0,0 +1,85 @@
+import { Button } from 'antd';
+import React, { useState, useEffect } from 'react';
+import { $t } from 'services/i18n';
+import styles from './RealtimeIndicator.m.less';
+import cx from 'classnames';
+import { EGame } from 'services/highlighter/models/ai-highlighter.models';
+import { GAME_CONFIGS } from 'services/highlighter/models/game-config.models';
+import { TRealtimeFeedEvent } from './realtime-highlights/RealtimeHighlightsFeed';
+
+export default function HighlightGenerator({
+  eventType,
+  emitCancel,
+  location,
+}: {
+  eventType?: TRealtimeFeedEvent;
+  emitCancel: () => void;
+  location: 'streamCard' | 'statusBar';
+}) {
+  const [animateOnce, setAnimateOnce] = useState(false);
+  const [emoji, setEmoji] = useState<string>('');
+  const [description, setDescription] = useState<string>('');
+
+  // Run animation once when emoji prop changes
+  useEffect(() => {
+    if (eventType) {
+      setEmoji(getEmojiByEventType(eventType));
+      setDescription(firstLetterUppercase(getDescriptionByEventType(eventType).singular));
+      setAnimateOnce(true);
+      const timeout = setTimeout(() => setAnimateOnce(false), 2000);
+      return () => clearTimeout(timeout);
+    }
+  }, [eventType]);
+
+  function getEmojiByEventType(eventType: { type: string; game: EGame }) {
+    return GAME_CONFIGS[eventType.game].inputTypeMap[eventType.type]?.emoji || '🤖';
+  }
+
+  function getDescriptionByEventType(eventType: { type: string; game: EGame }) {
+    return GAME_CONFIGS[eventType.game].inputTypeMap[eventType.type]?.description || 'Highlight';
+  }
+
+  function firstLetterUppercase(value: string): string {
+    return String(value).charAt(0).toUpperCase() + String(value).slice(1);
+  }
+  return (
+    <div
+      className={cx(
+        styles.realtimeDetectionAction,
+        location === 'streamCard' && styles.realtimeDetectionStreamcard,
+      )}
+    >
+      <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
+        {location === 'statusBar' && (
+          <div
+            className={cx(styles.backgroundPulse, animateOnce && styles.activityAnimation)}
+            // onAnimationEnd={() => setAnimateOnce(false)}
+          />
+        )}
+        {animateOnce ? (
+          <div className={styles.emoji}>{emoji}</div>
+        ) : (
+          <div className={styles.pulseWrapper}>
+            <div className={styles.pulse} />
+            <div className={styles.dot} />
+          </div>
+        )}
+        <p style={{ margin: 0, zIndex: 3, opacity: location === 'statusBar' ? 0.7 : 1 }}>
+          {' '}
+          {animateOnce ? `${description} detected` : $t('AI detection in progress')}
+        </p>
+      </div>
+      <Button
+        size="small"
+        type="ghost"
+        style={{ border: 'none', margin: 0, display: 'flex', alignItems: 'center' }}
+        onClick={e => {
+          e.stopPropagation();
+          emitCancel();
+        }}
+      >
+        <i className="icon-close" />
+      </Button>
+    </div>
+  );
+}

app/components-react/highlighter/StreamCard.tsx

@@ -16,6 +16,7 @@ import * as remote from '@electron/remote';
 import StreamCardInfo from './StreamCardInfo';
 import StreamCardModal, { TModalStreamCard } from './StreamCardModal';
 import { supportedGames } from 'services/highlighter/models/game-config.models';
+import RealtimeIndicator from './RealtimeIndicator';
 
 export default function StreamCard({
   streamId,
@@ -230,7 +231,8 @@ export default function StreamCard({
             <RotatedClips clips={clips} />
           </div>
           <h3 className={styles.emojiWrapper}>
-            {stream.state.type === EAiDetectionState.FINISHED ? (
+            {stream.state.type === EAiDetectionState.FINISHED ||
+            stream.state.type === EAiDetectionState.REALTIME_DETECTION_IN_PROGRESS ? (
               <StreamCardInfo clips={clips} game={game} />
             ) : (
               <div style={{ height: '22px' }}> </div>
@@ -239,12 +241,19 @@ export default function StreamCard({
           <ActionBar
             stream={stream}
             clips={clips}
-            emitCancelHighlightGeneration={cancelHighlightGeneration}
+            emitCancelHighlightGeneration={() => {
+              cancelHighlightGeneration();
+            }}
             emitExportVideo={() => exportVideo(streamId)}
             emitShowStreamClips={showStreamClips}
             clipsOfStreamAreLoading={clipsOfStreamAreLoading}
             emitRestartAiDetection={() => {
-              HighlighterService.actions.restartAiDetection(stream.path, stream);
+              if (stream.path) {
+                HighlighterService.actions.restartAiDetection(stream.path, stream);
+              } else {
+                // Can't be restarted because it was a realtime highlight detection
+                // This scenario shouldn't happen
+              }
             }}
             emitSetView={emitSetView}
             emitFeedbackForm={() => {
@@ -313,6 +322,18 @@ function ActionBar({
     emitFeedbackForm(clips.length);
   };
 
+  if (stream?.state.type === EAiDetectionState.REALTIME_DETECTION_IN_PROGRESS) {
+    return (
+      <RealtimeIndicator
+        location="streamCard"
+        eventType={undefined}
+        emitCancel={() => {
+          emitCancelHighlightGeneration();
+        }}
+      />
+    );
+  }
+
   // In Progress
   if (stream?.state.type === EAiDetectionState.IN_PROGRESS) {
     return (