From 618893a41f546e9f3521565269dec3ebd1874bd8 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Sat, 16 Oct 2021 18:56:12 +0200
Subject: [PATCH] Integrated audio node and video node into editor.

---
 .../components/librecms/cmsEditor.xhtml       |  2 +-
 .../main/scss/content-sections/_custom.scss   | 51 ++++++++++++++-----
 .../typescript/content-sections/cms-editor.ts | 46 +++++++++++++++++
 .../cms-editor/audio-node/audio-node.ts       |  4 +-
 4 files changed, 86 insertions(+), 17 deletions(-)

diff --git a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
index 33c701d78..c0ff9f7be 100644
--- a/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
+++ b/ccm-cms/src/main/resources/META-INF/resources/components/librecms/cmsEditor.xhtml
@@ -879,7 +879,7 @@
                             <button class="btn btn-outline-dark select-video-button"
                                     data-toggle="modal"
                                     data-target="#librecms-video-node-select-video-dialog-">
-                                <librecms:remixSvgIcon icon="ri-video-edit-line" />
+                                <librecms:remixSvgIcon icon="ri-video-line" />
                                 <span class="sr-only">#{CmsAdminMessages['cms_editor.video_node_view.select_video.label']}</span>
                             </button>
                             <div aria-hidden="true"
diff --git a/ccm-cms/src/main/scss/content-sections/_custom.scss b/ccm-cms/src/main/scss/content-sections/_custom.scss
index 4fdf15f19..282eb4332 100644
--- a/ccm-cms/src/main/scss/content-sections/_custom.scss
+++ b/ccm-cms/src/main/scss/content-sections/_custom.scss
@@ -139,12 +139,15 @@ table.wor{
 }
 
 
-
-.librecms-image-node-view {
+.librecms-audio-node-view,
+.librecms-image-node-view,
+.librecms-video-node-view {
     background-color: #ededed;
     position: relative;
 
-    .librecms-image-node-view-buttons {    
+    .librecms-audio-node-view-buttons,
+    .librecms-image-node-view-buttons,
+    .librecms-video-node-view-buttons {    
         background-color: rgba(255,255,255,0.5);
 
         position: absolute;
@@ -158,48 +161,68 @@ table.wor{
         }
     }
 
-    &.librecms-image-node-width-25 {
+    &.librecms-audio-node-width-25,
+    &.librecms-image-node-width-25,
+    &.librecms-video-node-width-25 {
         width: 25%;
     }
 
-    &.librecms-image-node-width-33 {
+    &.librecms-audio-node-width-33,
+    &.librecms-image-node-width-33,
+    &.librecms-video-node-width-33 {
         width: 33%;
     }
 
-    &.librecms-image-node-width-50 {
+    &.librecms-audio-node-width-50,
+    &.librecms-image-node-width-50,
+    &.librecms-video-node-width-50 {
         width: 50%;
     }
 
-    &.librecms-image-node-width-66 {
+    &.librecms-audio-node-width-66,
+    &.librecms-image-node-width-66,
+    &.librecms-video-node-width-66 {
         width: 66%;
     }
 
-    &.librecms-image-node-width-75 {
+    &.librecms-audio-node-width-75,
+    &.librecms-image-node-width-75,
+    &.librecms-video-node-width-75 {
         width: 75%;
     }
 
-    &.librecms-image-node-width-100 {
+    &.librecms-audio-node-width-100,
+    &.librecms-image-node-width-100,
+    &.librecms-video-node-width-100 {
         width: 100%;
     }
 
-    &.librecms-image-node-align-floatleft {
+    &.librecms-audio-node-align-floatleft,
+    &.librecms-image-node-align-floatleft,
+    &.librecms-video-node-align-floatleft {
         float: left;
     }
 
-    &.librecms-image-node-align-center {
+    &.librecms-audio-node-align-center,
+    &.librecms-image-node-align-center,
+    &.librecms-video-node-align-center {
         margin-left: auto;
         margin-right: auto;
     }
 
-    &.librecms-image-node-align-floatright {
+    &.librecms-audio-node-align-floatright,
+    &.librecms-image-node-align-floatright,
+    &.librecms-video-node-align-floatright {
         float: right;
     }
 
-    figure img {
+    figure audio, figure img, figure video {
         max-width: 100%;
     }
 
-    .select-image-dialog {
+    .select-audio-dialog,
+    .select-image-dialog,
+    .select-video-dialog {
         table {
             border: none;
             width: 100%;
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
index 657a16e5f..63d89dd15 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor.ts
@@ -10,7 +10,9 @@ import TableRow from "@tiptap/extension-table-row";
 import TableCell from "@tiptap/extension-table-cell";
 import TableHeader from "@tiptap/extension-table-header";
 
+import AudioNode from "./cms-editor/audio-node";
 import ImageNode from "./cms-editor/image-node";
+import VideoNode from "./cms-editor/video-node";
 
 const BUTTONS: CmsEditorButton[] = [
     {
@@ -547,6 +549,27 @@ const BUTTONS: CmsEditorButton[] = [
                 .run();
         },
     },
+    {
+        selector: ".tiptap-insert-audio",
+        command: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .chain()
+                .focus()
+                .setLibreCmsAudio()
+                .insertContent("<p></p>")
+                .run();
+        },
+        can: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .can()
+                .chain()
+                .focus()
+                .setLibreCmsAudio()
+                .run();
+        },
+    },
     {
         selector: ".tiptap-insert-image",
         command: (cmsEditor) => {
@@ -568,6 +591,27 @@ const BUTTONS: CmsEditorButton[] = [
                 .run();
         },
     },
+    {
+        selector: ".tiptap-insert-video",
+        command: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .chain()
+                .focus()
+                .setLibreCmsVideo()
+                .insertContent("<p></p>")
+                .run();
+        },
+        can: (cmsEditor) => {
+            return cmsEditor
+                .getEditor()
+                .can()
+                .chain()
+                .focus()
+                .setLibreCmsVideo()
+                .run();
+        },
+    },
     // {
     //     selector: "",
     //     command: cmsEditor => {},
@@ -732,6 +776,7 @@ class CmsEditorBuilder {
         const editor: Editor = new Editor({
             element: canvasElement,
             extensions: [
+                AudioNode,
                 Gapcursor,
                 ImageNode,
                 StarterKit,
@@ -746,6 +791,7 @@ class CmsEditorBuilder {
                 TableRow,
                 TableHeader,
                 TableCell,
+                VideoNode,
             ],
             content: variant,
         });
diff --git a/ccm-cms/src/main/typescript/content-sections/cms-editor/audio-node/audio-node.ts b/ccm-cms/src/main/typescript/content-sections/cms-editor/audio-node/audio-node.ts
index cc4c70a00..43fe42024 100644
--- a/ccm-cms/src/main/typescript/content-sections/cms-editor/audio-node/audio-node.ts
+++ b/ccm-cms/src/main/typescript/content-sections/cms-editor/audio-node/audio-node.ts
@@ -415,12 +415,12 @@ function loadAudioAssets(
                                     "click",
                                     (event) => {
                                         const audioUrl = `/content-sections/info/audio/uuid-${audioAsset["uuid"]}`;
-                                        node.attrs.imgSrc = audioUrl;
+                                        node.attrs.audioSrc = audioUrl;
                                         if (audioElem) {
                                             audioElem.src = audioUrl;
                                         } else {
                                             console.error(
-                                                "img element not found."
+                                                "audio element not found."
                                             );
                                         }
                                     }