MO-854, refactor to just use a selector

src/main/Save.tsx

@@ -15,8 +15,7 @@ import {
   selectSegments,
   selectTracks,
   setHasChanges as videoSetHasChanges,
-  selectValidSegments,
-  validateSegments,
+  selectValidCutting,
 } from "../redux/videoSlice";
 import { postVideoInformation, selectStatus, selectError } from "../redux/workflowPostSlice";
 
@@ -54,10 +53,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({
     height: "100%",
@@ -83,11 +79,11 @@ const Save: React.FC = () => {
       return (
         <>
           <span css={{ maxWidth: "500px" }}>
-            {validSegments ? t("save.info-text") : t("save.invalid-text", { contact: settings.help.contact })}
+            {validCutting ? t("save.info-text") : t("save.invalid-text", { contact: settings.help.contact })}
           </span>
           <div css={backOrContinueStyle}>
             <PageButton pageNumber={0} label={t("various.goBack-button")} Icon={LuChevronLeft} />
-            {validSegments && <SaveButton />}
+            {validCutting && <SaveButton />}
           </div>
         </>
       );
@@ -96,7 +92,7 @@ const Save: React.FC = () => {
 
   return (
     <div css={saveStyle}>
-      <h1>{validSegments ? t("save.headline-text") : t("save.invalid-headline-text")}</h1>
+      <h1>{validCutting ? t("save.headline-text") : t("save.invalid-headline-text")}</h1>
       {render()}
       <div css={errorBoxStyle(postWorkflowStatus === "failed", theme)} role="alert">
         <span>{t("various.error-text", { contact: settings.help.contact })}</span><br />

src/main/WorkflowSelection.tsx

@@ -10,7 +10,7 @@ import { selectFinishState, selectPageNumber } from "../redux/finishSlice";
 import { PageButton } from "./Finish";
 import { LuChevronLeft } from "react-icons/lu";
 import { SaveAndProcessButton } from "./WorkflowConfiguration";
-import { selectValidSegments, validateSegments } from "../redux/videoSlice";
+import { selectValidCutting } from "../redux/videoSlice";
 import { selectStatus, selectError } from "../redux/workflowPostAndProcessSlice";
 import { selectStatus as saveSelectStatus, selectError as saveSelectError } from "../redux/workflowPostSlice";
 import { httpRequestState, Workflow } from "../types";
@@ -46,9 +46,7 @@ const WorkflowSelection: React.FC = () => {
   const postAndProcessError = useAppSelector(selectError);
   const saveStatus = useAppSelector(saveSelectStatus);
   const saveError = useAppSelector(saveSelectError);
-
-  dispatch(validateSegments());
-  const validSegments = useAppSelector(selectValidSegments);
+  const validCutting = useAppSelector(selectValidCutting);
 
   const workflowSelectionStyle = css({
     padding: "20px",
@@ -120,7 +118,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("save.invalid-headline-text"),

src/redux/videoSlice.ts

@@ -18,7 +18,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
@@ -53,7 +52,6 @@ export const initialState: video & httpRequestState = {
   tracks: [],
   subtitlesFromOpencast: [],
   activeSegmentIndex: 0,
-  validSegments: true,
   selectedWorkflowId: "",
   previewTriggered: false,
   clickTriggered: false,
@@ -180,15 +178,6 @@ const videoSlice = createSlice({
       updateCurrentlyAt(state, state.segments[nextSegmentIndex].start);
       state.jumpTriggered = true;
     },
-    validateSegments: state => {
-      // Test if whole video has been deleted
-      if (state.segments.length === 1 && state.segments[0].deleted && state.segments[0].start === 0 &&
-          state.segments[0].end === state.duration) {
-        state.validSegments = false;
-      } else {
-        state.validSegments = true;
-      }
-    },
     addSegment: (state, action: PayloadAction<video["segments"][0]>) => {
       state.segments.push(action.payload);
     },
@@ -362,7 +351,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,
@@ -532,7 +528,6 @@ export const {
   setJumpTriggered,
   jumpToPreviousSegment,
   jumpToNextSegment,
-  validateSegments,
 } = videoSlice.actions;
 
 export const selectVideos = createSelector(
@@ -553,7 +548,7 @@ export const {
   selectCurrentlyAtInSeconds,
   selectSegments,
   selectActiveSegmentIndex,
-  selectValidSegments,
+  selectValidCutting,
   selectIsCurrentSegmentAlive,
   selectSelectedWorkflowId,
   selectHasChanges,