@sparkle-learning/core 0.0.27 → 0.0.30

package/dist/collection/collection-manifest.json

@@ -21,6 +21,7 @@
     "./components/mini-apps/sparkle-mood/sparkle-mood.js",
     "./components/modal-image/modal-image.js",
     "./components/sparkle-animation-player/sparkle-animation-player.js",
+    "./components/sparkle-character-intro/sparkle-character-intro.js",
     "./components/sparkle-compass/sparkle-compass.js",
     "./components/sparkle-compass/sparkle-compass-post/sparkle-compass-post.js",
     "./components/sparkle-course-root/sparkle-course-root.js",
@@ -48,13 +49,15 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.3.0",
-    "typescriptVersion": "4.0.5"
+    "version": "2.15.0",
+    "typescriptVersion": "4.5.4"
   },
   "collections": [
     {
       "name": "@ionic/core",
       "tags": [
+        "ion-accordion",
+        "ion-accordion-group",
         "ion-action-sheet",
         "ion-alert",
         "ion-app",
@@ -62,6 +65,8 @@
         "ion-back-button",
         "ion-backdrop",
         "ion-badge",
+        "ion-breadcrumb",
+        "ion-breadcrumbs",
         "ion-button",
         "ion-buttons",
         "ion-card",
@@ -103,6 +108,8 @@
         "ion-note",
         "ion-picker",
         "ion-picker-column",
+        "ion-picker-column-internal",
+        "ion-picker-internal",
         "ion-popover",
         "ion-progress-bar",
         "ion-radio",

package/dist/collection/components/layout/page/page.js

@@ -152,6 +152,7 @@ export class SparklePage {
       type: 'radio',
       label: item.CourseName,
       value: item.CourseClassId,
+      //checked: defaultCourseClassId > 0 ? item.CourseClassId == defaultCourseClassId : index == 0
     }));
     const alert = await alertController.create({
       header: 'Classes',

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

@@ -1,29 +1,35 @@
-import { Component, State, Prop, Method, Element, getAssetPath, Listen, h } from "@stencil/core";
-import { CaptionParser } from "./caption-parser";
+import { Component, State, Prop, Method, Element, getAssetPath, Listen, h } from '@stencil/core';
+import { get } from '../../services/core/localstorage.service';
+import { SparkleGlobal } from '../../util';
+import { CaptionParser } from './caption-parser';
 export class SparkleAnimationPlayer {
   constructor() {
     this.showCaption = false;
     this.paused = true;
     this.dataLoaded = false;
     this.currentProgressWidth = 0;
-    this.captionText = "";
-    this.firstFramePath = "";
+    this.captionText = '';
+    this.firstFramePath = '';
     this.isBusy = false;
-    this.animationVideoProgress = "0";
+    this.animationVideoProgress = '0';
     this.captionData = {};
   }
   closedCaptionChange(event) {
     this.showCaption = !this.showCaption;
   }
+  onClassRoomModeChanged(event) {
+    this.classMode = event.detail;
+  }
   componentWillLoad() {
     // if (!this.isScriptLoaded(this.src)) {
-    this.classMode = this.initialClassMode;
-    const script = document.createElement("script");
-    this.firstFramePath = this.src.replace(".js", ".png");
+    this.classMode = get(SparkleGlobal.LOCALSTORAGE_CLASSROOM_MODE);
+    //this.classMode = this.initialClassMode;
+    const script = document.createElement('script');
+    this.firstFramePath = this.src.replace('.js', '.png');
     script.src = this.src;
     //script.async = true;
     document.body.appendChild(script);
-    this.readTextFile(this.src.replace(".js", ".srt"));
+    this.readTextFile(this.src.replace('.js', '.srt'));
     this.rergisterSoundControls();
     // }
     // else {
@@ -33,7 +39,7 @@ export class SparkleAnimationPlayer {
   readTextFile(fileName) {
     let that = this;
     var rawFile = new XMLHttpRequest();
-    rawFile.open("GET", fileName, false);
+    rawFile.open('GET', fileName, false);
     rawFile.onreadystatechange = function () {
       if (rawFile.readyState === 4) {
         if (rawFile.status === 200 || rawFile.status == 0) {
@@ -55,15 +61,15 @@ export class SparkleAnimationPlayer {
     return false;
   }
   rergisterSoundControls() {
-    window["playSound"] = (id, loop) => {
+    window['playSound'] = (id, loop) => {
       if (this.sound) {
         this.sound.stop();
       }
       this.sound = createjs.Sound.play(id, { interrupt: createjs.Sound.INTERRUPT_EARLY, loop: 0, volume: 1 });
       return this.sound;
     };
-    window["resetToStart"] = () => {
-      console.log("reset");
+    window['resetToStart'] = () => {
+      console.log('reset');
       this.rewindAnimationToStart();
     };
   }
@@ -78,15 +84,13 @@ export class SparkleAnimationPlayer {
   }
   handleFileLoad(evt) {
     var images = this.comp.getImages();
-    if (evt && (evt.item.type == "image")) {
+    if (evt && evt.item.type == 'image') {
       images[evt.item.id] = evt.result;
     }
   }
   handleQueueProgress(that) {
-    return (progress) => {
-      this.animationVideoProgress = progress.loaded
-        ? (progress.loaded * 100).toFixed(0)
-        : "0";
+    return progress => {
+      this.animationVideoProgress = progress.loaded ? (progress.loaded * 100).toFixed(0) : '0';
       if (progress.loaded == 1) {
         this.doneLoading();
       }
@@ -98,18 +102,20 @@ export class SparkleAnimationPlayer {
     //var lib = this.comp.getLibrary();
     var ssMetadata = this.library.ssMetadata;
     for (var i = 0; i < ssMetadata.length; i++) {
-      ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames });
+      ss[ssMetadata[i].name] = new createjs.SpriteSheet({ images: [queue.getResult(ssMetadata[i].name)], frames: ssMetadata[i].frames });
     }
     var jsFileName = this.src.substring(this.src.lastIndexOf('/') + 1, this.src.lastIndexOf('.'));
-    this.exportRoot = new this.library[jsFileName];
+    this.exportRoot = new this.library[jsFileName]();
     this.stage = new this.library.Stage(this.canvas);
     this.makeResponsive(true, 'both', false, 1);
     AdobeAn.compositionLoaded(this.library.properties.id);
     this.stage.addChild(this.exportRoot);
     createjs.Ticker.framerate = this.library.properties.fps;
     createjs.Ticker.paused = false;
-    createjs.Ticker.addEventListener("tick", this.stage);
-    createjs.Ticker.addEventListener("tick", (evt) => { this.tickHandler(evt); });
+    createjs.Ticker.addEventListener('tick', this.stage);
+    createjs.Ticker.addEventListener('tick', evt => {
+      this.tickHandler(evt);
+    });
     console.log(createjs.Ticker);
   }
   loadAnimation() {
@@ -117,23 +123,27 @@ export class SparkleAnimationPlayer {
     if (!createjs.Sound.initializeDefaultPlugins()) {
       return;
     }
-    this.canvas = this.el.querySelector(".video-canvas");
-    this.anim_container = this.el.querySelector(".canvas-container");
+    this.canvas = this.el.querySelector('.video-canvas');
+    this.anim_container = this.el.querySelector('.canvas-container');
     this.comp = AdobeAn.getComposition(this.composition);
-    this.canvas.style.width = "100%";
+    this.canvas.style.width = '100%';
     console.log(this.canvas.offsetWidth);
-    this.canvas.style.height = this.canvas.offsetWidth + "px";
-    this.anim_container.style.height = this.canvas.offsetWidth + "px";
+    this.canvas.style.height = this.canvas.offsetWidth + 'px';
+    this.anim_container.style.height = this.canvas.offsetWidth + 'px';
     this.library = this.comp.getLibrary();
     this.loader = new createjs.LoadQueue(false);
     this.loader.setMaxConnections(3);
     this.loader.maintainScriptOrder = true;
     this.loader.installPlugin(createjs.Sound);
-    this.loader.addEventListener("complete", (evt) => { this.handleComplete(evt); });
-    this.loader.addEventListener("fileload", (evt) => { this.handleFileLoad(evt); });
-    this.loader.addEventListener("progress", this.handleQueueProgress(this));
+    this.loader.addEventListener('complete', evt => {
+      this.handleComplete(evt);
+    });
+    this.loader.addEventListener('fileload', evt => {
+      this.handleFileLoad(evt);
+    });
+    this.loader.addEventListener('progress', this.handleQueueProgress(this));
     //TODO :can't figure out https://github.com/CreateJS/SoundJS/issues/283
-    this.loader.loadManifest(this.library.properties.manifest, true, this.src.substring(0, this.src.lastIndexOf("/") + 1));
+    this.loader.loadManifest(this.library.properties.manifest, true, this.src.substring(0, this.src.lastIndexOf('/') + 1));
   }
   playButtonAction() {
     if (!this.dataLoaded) {
@@ -163,7 +173,7 @@ export class SparkleAnimationPlayer {
         st.paused = newState;
       }
       createjs.Ticker.paused = newState;
-      createjs.Ticker.addEventListener("tick", this.stage);
+      createjs.Ticker.addEventListener('tick', this.stage);
       this.paused = newState;
       // let stage = this.stage.children[0];
       // stage.gotoAndStop(0);
@@ -181,7 +191,7 @@ export class SparkleAnimationPlayer {
         st.paused = newState;
       }
       createjs.Ticker.paused = newState;
-      createjs.Ticker.removeEventListener("tick", this.stage);
+      createjs.Ticker.removeEventListener('tick', this.stage);
       this.paused = newState;
     }
   }
@@ -239,16 +249,16 @@ export class SparkleAnimationPlayer {
         sRatio = Math.max(xRatio, yRatio);
       }
     }
-    var anim_container = this.el.querySelector(".canvas-container");
+    var anim_container = this.el.querySelector('.canvas-container');
     // this.canvas.width = w * pRatio * sRatio;
     // this.canvas.height = h * pRatio * sRatio;
     // this.canvas.style.width = this.dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
     // this.canvas.style.height = anim_container.style.height = this.dom_overlay_container.style.height = h * sRatio + 'px';
     this.canvas.width = w * pRatio * sRatio;
     this.canvas.height = h * pRatio * sRatio;
-    this.canvas.style.width = "100%";
-    this.canvas.style.height = this.canvas.offsetWidth + "px";
-    anim_container.style.height = this.canvas.offsetWidth + "px";
+    this.canvas.style.width = '100%';
+    this.canvas.style.height = this.canvas.offsetWidth + 'px';
+    anim_container.style.height = this.canvas.offsetWidth + 'px';
     this.stage.scaleX = pRatio * sRatio;
     this.stage.scaleY = pRatio * sRatio;
     lastW = iw;
@@ -256,7 +266,7 @@ export class SparkleAnimationPlayer {
     lastS = sRatio;
     var newWidth = this.canvas.offsetWidth;
     this.sizeOfCanvas = newWidth;
-    var progressBar = this.el.querySelector(".progressBar");
+    var progressBar = this.el.querySelector('.progressBar');
     this.sizeofProgressBar = progressBar.offsetWidth;
     this.stage.tickOnUpdate = false;
     this.stage.update();
@@ -265,14 +275,12 @@ export class SparkleAnimationPlayer {
   tickHandler(event) {
     if (!event.paused) {
       let stage = this.stage.children[0];
-      this.timeline = stage["timeline"];
+      this.timeline = stage['timeline'];
       if (this.captionData[Math.floor(this.timeline.position / this.library.properties.fps)]) {
         this.captionText = this.captionData[Math.floor(this.timeline.position / this.library.properties.fps)];
       }
       if (this.timeline.position % 10 == 0) {
-        this.currentProgressWidth = parseFloat((this.timeline.position /
-          this.timeline.duration *
-          this.sizeofProgressBar).toFixed(0));
+        this.currentProgressWidth = parseFloat(((this.timeline.position / this.timeline.duration) * this.sizeofProgressBar).toFixed(0));
       }
     }
   }
@@ -282,7 +290,7 @@ export class SparkleAnimationPlayer {
       st.paused = true;
     }
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     if (newPosition < 0) {
       newPosition = 0;
     }
@@ -308,7 +316,7 @@ export class SparkleAnimationPlayer {
   rewindAnimationToStart() {
     this.paused = true;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = 0;
     // var soundPosition = this.sound.position + 5000;
     // console.log("video", newPosition / 1000);
@@ -337,8 +345,8 @@ export class SparkleAnimationPlayer {
   rewindAnimation(event) {
     event.stopPropagation();
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
-    let newPosition = Math.round(event.offsetX / this.sizeofProgressBar * timeline.duration);
+    let timeline = stage['timeline'];
+    let newPosition = Math.round((event.offsetX / this.sizeofProgressBar) * timeline.duration);
     // var soundPosition = this.sound.position + 5000;
     // console.log("video", newPosition / 1000);
     // console.log("sound", soundPosition / 1000);
@@ -347,7 +355,7 @@ export class SparkleAnimationPlayer {
   rewind5Sec() {
     let fps = this.library.properties.fps;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = timeline.position - fps * 5;
     //var soundPosition = this.sound.position - 5000;
     this.rewindAnimationTo(newPosition);
@@ -355,7 +363,7 @@ export class SparkleAnimationPlayer {
   fastForward5Sec() {
     let fps = this.library.properties.fps;
     let stage = this.stage.children[0];
-    let timeline = stage["timeline"];
+    let timeline = stage['timeline'];
     let newPosition = timeline.position + fps * 5;
     // var soundPosition = this.sound.position + 5000;
     this.rewindAnimationTo(newPosition);
@@ -387,39 +395,37 @@ export class SparkleAnimationPlayer {
       h("div", { class: "canvas-container", id: "canvas-container" },
         !this.classMode ? (h("div", null,
           h("canvas", { class: "video-canvas", onClick: () => this.playButtonAction() }),
-          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: 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.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: 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),
             h("a", null,
               "Loading ",
               this.animationVideoProgress,
-              "%")))) : ("")),
+              "%")))) : ('')),
       this.dataLoaded ? (h("div", { class: "navControls" },
-        h("div", { class: "progressBar", onClick: (ev) => this.rewindAnimation(ev) },
-          h("div", { class: "currentProgress", style: { width: this.currentProgressWidth + "px" } })),
+        h("div", { class: "progressBar", onClick: ev => this.rewindAnimation(ev) },
+          h("div", { class: "currentProgress", style: { width: this.currentProgressWidth + 'px' } })),
         h("div", { class: "button-panel" },
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.rewind5Sec() },
-            " ",
+            ' ',
             h("ion-icon", { name: "play-back-outline" }),
-            " "),
+            ' '),
           h("ion-button", { size: "small", color: "transperant", onClick: () => this.playButtonAction() },
-            " ",
+            ' ',
             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", { name: "play-forward-outline" }))))) : (""),
-      (this.dataLoaded && this.captionText) ?
-        h("div", { class: "closed-caption" },
-          h("ion-item", { lines: "none" },
-            h("ion-label", null, "Closed Caption"),
-            h("ion-toggle", { slot: "end", color: "primary", checked: this.showCaption }))) : ""));
+            ' ',
+            h("ion-icon", { name: "play-forward-outline" }))))) : (''),
+      this.dataLoaded && this.captionText ? (h("div", { class: "closed-caption" },
+        h("ion-item", { lines: "none" },
+          h("ion-label", null, "Closed Caption"),
+          h("ion-toggle", { slot: "end", color: "primary", checked: this.showCaption })))) : ('')));
   }
   static get is() { return "sparkle-animation-player"; }
   static get originalStyleUrls() { return {
@@ -569,5 +575,11 @@ export class SparkleAnimationPlayer {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "classRoomModeChanged",
+      "method": "onClassRoomModeChanged",
+      "target": "body",
+      "capture": false,
+      "passive": false
     }]; }
 }

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.css

@@ -0,0 +1,67 @@
+sparkle-character-intro {
+  --sparkle-character-background-color: #e7e7e7;
+}
+sparkle-character-intro .character-phrase-block {
+  display: flex;
+  width: 100%;
+  min-height: 200px;
+  align-items: center;
+  padding: 20px;
+}
+sparkle-character-intro .character-phrase-block.right {
+  justify-content: flex-end;
+}
+sparkle-character-intro .character-phrase-block.left {
+  justify-content: flex-start;
+}
+sparkle-character-intro .character-phrase-block.left .character-box {
+  order: 2;
+}
+sparkle-character-intro .character-phrase-block.left .character-image-block {
+  order: 1;
+}
+sparkle-character-intro .character-box {
+  min-width: 300px;
+  border-radius: 15px;
+  background: var(--sparkle-character-background-color);
+  color: var(--text-color);
+  padding: 20px;
+  text-align: center;
+  position: relative;
+  box-shadow: 0px 1px 3px rgba(2, 8, 20, 0.06), 0px 1px 2px rgba(2, 8, 20, 0.04);
+}
+sparkle-character-intro .character-box.right:before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  border-left: 15px solid var(--sparkle-character-background-color);
+  border-right: 15px solid transparent;
+  border-top: 15px solid var(--sparkle-character-background-color);
+  border-bottom: 15px solid transparent;
+  right: -16px;
+  top: 0px;
+}
+sparkle-character-intro .character-box.left:before {
+  content: "";
+  width: 0px;
+  height: 0px;
+  position: absolute;
+  border-left: 15px solid transparent;
+  border-right: 15px solid var(--sparkle-character-background-color);
+  border-top: 15px solid var(--sparkle-character-background-color);
+  border-bottom: 15px solid transparent;
+  left: -16px;
+  top: 0px;
+}
+sparkle-character-intro img {
+  max-width: 100%;
+  border: 0;
+}
+sparkle-character-intro .character-image-block {
+  float: left;
+  width: 20%;
+}
+sparkle-character-intro .character-image-block.right {
+  transform: rotateY(180deg);
+}

package/dist/collection/components/sparkle-character-intro/sparkle-character-intro.js

@@ -0,0 +1,64 @@
+import { Component, Element, Prop, getAssetPath, h } from '@stencil/core';
+export class SparkleCharacterIntro {
+  constructor() {
+    this.character = 'jen';
+    this.position = 'right';
+  }
+  componentDidLoad() {
+    console.log(this.character);
+  }
+  render() {
+    return (h("div", { class: `character-phrase-block ${this.position}` },
+      h("div", { class: `character-box ${this.position}` },
+        h("slot", null)),
+      h("div", { class: `character-image-block ${this.position}` },
+        h("img", { class: "image-animation", src: getAssetPath('./assets/characters/' + this.character + '.png') }))));
+  }
+  static get is() { return "sparkle-character-intro"; }
+  static get originalStyleUrls() { return {
+    "$": ["sparkle-character-intro.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["sparkle-character-intro.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+  static get properties() { return {
+    "character": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "character",
+      "reflect": false,
+      "defaultValue": "'jen'"
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'left' | 'right'",
+        "resolved": "\"left\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "'right'"
+    }
+  }; }
+  static get elementRef() { return "el"; }
+}