#1512, refactor cutting validation

Author: JamesUoM

src/main/Save.tsx

@@ -14,8 +14,7 @@ import {
   selectSegments,
   selectTracks,
   setHasChanges as videoSetHasChanges,
-  selectValidSegments,
-  validateSegments,
+  selectValidCutting,
 } from "../redux/videoSlice";
 import { postVideoInformation, selectStatus, selectError } from "../redux/workflowPostSlice";
 
@@ -52,10 +51,7 @@ const Save: React.FC = () => {
   const metadataHasChanges = useAppSelector(metadataSelectHasChanges);
   const hasChanges = useAppSelector(selectHasChanges);
   const subtitleHasChanges = useAppSelector(selectSubtitleHasChanges);
-
-  const dispatch = useAppDispatch();
-  dispatch(validateSegments());
-  const validSegments = useAppSelector(selectValidSegments);
+  const validCutting = useAppSelector(selectValidCutting);
 
   const saveStyle = css({
     display: "flex",
@@ -80,7 +76,7 @@ const Save: React.FC = () => {
     } else {
       return (
         <>
-          {validSegments ? <span>
+          {validCutting ? <span>
             {t("save.info-text")}
           </span> : <ErrorBox>
             <span css={{ whiteSpace: "pre-line" }}>
@@ -90,7 +86,7 @@ const Save: React.FC = () => {
           }
           <div css={backOrContinueStyle}>
             <PageButton pageNumber={0} label={t("various.goBack-button")} Icon={LuChevronLeft} />
-            {validSegments && <SaveButton />}
+            {validCutting && <SaveButton />}
           </div>
         </>
       );

src/main/WorkflowSelection.tsx

@@ -8,7 +8,7 @@ import { selectWorkflows, setSelectedWorkflowIndex } from "../redux/videoSlice";
 
 import { PageButton } from "./Finish";
 import { LuChevronLeft, LuDatabase } from "react-icons/lu";
-import { selectValidSegments, validateSegments } from "../redux/videoSlice";
+import { selectValidCutting } from "../redux/videoSlice";
 import { selectStatus as saveSelectStatus, selectError as saveSelectError } from "../redux/workflowPostSlice";
 import { httpRequestState, Workflow } from "../types";
 import { SaveButton } from "./Save";
@@ -37,9 +37,7 @@ const WorkflowSelection: React.FC = () => {
 
   const saveStatus = useAppSelector(saveSelectStatus);
   const saveError = useAppSelector(saveSelectError);
-
-  dispatch(validateSegments());
-  const validSegments = useAppSelector(selectValidSegments);
+  const validCutting = useAppSelector(selectValidCutting);
 
   const workflowSelectionStyle = css({
     padding: "20px",
@@ -113,7 +111,7 @@ const WorkflowSelection: React.FC = () => {
 
   // Fills the layout template with values based on how many workflows are available
   const renderSelection = () => {
-    if (!validSegments) {
+    if (!validCutting) {
       return (
         render(
           t("workflowSelection.saveAndProcess-text"),

src/redux/videoSlice.ts

@@ -1,4 +1,4 @@
-import { clamp, forEach } from "lodash";
+import { clamp } from "lodash";
 import { createSlice, nanoid, createAsyncThunk, PayloadAction, createSelector } from "@reduxjs/toolkit";
 import { client } from "../util/client";
 
@@ -20,7 +20,6 @@ export interface video {
   tracks: Track[],
   subtitlesFromOpencast: SubtitlesFromOpencast[],
   activeSegmentIndex: number,     // Index of the segment that is currenlty hovered
-  validSegments: boolean,         // Whether the segment will result in a valid video edit
   selectedWorkflowId: string,     // Id of the currently selected workflow
   aspectRatios: { width: number, height: number; }[],  // Aspect ratios of every video
   hasChanges: boolean,            // Did user make changes in cutting view since last save
@@ -56,7 +55,6 @@ export const initialState: video & httpRequestState = {
   tracks: [],
   subtitlesFromOpencast: [],
   activeSegmentIndex: 0,
-  validSegments: true,
   selectedWorkflowId: "",
   previewTriggered: false,
   clickTriggered: false,
@@ -187,21 +185,6 @@ const videoSlice = createSlice({
       updateCurrentlyAt(state, jumpTarget);
       state.jumpTriggered = true;
     },
-    validateSegments: state => {
-      let allDeleted = true;
-
-      // Test if whole video has been deleted
-      state.segments.forEach(segment => {
-        if(!segment.deleted) {
-          allDeleted = false;
-        }
-      })
-      if(allDeleted) {
-        state.validSegments = false;
-      } else {
-        state.validSegments = true;
-      }
-    },
     addSegment: (state, action: PayloadAction<video["segments"][0]>) => {
       state.segments.push(action.payload);
     },
@@ -381,7 +364,14 @@ const videoSlice = createSlice({
     selectCurrentlyAtInSeconds: state => state.currentlyAt / 1000,
     selectSegments: state => state.segments,
     selectActiveSegmentIndex: state => state.activeSegmentIndex,
-    selectValidSegments: state => state.validSegments,
+    selectValidCutting: state => {
+      let validSegment = false;
+      // Test if whole video hasn't been deleted
+      state.segments.forEach(segment => {
+        validSegment ||= !segment.deleted;
+      })
+      return validSegment;
+    },
     selectIsCurrentSegmentAlive: state => !state.segments[state.activeSegmentIndex].deleted,
     selectSelectedWorkflowId: state => state.selectedWorkflowId,
     selectHasChanges: state => state.hasChanges,
@@ -564,7 +554,6 @@ export const {
   setJumpTriggered,
   jumpToPreviousSegment,
   jumpToNextSegment,
-  validateSegments,
 } = videoSlice.actions;
 
 export const selectVideos = createSelector(
@@ -585,7 +574,7 @@ export const {
   selectCurrentlyAtInSeconds,
   selectSegments,
   selectActiveSegmentIndex,
-  selectValidSegments,
+  selectValidCutting,
   selectIsCurrentSegmentAlive,
   selectSelectedWorkflowId,
   selectHasChanges,