Highlighter: ui updates installing - uninstalling highlighter

app/components-react/highlighter/ClipsView.tsx

@@ -38,7 +38,7 @@ export default function ClipsView({
   emitSetView: (data: IViewState) => void;
 }) {
   const { HighlighterService, UsageStatisticsService, IncrementalRolloutService } = Services;
-  const aiHighlighterEnabled = IncrementalRolloutService.views.featureIsEnabled(
+  const aiHighlighterFeatureEnabled = IncrementalRolloutService.views.featureIsEnabled(
     EAvailableFeatures.aiHighlighter,
   );
   const clipsAmount = useVuex(() => HighlighterService.views.clips.length);
@@ -215,7 +215,7 @@ export default function ClipsView({
                       }}
                     />
                     {streamId &&
-                      aiHighlighterEnabled &&
+                      aiHighlighterFeatureEnabled &&
                       HighlighterService.getClips(HighlighterService.views.clips, props.id)
                         .filter(clip => clip.source === 'AiClip')
                         .every(clip => (clip as IAiClip).aiInfo.metadata?.round) && (

app/components-react/highlighter/SettingsView.tsx

@@ -28,7 +28,7 @@ export default function SettingsView({
     HighlighterService,
     IncrementalRolloutService,
   } = Services;
-  const aiHighlighterEnabled = IncrementalRolloutService.views.featureIsEnabled(
+  const aiHighlighterFeatureEnabled = IncrementalRolloutService.views.featureIsEnabled(
     EAvailableFeatures.aiHighlighter,
   );
   const [hotkey, setHotkey] = useState<IHotkey | null>(null);
@@ -38,6 +38,7 @@ export default function SettingsView({
     settingsValues: SettingsService.views.values,
     isStreaming: StreamingService.isStreaming,
     useAiHighlighter: HighlighterService.views.useAiHighlighter,
+    highlighterVersion: HighlighterService.views.highlighterVersion,
   }));
 
   const correctlyConfigured =
@@ -124,7 +125,7 @@ export default function SettingsView({
           </p>
         </div>
         <div style={{ display: 'flex', gap: '16px' }}>
-          {aiHighlighterEnabled && (
+          {aiHighlighterFeatureEnabled && (
             <Button type="primary" onClick={() => emitSetView({ view: EHighlighterView.STREAM })}>
               {$t('Stream Highlights')}
             </Button>
@@ -139,7 +140,7 @@ export default function SettingsView({
       <Scrollable style={{ flexGrow: 1, padding: '20px 20px 20px 20px', width: '100%' }}>
         <div className={styles.innerScrollWrapper}>
           <div className={styles.cardWrapper}>
-            {aiHighlighterEnabled && (
+            {aiHighlighterFeatureEnabled && (
               <div className={styles.highlighterCard}>
                 <div className={styles.cardHeaderbarWrapper}>
                   <div className={styles.cardHeaderbar}>
@@ -155,18 +156,32 @@ export default function SettingsView({
                   )}
                 </p>
 
-                <SwitchInput
-                  style={{ margin: 0, marginLeft: '-10px' }}
-                  size="default"
-                  value={v.useAiHighlighter}
-                  onChange={toggleUseAiHighlighter}
-                />
+                {v.highlighterVersion !== '' ? (
+                  <SwitchInput
+                    style={{ margin: 0, marginLeft: '-10px' }}
+                    size="default"
+                    value={v.useAiHighlighter}
+                    onChange={toggleUseAiHighlighter}
+                  />
+                ) : (
+                  <Button
+                    style={{ width: 'fit-content' }}
+                    type="primary"
+                    onClick={() => {
+                      HighlighterService.installAiHighlighter(true);
+                    }}
+                  >
+                    Install AI Highlighter
+                  </Button>
+                )}
                 <div className={styles.recommendedCorner}>{$t('Recommended')}</div>
               </div>
             )}
             <div className={styles.manualCard}>
               <h3 className={styles.cardHeaderTitle}>
-                {aiHighlighterEnabled ? 'Or use the manual highlighter ' : 'Manual highlighter'}
+                {aiHighlighterFeatureEnabled
+                  ? 'Or use the manual highlighter '
+                  : 'Manual highlighter'}
               </h3>
               <p>
                 {$t(

app/components-react/highlighter/StreamView.tsx

@@ -30,6 +30,7 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
     exportInfo: HighlighterService.views.exportInfo,
     error: HighlighterService.views.error,
     uploadInfo: HighlighterService.views.uploadInfo,
+    highlighterVersion: HighlighterService.views.highlighterVersion,
   }));
 
   // Below is only used because useVueX doesnt work as expected
@@ -205,6 +206,8 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
   }
 
   function onDrop(e: React.DragEvent<HTMLDivElement>) {
+    if (v.highlighterVersion === '') return;
+
     const extensions = SUPPORTED_FILE_TYPES.map(e => `.${e}`);
     const files: string[] = [];
     let fi = e.dataTransfer.files.length;
@@ -237,18 +240,20 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
           <h1 style={{ margin: 0 }}>{$t('My Stream Highlights')}</h1>
         </div>
         <div style={{ display: 'flex', gap: '16px' }}>
-          <div
-            className={styles.uploadWrapper}
-            style={{
-              opacity: aiDetectionInProgress ? '0.7' : '1',
-              cursor: aiDetectionInProgress ? 'not-allowed' : 'pointer',
-            }}
-            onClick={() => !aiDetectionInProgress && setShowModal({ type: 'upload' })}
-          >
-            <FortniteIcon />
-            {$t('Select your Fortnite recording')}
-            <Button disabled={aiDetectionInProgress === true}>{$t('Import')}</Button>
-          </div>
+          {v.highlighterVersion !== '' && (
+            <div
+              className={styles.uploadWrapper}
+              style={{
+                opacity: aiDetectionInProgress ? '0.7' : '1',
+                cursor: aiDetectionInProgress ? 'not-allowed' : 'pointer',
+              }}
+              onClick={() => !aiDetectionInProgress && setShowModal({ type: 'upload' })}
+            >
+              <FortniteIcon />
+              {$t('Select your Fortnite recording')}
+              <Button disabled={aiDetectionInProgress === true}>{$t('Import')}</Button>
+            </div>
+          )}
           <Button onClick={() => emitSetView({ view: EHighlighterView.SETTINGS })}>
             {$t('Settings')}
           </Button>
@@ -297,7 +302,9 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
         keyboard={false}
       >
         {!!v.error && <Alert message={v.error} type="error" showIcon />}
-        {showModal?.type === 'upload' && <ImportStreamModal close={closeModal} />}
+        {showModal?.type === 'upload' && v.highlighterVersion !== '' && (
+          <ImportStreamModal close={closeModal} />
+        )}
         {showModal?.type === 'export' && <ExportModal close={closeModal} streamId={showModal.id} />}
         {showModal?.type === 'preview' && (
           <PreviewModal close={closeModal} streamId={showModal.id} />

app/components-react/pages/Highlighter.tsx

@@ -10,7 +10,7 @@ import { EAvailableFeatures } from 'services/incremental-rollout';
 
 export default function Highlighter(props: { params?: { view: string } }) {
   const { HighlighterService, IncrementalRolloutService } = Services;
-  const aiHighlighterEnabled = IncrementalRolloutService.views.featureIsEnabled(
+  const aiHighlighterFeatureEnabled = IncrementalRolloutService.views.featureIsEnabled(
     EAvailableFeatures.aiHighlighter,
   );
   const v = useVuex(() => ({
@@ -24,7 +24,11 @@ export default function Highlighter(props: { params?: { view: string } }) {
 
   let initialViewState: IViewState;
 
-  if (v.streamAmount > 0 && v.clipsAmount > 0 && aiHighlighterEnabled) {
+  if (props.params?.view) {
+    const view =
+      props.params?.view === 'settings' ? EHighlighterView.SETTINGS : EHighlighterView.STREAM;
+    initialViewState = { view };
+  } else if (v.streamAmount > 0 && v.clipsAmount > 0 && aiHighlighterFeatureEnabled) {
     initialViewState = { view: EHighlighterView.STREAM };
   } else if (v.clipsAmount > 0) {
     initialViewState = { view: EHighlighterView.CLIPS, id: undefined };
@@ -37,7 +41,7 @@ export default function Highlighter(props: { params?: { view: string } }) {
     async function shouldUpdate() {
       if (!HighlighterService.aiHighlighterUpdater) return false;
       const versionAvailable = await HighlighterService.aiHighlighterUpdater.isNewVersionAvailable();
-      return versionAvailable && aiHighlighterEnabled && v.useAiHighlighter;
+      return versionAvailable && aiHighlighterFeatureEnabled && v.useAiHighlighter;
     }
 
     shouldUpdate().then(shouldUpdate => {
@@ -58,7 +62,7 @@ export default function Highlighter(props: { params?: { view: string } }) {
     case EHighlighterView.STREAM:
       return (
         <>
-          {aiHighlighterEnabled && updaterModal}
+          {aiHighlighterFeatureEnabled && updaterModal}
           <StreamView
             emitSetView={data => {
               setViewFromEmit(data);
@@ -69,7 +73,7 @@ export default function Highlighter(props: { params?: { view: string } }) {
     case EHighlighterView.CLIPS:
       return (
         <>
-          {aiHighlighterEnabled && updaterModal}
+          {aiHighlighterFeatureEnabled && updaterModal}
           <ClipsView
             emitSetView={data => {
               setViewFromEmit(data);
@@ -86,7 +90,7 @@ export default function Highlighter(props: { params?: { view: string } }) {
     default:
       return (
         <>
-          {aiHighlighterEnabled && updaterModal}
+          {aiHighlighterFeatureEnabled && updaterModal}
           <SettingsView
             close={() => {
               HighlighterService.actions.dismissTutorial();

app/components-react/pages/PlatformAppStore.tsx

@@ -1,15 +1,28 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Utils from 'services/utils';
 import urlLib from 'url';
 import BrowserView from 'components-react/shared/BrowserView';
 import { GuestApiHandler } from 'util/guest-api-handler';
 import * as remote from '@electron/remote';
 import { Services } from 'components-react/service-provider';
+import { Button } from 'antd';
+import { EMenuItemKey } from 'services/side-nav';
+import { $t } from 'services/i18n';
 
 export default function PlatformAppStore(p: { params: { appId?: string; type?: string } }) {
-  const { UserService, PlatformAppsService, PlatformAppStoreService, NavigationService } = Services;
+  const {
+    UserService,
+    PlatformAppsService,
+    PlatformAppStoreService,
+    NavigationService,
+    HighlighterService,
+  } = Services;
+  const [highlighterInstalled, setHighlighterInstalled] = useState<boolean>(
+    HighlighterService.views.highlighterVersion !== '',
+  );
   const [platformAppsUrl, setPlatformAppsUrl] = useState('');
-
+  const [currentUrl, setCurrentUrl] = useState<string>('');
+  const browser = useRef<any>(null);
   useEffect(() => {
     async function getPlatformAppsUrl() {
       const url = await UserService.views.appStoreUrl(p.params);
@@ -69,11 +82,85 @@ export default function PlatformAppStore(p: { params: { appId?: string; type?: s
 
   if (!platformAppsUrl) return <></>;
   return (
-    <BrowserView
-      style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
-      src={platformAppsUrl}
-      onReady={onBrowserViewReady}
-      enableGuestApi
-    />
+    <>
+      <BrowserView
+        style={{
+          position: 'absolute',
+          top: 0,
+          right: 0,
+          left: 0,
+          height: `calc(100% - ${
+            currentUrl.includes('installed-apps') &&
+            HighlighterService.views.highlighterVersion !== ''
+              ? '72'
+              : '0'
+          }px)`,
+        }}
+        src={platformAppsUrl}
+        onReady={onBrowserViewReady}
+        enableGuestApi
+        emitUrlChange={url => {
+          setCurrentUrl(url);
+        }}
+      />
+      {currentUrl.includes('installed-apps') && highlighterInstalled && (
+        <div
+          style={{
+            display: 'flex',
+            gap: '16px',
+            position: 'absolute',
+            bottom: 0,
+            height: '72px',
+            alignItems: 'center',
+            padding: '8px',
+          }}
+        >
+          <div>{$t('Other installed apps:')}</div>
+          <div
+            style={{
+              borderRadius: 8,
+              border: '1px solid #30383D',
+              display: 'flex',
+              gap: '16px',
+              padding: '8px',
+              paddingLeft: '16px',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+              <h3 style={{ margin: 0 }}>AI Highlighter</h3>
+              <p style={{ opacity: 0.3, margin: 0 }}>by Streamlabs</p>
+            </div>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <Button
+                size="middle"
+                type="default"
+                onClick={() => {
+                  setHighlighterInstalled(false);
+                  HighlighterService.uninstallAiHighlighter();
+                }}
+              >
+                {$t('Uninstall')}
+              </Button>
+
+              <Button
+                size="middle"
+                type="primary"
+                onClick={() => {
+                  NavigationService.actions.navigate(
+                    'Highlighter',
+                    { view: 'settings' },
+                    EMenuItemKey.Highlighter,
+                  );
+                }}
+              >
+                {$t('Open')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
   );
 }

app/components-react/pages/RecordingHistory.tsx

@@ -64,6 +64,10 @@ class RecordingHistoryController {
     );
   }
 
+  get highlighterVersion() {
+    return this.HighlighterService.views.highlighterVersion;
+  }
+
   get uploadOptions() {
     const opts = [
       {
@@ -200,15 +204,23 @@ export default function RecordingHistoryPage() {
 export function RecordingHistory() {
   const controller = useController(RecordingHistoryCtx);
   const { formattedTimestamp, showFile, handleSelect, postError } = controller;
-  const aiHighlighterEnabled = Services.IncrementalRolloutService.views.featureIsEnabled(
+  const aiHighlighterFeatureEnabled = Services.IncrementalRolloutService.views.featureIsEnabled(
     EAvailableFeatures.aiHighlighter,
   );
-  const { uploadInfo, uploadOptions, recordings, hasSLID, aiDetectionInProgress } = useVuex(() => ({
+  const {
+    uploadInfo,
+    uploadOptions,
+    recordings,
+    hasSLID,
+    aiDetectionInProgress,
+    highlighterVersion,
+  } = useVuex(() => ({
     recordings: controller.recordings,
     aiDetectionInProgress: controller.aiDetectionInProgress,
     uploadOptions: controller.uploadOptions,
     uploadInfo: controller.uploadInfo,
     hasSLID: controller.hasSLID,
+    highlighterVersion: controller.highlighterVersion,
   }));
 
   useEffect(() => {
@@ -231,7 +243,10 @@ export function RecordingHistory() {
       <span className={styles.actionGroup}>
         {uploadOptions
           .map(option => {
-            if (option.value === 'highlighter' && !aiHighlighterEnabled) {
+            if (
+              option.value === 'highlighter' &&
+              (!aiHighlighterFeatureEnabled || highlighterVersion === '')
+            ) {
               return null;
             }
             return (