From 0f752dc83d490a0a411a739519e294fa625fedb2 Mon Sep 17 00:00:00 2001
From: Helmi Akermi <70575401+hakermi@users.noreply.github.com>
Date: Mon, 13 Nov 2023 12:04:17 +0100
Subject: [PATCH] feat: Enhance embedding media display in mobile - EXO-65717 -
 Meeds-io/MIPs#71  (#840)

Enhance embedding videos display in mobile
---
 .../notes-editor/components/NotesEditorDashboard.vue   |  9 +++------
 .../webapp/vue-app/notes/components/NotesOverview.vue  | 10 ++++------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
index ef91654c59..fe1257b85d 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue
@@ -960,23 +960,20 @@ export default {
       const oEmbeds = docElement.querySelectorAll('oembed');
       oEmbeds.forEach((oembed, index) => {
         oembed.innerHTML = decodeURIComponent(oembed.innerHTML);
-        oembed.dataset.htmlSource = iframes[index]?.parentNode?.innerHTML?.toString();
+        oembed.dataset.iframe = iframes[index]?.parentNode?.innerHTML?.toString();
         const width = iframes[index]?.parentNode?.offsetWidth;
         const height = iframes[index]?.parentNode?.offsetHeight;
         const aspectRatio = width / height;
         const minHeight = parseInt(this.oembedMinWidth) / aspectRatio;
         const style = `
-          position: relative;
-          display: flex;
-          margin: auto;
           min-height: ${minHeight}px;
           min-width: ${this.oembedMinWidth}px;
-          width: ${width}px;
-          height:${height}px;
+          width: 100%;
           margin-bottom: 10px;
           aspect-ratio: ${aspectRatio};
         `;
         oembed.setAttribute('style', style);
+        oembed.setAttribute('class', 'd-flex position-relative ml-auto mr-auto');
       });
       return docElement?.children[1].innerHTML;
     },
diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
index e9731b271a..5243dd04b3 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue
@@ -860,12 +860,11 @@ export default {
       const contentChildren = docElement.getElementsByTagName('body')[0].children;
       const links = docElement.getElementsByTagName('a');
       const tables = docElement.getElementsByTagName('table');
-      const oEmbeds = docElement.getElementsByTagName('oembed');
       docElement.querySelectorAll('pre > code').forEach((e) => codeHighlighter.highlightBlock(e));
-      for (const oembed of oEmbeds) {
-        oembed.innerHTML = oembed.dataset.htmlSource;
-        delete oembed.dataset.htmlSource;
-      }
+      docElement.querySelectorAll('oembed').forEach((oembed) => {
+        oembed.innerHTML = oembed.dataset.iframe;
+        delete oembed.dataset.iframe;
+      });
       for (const link of links) {
         let href = link.href.replace(/(^\w+:|^)\/\//, '');
         if (href.endsWith('/')) {
@@ -885,7 +884,6 @@ export default {
             table.removeAttribute('summary');
           }
         }
-        table.style.border = `${table.getAttribute('border')}px solid`;
       }
       if (contentChildren) {
         for (let i = 0; i < contentChildren.length; i++) { // NOSONAR not iterable