From 6416c8de0c7ed2df6a131c3f5313ad64e474b855 Mon Sep 17 00:00:00 2001 From: Aidan Pine Date: Mon, 18 Mar 2024 17:41:55 -0700 Subject: [PATCH] fix(assets)!: get rid of useAssetsFolder boolean and replace with imageAssetsFolder string BREAKING CHANGE: useAssetsFolder is no longer valid. The equivalent is imageAssetsFolder='assets/' which is the default. --- packages/studio-web/package.json | 4 +-- .../studio-web/src/app/demo/demo.component.ts | 4 +-- packages/studio-web/src/assets/bundle.js | 2 +- packages/web-component/package.json | 2 +- packages/web-component/src/components.d.ts | 16 +++++------ .../read-along-component/read-along.tsx | 15 ++++++---- .../components/read-along-component/readme.md | 28 +++++++++---------- 7 files changed, 37 insertions(+), 34 deletions(-) diff --git a/packages/studio-web/package.json b/packages/studio-web/package.json index 69f54bce..d0fa7629 100644 --- a/packages/studio-web/package.json +++ b/packages/studio-web/package.json @@ -56,6 +56,6 @@ "tslib": "^2.3.0", "zone.js": "^0.11.8" }, - "singleFileBundleVersion": "1.1.0", - "singleFileBundleTimestamp": "2023-10-23+21-05-11" + "singleFileBundleVersion": "1.1.1", + "singleFileBundleTimestamp": "2024-03-18+17-36-42" } diff --git a/packages/studio-web/src/app/demo/demo.component.ts b/packages/studio-web/src/app/demo/demo.component.ts index 61bdfb5c..4f5b6e73 100644 --- a/packages/studio-web/src/app/demo/demo.component.ts +++ b/packages/studio-web/src/app/demo/demo.component.ts @@ -222,7 +222,7 @@ Please host all assets on your server, include the font and package imports defi - + ${this.slots.title} ${this.slots.subtitle} @@ -300,7 +300,7 @@ Please host all assets on your server, include the font and package imports defi - + ${this.slots.title} ${this.slots.subtitle} diff --git a/packages/studio-web/src/assets/bundle.js b/packages/studio-web/src/assets/bundle.js index 2900c90a..45cfc3e7 100644 --- a/packages/studio-web/src/assets/bundle.js +++ b/packages/studio-web/src/assets/bundle.js @@ -20,4 +20,4 @@ * * MIT License */ -function(){var e;HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var t=this;if(!t.ctx||!t.ctx.listener)return t;for(var n=t._howls.length-1;n>=0;n--)t._howls[n].stereo(e);return t},HowlerGlobal.prototype.pos=function(e,t,n){var r=this;return r.ctx&&r.ctx.listener?(t="number"!=typeof t?r._pos[1]:t,n="number"!=typeof n?r._pos[2]:n,"number"!=typeof e?r._pos:(r._pos=[e,t,n],void 0!==r.ctx.listener.positionX?(r.ctx.listener.positionX.setTargetAtTime(r._pos[0],Howler.ctx.currentTime,.1),r.ctx.listener.positionY.setTargetAtTime(r._pos[1],Howler.ctx.currentTime,.1),r.ctx.listener.positionZ.setTargetAtTime(r._pos[2],Howler.ctx.currentTime,.1)):r.ctx.listener.setPosition(r._pos[0],r._pos[1],r._pos[2]),r)):r},HowlerGlobal.prototype.orientation=function(e,t,n,r,o,i){var s=this;if(!s.ctx||!s.ctx.listener)return s;var a=s._orientation;return t="number"!=typeof t?a[1]:t,n="number"!=typeof n?a[2]:n,r="number"!=typeof r?a[3]:r,o="number"!=typeof o?a[4]:o,i="number"!=typeof i?a[5]:i,"number"!=typeof e?a:(s._orientation=[e,t,n,r,o,i],void 0!==s.ctx.listener.forwardX?(s.ctx.listener.forwardX.setTargetAtTime(e,Howler.ctx.currentTime,.1),s.ctx.listener.forwardY.setTargetAtTime(t,Howler.ctx.currentTime,.1),s.ctx.listener.forwardZ.setTargetAtTime(n,Howler.ctx.currentTime,.1),s.ctx.listener.upX.setTargetAtTime(r,Howler.ctx.currentTime,.1),s.ctx.listener.upY.setTargetAtTime(o,Howler.ctx.currentTime,.1),s.ctx.listener.upZ.setTargetAtTime(i,Howler.ctx.currentTime,.1)):s.ctx.listener.setOrientation(e,t,n,r,o,i),s)},Howl.prototype.init=(e=Howl.prototype.init,function(t){var n=this;return n._orientation=t.orientation||[1,0,0],n._stereo=t.stereo||null,n._pos=t.pos||null,n._pannerAttr={coneInnerAngle:void 0!==t.coneInnerAngle?t.coneInnerAngle:360,coneOuterAngle:void 0!==t.coneOuterAngle?t.coneOuterAngle:360,coneOuterGain:void 0!==t.coneOuterGain?t.coneOuterGain:0,distanceModel:void 0!==t.distanceModel?t.distanceModel:"inverse",maxDistance:void 0!==t.maxDistance?t.maxDistance:1e4,panningModel:void 0!==t.panningModel?t.panningModel:"HRTF",refDistance:void 0!==t.refDistance?t.refDistance:1,rolloffFactor:void 0!==t.rolloffFactor?t.rolloffFactor:1},n._onstereo=t.onstereo?[{fn:t.onstereo}]:[],n._onpos=t.onpos?[{fn:t.onpos}]:[],n._onorientation=t.onorientation?[{fn:t.onorientation}]:[],e.call(this,t)}),Howl.prototype.stereo=function(e,n){var r=this;if(!r._webAudio)return r;if("loaded"!==r._state)return r._queue.push({event:"stereo",action:function(){r.stereo(e,n)}}),r;var o=void 0===Howler.ctx.createStereoPanner?"spatial":"stereo";if(void 0===n){if("number"!=typeof e)return r._stereo;r._stereo=e,r._pos=[e,0,0]}for(var i=r._getSoundIds(n),s=0;s{throw e}),0)}const h={closed:!0,next(e){},error(e){if(u.useDeprecatedSynchronousErrorHandling)throw e;d(e)},complete(){}},p=Array.isArray||(e=>e&&"number"==typeof e.length);const _=(()=>{function e(e){return Error.call(this),this.message=e?`${e.length} errors occurred during unsubscription:\n${e.map(((e,t)=>`${t+1}) ${e.toString()}`)).join("\n ")}`:"",this.name="UnsubscriptionError",this.errors=e,this}return e.prototype=Object.create(Error.prototype),e})();class g{constructor(e){this.closed=!1,this._parentOrParents=null,this._subscriptions=null,e&&(this._ctorUnsubscribe=!0,this._unsubscribe=e)}unsubscribe(){let e;if(this.closed)return;let{_parentOrParents:t,_ctorUnsubscribe:n,_unsubscribe:r,_subscriptions:o}=this;if(this.closed=!0,this._parentOrParents=null,this._subscriptions=null,t instanceof g)t.remove(this);else if(null!==t)for(let e=0;ee.concat(t instanceof _?t.errors:t)),[])}g.EMPTY=function(e){return e.closed=!0,e}(new g);const f="function"==typeof Symbol?Symbol("rxSubscriber"):"@@rxSubscriber_"+Math.random();class b extends g{constructor(e,t,n){switch(super(),this.syncErrorValue=null,this.syncErrorThrown=!1,this.syncErrorThrowable=!1,this.isStopped=!1,arguments.length){case 0:this.destination=h;break;case 1:if(!e){this.destination=h;break}if("object"==typeof e){e instanceof b?(this.syncErrorThrowable=e.syncErrorThrowable,this.destination=e,e.add(this)):(this.syncErrorThrowable=!0,this.destination=new y(this,e));break}default:this.syncErrorThrowable=!0,this.destination=new y(this,e,t,n)}}[f](){return this}static create(e,t,n){const r=new b(e,t,n);return r.syncErrorThrowable=!1,r}next(e){this.isStopped||this._next(e)}error(e){this.isStopped||(this.isStopped=!0,this._error(e))}complete(){this.isStopped||(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe())}_next(e){this.destination.next(e)}_error(e){this.destination.error(e),this.unsubscribe()}_complete(){this.destination.complete(),this.unsubscribe()}_unsubscribeAndRecycle(){const{_parentOrParents:e}=this;return this._parentOrParents=null,this.unsubscribe(),this.closed=!1,this.isStopped=!1,this._parentOrParents=e,this}}class y extends b{constructor(e,t,n,r){let o;super(),this._parentSubscriber=e;let i=this;l(t)?o=t:t&&(o=t.next,n=t.error,r=t.complete,t!==h&&(i=Object.create(t),l(i.unsubscribe)&&this.add(i.unsubscribe.bind(i)),i.unsubscribe=this.unsubscribe.bind(this))),this._context=i,this._next=o,this._error=n,this._complete=r}next(e){if(!this.isStopped&&this._next){const{_parentSubscriber:t}=this;u.useDeprecatedSynchronousErrorHandling&&t.syncErrorThrowable?this.__tryOrSetError(t,this._next,e)&&this.unsubscribe():this.__tryOrUnsub(this._next,e)}}error(e){if(!this.isStopped){const{_parentSubscriber:t}=this,{useDeprecatedSynchronousErrorHandling:n}=u;if(this._error)n&&t.syncErrorThrowable?(this.__tryOrSetError(t,this._error,e),this.unsubscribe()):(this.__tryOrUnsub(this._error,e),this.unsubscribe());else if(t.syncErrorThrowable)n?(t.syncErrorValue=e,t.syncErrorThrown=!0):d(e),this.unsubscribe();else{if(this.unsubscribe(),n)throw e;d(e)}}}complete(){if(!this.isStopped){const{_parentSubscriber:e}=this;if(this._complete){const t=()=>this._complete.call(this._context);u.useDeprecatedSynchronousErrorHandling&&e.syncErrorThrowable?(this.__tryOrSetError(e,t),this.unsubscribe()):(this.__tryOrUnsub(t),this.unsubscribe())}else this.unsubscribe()}}__tryOrUnsub(e,t){try{e.call(this._context,t)}catch(e){if(this.unsubscribe(),u.useDeprecatedSynchronousErrorHandling)throw e;d(e)}}__tryOrSetError(e,t,n){if(!u.useDeprecatedSynchronousErrorHandling)throw new Error("bad call");try{t.call(this._context,n)}catch(t){return u.useDeprecatedSynchronousErrorHandling?(e.syncErrorValue=t,e.syncErrorThrown=!0,!0):(d(t),!0)}return!1}_unsubscribe(){const{_parentSubscriber:e}=this;this._context=null,this._parentSubscriber=null,e.unsubscribe()}}const v="function"==typeof Symbol&&Symbol.observable||"@@observable";function w(e){return e}class x{constructor(e){this._isScalar=!1,e&&(this._subscribe=e)}lift(e){const t=new x;return t.source=this,t.operator=e,t}subscribe(e,t,n){const{operator:r}=this,o=function(e,t,n){if(e){if(e instanceof b)return e;if(e[f])return e[f]()}return e||t||n?new b(e,t,n):new b(h)}(e,t,n);if(r?o.add(r.call(o,this.source)):o.add(this.source||u.useDeprecatedSynchronousErrorHandling&&!o.syncErrorThrowable?this._subscribe(o):this._trySubscribe(o)),u.useDeprecatedSynchronousErrorHandling&&o.syncErrorThrowable&&(o.syncErrorThrowable=!1,o.syncErrorThrown))throw o.syncErrorValue;return o}_trySubscribe(e){try{return this._subscribe(e)}catch(t){u.useDeprecatedSynchronousErrorHandling&&(e.syncErrorThrown=!0,e.syncErrorValue=t),!function(e){for(;e;){const{closed:t,destination:n,isStopped:r}=e;if(t||r)return!1;e=n&&n instanceof b?n:null}return!0}(e)?console.warn(t):e.error(t)}}forEach(e,t){return new(t=$(t))(((t,n)=>{let r;r=this.subscribe((t=>{try{e(t)}catch(e){n(e),r&&r.unsubscribe()}}),n,t)}))}_subscribe(e){const{source:t}=this;return t&&t.subscribe(e)}[v](){return this}pipe(...e){return 0===e.length?this:(0===(t=e).length?w:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=$(e))(((e,t)=>{let n;this.subscribe((e=>n=e),(e=>t(e)),(()=>e(n)))}))}}function $(e){if(e||(e=Promise),!e)throw new Error("no Promise impl found");return e}x.create=e=>new x(e);class A{constructor(e,t){this.compare=e,this.keySelector=t}call(e,t){return t.subscribe(new S(e,this.compare,this.keySelector))}}class S extends b{constructor(e,t,n){super(e),this.keySelector=n,this.hasKey=!1,"function"==typeof t&&(this.compare=t)}compare(e,t){return e===t}_next(e){let t;try{const{keySelector:n}=this;t=n?n(e):e}catch(e){return this.destination.error(e)}let n=!1;if(this.hasKey)try{const{compare:e}=this;n=e(this.key,t)}catch(e){return this.destination.error(e)}else this.hasKey=!0;n||(this.key=t,this.destination.next(e))}}const T=(()=>{function e(){return Error.call(this),this.message="object unsubscribed",this.name="ObjectUnsubscribedError",this}return e.prototype=Object.create(Error.prototype),e})();class k extends g{constructor(e,t){super(),this.subject=e,this.subscriber=t,this.closed=!1}unsubscribe(){if(this.closed)return;this.closed=!0;const e=this.subject,t=e.observers;if(this.subject=null,!t||0===t.length||e.isStopped||e.closed)return;const n=t.indexOf(this.subscriber);-1!==n&&t.splice(n,1)}}class E extends b{constructor(e){super(e),this.destination=e}}class I extends x{constructor(){super(),this.observers=[],this.closed=!1,this.isStopped=!1,this.hasError=!1,this.thrownError=null}[f](){return new E(this)}lift(e){const t=new P(this,this);return t.operator=e,t}next(e){if(this.closed)throw new T;if(!this.isStopped){const{observers:t}=this,n=t.length,r=t.slice();for(let t=0;tnew P(e,t);class P extends I{constructor(e,t){super(),this.destination=e,this.source=t}next(e){const{destination:t}=this;t&&t.next&&t.next(e)}error(e){const{destination:t}=this;t&&t.error&&this.destination.error(e)}complete(){const{destination:e}=this;e&&e.complete&&this.destination.complete()}_subscribe(e){const{source:t}=this;return t?this.source.subscribe(e):g.EMPTY}}class O extends I{constructor(e){super(),this._value=e}get value(){return this.getValue()}_subscribe(e){const t=super._subscribe(e);return t&&!t.closed&&e.next(this._value),t}getValue(){if(this.hasError)throw this.thrownError;if(this.closed)throw new T;return this._value}next(e){super.next(this._value=e)}}function L(e){return Array.from(e.querySelectorAll("div[type=page]")).map((e=>{let t=e.querySelector("graphic[url]"),n=e.querySelectorAll("p"),r={id:e.getAttribute("id"),paragraphs:Array.from(n)};return null!==t&&(r.img=t.getAttribute("url")),e.attributes&&(r.attributes=e.attributes),r}))}var R=function(e){var t=this;t.sounds=[],t._sprite=e.sprite,t._reading$=new I,t._tinySprite=Object.keys(e.sprite).map((e=>[t._sprite[e][0],e])),t._tinySprite.pop(),t._percentPlayed=new O("0%"),t.sound=new a.Howl({src:e.src,sprite:e.sprite,rate:e.rate}),requestAnimationFrame(t.step.bind(t))};async function C(e){return new Promise((function(t,n){let r=new XMLHttpRequest;r.open("HEAD",e),r.onload=function(){this.status>=200&&this.status<300?t(!0):t(!1)},r.onerror=function(){t(!1)},r.send()}))}R.prototype={play:function(e){var t=this;t._spriteLeft=t._tinySprite;var n=e;return t.sound.play(n)},pause:function(){return this.sound.pause(),this.sound.id},goBack:function(e,t){var n=this;if(n._spriteLeft=n._tinySprite,n.sound.seek(e)-t>0){e=n.sound.seek(n.sound.seek(e)-t,e);for(var r=n.sound.seek(e),o=0;o=n._spriteLeft[o][0]&&(n._reading$.next(n._spriteLeft[o][1]),n._spriteLeft=n._spriteLeft.slice(o,n._spriteLeft.length))}else{e=n.sound.seek(0,e);n._reading$.next(n._spriteLeft[0][1])}return e},goTo:function(e,t){var n=this;n._spriteLeft=n._tinySprite;e=n.sound.seek(t,e);for(var r=n.sound.seek(e),o=0;o=n._spriteLeft[o][0]&&(n._reading$.next(n._spriteLeft[o][1]),n._spriteLeft=n._spriteLeft.slice(o,n._spriteLeft.length));return e},stop:function(){return this._reading$.next(""),this.sound.stop()},step:function(){for(var e=this,t=0;t0&&1e3*n>=e._spriteLeft[r][0]&&(e._reading$.next(e._spriteLeft[r][1]),e._spriteLeft=e._spriteLeft.slice(r,e._spriteLeft.length));let o=(n/e.sound.duration()*100||0)+"%";e.sounds[t].style.width=o,e.sounds[t].setAttribute("offset",o)}requestAnimationFrame(e.step.bind(e))}};const D={page:"Page",speed:"Playback Speed","re-align":"Re-align with audio","loading-error":'Error: the file "" could not be loaded.',"parse-error":'Error: the file "" could not be parsed.',"alignment-error":"Error: No alignments were found.",loading:"Loading...","line-placeholder":"Type your text here","upload-image":"Upload an image for this page","choose-file":"Choose a file","play-tooltip":"Play/pause audio recording","rewind-tooltip":"Rewind 5 seconds","stop-tooltip":"Stop audio playback","theme-tooltip":"Change theme","full-screen-tooltip":"Full screen mode","translation-tooltip":"Toggle translations","add-translation":"Add a translation, transliteration or gloss"},F={page:"Page",speed:"Vitesse de Lecture","re-align":"Réaligner avec l'audio","loading-error":'Erreur: le fichier "" n\'a pas pu être chargé.',"parse-error":'Erreur: le fichier "" n\'a pas pu être analysé.',"alignment-error":"Erreur: aucun alignement n'a été trouvé.",loading:"Chargement en cours","line-placeholder":"Écrivez votre texte ici","upload-image":"Téléverser charger une image pour cette page","choose-file":"Choisir un fichier","play-tooltip":"Écouter/mettre en pause l'enregistrement","rewind-tooltip":"Reculer de 5 secondes","stop-tooltip":"Arrêter la lecture","theme-tooltip":"Changer de thême visuel","full-screen-tooltip":"Mode plein écran","translation-tooltip":"Afficher ou cacher les traductions","add-translation":"Ajouter une traduction, une translitération ou une glose"},M={page:"Página",speed:"Velocidad de reproducción","re-align":"Re-alinear con el audio","loading-error":'Error: el fichero "" no se pudo cargar.',"parse-error":'Error: el fichero "" no se pudo analizar.',"alignment-error":"Error: No se encontró ningún alineamiento.",loading:"Cargando...","line-placeholder":"Escriba su texto aquí","upload-image":"Cargue una imagen para esta página","choose-file":"Seleccione un fichero","play-tooltip":"Reproducir/pausar grabación de audio","rewind-tooltip":"Rebobine (rewind) 5 segundos","stop-tooltip":"Pare la reproducción de audio","theme-tooltip":"Cambie la paleta de colores","full-screen-tooltip":"Modo pantalla completa","translation-tooltip":"Active o desactive las traducciones","add-translation":"Añada una traducción, transliteración o glosa"},B=class{constructor(e){(0,r.r)(this,e),this.i18nStrings={eng:D,fra:F,spa:M},this.playback_rate=1,this.showGuide=!1,this.hasTextTranslations=!1,this.assetsStatus={AUDIO:0,RAS:0},this.alignment_failed=!1,this.isScrolling=!1,this.scrollTimer=null,this.Guide=()=>(0,r.h)("button",{class:"scroll-guide__container ripple ui-button theme--"+this.theme,onClick:()=>this.hideGuideAndScroll()},(0,r.h)("span",{class:"scroll-guide__text theme--"+this.theme},this.getI18nString("re-align"))),this.Overlay=()=>(0,r.h)("object",{onClick:e=>this.goToSeekFromProgress(e),id:"overlay__object",type:"image/svg+xml",data:this.svgOverlay}),this.RemoveImg=e=>(0,r.h)("button",{"data-cy":"delete-button","aria-label":"Delete",title:"Delete image",onClick:()=>this.deleteImage(e.pageIndex),id:"img-remover",class:"ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"delete")),this.Img=e=>(0,r.h)("div",{class:"image__container page__col__image theme--"+this.theme},(0,r.h)("img",{alt:"image",class:"image",src:e.imgURL})),this.ImgPlaceHolder=e=>(0,r.h)("div",{class:"image__container page__col__image theme--"+this.theme},(0,r.h)("div",{class:"drop-area"},(0,r.h)("form",{class:"my-form"},(0,r.h)("p",{class:"theme--"+this.theme},this.getI18nString("upload-image")),(0,r.h)("input",{type:"file",class:"fileElem",id:"fileElem--"+e.pageID,accept:"image/*",onChange:t=>this.handleFiles(t.target.files[0],e.pageIndex)}),(0,r.h)("label",{class:"button",htmlFor:"fileElem--"+e.pageID},this.getI18nString("choose-file"))))),this.PageCount=e=>(0,r.h)("div",{class:"page__counter color--"+this.theme},this.getI18nString("page")," ",(0,r.h)("span",{"data-cy":"page-count__current"},e.currentPage)," / ",(0,r.h)("span",{"data-cy":"page-count__total"},e.pgCount)),this.ImgContainer=e=>(0,r.h)("div",{class:"image__container"},(0,r.h)("span",{id:"image-container"},"EDIT"===this.mode&&e.pageIndex in this.images&&null!==this.images[e.pageIndex]?(0,r.h)(this.RemoveImg,{pageIndex:e.pageIndex}):null,e.pageIndex in this.images&&null!==this.images[e.pageIndex]?(0,r.h)(this.Img,{imgURL:this.images[e.pageIndex]}):null),"EDIT"!==this.mode||e.pageIndex in this.images&&null!==this.images[e.pageIndex]?null:(0,r.h)(this.ImgPlaceHolder,{pageID:e.pageID,pageIndex:e.pageIndex})),this.Page=e=>(0,r.h)("div",{class:"page page__container page--multi animate-transition theme--"+this.theme+" "+(e.pageData.attributes.class?e.pageData.attributes.class.value:""),id:e.pageData.id},this.parsed_text.length>1?(0,r.h)(this.PageCount,{pgCount:this.parsed_text.length,currentPage:this.parsed_text.indexOf(e.pageData)+1}):null,(0,r.h)(this.ImgContainer,{pageID:e.pageData.id,pageIndex:this.parsed_text.indexOf(e.pageData)}),(0,r.h)("div",{class:"page__col__text paragraph__container theme--"+this.theme},e.pageData.paragraphs.map((e=>(0,r.h)(this.Paragraph,{sentences:Array.from(e.childNodes),attributes:e.attributes}))))),this.Paragraph=e=>(0,r.h)("div",{class:"paragraph sentence__container theme--"+this.theme+" "+(e.attributes.class?e.attributes.class.value:"")},e.sentences.map((e=>e.childNodes.length>0&&(0,r.h)(this.Sentence,{sentenceData:e})))),this.Sentence=e=>{let t=Array.from(e.sentenceData.childNodes),n=e.sentenceData.id;!this.hasTextTranslations&&e.sentenceData.hasAttribute("class")&&(this.hasTextTranslations=/translation/.test(e.sentenceData.getAttribute("class")));let o={};return e.sentenceData.hasAttribute("xml:lang")&&(o.lang=e.sentenceData.getAttribute("xml:lang")),e.sentenceData.hasAttribute("lang")&&(o.lang=e.sentenceData.getAttribute("lang")),(0,r.h)("div",Object.assign({},o,{class:"sentence "+(e.sentenceData.hasAttribute("class")?e.sentenceData.getAttribute("class"):"")}),t.map(((t,n)=>{if("#text"===t.nodeName)return(0,r.h)(this.NonWordText,{text:t.textContent,attributes:t.attributes,id:(e.sentenceData.hasAttribute("id")?e.sentenceData.getAttribute("id"):"P")+"text"+n});if("w"===t.nodeName||"W"===t.nodeName)return(0,r.h)(this.Word,{text:t.textContent,id:t.id,attributes:t.attributes});if(t){let o={};return t.hasAttribute("xml:lang")&&(o.lang=e.sentenceData.getAttribute("xml:lang")),t.hasAttribute("lang")&&(o.lang=e.sentenceData.getAttribute("lang")),(0,r.h)("span",Object.assign({},o,{class:"sentence__text theme--"+this.theme+" "+t.className,id:t.id?t.id:"text_"+n}),t.textContent)}})),(()=>"EDIT"!==this.mode||/translation/.test(e.sentenceData.getAttribute("class"))?null:n in this.translations&&n in this.translations&&null!==this.translations[n]?(0,r.h)("span",{class:"sentence__translation"},(0,r.h)("button",{title:"Remove translation","aria-label":"Remove translation","data-cy":"remove-translation-button",onClick:()=>this.removeLine(e.sentenceData),class:"sentence__translation__button remove"},(0,r.h)("i",{class:"material-icons"},"remove")),(0,r.h)("p",{id:n+"translation","data-cy":"translation-line",class:"sentence__text editable__translation",onInput:e=>{this.updateTranslation(n,e.currentTarget.innerText)},contentEditable:!0,onKeyDown:e=>{"Enter"==e.key&&e.preventDefault()},"data-placeholder":this.getI18nString("line-placeholder")})):(0,r.h)("button",{title:this.getI18nString("add-translation"),"aria-label":"Add translation","data-cy":"add-translation-button",class:"sentence__translation sentence__translation__button",onClick:()=>this.addLine(e.sentenceData)},(0,r.h)("i",{class:"material-icons"},"add")))())},this.NonWordText=e=>{let t={};return e.attributes&&e.attributes["xml:lang"]&&(t.lang=e.attributes["xml:lang"].value),e.attributes&&e.attributes.lang&&(t.lang=e.attributes.lang.value),(0,r.h)("span",Object.assign({},t,{class:"sentence__text theme--"+this.theme,id:e.id}),e.text)},this.Word=e=>{let t={};return e.attributes&&e.attributes["xml:lang"]&&(t.lang=e.attributes["xml:lang"].value),e.attributes&&e.attributes.lang&&(t.lang=e.attributes.lang.value),(0,r.h)("span",Object.assign({},t,{class:"sentence__word theme--"+this.theme+" "+(e&&e.attributes.class?e.attributes.class.value:""),id:e.id,onClick:e=>this.playSprite(e)}),e.text)},this.PlayControl=()=>(0,r.h)("button",{"data-cy":"play-button",disabled:this.hasLoaded<2,"aria-label":"Play",title:this.getI18nString("play-tooltip"),onClick:()=>{this.playing?this.pause():this.play()},class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},this.playing?"pause":"play_arrow")),this.ReplayControl=()=>(0,r.h)("button",{"data-cy":"replay-button",disabled:this.hasLoaded<2,"aria-label":"Rewind",title:this.getI18nString("rewind-tooltip"),onClick:()=>this.goBack(5),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"replay_5")),this.StopControl=()=>(0,r.h)("button",{"data-cy":"stop-button",disabled:this.hasLoaded<2,"aria-label":"Stop",title:this.getI18nString("stop-tooltip"),onClick:()=>this.stop(),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"stop")),this.PlaybackSpeedControl=()=>(0,r.h)("div",null,(0,r.h)("h5",{class:"control-panel__buttons__header color--"+this.theme,id:"speed-slider-label"},this.getI18nString("speed")),(0,r.h)("input",{type:"range",min:100-this.playbackRateRange,max:100+this.playbackRateRange,value:100*this.playback_rate,class:"slider control-panel__control",id:"myRange","aria-labelledby":"speed-slider-label",onInput:e=>{console.log("v",e),this.changePlayback(e)}})),this.StyleControl=()=>(0,r.h)("button",{"aria-label":"Change theme",onClick:()=>this.changeTheme(),title:this.getI18nString("theme-tooltip"),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons-outlined"},"style")),this.FullScreenControl=()=>(0,r.h)("button",{"aria-label":"Full screen mode",onClick:()=>this.toggleFullscreen(),title:this.getI18nString("full-screen-tooltip"),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons","aria-label":"Full screen mode"},this.fullscreen?"fullscreen_exit":"fullscreen")),this.TextTranslationDisplayControl=()=>(0,r.h)("button",{"data-cy":"translation-toggle","aria-label":"Toggle Translation",title:this.getI18nString("translation-tooltip"),onClick:()=>this.toggleTextTranslation(),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons-outlined"},"subtitles")),this.ErrorMessage=e=>(0,r.h)("p",{"data-cy":e.data_cy,class:"alert status-error"},(0,r.h)("span",{class:"material-icons"},"error_outline")," ",e.msg),this.ControlPanel=()=>(0,r.h)("div",{"data-cy":"control-panel",class:"control-panel theme--"+this.theme+" background--"+this.theme},(0,r.h)("div",{class:"control-panel__buttons--left"},(0,r.h)(this.PlayControl,null),(0,r.h)(this.ReplayControl,null),(0,r.h)(this.StopControl,null)),(0,r.h)("div",{class:"control-panel__buttons--center"},(0,r.h)(this.PlaybackSpeedControl,null)),(0,r.h)("div",{class:"control-panel__buttons--right"},this.hasTextTranslations&&(0,r.h)(this.TextTranslationDisplayControl,null),(0,r.h)(this.StyleControl,null),(0,r.h)(this.FullScreenControl,null))),this.href=void 0,this.audio=void 0,this.svgOverlay=void 0,this.theme="light",this.language="eng",this.cssUrl=void 0,this.useAssetsFolder=!0,this.pageScrolling="horizontal",this.mode="VIEW",this.scrollBehaviour="smooth",this.displayTranslation=!0,this.playbackRateRange=15,this.playing=!1,this.fullscreen=!1,this.autoScroll=!0,this.hasLoaded=0,this.images=void 0,this.translations=void 0}handleScrollEvent(){this.isScrolling=!0,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=setTimeout((()=>{this.isScrolling=!1}),125)}wheelHandler(e){if(this.el.shadowRoot.querySelector(".reading")&&(e.path[0].classList.contains("sentence__word")||e.path[0].classList.contains("sentence__container")||e.path[0].classList.contains("sentence"))&&this.autoScroll){let e=this.el.shadowRoot.querySelector(".reading");e&&(this.autoScroll=!this.inPageContentOverflow(e),this.showGuide=!this.autoScroll)}}urlTransform(e){return this.useAssetsFolder&&function(e){return!/^(https?:[/][/]|assets[/]|data:)/.test(e)}(e)&&!e.startsWith("blob")?"assets/"+e:e}buildSprite(e,t){return new R({src:[e],sprite:t,rate:this.playback_rate})}tagToQuery(e){return"#"+(e=(e=e.replace(".","\\.")).replace("#","\\#"))}returnWordClosestTo(e){let t=Object.keys(this.processed_alignment);t.pop();for(let n=1;nthis.processed_alignment[t[n]][0]&&this.processed_alignment[t[n+1]]&&1e3*ethis.autoScroll=!0),100)}goTo(e){void 0===this.play_id&&(this.play(),this.pause()),this.autoScroll=!1,e/=1e3,this.audio_howl_sprites.goTo(this.play_id,e),setTimeout((()=>this.autoScroll=!0),100)}goToSeekAtEl(e){let t=e.currentTarget.id,n=this.processed_alignment[t][0];return this.goTo(n),t}goToSeekFromProgress(e){let t=e.currentTarget.getBoundingClientRect(),n=t.left,r=t.width,o=(e.pageX-n)/r*this.duration*1e3;this.goTo(o)}pause(){this.playing=!1,this.audio_howl_sprites.pause()}play(){this.playing=!0,void 0!==this.play_id?this.play_id=this.audio_howl_sprites.play(this.play_id):this.play_id=this.audio_howl_sprites.play("all"),this.animateProgress()}playSprite(e){let t=this.goToSeekAtEl(e);this.playing||this.audio_howl_sprites.play(t)}stop(){this.playing=!1,this.audio_howl_sprites.stop(),this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.autoScroll||(this.autoScroll=!0,this.showGuide=!1)}toggleTextTranslation(){this.el.shadowRoot.querySelectorAll(".translation").forEach((e=>e.classList.toggle("invisible"))),this.el.shadowRoot.querySelectorAll(".sentence__translation").forEach((e=>e.classList.toggle("invisible")))}addHighlightingTo(e){this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),e.classList.add("reading")}animateProgressWithOverlay(){let e=this.el.shadowRoot.querySelector("#overlay__object"),t=e.contentDocument.querySelector("#progress-fill"),n=e.contentDocument.querySelector("#progress-trail"),r=e.contentDocument.querySelector("#progress-base");t.classList.add("stop-color--"+this.theme),r.classList.add("stop-color--"+this.theme),this.audio_howl_sprites.sounds.push(t),this.audio_howl_sprites.sounds.push(n),this.audio_howl_sprites.sound.once("end",(()=>{this.audio_howl_sprites.sounds.forEach((e=>{e.setAttribute("offset","0%")})),this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.playing=!1}),this.play_id)}animateProgressDefault(e,t){let n=document.createElement("div");n.className="progress theme--"+this.theme,n.id=e.toString(),n.dataset.sprite=t;let r=this.tagToQuery(t);this.el.shadowRoot.querySelector(r).appendChild(n),this.audio_howl_sprites.sounds.push(n),this.audio_howl_sprites.sound.once("end",(()=>{this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.playing=!1}),this.play_id)}animateProgress(e=this.play_id){this.svgOverlay?this.animateProgressWithOverlay():this.animateProgressDefault(e,"all")}changeFill(){let e=this.el.shadowRoot.querySelector(".sentence__word"),t=window.getComputedStyle(e).color,n=this.el.shadowRoot.querySelector("#overlay__object"),r=n.contentDocument.querySelector("#progress-fill"),o=n.contentDocument.querySelector("#progress-base");n.contentDocument.querySelector("#polygon").setAttribute("stroke",t),o.setAttribute("stop-color",t),r.setAttribute("stop-color",t)}async getImages(){return this.images}async getTranslations(){return this.translations}async changeTheme(){"light"===this.theme?this.theme="dark":this.theme="light"}static _getSentenceContainerOfWord(e){return e.parentElement.parentElement.parentElement}toggleFullscreen(){if(this.fullscreen){let e=this.el.ownerDocument;e.exitFullscreen?e.exitFullscreen():e.mozCancelFullScreen?e.mozCancelFullScreen():e.webkitExitFullscreen?e.webkitExitFullscreen():e.msExitFullscreen&&e.msExitFullscreen(),this.el.shadowRoot.getElementById("read-along-container").classList.remove("read-along-container--fullscreen")}else{let e=this.el.shadowRoot.getElementById("read-along-container");e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen(),this.el.shadowRoot.getElementById("read-along-container").classList.add("read-along-container--fullscreen")}this.fullscreen=!this.fullscreen}hideGuideAndScroll(){let e=this.el.shadowRoot.querySelector(".reading"),t=new IntersectionObserver((n=>{let[r]=n;r.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),t.unobserve(e))}));t.observe(e),this.scrollTo(e)}inParagraphContentOverflow(e){let t=B._getSentenceContainerOfWord(e).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.rightt.right,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),r||o}inPageContentOverflow(e){let t=this.el.shadowRoot.querySelector("#"+this.current_page).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.top+n.height>t.top+t.height,o=n.top+n.height<0,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),o||r}inPage(e){let t=B._getSentenceContainerOfWord(e).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.top+n.height>t.top+t.height,o=n.top+n.height<0,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),o||r}scrollToPage(e){let t=this.el.shadowRoot.querySelector(".pages__container"),n=this.el.shadowRoot.querySelector("#"+e);t.scrollBy({top:null!=this.pageScrolling.match("vertical")?n.offsetTop-t.scrollTop:0,left:null!=this.pageScrolling.match("vertical")?0:n.offsetLeft-t.scrollLeft,behavior:this.scrollBehaviour}),n.scrollTo(0,0)}scrollByHeight(e){let t=B._getSentenceContainerOfWord(e),n=e.parentElement.getBoundingClientRect(),r=new IntersectionObserver((o=>{let[i]=o;i.isIntersecting?r.unobserve(e):t.scrollTo({top:t.getBoundingClientRect().height-n.height,left:0,behavior:this.scrollBehaviour})}),{root:t,threshold:[0,.25,.5,.75,1]});r.observe(e)}scrollByWidth(e){let t=B._getSentenceContainerOfWord(e),n=e.getBoundingClientRect();t.scrollTo({left:n.left-10,top:0,behavior:this.scrollBehaviour})}scrollTo(e){e.scrollIntoView({behavior:this.scrollBehaviour})}disconnectedCallback(){this.stop()}componentDidUpdate(){this.svgOverlay&&this.changeFill()}async componentWillLoad(){this.language.length<3&&(null!=this.language.match("fr")?this.language="fra":null!==this.language.match("es")?this.language="spa":this.language="eng"),"smooth"!==this.scrollBehaviour&&"auto"!==this.scrollBehaviour&&(console.log("Invalid scroll-behaviour value, using default (smooth)"),this.scrollBehaviour="smooth"),(isNaN(this.playbackRateRange)||this.playbackRateRange<0||this.playbackRateRange>99)&&(console.log("Invalid playback-rate-range value, using default (15)."),this.playbackRateRange=15);const e=this.el.querySelector("read-along > text");if(this.parsed_text=e?L(e):await async function(e){let t=await fetch(e);if(!t.ok)return console.log(`fetch(${e}) failed with status ${t.status}`),null;let n=await t.text();return L((new DOMParser).parseFromString(n,"text/xml"))}(this.href),null===this.parsed_text)this.parsed_text=[],this.assetsStatus.RAS=3;else if(0===this.parsed_text.length)this.assetsStatus.RAS=2;else{this.images={},this.translations={};for(const[e,n]of this.parsed_text.entries())if("img"in n){var t=this.urlTransform(n.img);if(this.images[e]=this.urlTransform(n.img),/^(https?:[/]|assets)[/]\b/.test(t)){await C(t)||(this.images[e]=null)}}else this.images[e]=null;this.assetsStatus.RAS=1}this.hasLoaded+=1}componentDidLoad(){const e="https://unpkg.com/@bcgov/bc-sans@1.0.1/css/BCSans.css",t="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined&display=swap";let n=document.querySelector(`link[href="${t}"]`),r=document.querySelector(`link[href="${e}"]`);n||(n=document.createElement("link"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.head.appendChild(n)),r||(r=document.createElement("link"),r.setAttribute("rel","stylesheet"),r.setAttribute("href",e),document.head.appendChild(r)),this.processed_alignment=function(e){let t={};for(const n of e)for(const e of n.paragraphs)for(const n of Array.from(e.querySelectorAll("w[time][dur]"))){const e=n.getAttribute("time"),r=n.getAttribute("dur");null!==e&&null!==r&&(t[n.getAttribute("id")]=[Math.round(1e3*parseFloat(e)),Math.round(1e3*parseFloat(r))])}return t}(this.parsed_text),this.alignment_failed=0==Object.keys(this.processed_alignment).length,this.audio_howl_sprites=new a.Howl({src:[this.audio],preload:!1}),this.audio_howl_sprites.once("load",(()=>{var e,t;this.processed_alignment.all=[0,1e3*this.audio_howl_sprites.duration()],this.duration=this.audio_howl_sprites.duration(),this.audio_howl_sprites=this.buildSprite(this.audio,this.processed_alignment),this.reading$=this.audio_howl_sprites._reading$.pipe((n=>n.lift(new A(e,t)))).subscribe((e=>{if(this.playing){let t=this.tagToQuery(e),n=this.el.shadowRoot.querySelector(t);this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),n.classList.add("reading");let r=B._getSentenceContainerOfWord(n).parentElement.id;r!==this.current_page&&(void 0===this.current_page||this.isScrolling||this.scrollToPage(r),this.current_page=r);const o=Math.ceil(this.el.shadowRoot.querySelector(".pages__container").getBoundingClientRect().left)+1,i=Math.ceil(this.el.shadowRoot.querySelector("#"+this.current_page).getBoundingClientRect().left);(n.getBoundingClientRect().left<0||i!==o)&&(this.isScrolling||this.scrollToPage(r)),this.inPageContentOverflow(n)&&this.autoScroll&&(n.scrollIntoView(!1),this.isScrolling||this.scrollByHeight(n)),this.inParagraphContentOverflow(n)&&this.autoScroll&&(n.scrollIntoView(!1),this.isScrolling||this.scrollByWidth(n))}})),this.hasLoaded+=1,this.assetsStatus.AUDIO=1})),this.audio_howl_sprites.once("loaderror",(()=>{this.hasLoaded+=1,this.assetsStatus.AUDIO=3})),this.audio_howl_sprites.load()}componentDidRender(){if(!this.displayTranslation&&this.parsed_text&&this.parsed_text.length>0&&(this.toggleTextTranslation(),this.displayTranslation=!0),this.latestTranslation){this.el.shadowRoot.querySelector(this.latestTranslation).focus(),this.latestTranslation=""}}getRawI18nString(e){return this.i18nStrings[this.language]&&this.i18nStrings[this.language][e]?this.i18nStrings[this.language][e]:this.i18nStrings.eng[e]?this.i18nStrings.eng[e]:e}getI18nString(e,t={}){let n=this.getRawI18nString(e);for(const[e,r]of Object.entries(t))n=n.replace("<"+e+">",r);return n}addLine(e){this.hasTextTranslations||(this.hasTextTranslations=!0);let t={};t[e.id]="",this.translations=Object.assign(Object.assign({},this.translations),t),this.latestTranslation="#"+e.id+"translation"}removeLine(e){let t={};t[e.id]=null,this.translations=Object.assign(Object.assign({},this.translations),t)}updateTranslation(e,t){this.translations[e]=t}async handleFiles(e,t){let n=URL.createObjectURL(e),r={};r[t]=n,this.images=Object.assign(Object.assign({},this.images),r)}deleteImage(e){let t={};t[e]=null,this.images=Object.assign(Object.assign({},this.images),t)}render(){return(0,r.h)("div",{id:"read-along-container",class:"read-along-container"},(0,r.h)("div",{id:"title__slot__container"},(0,r.h)("h1",{class:"slot__header"},(0,r.h)("slot",{name:"read-along-header"})),(0,r.h)("h3",{class:"slot__subheader"},(0,r.h)("slot",{name:"read-along-subheader"}))),Object.entries(this.assetsStatus).map((e=>{let t=e[0],n=e[1];if(2===n){let e=this.getPathFromAssetType(t);return(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("parse-error",{FILETYPE:t,FILENAME:e}),data_cy:t+"-error"})}if(3===n){let e=this.getPathFromAssetType(t);return(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("loading-error",{FILETYPE:t,FILENAME:e}),data_cy:t+"-error"})}})),this.alignment_failed&&1===this.assetsStatus.RAS&&(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("alignment-error"),data_cy:"alignment-error"}),(0,r.h)("div",{onScroll:()=>{this.handleScrollEvent()},"data-cy":"text-container",class:"pages__container theme--"+this.theme+" "+this.pageScrolling},this.showGuide?(0,r.h)(this.Guide,null):null,1==this.assetsStatus.RAS&&this.parsed_text.map((e=>(0,r.h)(this.Page,{pageData:e}))),this.hasLoaded<2&&(0,r.h)("div",{class:"loader"})),this.alignment_failed||(0,r.h)("div",{onClick:e=>this.goToSeekFromProgress(e),id:"all","data-cy":"progress-bar",class:"overlay__container theme--"+this.theme+" background--"+this.theme},this.svgOverlay?(0,r.h)(this.Overlay,null):null),1==this.assetsStatus.AUDIO&&(0,r.h)(this.ControlPanel,null),this.cssUrl&&null!=this.cssUrl.match(".css")&&(0,r.h)("link",{href:this.cssUrl,rel:"stylesheet"}))}static get assetsDirs(){return["assets"]}get el(){return(0,r.g)(this)}};B.style='.font-weight--100{font-weight:100}.font-weight--200{font-weight:200}.font-weight--300{font-weight:300}.font-weight--400{font-weight:400}.font-weight--500{font-weight:500}.font-weight--600{font-weight:600}.font-weight--700{font-weight:700}.font-weight--800{font-weight:800}.font-weight--900{font-weight:900}.shadowed{text-shadow:0.3px 0.2px black}.theme--light.sentence,.theme--light.page__col__image,.theme--light.page__container,.theme--light.scroll-guide__container{background-color:#fff}.theme--dark.sentence,.theme--dark.page__col__image,.theme--dark.page__container,.theme--dark.scroll-guide__container{background-color:#3c4369}.sentence__word,.sentence__text,.scroll-guide__text{line-height:1.5;border-radius:0.3125em;position:relative;padding:0.0625em;font-size:1em}.theme--light.ripple,.theme--light.reading,.theme--light.sentence__word,.theme--light.sentence__text,.theme--light.scroll-guide__text{color:#040508}.theme--dark.ripple,.theme--dark.reading,.theme--dark.sentence__word,.theme--dark.sentence__text,.theme--dark.scroll-guide__text{color:#fff}.theme--light.ripple:active,.theme--light.reading:active,.theme--light.sentence__word:hover{color:#fff;background:gray radial-gradient(circle, transparent 1%, gray 1%) center/15000%}.theme--dark.ripple:active,.theme--dark.reading:active,.theme--dark.sentence__word:hover{color:#fff;background:#a6a6a6 radial-gradient(circle, transparent 1%, #a6a6a6 1%) center/15000%}.theme--light.sentence__word.reading{color:#fff;background:#666666 radial-gradient(circle, transparent 1%, #666666 1%) center/15000%}.theme--dark.sentence__word.reading{color:#040508;background:#fff radial-gradient(circle, transparent 1%, #fff 1%) center/15000%}.theme--light.page__col__img-placeholder{border:0.046875em dotted gray}.theme--dark.page__col__img-placeholder{border:0.046875em dotted #a6a6a6}.theme--light.scroll-guide__container,.theme--light.overlay__container{border:0.046875em solid gray}.theme--dark.scroll-guide__container,.theme--dark.overlay__container{border:0.046875em solid #a6a6a6}.theme--light.page--multi,.theme--light.pages__container,.theme--light.control-panel{border-left:0.046875em solid gray}.theme--dark.page--multi,.theme--dark.pages__container,.theme--dark.control-panel{border-left:0.046875em solid #a6a6a6}.theme--light.page--multi,.theme--light.pages__container,.theme--light.control-panel{border-right:0.046875em solid gray}.theme--dark.page--multi,.theme--dark.pages__container,.theme--dark.control-panel{border-right:0.046875em solid #a6a6a6}.theme--light.pages__container{border-top:0.046875em solid gray}.theme--dark.pages__container{border-top:0.046875em solid #a6a6a6}.theme--light.control-panel{border-bottom:0.046875em solid gray}.theme--dark.control-panel{border-bottom:0.046875em solid #a6a6a6}.ripple:hover,.reading:hover,.sentence__word:hover{cursor:pointer}@viewport{width:device-width}button{border:0;cursor:pointer}html{background-color:#fff;box-sizing:border-box;height:100%}*:before,*:after{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;color:#040508;font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif;min-height:100%;overflow-x:hidden;overflow-y:hidden;text-rendering:optimizeLegibility}a{background:transparent;color:#c69;text-decoration:none;transition:color 0.2s;outline:none}a:active,a:focus{outline:none}img{height:90%;max-width:90%;object-fit:cover}h1,h2,h3,h4,h5,h6{font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif;font-weight:normal}p,mat-chip,mat-tab-label,span,button,div,a{font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif}.theme--light::-webkit-scrollbar{width:0.5em;height:0.5em}.theme--light::-webkit-scrollbar-track{background:#fff}.theme--light::-webkit-scrollbar-thumb{background:#040508;border-radius:0.3125em;height:0.625em;width:0.625em}.theme--dark::-webkit-scrollbar{width:0.5em;height:0.5em}.theme--dark::-webkit-scrollbar-track{background:#3c4369}.theme--dark::-webkit-scrollbar-thumb{background:#fff;border-radius:0.3125em;height:0.625em;width:0.625em}.bg-img{background-image:url("../assets/img/bg.jpg");height:100vh;overflow:overlay;overflow-x:hidden;background-position:center;background-repeat:no-repeat;background-size:cover;min-height:100%}.shadow-box{box-shadow:0 0.3125rem 1rem 0 rgba(0, 0, 0, 0.24);padding:25px;background:rgba(255, 255, 255, 0.94);border-radius:5px}.font-xs{font-size:0.5em}.font-sm{font-size:0.75em}.font-md{font-size:1em}.font-lg{font-size:1.25em}.font-xl{font-size:1.5em}.font-xxl{font-size:2em}.faded{opacity:0.2;color:black}table{table-layout:fixed}.center{margin-left:auto;margin-right:auto;text-align:center}.container{max-width:80em}.background--light{background:#fff}.stop-color--light{fill:#fff}.color--light{color:#040508}.background--dark{background:#3c4369}.stop-color--dark{fill:#3c4369}.color--dark{color:#fff}.abs{position:absolute}.top-0{top:0}.left-0{left:0}.right-0{right:0}.top-5{top:0.3125em}.left-5{left:0.3125em}.right-5{right:0.3125em}.top-10{top:0.625em}.left-10{left:0.625em}.right-10{right:0.625em}.top-15{top:0.9375em}.left-15{left:0.9375em}.right-15{right:0.9375em}.top-20{top:1.25em}.left-20{left:1.25em}.right-20{right:1.25em}.top-25{top:1.5625em}.left-25{left:1.5625em}.right-25{right:1.5625em}.top-30{top:1.875em}.left-30{left:1.875em}.right-30{right:1.875em}.top-35{top:2.1875em}.left-35{left:2.1875em}.right-35{right:2.1875em}.top-40{top:2.5em}.left-40{left:2.5em}.right-40{right:2.5em}.top-45{top:2.8125em}.left-45{left:2.8125em}.right-45{right:2.8125em}.top-50{top:3.125em}.left-50{left:3.125em}.right-50{right:3.125em}.invisible{visibility:hidden !important}.control-panel{border-radius:0 0 0.3125em 0.3125em;position:relative;min-width:100%;display:inline-flex}.control-panel__buttons--left{width:25%;float:left;margin-top:0.3125em;padding:0.3125em}.control-panel__buttons--center{width:25%;text-align:center;margin:0 auto}.control-panel__buttons--right{width:25%;text-align:right;float:right;margin-top:0.3125em;margin-right:0.3125em}.control-panel__buttons__header{margin:0.3125em}.control-panel__control{border-radius:0.3125em;margin:0.5em auto}.control-panel__control:focus{outline:none}.settings{margin-left:0;margin-right:0;text-align:center}.settings__option__header{margin-bottom:0.5em}#waveform{background-size:contain;background-repeat:no-repeat;background-position:center center;width:100%;height:100%;position:absolute;top:0;left:0}.low{z-index:700}.overlay__container{width:100%;max-width:100%;height:3.125em;position:relative;z-index:8000}#overlay__object{z-index:700;max-height:100%;min-width:100%;fill:"transparent"}#overlay__object.theme--light{stroke:gray}#overlay__object.theme--dark{stroke:#a6a6a6}.scroll-guide__container{text-align:center;z-index:700;width:20%;position:fixed;left:50%;transform:translate(-50%, 0)}.scroll-guide__text{font-size:1.25em}.pages__container{overflow:auto;max-height:55vh;height:100%;max-width:100%;width:100%;position:relative;display:-webkit-inline-flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;border-radius:0.3125em 0.3125em 0 0}.page{overflow-y:hidden;overflow-x:auto;flex-grow:1;min-width:99.6%;width:100%;max-width:55em}.page__container{display:grid;grid-template-columns:[col-start] [col-end];grid-template-rows:[row-start] 5% [row-end] 95%;grid-template-areas:"image page-no" "image text";justify-items:stretch}.page__counter{grid-area:page-no;margin:0.625em 0 0 0.9375em;text-align:right;padding-right:0.9375em;max-height:5rem}.page__col__image{grid-area:image;max-height:100%;text-align:center;margin:5%;padding:0;border-radius:0 0 0 0;position:relative}.page__col__image img{max-height:55vh;max-width:95%;object-fit:contain}.page__col__img-placeholder{cursor:pointer}.page__col__text{grid-area:text}.page.two-column-layout-page{grid-template-columns:40% auto}.page.one-column-layout-page{display:grid;grid-template-columns:auto;grid-template-rows:[row-start] 5% [row-end] 95%;grid-template-areas:"page-no" "text";justify-items:stretch}.page.one-column-layout-page .page__col__image{grid-area:text}.hide-page-counter .page__counter{display:none}.pages__container.vertical{flex-direction:column !important}.pages__container.vertical>.page{min-height:100%}.paragraph__container{overflow-y:auto;min-width:40%;padding-bottom:0.75em}.sentence{margin:0 1.5em;text-align:left;max-width:90%}.sentence__container{margin:3.75em 0.625em 3.75em 0.625em;scroll-behavior:smooth;max-width:100%;position:relative;overflow-y:auto;overflow-x:hidden}.sentence__container__buttons{position:absolute;top:0;right:0}.sentence__text{font-size:1.5em;padding:0}.sentence__word{font-size:1.5em}.sentence__translation .sentence__text,.sentence__translation .sentence__word{color:#777;font-style:italic;font-size:95%}.sentence__translation__button{margin-left:10px}.sentence__translation__button i{font-size:medium}.paragraph.visually_aligned .sentence .sentence__text,.paragraph.visually_aligned .sentence .sentence__word{display:table-cell}.paragraph.visually_aligned .sentence .sentence__text:empty{display:none}.paragraph.visually_aligned{display:table}.paragraph.visually_aligned .sentence{display:table-row}.read-along-container{max-width:75em;margin:0 auto;overflow-y:hidden;overflow-x:hidden;padding:0.3125em;position:relative}.read-along-container--fullscreen{max-width:80%;min-width:80%}.slot__header{margin-bottom:0.3125em}.slot__subheader{margin-top:0;margin-left:1em}.loader{border:16px solid #eee;border-radius:50%;border-right-color:#aa0;border-bottom-color:#a33;border-left-color:#111;width:10rem;height:10rem;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite;position:fixed;top:calc(50vh - 10rem);left:calc(50vw - 10rem);z-index:1000;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:0.25rem;transition-delay:2s;transition:visibility 5s height 5s}.alert.status-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert.status-error{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert.fade{visibility:collapse;height:0 !important;overflow:hidden !important;line-height:0 !important;padding:0 !important;margin:0 !important;border:0 !important}.animate-transition,.ripple,.reading{transition:background 0.4s}.animate-transition:active,.ripple:active,.reading:active{transition:background 0s}.ripple,.reading{background-position:center;padding:0.0625em}.ripple:active,.reading:active{background-size:100%}.progress{position:absolute;top:0;left:0;height:100%;width:0}.progress.theme--light{background-color:rgba(128, 128, 128, 0.2)}.progress.theme--dark{background-color:rgba(166, 166, 166, 0.2)}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}[contenteditable][data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:gray;cursor:text;background-color:transparent}.drop-area{border:2px dashed #ccc;border-radius:20px;width:50%;font-family:sans-serif;margin:50px auto;padding:20px}.drop-area.highlight{border-color:purple}p{margin-top:0}.my-form{margin-bottom:10px}#gallery{margin-top:10px}#gallery img{width:150px;margin-bottom:10px;margin-right:10px;vertical-align:middle}.button{display:inline-block;padding:10px;background:#ccc;cursor:pointer;border-radius:5px;border:1px solid #ccc}.button:hover{background:#ddd}.fileElem{display:none}#img-remover{margin:60px;position:absolute;z-index:9999;border-radius:50px;color:red}#image-container{display:contents}'},131:(e,t,n)=>{var r={"./read-along.entry.js":[704,179]};function o(e){if(!n.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],o=t[0];return n.e(t[1]).then((()=>n(o)))}o.keys=()=>Object.keys(r),o.id=131,e.exports=o}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.e=()=>Promise.resolve(),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";var e=n(678);(()=>{const t="file:///home/runner/work/Web-Component/Web-Component/dist/packages/web-component/dist/esm/web-component.js",n={};return n.resourcesUrl=new URL(".",t).href,(0,e.p)(n)})().then((t=>(0,e.b)([["read-along",[[1,"read-along",{href:[1],audio:[1],svgOverlay:[1,"svg-overlay"],theme:[1537],language:[1537],cssUrl:[1,"css-url"],useAssetsFolder:[4,"use-assets-folder"],pageScrolling:[1,"page-scrolling"],mode:[1],scrollBehaviour:[1,"scroll-behaviour"],displayTranslation:[4,"display-translation"],playbackRateRange:[2,"playback-rate-range"],playing:[32],fullscreen:[32],autoScroll:[32],hasLoaded:[32],images:[32],translations:[32],getImages:[64],getTranslations:[64],changeTheme:[64]},[[9,"wheel","wheelHandler"]]]]]],t)))})()})(); \ No newline at end of file +function(){var e;HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var t=this;if(!t.ctx||!t.ctx.listener)return t;for(var n=t._howls.length-1;n>=0;n--)t._howls[n].stereo(e);return t},HowlerGlobal.prototype.pos=function(e,t,n){var r=this;return r.ctx&&r.ctx.listener?(t="number"!=typeof t?r._pos[1]:t,n="number"!=typeof n?r._pos[2]:n,"number"!=typeof e?r._pos:(r._pos=[e,t,n],void 0!==r.ctx.listener.positionX?(r.ctx.listener.positionX.setTargetAtTime(r._pos[0],Howler.ctx.currentTime,.1),r.ctx.listener.positionY.setTargetAtTime(r._pos[1],Howler.ctx.currentTime,.1),r.ctx.listener.positionZ.setTargetAtTime(r._pos[2],Howler.ctx.currentTime,.1)):r.ctx.listener.setPosition(r._pos[0],r._pos[1],r._pos[2]),r)):r},HowlerGlobal.prototype.orientation=function(e,t,n,r,o,i){var s=this;if(!s.ctx||!s.ctx.listener)return s;var a=s._orientation;return t="number"!=typeof t?a[1]:t,n="number"!=typeof n?a[2]:n,r="number"!=typeof r?a[3]:r,o="number"!=typeof o?a[4]:o,i="number"!=typeof i?a[5]:i,"number"!=typeof e?a:(s._orientation=[e,t,n,r,o,i],void 0!==s.ctx.listener.forwardX?(s.ctx.listener.forwardX.setTargetAtTime(e,Howler.ctx.currentTime,.1),s.ctx.listener.forwardY.setTargetAtTime(t,Howler.ctx.currentTime,.1),s.ctx.listener.forwardZ.setTargetAtTime(n,Howler.ctx.currentTime,.1),s.ctx.listener.upX.setTargetAtTime(r,Howler.ctx.currentTime,.1),s.ctx.listener.upY.setTargetAtTime(o,Howler.ctx.currentTime,.1),s.ctx.listener.upZ.setTargetAtTime(i,Howler.ctx.currentTime,.1)):s.ctx.listener.setOrientation(e,t,n,r,o,i),s)},Howl.prototype.init=(e=Howl.prototype.init,function(t){var n=this;return n._orientation=t.orientation||[1,0,0],n._stereo=t.stereo||null,n._pos=t.pos||null,n._pannerAttr={coneInnerAngle:void 0!==t.coneInnerAngle?t.coneInnerAngle:360,coneOuterAngle:void 0!==t.coneOuterAngle?t.coneOuterAngle:360,coneOuterGain:void 0!==t.coneOuterGain?t.coneOuterGain:0,distanceModel:void 0!==t.distanceModel?t.distanceModel:"inverse",maxDistance:void 0!==t.maxDistance?t.maxDistance:1e4,panningModel:void 0!==t.panningModel?t.panningModel:"HRTF",refDistance:void 0!==t.refDistance?t.refDistance:1,rolloffFactor:void 0!==t.rolloffFactor?t.rolloffFactor:1},n._onstereo=t.onstereo?[{fn:t.onstereo}]:[],n._onpos=t.onpos?[{fn:t.onpos}]:[],n._onorientation=t.onorientation?[{fn:t.onorientation}]:[],e.call(this,t)}),Howl.prototype.stereo=function(e,n){var r=this;if(!r._webAudio)return r;if("loaded"!==r._state)return r._queue.push({event:"stereo",action:function(){r.stereo(e,n)}}),r;var o=void 0===Howler.ctx.createStereoPanner?"spatial":"stereo";if(void 0===n){if("number"!=typeof e)return r._stereo;r._stereo=e,r._pos=[e,0,0]}for(var i=r._getSoundIds(n),s=0;s{throw e}),0)}const h={closed:!0,next(e){},error(e){if(u.useDeprecatedSynchronousErrorHandling)throw e;d(e)},complete(){}},p=Array.isArray||(e=>e&&"number"==typeof e.length);const _=(()=>{function e(e){return Error.call(this),this.message=e?`${e.length} errors occurred during unsubscription:\n${e.map(((e,t)=>`${t+1}) ${e.toString()}`)).join("\n ")}`:"",this.name="UnsubscriptionError",this.errors=e,this}return e.prototype=Object.create(Error.prototype),e})();class g{constructor(e){this.closed=!1,this._parentOrParents=null,this._subscriptions=null,e&&(this._ctorUnsubscribe=!0,this._unsubscribe=e)}unsubscribe(){let e;if(this.closed)return;let{_parentOrParents:t,_ctorUnsubscribe:n,_unsubscribe:r,_subscriptions:o}=this;if(this.closed=!0,this._parentOrParents=null,this._subscriptions=null,t instanceof g)t.remove(this);else if(null!==t)for(let e=0;ee.concat(t instanceof _?t.errors:t)),[])}g.EMPTY=function(e){return e.closed=!0,e}(new g);const f="function"==typeof Symbol?Symbol("rxSubscriber"):"@@rxSubscriber_"+Math.random();class b extends g{constructor(e,t,n){switch(super(),this.syncErrorValue=null,this.syncErrorThrown=!1,this.syncErrorThrowable=!1,this.isStopped=!1,arguments.length){case 0:this.destination=h;break;case 1:if(!e){this.destination=h;break}if("object"==typeof e){e instanceof b?(this.syncErrorThrowable=e.syncErrorThrowable,this.destination=e,e.add(this)):(this.syncErrorThrowable=!0,this.destination=new y(this,e));break}default:this.syncErrorThrowable=!0,this.destination=new y(this,e,t,n)}}[f](){return this}static create(e,t,n){const r=new b(e,t,n);return r.syncErrorThrowable=!1,r}next(e){this.isStopped||this._next(e)}error(e){this.isStopped||(this.isStopped=!0,this._error(e))}complete(){this.isStopped||(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe())}_next(e){this.destination.next(e)}_error(e){this.destination.error(e),this.unsubscribe()}_complete(){this.destination.complete(),this.unsubscribe()}_unsubscribeAndRecycle(){const{_parentOrParents:e}=this;return this._parentOrParents=null,this.unsubscribe(),this.closed=!1,this.isStopped=!1,this._parentOrParents=e,this}}class y extends b{constructor(e,t,n,r){let o;super(),this._parentSubscriber=e;let i=this;l(t)?o=t:t&&(o=t.next,n=t.error,r=t.complete,t!==h&&(i=Object.create(t),l(i.unsubscribe)&&this.add(i.unsubscribe.bind(i)),i.unsubscribe=this.unsubscribe.bind(this))),this._context=i,this._next=o,this._error=n,this._complete=r}next(e){if(!this.isStopped&&this._next){const{_parentSubscriber:t}=this;u.useDeprecatedSynchronousErrorHandling&&t.syncErrorThrowable?this.__tryOrSetError(t,this._next,e)&&this.unsubscribe():this.__tryOrUnsub(this._next,e)}}error(e){if(!this.isStopped){const{_parentSubscriber:t}=this,{useDeprecatedSynchronousErrorHandling:n}=u;if(this._error)n&&t.syncErrorThrowable?(this.__tryOrSetError(t,this._error,e),this.unsubscribe()):(this.__tryOrUnsub(this._error,e),this.unsubscribe());else if(t.syncErrorThrowable)n?(t.syncErrorValue=e,t.syncErrorThrown=!0):d(e),this.unsubscribe();else{if(this.unsubscribe(),n)throw e;d(e)}}}complete(){if(!this.isStopped){const{_parentSubscriber:e}=this;if(this._complete){const t=()=>this._complete.call(this._context);u.useDeprecatedSynchronousErrorHandling&&e.syncErrorThrowable?(this.__tryOrSetError(e,t),this.unsubscribe()):(this.__tryOrUnsub(t),this.unsubscribe())}else this.unsubscribe()}}__tryOrUnsub(e,t){try{e.call(this._context,t)}catch(e){if(this.unsubscribe(),u.useDeprecatedSynchronousErrorHandling)throw e;d(e)}}__tryOrSetError(e,t,n){if(!u.useDeprecatedSynchronousErrorHandling)throw new Error("bad call");try{t.call(this._context,n)}catch(t){return u.useDeprecatedSynchronousErrorHandling?(e.syncErrorValue=t,e.syncErrorThrown=!0,!0):(d(t),!0)}return!1}_unsubscribe(){const{_parentSubscriber:e}=this;this._context=null,this._parentSubscriber=null,e.unsubscribe()}}const v="function"==typeof Symbol&&Symbol.observable||"@@observable";function w(e){return e}class x{constructor(e){this._isScalar=!1,e&&(this._subscribe=e)}lift(e){const t=new x;return t.source=this,t.operator=e,t}subscribe(e,t,n){const{operator:r}=this,o=function(e,t,n){if(e){if(e instanceof b)return e;if(e[f])return e[f]()}return e||t||n?new b(e,t,n):new b(h)}(e,t,n);if(r?o.add(r.call(o,this.source)):o.add(this.source||u.useDeprecatedSynchronousErrorHandling&&!o.syncErrorThrowable?this._subscribe(o):this._trySubscribe(o)),u.useDeprecatedSynchronousErrorHandling&&o.syncErrorThrowable&&(o.syncErrorThrowable=!1,o.syncErrorThrown))throw o.syncErrorValue;return o}_trySubscribe(e){try{return this._subscribe(e)}catch(t){u.useDeprecatedSynchronousErrorHandling&&(e.syncErrorThrown=!0,e.syncErrorValue=t),!function(e){for(;e;){const{closed:t,destination:n,isStopped:r}=e;if(t||r)return!1;e=n&&n instanceof b?n:null}return!0}(e)?console.warn(t):e.error(t)}}forEach(e,t){return new(t=$(t))(((t,n)=>{let r;r=this.subscribe((t=>{try{e(t)}catch(e){n(e),r&&r.unsubscribe()}}),n,t)}))}_subscribe(e){const{source:t}=this;return t&&t.subscribe(e)}[v](){return this}pipe(...e){return 0===e.length?this:(0===(t=e).length?w:1===t.length?t[0]:function(e){return t.reduce(((e,t)=>t(e)),e)})(this);var t}toPromise(e){return new(e=$(e))(((e,t)=>{let n;this.subscribe((e=>n=e),(e=>t(e)),(()=>e(n)))}))}}function $(e){if(e||(e=Promise),!e)throw new Error("no Promise impl found");return e}x.create=e=>new x(e);class A{constructor(e,t){this.compare=e,this.keySelector=t}call(e,t){return t.subscribe(new S(e,this.compare,this.keySelector))}}class S extends b{constructor(e,t,n){super(e),this.keySelector=n,this.hasKey=!1,"function"==typeof t&&(this.compare=t)}compare(e,t){return e===t}_next(e){let t;try{const{keySelector:n}=this;t=n?n(e):e}catch(e){return this.destination.error(e)}let n=!1;if(this.hasKey)try{const{compare:e}=this;n=e(this.key,t)}catch(e){return this.destination.error(e)}else this.hasKey=!0;n||(this.key=t,this.destination.next(e))}}const T=(()=>{function e(){return Error.call(this),this.message="object unsubscribed",this.name="ObjectUnsubscribedError",this}return e.prototype=Object.create(Error.prototype),e})();class k extends g{constructor(e,t){super(),this.subject=e,this.subscriber=t,this.closed=!1}unsubscribe(){if(this.closed)return;this.closed=!0;const e=this.subject,t=e.observers;if(this.subject=null,!t||0===t.length||e.isStopped||e.closed)return;const n=t.indexOf(this.subscriber);-1!==n&&t.splice(n,1)}}class E extends b{constructor(e){super(e),this.destination=e}}class I extends x{constructor(){super(),this.observers=[],this.closed=!1,this.isStopped=!1,this.hasError=!1,this.thrownError=null}[f](){return new E(this)}lift(e){const t=new P(this,this);return t.operator=e,t}next(e){if(this.closed)throw new T;if(!this.isStopped){const{observers:t}=this,n=t.length,r=t.slice();for(let t=0;tnew P(e,t);class P extends I{constructor(e,t){super(),this.destination=e,this.source=t}next(e){const{destination:t}=this;t&&t.next&&t.next(e)}error(e){const{destination:t}=this;t&&t.error&&this.destination.error(e)}complete(){const{destination:e}=this;e&&e.complete&&this.destination.complete()}_subscribe(e){const{source:t}=this;return t?this.source.subscribe(e):g.EMPTY}}class O extends I{constructor(e){super(),this._value=e}get value(){return this.getValue()}_subscribe(e){const t=super._subscribe(e);return t&&!t.closed&&e.next(this._value),t}getValue(){if(this.hasError)throw this.thrownError;if(this.closed)throw new T;return this._value}next(e){super.next(this._value=e)}}function L(e){return Array.from(e.querySelectorAll("div[type=page]")).map((e=>{let t=e.querySelector("graphic[url]"),n=e.querySelectorAll("p"),r={id:e.getAttribute("id"),paragraphs:Array.from(n)};return null!==t&&(r.img=t.getAttribute("url")),e.attributes&&(r.attributes=e.attributes),r}))}var R=function(e){var t=this;t.sounds=[],t._sprite=e.sprite,t._reading$=new I,t._tinySprite=Object.keys(e.sprite).map((e=>[t._sprite[e][0],e])),t._tinySprite.pop(),t._percentPlayed=new O("0%"),t.sound=new a.Howl({src:e.src,sprite:e.sprite,rate:e.rate}),requestAnimationFrame(t.step.bind(t))};async function C(e){return new Promise((function(t,n){let r=new XMLHttpRequest;r.open("HEAD",e),r.onload=function(){this.status>=200&&this.status<300?t(!0):t(!1)},r.onerror=function(){t(!1)},r.send()}))}R.prototype={play:function(e){var t=this;t._spriteLeft=t._tinySprite;var n=e;return t.sound.play(n)},pause:function(){return this.sound.pause(),this.sound.id},goBack:function(e,t){var n=this;if(n._spriteLeft=n._tinySprite,n.sound.seek(e)-t>0){e=n.sound.seek(n.sound.seek(e)-t,e);for(var r=n.sound.seek(e),o=0;o=n._spriteLeft[o][0]&&(n._reading$.next(n._spriteLeft[o][1]),n._spriteLeft=n._spriteLeft.slice(o,n._spriteLeft.length))}else{e=n.sound.seek(0,e);n._reading$.next(n._spriteLeft[0][1])}return e},goTo:function(e,t){var n=this;n._spriteLeft=n._tinySprite;e=n.sound.seek(t,e);for(var r=n.sound.seek(e),o=0;o=n._spriteLeft[o][0]&&(n._reading$.next(n._spriteLeft[o][1]),n._spriteLeft=n._spriteLeft.slice(o,n._spriteLeft.length));return e},stop:function(){return this._reading$.next(""),this.sound.stop()},step:function(){for(var e=this,t=0;t0&&1e3*n>=e._spriteLeft[r][0]&&(e._reading$.next(e._spriteLeft[r][1]),e._spriteLeft=e._spriteLeft.slice(r,e._spriteLeft.length));let o=(n/e.sound.duration()*100||0)+"%";e.sounds[t].style.width=o,e.sounds[t].setAttribute("offset",o)}requestAnimationFrame(e.step.bind(e))}};const D={page:"Page",speed:"Playback Speed","re-align":"Re-align with audio","loading-error":'Error: the file "" could not be loaded.',"parse-error":'Error: the file "" could not be parsed.',"alignment-error":"Error: No alignments were found.",loading:"Loading...","line-placeholder":"Type your text here","upload-image":"Upload an image for this page","choose-file":"Choose a file","play-tooltip":"Play/pause audio recording","rewind-tooltip":"Rewind 5 seconds","stop-tooltip":"Stop audio playback","theme-tooltip":"Change theme","full-screen-tooltip":"Full screen mode","translation-tooltip":"Toggle translations","add-translation":"Add a translation, transliteration or gloss"},F={page:"Page",speed:"Vitesse de Lecture","re-align":"Réaligner avec l'audio","loading-error":'Erreur: le fichier "" n\'a pas pu être chargé.',"parse-error":'Erreur: le fichier "" n\'a pas pu être analysé.',"alignment-error":"Erreur: aucun alignement n'a été trouvé.",loading:"Chargement en cours","line-placeholder":"Écrivez votre texte ici","upload-image":"Téléverser charger une image pour cette page","choose-file":"Choisir un fichier","play-tooltip":"Écouter/mettre en pause l'enregistrement","rewind-tooltip":"Reculer de 5 secondes","stop-tooltip":"Arrêter la lecture","theme-tooltip":"Changer de thême visuel","full-screen-tooltip":"Mode plein écran","translation-tooltip":"Afficher ou cacher les traductions","add-translation":"Ajouter une traduction, une translitération ou une glose"},M={page:"Página",speed:"Velocidad de reproducción","re-align":"Re-alinear con el audio","loading-error":'Error: el fichero "" no se pudo cargar.',"parse-error":'Error: el fichero "" no se pudo analizar.',"alignment-error":"Error: No se encontró ningún alineamiento.",loading:"Cargando...","line-placeholder":"Escriba su texto aquí","upload-image":"Cargue una imagen para esta página","choose-file":"Seleccione un fichero","play-tooltip":"Reproducir/pausar grabación de audio","rewind-tooltip":"Rebobine (rewind) 5 segundos","stop-tooltip":"Pare la reproducción de audio","theme-tooltip":"Cambie la paleta de colores","full-screen-tooltip":"Modo pantalla completa","translation-tooltip":"Active o desactive las traducciones","add-translation":"Añada una traducción, transliteración o glosa"},B=class{constructor(e){(0,r.r)(this,e),this.i18nStrings={eng:D,fra:F,spa:M},this.playback_rate=1,this.showGuide=!1,this.hasTextTranslations=!1,this.assetsStatus={AUDIO:0,RAS:0},this.alignment_failed=!1,this.isScrolling=!1,this.scrollTimer=null,this.Guide=()=>(0,r.h)("button",{class:"scroll-guide__container ripple ui-button theme--"+this.theme,onClick:()=>this.hideGuideAndScroll()},(0,r.h)("span",{class:"scroll-guide__text theme--"+this.theme},this.getI18nString("re-align"))),this.Overlay=()=>(0,r.h)("object",{onClick:e=>this.goToSeekFromProgress(e),id:"overlay__object",type:"image/svg+xml",data:this.svgOverlay}),this.RemoveImg=e=>(0,r.h)("button",{"data-cy":"delete-button","aria-label":"Delete",title:"Delete image",onClick:()=>this.deleteImage(e.pageIndex),id:"img-remover",class:"ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"delete")),this.Img=e=>(0,r.h)("div",{class:"image__container page__col__image theme--"+this.theme},(0,r.h)("img",{alt:"image",class:"image",src:e.imgURL})),this.ImgPlaceHolder=e=>(0,r.h)("div",{class:"image__container page__col__image theme--"+this.theme},(0,r.h)("div",{class:"drop-area"},(0,r.h)("form",{class:"my-form"},(0,r.h)("p",{class:"theme--"+this.theme},this.getI18nString("upload-image")),(0,r.h)("input",{type:"file",class:"fileElem",id:"fileElem--"+e.pageID,accept:"image/*",onChange:t=>this.handleFiles(t.target.files[0],e.pageIndex)}),(0,r.h)("label",{class:"button",htmlFor:"fileElem--"+e.pageID},this.getI18nString("choose-file"))))),this.PageCount=e=>(0,r.h)("div",{class:"page__counter color--"+this.theme},this.getI18nString("page")," ",(0,r.h)("span",{"data-cy":"page-count__current"},e.currentPage)," / ",(0,r.h)("span",{"data-cy":"page-count__total"},e.pgCount)),this.ImgContainer=e=>(0,r.h)("div",{class:"image__container"},(0,r.h)("span",{id:"image-container"},"EDIT"===this.mode&&e.pageIndex in this.images&&null!==this.images[e.pageIndex]?(0,r.h)(this.RemoveImg,{pageIndex:e.pageIndex}):null,e.pageIndex in this.images&&null!==this.images[e.pageIndex]?(0,r.h)(this.Img,{imgURL:this.images[e.pageIndex]}):null),"EDIT"!==this.mode||e.pageIndex in this.images&&null!==this.images[e.pageIndex]?null:(0,r.h)(this.ImgPlaceHolder,{pageID:e.pageID,pageIndex:e.pageIndex})),this.Page=e=>(0,r.h)("div",{class:"page page__container page--multi animate-transition theme--"+this.theme+" "+(e.pageData.attributes.class?e.pageData.attributes.class.value:""),id:e.pageData.id},this.parsed_text.length>1?(0,r.h)(this.PageCount,{pgCount:this.parsed_text.length,currentPage:this.parsed_text.indexOf(e.pageData)+1}):null,(0,r.h)(this.ImgContainer,{pageID:e.pageData.id,pageIndex:this.parsed_text.indexOf(e.pageData)}),(0,r.h)("div",{class:"page__col__text paragraph__container theme--"+this.theme},e.pageData.paragraphs.map((e=>(0,r.h)(this.Paragraph,{sentences:Array.from(e.childNodes),attributes:e.attributes}))))),this.Paragraph=e=>(0,r.h)("div",{class:"paragraph sentence__container theme--"+this.theme+" "+(e.attributes.class?e.attributes.class.value:"")},e.sentences.map((e=>e.childNodes.length>0&&(0,r.h)(this.Sentence,{sentenceData:e})))),this.Sentence=e=>{let t=Array.from(e.sentenceData.childNodes),n=e.sentenceData.id;!this.hasTextTranslations&&e.sentenceData.hasAttribute("class")&&(this.hasTextTranslations=/translation/.test(e.sentenceData.getAttribute("class")));let o={};return e.sentenceData.hasAttribute("xml:lang")&&(o.lang=e.sentenceData.getAttribute("xml:lang")),e.sentenceData.hasAttribute("lang")&&(o.lang=e.sentenceData.getAttribute("lang")),(0,r.h)("div",Object.assign({},o,{class:"sentence "+(e.sentenceData.hasAttribute("class")?e.sentenceData.getAttribute("class"):"")}),t.map(((t,n)=>{if("#text"===t.nodeName)return(0,r.h)(this.NonWordText,{text:t.textContent,attributes:t.attributes,id:(e.sentenceData.hasAttribute("id")?e.sentenceData.getAttribute("id"):"P")+"text"+n});if("w"===t.nodeName||"W"===t.nodeName)return(0,r.h)(this.Word,{text:t.textContent,id:t.id,attributes:t.attributes});if(t){let o={};return t.hasAttribute("xml:lang")&&(o.lang=e.sentenceData.getAttribute("xml:lang")),t.hasAttribute("lang")&&(o.lang=e.sentenceData.getAttribute("lang")),(0,r.h)("span",Object.assign({},o,{class:"sentence__text theme--"+this.theme+" "+t.className,id:t.id?t.id:"text_"+n}),t.textContent)}})),(()=>"EDIT"!==this.mode||/translation/.test(e.sentenceData.getAttribute("class"))?null:n in this.translations&&n in this.translations&&null!==this.translations[n]?(0,r.h)("span",{class:"sentence__translation"},(0,r.h)("button",{title:"Remove translation","aria-label":"Remove translation","data-cy":"remove-translation-button",onClick:()=>this.removeLine(e.sentenceData),class:"sentence__translation__button remove"},(0,r.h)("i",{class:"material-icons"},"remove")),(0,r.h)("p",{id:n+"translation","data-cy":"translation-line",class:"sentence__text editable__translation",onInput:e=>{this.updateTranslation(n,e.currentTarget.innerText)},contentEditable:!0,onKeyDown:e=>{"Enter"==e.key&&e.preventDefault()},"data-placeholder":this.getI18nString("line-placeholder")})):(0,r.h)("button",{title:this.getI18nString("add-translation"),"aria-label":"Add translation","data-cy":"add-translation-button",class:"sentence__translation sentence__translation__button",onClick:()=>this.addLine(e.sentenceData)},(0,r.h)("i",{class:"material-icons"},"add")))())},this.NonWordText=e=>{let t={};return e.attributes&&e.attributes["xml:lang"]&&(t.lang=e.attributes["xml:lang"].value),e.attributes&&e.attributes.lang&&(t.lang=e.attributes.lang.value),(0,r.h)("span",Object.assign({},t,{class:"sentence__text theme--"+this.theme,id:e.id}),e.text)},this.Word=e=>{let t={};return e.attributes&&e.attributes["xml:lang"]&&(t.lang=e.attributes["xml:lang"].value),e.attributes&&e.attributes.lang&&(t.lang=e.attributes.lang.value),(0,r.h)("span",Object.assign({},t,{class:"sentence__word theme--"+this.theme+" "+(e&&e.attributes.class?e.attributes.class.value:""),id:e.id,onClick:e=>this.playSprite(e)}),e.text)},this.PlayControl=()=>(0,r.h)("button",{"data-cy":"play-button",disabled:this.hasLoaded<2,"aria-label":"Play",title:this.getI18nString("play-tooltip"),onClick:()=>{this.playing?this.pause():this.play()},class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},this.playing?"pause":"play_arrow")),this.ReplayControl=()=>(0,r.h)("button",{"data-cy":"replay-button",disabled:this.hasLoaded<2,"aria-label":"Rewind",title:this.getI18nString("rewind-tooltip"),onClick:()=>this.goBack(5),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"replay_5")),this.StopControl=()=>(0,r.h)("button",{"data-cy":"stop-button",disabled:this.hasLoaded<2,"aria-label":"Stop",title:this.getI18nString("stop-tooltip"),onClick:()=>this.stop(),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons"},"stop")),this.PlaybackSpeedControl=()=>(0,r.h)("div",null,(0,r.h)("h5",{class:"control-panel__buttons__header color--"+this.theme,id:"speed-slider-label"},this.getI18nString("speed")),(0,r.h)("input",{type:"range",min:100-this.playbackRateRange,max:100+this.playbackRateRange,value:100*this.playback_rate,class:"slider control-panel__control",id:"myRange","aria-labelledby":"speed-slider-label",onInput:e=>{console.log("v",e),this.changePlayback(e)}})),this.StyleControl=()=>(0,r.h)("button",{"aria-label":"Change theme",onClick:()=>this.changeTheme(),title:this.getI18nString("theme-tooltip"),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons-outlined"},"style")),this.FullScreenControl=()=>(0,r.h)("button",{"aria-label":"Full screen mode",onClick:()=>this.toggleFullscreen(),title:this.getI18nString("full-screen-tooltip"),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons","aria-label":"Full screen mode"},this.fullscreen?"fullscreen_exit":"fullscreen")),this.TextTranslationDisplayControl=()=>(0,r.h)("button",{"data-cy":"translation-toggle","aria-label":"Toggle Translation",title:this.getI18nString("translation-tooltip"),onClick:()=>this.toggleTextTranslation(),class:"control-panel__control ripple theme--"+this.theme+" background--"+this.theme},(0,r.h)("i",{class:"material-icons-outlined"},"subtitles")),this.ErrorMessage=e=>(0,r.h)("p",{"data-cy":e.data_cy,class:"alert status-error"},(0,r.h)("span",{class:"material-icons"},"error_outline")," ",e.msg),this.ControlPanel=()=>(0,r.h)("div",{"data-cy":"control-panel",class:"control-panel theme--"+this.theme+" background--"+this.theme},(0,r.h)("div",{class:"control-panel__buttons--left"},(0,r.h)(this.PlayControl,null),(0,r.h)(this.ReplayControl,null),(0,r.h)(this.StopControl,null)),(0,r.h)("div",{class:"control-panel__buttons--center"},(0,r.h)(this.PlaybackSpeedControl,null)),(0,r.h)("div",{class:"control-panel__buttons--right"},this.hasTextTranslations&&(0,r.h)(this.TextTranslationDisplayControl,null),(0,r.h)(this.StyleControl,null),(0,r.h)(this.FullScreenControl,null))),this.href=void 0,this.audio=void 0,this.svgOverlay=void 0,this.theme="light",this.language="eng",this.cssUrl=void 0,this.imageAssetsFolder="assets/",this.pageScrolling="horizontal",this.mode="VIEW",this.scrollBehaviour="smooth",this.displayTranslation=!0,this.playbackRateRange=15,this.playing=!1,this.fullscreen=!1,this.autoScroll=!0,this.hasLoaded=0,this.images=void 0,this.translations=void 0}handleScrollEvent(){this.isScrolling=!0,this.scrollTimer&&clearTimeout(this.scrollTimer),this.scrollTimer=setTimeout((()=>{this.isScrolling=!1}),125)}wheelHandler(e){if(this.el.shadowRoot.querySelector(".reading")&&(e.path[0].classList.contains("sentence__word")||e.path[0].classList.contains("sentence__container")||e.path[0].classList.contains("sentence"))&&this.autoScroll){let e=this.el.shadowRoot.querySelector(".reading");e&&(this.autoScroll=!this.inPageContentOverflow(e),this.showGuide=!this.autoScroll)}}urlTransform(e){return this.imageAssetsFolder&&function(e){return!/^(https?:[/][/]|assets[/]|data:)/.test(e)}(e)&&!e.startsWith("blob")?this.imageAssetsFolder+e:e}buildSprite(e,t){return new R({src:[e],sprite:t,rate:this.playback_rate})}tagToQuery(e){return"#"+(e=(e=e.replace(".","\\.")).replace("#","\\#"))}returnWordClosestTo(e){let t=Object.keys(this.processed_alignment);t.pop();for(let n=1;nthis.processed_alignment[t[n]][0]&&this.processed_alignment[t[n+1]]&&1e3*ethis.autoScroll=!0),100)}goTo(e){void 0===this.play_id&&(this.play(),this.pause()),this.autoScroll=!1,e/=1e3,this.audio_howl_sprites.goTo(this.play_id,e),setTimeout((()=>this.autoScroll=!0),100)}goToSeekAtEl(e){let t=e.currentTarget.id,n=this.processed_alignment[t][0];return this.goTo(n),t}goToSeekFromProgress(e){let t=e.currentTarget.getBoundingClientRect(),n=t.left,r=t.width,o=(e.pageX-n)/r*this.duration*1e3;this.goTo(o)}pause(){this.playing=!1,this.audio_howl_sprites.pause()}play(){this.playing=!0,void 0!==this.play_id?this.play_id=this.audio_howl_sprites.play(this.play_id):this.play_id=this.audio_howl_sprites.play("all"),this.animateProgress()}playSprite(e){let t=this.goToSeekAtEl(e);this.playing||this.audio_howl_sprites.play(t)}stop(){this.playing=!1,this.audio_howl_sprites.stop(),this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.autoScroll||(this.autoScroll=!0,this.showGuide=!1)}toggleTextTranslation(){this.el.shadowRoot.querySelectorAll(".translation").forEach((e=>e.classList.toggle("invisible"))),this.el.shadowRoot.querySelectorAll(".sentence__translation").forEach((e=>e.classList.toggle("invisible")))}addHighlightingTo(e){this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),e.classList.add("reading")}animateProgressWithOverlay(){let e=this.el.shadowRoot.querySelector("#overlay__object"),t=e.contentDocument.querySelector("#progress-fill"),n=e.contentDocument.querySelector("#progress-trail"),r=e.contentDocument.querySelector("#progress-base");t.classList.add("stop-color--"+this.theme),r.classList.add("stop-color--"+this.theme),this.audio_howl_sprites.sounds.push(t),this.audio_howl_sprites.sounds.push(n),this.audio_howl_sprites.sound.once("end",(()=>{this.audio_howl_sprites.sounds.forEach((e=>{e.setAttribute("offset","0%")})),this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.playing=!1}),this.play_id)}animateProgressDefault(e,t){let n=document.createElement("div");n.className="progress theme--"+this.theme,n.id=e.toString(),n.dataset.sprite=t;let r=this.tagToQuery(t);this.el.shadowRoot.querySelector(r).appendChild(n),this.audio_howl_sprites.sounds.push(n),this.audio_howl_sprites.sound.once("end",(()=>{this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),this.playing=!1}),this.play_id)}animateProgress(e=this.play_id){this.svgOverlay?this.animateProgressWithOverlay():this.animateProgressDefault(e,"all")}changeFill(){let e=this.el.shadowRoot.querySelector(".sentence__word"),t=window.getComputedStyle(e).color,n=this.el.shadowRoot.querySelector("#overlay__object"),r=n.contentDocument.querySelector("#progress-fill"),o=n.contentDocument.querySelector("#progress-base");n.contentDocument.querySelector("#polygon").setAttribute("stroke",t),o.setAttribute("stop-color",t),r.setAttribute("stop-color",t)}async getImages(){return this.images}async getTranslations(){return this.translations}async changeTheme(){"light"===this.theme?this.theme="dark":this.theme="light"}static _getSentenceContainerOfWord(e){return e.parentElement.parentElement.parentElement}toggleFullscreen(){if(this.fullscreen){let e=this.el.ownerDocument;e.exitFullscreen?e.exitFullscreen():e.mozCancelFullScreen?e.mozCancelFullScreen():e.webkitExitFullscreen?e.webkitExitFullscreen():e.msExitFullscreen&&e.msExitFullscreen(),this.el.shadowRoot.getElementById("read-along-container").classList.remove("read-along-container--fullscreen")}else{let e=this.el.shadowRoot.getElementById("read-along-container");e.requestFullscreen?e.requestFullscreen():e.mozRequestFullScreen?e.mozRequestFullScreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen(),this.el.shadowRoot.getElementById("read-along-container").classList.add("read-along-container--fullscreen")}this.fullscreen=!this.fullscreen}hideGuideAndScroll(){let e=this.el.shadowRoot.querySelector(".reading"),t=new IntersectionObserver((n=>{let[r]=n;r.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),t.unobserve(e))}));t.observe(e),this.scrollTo(e)}inParagraphContentOverflow(e){let t=B._getSentenceContainerOfWord(e).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.rightt.right,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),r||o}inPageContentOverflow(e){let t=this.el.shadowRoot.querySelector("#"+this.current_page).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.top+n.height>t.top+t.height,o=n.top+n.height<0,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),o||r}inPage(e){let t=B._getSentenceContainerOfWord(e).getBoundingClientRect(),n=e.getBoundingClientRect(),r=n.top+n.height>t.top+t.height,o=n.top+n.height<0,i=new IntersectionObserver((t=>{let[n]=t;n.isIntersecting&&(setTimeout((()=>{this.showGuide=!1,this.autoScroll=!0}),100),i.unobserve(e))}));return i.observe(e),o||r}scrollToPage(e){let t=this.el.shadowRoot.querySelector(".pages__container"),n=this.el.shadowRoot.querySelector("#"+e);t.scrollBy({top:null!=this.pageScrolling.match("vertical")?n.offsetTop-t.scrollTop:0,left:null!=this.pageScrolling.match("vertical")?0:n.offsetLeft-t.scrollLeft,behavior:this.scrollBehaviour}),n.scrollTo(0,0)}scrollByHeight(e){let t=B._getSentenceContainerOfWord(e),n=e.parentElement.getBoundingClientRect(),r=new IntersectionObserver((o=>{let[i]=o;i.isIntersecting?r.unobserve(e):t.scrollTo({top:t.getBoundingClientRect().height-n.height,left:0,behavior:this.scrollBehaviour})}),{root:t,threshold:[0,.25,.5,.75,1]});r.observe(e)}scrollByWidth(e){let t=B._getSentenceContainerOfWord(e),n=e.getBoundingClientRect();t.scrollTo({left:n.left-10,top:0,behavior:this.scrollBehaviour})}scrollTo(e){e.scrollIntoView({behavior:this.scrollBehaviour})}disconnectedCallback(){this.stop()}componentDidUpdate(){this.svgOverlay&&this.changeFill()}async componentWillLoad(){this.language.length<3&&(null!=this.language.match("fr")?this.language="fra":null!==this.language.match("es")?this.language="spa":this.language="eng"),"smooth"!==this.scrollBehaviour&&"auto"!==this.scrollBehaviour&&(console.log("Invalid scroll-behaviour value, using default (smooth)"),this.scrollBehaviour="smooth"),(isNaN(this.playbackRateRange)||this.playbackRateRange<0||this.playbackRateRange>99)&&(console.log("Invalid playback-rate-range value, using default (15)."),this.playbackRateRange=15);const e=this.el.querySelector("read-along > text");if(this.parsed_text=e?L(e):await async function(e){let t=await fetch(e);if(!t.ok)return console.log(`fetch(${e}) failed with status ${t.status}`),null;let n=await t.text();return L((new DOMParser).parseFromString(n,"text/xml"))}(this.href),null===this.parsed_text)this.parsed_text=[],this.assetsStatus.RAS=3;else if(0===this.parsed_text.length)this.assetsStatus.RAS=2;else{this.images={},this.translations={};for(const[e,n]of this.parsed_text.entries())if("img"in n){var t=this.urlTransform(n.img);if(this.images[e]=this.urlTransform(n.img),/^(https?:[/]|assets)[/]\b/.test(t)){await C(t)||(this.images[e]=null)}}else this.images[e]=null;this.assetsStatus.RAS=1}this.hasLoaded+=1}componentDidLoad(){const e="https://unpkg.com/@bcgov/bc-sans@1.0.1/css/BCSans.css",t="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined&display=swap";let n=document.querySelector(`link[href="${t}"]`),r=document.querySelector(`link[href="${e}"]`);n||(n=document.createElement("link"),n.setAttribute("rel","stylesheet"),n.setAttribute("href",t),document.head.appendChild(n)),r||(r=document.createElement("link"),r.setAttribute("rel","stylesheet"),r.setAttribute("href",e),document.head.appendChild(r)),this.processed_alignment=function(e){let t={};for(const n of e)for(const e of n.paragraphs)for(const n of Array.from(e.querySelectorAll("w[time][dur]"))){const e=n.getAttribute("time"),r=n.getAttribute("dur");null!==e&&null!==r&&(t[n.getAttribute("id")]=[Math.round(1e3*parseFloat(e)),Math.round(1e3*parseFloat(r))])}return t}(this.parsed_text),this.alignment_failed=0==Object.keys(this.processed_alignment).length,this.audio_howl_sprites=new a.Howl({src:[this.audio],preload:!1}),this.audio_howl_sprites.once("load",(()=>{var e,t;this.processed_alignment.all=[0,1e3*this.audio_howl_sprites.duration()],this.duration=this.audio_howl_sprites.duration(),this.audio_howl_sprites=this.buildSprite(this.audio,this.processed_alignment),this.reading$=this.audio_howl_sprites._reading$.pipe((n=>n.lift(new A(e,t)))).subscribe((e=>{if(this.playing){let t=this.tagToQuery(e),n=this.el.shadowRoot.querySelector(t);this.el.shadowRoot.querySelectorAll(".reading").forEach((e=>e.classList.remove("reading"))),n.classList.add("reading");let r=B._getSentenceContainerOfWord(n).parentElement.id;r!==this.current_page&&(void 0===this.current_page||this.isScrolling||this.scrollToPage(r),this.current_page=r);const o=Math.ceil(this.el.shadowRoot.querySelector(".pages__container").getBoundingClientRect().left)+1,i=Math.ceil(this.el.shadowRoot.querySelector("#"+this.current_page).getBoundingClientRect().left);(n.getBoundingClientRect().left<0||i!==o)&&(this.isScrolling||this.scrollToPage(r)),this.inPageContentOverflow(n)&&this.autoScroll&&(n.scrollIntoView(!1),this.isScrolling||this.scrollByHeight(n)),this.inParagraphContentOverflow(n)&&this.autoScroll&&(n.scrollIntoView(!1),this.isScrolling||this.scrollByWidth(n))}})),this.hasLoaded+=1,this.assetsStatus.AUDIO=1})),this.audio_howl_sprites.once("loaderror",(()=>{this.hasLoaded+=1,this.assetsStatus.AUDIO=3})),this.audio_howl_sprites.load()}componentDidRender(){if(!this.displayTranslation&&this.parsed_text&&this.parsed_text.length>0&&(this.toggleTextTranslation(),this.displayTranslation=!0),this.latestTranslation){this.el.shadowRoot.querySelector(this.latestTranslation).focus(),this.latestTranslation=""}}getRawI18nString(e){return this.i18nStrings[this.language]&&this.i18nStrings[this.language][e]?this.i18nStrings[this.language][e]:this.i18nStrings.eng[e]?this.i18nStrings.eng[e]:e}getI18nString(e,t={}){let n=this.getRawI18nString(e);for(const[e,r]of Object.entries(t))n=n.replace("<"+e+">",r);return n}addLine(e){this.hasTextTranslations||(this.hasTextTranslations=!0);let t={};t[e.id]="",this.translations=Object.assign(Object.assign({},this.translations),t),this.latestTranslation="#"+e.id+"translation"}removeLine(e){let t={};t[e.id]=null,this.translations=Object.assign(Object.assign({},this.translations),t)}updateTranslation(e,t){this.translations[e]=t}async handleFiles(e,t){let n=URL.createObjectURL(e),r={};r[t]=n,this.images=Object.assign(Object.assign({},this.images),r)}deleteImage(e){let t={};t[e]=null,this.images=Object.assign(Object.assign({},this.images),t)}render(){return(0,r.h)("div",{id:"read-along-container",class:"read-along-container"},(0,r.h)("div",{id:"title__slot__container"},(0,r.h)("h1",{class:"slot__header"},(0,r.h)("slot",{name:"read-along-header"})),(0,r.h)("h3",{class:"slot__subheader"},(0,r.h)("slot",{name:"read-along-subheader"}))),Object.entries(this.assetsStatus).map((e=>{let t=e[0],n=e[1];if(2===n){let e=this.getPathFromAssetType(t);return(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("parse-error",{FILETYPE:t,FILENAME:e}),data_cy:t+"-error"})}if(3===n){let e=this.getPathFromAssetType(t);return(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("loading-error",{FILETYPE:t,FILENAME:e}),data_cy:t+"-error"})}})),this.alignment_failed&&1===this.assetsStatus.RAS&&(0,r.h)(this.ErrorMessage,{msg:this.getI18nString("alignment-error"),data_cy:"alignment-error"}),(0,r.h)("div",{onScroll:()=>{this.handleScrollEvent()},"data-cy":"text-container",class:"pages__container theme--"+this.theme+" "+this.pageScrolling},this.showGuide?(0,r.h)(this.Guide,null):null,1==this.assetsStatus.RAS&&this.parsed_text.map((e=>(0,r.h)(this.Page,{pageData:e}))),this.hasLoaded<2&&(0,r.h)("div",{class:"loader"})),this.alignment_failed||(0,r.h)("div",{onClick:e=>this.goToSeekFromProgress(e),id:"all","data-cy":"progress-bar",class:"overlay__container theme--"+this.theme+" background--"+this.theme},this.svgOverlay?(0,r.h)(this.Overlay,null):null),1==this.assetsStatus.AUDIO&&(0,r.h)(this.ControlPanel,null),this.cssUrl&&null!=this.cssUrl.match(".css")&&(0,r.h)("link",{href:this.cssUrl,rel:"stylesheet"}))}static get assetsDirs(){return["assets"]}get el(){return(0,r.g)(this)}};B.style='.font-weight--100{font-weight:100}.font-weight--200{font-weight:200}.font-weight--300{font-weight:300}.font-weight--400{font-weight:400}.font-weight--500{font-weight:500}.font-weight--600{font-weight:600}.font-weight--700{font-weight:700}.font-weight--800{font-weight:800}.font-weight--900{font-weight:900}.shadowed{text-shadow:0.3px 0.2px black}.theme--light.sentence,.theme--light.page__col__image,.theme--light.page__container,.theme--light.scroll-guide__container{background-color:#fff}.theme--dark.sentence,.theme--dark.page__col__image,.theme--dark.page__container,.theme--dark.scroll-guide__container{background-color:#3c4369}.sentence__word,.sentence__text,.scroll-guide__text{line-height:1.5;border-radius:0.3125em;position:relative;padding:0.0625em;font-size:1em}.theme--light.ripple,.theme--light.reading,.theme--light.sentence__word,.theme--light.sentence__text,.theme--light.scroll-guide__text{color:#040508}.theme--dark.ripple,.theme--dark.reading,.theme--dark.sentence__word,.theme--dark.sentence__text,.theme--dark.scroll-guide__text{color:#fff}.theme--light.ripple:active,.theme--light.reading:active,.theme--light.sentence__word:hover{color:#fff;background:gray radial-gradient(circle, transparent 1%, gray 1%) center/15000%}.theme--dark.ripple:active,.theme--dark.reading:active,.theme--dark.sentence__word:hover{color:#fff;background:#a6a6a6 radial-gradient(circle, transparent 1%, #a6a6a6 1%) center/15000%}.theme--light.sentence__word.reading{color:#fff;background:#666666 radial-gradient(circle, transparent 1%, #666666 1%) center/15000%}.theme--dark.sentence__word.reading{color:#040508;background:#fff radial-gradient(circle, transparent 1%, #fff 1%) center/15000%}.theme--light.page__col__img-placeholder{border:0.046875em dotted gray}.theme--dark.page__col__img-placeholder{border:0.046875em dotted #a6a6a6}.theme--light.scroll-guide__container,.theme--light.overlay__container{border:0.046875em solid gray}.theme--dark.scroll-guide__container,.theme--dark.overlay__container{border:0.046875em solid #a6a6a6}.theme--light.page--multi,.theme--light.pages__container,.theme--light.control-panel{border-left:0.046875em solid gray}.theme--dark.page--multi,.theme--dark.pages__container,.theme--dark.control-panel{border-left:0.046875em solid #a6a6a6}.theme--light.page--multi,.theme--light.pages__container,.theme--light.control-panel{border-right:0.046875em solid gray}.theme--dark.page--multi,.theme--dark.pages__container,.theme--dark.control-panel{border-right:0.046875em solid #a6a6a6}.theme--light.pages__container{border-top:0.046875em solid gray}.theme--dark.pages__container{border-top:0.046875em solid #a6a6a6}.theme--light.control-panel{border-bottom:0.046875em solid gray}.theme--dark.control-panel{border-bottom:0.046875em solid #a6a6a6}.ripple:hover,.reading:hover,.sentence__word:hover{cursor:pointer}@viewport{width:device-width}button{border:0;cursor:pointer}html{background-color:#fff;box-sizing:border-box;height:100%}*:before,*:after{box-sizing:inherit}body{-webkit-font-smoothing:antialiased;color:#040508;font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif;min-height:100%;overflow-x:hidden;overflow-y:hidden;text-rendering:optimizeLegibility}a{background:transparent;color:#c69;text-decoration:none;transition:color 0.2s;outline:none}a:active,a:focus{outline:none}img{height:90%;max-width:90%;object-fit:cover}h1,h2,h3,h4,h5,h6{font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif;font-weight:normal}p,mat-chip,mat-tab-label,span,button,div,a{font-family:"BCSans", "Noto Sans", Verdana, Arial, sans-serif}.theme--light::-webkit-scrollbar{width:0.5em;height:0.5em}.theme--light::-webkit-scrollbar-track{background:#fff}.theme--light::-webkit-scrollbar-thumb{background:#040508;border-radius:0.3125em;height:0.625em;width:0.625em}.theme--dark::-webkit-scrollbar{width:0.5em;height:0.5em}.theme--dark::-webkit-scrollbar-track{background:#3c4369}.theme--dark::-webkit-scrollbar-thumb{background:#fff;border-radius:0.3125em;height:0.625em;width:0.625em}.bg-img{background-image:url("../assets/img/bg.jpg");height:100vh;overflow:overlay;overflow-x:hidden;background-position:center;background-repeat:no-repeat;background-size:cover;min-height:100%}.shadow-box{box-shadow:0 0.3125rem 1rem 0 rgba(0, 0, 0, 0.24);padding:25px;background:rgba(255, 255, 255, 0.94);border-radius:5px}.font-xs{font-size:0.5em}.font-sm{font-size:0.75em}.font-md{font-size:1em}.font-lg{font-size:1.25em}.font-xl{font-size:1.5em}.font-xxl{font-size:2em}.faded{opacity:0.2;color:black}table{table-layout:fixed}.center{margin-left:auto;margin-right:auto;text-align:center}.container{max-width:80em}.background--light{background:#fff}.stop-color--light{fill:#fff}.color--light{color:#040508}.background--dark{background:#3c4369}.stop-color--dark{fill:#3c4369}.color--dark{color:#fff}.abs{position:absolute}.top-0{top:0}.left-0{left:0}.right-0{right:0}.top-5{top:0.3125em}.left-5{left:0.3125em}.right-5{right:0.3125em}.top-10{top:0.625em}.left-10{left:0.625em}.right-10{right:0.625em}.top-15{top:0.9375em}.left-15{left:0.9375em}.right-15{right:0.9375em}.top-20{top:1.25em}.left-20{left:1.25em}.right-20{right:1.25em}.top-25{top:1.5625em}.left-25{left:1.5625em}.right-25{right:1.5625em}.top-30{top:1.875em}.left-30{left:1.875em}.right-30{right:1.875em}.top-35{top:2.1875em}.left-35{left:2.1875em}.right-35{right:2.1875em}.top-40{top:2.5em}.left-40{left:2.5em}.right-40{right:2.5em}.top-45{top:2.8125em}.left-45{left:2.8125em}.right-45{right:2.8125em}.top-50{top:3.125em}.left-50{left:3.125em}.right-50{right:3.125em}.invisible{visibility:hidden !important}.control-panel{border-radius:0 0 0.3125em 0.3125em;position:relative;min-width:100%;display:inline-flex}.control-panel__buttons--left{width:25%;float:left;margin-top:0.3125em;padding:0.3125em}.control-panel__buttons--center{width:25%;text-align:center;margin:0 auto}.control-panel__buttons--right{width:25%;text-align:right;float:right;margin-top:0.3125em;margin-right:0.3125em}.control-panel__buttons__header{margin:0.3125em}.control-panel__control{border-radius:0.3125em;margin:0.5em auto}.control-panel__control:focus{outline:none}.settings{margin-left:0;margin-right:0;text-align:center}.settings__option__header{margin-bottom:0.5em}#waveform{background-size:contain;background-repeat:no-repeat;background-position:center center;width:100%;height:100%;position:absolute;top:0;left:0}.low{z-index:700}.overlay__container{width:100%;max-width:100%;height:3.125em;position:relative;z-index:8000}#overlay__object{z-index:700;max-height:100%;min-width:100%;fill:"transparent"}#overlay__object.theme--light{stroke:gray}#overlay__object.theme--dark{stroke:#a6a6a6}.scroll-guide__container{text-align:center;z-index:700;width:20%;position:fixed;left:50%;transform:translate(-50%, 0)}.scroll-guide__text{font-size:1.25em}.pages__container{overflow:auto;max-height:55vh;height:100%;max-width:100%;width:100%;position:relative;display:-webkit-inline-flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;border-radius:0.3125em 0.3125em 0 0}.page{overflow-y:hidden;overflow-x:auto;flex-grow:1;min-width:99.6%;width:100%;max-width:55em}.page__container{display:grid;grid-template-columns:[col-start] [col-end];grid-template-rows:[row-start] 5% [row-end] 95%;grid-template-areas:"image page-no" "image text";justify-items:stretch}.page__counter{grid-area:page-no;margin:0.625em 0 0 0.9375em;text-align:right;padding-right:0.9375em;max-height:5rem}.page__col__image{grid-area:image;max-height:100%;text-align:center;margin:5%;padding:0;border-radius:0 0 0 0;position:relative}.page__col__image img{max-height:55vh;max-width:95%;object-fit:contain}.page__col__img-placeholder{cursor:pointer}.page__col__text{grid-area:text}.page.two-column-layout-page{grid-template-columns:40% auto}.page.one-column-layout-page{display:grid;grid-template-columns:auto;grid-template-rows:[row-start] 5% [row-end] 95%;grid-template-areas:"page-no" "text";justify-items:stretch}.page.one-column-layout-page .page__col__image{grid-area:text}.hide-page-counter .page__counter{display:none}.pages__container.vertical{flex-direction:column !important}.pages__container.vertical>.page{min-height:100%}.paragraph__container{overflow-y:auto;min-width:40%;padding-bottom:0.75em}.sentence{margin:0 1.5em;text-align:left;max-width:90%}.sentence__container{margin:3.75em 0.625em 3.75em 0.625em;scroll-behavior:smooth;max-width:100%;position:relative;overflow-y:auto;overflow-x:hidden}.sentence__container__buttons{position:absolute;top:0;right:0}.sentence__text{font-size:1.5em;padding:0}.sentence__word{font-size:1.5em}.sentence__translation .sentence__text,.sentence__translation .sentence__word{color:#777;font-style:italic;font-size:95%}.sentence__translation__button{margin-left:10px}.sentence__translation__button i{font-size:medium}.paragraph.visually_aligned .sentence .sentence__text,.paragraph.visually_aligned .sentence .sentence__word{display:table-cell}.paragraph.visually_aligned .sentence .sentence__text:empty{display:none}.paragraph.visually_aligned{display:table}.paragraph.visually_aligned .sentence{display:table-row}.read-along-container{max-width:75em;margin:0 auto;overflow-y:hidden;overflow-x:hidden;padding:0.3125em;position:relative}.read-along-container--fullscreen{max-width:80%;min-width:80%}.slot__header{margin-bottom:0.3125em}.slot__subheader{margin-top:0;margin-left:1em}.loader{border:16px solid #eee;border-radius:50%;border-right-color:#aa0;border-bottom-color:#a33;border-left-color:#111;width:10rem;height:10rem;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite;position:fixed;top:calc(50vh - 10rem);left:calc(50vw - 10rem);z-index:1000;box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:0.25rem;transition-delay:2s;transition:visibility 5s height 5s}.alert.status-success{color:#0f5132;background-color:#d1e7dd;border-color:#badbcc}.alert.status-error{color:#842029;background-color:#f8d7da;border-color:#f5c2c7}.alert.fade{visibility:collapse;height:0 !important;overflow:hidden !important;line-height:0 !important;padding:0 !important;margin:0 !important;border:0 !important}.animate-transition,.ripple,.reading{transition:background 0.4s}.animate-transition:active,.ripple:active,.reading:active{transition:background 0s}.ripple,.reading{background-position:center;padding:0.0625em}.ripple:active,.reading:active{background-size:100%}.progress{position:absolute;top:0;left:0;height:100%;width:0}.progress.theme--light{background-color:rgba(128, 128, 128, 0.2)}.progress.theme--dark{background-color:rgba(166, 166, 166, 0.2)}.material-icons{font-family:"Material Icons";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}.material-icons-outlined{font-family:"Material Icons Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}[contenteditable][data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:gray;cursor:text;background-color:transparent}.drop-area{border:2px dashed #ccc;border-radius:20px;width:50%;font-family:sans-serif;margin:50px auto;padding:20px}.drop-area.highlight{border-color:purple}p{margin-top:0}.my-form{margin-bottom:10px}#gallery{margin-top:10px}#gallery img{width:150px;margin-bottom:10px;margin-right:10px;vertical-align:middle}.button{display:inline-block;padding:10px;background:#ccc;cursor:pointer;border-radius:5px;border:1px solid #ccc}.button:hover{background:#ddd}.fileElem{display:none}#img-remover{margin:60px;position:absolute;z-index:9999;border-radius:50px;color:red}#image-container{display:contents}'},131:(e,t,n)=>{var r={"./read-along.entry.js":[704,179]};function o(e){if(!n.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],o=t[0];return n.e(t[1]).then((()=>n(o)))}o.keys=()=>Object.keys(r),o.id=131,e.exports=o}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.e=()=>Promise.resolve(),n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{"use strict";var e=n(678);(()=>{const t="file:///Users/pinea/Web-Component/dist/packages/web-component/dist/esm/web-component.js",n={};return n.resourcesUrl=new URL(".",t).href,(0,e.p)(n)})().then((t=>(0,e.b)([["read-along",[[1,"read-along",{href:[1],audio:[1],svgOverlay:[1,"svg-overlay"],theme:[1537],language:[1537],cssUrl:[1,"css-url"],imageAssetsFolder:[1,"image-assets-folder"],pageScrolling:[1,"page-scrolling"],mode:[1],scrollBehaviour:[1,"scroll-behaviour"],displayTranslation:[4,"display-translation"],playbackRateRange:[2,"playback-rate-range"],playing:[32],fullscreen:[32],autoScroll:[32],hasLoaded:[32],images:[32],translations:[32],getImages:[64],getTranslations:[64],changeTheme:[64]},[[9,"wheel","wheelHandler"]]]]]],t)))})()})(); \ No newline at end of file diff --git a/packages/web-component/package.json b/packages/web-component/package.json index 9ea73f57..efcd0d61 100644 --- a/packages/web-component/package.json +++ b/packages/web-component/package.json @@ -1,6 +1,6 @@ { "name": "@readalongs/web-component", - "version": "1.1.1", + "version": "1.2.0", "description": "ReadAlong Web Component", "main": "dist/index.cjs.js", "module": "dist/index.js", diff --git a/packages/web-component/src/components.d.ts b/packages/web-component/src/components.d.ts index f589fbf1..36257608 100644 --- a/packages/web-component/src/components.d.ts +++ b/packages/web-component/src/components.d.ts @@ -36,6 +36,10 @@ export namespace Components { * URL of the aligned text as readalong XML */ "href": string; + /** + * Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images. + */ + "imageAssetsFolder": string; /** * Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) */ @@ -64,10 +68,6 @@ export namespace Components { * Theme to use: ['light', 'dark'] defaults to 'dark' */ "theme": string; - /** - * Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility - */ - "useAssetsFolder": boolean; } } declare global { @@ -99,6 +99,10 @@ declare namespace LocalJSX { * URL of the aligned text as readalong XML */ "href"?: string; + /** + * Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images. + */ + "imageAssetsFolder"?: string; /** * Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) */ @@ -127,10 +131,6 @@ declare namespace LocalJSX { * Theme to use: ['light', 'dark'] defaults to 'dark' */ "theme"?: string; - /** - * Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility - */ - "useAssetsFolder"?: boolean; } interface IntrinsicElements { "read-along": ReadAlong; diff --git a/packages/web-component/src/components/read-along-component/read-along.tsx b/packages/web-component/src/components/read-along-component/read-along.tsx index 35d487e0..989b9fc3 100644 --- a/packages/web-component/src/components/read-along-component/read-along.tsx +++ b/packages/web-component/src/components/read-along-component/read-along.tsx @@ -96,11 +96,13 @@ export class ReadAlongComponent { @Prop() cssUrl?: string; /** - * Toggle the use of assets folder for resolving urls. Defaults to on - * to maintain backwards compatibility + * Toggle the use of an assets folder. All image paths + * will be prefixed with this. Defaults to 'assets'. + * .readalong files should just contain base filenames + * not the full paths to the images. */ - @Prop() useAssetsFolder: boolean = true; + @Prop() imageAssetsFolder: string = "assets/"; /** * Toggles the page scrolling from horizontal to vertical. Defaults to horizontal @@ -208,11 +210,12 @@ export class ReadAlongComponent { */ private urlTransform(path: string): string { if ( - this.useAssetsFolder && + this.imageAssetsFolder && looksLikeRelativePath(path) && !path.startsWith("blob") - ) - return "assets/" + path; + ) { + return this.imageAssetsFolder + path; + } return path; function looksLikeRelativePath(path: string): boolean { diff --git a/packages/web-component/src/components/read-along-component/readme.md b/packages/web-component/src/components/read-along-component/readme.md index dbcd9487..4c6fdc04 100644 --- a/packages/web-component/src/components/read-along-component/readme.md +++ b/packages/web-component/src/components/read-along-component/readme.md @@ -7,20 +7,20 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- | -| `audio` | `audio` | URL of the audio file | `string` | `undefined` | -| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` | -| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` | -| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` | -| `language` | `language` | Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) | `"eng" \| "fra" \| "spa"` | `"eng"` | -| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` | -| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` | -| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` | -| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` | -| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` | -| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `"light"` | -| `useAssetsFolder` | `use-assets-folder` | Toggle the use of assets folder for resolving urls. Defaults to on to maintain backwards compatibility | `boolean` | `true` | +| Property | Attribute | Description | Type | Default | +| -------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------------- | +| `audio` | `audio` | URL of the audio file | `string` | `undefined` | +| `cssUrl` | `css-url` | Optional custom Stylesheet to override defaults | `string` | `undefined` | +| `displayTranslation` | `display-translation` | Show text translation on at load time | `boolean` | `true` | +| `href` | `href` | URL of the aligned text as readalong XML | `string` | `undefined` | +| `imageAssetsFolder` | `image-assets-folder` | Toggle the use of an assets folder. All image paths will be prefixed with this. Defaults to 'assets'. .readalong files should just contain base filenames not the full paths to the images. | `string` | `"assets/"` | +| `language` | `language` | Language of the interface. In 639-3 code. Options are "eng" (English), "fra" (French) or "spa" (Spanish) | `"eng" \| "fra" \| "spa"` | `"eng"` | +| `mode` | `mode` | Choose mode of ReadAlong - either view (default) or edit | `"EDIT" \| "VIEW"` | `"VIEW"` | +| `pageScrolling` | `page-scrolling` | Toggles the page scrolling from horizontal to vertical. Defaults to horizontal | `"horizontal" \| "vertical"` | `"horizontal"` | +| `playbackRateRange` | `playback-rate-range` | Control the range of the playback rate: allow speeds from 100 - playback-rate-range to 100 + playback-rate-range. | `number` | `15` | +| `scrollBehaviour` | `scroll-behaviour` | Select whether scrolling between pages should be "smooth" (default nicely animated, good for fast computers) or "auto" (choppy but much less compute intensive) | `"auto" \| "smooth"` | `"smooth"` | +| `svgOverlay` | `svg-overlay` | Overlay This is an SVG overlay to place over the progress bar | `string` | `undefined` | +| `theme` | `theme` | Theme to use: ['light', 'dark'] defaults to 'dark' | `string` | `"light"` | ## Methods