@aarsteinmedia/dotlottie-player 2.4.0 → 2.4.2
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 +29 -7
- package/dist/custom-elements.json +14 -2
- package/dist/esm/index.js +29 -7
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/package.json +3 -3
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.2";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.107","@types/node":"^20.11.10","@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;
|
|
@@ -550,12 +566,12 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
550
566
|
}
|
|
551
567
|
async addAnimation(configs, fileName, shouldDownload = true) {
|
|
552
568
|
const { animations = [], manifest = {
|
|
553
|
-
animations: [
|
|
569
|
+
animations: this.src ? [
|
|
554
570
|
{
|
|
555
571
|
id: this._identifier
|
|
556
572
|
}
|
|
557
|
-
]
|
|
558
|
-
} } = await getAnimationData(this.src);
|
|
573
|
+
] : []
|
|
574
|
+
} } = this.src ? await getAnimationData(this.src) : {};
|
|
559
575
|
try {
|
|
560
576
|
manifest.generator = pkg.name;
|
|
561
577
|
for (const config of configs){
|
|
@@ -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.2";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.107","@types/node":"^20.11.10","@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;
|
|
@@ -548,12 +564,12 @@ class DotLottiePlayer extends LitElement {
|
|
|
548
564
|
}
|
|
549
565
|
async addAnimation(configs, fileName, shouldDownload = true) {
|
|
550
566
|
const { animations = [], manifest = {
|
|
551
|
-
animations: [
|
|
567
|
+
animations: this.src ? [
|
|
552
568
|
{
|
|
553
569
|
id: this._identifier
|
|
554
570
|
}
|
|
555
|
-
]
|
|
556
|
-
} } = await getAnimationData(this.src);
|
|
571
|
+
] : []
|
|
572
|
+
} } = this.src ? await getAnimationData(this.src) : {};
|
|
557
573
|
try {
|
|
558
574
|
manifest.generator = pkg.name;
|
|
559
575
|
for (const config of configs){
|
|
@@ -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;
|