Add new config "stopOnTyping" for subtitles

editor-settings.toml

@@ -111,6 +111,11 @@
 # Default: "captions"
 #mainFlavor = "captions"
 
+# If set to true, video playback stops when typing in the subtitle fields
+# Type: boolean
+# Default: false
+#stopOnTyping = false
+
 [subtitles.languages]
 ## A list of languages for which new subtitles can be created
 # For each language, various tags can be specified

src/config.ts

@@ -73,6 +73,7 @@ interface iSettings {
     languages: { [key: string]: subtitleTags; } | undefined,
     icons: { [key: string]: string; } | undefined,
     defaultVideoFlavor: Flavor | undefined,
+    stopOnTyping: boolean,
   };
   chapters: {
     show: boolean,
@@ -118,6 +119,7 @@ const defaultSettings: iSettings = {
     languages: {},
     icons: undefined,
     defaultVideoFlavor: undefined,
+    stopOnTyping: false,
   },
   chapters: {
     show: false,
@@ -420,6 +422,7 @@ const SCHEMA = {
     languages: types.objectsWithinObjects,
     icons: types.map,
     defaultVideoFlavor: types.map,
+    stopOnTyping: types.boolean,
   },
   chapters: {
     show: types.boolean,

src/main/Chapter.tsx

@@ -161,6 +161,7 @@ const Chapter: React.FC = () => {
               removeCue={removeCue}
               setCueAtIndex={setCueAtIndex}
               setCurrentlyAt={setCurrentlyAt}
+              setIsPlaying={setIsPlaying}
               setFocusSegmentTriggered={setFocusSegmentTriggered}
               setFocusSegmentTriggered2={setFocusSegmentTriggered2}
               setFocusToSegmentAboveId={setFocusToSegmentAboveId}

src/main/SubtitleEditor.tsx

@@ -47,6 +47,7 @@ import { ThemedTooltip } from "./Tooltip";
 import { titleStyle, titleStyleBold } from "../cssStyles";
 import { generateButtonTitle } from "./SubtitleSelect";
 import { ConfirmationModal, ConfirmationModalHandle, Modal, ModalHandle, ProtoButton } from "@opencast/appkit";
+import { settings } from "../config";
 
 /**
  * Displays an editor view for a selected subtitle file
@@ -174,6 +175,7 @@ const SubtitleEditor: React.FC = () => {
           </div>
           <div css={subAreaStyle}>
             <SubtitleListEditor
+              isStopOnTyping={settings.subtitles.stopOnTyping}
               selectSelectedSubtitleById={selectSelectedSubtitleById}
               selectSelectedSubtitleId={selectSelectedSubtitleId}
               selectFocusSegmentId={selectFocusSegmentId}
@@ -183,6 +185,7 @@ const SubtitleEditor: React.FC = () => {
               removeCue={removeCue}
               setCueAtIndex={setCueAtIndex}
               setCurrentlyAt={setCurrentlyAt}
+              setIsPlaying={setIsPlaying}
               setFocusSegmentTriggered={setFocusSegmentTriggered}
               setFocusSegmentTriggered2={setFocusSegmentTriggered2}
               setFocusToSegmentAboveId={setFocusToSegmentAboveId}

src/main/SubtitleListEditor.tsx

@@ -32,6 +32,7 @@ const SubtitleListEditor: React.FC<{
   segmentTextHeight?: string,
   isFunctionButtonEnabled?: boolean,
   isChapterInputs?: boolean,
+  isStopOnTyping?: boolean,
   selectSelectedSubtitleById: (state: RootState) => SubtitlesInEditor,
   selectSelectedSubtitleId: (state: RootState) => string,
   selectFocusSegmentId: (state: RootState) => string,
@@ -47,6 +48,7 @@ const SubtitleListEditor: React.FC<{
   removeCue: ActionCreatorWithPayload<{ identifier: string, cue: SubtitleCue; }, string>,
   setCueAtIndex: ActionCreatorWithPayload<{ identifier: string, cueIndex: number, newCue: SubtitleCue; }, string>,
   setCurrentlyAt: ActionCreatorWithPayload<number, string>,
+  setIsPlaying: ActionCreatorWithPayload<boolean, string>,
   setFocusSegmentTriggered: ActionCreatorWithPayload<boolean, string>,
   setFocusSegmentTriggered2: ActionCreatorWithPayload<boolean, string>,
   setFocusToSegmentAboveId: ActionCreatorWithPayload<{ identifier: string, segmentId: string }, string>,
@@ -58,6 +60,7 @@ const SubtitleListEditor: React.FC<{
   segmentTextHeight = "80%",
   isFunctionButtonEnabled = true,
   isChapterInputs = false,
+  isStopOnTyping = false,
   selectSelectedSubtitleById,
   selectSelectedSubtitleId,
   selectFocusSegmentId,
@@ -67,6 +70,7 @@ const SubtitleListEditor: React.FC<{
   removeCue,
   setCueAtIndex,
   setCurrentlyAt,
+  setIsPlaying,
   setFocusSegmentTriggered,
   setFocusSegmentTriggered2,
   setFocusToSegmentAboveId,
@@ -145,12 +149,14 @@ const SubtitleListEditor: React.FC<{
         textAreaHeight={segmentTextHeight}
         isFunctionButtonEnabled={isFunctionButtonEnabled}
         isChapterInputs={isChapterInputs}
+        isStopOnTyping={isStopOnTyping}
         selectFocusSegmentId={selectFocusSegmentId}
         selectFocusSegmentTriggered2={selectFocusSegmentTriggered2}
         addCueAtIndex={addCueAtIndex}
         removeCue={removeCue}
         setCueAtIndex={setCueAtIndex}
         setCurrentlyAt={setCurrentlyAt}
+        setIsPlaying={setIsPlaying}
         setFocusSegmentTriggered={setFocusSegmentTriggered}
         setFocusSegmentTriggered2={setFocusSegmentTriggered2}
         setFocusToSegmentAboveId={setFocusToSegmentAboveId}
@@ -162,12 +168,14 @@ const SubtitleListEditor: React.FC<{
       segmentTextHeight,
       isFunctionButtonEnabled,
       isChapterInputs,
+      isStopOnTyping,
       selectFocusSegmentId,
       selectFocusSegmentTriggered2,
       addCueAtIndex,
       removeCue,
       setCueAtIndex,
       setCurrentlyAt,
+      setIsPlaying,
       setFocusSegmentTriggered,
       setFocusSegmentTriggered2,
       setFocusToSegmentAboveId,
@@ -246,6 +254,7 @@ const SubtitleListSegment : React.FC<{
   textAreaHeight?: string,
   isFunctionButtonEnabled?: boolean,
   isChapterInputs?: boolean,
+  isStopOnTyping?: boolean,
   selectFocusSegmentId: (state: RootState) => string,
   selectFocusSegmentTriggered2: (state: RootState) => boolean,
   addCueAtIndex: ActionCreatorWithPayload<{
@@ -258,6 +267,7 @@ const SubtitleListSegment : React.FC<{
   removeCue: ActionCreatorWithPayload<{ identifier: string, cue: SubtitleCue; }, string>,
   setCueAtIndex: ActionCreatorWithPayload<{ identifier: string, cueIndex: number, newCue: SubtitleCue; }, string>,
   setCurrentlyAt: ActionCreatorWithPayload<number, string>,
+  setIsPlaying: ActionCreatorWithPayload<boolean, string>,
   setFocusSegmentTriggered: ActionCreatorWithPayload<boolean, string>,
   setFocusSegmentTriggered2: ActionCreatorWithPayload<boolean, string>,
   setFocusToSegmentAboveId: ActionCreatorWithPayload<{ identifier: string, segmentId: string }, string>,
@@ -272,12 +282,14 @@ const SubtitleListSegment : React.FC<{
   const textAreaHeight = props.textAreaHeight;
   const isFunctionButtonEnabled = props.isFunctionButtonEnabled;
   const isChapterInputs = props.isChapterInputs;
+  const isStopOnTyping = props.isStopOnTyping;
   const selectFocusSegmentId = props.selectFocusSegmentId;
   const selectFocusSegmentTriggered2 = props.selectFocusSegmentTriggered2;
   const addCueAtIndex = props.addCueAtIndex;
   const removeCue = props.removeCue;
   const setCueAtIndex = props.setCueAtIndex;
   const setCurrentlyAt = props.setCurrentlyAt;
+  const setIsPlaying = props.setIsPlaying;
   const setFocusSegmentTriggered = props.setFocusSegmentTriggered;
   const setFocusSegmentTriggered2 = props.setFocusSegmentTriggered2;
   const setFocusToSegmentAboveId = props.setFocusToSegmentAboveId;
@@ -307,6 +319,9 @@ const SubtitleListSegment : React.FC<{
   }, [cue.idInternal, dispatch, focusId2, focusTriggered2, setFocusSegmentTriggered2]);
 
   const updateCueText = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (isStopOnTyping) {
+      dispatch(setIsPlaying(false));
+    }
     dispatch(setCueAtIndex({
       identifier: identifier,
       cueIndex: props.index,