@iamproperty/components 7.7.1--beta4 → 7.7.1--beta5

package/assets/ts/components/video-modal/video-modal.component.ts

@@ -1,5 +1,5 @@
 import { trackComponent, trackComponentRegistered } from '../_global';
-import { loadYouTubeScripts, createYoutTubeVideo } from '../../modules/videos';
+import { videoHTML, loadYouTubeScripts, createYoutTubeVideo,openYoutubeVideo,openVimeoVideo } from '../../modules/videos';
 import { openModal,closeModal,closeButtonHtml } from '../../modules/modal';
 
 trackComponentRegistered('iam-video-modal');
@@ -26,74 +26,22 @@ class iamVideoCard extends HTMLElement {
 
     <dialog>
       ${closeButtonHtml}
-      <slot></slot>
+      ${videoHTML}
     </dialog>
     `;
 
     this.shadowRoot.appendChild(template.content.cloneNode(true));
   }
 
-  openYoutubeVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const youtubeId = component.getAttribute('data-youtube');
-    let loaded;
-    if (!document.body.classList.contains('youtubeLoaded')) {
-      
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      loaded = await loadYouTubeScripts();
-    }
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'YoutTube', ID: youtubeId },
-    });
-    component.dispatchEvent(customEvent);
-
-    const interval = setInterval(():void => {
-
-      if(typeof YT != "undefined"){
-        clearInterval(interval);
-        createYoutTubeVideo(embed, youtubeId);
-      }
-    }, 200);
-    // Limit the number of calls
-    setTimeout(function() {
-      clearInterval(interval)
-    }, 2000);
-
-  } 
-  
-  openVimeoVideo = async (id, component):void => {
-
-    const embed = component.querySelector('.embed');
-
-    openModal(id, component);
-
-    const vimeoId = component.getAttribute('data-vimeo');
-
-    const customEvent = new CustomEvent('play-video', {
-      detail: { 'Video Type': 'Vimeo', ID: vimeoId },
-    });
-    component.dispatchEvent(customEvent);
-    window.dataLayer.push(customEvent.detail);
-
-    if (!embed.querySelector('iframe'))
-      embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${vimeoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
-
-  } 
-
   async connectedCallback(): void {
     
     const id = this.getAttribute('id');
     const closeButton = this.shadowRoot?.querySelector('[data-close]');
     
-    this.innerHTML = `<div class="embed"></div>`
+    this.innerHTML = `<div class="embed" slot="video"></div>`;
     const embed = this.querySelector('.embed');
 
-    document.addEventListener('click', async (e) => {
+    document.addEventListener('click', (e) => {
 
       if(e.target.closest(`[command="show-modal"][commandfor="${id}"]`)){
 
@@ -102,16 +50,19 @@ class iamVideoCard extends HTMLElement {
         if(this.hasAttribute('data-youtube')){
           const youtubeId = this.getAttribute('data-youtube');
           embed?.setAttribute('id',youtubeId);
-          this.openYoutubeVideo(id, this);
+          openYoutubeVideo(this);
+          openModal(this);
         }
         else if(this.hasAttribute('data-vimeo')) {
-          this.openVimeoVideo(id, this);
+          openVimeoVideo(this);
+          openModal(this);
         }
       }
     });
+
     
     closeButton?.addEventListener('click', () => {
-      closeModal(id, this);
+      closeModal(this);
 
       if(this.hasAttribute('data-youtube')){
         const youtubeId = this.getAttribute('data-youtube');

package/assets/ts/modules/modal.ts

@@ -1,6 +1,7 @@
-export const openModal = (id, modal): void => {
+export const openModal = (modal): void => {
 
   const dialog = modal.shadowRoot?.querySelector('dialog');
+  const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.showModal();
   dialog?.focus();
@@ -20,9 +21,10 @@ export const openModal = (id, modal): void => {
   });
 }
 
-export const closeModal = (id, modal): void => {
+export const closeModal = (modal): void => {
 
   const dialog = modal.shadowRoot?.querySelector('dialog');
+  const id = modal.hasAttribute('id') ? modal.getAttribute('id') : 'unknown';
 
   dialog?.close();
   

package/assets/ts/modules/videos.ts

@@ -101,6 +101,14 @@ const videoSupport = async (body): void => {
   });
 };
 
+export const videoHTML = `<div class="video-wrapper">
+  <slot name="video"></slot>
+  <picture>
+    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="" lazy="" />
+  </picture>
+  <button class="btn btn-compact fa-play m-0 colour-success">Play</button>
+</div>`;
+
 export const loadYouTubeScripts = async (): any => {
   return new Promise((resolve, reject) => {
     const image = new Image();
@@ -133,6 +141,9 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
     return false;
   }
 
+  console.log('hi2');
+  
+
   // This function creates an <iframe> (and YouTube player) after the API code downloads.
   //function onYouTubeIframeAPIReady() {
 
@@ -173,4 +184,50 @@ export const createYoutTubeVideo = async (target, video_id): void | boolean => {
   }
 };
 
+export const openYoutubeVideo = async (component):void => {
+
+    const embed = component.shadowRoot.querySelector('.embed');
+    const youtubeId = component.getAttribute('data-youtube');
+
+    let loaded;
+    if (!document.body.classList.contains('youtubeLoaded')) {
+      
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      loaded = await loadYouTubeScripts();
+    }
+
+    const customEvent = new CustomEvent('play-video', {
+      detail: { 'Video Type': 'YoutTube', ID: youtubeId },
+    });
+    component.dispatchEvent(customEvent);
+
+    const interval = setInterval(():void => {
+
+      if(typeof YT != "undefined"){
+        clearInterval(interval);
+        createYoutTubeVideo(embed, youtubeId);
+      }
+    }, 200);
+    // Limit the number of calls
+    setTimeout(function() {
+      clearInterval(interval)
+    }, 2000);
+
+  } 
+
+export const openVimeoVideo = async (component):void => {
+
+  const embed = component.querySelector('.embed');
+  const vimeoId = component.getAttribute('data-vimeo');
+
+  const customEvent = new CustomEvent('play-video', {
+    detail: { 'Video Type': 'Vimeo', ID: vimeoId },
+  });
+  component.dispatchEvent(customEvent);
+  window.dataLayer.push(customEvent.detail);
+
+  if (!embed.querySelector('iframe'))
+    embed.innerHTML = `<iframe src="https://player.vimeo.com/video/${vimeoId}?autoplay=1" width="100%" height="100%" frameborder="0" allow="autoplay; encrypted-media" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>`;
+} 
+
 export default videoSupport;