@sparkle-learning/core 0.0.23 → 0.0.24

package/dist/cjs/sparkle-youtube.cjs.entry.js

@@ -4,188 +4,34 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fbf4d3bf.js');
 
-const sparkleYoutubeCss = ":host(.loaded) div.youtube-container{opacity:var(--sparkle-youtube-opacity-loaded, 1)}div.youtube-container{opacity:var(--sparkle-youtube-opacity-not-loaded, 0);transition:var(--sparkle-youtube-transition, opacity 0.15s linear)}";
+const sparkleYoutubeCss = ":host(.loaded) div.youtube-container{opacity:var(--sparkle-youtube-opacity-loaded, 1)}div.youtube-container{opacity:var(--sparkle-youtube-opacity-not-loaded, 0);transition:var(--sparkle-youtube-transition, opacity 0.15s linear)}.embed-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%}.embed-container iframe,.embed-container object,.embed-container embed{position:absolute;top:0;left:0;width:100%;height:100%}";
 
 const SparkleYoutube = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    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;
+  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';
       }
-      const iframe = this.el.shadowRoot.querySelector('iframe');
-      if (iframe && !iframe.parentElement) {
-        resolve();
-        return;
-      }
-      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 (index.h(index.Host, { class: hostClass }, index.h("div", { class: "youtube-container" })));
+    return (index.h("div", null, !this.classMode ? (index.h("div", { class: "embed-container" }, index.h("iframe", { src: this.src.replace("watch?v=", "embed/"), frameborder: "0", allowFullScreen: true }))) : (index.h("div", null, index.h("img", { src: this.video_thumbnail })))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "src": ["onSrcUpdate"]
+    "classMode": ["classModeChanged"]
   }; }
 };
 SparkleYoutube.style = sparkleYoutubeCss;

package/dist/collection/assets/img/forward.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 220.682 220.682" style="enable-background:new 0 0 220.682 220.682;" xml:space="preserve"><g><g>
+	<polygon points="92.695,38.924 164.113,110.341 92.695,181.758 120.979,210.043 220.682,110.341 120.979,10.639  " data-original="#E5053A" fill="#E5053A"/>
+	<polygon points="28.284,210.043 127.986,110.341 28.284,10.639 0,38.924 71.417,110.341 0,181.758  " data-original="#E5053A" fill="#E5053A"/>
+</g></g> </svg>

package/dist/collection/assets/img/pause.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 365 365" style="enable-background:new 0 0 365 365;" xml:space="preserve" width="512px" height="512px" class=""><g><g>
+	<rect x="74.5" width="73" height="365" data-original="#E5053A" class="active-path" fill="#E5053A"/>
+	<rect x="217.5" width="73" height="365" data-original="#E5053A" class="active-path" fill="#E5053A"/>
+</g></g> </svg>

package/dist/collection/assets/img/play-symbol.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 307.046 307.046" style="enable-background:new 0 0 307.046 307.046;" xml:space="preserve"><g><g>
+	<g id="_x34_84._Forward">
+		<g>
+			<path d="M239.087,142.427L101.259,4.597c-6.133-6.129-16.073-6.129-22.203,0L67.955,15.698c-6.129,6.133-6.129,16.076,0,22.201     l115.621,115.626L67.955,269.135c-6.129,6.136-6.129,16.086,0,22.209l11.101,11.101c6.13,6.136,16.07,6.136,22.203,0     l137.828-137.831C245.222,158.487,245.222,148.556,239.087,142.427z" data-original="#E5053A" fill="#E5053A"/>
+		</g>
+	</g>
+</g></g> </svg>

package/dist/collection/assets/img/play.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 314.41 314.41" style="enable-background:new 0 0 314.41 314.41;" xml:space="preserve"><g><g>
+	<path d="M288.318,145.307L39.832,1.841c-4.253-2.454-9.486-2.454-13.74,0c-4.249,2.452-6.871,6.991-6.871,11.898v286.93   c0,4.908,2.622,9.447,6.871,11.898c2.128,1.229,4.5,1.843,6.87,1.843c2.372,0,4.743-0.614,6.87-1.843l248.487-143.464   c4.25-2.452,6.871-6.991,6.871-11.898C295.189,152.297,292.568,147.759,288.318,145.307z M46.702,276.868V37.541l207.265,119.664   L46.702,276.868z" data-original="#E5053A" class="active-path" fill="#E5053A"/>
+</g></g> </svg>

package/dist/collection/assets/img/rewind.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 220.682 220.682" style="enable-background:new 0 0 220.682 220.682;" xml:space="preserve"><g><g>
+	<polygon points="99.702,210.043 127.986,181.758 56.569,110.341 127.986,38.924 99.702,10.639 0,110.341  " data-original="#E5053A" class="active-path" fill="#E5053A"/>
+	<polygon points="192.398,10.639 92.695,110.341 192.398,210.043 220.682,181.758 149.264,110.341 220.682,38.924  " data-original="#E5053A" class="active-path" fill="#E5053A"/>
+</g></g> </svg>

package/dist/collection/components/sparkle-animation-player/sparkle-animation-player.css

@@ -90,7 +90,7 @@ ion-icon {
 }
 .navControls .progressBar .currentProgress:before {
   position: absolute;
-  top: 50%;
+  top: 62%;
   right: 4px;
   content: " ";
   display: block;

package/dist/collection/components/sparkle-animation-player/sparkle-animation-player.js

@@ -405,17 +405,19 @@ export class SparkleAnimationPlayer {
         h("div", { class: "button-panel" },
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.rewind5Sec() },
             " ",
-            h("ion-icon", { src: "/assets/img/rewind.svg" }),
+            h("ion-icon", { name: "play-back-outline" }),
             " "),
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.playButtonAction() },
             " ",
-            this.paused ? (h("ion-icon", { name: "pause" })) : (h("ion-icon", { src: "/assets/img/play-symbol.svg" }))),
+            this.paused ? (h("ion-icon", { name: "pause-outline" })) : (h("ion-icon", { name: "play-outline" })
+            // <ion-icon src="/assets/img/play-symbol.svg"></ion-icon>
+            )),
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.fastForward5Sec() },
             " ",
-            h("ion-icon", { src: "/assets/img/forward.svg" }))))) : (""),
+            h("ion-icon", { name: "play-forward-outline" }))))) : (""),
       (this.dataLoaded && this.captionText) ?
         h("div", { class: "closed-caption" },
-          h("ion-item", null,
+          h("ion-item", { lines: "none" },
             h("ion-label", null, "Closed Caption"),
             h("ion-toggle", { slot: "end", color: "primary", checked: this.showCaption }))) : ""));
   }

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

@@ -5,4 +5,20 @@
 div.youtube-container {
   opacity: var(--sparkle-youtube-opacity-not-loaded, 0);
   transition: var(--sparkle-youtube-transition, opacity 0.15s linear);
+}
+
+.embed-container {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.embed-container iframe, .embed-container object, .embed-container embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }

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"
     }]; }
 }