diff --git a/src/HelpSheet.jsx b/src/HelpSheet.jsx
index 33ceba82..d9d7bf68 100644
--- a/src/HelpSheet.jsx
+++ b/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
→ {t('Seek forward 1 sec')}
CTRL / CMD + ← {t('Seek backward 1% of timeline at current zoom')}
CTRL / CMD + → {t('Seek forward 1% of timeline at current zoom')}
- , SHIFT + ← {t('Jump to cut start')}
- , SHIFT + → {t('Jump to cut end')}
+ , SHIFT + ← {t('Jump to cut start')}
+ , SHIFT + → {t('Jump to cut end')}
{t('Segments and cut points')}
- , I {t('Mark in / cut start point for current segment')}
- , O {t('Mark out / cut end point for current segment')}
+ , I {t('Mark in / cut start point for current segment')}
+ , O {t('Mark out / cut end point for current segment')}
+ {t('Add cut segment')}
BACKSPACE {t('Remove current segment')}
ENTER {t('Label current segment')}
diff --git a/src/NoFileLoaded.jsx b/src/NoFileLoaded.jsx
index 6572a43d..8f459dc3 100644
--- a/src/NoFileLoaded.jsx
+++ b/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
- or I O to set cutpoints
+ or I O to set cutpoints
diff --git a/src/TimelineControls.jsx b/src/TimelineControls.jsx
index 1ee9538b..2f5ed8c6 100644
--- a/src/TimelineControls.jsx
+++ b/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 && }
-
+ {!simpleMode && }
+
{!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')}
-
- {!simpleMode && }
+
+ {!simpleMode && }
{!simpleMode && renderJumpCutpointButton(1)}
diff --git a/src/components/SegmentCutpointButton.jsx b/src/components/SegmentCutpointButton.jsx
new file mode 100644
index 00000000..cffe4b17
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default SegmentCutpointButton;
diff --git a/src/components/SetCutpointButton.jsx b/src/components/SetCutpointButton.jsx
index 1dd175d5..4ebdd8fa 100644
--- a/src/components/SetCutpointButton.jsx
+++ b/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 (
-
- );
-};
+// constant side because we are mirroring
+const SetCutpointButton = ({ currentCutSeg, side, title, onClick, style }) => (
+
+);
export default SetCutpointButton;
diff --git a/src/util.js b/src/util.js
index bfd5db70..96a5a417 100644
--- a/src/util.js
+++ b/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)';