@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/cjs/index.js
CHANGED
|
@@ -323,7 +323,7 @@ const addExt = (ext, str)=>{
|
|
|
323
323
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
324
324
|
};
|
|
325
325
|
|
|
326
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.
|
|
326
|
+
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$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"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$1,main:main,unpkg:unpkg,module:module$1,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};
|
|
327
327
|
|
|
328
328
|
var css_248z = lit.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}}`;
|
|
329
329
|
|
|
@@ -335,7 +335,7 @@ function _ts_decorate(decorators, target, key, desc) {
|
|
|
335
335
|
}
|
|
336
336
|
class DotLottiePlayer extends lit.LitElement {
|
|
337
337
|
_getOptions() {
|
|
338
|
-
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) ? [
|
|
338
|
+
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) ? [
|
|
339
339
|
this.segment[0] - 1,
|
|
340
340
|
this.segment[1] - 1
|
|
341
341
|
] : this.segment, options = {
|
|
@@ -373,6 +373,27 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
373
373
|
}
|
|
374
374
|
return options;
|
|
375
375
|
}
|
|
376
|
+
_addIntersectionObserver() {
|
|
377
|
+
if (this._intersectionObserver || !('IntersectionObserver' in window)) {
|
|
378
|
+
return;
|
|
379
|
+
}
|
|
380
|
+
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
381
|
+
for (const entry of entries){
|
|
382
|
+
if (!entry.isIntersecting || document.hidden) {
|
|
383
|
+
if (this.currentState === exports.PlayerState.Playing) {
|
|
384
|
+
this._freeze();
|
|
385
|
+
}
|
|
386
|
+
this._playerState.visible = false;
|
|
387
|
+
continue;
|
|
388
|
+
}
|
|
389
|
+
if (!this.animateOnScroll && this.currentState === exports.PlayerState.Frozen) {
|
|
390
|
+
this.play();
|
|
391
|
+
}
|
|
392
|
+
this._playerState.visible = true;
|
|
393
|
+
}
|
|
394
|
+
});
|
|
395
|
+
this._intersectionObserver.observe(this.container);
|
|
396
|
+
}
|
|
376
397
|
async load(src) {
|
|
377
398
|
if (!this.shadowRoot) return;
|
|
378
399
|
try {
|
|
@@ -387,7 +408,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
387
408
|
animations: [
|
|
388
409
|
{
|
|
389
410
|
id: useId(),
|
|
390
|
-
autoplay: this.autoplay,
|
|
411
|
+
autoplay: !this.animateOnScroll && this.autoplay,
|
|
391
412
|
loop: this.loop,
|
|
392
413
|
direction: this.direction,
|
|
393
414
|
mode: this.mode,
|
|
@@ -396,6 +417,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
396
417
|
]
|
|
397
418
|
};
|
|
398
419
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
420
|
+
this.currentState = this.autoplay && !this.animateOnScroll ? exports.PlayerState.Playing : exports.PlayerState.Stopped;
|
|
399
421
|
this._lottieInstance = Lottie.loadAnimation({
|
|
400
422
|
...this._getOptions(),
|
|
401
423
|
animationData: animations[this._currentAnimation]
|
|
@@ -411,22 +433,14 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
411
433
|
this.setSpeed(speed);
|
|
412
434
|
this.setDirection(direction);
|
|
413
435
|
this.setSubframe(!!this.subframe);
|
|
414
|
-
if (this.autoplay) {
|
|
436
|
+
if (this.autoplay || this.animateOnScroll) {
|
|
415
437
|
if (this.direction === -1) this.seek('99%');
|
|
416
|
-
if ('IntersectionObserver' in window) {
|
|
417
|
-
this.
|
|
418
|
-
|
|
419
|
-
if (entry.isIntersecting && !document.hidden) {
|
|
420
|
-
this.play();
|
|
421
|
-
continue;
|
|
422
|
-
}
|
|
423
|
-
this._freeze();
|
|
424
|
-
}
|
|
425
|
-
});
|
|
426
|
-
this._intersectionObserver.observe(this.container);
|
|
427
|
-
return;
|
|
438
|
+
if (!('IntersectionObserver' in window)) {
|
|
439
|
+
!this.animateOnScroll && this.play();
|
|
440
|
+
this._playerState.visible = true;
|
|
428
441
|
}
|
|
429
|
-
this.
|
|
442
|
+
this._addIntersectionObserver();
|
|
443
|
+
return;
|
|
430
444
|
}
|
|
431
445
|
}
|
|
432
446
|
getManifest() {
|
|
@@ -444,6 +458,20 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
444
458
|
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
445
459
|
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
446
460
|
}
|
|
461
|
+
addEventListener('focus', this._handleWindowBlur, {
|
|
462
|
+
passive: true,
|
|
463
|
+
capture: true
|
|
464
|
+
});
|
|
465
|
+
addEventListener('blur', this._handleWindowBlur, {
|
|
466
|
+
passive: true,
|
|
467
|
+
capture: true
|
|
468
|
+
});
|
|
469
|
+
if (this.animateOnScroll) {
|
|
470
|
+
addEventListener('scroll', this._handleScroll, {
|
|
471
|
+
passive: true,
|
|
472
|
+
capture: true
|
|
473
|
+
});
|
|
474
|
+
}
|
|
447
475
|
}
|
|
448
476
|
_removeEventListeners() {
|
|
449
477
|
if (!this._lottieInstance || !this.container) return;
|
|
@@ -455,6 +483,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
455
483
|
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
456
484
|
this.container.removeEventListener('mouseenter', this._mouseEnter);
|
|
457
485
|
this.container.removeEventListener('mouseleave', this._mouseLeave);
|
|
486
|
+
removeEventListener('focus', this._handleWindowBlur, true);
|
|
487
|
+
removeEventListener('blur', this._handleWindowBlur, true);
|
|
488
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
458
489
|
}
|
|
459
490
|
_loopComplete() {
|
|
460
491
|
if (!this._lottieInstance) {
|
|
@@ -475,12 +506,12 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
475
506
|
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
476
507
|
this._lottieInstance.setDirection(playDirection * -1);
|
|
477
508
|
return setTimeout(()=>{
|
|
478
|
-
this._lottieInstance?.play();
|
|
509
|
+
!this.animateOnScroll && this._lottieInstance?.play();
|
|
479
510
|
}, this.intermission);
|
|
480
511
|
}
|
|
481
512
|
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
482
513
|
return setTimeout(()=>{
|
|
483
|
-
this._lottieInstance?.play();
|
|
514
|
+
!this.animateOnScroll && this._lottieInstance?.play();
|
|
484
515
|
}, this.intermission);
|
|
485
516
|
}
|
|
486
517
|
_enterFrame() {
|
|
@@ -506,7 +537,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
506
537
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
507
538
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
508
539
|
this.currentState = exports.PlayerState.Completed;
|
|
509
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.
|
|
540
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete, {
|
|
510
541
|
detail: {
|
|
511
542
|
frame: currentFrame,
|
|
512
543
|
seeker: this._seeker
|
|
@@ -524,6 +555,14 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
524
555
|
this.currentState = exports.PlayerState.Error;
|
|
525
556
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
526
557
|
}
|
|
558
|
+
_handleWindowBlur({ type }) {
|
|
559
|
+
if (this.currentState === exports.PlayerState.Playing && type === 'blur') {
|
|
560
|
+
this._freeze();
|
|
561
|
+
}
|
|
562
|
+
if (this.currentState === exports.PlayerState.Frozen && type === 'focus') {
|
|
563
|
+
this.play();
|
|
564
|
+
}
|
|
565
|
+
}
|
|
527
566
|
_mouseEnter() {
|
|
528
567
|
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
529
568
|
this.play();
|
|
@@ -543,6 +582,28 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
543
582
|
this.play();
|
|
544
583
|
}
|
|
545
584
|
}
|
|
585
|
+
_handleScroll() {
|
|
586
|
+
if (!this.animateOnScroll || !this._lottieInstance) {
|
|
587
|
+
return;
|
|
588
|
+
}
|
|
589
|
+
if (this._playerState.visible) {
|
|
590
|
+
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);
|
|
591
|
+
requestAnimationFrame(()=>{
|
|
592
|
+
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
593
|
+
this.currentState = exports.PlayerState.Playing;
|
|
594
|
+
this._lottieInstance?.goToAndStop(roundedScroll, true);
|
|
595
|
+
} else {
|
|
596
|
+
this.currentState = exports.PlayerState.Paused;
|
|
597
|
+
}
|
|
598
|
+
});
|
|
599
|
+
}
|
|
600
|
+
if (this._playerState.scrollTimeout) {
|
|
601
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
602
|
+
}
|
|
603
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
604
|
+
this.currentState = exports.PlayerState.Paused;
|
|
605
|
+
}, 400);
|
|
606
|
+
}
|
|
546
607
|
_handleSeekChange({ target }) {
|
|
547
608
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
|
|
548
609
|
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
|
|
@@ -792,6 +853,11 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
792
853
|
this._addEventListeners();
|
|
793
854
|
this.dispatchEvent(new CustomEvent(isPrevious ? exports.PlayerEvents.Previous : exports.PlayerEvents.Next));
|
|
794
855
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
856
|
+
if (this.animateOnScroll) {
|
|
857
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
858
|
+
this.currentState = exports.PlayerState.Paused;
|
|
859
|
+
return;
|
|
860
|
+
}
|
|
795
861
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
796
862
|
this.currentState = exports.PlayerState.Playing;
|
|
797
863
|
return;
|
|
@@ -840,19 +906,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
840
906
|
}
|
|
841
907
|
}
|
|
842
908
|
async firstUpdated() {
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
if (entry.isIntersecting && !document.hidden && this.currentState === exports.PlayerState.Frozen) {
|
|
847
|
-
this.play();
|
|
848
|
-
continue;
|
|
849
|
-
}
|
|
850
|
-
if (this.currentState === exports.PlayerState.Playing) {
|
|
851
|
-
this._freeze();
|
|
852
|
-
}
|
|
853
|
-
}
|
|
854
|
-
});
|
|
855
|
-
this._intersectionObserver?.observe(this.container);
|
|
909
|
+
this._addIntersectionObserver();
|
|
910
|
+
if (this.container) {
|
|
911
|
+
this._playerState.scrollY = Math.round(this.container.getBoundingClientRect().top + document.documentElement.scrollTop);
|
|
856
912
|
}
|
|
857
913
|
if (this.src) {
|
|
858
914
|
await this.load(this.src);
|
|
@@ -877,6 +933,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
877
933
|
}
|
|
878
934
|
constructor(){
|
|
879
935
|
super();
|
|
936
|
+
this.animateOnScroll = false;
|
|
880
937
|
this.background = 'transparent';
|
|
881
938
|
this.controls = false;
|
|
882
939
|
this.currentState = exports.PlayerState.Loading;
|
|
@@ -901,7 +958,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
901
958
|
this._playerState = {
|
|
902
959
|
prev: exports.PlayerState.Loading,
|
|
903
960
|
count: 0,
|
|
904
|
-
loaded: false
|
|
961
|
+
loaded: false,
|
|
962
|
+
visible: false,
|
|
963
|
+
scrollY: 0,
|
|
964
|
+
scrollTimeout: null
|
|
905
965
|
};
|
|
906
966
|
this._handleSettingsClick = ({ target })=>{
|
|
907
967
|
this._toggleSettings();
|
|
@@ -914,7 +974,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
914
974
|
this._dataFailed = this._dataFailed.bind(this);
|
|
915
975
|
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
916
976
|
this._enterFrame = this._enterFrame.bind(this);
|
|
977
|
+
this._handleScroll = this._handleScroll.bind(this);
|
|
917
978
|
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
979
|
+
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
918
980
|
this._loopComplete = this._loopComplete.bind(this);
|
|
919
981
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
920
982
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
@@ -924,6 +986,11 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
924
986
|
this.destroy = this.destroy.bind(this);
|
|
925
987
|
}
|
|
926
988
|
}
|
|
989
|
+
_ts_decorate([
|
|
990
|
+
decorators_js.property({
|
|
991
|
+
type: Boolean
|
|
992
|
+
})
|
|
993
|
+
], DotLottiePlayer.prototype, "animateOnScroll", void 0);
|
|
927
994
|
_ts_decorate([
|
|
928
995
|
decorators_js.property({
|
|
929
996
|
type: Boolean,
|
|
@@ -50,6 +50,16 @@
|
|
|
50
50
|
"description": "dotLottie Player Web Component",
|
|
51
51
|
"name": "DotLottiePlayer",
|
|
52
52
|
"members": [
|
|
53
|
+
{
|
|
54
|
+
"kind": "field",
|
|
55
|
+
"name": "animateOnScroll",
|
|
56
|
+
"type": {
|
|
57
|
+
"text": "boolean | undefined"
|
|
58
|
+
},
|
|
59
|
+
"default": "false",
|
|
60
|
+
"description": "Whether to trigger next frame with scroll",
|
|
61
|
+
"attribute": "animateOnScroll"
|
|
62
|
+
},
|
|
53
63
|
{
|
|
54
64
|
"kind": "field",
|
|
55
65
|
"name": "autoplay",
|
|
@@ -353,10 +363,10 @@
|
|
|
353
363
|
"kind": "field",
|
|
354
364
|
"name": "_playerState",
|
|
355
365
|
"type": {
|
|
356
|
-
"text": "
|
|
366
|
+
"text": "{\n prev: PlayerState\n count: number\n loaded: boolean\n visible: boolean\n scrollY: number\n scrollTimeout: NodeJS.Timeout | null\n }"
|
|
357
367
|
},
|
|
358
368
|
"privacy": "private",
|
|
359
|
-
"default": "{\n prev: PlayerState.Loading,\n count: 0,\n loaded: false,\n }"
|
|
369
|
+
"default": "{\n prev: PlayerState.Loading,\n count: 0,\n loaded: false,\n visible: false,\n scrollY: 0,\n scrollTimeout: null\n }"
|
|
360
370
|
},
|
|
361
371
|
{
|
|
362
372
|
"kind": "method",
|
|
@@ -369,6 +379,12 @@
|
|
|
369
379
|
}
|
|
370
380
|
}
|
|
371
381
|
},
|
|
382
|
+
{
|
|
383
|
+
"kind": "method",
|
|
384
|
+
"name": "_addIntersectionObserver",
|
|
385
|
+
"privacy": "private",
|
|
386
|
+
"description": "Add IntersectionObserver"
|
|
387
|
+
},
|
|
372
388
|
{
|
|
373
389
|
"kind": "method",
|
|
374
390
|
"name": "load",
|
|
@@ -432,6 +448,19 @@
|
|
|
432
448
|
"name": "_dataFailed",
|
|
433
449
|
"privacy": "private"
|
|
434
450
|
},
|
|
451
|
+
{
|
|
452
|
+
"kind": "method",
|
|
453
|
+
"name": "_handleWindowBlur",
|
|
454
|
+
"privacy": "private",
|
|
455
|
+
"parameters": [
|
|
456
|
+
{
|
|
457
|
+
"name": "{ type }",
|
|
458
|
+
"type": {
|
|
459
|
+
"text": "FocusEvent"
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
]
|
|
463
|
+
},
|
|
435
464
|
{
|
|
436
465
|
"kind": "method",
|
|
437
466
|
"name": "_mouseEnter",
|
|
@@ -450,6 +479,12 @@
|
|
|
450
479
|
"privacy": "private",
|
|
451
480
|
"description": "Handle visibility change events"
|
|
452
481
|
},
|
|
482
|
+
{
|
|
483
|
+
"kind": "method",
|
|
484
|
+
"name": "_handleScroll",
|
|
485
|
+
"privacy": "private",
|
|
486
|
+
"description": "Handle scroll"
|
|
487
|
+
},
|
|
453
488
|
{
|
|
454
489
|
"kind": "method",
|
|
455
490
|
"name": "_handleSeekChange",
|
|
@@ -758,6 +793,15 @@
|
|
|
758
793
|
}
|
|
759
794
|
],
|
|
760
795
|
"attributes": [
|
|
796
|
+
{
|
|
797
|
+
"name": "animateOnScroll",
|
|
798
|
+
"type": {
|
|
799
|
+
"text": "boolean | undefined"
|
|
800
|
+
},
|
|
801
|
+
"default": "false",
|
|
802
|
+
"description": "Whether to trigger next frame with scroll",
|
|
803
|
+
"fieldName": "animateOnScroll"
|
|
804
|
+
},
|
|
761
805
|
{
|
|
762
806
|
"name": "autoplay",
|
|
763
807
|
"type": {
|