@aarsteinmedia/dotlottie-player 3.2.4 → 4.0.0

package/README.md

@@ -46,6 +46,7 @@ Add the element `dotlottie-player` to your markup and point `src` to a Lottie an
 
 ```xml
 <dotlottie-player
+  id="find-me"
   autoplay=""
   controls=""
   subframe=""
@@ -59,8 +60,8 @@ Add the element `dotlottie-player` to your markup and point `src` to a Lottie an
 To set animations programmatically, use the `load()` method.
 
 ```javascript
-const lottiePlayer = document.querySelector('dotlottie-player')
-lottiePlayer.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
+const lottiePlayer = document.querySelector('#find-me')
+player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
 ```
 
 ### Convert to dotLottie
@@ -70,7 +71,7 @@ If you have a Lottie JSON animation and want to convert it to a dotLottie – to
 If you want to combine multiple animations in one single dotLottie file you can use the `addAnimation` method. This will trigger a download in the browser. The source files can be either dotLottie or JSON, and the output file will will always be a dotLottie.
 
 ```javascript
-const lottiePlayer = document.querySelector('dotlottie-player')
+const lottiePlayer = document.querySelector('#find-me')
 (async () => {
   await lottiePlayer?.addAnimation([
     { id: 'animation_1', url: '/url/to/animation_1.lottie' },
@@ -92,17 +93,32 @@ You can also use this method independent of any Lottie player on the page, as lo
 
 The new file wil automatically load the first animation when initialized. You can toggle between animations with the `next()` and `prev()` methods, or you can use the navigation buttons in the controls.
 
-If you add `multiAnimationSettings` to the markup you can control the playback of multiple animations. In the example below the first animation will play once, and then the next animation will loop:
+Control the playback of multiple animations in a single file. In the example below the first animation will play once, and then the next animation will loop:
 
 ```xml
 <dotlottie-player
+  id="find-me"
   subframe=""
   src="/path/to/combined-animations.lottie"
-  multiAnimationSettings='[{"autplay": true}, {"autoplay": true, "loop": true}]'
 >
 </dotlottie-player>  
 ```
 
+```javascript
+  const player = document.querySelector('#find-me')
+  player?.setMultiAnimationSettings(
+    [
+      {
+        autplay: true
+      },
+      {
+        autoplay: true,
+        loop: true
+      }
+    ]
+  )
+```
+
 ### Angular
 
 1. Import the component in `app.component.ts`.
@@ -261,39 +277,39 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `hover`                   | Whether to play on mouse hover                                                                                                | `boolean`                                | `false`           |
 | `loop`                    | Whether to loop animation                                                                                                     | `boolean`                                | `false`           |
 | `mode`                    | Play mode                                                                                                                     | `normal` \| `bounce`                     | `normal`          |
-| `multiAnimationSettings`  | Control playback of multianimation files. Write a valid JSON array (as string) with properties like `autoplay`, `loop`, etc.  | `object[]`                               | `undefined`       |
 | `objectfit`               | Resizing of animation in container                                                                                            | `contain` \| `cover` \| `fill` \| `none` | `contain`         |
 | `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
-| `segment`                 | Play only part of an animation. E. g. from frame 10 to frame 60 would be `[10, 60]`                                           | `[number, number]`                       | `undefined`       |
 | `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
 | `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |
 | `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                        | `boolean`                                | `false`           |
 
 ## Methods
 
-| Method                                    | Function
-| ----------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `addAnimation(config: Config[]) => void`  | Add animation. Triggers download of new dotLottie file.                                                   |
-| `convert() => void`                       | If the current animation is in JSON format – convert it to dotLottie. Triggers a download in the browser. |
-| `destroy() => void`                       | Nullify animation and remove element from the DOM.                                                        |
-| `getLottie() => AnimationItem \| null`    | Returns the lottie-web instance used in the component                                                     |
-| `load(src: string) => void`               | Load animation by URL or JSON object                                                                      |
-| `next() => void`                          | Next animation (if several in file)                                                                       |
-| `pause() => void`                         | Pause                                                                                                     |
-| `prev() => void`                          | Previous animation (if several in file)                                                                   |
-| `play() => void`                          | Play                                                                                                      |
-| `reload() => void`                        | Reload                                                                                                    |
-| `seek(value: number \| string) => void`   | Go to frame. Can be a number or a percentage string (e. g. 50%).                                          |
-| `setCount(value: number) => void`         | Dynamically set number of loops                                                                           |
-| `setDirection(value: 1 \| -1) => void`    | Set Direction                                                                                             |
-| `setLooping(value: boolean) => void`      | Set Looping                                                                                               |
-| `setSpeed(value?: number) => void`        | Set Speed                                                                                                 |
-| `setSubframe(value: boolean) => void`     | Set subframe                                                                                              |
-| `snapshot() => string`                    | Snapshot the current frame as SVG. Triggers a download in the browser.                                    |
-| `stop() => void`                          | Stop                                                                                                      |
-| `toggleBoomerang() => void`               | Toggle between `bounce` and `normal`                                                                      |
-| `toggleLooping() => void`                 | Toggle looping                                                                                            |
-| `togglePlay() => void`                    | Toggle play                                                                                               |
+| Method                                                          | Function
+| --------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `addAnimation(config: Config[]) => void`                        | Add animation. Triggers download of new dotLottie file.                                                   |
+| `convert() => void`                                             | If the current animation is in JSON format – convert it to dotLottie. Triggers a download in the browser. |
+| `destroy() => void`                                             | Nullify animation and remove element from the DOM.                                                        |
+| `getLottie() => AnimationItem \| null`                          | Returns the lottie-web instance used in the component                                                     |
+| `load(src: string) => void`                                     | Load animation by URL or JSON object                                                                      |
+| `next() => void`                                                | Next animation (if several in file)                                                                       |
+| `pause() => void`                                               | Pause                                                                                                     |
+| `prev() => void`                                                | Previous animation (if several in file)                                                                   |
+| `play() => void`                                                | Play                                                                                                      |
+| `reload() => void`                                              | Reload                                                                                                    |
+| `seek(value: number \| string) => void`                         | Go to frame. Can be a number or a percentage string (e. g. 50%).                                          |
+| `setCount(value: number) => void`                               | Dynamically set number of loops                                                                           |
+| `setDirection(value: 1 \| -1) => void`                          | Set Direction                                                                                             |
+| `setLooping(value: boolean) => void`                            | Set Looping                                                                                               |
+| `setMultiAnimationSettings(value: AnimationSettings[]) => void` | Set Multi-animation settings                                                                              |
+| `setSegment(value: AnimationSegment) => void`                   | Play only part of an animation. E. g. from frame 10 to frame 60 would be `[10, 60]`                       |
+| `setSpeed(value?: number) => void`                              | Set Speed                                                                                                 |
+| `setSubframe(value: boolean) => void`                           | Set subframe                                                                                              |
+| `snapshot() => string`                                          | Snapshot the current frame as SVG. Triggers a download in the browser.                                    |
+| `stop() => void`                                                | Stop                                                                                                      |
+| `toggleBoomerang() => void`                                     | Toggle between `bounce` and `normal`                                                                      |
+| `toggleLooping() => void`                                       | Toggle looping                                                                                            |
+| `togglePlay() => void`                                          | Toggle play                                                                                               |
 
 ## Events
 

package/custom-elements.json

@@ -0,0 +1,27 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "dist/index.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "DotLottiePlayer",
+          "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\",\"subframe\"]}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)}\"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(\"\"));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}setMultiAnimationSettings(t){this._lottieInstance&&(this._multiAnimationSettings=t)}setSegment(t){this._lottieInstance&&(this._segment=t)}_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(){if(!this.shadowRoot||!this.src)return;let t=this.shadowRoot.querySelector(\".animation svg\"),e=t instanceof Node?new XMLSerializer().serializeToString(t):null;if(!e){console.error(\"Could not serialize data\");return}return download(e,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`}),e}setSubframe(t){this._lottieInstance&&this._lottieInstance.setSubframe(t)}setCount(t){this._lottieInstance&&(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\"})}}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "dotlottie-player",
+          "declaration": {
+            "name": "DotLottiePlayer",
+            "module": "dist/index.js"
+          }
+        }
+      ]
+    }
+  ]
+}