[highlighter] - top bar improvements (#5270)

* add share feedback button to top bar * export and preview button to correct position * translation fix * only to kick off test again * kick off pipe again --------- Co-authored-by: Micheline Wu <[email protected]>
stream-labs · Jan 15, 2025 · 5fa5e03 · 5fa5e03
1 parent ebdd5ed
commit 5fa5e03
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/app/components-react/highlighter/ClipsView.tsx b/app/components-react/highlighter/ClipsView.tsx
@@ -15,7 +15,7 @@ import {
 } from './utils';
 import ClipsViewModal from './ClipsViewModal';
 import { useVuex } from 'components-react/hooks';
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { SUPPORTED_FILE_TYPES } from 'services/highlighter/constants';
 import { $t } from 'services/i18n';
 import path from 'path';
@@ -59,6 +59,8 @@ export default function ClipsView({
     return HighlighterService.getClips(HighlighterService.views.clips, props.id);
   }, [props.id]);
 
+  const noClipsToExport = getClips().some(clip => clip.enabled) === false;
+
   useEffect(() => {
     setClipsLoaded(false);
     setClips(sortAndFilterClips(getClips(), props.id, activeFilter));
@@ -196,13 +198,36 @@ export default function ClipsView({
                 {props.streamTitle ?? $t('All highlight clips')}
               </h1>
             </header>
-            <div style={{ padding: '20px' }}>
+            <div style={{ padding: '20px', display: 'flex', gap: '8px' }}>
               <Button
+                type="text"
                 icon={<i className="icon-community" style={{ marginRight: 8 }} />}
                 onClick={shareFeedback}
               >
-                Share Feedback
+                {$t('Share feedback')}
               </Button>
+              <Tooltip
+                title={
+                  noClipsToExport ? $t('Select at least one clip to preview your video') : null
+                }
+                placement="bottom"
+              >
+                <Button disabled={noClipsToExport} onClick={() => setModal({ modal: 'preview' })}>
+                  {$t('Preview')}
+                </Button>
+              </Tooltip>
+              <Tooltip
+                title={noClipsToExport ? $t('Select at least one clip to export your video') : null}
+                placement="bottom"
+              >
+                <Button
+                  disabled={noClipsToExport}
+                  type="primary"
+                  onClick={() => setModal({ modal: 'export' })}
+                >
+                  {$t('Export')}
+                </Button>
+              </Tooltip>
             </div>
           </div>
           {sortedList.length === 0 ? (

diff --git a/app/components-react/highlighter/EditingControls.tsx b/app/components-react/highlighter/EditingControls.tsx
@@ -152,19 +152,6 @@ export function EditingControls({
           )}
         </Animate>
       </Form>
-      <Button
-        style={{ marginTop: '16px', marginRight: '8px' }}
-        onClick={() => emitSetShowModal('preview')}
-      >
-        {$t('Preview')}
-      </Button>
-      <Button
-        type="primary"
-        style={{ marginTop: '16px' }}
-        onClick={() => emitSetShowModal('export')}
-      >
-        {$t('Export')}
-      </Button>
     </Scrollable>
   );
 }