increasing hotspot iframe size and video smart crop adjustment (#104)

Co-authored-by: Anurag Gupta <[email protected]>

blocks/embed/embed.js

@@ -12,6 +12,8 @@ const videoConfig = {
   controls: false,
 };
 
+const scPlayerHeight = '44rem';
+
 // Event listener to handle video configuration messages
 window.addEventListener("message", (event) => {
   if (event.data.name === "video-config") {
@@ -31,20 +33,28 @@ const loadScript = (url, callback, type) => {
   return script;
 };
 
+function isSmartCropVideo(url) {
+  return url.includes('SmartCropVideoViewer.html');
+}
+
 // const getDefaultEmbed = (url, hasMobileView) => `
 //   <div class="embed-default ${hasMobileView ? 'mobile-view' : ''}">
 //     <iframe src="${url.href}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
 //       allowfullscreen="" scrolling="no" allow="encrypted-media; autoplay; loop" 
 //       title="Content from ${url.hostname}" loading="lazy">
 //     </iframe>
 //   </div>`;
-const getDefaultEmbed = (url, hasMobileView) => `
-  <div class="embed-default ${hasMobileView ? 'mobile-view' : ''}">
-    <iframe src="${url.href}" style="border: 0; width: 70%; height: 70%; top:0, left:0; position: absolute;" 
-      allowfullscreen="" scrolling="no" allow="encrypted-media; autoplay; loop" 
-      title="Content from ${url.hostname}" loading="lazy">
-    </iframe>
-  </div>`;
+const getDefaultEmbed = (url, hasMobileView) => {
+  const height = isSmartCropVideo(url.href) ? scPlayerHeight : '70%';
+  return `
+      <div class="embed-default ${hasMobileView ? 'mobile-view' : ''}">
+        <iframe src="${url.href}" style="border: 0; width: 70%; height: ${height}; top:0, left:0; position: absolute;" 
+          allowfullscreen="" scrolling="no" allow="encrypted-media; autoplay; loop" 
+          title="Content from ${url.hostname}" loading="lazy">
+        </iframe>
+      </div>
+  `;
+};
 
 const embedYoutube = (url, autoplay) => {
   const usp = new URLSearchParams(url.search);

blocks/hotspot/hotspot.css

@@ -105,6 +105,11 @@ main .embed .embed-default {
     padding-bottom: 56.25%;
 }
 
+.hotspot-content iframe {
+    width: 37.5rem;
+    height: 18.75rem;
+}
+
 
 
 

blocks/hotspot/hotspot.js

@@ -1,3 +1,38 @@
+function attachEvents(block) {
+    // Hide all hotspots lying under the iframe when the iframe is hovered
+    block.querySelectorAll('iframe').forEach(frame => {
+        frame.addEventListener('mouseover', (e) => {
+            const frameRect = frame.getBoundingClientRect();
+            const hotspots = document.querySelectorAll('.hotspot');
+
+            document.querySelectorAll('.hotspot').forEach(hotspot => {
+                if (hotspot === e.target.closest('.hotspot')) {
+                    return;
+                }
+
+                const hotspotRect = hotspot.getBoundingClientRect();
+
+                // Check if the hotspot is within the iframe's viewport
+                const isInViewport = (
+                    hotspotRect.top >= frameRect.top &&
+                    hotspotRect.left >= frameRect.left &&
+                    hotspotRect.bottom <= frameRect.bottom &&
+                    hotspotRect.right <= frameRect.right
+                );
+
+                if (isInViewport) {
+                    hotspot.style.display = 'none';
+                }
+            });
+        });
+        frame.addEventListener('mouseout', () => {
+            document.querySelectorAll('.hotspot').forEach(hotspot => {
+                hotspot.style.display = 'block';
+            });
+        });
+    });
+}
+
 export default function decorate(block) {
     [...block.children].forEach((row, r) => {
         if (r > 0) {
@@ -52,4 +87,6 @@ export default function decorate(block) {
             row.remove();
         }
     });
+
+    attachEvents(block);
 }