@aarsteinmedia/dotlottie-player 4.0.3 → 4.0.5
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 +164 -0
- package/custom-elements.json +1 -1
- package/dist/cjs/index.js +334 -98
- package/dist/esm/index.js +334 -98
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +8 -7
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
# Changelog for @aarsteinmedia/dotlottie-player
|
|
2
|
+
|
|
3
|
+
All notable changes to this project will be documented in this file.
|
|
4
|
+
|
|
5
|
+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
|
|
6
|
+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
|
+
|
|
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
|
+
|
|
10
|
+
## [4.0.5] - 3-11-2024
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Made download optional for snapshot
|
|
15
|
+
|
|
16
|
+
## [4.0.4] - 31-10-2024
|
|
17
|
+
|
|
18
|
+
### Changed
|
|
19
|
+
|
|
20
|
+
- Added Changelog to npm package
|
|
21
|
+
|
|
22
|
+
- Removed minification from module versions
|
|
23
|
+
|
|
24
|
+
## [4.0.3] - 30-10-2024
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- Fixed typo causing externals to be bundled
|
|
29
|
+
|
|
30
|
+
## [4.0.2] - 30-10-2024
|
|
31
|
+
|
|
32
|
+
### Changed
|
|
33
|
+
|
|
34
|
+
- Conditionally loading of controls
|
|
35
|
+
|
|
36
|
+
## [4.0.1] - 29-10-2024
|
|
37
|
+
|
|
38
|
+
### Changed
|
|
39
|
+
|
|
40
|
+
- Added attribute listener to `src`
|
|
41
|
+
|
|
42
|
+
## [4.0.0] - 24-10-2024
|
|
43
|
+
|
|
44
|
+
### Changed
|
|
45
|
+
|
|
46
|
+
- Refactored type import
|
|
47
|
+
- BREAKING CHANGE:
|
|
48
|
+
```diff
|
|
49
|
+
- import type { DotLottiePlayer } from '@aarsteinmedia/dotlottie-player'
|
|
50
|
+
+ import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
51
|
+
```
|
|
52
|
+
- Rich data moved from attributes to properties
|
|
53
|
+
- BREAKING CHANGE:
|
|
54
|
+
```diff
|
|
55
|
+
<dotlottie-player
|
|
56
|
+
id="find-me"
|
|
57
|
+
- multianimationsettings="[{ autoplay: true, loop: false }]"
|
|
58
|
+
- segment="[0, 1]"
|
|
59
|
+
></dotlottie-player>
|
|
60
|
+
|
|
61
|
+
+ const player = document.querySelector('#find-me')
|
|
62
|
+
+ player?.setMultianimationsettings([{ autoplay: true, loop: false }])
|
|
63
|
+
+ player?.setSegment([0, 1])
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
- Moved `./dist/custom-elements.json` to `./custom-elements.json`
|
|
67
|
+
|
|
68
|
+
### Added
|
|
69
|
+
|
|
70
|
+
- Added unit tests
|
|
71
|
+
|
|
72
|
+
## [3.2.5] - 21-10-2024
|
|
73
|
+
|
|
74
|
+
### Changed
|
|
75
|
+
|
|
76
|
+
- Fixed typo, causing some types not to be resolved
|
|
77
|
+
|
|
78
|
+
## [3.2.4] - 20-10-2024
|
|
79
|
+
|
|
80
|
+
### Changed
|
|
81
|
+
|
|
82
|
+
- Extended browser support
|
|
83
|
+
|
|
84
|
+
## [3.2.3] - 14-10-2024
|
|
85
|
+
|
|
86
|
+
### Added
|
|
87
|
+
|
|
88
|
+
- Added Changelog
|
|
89
|
+
|
|
90
|
+
### Changed
|
|
91
|
+
|
|
92
|
+
- Migrated from eslint@8 to eslint@9
|
|
93
|
+
|
|
94
|
+
## [3.2.2] - 27-09-2024
|
|
95
|
+
|
|
96
|
+
### Changed
|
|
97
|
+
|
|
98
|
+
- Minor stylistic changes
|
|
99
|
+
|
|
100
|
+
## [3.2.1] - 03-09-2024
|
|
101
|
+
|
|
102
|
+
### Changed
|
|
103
|
+
|
|
104
|
+
- Minor stylistic changes
|
|
105
|
+
|
|
106
|
+
## [3.2.0] - 02-09-2024
|
|
107
|
+
|
|
108
|
+
### Changed
|
|
109
|
+
|
|
110
|
+
- Refactored code
|
|
111
|
+
- Code splitting for maintainability, with no intended changes for how the component is consumed
|
|
112
|
+
|
|
113
|
+
## [3.1.0] - 02-09-2024
|
|
114
|
+
|
|
115
|
+
### Added
|
|
116
|
+
|
|
117
|
+
- Added support for AVIF images in assets
|
|
118
|
+
|
|
119
|
+
### Changed
|
|
120
|
+
|
|
121
|
+
- Refactored return types
|
|
122
|
+
- `addAnimation` now returns object
|
|
123
|
+
```typescript
|
|
124
|
+
public async addAnimation(
|
|
125
|
+
configs: AnimationAttributes[],
|
|
126
|
+
fileName?: string,
|
|
127
|
+
shouldDownload = true
|
|
128
|
+
): Promise<{
|
|
129
|
+
result?: void | ArrayBuffer
|
|
130
|
+
success: boolean
|
|
131
|
+
error?: string
|
|
132
|
+
}>
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
## [3.0.0] - 06-09-2024
|
|
136
|
+
|
|
137
|
+
### Changed
|
|
138
|
+
|
|
139
|
+
- Refactored imports
|
|
140
|
+
- BREAKING CHANGE:
|
|
141
|
+
```diff
|
|
142
|
+
- import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
143
|
+
+ import type { DotLottiePlayer } from '@aarsteinmedia/dotlottie-player'
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
### Removed
|
|
147
|
+
|
|
148
|
+
- Removed dependencies
|
|
149
|
+
- `@lit`
|
|
150
|
+
|
|
151
|
+
[4.0.5]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.5
|
|
152
|
+
[4.0.4]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.4
|
|
153
|
+
[4.0.3]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.3
|
|
154
|
+
[4.0.2]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.2
|
|
155
|
+
[4.0.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.1
|
|
156
|
+
[4.0.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/4.0.0
|
|
157
|
+
[3.2.5]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.5
|
|
158
|
+
[3.2.4]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.4
|
|
159
|
+
[3.2.3]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.3
|
|
160
|
+
[3.2.2]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.2
|
|
161
|
+
[3.2.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.1
|
|
162
|
+
[3.2.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.2.0
|
|
163
|
+
[3.1.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.1.0
|
|
164
|
+
[3.0.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/3.0.0
|
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(\"\"));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._lottieInstance&&(this._multiAnimationSettings=t)}setSegment(t){this._lottieInstance&&(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(){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\"})}}"
|
|
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(\"\"));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._lottieInstance&&(this._multiAnimationSettings=t)}setSegment(t){this._lottieInstance&&(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){try{if(!this.shadowRoot||!this.src)throw Error(\"Unknown error\");let e=this.shadowRoot.querySelector(\".animation svg\"),i=e instanceof Node?new XMLSerializer().serializeToString(e):null;if(!i)throw Error(\"Could not serialize data\");return t&&download(i,{mimeType:\"image/svg+xml\",name:`${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`}),i}catch(t){return console.error(t),null}}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\"})}}"
|
|
13
13
|
}
|
|
14
14
|
],
|
|
15
15
|
"exports": [
|