Merge pull request #1034 from Arnei/subtitles-unsaved-changes

Display "Unsaved changes" for subtitles
opencast · Apr 20, 2023 · 4e176ef · 4e176ef
2 parents 8b6fd6f + b912d40
commit 4e176ef
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/src/main/MainContent.tsx b/src/main/MainContent.tsx
@@ -27,6 +27,7 @@ import {
   selectIsPlaying, selectCurrentlyAt,
   setIsPlaying, setCurrentlyAt, setClickTriggered,
 } from '../redux/videoSlice'
+import { selectHasChanges as selectSubtitleHasChanges } from "../redux/subtitleSlice";
 import { selectTheme } from "../redux/themeSlice";
 import ThemeSwitcher from "./ThemeSwitcher";
 import Thumbnail from "./Thumbnail";
@@ -40,11 +41,12 @@ const MainContent: React.FC<{}> = () => {
   const mainMenuState = useSelector(selectMainMenuState)
   const videoChanged = useSelector(videoSelectHasChanges)
   const metadataChanged = useSelector(metadataSelectHasChanges)
+  const subtitleChanged = useSelector(selectSubtitleHasChanges)
   const theme = useSelector(selectTheme)
 
   // Display warning when leaving the page if there are unsaved changes
   useBeforeunload((event: { preventDefault: () => void; }) => {
-    if (videoChanged || metadataChanged) {
+    if (videoChanged || metadataChanged || subtitleChanged) {
       event.preventDefault();
     }
   });

diff --git a/src/main/Save.tsx b/src/main/Save.tsx
@@ -21,7 +21,8 @@ import { useTranslation } from 'react-i18next';
 import { AppDispatch } from "../redux/store";
 import { postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges,
   selectHasChanges as metadataSelectHasChanges } from "../redux/metadataSlice";
-import { selectSubtitles } from "../redux/subtitleSlice";
+import { selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
+  setHasChanges as subtitleSetHasChanges } from "../redux/subtitleSlice";
 import { serializeSubtitle } from "../util/utilityFunctions";
 import { Flavor } from "../types";
 import { selectTheme } from "../redux/themeSlice";
@@ -44,6 +45,7 @@ const Save : React.FC<{}> = () => {
   const theme = useSelector(selectTheme);
   const metadataHasChanges = useSelector(metadataSelectHasChanges)
   const hasChanges = useSelector(selectHasChanges)
+  const subtitleHasChanges = useSelector(selectSubtitleHasChanges)
 
   const saveStyle = css({
     height: '100%',
@@ -56,7 +58,7 @@ const Save : React.FC<{}> = () => {
   const render = () => {
     // Post (successful) save
     if (postWorkflowStatus === 'success' && postMetadataStatus === 'success'
-      && !hasChanges && !metadataHasChanges) {
+      && !hasChanges && !metadataHasChanges && !subtitleHasChanges) {
       return(
         <>
           <FontAwesomeIcon icon={faCheckCircle} size="10x" />
@@ -175,6 +177,7 @@ export const SaveButton: React.FC<{}> = () => {
     if (workflowStatus === 'success' && metadataStatus === 'success') {
       dispatch(videoSetHasChanges(false))
       dispatch(metadataSetHasChanges(false))
+      dispatch(subtitleSetHasChanges(false))
     }
   }, [dispatch, metadataStatus, workflowStatus])
 

diff --git a/src/redux/subtitleSlice.ts b/src/redux/subtitleSlice.ts
@@ -18,6 +18,8 @@ export interface subtitle {
   focusSegmentTriggered: boolean,   // a segment in the timeline was clicked
   focusSegmentId: string,           // which segment in the timeline was clicked
   focusSegmentTriggered2: boolean,   // a different trigger for a child component, to avoid additional rerenders from the parent
+
+  hasChanges: boolean         // Did user make changes to metadata view since last save
 }
 
 const initialState: subtitle = {
@@ -34,6 +36,7 @@ const initialState: subtitle = {
   focusSegmentTriggered2: false,
 
   aspectRatios: [],
+  hasChanges: false,
 }
 
 const updateCurrentlyAt = (state: subtitle, milliseconds: number) => {
@@ -93,6 +96,7 @@ export const subtitleSlice = createSlice({
       state.subtitles[action.payload.identifier][action.payload.cueIndex] = cue
 
       sortSubtitle(state, action.payload.identifier)
+      state.hasChanges = true
     },
     addCueAtIndex: (state, action: PayloadAction<{identifier: string, cueIndex: number, text: string, startTime: number, endTime: number}>) => {
       const startTime = action.payload.startTime >= 0 ? action.payload.startTime : 0
@@ -123,6 +127,7 @@ export const subtitleSlice = createSlice({
       }
 
       sortSubtitle(state, action.payload.identifier)
+      state.hasChanges = true
     },
     removeCue: (state, action: PayloadAction<{identifier: string, cue: SubtitleCue}>) => {
       const cueIndex = state.subtitles[action.payload.identifier].findIndex(i => i.idInternal === action.payload.cue.idInternal);
@@ -131,6 +136,7 @@ export const subtitleSlice = createSlice({
       }
 
       sortSubtitle(state, action.payload.identifier)
+      state.hasChanges = true
     },
     setSelectedSubtitleFlavor: (state, action: PayloadAction<subtitle["selectedSubtitleFlavor"]>) => {
       state.selectedSubtitleFlavor = action.payload
@@ -164,6 +170,9 @@ export const subtitleSlice = createSlice({
     setAspectRatio: (state, action: PayloadAction<{dataKey: number} & {width: number, height: number}> ) => {
       state.aspectRatios[action.payload.dataKey] = {width: action.payload.width, height: action.payload.height}
     },
+    setHasChanges: (state, action: PayloadAction<subtitle["hasChanges"]>) => {
+      state.hasChanges = action.payload
+    },
   },
 })
 
@@ -176,7 +185,7 @@ const sortSubtitle = (state: WritableDraft<subtitle>, identifier: string) => {
 export const { setIsDisplayEditView, setIsPlaying, setIsPlayPreview, setPreviewTriggered, setCurrentlyAt,
   setCurrentlyAtInSeconds, setClickTriggered, setSubtitle, setCueAtIndex, addCueAtIndex, removeCue,
   setSelectedSubtitleFlavor, setFocusSegmentTriggered, setFocusSegmentId, setFocusSegmentTriggered2,
-  setFocusToSegmentAboveId, setFocusToSegmentBelowId, setAspectRatio } = subtitleSlice.actions
+  setFocusToSegmentAboveId, setFocusToSegmentBelowId, setAspectRatio, setHasChanges } = subtitleSlice.actions
 
 // Export Selectors
 export const selectIsDisplayEditView = (state: RootState) =>
@@ -211,6 +220,8 @@ export const selectSelectedSubtitleFlavor = (state: { subtitleState: { selectedS
 export const selectSelectedSubtitleByFlavor = (state: { subtitleState:
   { subtitles: subtitle["subtitles"]; selectedSubtitleFlavor: subtitle["selectedSubtitleFlavor"]; }; }) =>
   state.subtitleState.subtitles[state.subtitleState.selectedSubtitleFlavor]
+export const selectHasChanges = (state: { subtitleState: { hasChanges: subtitle["hasChanges"] } }) =>
+  state.subtitleState.hasChanges
 
 /**
  * Alternative middleware to setCurrentlyAt.