@aarsteinmedia/dotlottie-player 4.0.9 → 4.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/custom-elements.json +1 -1
- package/dist/cjs/index.js +18 -6
- package/dist/esm/index.js +18 -6
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/package.json +20 -19
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
|
|
9
9
|
|
|
10
|
+
## [4.0.11] - 02-12-2024
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Improved type safety and error handling
|
|
15
|
+
|
|
16
|
+
## [4.0.10] - 20-11-2024
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Better attribute handling
|
|
21
|
+
|
|
10
22
|
## [4.0.9] - 12-11-2024
|
|
11
23
|
|
|
12
24
|
### Changed
|
|
@@ -164,6 +176,8 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
|
|
|
164
176
|
- Removed dependencies
|
|
165
177
|
- `@lit`
|
|
166
178
|
|
|
179
|
+
[4.0.11]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.11
|
|
180
|
+
[4.0.10]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.10
|
|
167
181
|
[4.0.9]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.9
|
|
168
182
|
[4.0.8]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.8
|
|
169
183
|
[4.0.7]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.7
|
package/custom-elements.json
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
{
|
|
10
10
|
"kind": "variable",
|
|
11
11
|
"name": "DotLottiePlayer",
|
|
12
|
-
"default": "class extends EnhancedElement{async connectedCallback(){super.connectedCallback(),this._render(),this._container=this.shadow.querySelector(\".animation\"),this._renderControls(),void 0!==document.hidden&&document.addEventListener(\"visibilitychange\",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange)}static get observedAttributes(){return[\"animateOnScroll\",\"autoplay\",\"controls\",\"direction\",\"hover\",\"loop\",\"mode\",\"speed\",\"src\",\"subframe\"]}async attributeChangedCallback(t,e,i){if(this._lottieInstance){if(\"animateOnScroll\"===t){if(\"\"===i||i){this._lottieInstance.autoplay=!1,addEventListener(\"scroll\",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener(\"scroll\",this._handleScroll,!0)}if(\"autoplay\"===t){if(this.animateOnScroll)return;if(\"\"===i||i){this.play();return}this.stop()}if(\"controls\"===t&&this._renderControls(),\"direction\"===t){if(-1===Number(i))return this.setDirection(-1);this.setDirection(1)}if(\"hover\"===t&&this._container){if(\"\"===i||i){this._container.addEventListener(\"mouseenter\",this._mouseEnter),this._container.addEventListener(\"mouseleave\",this._mouseLeave);return}this._container.removeEventListener(\"mouseenter\",this._mouseEnter),this._container.removeEventListener(\"mouseleave\",this._mouseLeave)}if(\"loop\"===t){let t=this.shadow.querySelector(\".toggleLoop\");t instanceof HTMLButtonElement&&(t.dataset.active=i),this.setLoop(\"\"===i||!!i)}if(\"mode\"===t){let t=this.shadow.querySelector(\".toggleBoomerang\");t instanceof HTMLButtonElement&&(t.dataset.active=(i===PlayMode.Bounce).toString()),this._isBounce=i===PlayMode.Bounce}if(\"speed\"===t){let t=Number(i);t&&!isNaN(t)&&this.setSpeed(t)}\"src\"===t&&await this.load(i),\"subframe\"===t&&this.setSubframe(\"\"===i||!!i)}}static get observedProperties(){return[\"playerState\",\"_isSettingsOpen\",\"_seeker\",\"_currentAnimation\",\"_animations\"]}propertyChangedCallback(t,e,i){if(!this.shadow)return;let s=this.shadow.querySelector(\".togglePlay\"),r=this.shadow.querySelector(\".stop\"),n=this.shadow.querySelector(\".prev\"),a=this.shadow.querySelector(\".next\"),o=this.shadow.querySelector(\".seeker\"),h=this.shadow.querySelector(\"progress\"),l=this.shadow.querySelector(\".popover\"),p=this.shadow.querySelector(\".convert\");s instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&(\"playerState\"===t&&(s.dataset.active=(i===PlayerState.Playing||i===PlayerState.Paused).toString(),r.dataset.active=(i===PlayerState.Stopped).toString(),i===PlayerState.Playing?s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z\"/></svg>':s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8.016 5.016L18.985 12 8.016 18.984V5.015z\"/></svg>'),\"_seeker\"===t&&\"number\"==typeof i&&(o.value=i.toString(),o.ariaValueNow=i.toString(),h.value=i),\"_animations\"===t&&Array.isArray(i)&&this._currentAnimation+1<i.length&&(a.hidden=!1),\"_currentAnimation\"===t&&\"number\"==typeof i&&(i+1>=this._animations.length?a.hidden=!0:a.hidden=!1,i?n.hidden=!1:n.hidden=!0),\"_isSettingsOpen\"===t&&\"boolean\"==typeof i&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&(l.hidden=!i,p.hidden=this._isDotLottie))}set animateOnScroll(t){this.setAttribute(\"animateOnScroll\",(!!t).toString())}get animateOnScroll(){let t=this.getAttribute(\"animateOnScroll\");return\"true\"===t||\"\"===t||\"1\"===t}set autoplay(t){this.setAttribute(\"autoplay\",(!!t).toString())}get autoplay(){let t=this.getAttribute(\"autoplay\");return\"true\"===t||\"\"===t||\"1\"===t}set background(t){this.setAttribute(\"background\",t)}get background(){return this.getAttribute(\"background\")||\"transparent\"}set controls(t){this.setAttribute(\"controls\",(!!t).toString())}get controls(){let t=this.getAttribute(\"controls\");return\"true\"===t||\"\"===t||\"1\"===t}set count(t){this.setAttribute(\"count\",t.toString())}get count(){let t=this.getAttribute(\"count\");return t?Number(t):0}set description(t){this.setAttribute(\"description\",t)}get description(){return this.getAttribute(\"description\")||\"\"}set direction(t){this.setAttribute(\"direction\",t.toString())}get direction(){let t=Number(this.getAttribute(\"direction\"));return -1===t?t:1}set hover(t){this.setAttribute(\"hover\",t.toString())}get hover(){let t=this.getAttribute(\"hover\");return\"true\"===t||\"\"===t||\"1\"===t}set intermission(t){this.setAttribute(\"intermission\",t.toString())}get intermission(){let t=Number(this.getAttribute(\"intermission\"));return isNaN(t)?0:t}set loop(t){this.setAttribute(\"loop\",(!!t).toString())}get loop(){let t=this.getAttribute(\"loop\");return\"true\"===t||\"\"===t||\"1\"===t}set mode(t){this.setAttribute(\"mode\",t.toString())}get mode(){let t=this.getAttribute(\"mode\");return t===PlayMode.Bounce?t:PlayMode.Normal}set objectfit(t){this.setAttribute(\"objectfit\",t)}get objectfit(){let t=this.getAttribute(\"objectfit\");return t&&Object.values(ObjectFit).includes(t)?t:ObjectFit.Contain}set preserveAspectRatio(t){this.setAttribute(\"preserveAspectRatio\",t||PreserveAspectRatio.Contain)}get preserveAspectRatio(){let t=this.getAttribute(\"preserveAspectRatio\");return t&&Object.values(PreserveAspectRatio).includes(t)?t:null}set renderer(t){this.setAttribute(\"renderer\",t)}get renderer(){let t=this.getAttribute(\"renderer\");return\"canvas\"===t||\"html\"===t?t:\"svg\"}set simple(t){this.setAttribute(\"simple\",t.toString())}get simple(){let t=this.getAttribute(\"simple\");return\"true\"===t||\"\"===t||\"1\"===t}set speed(t){this.setAttribute(\"speed\",t?.toString())}get speed(){let t=this.getAttribute(\"speed\");return null===t||isNaN(Number(t))?1:Number(t)}set src(t){this.setAttribute(\"src\",t||\"\")}get src(){return this.getAttribute(\"src\")}set subframe(t){this.setAttribute(\"subframe\",(!!t).toString())}get subframe(){let t=this.getAttribute(\"subframe\");return\"true\"===t||\"\"===t||\"1\"===t}getMultiAnimationSettings(){return this._multiAnimationSettings}setMultiAnimationSettings(t){this._multiAnimationSettings=t}setSegment(t){this._segment=t}getSegment(){return this._segment}_getOptions(){if(!this._container)throw Error(\"Container not rendered\");let t=this.preserveAspectRatio??(this.objectfit&&aspectRatio(this.objectfit)),e=this._multiAnimationSettings?.length?this._multiAnimationSettings?.[this._currentAnimation]:void 0,i=this._manifest.animations?.[this._currentAnimation],s=!!this.loop;void 0!==i.loop&&void 0===this.loop&&(s=!!i.loop),e?.loop!==void 0&&(s=!!e.loop);let r=!!this.autoplay;void 0!==i.autoplay&&void 0===this.autoplay&&(r=!!i.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let n=this._segment;this._segment?.every(t=>t>0)&&(n=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(n=void 0);let a={autoplay:r,container:this._container,initialSegment:n,loop:s,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case\"svg\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"canvas\":a.rendererSettings={...a.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"html\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0}}return a}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&\"IntersectionObserver\"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{for(let e of t){if(!e.isIntersecting||document.hidden){this.playerState===PlayerState.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==PlayerState.Frozen||this.play(),this._playerState.scrollY||(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container))}async load(t){if(!this.shadowRoot||!t)return;try{let{animations:e,isDotLottie:i,manifest:s}=await getAnimationData(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error(\"Broken or corrupted file\");this._isBounce=this.mode===PlayMode.Bounce,this._multiAnimationSettings?.length&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._isDotLottie=!!i,this._animations=e,this._manifest=s??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:useId(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance&&this._lottieInstance.destroy(),this.playerState=PlayerState.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings?.[this._currentAnimation]?.autoplay)&&(this.playerState=PlayerState.Playing),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]})}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}this._addEventListeners();let e=this._multiAnimationSettings?.[this._currentAnimation]?.speed??this.speed??this._manifest.animations[this._currentAnimation].speed,i=this._multiAnimationSettings?.[this._currentAnimation]?.direction??this.direction??this._manifest.animations[this._currentAnimation].direction??1;this._lottieInstance.setSpeed(e),this._lottieInstance.setDirection(i),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll)&&(-1===this.direction&&this.seek(\"99%\"),\"IntersectionObserver\"in window||(this.animateOnScroll||this.play(),this._playerState.visible=!0),this._addIntersectionObserver())}getManifest(){return this._manifest}_toggleEventListeners(t){let e=\"add\"===t?\"addEventListener\":\"removeEventListener\";this._lottieInstance&&(this._lottieInstance[e](\"enterFrame\",this._enterFrame),this._lottieInstance[e](\"complete\",this._complete),this._lottieInstance[e](\"loopComplete\",this._loopComplete),this._lottieInstance[e](\"DOMLoaded\",this._DOMLoaded),this._lottieInstance[e](\"data_ready\",this._dataReady),this._lottieInstance[e](\"data_failed\",this._dataFailed)),this._container&&this.hover&&(this._container[e](\"mouseenter\",this._mouseEnter),this._container[e](\"mouseleave\",this._mouseLeave)),window[e](\"focus\",this._handleWindowBlur,{capture:!1,passive:!0}),window[e](\"blur\",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e](\"scroll\",this._handleScroll,{capture:!0,passive:!0})}_addEventListeners(){this._toggleEventListeners(\"add\")}_removeEventListeners(){this._toggleEventListeners(\"remove\")}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,i=this._segment?this._segment[0]:0,s=this._segment?this._segment[0]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?i:.99*s,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*s:i,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:t,seeker:this._seeker}}))}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings?.[this._currentAnimation+1]?.autoplay)return this.next();if(this.loop&&this._currentAnimation===this._animations.length-1)return this._currentAnimation=0,this._switchInstance()}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete,{detail:{frame:t,seeker:this._seeker}}))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}_dataReady(){this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}_dataFailed(){this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}_handleWindowBlur({type:t}){this.playerState===PlayerState.Playing&&\"blur\"===t&&this._freeze(),this.playerState===PlayerState.Frozen&&\"focus\"===t&&this.play()}_mouseEnter(){this.hover&&this.playerState!==PlayerState.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===PlayerState.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===PlayerState.Playing){this._freeze();return}this.playerState===PlayerState.Frozen&&this.play()}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(isServer()){console.warn(\"DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.\");return}if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=PlayerState.Paused},400);let t=Math.min(Math.max((scrollY>this._playerState.scrollY?scrollY-this._playerState.scrollY:this._playerState.scrollY-scrollY)/3,1),3*this._lottieInstance.totalFrames)/3;requestAnimationFrame(()=>{t<(this._lottieInstance?.totalFrames??0)?(this.playerState=PlayerState.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=PlayerState.Paused})}}}_handleSeekChange({target:t}){!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value))||this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_isLottie(t){return[\"v\",\"ip\",\"op\",\"layers\",\"fr\",\"w\",\"h\"].every(e=>Object.prototype.hasOwnProperty.call(t,e))}async addAnimation(t,e,i=!0){let{animations:s=[],manifest:r={animations:this.src?[{id:this._identifier}]:[]}}=this.src?await getAnimationData(this.src):{};try{for(let e of(r.generator=pkg.name,t)){let{url:t}=e,{animations:i}=await getAnimationData(t);if(!i)throw Error(\"No animation loaded\");if(r.animations.some(({id:t})=>t===e.id))throw Error(\"Duplicate id for animation\");r.animations=[...r.animations,{id:e.id}],s?.push(...i)}return{result:await createDotLottie({animations:s,fileName:e,manifest:r,shouldDownload:i}),success:!0}}catch(t){return{error:handleErrors(t).message,success:!1}}}getLottie(){return this._lottieInstance}async play(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(PlayerEvents.Play))}finally{this.playerState=PlayerState.Playing}}}pause(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause))}finally{this.playerState=PlayerState.Paused}}}stop(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState),this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop))}finally{this.playerState=PlayerState.Stopped}}}destroy(){this._lottieInstance&&(this.playerState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^([0-9]+)(%?)$/);if(!e)return;let i=Math.round(\"%\"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=i,this.playerState===PlayerState.Playing||this.playerState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing){this._lottieInstance.goToAndPlay(i,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance.goToAndStop(i,!0),this._lottieInstance.pause()}snapshot(t=!0,e=\"AM Lottie\"){try{if(!this.shadowRoot)throw Error(\"Unknown error\");let i=this.shadowRoot.querySelector(\".animation svg\"),s=i instanceof Node?new XMLSerializer().serializeToString(i):null;if(!s)throw Error(\"Could not serialize data\");return t&&download(s,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src||e)}-${frameOutput(this._seeker)}.svg`}),s}catch(t){return console.error(t),null}}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}setCount(t){this.count=t}_freeze(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze))}finally{this.playerState=PlayerState.Frozen}}}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:i}=this._lottieInstance;return this.playerState===PlayerState.Playing?this.pause():this.playerState!==PlayerState.Completed?this.play():(this.playerState=PlayerState.Playing,this._isBounce)?(this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0)):-1===e?this._lottieInstance.goToAndPlay(i,!0):this._lottieInstance.goToAndPlay(0,!0)}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}toggleBoomerang(){let t=this._multiAnimationSettings?.[this._currentAnimation];if(t?.mode!==void 0){if(t.mode===PlayMode.Normal){t.mode=PlayMode.Bounce,this._isBounce=!0;return}t.mode=PlayMode.Normal,this._isBounce=!1;return}if(this.mode===PlayMode.Normal){this.mode=PlayMode.Bounce,this._isBounce=!0;return}this.mode=PlayMode.Normal,this._isBounce=!1}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}_handleBlur(){setTimeout(()=>this._toggleSettings(!1),200)}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings?.[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?PlayerEvents.Previous:PlayerEvents.Next)),this._multiAnimationSettings?.[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Paused;return}this._lottieInstance?.goToAndPlay(0,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Stopped}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance(!0)}async convert({animations:t,fileName:e,manifest:i,shouldDownload:s=!0,src:r,typeCheck:n}){return n||this._isDotLottie?createJSON({animation:(await getAnimationData(r||this.src))?.animations?.[0],fileName:`${getFilename(e||this.src||\"converted\")}.json`,shouldDownload:s}):createDotLottie({animations:t||(await getAnimationData(this.src))?.animations,fileName:`${getFilename(e||this.src||\"converted\")}.lottie`,manifest:{...i||this._manifest,generator:pkg.name},shouldDownload:s})}static get styles(){let t=new CSSStyleSheet;return t.replace(css_248z),t}constructor(){super(),this._renderControls=renderControls,this._render=renderPlayer,this._multiAnimationSettings=[],this.playerState=PlayerState.Loading,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId(\"dotlottie\"),this._errorMessage=\"Something went wrong\",this._isBounce=!1,this._isDotLottie=!1,this._playerState={count:0,loaded:!1,prev:PlayerState.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._handleSettingsClick=({target:t})=>{this._toggleSettings(),t instanceof HTMLElement&&t.focus()},this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this._renderControls=this._renderControls.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.convert=this.convert.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement(\"template\"),this.shadow=this.attachShadow({mode:\"open\"})}}"
|
|
12
|
+
"default": "class extends EnhancedElement{async connectedCallback(){super.connectedCallback(),this._render(),this._container=this.shadow.querySelector(\".animation\"),this._renderControls(),void 0!==document.hidden&&document.addEventListener(\"visibilitychange\",this._onVisibilityChange),this._addIntersectionObserver(),await this.load(this.src),this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered))}disconnectedCallback(){this._intersectionObserver&&(this._intersectionObserver.disconnect(),this._intersectionObserver=void 0),this._lottieInstance&&this._lottieInstance.destroy(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange)}static get observedAttributes(){return[\"animateOnScroll\",\"autoplay\",\"controls\",\"direction\",\"hover\",\"loop\",\"mode\",\"speed\",\"src\",\"subframe\"]}async attributeChangedCallback(t,e,i){if(this._lottieInstance){if(\"animateOnScroll\"===t){if(\"\"===i||i){this._lottieInstance.autoplay=!1,addEventListener(\"scroll\",this._handleScroll,{capture:!0,passive:!0});return}removeEventListener(\"scroll\",this._handleScroll,!0)}if(\"autoplay\"===t){if(this.animateOnScroll)return;if(\"\"===i||i){this.play();return}this.stop()}if(\"controls\"===t&&this._renderControls(),\"direction\"===t){if(-1===Number(i))return this.setDirection(-1);this.setDirection(1)}if(\"hover\"===t&&this._container){if(\"\"===i||i){this._container.addEventListener(\"mouseenter\",this._mouseEnter),this._container.addEventListener(\"mouseleave\",this._mouseLeave);return}this._container.removeEventListener(\"mouseenter\",this._mouseEnter),this._container.removeEventListener(\"mouseleave\",this._mouseLeave)}if(\"loop\"===t){let t=this.shadow.querySelector(\".toggleLoop\");t instanceof HTMLButtonElement&&(t.dataset.active=i),this.setLoop(\"\"===i||!!i)}if(\"mode\"===t){let t=this.shadow.querySelector(\".toggleBoomerang\");t instanceof HTMLButtonElement&&(t.dataset.active=(i===PlayMode.Bounce).toString()),this._isBounce=i===PlayMode.Bounce}if(\"speed\"===t){let t=Number(i);t&&!isNaN(t)&&this.setSpeed(t)}\"src\"===t&&await this.load(i),\"subframe\"===t&&this.setSubframe(\"\"===i||!!i)}}static get observedProperties(){return[\"playerState\",\"_isSettingsOpen\",\"_seeker\",\"_currentAnimation\",\"_animations\"]}propertyChangedCallback(t,e,i){if(!this.shadow)return;let s=this.shadow.querySelector(\".togglePlay\"),r=this.shadow.querySelector(\".stop\"),n=this.shadow.querySelector(\".prev\"),a=this.shadow.querySelector(\".next\"),o=this.shadow.querySelector(\".seeker\"),h=this.shadow.querySelector(\"progress\"),l=this.shadow.querySelector(\".popover\"),p=this.shadow.querySelector(\".convert\");s instanceof HTMLButtonElement&&r instanceof HTMLButtonElement&&a instanceof HTMLButtonElement&&n instanceof HTMLButtonElement&&o instanceof HTMLInputElement&&h instanceof HTMLProgressElement&&(\"playerState\"===t&&(s.dataset.active=(i===PlayerState.Playing||i===PlayerState.Paused).toString(),r.dataset.active=(i===PlayerState.Stopped).toString(),i===PlayerState.Playing?s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z\"/></svg>':s.innerHTML='<svg width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M8.016 5.016L18.985 12 8.016 18.984V5.015z\"/></svg>'),\"_seeker\"===t&&\"number\"==typeof i&&(o.value=i.toString(),o.ariaValueNow=i.toString(),h.value=i),\"_animations\"===t&&Array.isArray(i)&&this._currentAnimation+1<i.length&&(a.hidden=!1),\"_currentAnimation\"===t&&\"number\"==typeof i&&(i+1>=this._animations.length?a.hidden=!0:a.hidden=!1,i?n.hidden=!1:n.hidden=!0),\"_isSettingsOpen\"===t&&\"boolean\"==typeof i&&l instanceof HTMLDivElement&&p instanceof HTMLButtonElement&&(l.hidden=!i,p.hidden=this._isDotLottie))}set animateOnScroll(t){this.setAttribute(\"animateOnScroll\",(!!t).toString())}get animateOnScroll(){let t=this.getAttribute(\"animateOnScroll\");return\"true\"===t||\"\"===t||\"1\"===t}set autoplay(t){this.setAttribute(\"autoplay\",(!!t).toString())}get autoplay(){let t=this.getAttribute(\"autoplay\");return\"true\"===t||\"\"===t||\"1\"===t}set background(t){this.setAttribute(\"background\",t)}get background(){return this.getAttribute(\"background\")||\"transparent\"}set controls(t){this.setAttribute(\"controls\",(!!t).toString())}get controls(){let t=this.getAttribute(\"controls\");return\"true\"===t||\"\"===t||\"1\"===t}set count(t){this.setAttribute(\"count\",t.toString())}get count(){let t=this.getAttribute(\"count\");return t?Number(t):0}set description(t){t&&this.setAttribute(\"description\",t)}get description(){return this.getAttribute(\"description\")}set direction(t){this.setAttribute(\"direction\",t.toString())}get direction(){let t=Number(this.getAttribute(\"direction\"));return -1===t?t:1}set hover(t){this.setAttribute(\"hover\",t.toString())}get hover(){let t=this.getAttribute(\"hover\");return\"true\"===t||\"\"===t||\"1\"===t}set intermission(t){this.setAttribute(\"intermission\",t.toString())}get intermission(){let t=Number(this.getAttribute(\"intermission\"));return isNaN(t)?0:t}set loop(t){this.setAttribute(\"loop\",(!!t).toString())}get loop(){let t=this.getAttribute(\"loop\");return\"true\"===t||\"\"===t||\"1\"===t}set mode(t){this.setAttribute(\"mode\",t.toString())}get mode(){let t=this.getAttribute(\"mode\");return t===PlayMode.Bounce?t:PlayMode.Normal}set objectfit(t){this.setAttribute(\"objectfit\",t)}get objectfit(){let t=this.getAttribute(\"objectfit\");return t&&Object.values(ObjectFit).includes(t)?t:ObjectFit.Contain}set preserveAspectRatio(t){this.setAttribute(\"preserveAspectRatio\",t||PreserveAspectRatio.Contain)}get preserveAspectRatio(){let t=this.getAttribute(\"preserveAspectRatio\");return t&&Object.values(PreserveAspectRatio).includes(t)?t:null}set renderer(t){this.setAttribute(\"renderer\",t)}get renderer(){let t=this.getAttribute(\"renderer\");return\"canvas\"===t||\"html\"===t?t:\"svg\"}set simple(t){this.setAttribute(\"simple\",t.toString())}get simple(){let t=this.getAttribute(\"simple\");return\"true\"===t||\"\"===t||\"1\"===t}set speed(t){this.setAttribute(\"speed\",t?.toString())}get speed(){let t=this.getAttribute(\"speed\");return null===t||isNaN(Number(t))?1:Number(t)}set src(t){this.setAttribute(\"src\",t||\"\")}get src(){return this.getAttribute(\"src\")}set subframe(t){this.setAttribute(\"subframe\",(!!t).toString())}get subframe(){let t=this.getAttribute(\"subframe\");return\"true\"===t||\"\"===t||\"1\"===t}getMultiAnimationSettings(){return this._multiAnimationSettings}setMultiAnimationSettings(t){this._multiAnimationSettings=t}setSegment(t){this._segment=t}getSegment(){return this._segment}_getOptions(){if(!this._container)throw Error(\"Container not rendered\");let t=this.preserveAspectRatio??(this.objectfit&&aspectRatio(this.objectfit)),e=this._multiAnimationSettings?.length?this._multiAnimationSettings?.[this._currentAnimation]:void 0,i=this._manifest.animations?.[this._currentAnimation],s=!!this.loop;void 0!==i.loop&&void 0===this.loop&&(s=!!i.loop),e?.loop!==void 0&&(s=!!e.loop);let r=!!this.autoplay;void 0!==i.autoplay&&void 0===this.autoplay&&(r=!!i.autoplay),e?.autoplay!==void 0&&(r=!!e.autoplay),this.animateOnScroll&&(r=!1);let n=this._segment;this._segment?.every(t=>t>0)&&(n=[this._segment[0]-1,this._segment[1]-1]),this._segment?.some(t=>t<0)&&(n=void 0);let a={autoplay:r,container:this._container,initialSegment:n,loop:s,renderer:this.renderer,rendererSettings:{imagePreserveAspectRatio:t}};switch(this.renderer){case\"svg\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"canvas\":a.rendererSettings={...a.rendererSettings,clearCanvas:!0,preserveAspectRatio:t,progressiveLoad:!0};break;case\"html\":a.rendererSettings={...a.rendererSettings,hideOnTransparent:!0}}return a}_addIntersectionObserver(){this._container&&!this._intersectionObserver&&\"IntersectionObserver\"in window&&(this._intersectionObserver=new IntersectionObserver(t=>{for(let e of t){if(!e.isIntersecting||document.hidden){this.playerState===PlayerState.Playing&&this._freeze(),this._playerState.visible=!1;continue}this.animateOnScroll||this.playerState!==PlayerState.Frozen||this.play(),this._playerState.scrollY||(this._playerState.scrollY=scrollY),this._playerState.visible=!0}}),this._intersectionObserver.observe(this._container))}async load(t){if(!this.shadowRoot||!t)return;try{let{animations:e,isDotLottie:i,manifest:s}=await getAnimationData(t);if(!e||e.some(t=>!this._isLottie(t)))throw Error(\"Broken or corrupted file\");this._isBounce=this.mode===PlayMode.Bounce,this._multiAnimationSettings?.length&&this._multiAnimationSettings[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._isDotLottie=!!i,this._animations=e,this._manifest=s??{animations:[{autoplay:!this.animateOnScroll&&this.autoplay,direction:this.direction,id:useId(),loop:this.loop,mode:this.mode,speed:this.speed}]},this._lottieInstance&&this._lottieInstance.destroy(),this.playerState=PlayerState.Stopped,!this.animateOnScroll&&(this.autoplay||this._multiAnimationSettings?.[this._currentAnimation]?.autoplay)&&(this.playerState=PlayerState.Playing),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:e[this._currentAnimation]})}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error));return}this._addEventListeners();let e=this._multiAnimationSettings?.[this._currentAnimation]?.speed??this.speed??this._manifest.animations[this._currentAnimation].speed,i=this._multiAnimationSettings?.[this._currentAnimation]?.direction??this.direction??this._manifest.animations[this._currentAnimation].direction??1;this._lottieInstance.setSpeed(e),this._lottieInstance.setDirection(i),this._lottieInstance.setSubframe(!!this.subframe),(this.autoplay||this.animateOnScroll)&&(-1===this.direction&&this.seek(\"99%\"),\"IntersectionObserver\"in window||(this.animateOnScroll||this.play(),this._playerState.visible=!0),this._addIntersectionObserver())}getManifest(){return this._manifest}_toggleEventListeners(t){let e=\"add\"===t?\"addEventListener\":\"removeEventListener\";this._lottieInstance&&(this._lottieInstance[e](\"enterFrame\",this._enterFrame),this._lottieInstance[e](\"complete\",this._complete),this._lottieInstance[e](\"loopComplete\",this._loopComplete),this._lottieInstance[e](\"DOMLoaded\",this._DOMLoaded),this._lottieInstance[e](\"data_ready\",this._dataReady),this._lottieInstance[e](\"data_failed\",this._dataFailed)),this._container&&this.hover&&(this._container[e](\"mouseenter\",this._mouseEnter),this._container[e](\"mouseleave\",this._mouseLeave)),window[e](\"focus\",this._handleWindowBlur,{capture:!1,passive:!0}),window[e](\"blur\",this._handleWindowBlur,{capture:!1,passive:!0}),this.animateOnScroll&&window[e](\"scroll\",this._handleScroll,{capture:!0,passive:!0})}_addEventListeners(){this._toggleEventListeners(\"add\")}_removeEventListeners(){this._toggleEventListeners(\"remove\")}_loopComplete(){if(!this._lottieInstance)return;let{playDirection:t,totalFrames:e}=this._lottieInstance,i=this._segment?this._segment[0]:0,s=this._segment?this._segment[0]:e;if(this.count&&(this._isBounce?this._playerState.count+=.5:this._playerState.count+=1,this._playerState.count>=this.count)){this.setLoop(!1),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));return}return(this.dispatchEvent(new CustomEvent(PlayerEvents.Loop)),this._isBounce)?(this._lottieInstance.goToAndStop(-1===t?i:.99*s,!0),this._lottieInstance.setDirection(-1*t),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission)):(this._lottieInstance.goToAndStop(-1===t?.99*s:i,!0),setTimeout(()=>{this.animateOnScroll||this._lottieInstance?.play()},this.intermission))}_enterFrame(){if(!this._lottieInstance)return;let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.dispatchEvent(new CustomEvent(PlayerEvents.Frame,{detail:{frame:t,seeker:this._seeker}}))}_complete(){if(!this._lottieInstance)return;if(this._animations.length>1){if(this._multiAnimationSettings?.[this._currentAnimation+1]?.autoplay)return this.next();if(this.loop&&this._currentAnimation===this._animations.length-1)return this._currentAnimation=0,this._switchInstance()}let{currentFrame:t,totalFrames:e}=this._lottieInstance;this._seeker=Math.round(t/e*100),this.playerState=PlayerState.Completed,this.dispatchEvent(new CustomEvent(PlayerEvents.Complete,{detail:{frame:t,seeker:this._seeker}}))}_DOMLoaded(){this._playerState.loaded=!0,this.dispatchEvent(new CustomEvent(PlayerEvents.Ready))}_dataReady(){this.dispatchEvent(new CustomEvent(PlayerEvents.Load))}_dataFailed(){this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}_handleWindowBlur({type:t}){this.playerState===PlayerState.Playing&&\"blur\"===t&&this._freeze(),this.playerState===PlayerState.Frozen&&\"focus\"===t&&this.play()}_mouseEnter(){this.hover&&this.playerState!==PlayerState.Playing&&this.play()}_mouseLeave(){this.hover&&this.playerState===PlayerState.Playing&&this.stop()}_onVisibilityChange(){if(document.hidden&&this.playerState===PlayerState.Playing){this._freeze();return}this.playerState===PlayerState.Frozen&&this.play()}_handleScroll(){if(this.animateOnScroll&&this._lottieInstance){if(isServer()){console.warn(\"DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.\");return}if(this._playerState.visible){this._playerState.scrollTimeout&&clearTimeout(this._playerState.scrollTimeout),this._playerState.scrollTimeout=setTimeout(()=>{this.playerState=PlayerState.Paused},400);let t=Math.min(Math.max((scrollY>this._playerState.scrollY?scrollY-this._playerState.scrollY:this._playerState.scrollY-scrollY)/3,1),3*this._lottieInstance.totalFrames)/3;requestAnimationFrame(()=>{t<(this._lottieInstance?.totalFrames??0)?(this.playerState=PlayerState.Playing,this._lottieInstance?.goToAndStop(t,!0)):this.playerState=PlayerState.Paused})}}}_handleSeekChange({target:t}){!(t instanceof HTMLInputElement)||!this._lottieInstance||isNaN(Number(t.value))||this.seek(Math.round(Number(t.value)/100*this._lottieInstance.totalFrames))}_isLottie(t){return[\"v\",\"ip\",\"op\",\"layers\",\"fr\",\"w\",\"h\"].every(e=>Object.prototype.hasOwnProperty.call(t,e))}async addAnimation(t,e,i=!0){let{animations:s=[],manifest:r={animations:this.src?[{id:this._identifier}]:[]}}=this.src?await getAnimationData(this.src):{};try{for(let e of(r.generator=pkg.name,t)){let{url:t}=e,{animations:i}=await getAnimationData(t);if(!i)throw Error(\"No animation loaded\");if(r.animations.some(({id:t})=>t===e.id))throw Error(\"Duplicate id for animation\");r.animations=[...r.animations,{id:e.id}],s?.push(...i)}return{result:await createDotLottie({animations:s,fileName:e,manifest:r,shouldDownload:i}),success:!0}}catch(t){return{error:handleErrors(t).message,success:!1}}}getLottie(){return this._lottieInstance}async play(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.play(),this.dispatchEvent(new CustomEvent(PlayerEvents.Play))}finally{this.playerState=PlayerState.Playing}}}pause(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Pause))}finally{this.playerState=PlayerState.Paused}}}stop(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState),this._playerState.count=0;try{this._lottieInstance.stop(),this.dispatchEvent(new CustomEvent(PlayerEvents.Stop))}finally{this.playerState=PlayerState.Stopped}}}destroy(){this._lottieInstance&&(this.playerState=PlayerState.Destroyed,this._lottieInstance.destroy(),this._lottieInstance=null,this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed)),this.remove(),document.removeEventListener(\"visibilitychange\",this._onVisibilityChange))}seek(t){if(!this._lottieInstance)return;let e=t.toString().match(/^([0-9]+)(%?)$/);if(!e)return;let i=Math.round(\"%\"===e[2]?this._lottieInstance.totalFrames*Number(e[1])/100:Number(e[1]));if(this._seeker=i,this.playerState===PlayerState.Playing||this.playerState===PlayerState.Frozen&&this._playerState.prev===PlayerState.Playing){this._lottieInstance.goToAndPlay(i,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance.goToAndStop(i,!0),this._lottieInstance.pause()}snapshot(t=!0,e=\"AM Lottie\"){try{if(!this.shadowRoot)throw Error(\"Unknown error\");let i=this.shadowRoot.querySelector(\".animation svg\");if(!i)throw Error(\"Could not retrieve animation from DOM\");let s=i instanceof Node?new XMLSerializer().serializeToString(i):null;if(!s)throw Error(\"Could not serialize SVG element\");return t&&download(s,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src||e)}-${frameOutput(this._seeker)}.svg`}),s}catch(t){return console.error(t),null}}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}setCount(t){this.count=t}_freeze(){if(this._lottieInstance){this.playerState&&(this._playerState.prev=this.playerState);try{this._lottieInstance.pause(),this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze))}finally{this.playerState=PlayerState.Frozen}}}async reload(){this._lottieInstance&&this.src&&(this._lottieInstance.destroy(),await this.load(this.src))}setSpeed(t=1){this._lottieInstance&&this._lottieInstance.setSpeed(t)}setDirection(t){this._lottieInstance&&this._lottieInstance.setDirection(t)}setLoop(t){this._lottieInstance&&this._lottieInstance.setLoop(t)}togglePlay(){if(!this._lottieInstance)return;let{currentFrame:t,playDirection:e,totalFrames:i}=this._lottieInstance;return this.playerState===PlayerState.Playing?this.pause():this.playerState!==PlayerState.Completed?this.play():(this.playerState=PlayerState.Playing,this._isBounce)?(this.setDirection(-1*e),this._lottieInstance.goToAndPlay(t,!0)):-1===e?this._lottieInstance.goToAndPlay(i,!0):this._lottieInstance.goToAndPlay(0,!0)}toggleLoop(){let t=!this.loop;this.loop=t,this.setLoop(t)}toggleBoomerang(){let t=this._multiAnimationSettings?.[this._currentAnimation];if(t?.mode!==void 0){if(t.mode===PlayMode.Normal){t.mode=PlayMode.Bounce,this._isBounce=!0;return}t.mode=PlayMode.Normal,this._isBounce=!1;return}if(this.mode===PlayMode.Normal){this.mode=PlayMode.Bounce,this._isBounce=!0;return}this.mode=PlayMode.Normal,this._isBounce=!1}_toggleSettings(t){if(void 0===t){this._isSettingsOpen=!this._isSettingsOpen;return}this._isSettingsOpen=t}_handleBlur(){setTimeout(()=>this._toggleSettings(!1),200)}_switchInstance(t=!1){if(this._animations[this._currentAnimation])try{if(this._lottieInstance&&this._lottieInstance.destroy(),this._lottieInstance=lottie.loadAnimation({...this._getOptions(),animationData:this._animations[this._currentAnimation]}),this._multiAnimationSettings?.[this._currentAnimation]?.mode&&(this._isBounce=this._multiAnimationSettings[this._currentAnimation].mode===PlayMode.Bounce),this._removeEventListeners(),this._addEventListeners(),this.dispatchEvent(new CustomEvent(t?PlayerEvents.Previous:PlayerEvents.Next)),this._multiAnimationSettings?.[this._currentAnimation]?.autoplay??this.autoplay){if(this.animateOnScroll){this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Paused;return}this._lottieInstance?.goToAndPlay(0,!0),this.playerState=PlayerState.Playing;return}this._lottieInstance?.goToAndStop(0,!0),this.playerState=PlayerState.Stopped}catch(t){this._errorMessage=handleErrors(t).message,this.playerState=PlayerState.Error,this.dispatchEvent(new CustomEvent(PlayerEvents.Error))}}next(){this._currentAnimation++,this._switchInstance()}prev(){this._currentAnimation--,this._switchInstance(!0)}async convert({animations:t,fileName:e,manifest:i,shouldDownload:s=!0,src:r,typeCheck:n}){return n||this._isDotLottie?createJSON({animation:(await getAnimationData(r||this.src))?.animations?.[0],fileName:`${getFilename(e||this.src||\"converted\")}.json`,shouldDownload:s}):createDotLottie({animations:t||(await getAnimationData(this.src))?.animations,fileName:`${getFilename(e||this.src||\"converted\")}.lottie`,manifest:{...i||this._manifest,generator:pkg.name},shouldDownload:s})}static get styles(){let t=new CSSStyleSheet;return t.replace(css_248z),t}constructor(){super(),this._renderControls=renderControls,this._render=renderPlayer,this._multiAnimationSettings=[],this._container=null,this.playerState=PlayerState.Loading,this._isSettingsOpen=!1,this._seeker=0,this._currentAnimation=0,this._lottieInstance=null,this._identifier=this.id||useId(\"dotlottie\"),this._errorMessage=\"Something went wrong\",this._isBounce=!1,this._isDotLottie=!1,this._playerState={count:0,loaded:!1,prev:PlayerState.Loading,scrollTimeout:null,scrollY:0,visible:!1},this._handleSettingsClick=({target:t})=>{this._toggleSettings(),t instanceof HTMLElement&&t.focus()},this._complete=this._complete.bind(this),this._dataFailed=this._dataFailed.bind(this),this._dataReady=this._dataReady.bind(this),this._DOMLoaded=this._DOMLoaded.bind(this),this._enterFrame=this._enterFrame.bind(this),this._freeze=this._freeze.bind(this),this._handleBlur=this._handleBlur.bind(this),this._handleScroll=this._handleScroll.bind(this),this._handleSeekChange=this._handleSeekChange.bind(this),this._handleWindowBlur=this._handleWindowBlur.bind(this),this._loopComplete=this._loopComplete.bind(this),this._mouseEnter=this._mouseEnter.bind(this),this._mouseLeave=this._mouseLeave.bind(this),this._onVisibilityChange=this._onVisibilityChange.bind(this),this._switchInstance=this._switchInstance.bind(this),this.togglePlay=this.togglePlay.bind(this),this.stop=this.stop.bind(this),this.prev=this.prev.bind(this),this.next=this.next.bind(this),this._renderControls=this._renderControls.bind(this),this.snapshot=this.snapshot.bind(this),this.toggleLoop=this.toggleLoop.bind(this),this.toggleBoomerang=this.toggleBoomerang.bind(this),this.convert=this.convert.bind(this),this.destroy=this.destroy.bind(this),this.template=document.createElement(\"template\"),this.shadow=this.attachShadow({mode:\"open\"})}}"
|
|
13
13
|
}
|
|
14
14
|
],
|
|
15
15
|
"exports": [
|
package/dist/cjs/index.js
CHANGED
|
@@ -283,6 +283,10 @@ const addExt = (ext, str)=>{
|
|
|
283
283
|
reject(err);
|
|
284
284
|
return;
|
|
285
285
|
}
|
|
286
|
+
if (!(data.buffer instanceof ArrayBuffer)) {
|
|
287
|
+
reject('Data is not transferable');
|
|
288
|
+
return;
|
|
289
|
+
}
|
|
286
290
|
resolve(data.buffer);
|
|
287
291
|
});
|
|
288
292
|
});
|
|
@@ -415,7 +419,7 @@ const addExt = (ext, str)=>{
|
|
|
415
419
|
/**
|
|
416
420
|
* Render Player
|
|
417
421
|
*/ function renderPlayer() {
|
|
418
|
-
this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
422
|
+
this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
|
|
419
423
|
this.shadow.adoptedStyleSheets = [
|
|
420
424
|
DotLottiePlayer.styles
|
|
421
425
|
];
|
|
@@ -538,7 +542,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
538
542
|
}
|
|
539
543
|
};
|
|
540
544
|
|
|
541
|
-
var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.
|
|
545
|
+
var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.11";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.3","@eslint/eslintrc":"^3.2.0","@eslint/js":"^9.16.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^12.1.1","@swc/core":"^1.9.3","@types/mocha":"^10.0.10","@types/node":"^22.10.1","@types/path-browserify":"^1.0.3","@typescript-eslint/eslint-plugin":"^8.16.0","@typescript-eslint/parser":"^8.16.0","@web/dev-server-esbuild":"^1.0.3","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.16.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^50.6.0","eslint-plugin-perfectionist":"^4.1.2","eslint-plugin-prettier":"^5.2.1",globals:"^15.13.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.4.1",rimraf:"^6.0.1",rollup:"^4.28.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^3.0.0","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.81.0",stylelint:"^16.11.0","stylelint-config-standard-scss":"^14.0.0","tsc-alias":"^1.8.10",tslib:"^2.8.1",typescript:"^5.7.2"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["CHANGELOG.md","custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
542
546
|
|
|
543
547
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n width: 100%;\n height: 100%;\n}\n:host:not([hidden]) {\n display: block;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n:host .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}";
|
|
544
548
|
|
|
@@ -776,10 +780,12 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
776
780
|
/**
|
|
777
781
|
* Description for screen readers
|
|
778
782
|
*/ set description(value) {
|
|
779
|
-
|
|
783
|
+
if (value) {
|
|
784
|
+
this.setAttribute('description', value);
|
|
785
|
+
}
|
|
780
786
|
}
|
|
781
787
|
get description() {
|
|
782
|
-
return this.getAttribute('description')
|
|
788
|
+
return this.getAttribute('description');
|
|
783
789
|
}
|
|
784
790
|
/**
|
|
785
791
|
* Direction of animation
|
|
@@ -1477,9 +1483,13 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1477
1483
|
throw new Error('Unknown error');
|
|
1478
1484
|
}
|
|
1479
1485
|
// Get SVG element and serialize markup
|
|
1480
|
-
const svgElement = this.shadowRoot.querySelector('.animation svg')
|
|
1486
|
+
const svgElement = this.shadowRoot.querySelector('.animation svg');
|
|
1487
|
+
if (!svgElement) {
|
|
1488
|
+
throw new Error('Could not retrieve animation from DOM');
|
|
1489
|
+
}
|
|
1490
|
+
const data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
|
|
1481
1491
|
if (!data) {
|
|
1482
|
-
throw new Error('Could not serialize
|
|
1492
|
+
throw new Error('Could not serialize SVG element');
|
|
1483
1493
|
}
|
|
1484
1494
|
if (shouldDownload) {
|
|
1485
1495
|
download(data, {
|
|
@@ -1709,6 +1719,8 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1709
1719
|
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
1710
1720
|
* Multi-animation settings
|
|
1711
1721
|
*/ this._multiAnimationSettings = [], /**
|
|
1722
|
+
* Animation Container
|
|
1723
|
+
*/ this._container = null, /**
|
|
1712
1724
|
* @state
|
|
1713
1725
|
* Player state
|
|
1714
1726
|
*/ this.playerState = PlayerState.Loading, /**
|
package/dist/esm/index.js
CHANGED
|
@@ -260,6 +260,10 @@ const addExt = (ext, str)=>{
|
|
|
260
260
|
reject(err);
|
|
261
261
|
return;
|
|
262
262
|
}
|
|
263
|
+
if (!(data.buffer instanceof ArrayBuffer)) {
|
|
264
|
+
reject('Data is not transferable');
|
|
265
|
+
return;
|
|
266
|
+
}
|
|
263
267
|
resolve(data.buffer);
|
|
264
268
|
});
|
|
265
269
|
});
|
|
@@ -392,7 +396,7 @@ const addExt = (ext, str)=>{
|
|
|
392
396
|
/**
|
|
393
397
|
* Render Player
|
|
394
398
|
*/ function renderPlayer() {
|
|
395
|
-
this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
399
|
+
this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}">${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : ''}</figure><slot name="controls"></slot></div>`;
|
|
396
400
|
this.shadow.adoptedStyleSheets = [
|
|
397
401
|
DotLottiePlayer.styles
|
|
398
402
|
];
|
|
@@ -515,7 +519,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
515
519
|
}
|
|
516
520
|
};
|
|
517
521
|
|
|
518
|
-
var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.
|
|
522
|
+
var $schema="https://json.schemastore.org/package";var name="@aarsteinmedia/dotlottie-player";var version="4.0.11";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={test:"wtr",prebuild:"rimraf ./dist",build:"rollup -c","prebuild:types":"rimraf ./types","build:types":"tsc -p ./tsconfig.prod.json && tsc-alias","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development","lint:js":"eslint","lint:js:fix":"eslint --fix","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@eslint/compat":"^1.2.3","@eslint/eslintrc":"^3.2.0","@eslint/js":"^9.16.0","@esm-bundle/chai":"4.3.4-fix.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^12.1.1","@swc/core":"^1.9.3","@types/mocha":"^10.0.10","@types/node":"^22.10.1","@types/path-browserify":"^1.0.3","@typescript-eslint/eslint-plugin":"^8.16.0","@typescript-eslint/parser":"^8.16.0","@web/dev-server-esbuild":"^1.0.3","@web/dev-server-import-maps":"^0.2.1","@web/dev-server-rollup":"^0.6.4","@web/test-runner":"^0.19.0","@web/test-runner-playwright":"^0.11.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.16.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^50.6.0","eslint-plugin-perfectionist":"^4.1.2","eslint-plugin-prettier":"^5.2.1",globals:"^15.13.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.4.1",rimraf:"^6.0.1",rollup:"^4.28.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^3.0.0","rollup-plugin-swc3":"^0.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.81.0",stylelint:"^16.11.0","stylelint-config-standard-scss":"^14.0.0","tsc-alias":"^1.8.10",tslib:"^2.8.1",typescript:"^5.7.2"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};var customElements$1="custom-elements.json";var files=["CHANGELOG.md","custom-elements.json","dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {$schema:$schema,name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
519
523
|
|
|
520
524
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n width: 100%;\n height: 100%;\n}\n:host:not([hidden]) {\n display: block;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fade-in 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n:host .toolbar {\n display: flex;\n place-items: center center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n appearance: none;\n outline: none;\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n }\n}";
|
|
521
525
|
|
|
@@ -753,10 +757,12 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
753
757
|
/**
|
|
754
758
|
* Description for screen readers
|
|
755
759
|
*/ set description(value) {
|
|
756
|
-
|
|
760
|
+
if (value) {
|
|
761
|
+
this.setAttribute('description', value);
|
|
762
|
+
}
|
|
757
763
|
}
|
|
758
764
|
get description() {
|
|
759
|
-
return this.getAttribute('description')
|
|
765
|
+
return this.getAttribute('description');
|
|
760
766
|
}
|
|
761
767
|
/**
|
|
762
768
|
* Direction of animation
|
|
@@ -1454,9 +1460,13 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1454
1460
|
throw new Error('Unknown error');
|
|
1455
1461
|
}
|
|
1456
1462
|
// Get SVG element and serialize markup
|
|
1457
|
-
const svgElement = this.shadowRoot.querySelector('.animation svg')
|
|
1463
|
+
const svgElement = this.shadowRoot.querySelector('.animation svg');
|
|
1464
|
+
if (!svgElement) {
|
|
1465
|
+
throw new Error('Could not retrieve animation from DOM');
|
|
1466
|
+
}
|
|
1467
|
+
const data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
|
|
1458
1468
|
if (!data) {
|
|
1459
|
-
throw new Error('Could not serialize
|
|
1469
|
+
throw new Error('Could not serialize SVG element');
|
|
1460
1470
|
}
|
|
1461
1471
|
if (shouldDownload) {
|
|
1462
1472
|
download(data, {
|
|
@@ -1686,6 +1696,8 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1686
1696
|
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
1687
1697
|
* Multi-animation settings
|
|
1688
1698
|
*/ this._multiAnimationSettings = [], /**
|
|
1699
|
+
* Animation Container
|
|
1700
|
+
*/ this._container = null, /**
|
|
1689
1701
|
* @state
|
|
1690
1702
|
* Player state
|
|
1691
1703
|
*/ this.playerState = PlayerState.Loading, /**
|
package/dist/index.d.ts
CHANGED
|
@@ -173,8 +173,8 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
173
173
|
get controls(): Controls;
|
|
174
174
|
set count(value: number);
|
|
175
175
|
get count(): number;
|
|
176
|
-
set description(value: string);
|
|
177
|
-
get description(): string;
|
|
176
|
+
set description(value: string | null);
|
|
177
|
+
get description(): string | null;
|
|
178
178
|
set direction(value: AnimationDirection);
|
|
179
179
|
get direction(): AnimationDirection;
|
|
180
180
|
set hover(value: boolean);
|