@aarsteinmedia/dotlottie-player 2.3.4 → 2.3.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/dist/cjs/index.js +35 -28
- package/dist/custom-elements.json +12 -0
- package/dist/esm/index.js +35 -28
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/cjs/index.js
CHANGED
|
@@ -277,7 +277,10 @@ const addExt = (ext, str)=>{
|
|
|
277
277
|
if (!str) return false;
|
|
278
278
|
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
|
|
279
279
|
return regex.test(parseBase64(str));
|
|
280
|
-
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset,
|
|
280
|
+
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isInView = (el)=>{
|
|
281
|
+
const { top, left, bottom, right } = el.getBoundingClientRect();
|
|
282
|
+
return (top > 0 && top < innerHeight || bottom > 0 && bottom < innerHeight) && (left > 0 && left < innerWidth || right > 0 && right < innerWidth);
|
|
283
|
+
}, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
|
|
281
284
|
if (!Array.isArray(assets)) return;
|
|
282
285
|
const toResolve = [];
|
|
283
286
|
for (const asset of assets){
|
|
@@ -310,7 +313,7 @@ const addExt = (ext, str)=>{
|
|
|
310
313
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
311
314
|
};
|
|
312
315
|
|
|
313
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
316
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.5";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
317
|
|
|
315
318
|
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
319
|
|
|
@@ -400,7 +403,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
400
403
|
this.setSubframe(!!this.subframe);
|
|
401
404
|
if (this.autoplay) {
|
|
402
405
|
if (this.direction === -1) this.seek('99%');
|
|
403
|
-
this.play();
|
|
406
|
+
isInView(this) ? this.play() : this._freeze();
|
|
404
407
|
}
|
|
405
408
|
}
|
|
406
409
|
getManifest() {
|
|
@@ -507,7 +510,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
507
510
|
_onVisibilityChange() {
|
|
508
511
|
if (document.hidden && this.currentState === exports.PlayerState.Playing) {
|
|
509
512
|
this._freeze();
|
|
510
|
-
|
|
513
|
+
return;
|
|
514
|
+
}
|
|
515
|
+
if (this.currentState === exports.PlayerState.Frozen) {
|
|
511
516
|
this.play();
|
|
512
517
|
}
|
|
513
518
|
}
|
|
@@ -625,10 +630,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
625
630
|
if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
|
|
626
631
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
627
632
|
this.currentState = exports.PlayerState.Playing;
|
|
628
|
-
|
|
629
|
-
this._lottieInstance.goToAndStop(frame, true);
|
|
630
|
-
this._lottieInstance.pause();
|
|
633
|
+
return;
|
|
631
634
|
}
|
|
635
|
+
this._lottieInstance.goToAndStop(frame, true);
|
|
636
|
+
this._lottieInstance.pause();
|
|
632
637
|
}
|
|
633
638
|
snapshot() {
|
|
634
639
|
if (!this.shadowRoot) return;
|
|
@@ -695,18 +700,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
695
700
|
if (this.currentState === exports.PlayerState.Playing) {
|
|
696
701
|
return this.pause();
|
|
697
702
|
}
|
|
698
|
-
if (this.currentState
|
|
699
|
-
this.
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
return this._lottieInstance.goToAndPlay(
|
|
703
|
+
if (this.currentState !== exports.PlayerState.Completed) {
|
|
704
|
+
return this.play();
|
|
705
|
+
}
|
|
706
|
+
this.currentState = exports.PlayerState.Playing;
|
|
707
|
+
if (this._isBounce) {
|
|
708
|
+
this.setDirection(playDirection * -1);
|
|
709
|
+
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
710
|
+
}
|
|
711
|
+
if (playDirection === -1) {
|
|
712
|
+
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
708
713
|
}
|
|
709
|
-
return this.
|
|
714
|
+
return this._lottieInstance.goToAndPlay(0, true);
|
|
710
715
|
}
|
|
711
716
|
toggleLooping() {
|
|
712
717
|
this.setLooping(!this.loop);
|
|
@@ -717,10 +722,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
717
722
|
if (curr.mode === exports.PlayMode.Normal) {
|
|
718
723
|
curr.mode = exports.PlayMode.Bounce;
|
|
719
724
|
this._isBounce = true;
|
|
720
|
-
|
|
721
|
-
curr.mode = exports.PlayMode.Normal;
|
|
722
|
-
this._isBounce = false;
|
|
725
|
+
return;
|
|
723
726
|
}
|
|
727
|
+
curr.mode = exports.PlayMode.Normal;
|
|
728
|
+
this._isBounce = false;
|
|
724
729
|
return;
|
|
725
730
|
}
|
|
726
731
|
if (this.mode === exports.PlayMode.Normal) {
|
|
@@ -734,9 +739,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
734
739
|
_toggleSettings(flag) {
|
|
735
740
|
if (flag === undefined) {
|
|
736
741
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
737
|
-
|
|
738
|
-
this._isSettingsOpen = flag;
|
|
742
|
+
return;
|
|
739
743
|
}
|
|
744
|
+
this._isSettingsOpen = flag;
|
|
740
745
|
}
|
|
741
746
|
_handleBlur() {
|
|
742
747
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
@@ -800,15 +805,17 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
800
805
|
async firstUpdated() {
|
|
801
806
|
if ('IntersectionObserver' in window) {
|
|
802
807
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
803
|
-
|
|
804
|
-
if (!document.hidden && this.currentState === exports.PlayerState.Frozen) {
|
|
808
|
+
for (const entry of entries){
|
|
809
|
+
if (entry.isIntersecting && !document.hidden && this.currentState === exports.PlayerState.Frozen) {
|
|
805
810
|
this.play();
|
|
811
|
+
continue;
|
|
812
|
+
}
|
|
813
|
+
if (this.currentState === exports.PlayerState.Playing) {
|
|
814
|
+
this._freeze();
|
|
806
815
|
}
|
|
807
|
-
} else if (this.currentState === exports.PlayerState.Playing) {
|
|
808
|
-
this._freeze();
|
|
809
816
|
}
|
|
810
817
|
});
|
|
811
|
-
this._intersectionObserver
|
|
818
|
+
this._intersectionObserver?.observe(this.container);
|
|
812
819
|
}
|
|
813
820
|
if (this.src) {
|
|
814
821
|
await this.load(this.src);
|
|
@@ -1066,6 +1066,10 @@
|
|
|
1066
1066
|
"kind": "variable",
|
|
1067
1067
|
"name": "isImage"
|
|
1068
1068
|
},
|
|
1069
|
+
{
|
|
1070
|
+
"kind": "variable",
|
|
1071
|
+
"name": "isInView"
|
|
1072
|
+
},
|
|
1069
1073
|
{
|
|
1070
1074
|
"kind": "variable",
|
|
1071
1075
|
"name": "isServer"
|
|
@@ -1256,6 +1260,14 @@
|
|
|
1256
1260
|
"module": "src/component/utils.ts"
|
|
1257
1261
|
}
|
|
1258
1262
|
},
|
|
1263
|
+
{
|
|
1264
|
+
"kind": "js",
|
|
1265
|
+
"name": "isInView",
|
|
1266
|
+
"declaration": {
|
|
1267
|
+
"name": "isInView",
|
|
1268
|
+
"module": "src/component/utils.ts"
|
|
1269
|
+
}
|
|
1270
|
+
},
|
|
1259
1271
|
{
|
|
1260
1272
|
"kind": "js",
|
|
1261
1273
|
"name": "isServer",
|
package/dist/esm/index.js
CHANGED
|
@@ -275,7 +275,10 @@ const addExt = (ext, str)=>{
|
|
|
275
275
|
if (!str) return false;
|
|
276
276
|
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
|
|
277
277
|
return regex.test(parseBase64(str));
|
|
278
|
-
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset,
|
|
278
|
+
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isInView = (el)=>{
|
|
279
|
+
const { top, left, bottom, right } = el.getBoundingClientRect();
|
|
280
|
+
return (top > 0 && top < innerHeight || bottom > 0 && bottom < innerHeight) && (left > 0 && left < innerWidth || right > 0 && right < innerWidth);
|
|
281
|
+
}, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
|
|
279
282
|
if (!Array.isArray(assets)) return;
|
|
280
283
|
const toResolve = [];
|
|
281
284
|
for (const asset of assets){
|
|
@@ -308,7 +311,7 @@ const addExt = (ext, str)=>{
|
|
|
308
311
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
309
312
|
};
|
|
310
313
|
|
|
311
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
314
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.5";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
315
|
|
|
313
316
|
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
317
|
|
|
@@ -398,7 +401,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
398
401
|
this.setSubframe(!!this.subframe);
|
|
399
402
|
if (this.autoplay) {
|
|
400
403
|
if (this.direction === -1) this.seek('99%');
|
|
401
|
-
this.play();
|
|
404
|
+
isInView(this) ? this.play() : this._freeze();
|
|
402
405
|
}
|
|
403
406
|
}
|
|
404
407
|
getManifest() {
|
|
@@ -505,7 +508,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
505
508
|
_onVisibilityChange() {
|
|
506
509
|
if (document.hidden && this.currentState === PlayerState.Playing) {
|
|
507
510
|
this._freeze();
|
|
508
|
-
|
|
511
|
+
return;
|
|
512
|
+
}
|
|
513
|
+
if (this.currentState === PlayerState.Frozen) {
|
|
509
514
|
this.play();
|
|
510
515
|
}
|
|
511
516
|
}
|
|
@@ -623,10 +628,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
623
628
|
if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
624
629
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
625
630
|
this.currentState = PlayerState.Playing;
|
|
626
|
-
|
|
627
|
-
this._lottieInstance.goToAndStop(frame, true);
|
|
628
|
-
this._lottieInstance.pause();
|
|
631
|
+
return;
|
|
629
632
|
}
|
|
633
|
+
this._lottieInstance.goToAndStop(frame, true);
|
|
634
|
+
this._lottieInstance.pause();
|
|
630
635
|
}
|
|
631
636
|
snapshot() {
|
|
632
637
|
if (!this.shadowRoot) return;
|
|
@@ -693,18 +698,18 @@ class DotLottiePlayer extends LitElement {
|
|
|
693
698
|
if (this.currentState === PlayerState.Playing) {
|
|
694
699
|
return this.pause();
|
|
695
700
|
}
|
|
696
|
-
if (this.currentState
|
|
697
|
-
this.
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
return this._lottieInstance.goToAndPlay(
|
|
701
|
+
if (this.currentState !== PlayerState.Completed) {
|
|
702
|
+
return this.play();
|
|
703
|
+
}
|
|
704
|
+
this.currentState = PlayerState.Playing;
|
|
705
|
+
if (this._isBounce) {
|
|
706
|
+
this.setDirection(playDirection * -1);
|
|
707
|
+
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
708
|
+
}
|
|
709
|
+
if (playDirection === -1) {
|
|
710
|
+
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
706
711
|
}
|
|
707
|
-
return this.
|
|
712
|
+
return this._lottieInstance.goToAndPlay(0, true);
|
|
708
713
|
}
|
|
709
714
|
toggleLooping() {
|
|
710
715
|
this.setLooping(!this.loop);
|
|
@@ -715,10 +720,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
715
720
|
if (curr.mode === PlayMode.Normal) {
|
|
716
721
|
curr.mode = PlayMode.Bounce;
|
|
717
722
|
this._isBounce = true;
|
|
718
|
-
|
|
719
|
-
curr.mode = PlayMode.Normal;
|
|
720
|
-
this._isBounce = false;
|
|
723
|
+
return;
|
|
721
724
|
}
|
|
725
|
+
curr.mode = PlayMode.Normal;
|
|
726
|
+
this._isBounce = false;
|
|
722
727
|
return;
|
|
723
728
|
}
|
|
724
729
|
if (this.mode === PlayMode.Normal) {
|
|
@@ -732,9 +737,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
732
737
|
_toggleSettings(flag) {
|
|
733
738
|
if (flag === undefined) {
|
|
734
739
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
735
|
-
|
|
736
|
-
this._isSettingsOpen = flag;
|
|
740
|
+
return;
|
|
737
741
|
}
|
|
742
|
+
this._isSettingsOpen = flag;
|
|
738
743
|
}
|
|
739
744
|
_handleBlur() {
|
|
740
745
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
@@ -798,15 +803,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
798
803
|
async firstUpdated() {
|
|
799
804
|
if ('IntersectionObserver' in window) {
|
|
800
805
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
801
|
-
|
|
802
|
-
if (!document.hidden && this.currentState === PlayerState.Frozen) {
|
|
806
|
+
for (const entry of entries){
|
|
807
|
+
if (entry.isIntersecting && !document.hidden && this.currentState === PlayerState.Frozen) {
|
|
803
808
|
this.play();
|
|
809
|
+
continue;
|
|
810
|
+
}
|
|
811
|
+
if (this.currentState === PlayerState.Playing) {
|
|
812
|
+
this._freeze();
|
|
804
813
|
}
|
|
805
|
-
} else if (this.currentState === PlayerState.Playing) {
|
|
806
|
-
this._freeze();
|
|
807
814
|
}
|
|
808
815
|
});
|
|
809
|
-
this._intersectionObserver
|
|
816
|
+
this._intersectionObserver?.observe(this.container);
|
|
810
817
|
}
|
|
811
818
|
if (this.src) {
|
|
812
819
|
await this.load(this.src);
|