Merge pull request #4320 from serlo/feat/interactive-video-delete

feat(interactive-video): add tool to remove all marks
serlo · Dec 2, 2024 · ec374b1 · ec374b1
2 parents ad5ad0e + 058dc18
commit ec374b1
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 22 deletions.
diff --git a/packages/editor/src/i18n/strings/de/edit.ts b/packages/editor/src/i18n/strings/de/edit.ts
@@ -229,10 +229,13 @@ export const editStrings = {
         'Wenn die Aufgabe falsch beantwortet wurde, kann der Lerner per Button den letzten Abschnitt noch mal anschauen',
       editMark: 'Bearbeiten',
       removeMark: 'Löschen',
+      removeAllMarks: 'Alle Aufgaben löschen',
+      confirmRemoveAllMarks:
+        'Bist du sicher, dass du alle Aufgaben löschen willst?',
       addOverlayContent: 'Aufgabe an aktueller Stelle einfügen',
       addVideo: 'Füge ein Video hinzu (z.B. YouTube)',
       changeVideo: 'Video austauschen',
-      saveButton: 'Speichern',
+      saveInfo: 'Änderungen werden automatisch gespeichert!',
     },
     multimedia: {
       title: 'Erklärung mit Multimedia-Inhalt',

diff --git a/packages/editor/src/i18n/strings/en/edit.ts b/packages/editor/src/i18n/strings/en/edit.ts
@@ -219,10 +219,12 @@ export const editStrings = {
         'If an exercise is answered incorrectly, the video jumps back to the last mark',
       editMark: 'Edit',
       removeMark: 'Remove',
+      removeAllMarks: 'Remove all exercises',
+      confirmRemoveAllMarks: 'Are you sure you want to remove all exercises?',
       addOverlayContent: 'Add exercise',
       addVideo: 'Add a video url (e.g. YouTube) to get started',
       changeVideo: 'Change video',
-      saveButton: 'Save',
+      saveInfo: 'Changes are continually saved!',
     },
     multimedia: {
       title: 'Multimedia content associated with text',

diff --git a/packages/editor/src/plugins/interactive-video/editor.tsx b/packages/editor/src/plugins/interactive-video/editor.tsx
@@ -22,16 +22,19 @@ export function InteractiveVideoEditor(props: InteractiveVideoProps) {
     ? staticDocument.state.video.state.src
     : ''
 
+  const hasVideo = videoSrc.length > 0
+
   return (
     <>
       {focused && (
         <InteractiveVideoToolbar
           {...props}
+          hasVideo={hasVideo}
           previewActive={previewActive}
           setPreviewActive={setPreviewActive}
         />
       )}
-      {videoSrc.length ? (
+      {hasVideo ? (
         <EditMode
           previewActive={previewActive}
           {...props}

diff --git a/packages/editor/src/plugins/interactive-video/editor/marks-list.tsx b/packages/editor/src/plugins/interactive-video/editor/marks-list.tsx
@@ -34,7 +34,7 @@ export function MarksList({
               </span>
               <div>
                 <button
-                  className="serlo-button-editor-secondary mr-2"
+                  className="serlo-button-edit-secondary mr-2"
                   onClick={() => onMarkClick(index)}
                 >
                   <span className="sr-only">
@@ -43,7 +43,7 @@ export function MarksList({
                   <FaIcon icon={faPencilAlt} />
                 </button>
                 <button
-                  className="serlo-button-editor-secondary"
+                  className="serlo-button-edit-secondary"
                   onClick={() => marks.remove(index)}
                 >
                   <span className="sr-only">

diff --git a/packages/editor/src/plugins/interactive-video/editor/overlay-content-modal.tsx b/packages/editor/src/plugins/interactive-video/editor/overlay-content-modal.tsx
@@ -1,10 +1,8 @@
 import { EditorModal } from '@editor/editor-ui/editor-modal'
 import { EditorTooltip } from '@editor/editor-ui/editor-tooltip'
-import { FaIcon } from '@editor/editor-ui/fa-icon'
 import { SwitchButton } from '@editor/editor-ui/switch-button'
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import { cn } from '@editor/utils/cn'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { useRef } from 'react'
 
 import { type InteractiveVideoProps } from '..'
@@ -27,15 +25,12 @@ export function OverlayContentModal({
       setIsOpen={onClose}
       className="bottom-24 top-side h-auto w-full max-w-4xl translate-y-0 overflow-x-auto"
       title={pluginStrings.editOverlayTitle}
-      extraTitleClassName="text-sm font-bold !border-0 mb-1 -mt-2"
-      extraCloseButtonClassName="sr-only"
+      extraTitleClassName="text-sm font-bold !border-0 mb-4 -mt-2.5"
+      extraCloseButtonClassName="mt-0.5"
     >
-      <button
-        className="serlo-button-edit-primary absolute right-7 top-[56px]"
-        onClick={onClose}
-      >
-        {pluginStrings.saveButton} <FaIcon icon={faCheck} />
-      </button>
+      <div className="absolute right-16 top-6 text-sm italic text-gray-600">
+        {pluginStrings.saveInfo}
+      </div>
       <input
         ref={titleRef}
         value={title.value}

diff --git a/packages/editor/src/plugins/interactive-video/toolbar.tsx b/packages/editor/src/plugins/interactive-video/toolbar.tsx
@@ -4,18 +4,20 @@ import { PluginDefaultTools } from '@editor/editor-ui/plugin-toolbar/plugin-tool
 import { useEditStrings } from '@editor/i18n/edit-strings-provider'
 import { runChangeDocumentSaga } from '@editor/store'
 import { EditorPluginType } from '@editor/types/editor-plugin-type'
-import { faArrowsRotate } from '@fortawesome/free-solid-svg-icons'
+import { faArrowsRotate, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
 import { type Dispatch, type SetStateAction } from 'react'
 import { useDispatch } from 'react-redux'
 
 import type { InteractiveVideoProps } from '.'
 
 export const InteractiveVideoToolbar = ({
   id,
+  hasVideo,
   state,
   previewActive,
   setPreviewActive,
 }: InteractiveVideoProps & {
+  hasVideo: boolean
   previewActive: boolean
   setPreviewActive: Dispatch<SetStateAction<boolean>>
 }) => {
@@ -31,6 +33,11 @@ export const InteractiveVideoToolbar = ({
     )
   }
 
+  function handleRemoveAllMarks() {
+    if (!window.confirm(interactiveVideoStrings.confirmRemoveAllMarks)) return
+    state.marks.forEach(() => state.marks.remove(0))
+  }
+
   return (
     <PluginToolbar
       pluginType={EditorPluginType.InteractiveVideo}
@@ -43,12 +50,24 @@ export const InteractiveVideoToolbar = ({
       pluginControls={
         <>
           <PluginDefaultTools pluginId={id} />
-          <DropdownButton
-            onClick={handleOnChangeVideo}
-            label={interactiveVideoStrings.changeVideo}
-            icon={faArrowsRotate}
-            separatorTop
-          />
+          {hasVideo ? (
+            <>
+              {state.marks.length > 0 ? (
+                <DropdownButton
+                  onClick={handleRemoveAllMarks}
+                  label={interactiveVideoStrings.removeAllMarks}
+                  icon={faTrashAlt}
+                  separatorTop
+                />
+              ) : null}
+              <DropdownButton
+                onClick={handleOnChangeVideo}
+                label={interactiveVideoStrings.changeVideo}
+                icon={faArrowsRotate}
+                separatorTop
+              />
+            </>
+          ) : null}
         </>
       }
     />