@aarsteinmedia/dotlottie-player 2.3.4 → 2.3.6
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 +43 -26
- package/dist/esm/index.js +43 -26
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/cjs/index.js
CHANGED
|
@@ -310,7 +310,7 @@ const addExt = (ext, str)=>{
|
|
|
310
310
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
311
311
|
};
|
|
312
312
|
|
|
313
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
313
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.6";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.1",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.3.102","@types/node":"^20.11.0","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.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.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
|
|
314
314
|
|
|
315
315
|
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}}`;
|
|
316
316
|
|
|
@@ -400,6 +400,19 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
400
400
|
this.setSubframe(!!this.subframe);
|
|
401
401
|
if (this.autoplay) {
|
|
402
402
|
if (this.direction === -1) this.seek('99%');
|
|
403
|
+
if ('IntersectionObserver' in window) {
|
|
404
|
+
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
405
|
+
for (const entry of entries){
|
|
406
|
+
if (entry.isIntersecting && !document.hidden) {
|
|
407
|
+
this.play();
|
|
408
|
+
continue;
|
|
409
|
+
}
|
|
410
|
+
this._freeze();
|
|
411
|
+
}
|
|
412
|
+
});
|
|
413
|
+
this._intersectionObserver.observe(this.container);
|
|
414
|
+
return;
|
|
415
|
+
}
|
|
403
416
|
this.play();
|
|
404
417
|
}
|
|
405
418
|
}
|
|
@@ -507,7 +520,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
507
520
|
_onVisibilityChange() {
|
|
508
521
|
if (document.hidden && this.currentState === exports.PlayerState.Playing) {
|
|
509
522
|
this._freeze();
|
|
510
|
-
|
|
523
|
+
return;
|
|
524
|
+
}
|
|
525
|
+
if (this.currentState === exports.PlayerState.Frozen) {
|
|
511
526
|
this.play();
|
|
512
527
|
}
|
|
513
528
|
}
|
|
@@ -625,10 +640,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
625
640
|
if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
|
|
626
641
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
627
642
|
this.currentState = exports.PlayerState.Playing;
|
|
628
|
-
|
|
629
|
-
this._lottieInstance.goToAndStop(frame, true);
|
|
630
|
-
this._lottieInstance.pause();
|
|
643
|
+
return;
|
|
631
644
|
}
|
|
645
|
+
this._lottieInstance.goToAndStop(frame, true);
|
|
646
|
+
this._lottieInstance.pause();
|
|
632
647
|
}
|
|
633
648
|
snapshot() {
|
|
634
649
|
if (!this.shadowRoot) return;
|
|
@@ -695,18 +710,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
695
710
|
if (this.currentState === exports.PlayerState.Playing) {
|
|
696
711
|
return this.pause();
|
|
697
712
|
}
|
|
698
|
-
if (this.currentState
|
|
699
|
-
this.
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
706
|
-
}
|
|
707
|
-
return this._lottieInstance.goToAndPlay(0, true);
|
|
713
|
+
if (this.currentState !== exports.PlayerState.Completed) {
|
|
714
|
+
return this.play();
|
|
715
|
+
}
|
|
716
|
+
this.currentState = exports.PlayerState.Playing;
|
|
717
|
+
if (this._isBounce) {
|
|
718
|
+
this.setDirection(playDirection * -1);
|
|
719
|
+
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
708
720
|
}
|
|
709
|
-
|
|
721
|
+
if (playDirection === -1) {
|
|
722
|
+
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
723
|
+
}
|
|
724
|
+
return this._lottieInstance.goToAndPlay(0, true);
|
|
710
725
|
}
|
|
711
726
|
toggleLooping() {
|
|
712
727
|
this.setLooping(!this.loop);
|
|
@@ -717,10 +732,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
717
732
|
if (curr.mode === exports.PlayMode.Normal) {
|
|
718
733
|
curr.mode = exports.PlayMode.Bounce;
|
|
719
734
|
this._isBounce = true;
|
|
720
|
-
|
|
721
|
-
curr.mode = exports.PlayMode.Normal;
|
|
722
|
-
this._isBounce = false;
|
|
735
|
+
return;
|
|
723
736
|
}
|
|
737
|
+
curr.mode = exports.PlayMode.Normal;
|
|
738
|
+
this._isBounce = false;
|
|
724
739
|
return;
|
|
725
740
|
}
|
|
726
741
|
if (this.mode === exports.PlayMode.Normal) {
|
|
@@ -734,9 +749,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
734
749
|
_toggleSettings(flag) {
|
|
735
750
|
if (flag === undefined) {
|
|
736
751
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
737
|
-
|
|
738
|
-
this._isSettingsOpen = flag;
|
|
752
|
+
return;
|
|
739
753
|
}
|
|
754
|
+
this._isSettingsOpen = flag;
|
|
740
755
|
}
|
|
741
756
|
_handleBlur() {
|
|
742
757
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
@@ -800,15 +815,17 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
800
815
|
async firstUpdated() {
|
|
801
816
|
if ('IntersectionObserver' in window) {
|
|
802
817
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
803
|
-
|
|
804
|
-
if (!document.hidden && this.currentState === exports.PlayerState.Frozen) {
|
|
818
|
+
for (const entry of entries){
|
|
819
|
+
if (entry.isIntersecting && !document.hidden && this.currentState === exports.PlayerState.Frozen) {
|
|
805
820
|
this.play();
|
|
821
|
+
continue;
|
|
822
|
+
}
|
|
823
|
+
if (this.currentState === exports.PlayerState.Playing) {
|
|
824
|
+
this._freeze();
|
|
806
825
|
}
|
|
807
|
-
} else if (this.currentState === exports.PlayerState.Playing) {
|
|
808
|
-
this._freeze();
|
|
809
826
|
}
|
|
810
827
|
});
|
|
811
|
-
this._intersectionObserver
|
|
828
|
+
this._intersectionObserver?.observe(this.container);
|
|
812
829
|
}
|
|
813
830
|
if (this.src) {
|
|
814
831
|
await this.load(this.src);
|
package/dist/esm/index.js
CHANGED
|
@@ -308,7 +308,7 @@ const addExt = (ext, str)=>{
|
|
|
308
308
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
309
309
|
};
|
|
310
310
|
|
|
311
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
311
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.6";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.1",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.3.102","@types/node":"^20.11.0","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.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.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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};
|
|
312
312
|
|
|
313
313
|
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}}`;
|
|
314
314
|
|
|
@@ -398,6 +398,19 @@ class DotLottiePlayer extends LitElement {
|
|
|
398
398
|
this.setSubframe(!!this.subframe);
|
|
399
399
|
if (this.autoplay) {
|
|
400
400
|
if (this.direction === -1) this.seek('99%');
|
|
401
|
+
if ('IntersectionObserver' in window) {
|
|
402
|
+
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
403
|
+
for (const entry of entries){
|
|
404
|
+
if (entry.isIntersecting && !document.hidden) {
|
|
405
|
+
this.play();
|
|
406
|
+
continue;
|
|
407
|
+
}
|
|
408
|
+
this._freeze();
|
|
409
|
+
}
|
|
410
|
+
});
|
|
411
|
+
this._intersectionObserver.observe(this.container);
|
|
412
|
+
return;
|
|
413
|
+
}
|
|
401
414
|
this.play();
|
|
402
415
|
}
|
|
403
416
|
}
|
|
@@ -505,7 +518,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
505
518
|
_onVisibilityChange() {
|
|
506
519
|
if (document.hidden && this.currentState === PlayerState.Playing) {
|
|
507
520
|
this._freeze();
|
|
508
|
-
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
523
|
+
if (this.currentState === PlayerState.Frozen) {
|
|
509
524
|
this.play();
|
|
510
525
|
}
|
|
511
526
|
}
|
|
@@ -623,10 +638,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
623
638
|
if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
624
639
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
625
640
|
this.currentState = PlayerState.Playing;
|
|
626
|
-
|
|
627
|
-
this._lottieInstance.goToAndStop(frame, true);
|
|
628
|
-
this._lottieInstance.pause();
|
|
641
|
+
return;
|
|
629
642
|
}
|
|
643
|
+
this._lottieInstance.goToAndStop(frame, true);
|
|
644
|
+
this._lottieInstance.pause();
|
|
630
645
|
}
|
|
631
646
|
snapshot() {
|
|
632
647
|
if (!this.shadowRoot) return;
|
|
@@ -693,18 +708,18 @@ class DotLottiePlayer extends LitElement {
|
|
|
693
708
|
if (this.currentState === PlayerState.Playing) {
|
|
694
709
|
return this.pause();
|
|
695
710
|
}
|
|
696
|
-
if (this.currentState
|
|
697
|
-
this.
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
704
|
-
}
|
|
705
|
-
return this._lottieInstance.goToAndPlay(0, true);
|
|
711
|
+
if (this.currentState !== PlayerState.Completed) {
|
|
712
|
+
return this.play();
|
|
713
|
+
}
|
|
714
|
+
this.currentState = PlayerState.Playing;
|
|
715
|
+
if (this._isBounce) {
|
|
716
|
+
this.setDirection(playDirection * -1);
|
|
717
|
+
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
706
718
|
}
|
|
707
|
-
|
|
719
|
+
if (playDirection === -1) {
|
|
720
|
+
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
721
|
+
}
|
|
722
|
+
return this._lottieInstance.goToAndPlay(0, true);
|
|
708
723
|
}
|
|
709
724
|
toggleLooping() {
|
|
710
725
|
this.setLooping(!this.loop);
|
|
@@ -715,10 +730,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
715
730
|
if (curr.mode === PlayMode.Normal) {
|
|
716
731
|
curr.mode = PlayMode.Bounce;
|
|
717
732
|
this._isBounce = true;
|
|
718
|
-
|
|
719
|
-
curr.mode = PlayMode.Normal;
|
|
720
|
-
this._isBounce = false;
|
|
733
|
+
return;
|
|
721
734
|
}
|
|
735
|
+
curr.mode = PlayMode.Normal;
|
|
736
|
+
this._isBounce = false;
|
|
722
737
|
return;
|
|
723
738
|
}
|
|
724
739
|
if (this.mode === PlayMode.Normal) {
|
|
@@ -732,9 +747,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
732
747
|
_toggleSettings(flag) {
|
|
733
748
|
if (flag === undefined) {
|
|
734
749
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
735
|
-
|
|
736
|
-
this._isSettingsOpen = flag;
|
|
750
|
+
return;
|
|
737
751
|
}
|
|
752
|
+
this._isSettingsOpen = flag;
|
|
738
753
|
}
|
|
739
754
|
_handleBlur() {
|
|
740
755
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
@@ -798,15 +813,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
798
813
|
async firstUpdated() {
|
|
799
814
|
if ('IntersectionObserver' in window) {
|
|
800
815
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
801
|
-
|
|
802
|
-
if (!document.hidden && this.currentState === PlayerState.Frozen) {
|
|
816
|
+
for (const entry of entries){
|
|
817
|
+
if (entry.isIntersecting && !document.hidden && this.currentState === PlayerState.Frozen) {
|
|
803
818
|
this.play();
|
|
819
|
+
continue;
|
|
820
|
+
}
|
|
821
|
+
if (this.currentState === PlayerState.Playing) {
|
|
822
|
+
this._freeze();
|
|
804
823
|
}
|
|
805
|
-
} else if (this.currentState === PlayerState.Playing) {
|
|
806
|
-
this._freeze();
|
|
807
824
|
}
|
|
808
825
|
});
|
|
809
|
-
this._intersectionObserver
|
|
826
|
+
this._intersectionObserver?.observe(this.container);
|
|
810
827
|
}
|
|
811
828
|
if (this.src) {
|
|
812
829
|
await this.load(this.src);
|