feat: Enhance embedding media display in mobile - EXO-65717 - Meeds-io/MIPs#71 (#840)

Enhance embedding videos display in mobile

Author: hakermi

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;
     },

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