@sparkle-learning/core 0.0.23 → 0.0.26

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.js

@@ -1,4 +1,4 @@
-import { Component, State, Prop, Method, Element, Listen, h } from "@stencil/core";
+import { Component, State, Prop, Method, Element, getAssetPath, Listen, h } from "@stencil/core";
 import { CaptionParser } from "./caption-parser";
 export class SparkleAnimationPlayer {
   constructor() {
@@ -390,8 +390,8 @@ export class SparkleAnimationPlayer {
           this.showCaption ?
             h("div", { class: "caption" }, this.captionText) : "")) : (""),
         !this.dataLoaded ? (h("img", { class: "frame-img", src: this.firstFramePath })) : (""),
-        this.classMode ? (h("img", { class: "overlay-img", src: "/assets/img/play-button-disabled-overlay.png" })) : (""),
-        !this.classMode && this.paused ? (h("img", { class: "overlay-img", onClick: () => this.playButtonAction(), src: "/assets/img/play-button-overlay.png" })) : (""),
+        this.classMode ? (h("img", { class: "overlay-img", src: getAssetPath(`./assets/play-button-disabled-overlay.png`) })) : (""),
+        !this.classMode && this.paused ? (h("img", { class: "overlay-img", onClick: () => this.playButtonAction(), src: getAssetPath(`./assets/play-button-overlay.png`) })) : (""),
         this.isBusy ? (h("div", { class: "loading-container" },
           h("div", { class: "uil-ring-css" },
             h("div", null),
@@ -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 }))) : ""));
   }
@@ -426,6 +428,7 @@ export class SparkleAnimationPlayer {
   static get styleUrls() { return {
     "$": ["sparkle-animation-player.css"]
   }; }
+  static get assetsDirs() { return ["assets"]; }
   static get properties() { return {
     "src": {
       "type": "string",

package/dist/collection/components/sparkle-course-root/sparkle-course-root.js

@@ -100,6 +100,18 @@ export class SparkleCourseRoot {
     return (h("a", { slot: "logo", href: "https://girlsinclearning.com/", target: "_blank" },
       h("img", { class: "girls-inc-logo", src: "/assets/img/logo-primary.png" })));
   }
+  getFirstLessonUrl() {
+    if (this.tocData) {
+      let firstModule = this.tocData.courseModules[0];
+      let firstSession = firstModule.sessions[0];
+      let firstPage = firstSession.pages[0];
+      let url = '/course/' + firstModule.urlName + '/' + firstSession.urlName + '/' + firstPage.urlName;
+      return url;
+    }
+    else {
+      return '/home';
+    }
+  }
   render() {
     const layout = {
       'Layout': true,
@@ -109,6 +121,8 @@ export class SparkleCourseRoot {
       h("stencil-router", { class: layout },
         h("stencil-route", { style: { display: 'none' }, routeRender: this.setHistory }),
         h("stencil-route-switch", { scrollTopOffset: 0 },
+          h("stencil-route", { url: "/", exact: true },
+            h("stencil-router-redirect", { url: this.getFirstLessonUrl() })),
           h("stencil-route", { url: "/unauthorized", routeRender: props => [
               this.renderHeaderAndMenu(),
               h("sparkle-unauthorized", null)

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%;
 }