Change delete all button to merge all segments button

Ref opencast#1083
dennis531 · Sep 4, 2023 · 212ab47 · 212ab47
1 parent 778b8f0
commit 212ab47
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 25 deletions.
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
@@ -17,9 +17,9 @@
       "delete-button": "Delete",
       "delete-restore-tooltip": "Mark or unmark the segment at the current position as to be deleted. Hotkey: {{hotkeyName}}",
       "delete-restore-tooltip-aria": "Delete and Restore. Mark or unmark the segment at the current position as to be deleted. Hotkey: {{hotKeyName}}.",
-      "delete-all-button": "Delete All",
-      "delete-all-tooltip": "Mark all segments as to be deleted.",
-      "delete-all-tooltip-aria": "Delete All. Mark all segments as to be deleted.",
+      "merge-all-button": "Merge All",
+      "merge-all-tooltip": "Combine all segments into a single segment.",
+      "merge-all-tooltip-aria": "Merge All. Combine all segments into a single segment.",
       "restore-button": "Restore",
       "mergeLeft-button": "Merge Left",
       "mergeLeft-tooltip": "Combine the currently active segment with the segment to its left. Hotkey: {{hotkeyName}}",

diff --git a/src/main/CuttingActions.tsx b/src/main/CuttingActions.tsx
@@ -5,6 +5,7 @@ import { basicButtonStyle, flexGapReplacementStyle } from '../cssStyles'
 import { IconProp } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
+  faArrowsLeftRightToLine,
   faCut,
   faStepBackward,
   faStepForward,
@@ -16,7 +17,7 @@ import { css } from '@emotion/react'
 
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, markAllAsDeleted
+  cut, markAsDeletedOrAlive, selectIsCurrentSegmentAlive, mergeLeft, mergeRight, mergeAll
 } from '../redux/videoSlice'
 import { GlobalHotKeys, KeySequence, KeyMapOptions } from "react-hotkeys";
 import { cuttingKeyMap } from "../globalKeys";
@@ -86,11 +87,6 @@ const CuttingActions: React.FC = () => {
           <MarkAsDeletedButton actionHandler={dispatchAction} action={markAsDeletedOrAlive}
             hotKeyName={(cuttingKeyMap[handlers.delete.name] as KeyMapOptions).sequence}
           />
-          <CuttingActionsButton iconName={faTrash}
-            actionName={t("cuttingActions.delete-all-button")} actionHandler={dispatchAction} action={markAllAsDeleted}
-            tooltip={t('cuttingActions.delete-all-tooltip')}
-            ariaLabelText={t('cuttingActions.delete-all-tooltip-aria')}
-          />
           <CuttingActionsButton iconName={faStepBackward}
             actionName={t("cuttingActions.mergeLeft-button")} actionHandler={dispatchAction} action={mergeLeft}
             tooltip={t('cuttingActions.mergeLeft-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeLeft.name] as KeyMapOptions).sequence })}
@@ -101,6 +97,11 @@ const CuttingActions: React.FC = () => {
             tooltip={t('cuttingActions.mergeRight-tooltip', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
             ariaLabelText={t('cuttingActions.mergeRight-tooltip-aria', { hotkeyName: (cuttingKeyMap[handlers.mergeRight.name] as KeyMapOptions).sequence })}
           />
+          <CuttingActionsButton iconName={faArrowsLeftRightToLine}
+            actionName={t("cuttingActions.merge-all-button")} actionHandler={dispatchAction} action={mergeAll}
+            tooltip={t('cuttingActions.merge-all-tooltip')}
+            ariaLabelText={t('cuttingActions.merge-all-tooltip-aria')}
+          />
         </div>
         <div css={blockStyle}>
           {/* <CuttingActionsButton iconName={faQuestion} actionName="Reset changes" action={null}

diff --git a/src/redux/videoSlice.ts b/src/redux/videoSlice.ts
@@ -167,12 +167,6 @@ const videoSlice = createSlice({
       state.segments[state.activeSegmentIndex].deleted = !state.segments[state.activeSegmentIndex].deleted
       state.hasChanges = true
     },
-    markAllAsDeleted: state => {
-      state.segments.forEach((segment: Segment) => {
-        segment.deleted = true;
-      });
-      state.hasChanges = true
-    },
     setSelectedWorkflowIndex: (state, action: PayloadAction<video["selectedWorkflowId"]>) => {
       state.selectedWorkflowId = action.payload
     },
@@ -184,6 +178,10 @@ const videoSlice = createSlice({
       mergeSegments(state, state.activeSegmentIndex, state.activeSegmentIndex + 1)
       state.hasChanges = true
     },
+    mergeAll: state => {
+      mergeSegments(state, 0, state.segments.length - 1)
+      state.hasChanges = true
+    },
   },
   // For Async Requests
   extraReducers: builder => {
@@ -264,22 +262,27 @@ export const parseSegments = (segments: Segment[], duration: number) => {
 }
 
 /**
- * Helper function for merging two segments
+ * Helper function for merging segments
  */
-const mergeSegments = (state: video, activeSegmentIndex: number, mergeSegmentIndex: number) => {
+const mergeSegments = (state: video, startSegmentIndex: number, endSegmentIndex: number) => {
   // Check if mergeSegmentIndex is valid
-  if (mergeSegmentIndex < 0 || mergeSegmentIndex > state.segments.length - 1) {
+  if (endSegmentIndex < 0 || endSegmentIndex > state.segments.length - 1) {
     return
   }
 
+  const minSegmentIndex = Math.min(startSegmentIndex, endSegmentIndex)
+
   // Increase activeSegment length
-  state.segments[activeSegmentIndex].start = Math.min(
-    state.segments[activeSegmentIndex].start, state.segments[mergeSegmentIndex].start)
-  state.segments[activeSegmentIndex].end = Math.max(
-    state.segments[activeSegmentIndex].end, state.segments[mergeSegmentIndex].end)
+  state.segments[minSegmentIndex].start = Math.min(
+    state.segments[startSegmentIndex].start, state.segments[endSegmentIndex].start)
+  state.segments[minSegmentIndex].end = Math.max(
+    state.segments[startSegmentIndex].end, state.segments[endSegmentIndex].end)
 
-  // Remove the other segment
-  state.segments.splice(mergeSegmentIndex, 1);
+  // Remove the last segment and segments between
+  state.segments.splice(
+    minSegmentIndex + 1,
+    Math.abs(endSegmentIndex - startSegmentIndex)
+  );
 
   // Update active segment
   updateActiveSegment(state)
@@ -342,7 +345,7 @@ const setThumbnailHelper = (state: video, id: Track["id"], uri: Track["thumbnail
 
 export const { setTrackEnabled, setIsPlaying, setIsPlayPreview, setCurrentlyAt, setCurrentlyAtInSeconds,
   addSegment, setAspectRatio, setHasChanges, setWaveformImages, setThumbnails, setThumbnail, removeThumbnail,
-  cut, markAsDeletedOrAlive, markAllAsDeleted, setSelectedWorkflowIndex, mergeLeft, mergeRight, setPreviewTriggered,
+  cut, markAsDeletedOrAlive, setSelectedWorkflowIndex, mergeLeft, mergeRight, mergeAll, setPreviewTriggered,
   setClickTriggered } = videoSlice.actions
 
 // Export selectors