Disallow special characters in title

app/components-react/highlighter/StreamView.tsx

@@ -15,6 +15,7 @@ import StreamCard from './StreamCard';
 import path from 'path';
 import PreviewModal from './PreviewModal';
 import moment from 'moment';
+import { TextInput } from 'components-react/shared/inputs';
 
 type TModalStreamView =
   | { type: 'export'; id: string | undefined }
@@ -119,11 +120,20 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
     const { HighlighterService } = Services;
     const [inputValue, setInputValue] = useState<string>('');
 
-    function handleInputChange(event: any) {
-      setInputValue(event.target.value);
+    function handleInputChange(value: string) {
+      setInputValue(value);
+    }
+
+    function specialCharacterValidator(rule: unknown, value: string, callback: Function) {
+      if (/[\\/:"*?<>|]+/g.test(value)) {
+        callback($t('You cannot use special characters in this field'));
+      } else {
+        callback();
+      }
     }
 
     async function startAiDetection(title: string) {
+      if (/[\\/:"*?<>|]+/g.test(title)) return;
       const streamInfo: StreamInfoForAiHighlighter = {
         id: 'manual_' + uuid(),
         title,
@@ -149,13 +159,15 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
       <>
         <div className={styles.manualUploadWrapper}>
           <div className={styles.titleInputWrapper}>
-            <h1 style={{ margin: 0 }}> {$t('Import Fortnite stream')}</h1>
-            <input
-              style={{ width: '100%', color: 'black' }}
-              type="text"
+            <h1 style={{ margin: 0 }}> {$t('Import Fortnite Stream')}</h1>
+            <TextInput
+              value={inputValue}
               name="name"
               placeholder={$t('Set a title for your stream')}
               onChange={handleInputChange}
+              style={{ width: '100%', color: 'black' }}
+              rules={[{ validator: specialCharacterValidator }]}
+              nowrap
             />
           </div>
           <div style={{ display: 'flex', gap: '8px', justifyContent: 'space-between' }}>
@@ -222,7 +234,7 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
     >
       <div style={{ display: 'flex', padding: 20 }}>
         <div style={{ flexGrow: 1 }}>
-          <h1 style={{ margin: 0 }}>My stream highlights</h1>
+          <h1 style={{ margin: 0 }}>{$t('My Stream Highlights')}</h1>
         </div>
         <div style={{ display: 'flex', gap: '16px' }}>
           <div
@@ -234,8 +246,8 @@ export default function StreamView({ emitSetView }: { emitSetView: (data: IViewS
             onClick={() => !aiDetectionInProgress && setShowModal({ type: 'upload' })}
           >
             <FortniteIcon />
-            {$t('Select your Fornite recording')}
-            <Button disabled={aiDetectionInProgress === true}>Import</Button>
+            {$t('Select your Fortnite recording')}
+            <Button disabled={aiDetectionInProgress === true}>{$t('Import')}</Button>
           </div>
           <Button onClick={() => emitSetView({ view: EHighlighterView.SETTINGS })}>
             {$t('Settings')}

app/i18n/en-US/highlighter.json

@@ -120,9 +120,9 @@
   "Not enough highlights found": "Not enough highlights found",
   "Highlights cancelled": "Highlights cancelled",
   "Highlights failed": "Highlights failed",
-  "Import Fortnite stream": "Import Fortnite stream",
+  "Import Fortnite Stream": "Import Fortnite Stream",
   "Select video to start import": "Select video to start import",
-  "Select your Fornite recording": "Select your Fornite recording",
+  "Select your Fortnite recording": "Select your Fortnite recording",
   "Settings": "Settings",
   "Delete highlighted stream?": "Delete highlighted stream?",
   "Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.": "Are you sure you want to delete this stream and all its associated clips? This action cannot be undone.",
@@ -140,5 +140,7 @@
   "Stream Highlights": "Stream Highlights",
   "Export Vertical": "Export Vertical",
   "Export Horizontal": "Export Horizontal",
-  "Get highlights (Fortnite only))": "Get highlights (Fortnite only))"
+  "Get highlights (Fortnite only))": "Get highlights (Fortnite only))",
+  "My Stream Highlights": "My Stream Highlights",
+  "You cannot use special characters in this field": "You cannot use special characters in this field"
 }

app/services/highlighter/index.ts

@@ -711,22 +711,25 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
 
   async init() {
     super.init();
-    this.aiHighlighterEnabled = this.incrementalRolloutService.views.featureIsEnabled(
-      EAvailableFeatures.aiHighlighter,
-    );
 
-    if (this.aiHighlighterEnabled && !this.aiHighlighterUpdater) {
-      this.aiHighlighterUpdater = new AiHighlighterUpdater();
-    }
+    this.incrementalRolloutService.featuresReady.then(async () => {
+      this.aiHighlighterEnabled = this.incrementalRolloutService.views.featureIsEnabled(
+        EAvailableFeatures.aiHighlighter,
+      );
 
-    // check if ai highlighter is activated and we need to update it
-    if (
-      this.aiHighlighterEnabled &&
-      this.views.useAiHighlighter &&
-      (await this.aiHighlighterUpdater.isNewVersionAvailable())
-    ) {
-      await this.startUpdater();
-    }
+      if (this.aiHighlighterEnabled && !this.aiHighlighterUpdater) {
+        this.aiHighlighterUpdater = new AiHighlighterUpdater();
+      }
+
+      // check if ai highlighter is activated and we need to update it
+      if (
+        this.aiHighlighterEnabled &&
+        this.views.useAiHighlighter &&
+        (await this.aiHighlighterUpdater.isNewVersionAvailable())
+      ) {
+        await this.startUpdater();
+      }
+    });
 
     //
     this.views.clips.forEach(clip => {