From ebdd5edf99bbe57bfbcd2dd12c746c2eed70e34e Mon Sep 17 00:00:00 2001
From: marvinoffers <hi@marvinoffers.de>
Date: Wed, 15 Jan 2025 19:35:46 +0100
Subject: [PATCH] [highlighter] improve export flo (#5266)

* replaced custom with sl loader

* show export progress quicker

* remove wrong margin

---------

Co-authored-by: Micheline Wu <69046953+michelinewu@users.noreply.github.com>
---
 .../highlighter/StreamCard.m.less             | 18 -----------
 .../highlighter/StreamCard.tsx                | 30 ++++++++++++-------
 app/i18n/en-US/highlighter.json               |  1 +
 app/services/highlighter/index.ts             | 18 +++++++----
 4 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/app/components-react/highlighter/StreamCard.m.less b/app/components-react/highlighter/StreamCard.m.less
index 849a491aca4e..ea509b22a4bc 100644
--- a/app/components-react/highlighter/StreamCard.m.less
+++ b/app/components-react/highlighter/StreamCard.m.less
@@ -95,24 +95,6 @@
   z-index: 1;
 }
 
-.loader {
-  border: 2px solid #f3f3f3; /* Light grey */
-  border-top: 2px solid #3e3e3e; /* Blue */
-  border-radius: 50%;
-  width: 16px;
-  height: 16px;
-  animation: spin 2s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 .delete-button {
   display: flex;
   top: 8px;
diff --git a/app/components-react/highlighter/StreamCard.tsx b/app/components-react/highlighter/StreamCard.tsx
index 994c8019cb9c..364f3b8ef159 100644
--- a/app/components-react/highlighter/StreamCard.tsx
+++ b/app/components-react/highlighter/StreamCard.tsx
@@ -185,21 +185,29 @@ function ActionBar({
         <Button
           size="large"
           type="primary"
-          icon={
-            clipsOfStreamAreLoading !== stream.id ? (
-              <i className="icon-download" style={{ marginRight: '4px' }} />
-            ) : undefined
-          }
           onClick={e => {
             emitExportVideo();
             e.stopPropagation();
           }}
+          style={{ display: 'grid', gridTemplateAreas: 'stack' }}
         >
-          {clipsOfStreamAreLoading === stream.id ? (
-            <div className={styles.loader}></div>
-          ) : (
-            <> {$t('Export highlight reel')}</>
-          )}
+          <div
+            style={{
+              visibility: clipsOfStreamAreLoading === stream.id ? 'visible' : 'hidden',
+              gridArea: 'stack',
+            }}
+          >
+            <i className="fa fa-spinner fa-pulse" />
+          </div>
+          <span
+            style={{
+              visibility: clipsOfStreamAreLoading !== stream.id ? 'visible' : 'hidden',
+              gridArea: 'stack',
+            }}
+          >
+            <i className="icon-download" style={{ marginRight: '4px' }} />
+            {$t('Export highlight reel')}
+          </span>
         </Button>
       </div>
     );
@@ -255,7 +263,7 @@ export function Thumbnail({
 }) {
   function getThumbnailText(state: EAiDetectionState): JSX.Element | string {
     if (clipsOfStreamAreLoading === stream?.id) {
-      return <div className={styles.loader}></div>;
+      return <i className="fa fa-spinner fa-pulse" />;
     }
 
     if (clips.length > 0) {
diff --git a/app/i18n/en-US/highlighter.json b/app/i18n/en-US/highlighter.json
index aec0b8e1b436..049aab89017d 100644
--- a/app/i18n/en-US/highlighter.json
+++ b/app/i18n/en-US/highlighter.json
@@ -143,6 +143,7 @@
   "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",
+  "Please select at least one clip to export a video": "Please select at least one clip to export a video",
   "Share feedback": "Share feedback",
   "Select at least one clip to preview your video": "Select at least one clip to preview your video",
   "Select at least one clip to export your video": "Select at least one clip to export your video"
diff --git a/app/services/highlighter/index.ts b/app/services/highlighter/index.ts
index 7b8f337bc76a..7eb44498020f 100644
--- a/app/services/highlighter/index.ts
+++ b/app/services/highlighter/index.ts
@@ -1332,7 +1332,13 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
       console.error('Highlighter: Cannot export until current export operation is finished');
       return;
     }
-
+    this.SET_EXPORT_INFO({
+      exporting: true,
+      currentFrame: 0,
+      step: EExportStep.AudioMix,
+      cancelRequested: false,
+      error: null,
+    });
     let renderingClips: RenderingClip[] = [];
     if (streamId) {
       renderingClips = this.getClips(this.views.clips, streamId)
@@ -1411,6 +1417,11 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
 
     if (!renderingClips.length) {
       console.error('Highlighter: Export called without any clips!');
+      this.SET_EXPORT_INFO({
+        exporting: false,
+        exported: false,
+        error: $t('Please select at least one clip to export a video'),
+      });
       return;
     }
 
@@ -1423,12 +1434,7 @@ export class HighlighterService extends PersistentStatefulService<IHighlighterSt
     const totalFramesAfterTransitions = totalFrames - numTransitions * transitionFrames;
 
     this.SET_EXPORT_INFO({
-      exporting: true,
-      currentFrame: 0,
       totalFrames: totalFramesAfterTransitions,
-      step: EExportStep.AudioMix,
-      cancelRequested: false,
-      error: null,
     });
 
     let fader: AudioCrossfader | null = null;