@aarsteinmedia/dotlottie-player 2.4.1 → 2.4.3
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 +42 -19
- package/dist/cjs/index.js +26 -4
- package/dist/custom-elements.json +14 -2
- package/dist/esm/index.js +26 -4
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -2
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -71,16 +71,38 @@ If you want to combine multiple animations in one single dotLottie file you can
|
|
|
71
71
|
|
|
72
72
|
```javascript
|
|
73
73
|
const lottiePlayer = document.querySelector('dotlottie-player')
|
|
74
|
-
|
|
75
|
-
lottiePlayer?.addAnimation([
|
|
74
|
+
(async () => {
|
|
75
|
+
await lottiePlayer?.addAnimation([
|
|
76
76
|
{ id: 'animation_1', url: '/url/to/animation_1.lottie' },
|
|
77
77
|
{ id: 'animation_2', url: '/url/to/animation_2.json', direction: -1, speed: 2 }
|
|
78
78
|
])
|
|
79
|
-
}
|
|
79
|
+
}())
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
You can also use this method independent of any Lottie player on the page, as long as the script is loaded, of course.
|
|
83
|
+
|
|
84
|
+
```javascript
|
|
85
|
+
(async () => {
|
|
86
|
+
await dotLottiePlayer().addAnimation([
|
|
87
|
+
{ id: 'animation_1', url: '/path/to/animation_1.lottie' },
|
|
88
|
+
{ id: 'animation_2', url: '/path/to/animation_2.json', direction: -1, speed: 2 }
|
|
89
|
+
])
|
|
90
|
+
}())
|
|
80
91
|
```
|
|
81
92
|
|
|
82
93
|
The new file wil automatically load the first animation when initialized. You can toggle between animations with the `next()` and `prev()` methods, or you can use the navigation buttons in the controls.
|
|
83
94
|
|
|
95
|
+
If you add `multiAnimationSettings` to the markup you can control the playback of multiple animations. In the example below the first animation will play once, and then the next animation will loop:
|
|
96
|
+
|
|
97
|
+
```xml
|
|
98
|
+
<dotlottie-player
|
|
99
|
+
subframe=""
|
|
100
|
+
src="/path/to/combined-animations.lottie"
|
|
101
|
+
multiAnimationSettings='[{"autplay": true}, {"autoplay": true, "loop": true}]'
|
|
102
|
+
>
|
|
103
|
+
</dotlottie-player>
|
|
104
|
+
```
|
|
105
|
+
|
|
84
106
|
### Angular
|
|
85
107
|
|
|
86
108
|
1. Import the component in `app.component.ts`.
|
|
@@ -229,22 +251,23 @@ export default defineNuxtPlugin(({ vueApp }) => {
|
|
|
229
251
|
|
|
230
252
|
## Properties
|
|
231
253
|
|
|
232
|
-
| Property / Attribute
|
|
233
|
-
|
|
|
234
|
-
| `autoplay`
|
|
235
|
-
| `background`
|
|
236
|
-
| `controls`
|
|
237
|
-
| `count`
|
|
238
|
-
| `direction`
|
|
239
|
-
| `hover`
|
|
240
|
-
| `loop`
|
|
241
|
-
| `mode`
|
|
242
|
-
| `
|
|
243
|
-
| `
|
|
244
|
-
| `
|
|
245
|
-
| `
|
|
246
|
-
| `
|
|
247
|
-
| `
|
|
254
|
+
| Property / Attribute | Description | Type | Default |
|
|
255
|
+
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------- |
|
|
256
|
+
| `autoplay` | Play animation on load | `boolean` | `false` |
|
|
257
|
+
| `background` | Background color | `string` | `undefined` |
|
|
258
|
+
| `controls` | Show controls | `boolean` | `false` |
|
|
259
|
+
| `count` | Number of times to loop animation | `number` | `undefined` |
|
|
260
|
+
| `direction` | Direction of animation | `1` \| `-1` | `1` |
|
|
261
|
+
| `hover` | Whether to play on mouse hover | `boolean` | `false` |
|
|
262
|
+
| `loop` | Whether to loop animation | `boolean` | `false` |
|
|
263
|
+
| `mode` | Play mode | `normal` \| `bounce` | `normal` |
|
|
264
|
+
| `multiAnimationSettings` | Control playback of multianimation files. Write a valid JSON array (as string) with properties like `autoplay`, `loop`, etc. | `object[]` | `undefined` |
|
|
265
|
+
| `objectfit` | Resizing of animation in container | `contain` \| `cover` \| `fill` \| `none` | `contain` |
|
|
266
|
+
| `renderer` | Renderer to use | `svg` \| `canvas` \| `html` | `svg` |
|
|
267
|
+
| `segment` | Play only part of an animation. E. g. from frame 10 to frame 60 would be `[10, 60]` | `[number, number]` | `undefined` |
|
|
268
|
+
| `speed` | Animation speed | `number` | `1` |
|
|
269
|
+
| `src` _(required)_ | URL to LottieJSON or dotLottie | `string` | `undefined` |
|
|
270
|
+
| `subframe` | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices. | `boolean` | `false` |
|
|
248
271
|
|
|
249
272
|
## Methods
|
|
250
273
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -105,6 +105,19 @@ const addExt = (ext, str)=>{
|
|
|
105
105
|
} catch (err) {
|
|
106
106
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
107
107
|
}
|
|
108
|
+
}, createJSON = ({ animation, fileName, shouldDownload })=>{
|
|
109
|
+
try {
|
|
110
|
+
if (!animation) {
|
|
111
|
+
throw new Error('Missing or malformed required parameter(s):\n - animation\n\'');
|
|
112
|
+
}
|
|
113
|
+
const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation);
|
|
114
|
+
return shouldDownload ? download(jsonString, {
|
|
115
|
+
name,
|
|
116
|
+
mimeType: 'application/json'
|
|
117
|
+
}) : jsonString;
|
|
118
|
+
} catch (err) {
|
|
119
|
+
console.error(`❌ ${handleErrors(err).message}`);
|
|
120
|
+
}
|
|
108
121
|
}, download = (data, options)=>{
|
|
109
122
|
const blob = new Blob([
|
|
110
123
|
data
|
|
@@ -310,7 +323,7 @@ const addExt = (ext, str)=>{
|
|
|
310
323
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
311
324
|
};
|
|
312
325
|
|
|
313
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.4.
|
|
326
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.4.3";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.4.0","@types/node":"^20.11.17","@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
327
|
|
|
315
328
|
var css_248z = lit.css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
|
|
316
329
|
|
|
@@ -487,6 +500,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
487
500
|
if (!this._lottieInstance) {
|
|
488
501
|
return;
|
|
489
502
|
}
|
|
503
|
+
if (this._animations.length > 1 && this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay) {
|
|
504
|
+
return this.next();
|
|
505
|
+
}
|
|
490
506
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
491
507
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
492
508
|
this.currentState = exports.PlayerState.Completed;
|
|
@@ -796,10 +812,16 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
796
812
|
this._currentAnimation--;
|
|
797
813
|
this._switchInstance(true);
|
|
798
814
|
}
|
|
799
|
-
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
800
|
-
if (typeCheck || this._isDotLottie)
|
|
815
|
+
async convert({ typeCheck, manifest, animations, src, fileName, shouldDownload = true }) {
|
|
816
|
+
if (typeCheck || this._isDotLottie) {
|
|
817
|
+
return createJSON({
|
|
818
|
+
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
819
|
+
fileName: `${getFilename(fileName || this.src)}.json`,
|
|
820
|
+
shouldDownload
|
|
821
|
+
});
|
|
822
|
+
}
|
|
801
823
|
return createDotLottie({
|
|
802
|
-
animations: animations || (await getAnimationData(this.src))
|
|
824
|
+
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
803
825
|
manifest: {
|
|
804
826
|
...manifest || this._manifest,
|
|
805
827
|
generator: pkg.name
|
|
@@ -737,9 +737,9 @@
|
|
|
737
737
|
"privacy": "public",
|
|
738
738
|
"parameters": [
|
|
739
739
|
{
|
|
740
|
-
"name": "{\n typeCheck,\n manifest,\n animations,\n fileName,\n shouldDownload = true\n }",
|
|
740
|
+
"name": "{\n typeCheck,\n manifest,\n animations,\n src,\n fileName,\n shouldDownload = true\n }",
|
|
741
741
|
"type": {
|
|
742
|
-
"text": "{\n /** External type safety */\n typeCheck?: boolean
|
|
742
|
+
"text": "{\n /** External type safety */\n typeCheck?: boolean\n\n /** Externally added manifest */\n manifest?: LottieManifest\n\n /** Externally added animations */\n animations?: LottieJSON[]\n\n src?: string\n\n fileName?: string\n\n /** Whether to trigger a download in the browser. Defaults to true */\n shouldDownload?: boolean\n }"
|
|
743
743
|
}
|
|
744
744
|
}
|
|
745
745
|
]
|
|
@@ -1016,6 +1016,10 @@
|
|
|
1016
1016
|
"kind": "variable",
|
|
1017
1017
|
"name": "createDotLottie"
|
|
1018
1018
|
},
|
|
1019
|
+
{
|
|
1020
|
+
"kind": "variable",
|
|
1021
|
+
"name": "createJSON"
|
|
1022
|
+
},
|
|
1019
1023
|
{
|
|
1020
1024
|
"kind": "variable",
|
|
1021
1025
|
"name": "download"
|
|
@@ -1142,6 +1146,14 @@
|
|
|
1142
1146
|
"module": "src/component/utils.ts"
|
|
1143
1147
|
}
|
|
1144
1148
|
},
|
|
1149
|
+
{
|
|
1150
|
+
"kind": "js",
|
|
1151
|
+
"name": "createJSON",
|
|
1152
|
+
"declaration": {
|
|
1153
|
+
"name": "createJSON",
|
|
1154
|
+
"module": "src/component/utils.ts"
|
|
1155
|
+
}
|
|
1156
|
+
},
|
|
1145
1157
|
{
|
|
1146
1158
|
"kind": "js",
|
|
1147
1159
|
"name": "download",
|
package/dist/esm/index.js
CHANGED
|
@@ -103,6 +103,19 @@ const addExt = (ext, str)=>{
|
|
|
103
103
|
} catch (err) {
|
|
104
104
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
105
105
|
}
|
|
106
|
+
}, createJSON = ({ animation, fileName, shouldDownload })=>{
|
|
107
|
+
try {
|
|
108
|
+
if (!animation) {
|
|
109
|
+
throw new Error('Missing or malformed required parameter(s):\n - animation\n\'');
|
|
110
|
+
}
|
|
111
|
+
const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation);
|
|
112
|
+
return shouldDownload ? download(jsonString, {
|
|
113
|
+
name,
|
|
114
|
+
mimeType: 'application/json'
|
|
115
|
+
}) : jsonString;
|
|
116
|
+
} catch (err) {
|
|
117
|
+
console.error(`❌ ${handleErrors(err).message}`);
|
|
118
|
+
}
|
|
106
119
|
}, download = (data, options)=>{
|
|
107
120
|
const blob = new Blob([
|
|
108
121
|
data
|
|
@@ -308,7 +321,7 @@ const addExt = (ext, str)=>{
|
|
|
308
321
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
309
322
|
};
|
|
310
323
|
|
|
311
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.4.
|
|
324
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.4.3";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.2",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.4.0","@types/node":"^20.11.17","@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
325
|
|
|
313
326
|
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
327
|
|
|
@@ -485,6 +498,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
485
498
|
if (!this._lottieInstance) {
|
|
486
499
|
return;
|
|
487
500
|
}
|
|
501
|
+
if (this._animations.length > 1 && this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay) {
|
|
502
|
+
return this.next();
|
|
503
|
+
}
|
|
488
504
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
489
505
|
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
490
506
|
this.currentState = PlayerState.Completed;
|
|
@@ -794,10 +810,16 @@ class DotLottiePlayer extends LitElement {
|
|
|
794
810
|
this._currentAnimation--;
|
|
795
811
|
this._switchInstance(true);
|
|
796
812
|
}
|
|
797
|
-
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
798
|
-
if (typeCheck || this._isDotLottie)
|
|
813
|
+
async convert({ typeCheck, manifest, animations, src, fileName, shouldDownload = true }) {
|
|
814
|
+
if (typeCheck || this._isDotLottie) {
|
|
815
|
+
return createJSON({
|
|
816
|
+
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
817
|
+
fileName: `${getFilename(fileName || this.src)}.json`,
|
|
818
|
+
shouldDownload
|
|
819
|
+
});
|
|
820
|
+
}
|
|
799
821
|
return createDotLottie({
|
|
800
|
-
animations: animations || (await getAnimationData(this.src))
|
|
822
|
+
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
801
823
|
manifest: {
|
|
802
824
|
...manifest || this._manifest,
|
|
803
825
|
generator: pkg.name
|
package/dist/index.d.ts
CHANGED
|
@@ -213,13 +213,14 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
213
213
|
private _switchInstance;
|
|
214
214
|
next(): void;
|
|
215
215
|
prev(): void;
|
|
216
|
-
convert({ typeCheck, manifest, animations, fileName, shouldDownload }: {
|
|
216
|
+
convert({ typeCheck, manifest, animations, src, fileName, shouldDownload }: {
|
|
217
217
|
typeCheck?: boolean;
|
|
218
218
|
manifest?: LottieManifest;
|
|
219
219
|
animations?: LottieJSON[];
|
|
220
|
+
src?: string;
|
|
220
221
|
fileName?: string;
|
|
221
222
|
shouldDownload?: boolean;
|
|
222
|
-
}): Promise<void | ArrayBuffer>;
|
|
223
|
+
}): Promise<string | void | ArrayBuffer>;
|
|
223
224
|
static get styles(): CSSResult;
|
|
224
225
|
constructor();
|
|
225
226
|
connectedCallback(): void;
|