feat: Review the display of Reel video - MEED-6886 - Meeds-io/MIPs#124

Meeds-io · May 21, 2024 · 365d0f2 · 365d0f2
1 parent c8084c3
commit 365d0f2
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/...main/webapp/vue-apps/activity-stream/components/activity/content/ActivityEmbeddedHTML.vue b/...main/webapp/vue-apps/activity-stream/components/activity/content/ActivityEmbeddedHTML.vue
@@ -41,10 +41,12 @@ export default {
   data: () => ({
     maxWidth: 320,
     elementReady: false,
+    isReelVideo: false
   }),
   computed: {
     embeddedHTML() {
-      return this.activity && this.activity.templateParams && this.activity.templateParams.html;
+      const htmlElement = this.activity && this.activity.templateParams && this.activity.templateParams.html;
+      return this.computeEmbeddedHTML(htmlElement);
     },
     sourceLink() {
       return this.activity && this.activity.templateParams && this.activity.templateParams.link || '';
@@ -78,13 +80,25 @@ export default {
       return {
         width: `${width}px`,
         maxWidth: `${this.maxWidth}px`,
-        maxHeight: `${this.maxWidth}px`,
+        maxHeight: !this.isReelVideo ? `${this.maxWidth}px` : '100%',
       };
     },
   },
   mounted() {
     this.maxWidth = this.$el && this.$el.parentElement.offsetWidth < this.maxWidth && String(this.$el.parentElement.offsetWidth - 2) || `${this.maxWidth}`;
     this.elementReady = true;
   },
+  methods: {
+    computeEmbeddedHTML(htmlElement) {
+      const tempdiv = document.createElement('div');
+      tempdiv.innerHTML = htmlElement;
+      if (tempdiv.firstElementChild.hasAttribute('style')
+          && tempdiv.firstElementChild.getAttribute('style').indexOf('max-width:') === 0) {
+        tempdiv.firstElementChild.setAttribute('style', `max-width:${this.maxWidth}px`);
+        this.isReelVideo = true;
+      }
+      return tempdiv.innerHTML;
+    }
+  }
 };
 </script>