@aarsteinmedia/dotlottie-player 2.4.3 → 2.5.0
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/dist/cjs/index.js +101 -34
- package/dist/custom-elements.json +46 -2
- package/dist/esm/index.js +101 -34
- package/dist/index.d.ts +4 -0
- package/dist/index.js +2 -2
- package/package.json +7 -7
package/dist/esm/index.js
CHANGED
|
@@ -321,7 +321,7 @@ const addExt = (ext, str)=>{
|
|
|
321
321
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
322
322
|
};
|
|
323
323
|
|
|
324
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.
|
|
324
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.5.0";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:"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 license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","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:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.4.8","@types/node":"^20.11.28","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.18","esbuild-sass-plugin":"^2.16.1",eslint:"^8.57.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.72.0","ts-lit-plugin":"^1.2.1",typescript:"^5.4.2"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","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 = {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,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
325
325
|
|
|
326
326
|
var css_248z = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
|
|
327
327
|
|
|
@@ -333,7 +333,7 @@ function _ts_decorate(decorators, target, key, desc) {
|
|
|
333
333
|
}
|
|
334
334
|
class DotLottiePlayer extends LitElement {
|
|
335
335
|
_getOptions() {
|
|
336
|
-
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay, initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
|
|
336
|
+
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = !this.animateOnScroll && (currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay), initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
|
|
337
337
|
this.segment[0] - 1,
|
|
338
338
|
this.segment[1] - 1
|
|
339
339
|
] : this.segment, options = {
|
|
@@ -371,6 +371,27 @@ class DotLottiePlayer extends LitElement {
|
|
|
371
371
|
}
|
|
372
372
|
return options;
|
|
373
373
|
}
|
|
374
|
+
_addIntersectionObserver() {
|
|
375
|
+
if (this._intersectionObserver || !('IntersectionObserver' in window)) {
|
|
376
|
+
return;
|
|
377
|
+
}
|
|
378
|
+
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
379
|
+
for (const entry of entries){
|
|
380
|
+
if (!entry.isIntersecting || document.hidden) {
|
|
381
|
+
if (this.currentState === PlayerState.Playing) {
|
|
382
|
+
this._freeze();
|
|
383
|
+
}
|
|
384
|
+
this._playerState.visible = false;
|
|
385
|
+
continue;
|
|
386
|
+
}
|
|
387
|
+
if (!this.animateOnScroll && this.currentState === PlayerState.Frozen) {
|
|
388
|
+
this.play();
|
|
389
|
+
}
|
|
390
|
+
this._playerState.visible = true;
|
|
391
|
+
}
|
|
392
|
+
});
|
|
393
|
+
this._intersectionObserver.observe(this.container);
|
|
394
|
+
}
|
|
374
395
|
async load(src) {
|
|
375
396
|
if (!this.shadowRoot) return;
|
|
376
397
|
try {
|
|
@@ -385,7 +406,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
385
406
|
animations: [
|
|
386
407
|
{
|
|
387
408
|
id: useId(),
|
|
388
|
-
autoplay: this.autoplay,
|
|
409
|
+
autoplay: !this.animateOnScroll && this.autoplay,
|
|
389
410
|
loop: this.loop,
|
|
390
411
|
direction: this.direction,
|
|
391
412
|
mode: this.mode,
|
|
@@ -394,6 +415,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
394
415
|
]
|
|
395
416
|
};
|
|
396
417
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
418
|
+
this.currentState = this.autoplay && !this.animateOnScroll ? PlayerState.Playing : PlayerState.Stopped;
|
|
397
419
|
this._lottieInstance = Lottie.loadAnimation({
|
|
398
420
|
...this._getOptions(),
|
|
399
421
|
animationData: animations[this._currentAnimation]
|
|
@@ -409,22 +431,14 @@ class DotLottiePlayer extends LitElement {
|
|
|
409
431
|
this.setSpeed(speed);
|
|
410
432
|
this.setDirection(direction);
|
|
411
433
|
this.setSubframe(!!this.subframe);
|
|
412
|
-
if (this.autoplay) {
|
|
434
|
+
if (this.autoplay || this.animateOnScroll) {
|
|
413
435
|
if (this.direction === -1) this.seek('99%');
|
|
414
|
-
if ('IntersectionObserver' in window) {
|
|
415
|
-
this.
|
|
416
|
-
|
|
417
|
-
if (entry.isIntersecting && !document.hidden) {
|
|
418
|
-
this.play();
|
|
419
|
-
continue;
|
|
420
|
-
}
|
|
421
|
-
this._freeze();
|
|
422
|
-
}
|
|
423
|
-
});
|
|
424
|
-
this._intersectionObserver.observe(this.container);
|
|
425
|
-
return;
|
|
436
|
+
if (!('IntersectionObserver' in window)) {
|
|
437
|
+
!this.animateOnScroll && this.play();
|
|
438
|
+
this._playerState.visible = true;
|
|
426
439
|
}
|
|
427
|
-
this.
|
|
440
|
+
this._addIntersectionObserver();
|
|
441
|
+
return;
|
|
428
442
|
}
|
|
429
443
|
}
|
|
430
444
|
getManifest() {
|
|
@@ -442,6 +456,20 @@ class DotLottiePlayer extends LitElement {
|
|
|
442
456
|
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
443
457
|
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
444
458
|
}
|
|
459
|
+
addEventListener('focus', this._handleWindowBlur, {
|
|
460
|
+
passive: true,
|
|
461
|
+
capture: true
|
|
462
|
+
});
|
|
463
|
+
addEventListener('blur', this._handleWindowBlur, {
|
|
464
|
+
passive: true,
|
|
465
|
+
capture: true
|
|
466
|
+
});
|
|
467
|
+
if (this.animateOnScroll) {
|
|
468
|
+
addEventListener('scroll', this._handleScroll, {
|
|
469
|
+
passive: true,
|
|
470
|
+
capture: true
|
|
471
|
+
});
|
|
472
|
+
}
|
|
445
473
|
}
|
|
446
474
|
_removeEventListeners() {
|
|
447
475
|
if (!this._lottieInstance || !this.container) return;
|
|
@@ -453,6 +481,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
453
481
|
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
454
482
|
this.container.removeEventListener('mouseenter', this._mouseEnter);
|
|
455
483
|
this.container.removeEventListener('mouseleave', this._mouseLeave);
|
|
484
|
+
removeEventListener('focus', this._handleWindowBlur, true);
|
|
485
|
+
removeEventListener('blur', this._handleWindowBlur, true);
|
|
486
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
456
487
|
}
|
|
457
488
|
_loopComplete() {
|
|
458
489
|
if (!this._lottieInstance) {
|
|
@@ -473,12 +504,12 @@ class DotLottiePlayer extends LitElement {
|
|
|
473
504
|
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
474
505
|
this._lottieInstance.setDirection(playDirection * -1);
|
|
475
506
|
return setTimeout(()=>{
|
|
476
|
-
this._lottieInstance?.play();
|
|
507
|
+
!this.animateOnScroll && this._lottieInstance?.play();
|
|
477
508
|
}, this.intermission);
|
|
478
509
|
}
|
|
479
510
|
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
480
511
|
return setTimeout(()=>{
|
|
481
|
-
this._lottieInstance?.play();
|
|
512
|
+
!this.animateOnScroll && this._lottieInstance?.play();
|
|
482
513
|
}, this.intermission);
|
|
483
514
|
}
|
|
484
515
|
_enterFrame() {
|
|
@@ -504,7 +535,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
504
535
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
505
536
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
506
537
|
this.currentState = PlayerState.Completed;
|
|
507
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.
|
|
538
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
|
|
508
539
|
detail: {
|
|
509
540
|
frame: currentFrame,
|
|
510
541
|
seeker: this._seeker
|
|
@@ -522,6 +553,14 @@ class DotLottiePlayer extends LitElement {
|
|
|
522
553
|
this.currentState = PlayerState.Error;
|
|
523
554
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
524
555
|
}
|
|
556
|
+
_handleWindowBlur({ type }) {
|
|
557
|
+
if (this.currentState === PlayerState.Playing && type === 'blur') {
|
|
558
|
+
this._freeze();
|
|
559
|
+
}
|
|
560
|
+
if (this.currentState === PlayerState.Frozen && type === 'focus') {
|
|
561
|
+
this.play();
|
|
562
|
+
}
|
|
563
|
+
}
|
|
525
564
|
_mouseEnter() {
|
|
526
565
|
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
527
566
|
this.play();
|
|
@@ -541,6 +580,28 @@ class DotLottiePlayer extends LitElement {
|
|
|
541
580
|
this.play();
|
|
542
581
|
}
|
|
543
582
|
}
|
|
583
|
+
_handleScroll() {
|
|
584
|
+
if (!this.animateOnScroll || !this._lottieInstance) {
|
|
585
|
+
return;
|
|
586
|
+
}
|
|
587
|
+
if (this._playerState.visible) {
|
|
588
|
+
const adjustedScroll = this._playerState.scrollY > innerHeight ? scrollY - this._playerState.scrollY : scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 2, 1), this._lottieInstance.totalFrames * 2), roundedScroll = Math.round(clampedScroll / 2);
|
|
589
|
+
requestAnimationFrame(()=>{
|
|
590
|
+
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
591
|
+
this.currentState = PlayerState.Playing;
|
|
592
|
+
this._lottieInstance?.goToAndStop(roundedScroll, true);
|
|
593
|
+
} else {
|
|
594
|
+
this.currentState = PlayerState.Paused;
|
|
595
|
+
}
|
|
596
|
+
});
|
|
597
|
+
}
|
|
598
|
+
if (this._playerState.scrollTimeout) {
|
|
599
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
600
|
+
}
|
|
601
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
602
|
+
this.currentState = PlayerState.Paused;
|
|
603
|
+
}, 400);
|
|
604
|
+
}
|
|
544
605
|
_handleSeekChange({ target }) {
|
|
545
606
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
|
|
546
607
|
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
|
|
@@ -790,6 +851,11 @@ class DotLottiePlayer extends LitElement {
|
|
|
790
851
|
this._addEventListeners();
|
|
791
852
|
this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
|
|
792
853
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
854
|
+
if (this.animateOnScroll) {
|
|
855
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
856
|
+
this.currentState = PlayerState.Paused;
|
|
857
|
+
return;
|
|
858
|
+
}
|
|
793
859
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
794
860
|
this.currentState = PlayerState.Playing;
|
|
795
861
|
return;
|
|
@@ -838,19 +904,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
838
904
|
}
|
|
839
905
|
}
|
|
840
906
|
async firstUpdated() {
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
if (entry.isIntersecting && !document.hidden && this.currentState === PlayerState.Frozen) {
|
|
845
|
-
this.play();
|
|
846
|
-
continue;
|
|
847
|
-
}
|
|
848
|
-
if (this.currentState === PlayerState.Playing) {
|
|
849
|
-
this._freeze();
|
|
850
|
-
}
|
|
851
|
-
}
|
|
852
|
-
});
|
|
853
|
-
this._intersectionObserver?.observe(this.container);
|
|
907
|
+
this._addIntersectionObserver();
|
|
908
|
+
if (this.container) {
|
|
909
|
+
this._playerState.scrollY = Math.round(this.container.getBoundingClientRect().top + document.documentElement.scrollTop);
|
|
854
910
|
}
|
|
855
911
|
if (this.src) {
|
|
856
912
|
await this.load(this.src);
|
|
@@ -875,6 +931,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
875
931
|
}
|
|
876
932
|
constructor(){
|
|
877
933
|
super();
|
|
934
|
+
this.animateOnScroll = false;
|
|
878
935
|
this.background = 'transparent';
|
|
879
936
|
this.controls = false;
|
|
880
937
|
this.currentState = PlayerState.Loading;
|
|
@@ -899,7 +956,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
899
956
|
this._playerState = {
|
|
900
957
|
prev: PlayerState.Loading,
|
|
901
958
|
count: 0,
|
|
902
|
-
loaded: false
|
|
959
|
+
loaded: false,
|
|
960
|
+
visible: false,
|
|
961
|
+
scrollY: 0,
|
|
962
|
+
scrollTimeout: null
|
|
903
963
|
};
|
|
904
964
|
this._handleSettingsClick = ({ target })=>{
|
|
905
965
|
this._toggleSettings();
|
|
@@ -912,7 +972,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
912
972
|
this._dataFailed = this._dataFailed.bind(this);
|
|
913
973
|
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
914
974
|
this._enterFrame = this._enterFrame.bind(this);
|
|
975
|
+
this._handleScroll = this._handleScroll.bind(this);
|
|
915
976
|
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
977
|
+
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
916
978
|
this._loopComplete = this._loopComplete.bind(this);
|
|
917
979
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
918
980
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
@@ -922,6 +984,11 @@ class DotLottiePlayer extends LitElement {
|
|
|
922
984
|
this.destroy = this.destroy.bind(this);
|
|
923
985
|
}
|
|
924
986
|
}
|
|
987
|
+
_ts_decorate([
|
|
988
|
+
property({
|
|
989
|
+
type: Boolean
|
|
990
|
+
})
|
|
991
|
+
], DotLottiePlayer.prototype, "animateOnScroll", void 0);
|
|
925
992
|
_ts_decorate([
|
|
926
993
|
property({
|
|
927
994
|
type: Boolean,
|
package/dist/index.d.ts
CHANGED
|
@@ -139,6 +139,7 @@ declare enum PlayerEvents {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
declare class DotLottiePlayer extends LitElement {
|
|
142
|
+
animateOnScroll?: boolean;
|
|
142
143
|
autoplay?: Autoplay;
|
|
143
144
|
background?: string;
|
|
144
145
|
controls?: Controls;
|
|
@@ -173,6 +174,7 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
173
174
|
private _animations;
|
|
174
175
|
private _playerState;
|
|
175
176
|
private _getOptions;
|
|
177
|
+
private _addIntersectionObserver;
|
|
176
178
|
load(src: string | LottieJSON): Promise<void>;
|
|
177
179
|
getManifest(): LottieManifest;
|
|
178
180
|
private _addEventListeners;
|
|
@@ -183,9 +185,11 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
183
185
|
private _DOMLoaded;
|
|
184
186
|
private _dataReady;
|
|
185
187
|
private _dataFailed;
|
|
188
|
+
private _handleWindowBlur;
|
|
186
189
|
private _mouseEnter;
|
|
187
190
|
private _mouseLeave;
|
|
188
191
|
private _onVisibilityChange;
|
|
192
|
+
private _handleScroll;
|
|
189
193
|
private _handleSeekChange;
|
|
190
194
|
private _isLottie;
|
|
191
195
|
addAnimation(configs: AnimationConfig[], fileName?: string, shouldDownload?: boolean): Promise<void | ArrayBuffer>;
|