@sparkle-learning/core 0.0.23 → 0.0.26

package/dist/collection/components/sparkle-youtube/sparkle-youtube.js

@@ -1,183 +1,29 @@
-import { Component, Element, Prop, State, Watch, Method, Host, h } from '@stencil/core';
+import { Component, Element, Prop, State, Watch, Method, h } from '@stencil/core';
 export class SparkleYoutube {
   constructor() {
-    this.allowFullscreen = true;
-    this.instant = false;
-    this.loading = false;
-    this.loaded = false;
+    this.video_thumbnail = '';
   }
-  async componentWillLoad() {
-    await this.addPreconnectLink();
+  componentDidLoad() {
+    this.classMode = this.initialClassMode;
+    this.classModeChanged();
   }
-  async componentDidLoad() {
-    if (this.instant) {
-      await this.lazyLoadContent();
-    }
-  }
-  async updateIFrame(width, height) {
-    const iframe = this.el.shadowRoot.querySelector('iframe');
-    if (iframe) {
-      iframe.width = '' + width;
-      iframe.height = '' + height;
-    }
-  }
-  lazyLoadContent() {
-    return this.createIFrame();
-  }
-  async onSrcUpdate() {
-    await this.createIFrame();
-  }
-  play() {
-    return this.playPauseVideo(true);
-  }
-  pause() {
-    return this.playPauseVideo(false);
-  }
-  addPreconnectLink() {
-    return new Promise((resolve) => {
-      if (!this.src || !document) {
-        resolve();
-        return;
-      }
-      const links = document.head.querySelectorAll("link[rel='preconnect'][youtube]");
-      if (links && links.length > 0) {
-        resolve();
-        return;
-      }
-      const link = document.createElement('link');
-      link.rel = 'preconnect';
-      link.href = 'https://www.youtube.com';
-      link.setAttribute('youtube', '');
-      document.head.appendChild(link);
-      resolve();
-    });
-  }
-  createIFrame() {
-    return new Promise(async (resolve) => {
-      if (!this.src) {
-        resolve();
-        return;
-      }
-      if (this.loading) {
-        resolve();
-        return;
-      }
-      const iframe = this.el.shadowRoot.querySelector('iframe');
-      if (iframe && !iframe.parentElement) {
-        resolve();
-        return;
+  classModeChanged() {
+    if (this.classMode) {
+      var youtube_video_id = this.src.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
+      if (youtube_video_id.length == 11) {
+        this.video_thumbnail = '//img.youtube.com/vi/' + youtube_video_id + '/0.jpg';
       }
-      this.loading = true;
-      this.loaded = false;
-      if (iframe) {
-        iframe.parentElement.removeChild(iframe);
-      }
-      const element = document.createElement('iframe');
-      const allow = document.createAttribute('allow');
-      allow.value = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
-      this.setAttributeNode(element, allow);
-      if (this.allowFullscreen) {
-        const allowFullScreen = document.createAttribute('allowfullscreen');
-        allowFullScreen.value = '';
-        this.setAttributeNode(element, allowFullScreen);
-      }
-      let src = await this.formatSrc();
-      if (!this.allowFullscreen) {
-        // Not auto fullscreen on iOS: https://developers.google.com/youtube/player_parameters
-        const playsinline = document.createAttribute('playsinline');
-        playsinline.value = '1';
-        this.setAttributeNode(element, playsinline);
-        const split = src.split('?');
-        src += `${split && split.length > 0 ? '&' : '?'}playsinline=1`;
-      }
-      element.src = src;
-      element.width = '' + this.width;
-      element.height = '' + this.height;
-      element.frameBorder = '0';
-      element.title = this.frameTitle;
-      const div = this.el.shadowRoot.querySelector('div');
-      if (!div) {
-        resolve();
-        return;
-      }
-      div.appendChild(element);
-      this.loading = false;
-      this.loaded = true;
-      resolve();
-    });
-  }
-  setAttributeNode(element, attr) {
-    // Stencil prerendering
-    if (element.setAttributeNode === 'function') {
-      element.setAttributeNode(attr);
     }
   }
-  formatSrc() {
-    return new Promise(async (resolve) => {
-      // Direct URL can't be embedded, like https://www.youtube.com/watch?v=oUOjJIfPIjw or https://youtu.be/e63Cgln6Yag
-      const videoId = await this.findVideoId();
-      if (videoId) {
-        // In such a case return a link which could be embedded
-        resolve('https://www.youtube.com/embed/' + videoId + '?enablejsapi=1');
-      }
-      else {
-        // Otherwise we try the provided url
-        if (!this.src) {
-          resolve(this.src);
-          return;
-        }
-        // But first, if an embed link, like https://www.youtube.com/embed/PnSNT5WpauE, would be passed, a parameter to enable js should be added otherwise play and pause could not be triggered
-        // Therefore we add enablejsapi if needed in any case
-        const url = new URL(this.src);
-        if (!url.searchParams.get('enablejsapi')) {
-          url.searchParams.append('enablejsapi', '1');
-        }
-        resolve(url.href);
-      }
-    });
-  }
-  findVideoId() {
-    return new Promise((resolve) => {
-      const url = new URL(this.src);
-      let videoId = url.searchParams.get('v');
-      if (!videoId) {
-        const host = url.host;
-        if (host === 'youtu.be') {
-          // For shortened url
-          const pathname = url.pathname;
-          if (pathname) {
-            const split = url.pathname.split('/');
-            if (split && split.length >= 2) {
-              videoId = url.pathname.split('/')[1];
-            }
-          }
-        }
-      }
-      resolve(videoId);
-    });
-  }
-  playPauseVideo(play) {
-    return new Promise(async (resolve) => {
-      const iframe = this.el.shadowRoot.querySelector('iframe');
-      if (!iframe) {
-        resolve();
-        return;
-      }
-      iframe.contentWindow.postMessage(JSON.stringify({
-        event: 'command',
-        func: play ? 'playVideo' : 'pauseVideo',
-        args: '',
-      }), '*');
-      resolve();
-    });
+  classRoomModeChanged(val) {
+    this.classMode = val;
   }
   render() {
-    const hostClass = this.loaded ? 'loaded' : '';
-    return (h(Host, { class: hostClass },
-      h("div", { class: "youtube-container" })));
+    return (h("div", null, !this.classMode ? (h("div", { class: "embed-container" },
+      h("iframe", { src: this.src.replace("watch?v=", "embed/"), frameborder: "0", allowFullScreen: true }))) : (h("div", null,
+      h("img", { src: this.video_thumbnail })))));
   }
   static get is() { return "sparkle-youtube"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["sparkle-youtube.scss"]
   }; }
@@ -202,76 +48,7 @@ export class SparkleYoutube {
       "attribute": "src",
       "reflect": false
     },
-    "width": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "width",
-      "reflect": false
-    },
-    "height": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "height",
-      "reflect": false
-    },
-    "frameTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "frame-title",
-      "reflect": false
-    },
-    "allowFullscreen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "allow-fullscreen",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "instant": {
+    "initialClassMode": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -285,82 +62,23 @@ export class SparkleYoutube {
         "tags": [],
         "text": ""
       },
-      "attribute": "instant",
-      "reflect": false,
-      "defaultValue": "false"
+      "attribute": "initial-class-mode",
+      "reflect": false
     }
   }; }
   static get states() { return {
-    "loading": {},
-    "loaded": {}
+    "classMode": {},
+    "video_thumbnail": {}
   }; }
   static get methods() { return {
-    "updateIFrame": {
+    "classRoomModeChanged": {
       "complexType": {
-        "signature": "(width: number, height: number) => Promise<void>",
+        "signature": "(val: any) => Promise<void>",
         "parameters": [{
             "tags": [],
             "text": ""
-          }, {
-            "tags": [],
-            "text": ""
           }],
-        "references": {
-          "Promise": {
-            "location": "global"
-          },
-          "HTMLIFrameElement": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "lazyLoadContent": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "play": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
-        "return": "Promise<void>"
-      },
-      "docs": {
-        "text": "",
-        "tags": []
-      }
-    },
-    "pause": {
-      "complexType": {
-        "signature": "() => Promise<void>",
-        "parameters": [],
-        "references": {
-          "Promise": {
-            "location": "global"
-          }
-        },
+        "references": {},
         "return": "Promise<void>"
       },
       "docs": {
@@ -371,7 +89,7 @@ export class SparkleYoutube {
   }; }
   static get elementRef() { return "el"; }
   static get watchers() { return [{
-      "propName": "src",
-      "methodName": "onSrcUpdate"
+      "propName": "classMode",
+      "methodName": "classModeChanged"
     }]; }
 }