@aarsteinmedia/dotlottie-player 2.3.6 → 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 +7 -3
- package/dist/custom-elements.json +16 -2
- package/dist/esm/index.js +7 -3
- 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
|
@@ -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.
|
|
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};
|
|
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
|
|
|
@@ -489,6 +489,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
489
489
|
}
|
|
490
490
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
491
491
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
492
|
+
this.currentState = exports.PlayerState.Completed;
|
|
492
493
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
493
494
|
detail: {
|
|
494
495
|
frame: currentFrame,
|
|
@@ -663,6 +664,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
663
664
|
this.subframe = value;
|
|
664
665
|
this._lottieInstance.setSubframe(value);
|
|
665
666
|
}
|
|
667
|
+
setCount(value) {
|
|
668
|
+
if (!this._lottieInstance) return;
|
|
669
|
+
this.count = value;
|
|
670
|
+
}
|
|
666
671
|
_freeze() {
|
|
667
672
|
if (!this._lottieInstance) return;
|
|
668
673
|
if (this.currentState) {
|
|
@@ -839,7 +844,6 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
839
844
|
this._intersectionObserver = undefined;
|
|
840
845
|
}
|
|
841
846
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
842
|
-
this._removeEventListeners();
|
|
843
847
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
844
848
|
}
|
|
845
849
|
renderControls() {
|
|
@@ -863,7 +867,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
863
867
|
this.renderer = 'svg';
|
|
864
868
|
this.simple = false;
|
|
865
869
|
this.speed = 1;
|
|
866
|
-
this.subframe =
|
|
870
|
+
this.subframe = false;
|
|
867
871
|
this._isSettingsOpen = false;
|
|
868
872
|
this._seeker = 0;
|
|
869
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
|
}
|
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.
|
|
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};
|
|
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
|
|
|
@@ -487,6 +487,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
487
487
|
}
|
|
488
488
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
489
489
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
490
|
+
this.currentState = PlayerState.Completed;
|
|
490
491
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
491
492
|
detail: {
|
|
492
493
|
frame: currentFrame,
|
|
@@ -661,6 +662,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
661
662
|
this.subframe = value;
|
|
662
663
|
this._lottieInstance.setSubframe(value);
|
|
663
664
|
}
|
|
665
|
+
setCount(value) {
|
|
666
|
+
if (!this._lottieInstance) return;
|
|
667
|
+
this.count = value;
|
|
668
|
+
}
|
|
664
669
|
_freeze() {
|
|
665
670
|
if (!this._lottieInstance) return;
|
|
666
671
|
if (this.currentState) {
|
|
@@ -837,7 +842,6 @@ class DotLottiePlayer extends LitElement {
|
|
|
837
842
|
this._intersectionObserver = undefined;
|
|
838
843
|
}
|
|
839
844
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
840
|
-
this._removeEventListeners();
|
|
841
845
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
842
846
|
}
|
|
843
847
|
renderControls() {
|
|
@@ -861,7 +865,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
861
865
|
this.renderer = 'svg';
|
|
862
866
|
this.simple = false;
|
|
863
867
|
this.speed = 1;
|
|
864
|
-
this.subframe =
|
|
868
|
+
this.subframe = false;
|
|
865
869
|
this._isSettingsOpen = false;
|
|
866
870
|
this._seeker = 0;
|
|
867
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;
|