[highlighter] - top bar improvements

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));
@@ -151,6 +153,12 @@ export default function ClipsView({
 
   const containerRef = useOptimizedHover();
 
+  function shareFeedback() {
+    remote.shell.openExternal(
+      'https://support.streamlabs.com/hc/en-us/requests/new?ticket_form_id=31967205905051',
+    );
+  }
+
   function getClipsView(
     streamId: string | undefined,
     sortedList: { id: string }[],
@@ -163,32 +171,65 @@ export default function ClipsView({
         onDrop={event => onDrop(event, streamId)}
       >
         <div className={styles.container}>
-          <header className={styles.header}>
-            <button
-              className={styles.backButton}
-              onClick={() =>
-                emitSetView(
-                  streamId
-                    ? { view: EHighlighterView.STREAM }
-                    : { view: EHighlighterView.SETTINGS },
-                )
-              }
-            >
-              <i className="icon-back" />
-            </button>
-            <h1
-              className={styles.title}
-              onClick={() =>
-                emitSetView(
-                  streamId
-                    ? { view: EHighlighterView.STREAM }
-                    : { view: EHighlighterView.SETTINGS },
-                )
-              }
-            >
-              {props.streamTitle ?? $t('All highlight clips')}
-            </h1>
-          </header>
+          <div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
+            <header className={styles.header}>
+              <button
+                className={styles.backButton}
+                onClick={() =>
+                  emitSetView(
+                    streamId
+                      ? { view: EHighlighterView.STREAM }
+                      : { view: EHighlighterView.SETTINGS },
+                  )
+                }
+              >
+                <i className="icon-back" />
+              </button>
+              <h1
+                className={styles.title}
+                onClick={() =>
+                  emitSetView(
+                    streamId
+                      ? { view: EHighlighterView.STREAM }
+                      : { view: EHighlighterView.SETTINGS },
+                  )
+                }
+              >
+                {props.streamTitle ?? $t('All highlight clips')}
+              </h1>
+            </header>
+            <div style={{ padding: '20px', display: 'flex', gap: '8px' }}>
+              <Button
+                type="text"
+                icon={<i className="icon-community" style={{ marginRight: 8 }} />}
+                onClick={shareFeedback}
+              >
+                {$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 ? (
             /** Better empty state will come with ai PR */
             <div style={{ padding: '20px' }}>

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>
   );
 }

app/components-react/highlighter/PreviewModal.tsx

@@ -225,7 +225,7 @@ export default function PreviewModal({
     return (
       <div>
         <h2>{$t('Preview')}</h2>
-        <p>Select at least one clip to preview your video</p>
+        <p>{$t('Select at least one clip to preview your video')}</p>
       </div>
     );
   }

app/i18n/en-US/highlighter.json

@@ -142,5 +142,8 @@
   "Export Horizontal": "Export Horizontal",
   "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"
+  "You cannot use special characters in this field": "You cannot use special characters in this field",
+  "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"
 }