Make hand icons point up towards timeline #625

src/HelpSheet.jsx

@@ -1,8 +1,9 @@
 import React, { memo } from 'react';
-import { FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa';
+import { FaStepBackward, FaStepForward } from 'react-icons/fa';
 import { useTranslation, Trans } from 'react-i18next';
 
 import SetCutpointButton from './components/SetCutpointButton';
+import SegmentCutpointButton from './components/SegmentCutpointButton';
 import CopyClipboardButton from './components/CopyClipboardButton';
 import { primaryTextColor } from './colors';
 import Sheet from './Sheet';
@@ -57,13 +58,13 @@ const HelpSheet = memo(({ visible, onTogglePress, ffmpegCommandLog, currentCutSe
         <div><kbd>→</kbd> {t('Seek forward 1 sec')}</div>
         <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>←</kbd> {t('Seek backward 1% of timeline at current zoom')}</div>
         <div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>→</kbd> {t('Seek forward 1% of timeline at current zoom')}</div>
-        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>←</kbd> {t('Jump to cut start')}</div>
-        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>→</kbd> {t('Jump to cut end')}</div>
+        <div style={{ lineHeight: 1.7 }}><SegmentCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>←</kbd> {t('Jump to cut start')}</div>
+        <div style={{ lineHeight: 1.7 }}><SegmentCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} style={{ verticalAlign: 'middle' }} />, <kbd>SHIFT</kbd> + <kbd>→</kbd> {t('Jump to cut end')}</div>
 
         <h2>{t('Segments and cut points')}</h2>
 
-        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} />, <kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
-        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} />, <kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
+        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" style={{ verticalAlign: 'middle' }} />, <kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
+        <div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" style={{ verticalAlign: 'middle' }} />, <kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
         <div><kbd>+</kbd> {t('Add cut segment')}</div>
         <div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
         <div><kbd>ENTER</kbd> {t('Label current segment')}</div>

src/NoFileLoaded.jsx

@@ -1,5 +1,4 @@
 import React, { memo } from 'react';
-import { FaHandPointRight, FaHandPointLeft } from 'react-icons/fa';
 
 import i18n from 'i18next';
 import { useTranslation, Trans } from 'react-i18next';
@@ -21,7 +20,7 @@ const NoFileLoaded = memo(({ top, bottom, left, mifiLink, toggleHelp, currentCut
       </div>
 
       <div style={{ fontSize: '3vmin', color: '#ccc' }}>
-        <Trans><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints</Trans>
+        <Trans><SetCutpointButton currentCutSeg={currentCutSeg} side="start" style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints</Trans>
       </div>
 
       <div style={{ fontSize: '3vmin', color: '#ccc', cursor: 'pointer' }} role="button" onClick={toggleSimpleMode}>

src/TimelineControls.jsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { FaHandPointLeft, FaHandPointRight, FaStepBackward, FaStepForward, FaCaretLeft, FaCaretRight, FaPause, FaPlay, FaImages, FaKey } from 'react-icons/fa';
+import { FaStepBackward, FaStepForward, FaCaretLeft, FaCaretRight, FaPause, FaPlay, FaImages, FaKey } from 'react-icons/fa';
 import { GiSoundWaves } from 'react-icons/gi';
 import { IoMdKey } from 'react-icons/io';
 import { useTranslation } from 'react-i18next';
@@ -8,7 +8,9 @@ import { useTranslation } from 'react-i18next';
 import { getSegColors } from './util/colors';
 import { formatDuration, parseDuration } from './util/duration';
 import { primaryTextColor } from './colors';
+import SegmentCutpointButton from './components/SegmentCutpointButton';
 import SetCutpointButton from './components/SetCutpointButton';
+import { mirrorTransform } from './util';
 
 const TimelineControls = memo(({
   seekAbs, currentSegIndexSafe, cutSegments, currentCutSeg, setCutStart, setCutEnd,
@@ -165,8 +167,8 @@ const TimelineControls = memo(({
 
       {!simpleMode && renderJumpCutpointButton(-1)}
 
-      {!simpleMode && <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} onClick={jumpCutStart} title={t('Jump to cut start')} style={{ marginRight: 5 }} />}
-      <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} onClick={setCutStart} title={t('Set cut start to current position')} style={{ marginRight: 5 }} />
+      {!simpleMode && <SegmentCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} onClick={jumpCutStart} title={t('Jump to cut start')} style={{ marginRight: 5 }} />}
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="start" onClick={setCutStart} title={t('Set cut start to current position')} style={{ marginRight: 5 }} />
 
       {!simpleMode && renderCutTimeInput('start')}
 
@@ -174,7 +176,7 @@ const TimelineControls = memo(({
         size={20}
         role="button"
         title={t('Seek previous keyframe')}
-        style={{ marginRight: 5, transform: 'matrix(-1, 0, 0, 1, 0, 0)' }}
+        style={{ marginRight: 5, transform: mirrorTransform }}
         onClick={() => seekClosestKeyframe(-1)}
       />
 
@@ -214,8 +216,8 @@ const TimelineControls = memo(({
 
       {!simpleMode && renderCutTimeInput('end')}
 
-      <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} onClick={setCutEnd} title={t('Set cut end to current position')} style={{ marginLeft: 5 }} />
-      {!simpleMode && <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} onClick={jumpCutEnd} title={t('Jump to cut end')} style={{ marginLeft: 5 }} />}
+      <SetCutpointButton currentCutSeg={currentCutSeg} side="end" onClick={setCutEnd} title={t('Set cut end to current position')} style={{ marginLeft: 5 }} />
+      {!simpleMode && <SegmentCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} onClick={jumpCutEnd} title={t('Jump to cut end')} style={{ marginLeft: 5 }} />}
 
       {!simpleMode && renderJumpCutpointButton(1)}
 

src/components/SegmentCutpointButton.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { getSegColors } from '../util/colors';
+
+const SegmentCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, style }) => {
+  const {
+    segActiveBgColor: currentSegActiveBgColor,
+    segBorderColor: currentSegBorderColor,
+  } = getSegColors(currentCutSeg);
+
+  const start = side === 'start';
+  const border = `4px solid ${currentSegBorderColor}`;
+
+  return (
+    <Icon
+      size={13}
+      title={title}
+      role="button"
+      style={{ color: 'white', padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
+      onClick={onClick}
+    />
+  );
+};
+
+export default SegmentCutpointButton;

src/components/SetCutpointButton.jsx

@@ -1,25 +1,12 @@
 import React from 'react';
+import { FaHandPointUp } from 'react-icons/fa';
 
-import { getSegColors } from '../util/colors';
+import SegmentCutpointButton from './SegmentCutpointButton';
+import { mirrorTransform } from '../util';
 
-const SetCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, style }) => {
-  const {
-    segActiveBgColor: currentSegActiveBgColor,
-    segBorderColor: currentSegBorderColor,
-  } = getSegColors(currentCutSeg);
-
-  const start = side === 'start';
-  const border = `4px solid ${currentSegBorderColor}`;
-
-  return (
-    <Icon
-      size={13}
-      title={title}
-      role="button"
-      style={{ color: 'white', padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
-      onClick={onClick}
-    />
-  );
-};
+// constant side because we are mirroring
+const SetCutpointButton = ({ currentCutSeg, side, title, onClick, style }) => (
+  <SegmentCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointUp} onClick={onClick} title={title} style={{ transform: side === 'start' ? mirrorTransform : undefined, ...style }} />
+);
 
 export default SetCutpointButton;

src/util.js

@@ -283,3 +283,5 @@ export async function deleteFiles({ toDelete, paths: { previewFilePath, filePath
     await pMap(failedToTrashFiles, async (path) => unlink(path), { concurrency: 1 });
   }
 }
+
+export const mirrorTransform = 'matrix(-1, 0, 0, 1, 0, 0)';