@sparkle-learning/core 0.0.24 → 0.0.27

package/dist/sparkle-core/p-82d95fcd.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,a as s,d as e}from"./p-d63406d8.js";class a{constructor(){this.pItems={}}fromSrt(t,i){var s=!!i;(t=(t=t.replace(/\r/g,"")).split(/(\d+)\n(\d{2}:\d{2}:\d{2},\d{3}) --> (\d{2}:\d{2}:\d{2},\d{3})/g)).shift();for(var e={},a=0;a<t.length;a+=4)e[s?this.timeS(t[a+1].trim()):t[a+1].trim()]=t[a+3].trim();return e}toSrt(t){if(!(t instanceof Array))return"";for(var i="",s=0;s<t.length;s++){var e=t[s];isNaN(e.startTime)||isNaN(e.endTime)||(e.startTime=this.msTime(parseInt(e.startTime,10)),e.endTime=this.msTime(parseInt(e.endTime,10))),i+=e.id+"\r\n",i+=e.startTime+" --\x3e "+e.endTime+"\r\n",i+=e.text.replace("\n","\r\n")+"\r\n\r\n"}return i}timeS(t){var i=/(\d+):(\d{2}):(\d{2}),(\d{3})/.exec(t);if(null===i)return 0;for(var s=1;s<5;s++)i[s]=parseInt(i[s],10).toString(),isNaN(parseInt(i[s],10))&&(i[s]="0");return 3600*parseInt(i[1],10)+60*parseInt(i[2],10)+parseInt(i[3],10)+Math.floor(parseInt(i[4],10)/1e3)}msTime(t){var i=[36e5,6e4,1e3],s=[];for(var e in i){var a=(t/i[e]>>0).toString();a.length<2&&(a="0"+a),t%=i[e],s.push(a)}var n=t.toString();if(n.length<3)for(let t=0;t<=3-n.length;t++)n="0"+n;return s.join(":")+","+n}}const n=class{constructor(i){t(this,i),this.showCaption=!1,this.paused=!0,this.dataLoaded=!1,this.currentProgressWidth=0,this.captionText="",this.firstFramePath="",this.isBusy=!1,this.animationVideoProgress="0",this.captionData={}}closedCaptionChange(t){this.showCaption=!this.showCaption}componentWillLoad(){this.classMode=this.initialClassMode;const t=document.createElement("script");this.firstFramePath=this.src.replace(".js",".png"),t.src=this.src,document.body.appendChild(t),this.readTextFile(this.src.replace(".js",".srt")),this.rergisterSoundControls()}readTextFile(t){let i=this;var s=new XMLHttpRequest;s.open("GET",t,!1),s.onreadystatechange=function(){if(4===s.readyState&&(200===s.status||0==s.status)){var t=s.responseText,e=new a;i.captionData=e.fromSrt(t,!0)}},s.send(null)}isScriptLoaded(t){for(var i=document.getElementsByTagName("script"),s=i.length;s--;)if(i[s].getAttribute("src")==t)return!0;return!1}rergisterSoundControls(){window.playSound=t=>(this.sound&&this.sound.stop(),this.sound=createjs.Sound.play(t,{interrupt:createjs.Sound.INTERRUPT_EARLY,loop:0,volume:1}),this.sound),window.resetToStart=()=>{console.log("reset"),this.rewindAnimationToStart()}}startLoading(){this.isBusy=!0,this.paused=!1}doneLoading(){this.isBusy=!1,this.dataLoaded=!0,this.paused=!1}handleFileLoad(t){var i=this.comp.getImages();t&&"image"==t.item.type&&(i[t.item.id]=t.result)}handleQueueProgress(t){return t=>{this.animationVideoProgress=t.loaded?(100*t.loaded).toFixed(0):"0",1==t.loaded&&this.doneLoading()}}handleComplete(t){for(var i=this.comp.getSpriteSheet(),s=t.target,e=this.library.ssMetadata,a=0;a<e.length;a++)i[e[a].name]=new createjs.SpriteSheet({images:[s.getResult(e[a].name)],frames:e[a].frames});var n=this.src.substring(this.src.lastIndexOf("/")+1,this.src.lastIndexOf("."));this.exportRoot=new this.library[n],this.stage=new this.library.Stage(this.canvas),this.makeResponsive(!0,"both",!1,1),AdobeAn.compositionLoaded(this.library.properties.id),this.stage.addChild(this.exportRoot),createjs.Ticker.framerate=this.library.properties.fps,createjs.Ticker.paused=!1,createjs.Ticker.addEventListener("tick",this.stage),createjs.Ticker.addEventListener("tick",(t=>{this.tickHandler(t)})),console.log(createjs.Ticker)}loadAnimation(){this.startLoading(),createjs.Sound.initializeDefaultPlugins()&&(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%",console.log(this.canvas.offsetWidth),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(!1),this.loader.setMaxConnections(3),this.loader.maintainScriptOrder=!0,this.loader.installPlugin(createjs.Sound),this.loader.addEventListener("complete",(t=>{this.handleComplete(t)})),this.loader.addEventListener("fileload",(t=>{this.handleFileLoad(t)})),this.loader.addEventListener("progress",this.handleQueueProgress(this)),this.loader.loadManifest(this.library.properties.manifest,!0,this.src.substring(0,this.src.lastIndexOf("/")+1)))}playButtonAction(){this.dataLoaded?this.playPauseAnimation():this.loadAnimation()}playPauseAnimation(){createjs.Ticker.paused?this.playAnimation():this.pauseAnimation()}async playAnimation(){if(null!=this.loader&&this.loader.close(),createjs&&createjs.Ticker){let t=!1,i=this.sound;i&&(i.paused=t),createjs.Ticker.paused=t,createjs.Ticker.addEventListener("tick",this.stage),this.paused=t}}async pauseAnimation(){if(null!=this.loader&&this.loader.close(),createjs&&createjs.Ticker){let t=!0,i=this.sound;i&&(i.paused=t),createjs.Ticker.paused=t,createjs.Ticker.removeEventListener("tick",this.stage),this.paused=t}}disconnectedCallback(){this.pauseAnimation(),createjs.Sound.removeAllSounds()}async classRoomModeChanged(t){this.classMode=t}async destroyAnimation(){this.pauseAnimation()}makeResponsive(t,i,s,e){window.addEventListener("resize",(()=>this.resizeCanvas(t,i,s,e))),this.resizeCanvas(t,i,s,e)}resizeCanvas(t,i,s,e){var a,n,o=1,r=this.library.properties.width,h=this.library.properties.height,l=window.innerWidth,c=window.innerHeight,d=window.devicePixelRatio||1,p=l/r,u=c/h,v=1;t&&("width"==i&&a==l||"height"==i&&n==c?v=o:s?1==e?v=Math.min(p,u):2==e&&(v=Math.max(p,u)):(l<r||c<h)&&(v=Math.min(p,u)));var g=this.el.querySelector(".canvas-container");this.canvas.width=r*d*v,this.canvas.height=h*d*v,this.canvas.style.width="100%",this.canvas.style.height=this.canvas.offsetWidth+"px",g.style.height=this.canvas.offsetWidth+"px",this.stage.scaleX=d*v,this.stage.scaleY=d*v,a=l,n=c,o=v,this.sizeOfCanvas=this.canvas.offsetWidth;var m=this.el.querySelector(".progressBar");this.sizeofProgressBar=m.offsetWidth,this.stage.tickOnUpdate=!1,this.stage.update(),this.stage.tickOnUpdate=!0}tickHandler(t){t.paused||(this.timeline=this.stage.children[0].timeline,this.captionData[Math.floor(this.timeline.position/this.library.properties.fps)]&&(this.captionText=this.captionData[Math.floor(this.timeline.position/this.library.properties.fps)]),this.timeline.position%10==0&&(this.currentProgressWidth=parseFloat((this.timeline.position/this.timeline.duration*this.sizeofProgressBar).toFixed(0))))}rewindAnimationTo(t){let i=this.sound;i&&(i.paused=!0);let s=this.stage.children[0],e=s.timeline;t<0&&(t=0),t>e.duration&&(t=e.duration-10),this.paused?(s.gotoAndStop(t),this.stage.update(),i&&!i.getPaused()&&(createjs.Ticker.paused=!0)):(s.gotoAndPlay(t),createjs.Ticker.paused=!1)}rewindAnimationToStart(){this.paused=!0,this.rewindAnimationTo(0)}rewindAnimation(t){t.stopPropagation();let i=Math.round(t.offsetX/this.sizeofProgressBar*this.stage.children[0].timeline.duration);this.rewindAnimationTo(i)}rewind5Sec(){this.rewindAnimationTo(this.stage.children[0].timeline.position-5*this.library.properties.fps)}fastForward5Sec(){this.rewindAnimationTo(this.stage.children[0].timeline.position+5*this.library.properties.fps)}muteVolume(){let t=this.sound;t&&(t.volume=0)}downVolume(){let t=this.sound;t&&t._getVolume()>.9&&(t.volume=t._getVolume()-.1)}upVolume(){let t=this.sound;t&&t._getVolume()<1&&(t.volume=t._getVolume()+.1)}render(){return i("div",{class:"cavase-main-container"},i("div",{class:"canvas-container",id:"canvas-container"},this.classMode?"":i("div",null,i("canvas",{class:"video-canvas",onClick:()=>this.playButtonAction()}),this.showCaption?i("div",{class:"caption"},this.captionText):""),this.dataLoaded?"":i("img",{class:"frame-img",src:this.firstFramePath}),this.classMode?i("img",{class:"overlay-img",src:s("./assets/play-button-disabled-overlay.png")}):"",!this.classMode&&this.paused?i("img",{class:"overlay-img",onClick:()=>this.playButtonAction(),src:s("./assets/play-button-overlay.png")}):"",this.isBusy?i("div",{class:"loading-container"},i("div",{class:"uil-ring-css"},i("div",null),i("a",null,"Loading ",this.animationVideoProgress,"%"))):""),this.dataLoaded?i("div",{class:"navControls"},i("div",{class:"progressBar",onClick:t=>this.rewindAnimation(t)},i("div",{class:"currentProgress",style:{width:this.currentProgressWidth+"px"}})),i("div",{class:"button-panel"},i("ion-button",{size:"small",color:"transperant",onClick:()=>this.rewind5Sec()}," ",i("ion-icon",{name:"play-back-outline"})," "),i("ion-button",{size:"small",color:"transperant",onClick:()=>this.playButtonAction()}," ",i("ion-icon",this.paused?{name:"pause-outline"}:{name:"play-outline"})),i("ion-button",{size:"small",color:"transperant",onClick:()=>this.fastForward5Sec()}," ",i("ion-icon",{name:"play-forward-outline"})))):"",this.dataLoaded&&this.captionText?i("div",{class:"closed-caption"},i("ion-item",{lines:"none"},i("ion-label",null,"Closed Caption"),i("ion-toggle",{slot:"end",color:"primary",checked:this.showCaption}))):"")}static get assetsDirs(){return["assets"]}get el(){return e(this)}};n.style='.video-canvas{position:absolute;display:block;background-color:#f5f5f5;width:auto}.closed-caption{justify-content:flex-end;width:100%;display:flex}sparkle-animation-player{width:100%;margin:0 auto}.caption{position:absolute;bottom:0px;color:white;text-align:center;width:100%;text-shadow:1px 1px 2px #e50539}.canvas-container{width:680px;height:680px;background-color:#f5f5f5;border-radius:10px;position:relative}.frame-img{position:absolute;display:block;max-width:100%;width:100%;height:auto}.overlay-img{position:absolute;z-index:9999;top:0px;display:block;max-width:100%;width:100%;height:auto}.button-panel{display:flex;justify-content:center}ion-icon{color:var(--ion-color-primary)}.navControls{width:680px;background:transparent;border-radius:10px;position:relative;padding-top:15px;display:flex;flex-direction:column;align-items:center}.navControls .progressBar{flex:100%;border-radius:20px;position:relative;left:0;right:0;height:4px;background-color:rgba(205, 205, 205, 0.7);width:100%}.navControls .progressBar .currentProgress{border-radius:20px;position:absolute;height:25px;background-color:var(--ion-color-primary);transition:width 0.5s;width:100%}.navControls .progressBar .currentProgress:before{position:absolute;top:50%;right:4px;content:" ";display:block;width:12px;height:12px;margin-top:-10px;background:#e5053a;border-radius:10px;border:4px solid #d9d4d4;z-index:10}#dom_overlay_container{pointer-events:none;overflow:hidden;position:absolute;left:0px;top:0px;display:block}.cavase-main-container{width:100%;display:flex;flex-wrap:wrap;justify-content:center;padding:15px;background-position:center;background-size:cover;background-repeat:no-repeat}.loading-container{height:100%;display:flex;justify-content:center;align-items:center}.uil-ring-css{position:absolute}ion-button{--ion-color-base:transparent;--ion-color-contrast:var(--ion-color-primary);--box-shadow:none !important}@media screen and (min-width: 760px){.navControls{flex-direction:row}.navControls .progressBar{height:24px;flex:75%;width:75%}.button-panel{flex:25%;width:25%}}';export{n as sparkle_animation_player}