@aarsteinmedia/dotlottie-player 2.3.5 → 2.4.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/README.md +5 -1
- package/dist/cjs/index.js +22 -8
- package/dist/custom-elements.json +16 -14
- package/dist/esm/index.js +22 -8
- package/dist/index.d.ts +1 -0
- package/dist/index.js +3 -3
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -48,6 +48,7 @@ Add the element `dotlottie-player` to your markup and point `src` to a Lottie an
|
|
|
48
48
|
<dotlottie-player
|
|
49
49
|
autoplay=""
|
|
50
50
|
controls=""
|
|
51
|
+
subframe=""
|
|
51
52
|
loop=""
|
|
52
53
|
src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
|
|
53
54
|
style="width: 320px; margin: auto;"
|
|
@@ -138,6 +139,7 @@ function App() {
|
|
|
138
139
|
return (
|
|
139
140
|
<dotlottie-player
|
|
140
141
|
ref={animation}
|
|
142
|
+
subframe=""
|
|
141
143
|
src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
|
|
142
144
|
/>
|
|
143
145
|
)
|
|
@@ -218,6 +220,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
|
|
|
218
220
|
src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
|
|
219
221
|
autoplay=""
|
|
220
222
|
controls=""
|
|
223
|
+
subframe=""
|
|
221
224
|
loop=""
|
|
222
225
|
style="width: 320px; margin: auto;"
|
|
223
226
|
/>
|
|
@@ -241,7 +244,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
|
|
|
241
244
|
| `segment` | Play only part of an animation. E. g. from frame 10 to frame 60 would be `[10, 60]` | `[number, number]` | `undefined` |
|
|
242
245
|
| `speed` | Animation speed | `number` | `1` |
|
|
243
246
|
| `src` _(required)_ | URL to LottieJSON or dotLottie | `string` | `undefined` |
|
|
244
|
-
| `subframe` | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices. | `boolean` | `
|
|
247
|
+
| `subframe` | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices. | `boolean` | `false` |
|
|
245
248
|
|
|
246
249
|
## Methods
|
|
247
250
|
|
|
@@ -258,6 +261,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
|
|
|
258
261
|
| `play() => void` | Play |
|
|
259
262
|
| `reload() => void` | Reload |
|
|
260
263
|
| `seek(value: number \| string) => void` | Go to frame. Can be a number or a percentage string (e. g. 50%). |
|
|
264
|
+
| `setCount(value: number) => void` | Dynamically set number of loops |
|
|
261
265
|
| `setDirection(value: 1 \| -1) => void` | Set Direction |
|
|
262
266
|
| `setLooping(value: boolean) => void` | Set Looping |
|
|
263
267
|
| `setSpeed(value?: number) => void` | Set Speed |
|
package/dist/cjs/index.js
CHANGED
|
@@ -277,10 +277,7 @@ 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,
|
|
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)=>{
|
|
280
|
+
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
|
|
284
281
|
if (!Array.isArray(assets)) return;
|
|
285
282
|
const toResolve = [];
|
|
286
283
|
for (const asset of assets){
|
|
@@ -313,7 +310,7 @@ const addExt = (ext, str)=>{
|
|
|
313
310
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
314
311
|
};
|
|
315
312
|
|
|
316
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.
|
|
313
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.4.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.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.106","@types/node":"^20.11.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.17","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.70.0","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};
|
|
317
314
|
|
|
318
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}}`;
|
|
319
316
|
|
|
@@ -403,7 +400,20 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
403
400
|
this.setSubframe(!!this.subframe);
|
|
404
401
|
if (this.autoplay) {
|
|
405
402
|
if (this.direction === -1) this.seek('99%');
|
|
406
|
-
|
|
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
|
+
}
|
|
416
|
+
this.play();
|
|
407
417
|
}
|
|
408
418
|
}
|
|
409
419
|
getManifest() {
|
|
@@ -479,6 +489,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
479
489
|
}
|
|
480
490
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
481
491
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
492
|
+
this.currentState = exports.PlayerState.Completed;
|
|
482
493
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
483
494
|
detail: {
|
|
484
495
|
frame: currentFrame,
|
|
@@ -653,6 +664,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
653
664
|
this.subframe = value;
|
|
654
665
|
this._lottieInstance.setSubframe(value);
|
|
655
666
|
}
|
|
667
|
+
setCount(value) {
|
|
668
|
+
if (!this._lottieInstance) return;
|
|
669
|
+
this.count = value;
|
|
670
|
+
}
|
|
656
671
|
_freeze() {
|
|
657
672
|
if (!this._lottieInstance) return;
|
|
658
673
|
if (this.currentState) {
|
|
@@ -829,7 +844,6 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
829
844
|
this._intersectionObserver = undefined;
|
|
830
845
|
}
|
|
831
846
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
832
|
-
this._removeEventListeners();
|
|
833
847
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
834
848
|
}
|
|
835
849
|
renderControls() {
|
|
@@ -853,7 +867,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
853
867
|
this.renderer = 'svg';
|
|
854
868
|
this.simple = false;
|
|
855
869
|
this.speed = 1;
|
|
856
|
-
this.subframe =
|
|
870
|
+
this.subframe = false;
|
|
857
871
|
this._isSettingsOpen = false;
|
|
858
872
|
this._seeker = 0;
|
|
859
873
|
this._currentAnimation = 0;
|
|
@@ -240,7 +240,7 @@
|
|
|
240
240
|
"type": {
|
|
241
241
|
"text": "Subframe | undefined"
|
|
242
242
|
},
|
|
243
|
-
"default": "
|
|
243
|
+
"default": "false",
|
|
244
244
|
"description": "Subframe",
|
|
245
245
|
"attribute": "subframe"
|
|
246
246
|
},
|
|
@@ -578,6 +578,20 @@
|
|
|
578
578
|
],
|
|
579
579
|
"description": "Toggles subframe, for more smooth animations"
|
|
580
580
|
},
|
|
581
|
+
{
|
|
582
|
+
"kind": "method",
|
|
583
|
+
"name": "setCount",
|
|
584
|
+
"privacy": "public",
|
|
585
|
+
"parameters": [
|
|
586
|
+
{
|
|
587
|
+
"name": "value",
|
|
588
|
+
"type": {
|
|
589
|
+
"text": "number"
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
],
|
|
593
|
+
"description": "Dynamically set count for loops"
|
|
594
|
+
},
|
|
581
595
|
{
|
|
582
596
|
"kind": "method",
|
|
583
597
|
"name": "_freeze",
|
|
@@ -911,7 +925,7 @@
|
|
|
911
925
|
"type": {
|
|
912
926
|
"text": "Subframe | undefined"
|
|
913
927
|
},
|
|
914
|
-
"default": "
|
|
928
|
+
"default": "false",
|
|
915
929
|
"description": "Subframe",
|
|
916
930
|
"fieldName": "subframe"
|
|
917
931
|
}
|
|
@@ -1066,10 +1080,6 @@
|
|
|
1066
1080
|
"kind": "variable",
|
|
1067
1081
|
"name": "isImage"
|
|
1068
1082
|
},
|
|
1069
|
-
{
|
|
1070
|
-
"kind": "variable",
|
|
1071
|
-
"name": "isInView"
|
|
1072
|
-
},
|
|
1073
1083
|
{
|
|
1074
1084
|
"kind": "variable",
|
|
1075
1085
|
"name": "isServer"
|
|
@@ -1260,14 +1270,6 @@
|
|
|
1260
1270
|
"module": "src/component/utils.ts"
|
|
1261
1271
|
}
|
|
1262
1272
|
},
|
|
1263
|
-
{
|
|
1264
|
-
"kind": "js",
|
|
1265
|
-
"name": "isInView",
|
|
1266
|
-
"declaration": {
|
|
1267
|
-
"name": "isInView",
|
|
1268
|
-
"module": "src/component/utils.ts"
|
|
1269
|
-
}
|
|
1270
|
-
},
|
|
1271
1273
|
{
|
|
1272
1274
|
"kind": "js",
|
|
1273
1275
|
"name": "isServer",
|
package/dist/esm/index.js
CHANGED
|
@@ -275,10 +275,7 @@ 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,
|
|
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)=>{
|
|
278
|
+
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
|
|
282
279
|
if (!Array.isArray(assets)) return;
|
|
283
280
|
const toResolve = [];
|
|
284
281
|
for (const asset of assets){
|
|
@@ -311,7 +308,7 @@ const addExt = (ext, str)=>{
|
|
|
311
308
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
312
309
|
};
|
|
313
310
|
|
|
314
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.
|
|
311
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.4.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.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.106","@types/node":"^20.11.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.17","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.70.0","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};
|
|
315
312
|
|
|
316
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}}`;
|
|
317
314
|
|
|
@@ -401,7 +398,20 @@ class DotLottiePlayer extends LitElement {
|
|
|
401
398
|
this.setSubframe(!!this.subframe);
|
|
402
399
|
if (this.autoplay) {
|
|
403
400
|
if (this.direction === -1) this.seek('99%');
|
|
404
|
-
|
|
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
|
+
}
|
|
414
|
+
this.play();
|
|
405
415
|
}
|
|
406
416
|
}
|
|
407
417
|
getManifest() {
|
|
@@ -477,6 +487,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
477
487
|
}
|
|
478
488
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
479
489
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
490
|
+
this.currentState = PlayerState.Completed;
|
|
480
491
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
481
492
|
detail: {
|
|
482
493
|
frame: currentFrame,
|
|
@@ -651,6 +662,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
651
662
|
this.subframe = value;
|
|
652
663
|
this._lottieInstance.setSubframe(value);
|
|
653
664
|
}
|
|
665
|
+
setCount(value) {
|
|
666
|
+
if (!this._lottieInstance) return;
|
|
667
|
+
this.count = value;
|
|
668
|
+
}
|
|
654
669
|
_freeze() {
|
|
655
670
|
if (!this._lottieInstance) return;
|
|
656
671
|
if (this.currentState) {
|
|
@@ -827,7 +842,6 @@ class DotLottiePlayer extends LitElement {
|
|
|
827
842
|
this._intersectionObserver = undefined;
|
|
828
843
|
}
|
|
829
844
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
830
|
-
this._removeEventListeners();
|
|
831
845
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
832
846
|
}
|
|
833
847
|
renderControls() {
|
|
@@ -851,7 +865,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
851
865
|
this.renderer = 'svg';
|
|
852
866
|
this.simple = false;
|
|
853
867
|
this.speed = 1;
|
|
854
|
-
this.subframe =
|
|
868
|
+
this.subframe = false;
|
|
855
869
|
this._isSettingsOpen = false;
|
|
856
870
|
this._seeker = 0;
|
|
857
871
|
this._currentAnimation = 0;
|
package/dist/index.d.ts
CHANGED
|
@@ -197,6 +197,7 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
197
197
|
seek(value: number | string): void;
|
|
198
198
|
snapshot(): string | undefined;
|
|
199
199
|
setSubframe(value: boolean): void;
|
|
200
|
+
setCount(value: number): void;
|
|
200
201
|
private _freeze;
|
|
201
202
|
reload(): Promise<void>;
|
|
202
203
|
setSpeed(value?: number): void;
|