Add interactive video view

editor-settings.toml

@@ -184,6 +184,17 @@ spanish = { lang = "es" }
 # Default: false
 #simpleMode = false
 
+####
+# Interactive Elements
+##
+
+[interactiveElements]
+
+# If the interactive elements editor appears in the main menu
+# Type: boolean
+# Default: false
+#show = false
+
 
 
 ############################################################

src/config.ts

@@ -80,6 +80,12 @@ interface iSettings {
     mainFlavor: string,
     defaultVideoFlavor: Flavor | undefined,
   };
+  interactiveElements: {
+    show: boolean,
+    textboxesMainFlavor: string,
+    quizzesMainFlavor: string,
+    defaultVideoFlavor: Flavor | undefined,
+  };
 }
 
 /**
@@ -126,6 +132,12 @@ const defaultSettings: iSettings = {
     mainFlavor: "chapters",
     defaultVideoFlavor: undefined,
   },
+  interactiveElements: {
+    show: false,
+    textboxesMainFlavor: "textboxes",
+    quizzesMainFlavor: "quizzes",
+    defaultVideoFlavor: undefined,
+  },
 };
 let configFileSettings: iSettings;
 let urlParameterSettings: iSettings;
@@ -429,6 +441,12 @@ const SCHEMA = {
     mainFlavor: types.string,
     defaultVideoFlavor: types.map,
   },
+  interactiveElements: {
+    show: types.boolean,
+    textboxesMainFlavor: types.string,
+    quizzesMainFlavor: types.string,
+    defaultVideoFlavor: types.map,
+  },
   thumbnail: {
     show: types.boolean,
     simpleMode: types.boolean,

src/cssStyles.tsx

@@ -432,3 +432,15 @@ export const undisplayContainer = (maxWidth: number) => css({
     display: "none",
   },
 });
+
+export const timeInputStyle = (theme: Theme) => css({
+  fontSize: "1em",
+  marginLeft: "15px",
+  marginRight: "2px",
+  borderRadius: "5px",
+  borderWidth: "1px",
+  padding: "10px 10px",
+  background: `${theme.element_bg}`,
+  border: "1px solid #ccc",
+  color: `${theme.text}`,
+});

src/i18n/locales/en-US.json

@@ -6,6 +6,7 @@
       "subtitles-button": "Subtitles",
       "chapters-button": "Chapters",
       "thumbnail-button": "Thumbnail",
+      "interactiveElements-button": "Interactive Elements",
       "metadata-button": "Metadata",
       "keyboard-controls-button": "Keyboard Controls",
       "tooltip-aria": "Main Navigation"
@@ -336,6 +337,44 @@
       "editTitle": "Chapter Editor"
     },
 
+    "interactiveElements" : {
+      "title": "Interactive Elements Editor",
+      "addTextbox": "Add Textbox",
+      "addTextbox-tooltip": "Add a textbox at the current timeline marker position.",
+      "addTextbox-tooltip-aria": "Add. Add a textbox at the current timeline marker position.",
+      "addQuiz": "Add Quiz",
+      "addQuiz-tooltip": "Add a quiz at the current timeline marker position.",
+      "addQuiz-tooltip-aria": "Add. Add a quiz at the current timeline marker position.",
+      "editElement-tooltip": "Edit the current element",
+      "editElement-tooltip-aria": "Edit the current element",
+      "deleteElement-tooltip": "Delete the current element",
+      "deleteElement-tooltip-aria": "Delete the current element",
+      "deleteElement-warning-header": "Caution!",
+      "deleteElement-warning": "This will remove the element! Are you sure?"
+    },
+
+    "interactiveElementsEditor": {
+      "title": {
+        "textbox": "Textbox Editor",
+        "quiz": "Quiz Editor"
+      },
+      "start": "Start",
+      "submit": "Submit",
+      "textbox": {
+        "description": "A little box for displaying a small amount of text and optionally a link. The box remains on screen for ten seconds.",
+        "text": "Text",
+        "link": "Link"
+      },
+      "quiz": {
+        "description": "Stops the video at the start time to display a multiple-choice quiz.",
+        "question": "Question",
+        "answers": "Answers",
+        "answer": "Answer",
+        "answerCorrect": "Correct",
+        "answerDelete": "Remove"
+      }
+    },
+
     "keyboardControls": {
       "header": "Hotkeys",
       "defaultGroupName": "General",

src/main/CuttingActions.tsx

@@ -310,7 +310,7 @@ interface cuttingActionsButtonInterface {
  * A button representing a single action a user can take while cutting
  * @param param0
  */
-const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
+export const CuttingActionsButton: React.FC<cuttingActionsButtonInterface> = ({
   Icon,
   actionName,
   actionHandler,
@@ -393,7 +393,7 @@ interface ZoomSliderInterface {
   ariaLabelText: string,
 }
 
-const ZoomSlider : React.FC<ZoomSliderInterface> = ({
+export const ZoomSlider : React.FC<ZoomSliderInterface> = ({
   actionHandler,
   tooltip,
   ariaLabelText,

src/main/CuttingActionsContextMenu.tsx

@@ -12,8 +12,12 @@ import { selectKeymap } from "../redux/hotkeySlice";
 
 const CuttingActionsContextMenu: React.FC<{
   children: React.ReactNode,
+  isChapters?: boolean
+  isInteractiveElements?: boolean,
 }> = ({
   children,
+  isChapters = false,
+  isInteractiveElements = false,
 }) => {
 
   const { t } = useTranslation();
@@ -62,12 +66,34 @@ const CuttingActionsContextMenu: React.FC<{
     },
   ];
 
+  const render = () => {
+    if (isChapters) {
+      return (
+        <>
+          {children}
+        </>
+      );
+    }
+    if (isInteractiveElements) {
+      return (
+        <>
+          {children}
+        </>
+      );
+    }
+    return (
+      <ThemedContextMenu
+        menuItems={cuttingContextMenuItems}
+      >
+        {children}
+      </ThemedContextMenu>
+    );
+  };
+
   return (
-    <ThemedContextMenu
-      menuItems={cuttingContextMenuItems}
-    >
-      {children}
-    </ThemedContextMenu>
+    <>
+      {render()}
+    </>
   );
 };