@aarsteinmedia/dotlottie-player 2.2.8 → 2.2.10
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 +1 -1
- package/dist/cjs/index.js +35 -150
- package/dist/custom-elements.json +12 -14
- package/dist/esm/index.js +35 -150
- package/dist/index.d.ts +3 -0
- package/dist/index.js +4 -4
- package/package.json +21 -15
package/README.md
CHANGED
|
@@ -289,7 +289,7 @@ The following events are exposed and can be listened to via `addEventListener` c
|
|
|
289
289
|
## WordPress Plugins
|
|
290
290
|
<img align="left" width="110" height="110" src="/.github/wpIcon.svg" />
|
|
291
291
|
|
|
292
|
-
We've made a free WordPress plugin that works with Gutenberg Blocks, Elementor, Divi Builder and Flatsome UX Builder: [AM LottiePlayer](https://
|
|
292
|
+
We've made a free WordPress plugin that works with Gutenberg Blocks, Elementor, Divi Builder and Flatsome UX Builder: [AM LottiePlayer](https://www.aarstein.media/en/am-lottieplayer). It has all the functionality of this package, with a helpful user interface.
|
|
293
293
|
|
|
294
294
|
It's super lightweight – and only loads on pages where animations are used.
|
|
295
295
|
|
package/dist/cjs/index.js
CHANGED
|
@@ -138,9 +138,7 @@ const addExt = (ext, str)=>{
|
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
return res;
|
|
141
|
-
}, frameOutput = (frame)=>{
|
|
142
|
-
return ((frame ?? 0) + 1).toString().padStart(3, '0');
|
|
143
|
-
}, getAnimationData = async (input)=>{
|
|
141
|
+
}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
|
|
144
142
|
try {
|
|
145
143
|
if (!input || typeof input !== 'string' && typeof input !== 'object') {
|
|
146
144
|
throw new Error('Broken file or invalid file format');
|
|
@@ -255,15 +253,11 @@ const addExt = (ext, str)=>{
|
|
|
255
253
|
}, hasExt = (path)=>{
|
|
256
254
|
const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
|
|
257
255
|
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
|
|
258
|
-
}, isAudio = (asset)=>{
|
|
259
|
-
return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
|
|
260
|
-
}, isImage = (asset)=>{
|
|
261
|
-
return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
|
|
262
|
-
}, isServer = ()=>{
|
|
263
|
-
return !(typeof window !== 'undefined' && window.document);
|
|
264
|
-
}, strToU8 = (str)=>{
|
|
256
|
+
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), strToU8 = (str)=>{
|
|
265
257
|
const u8 = new Uint8Array(str.length);
|
|
266
|
-
for(
|
|
258
|
+
for (const [i] of [
|
|
259
|
+
...Array(str.length)
|
|
260
|
+
].entries()){
|
|
267
261
|
u8[i] = str.charCodeAt(i);
|
|
268
262
|
}
|
|
269
263
|
return u8;
|
|
@@ -300,129 +294,9 @@ const addExt = (ext, str)=>{
|
|
|
300
294
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
301
295
|
};
|
|
302
296
|
|
|
303
|
-
var name = "@aarsteinmedia/dotlottie-player";
|
|
304
|
-
var version = "2.2.7";
|
|
305
|
-
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
306
|
-
var exports$1 = {
|
|
307
|
-
".": {
|
|
308
|
-
"import": "./dist/esm/index.js",
|
|
309
|
-
node: "./dist/esm/index.js",
|
|
310
|
-
require: "./dist/cjs/index.js",
|
|
311
|
-
types: "./dist/index.d.ts"
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
var main = "./dist/esm/index.js";
|
|
315
|
-
var unpkg = "./dist/index.js";
|
|
316
|
-
var module$1 = "./dist/esm/index.js";
|
|
317
|
-
var types = "./dist/index.d.ts";
|
|
318
|
-
var type = "module";
|
|
319
|
-
var homepage = "https://www.aarstein.media/en/dotlottie-player";
|
|
320
|
-
var repository = {
|
|
321
|
-
url: "https://github.com/aarsteinmedia/dotlottie-player.git",
|
|
322
|
-
type: "git"
|
|
323
|
-
};
|
|
324
|
-
var bugs = "https://github.com/aarsteinmedia/dotlottie-player/issues";
|
|
325
|
-
var author = {
|
|
326
|
-
name: "Johan Martin Aarstein",
|
|
327
|
-
email: "johan@aarstein.media",
|
|
328
|
-
url: "https://www.aarstein.media",
|
|
329
|
-
organization: "Aarstein Media"
|
|
330
|
-
};
|
|
331
|
-
var license = "GPL-2.0-or-later";
|
|
332
|
-
var scripts = {
|
|
333
|
-
build: "pnpm cleanup && rollup -c",
|
|
334
|
-
"build:types": "pnpm cleanup:types && tsc",
|
|
335
|
-
"build:cem": "npx cem analyze --config 'cem.config.mjs'",
|
|
336
|
-
prod: "pnpm build:types && pnpm build && pnpm build:cem",
|
|
337
|
-
dev: "pnpm cleanup && rollup -c --watch",
|
|
338
|
-
lint: "tsc && eslint . --ext .ts,.js",
|
|
339
|
-
"lint:fix": "eslint . --ext .ts,.js --fix",
|
|
340
|
-
"cleanup:types": "shx rm -rf types && shx mkdir types",
|
|
341
|
-
cleanup: "shx rm -rf dist && shx mkdir dist"
|
|
342
|
-
};
|
|
343
|
-
var dependencies = {
|
|
344
|
-
fflate: "^0.8.1",
|
|
345
|
-
lit: "^2.8.0",
|
|
346
|
-
"lottie-web": "^5.12.2"
|
|
347
|
-
};
|
|
348
|
-
var peerDependencies = {
|
|
349
|
-
"@types/react": ">= 16.0.0"
|
|
350
|
-
};
|
|
351
|
-
var devDependencies = {
|
|
352
|
-
"@custom-elements-manifest/analyzer": "^0.6.9",
|
|
353
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
354
|
-
"@rollup/plugin-json": "^6.0.1",
|
|
355
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
356
|
-
"@rollup/plugin-replace": "^5.0.5",
|
|
357
|
-
"@swc/core": "^1.3.99",
|
|
358
|
-
"@types/node": "^20.10.0",
|
|
359
|
-
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
360
|
-
"@typescript-eslint/parser": "^5.62.0",
|
|
361
|
-
eslint: "^8.54.0",
|
|
362
|
-
"eslint-plugin-lit": "^1.10.1",
|
|
363
|
-
rollup: "^3.29.4",
|
|
364
|
-
"rollup-plugin-dts": "^6.1.0",
|
|
365
|
-
"rollup-plugin-html-literals": "^1.1.8",
|
|
366
|
-
"rollup-plugin-summary": "^2.0.0",
|
|
367
|
-
"rollup-plugin-swc3": "^0.9.1",
|
|
368
|
-
shx: "^0.3.4",
|
|
369
|
-
"ts-lit-plugin": "^1.2.1",
|
|
370
|
-
typescript: "^5.3.2"
|
|
371
|
-
};
|
|
372
|
-
var customElements = "dist/custom-elements.json";
|
|
373
|
-
var files = [
|
|
374
|
-
"dist",
|
|
375
|
-
"README.md"
|
|
376
|
-
];
|
|
377
|
-
var keywords = [
|
|
378
|
-
"lottie",
|
|
379
|
-
"dotlottie",
|
|
380
|
-
"animation",
|
|
381
|
-
"web component",
|
|
382
|
-
"component",
|
|
383
|
-
"lit-element",
|
|
384
|
-
"svg",
|
|
385
|
-
"vector",
|
|
386
|
-
"player"
|
|
387
|
-
];
|
|
388
|
-
var publishConfig = {
|
|
389
|
-
access: "public"
|
|
390
|
-
};
|
|
391
|
-
var engines = {
|
|
392
|
-
node: ">= 7.6.0"
|
|
393
|
-
};
|
|
394
|
-
var funding = {
|
|
395
|
-
type: "paypal",
|
|
396
|
-
url: "https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"
|
|
397
|
-
};
|
|
398
|
-
var pkg = {
|
|
399
|
-
name: name,
|
|
400
|
-
version: version,
|
|
401
|
-
description: description,
|
|
402
|
-
exports: exports$1,
|
|
403
|
-
main: main,
|
|
404
|
-
unpkg: unpkg,
|
|
405
|
-
module: module$1,
|
|
406
|
-
types: types,
|
|
407
|
-
type: type,
|
|
408
|
-
homepage: homepage,
|
|
409
|
-
repository: repository,
|
|
410
|
-
bugs: bugs,
|
|
411
|
-
author: author,
|
|
412
|
-
license: license,
|
|
413
|
-
scripts: scripts,
|
|
414
|
-
dependencies: dependencies,
|
|
415
|
-
peerDependencies: peerDependencies,
|
|
416
|
-
devDependencies: devDependencies,
|
|
417
|
-
customElements: customElements,
|
|
418
|
-
files: files,
|
|
419
|
-
keywords: keywords,
|
|
420
|
-
publishConfig: publishConfig,
|
|
421
|
-
engines: engines,
|
|
422
|
-
funding: funding
|
|
423
|
-
};
|
|
297
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.2.10";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.101","@types/node":"^20.10.5","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","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};
|
|
424
298
|
|
|
425
|
-
var
|
|
299
|
+
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}}`;
|
|
426
300
|
|
|
427
301
|
function _ts_decorate(decorators, target, key, desc) {
|
|
428
302
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -576,17 +450,19 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
576
450
|
this.currentState = exports.PlayerState.Error;
|
|
577
451
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
578
452
|
});
|
|
579
|
-
if (this.container) {
|
|
580
|
-
this.container.addEventListener('mouseenter',
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
453
|
+
if (this.container && this.hover) {
|
|
454
|
+
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
455
|
+
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
_mouseEnter() {
|
|
459
|
+
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
460
|
+
this.play();
|
|
461
|
+
}
|
|
462
|
+
}
|
|
463
|
+
_mouseLeave() {
|
|
464
|
+
if (this.hover && this.currentState === exports.PlayerState.Playing) {
|
|
465
|
+
this.stop();
|
|
590
466
|
}
|
|
591
467
|
}
|
|
592
468
|
_onVisibilityChange() {
|
|
@@ -796,14 +672,20 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
796
672
|
if (curr?.mode !== undefined) {
|
|
797
673
|
if (curr.mode === exports.PlayMode.Normal) {
|
|
798
674
|
curr.mode = exports.PlayMode.Bounce;
|
|
675
|
+
this._isBounce = true;
|
|
799
676
|
} else {
|
|
800
677
|
curr.mode = exports.PlayMode.Normal;
|
|
678
|
+
this._isBounce = false;
|
|
801
679
|
}
|
|
802
|
-
|
|
680
|
+
return;
|
|
681
|
+
}
|
|
682
|
+
if (this.mode === exports.PlayMode.Normal) {
|
|
803
683
|
this.mode = exports.PlayMode.Bounce;
|
|
804
|
-
|
|
805
|
-
|
|
684
|
+
this._isBounce = true;
|
|
685
|
+
return;
|
|
806
686
|
}
|
|
687
|
+
this.mode = exports.PlayMode.Normal;
|
|
688
|
+
this._isBounce = false;
|
|
807
689
|
}
|
|
808
690
|
_toggleSettings(flag) {
|
|
809
691
|
if (flag === undefined) {
|
|
@@ -852,7 +734,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
852
734
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
853
735
|
}
|
|
854
736
|
static get styles() {
|
|
855
|
-
return
|
|
737
|
+
return css_248z;
|
|
856
738
|
}
|
|
857
739
|
connectedCallback() {
|
|
858
740
|
super.connectedCallback();
|
|
@@ -894,8 +776,8 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
894
776
|
render() {
|
|
895
777
|
return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? lit.nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === exports.PlayerState.Error ? lit.html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : lit.nothing}</div>${this.controls ? this.renderControls() : lit.nothing}</figure>`;
|
|
896
778
|
}
|
|
897
|
-
constructor(
|
|
898
|
-
super(
|
|
779
|
+
constructor(){
|
|
780
|
+
super();
|
|
899
781
|
this.background = 'transparent';
|
|
900
782
|
this.controls = false;
|
|
901
783
|
this.currentState = exports.PlayerState.Loading;
|
|
@@ -928,6 +810,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
928
810
|
target.focus();
|
|
929
811
|
}
|
|
930
812
|
};
|
|
813
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
814
|
+
this._mouseEnter = this._mouseEnter.bind(this);
|
|
815
|
+
this._mouseLeave = this._mouseLeave.bind(this);
|
|
931
816
|
}
|
|
932
817
|
}
|
|
933
818
|
_ts_decorate([
|
|
@@ -396,6 +396,18 @@
|
|
|
396
396
|
"privacy": "private",
|
|
397
397
|
"description": "Add event listeners"
|
|
398
398
|
},
|
|
399
|
+
{
|
|
400
|
+
"kind": "method",
|
|
401
|
+
"name": "_mouseEnter",
|
|
402
|
+
"privacy": "private",
|
|
403
|
+
"description": "Handle MouseEnter"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"kind": "method",
|
|
407
|
+
"name": "_mouseLeave",
|
|
408
|
+
"privacy": "private",
|
|
409
|
+
"description": "Handle MouseLeave"
|
|
410
|
+
},
|
|
399
411
|
{
|
|
400
412
|
"kind": "method",
|
|
401
413
|
"name": "_onVisibilityChange",
|
|
@@ -929,20 +941,6 @@
|
|
|
929
941
|
}
|
|
930
942
|
]
|
|
931
943
|
},
|
|
932
|
-
{
|
|
933
|
-
"kind": "javascript-module",
|
|
934
|
-
"path": "src/component/styles.ts",
|
|
935
|
-
"declarations": [],
|
|
936
|
-
"exports": [
|
|
937
|
-
{
|
|
938
|
-
"kind": "js",
|
|
939
|
-
"name": "default",
|
|
940
|
-
"declaration": {
|
|
941
|
-
"module": "src/component/styles.ts"
|
|
942
|
-
}
|
|
943
|
-
}
|
|
944
|
-
]
|
|
945
|
-
},
|
|
946
944
|
{
|
|
947
945
|
"kind": "javascript-module",
|
|
948
946
|
"path": "src/component/types.ts",
|
package/dist/esm/index.js
CHANGED
|
@@ -136,9 +136,7 @@ const addExt = (ext, str)=>{
|
|
|
136
136
|
}
|
|
137
137
|
}
|
|
138
138
|
return res;
|
|
139
|
-
}, frameOutput = (frame)=>{
|
|
140
|
-
return ((frame ?? 0) + 1).toString().padStart(3, '0');
|
|
141
|
-
}, getAnimationData = async (input)=>{
|
|
139
|
+
}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
|
|
142
140
|
try {
|
|
143
141
|
if (!input || typeof input !== 'string' && typeof input !== 'object') {
|
|
144
142
|
throw new Error('Broken file or invalid file format');
|
|
@@ -253,15 +251,11 @@ const addExt = (ext, str)=>{
|
|
|
253
251
|
}, hasExt = (path)=>{
|
|
254
252
|
const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
|
|
255
253
|
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
|
|
256
|
-
}, isAudio = (asset)=>{
|
|
257
|
-
return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
|
|
258
|
-
}, isImage = (asset)=>{
|
|
259
|
-
return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
|
|
260
|
-
}, isServer = ()=>{
|
|
261
|
-
return !(typeof window !== 'undefined' && window.document);
|
|
262
|
-
}, strToU8 = (str)=>{
|
|
254
|
+
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), strToU8 = (str)=>{
|
|
263
255
|
const u8 = new Uint8Array(str.length);
|
|
264
|
-
for(
|
|
256
|
+
for (const [i] of [
|
|
257
|
+
...Array(str.length)
|
|
258
|
+
].entries()){
|
|
265
259
|
u8[i] = str.charCodeAt(i);
|
|
266
260
|
}
|
|
267
261
|
return u8;
|
|
@@ -298,129 +292,9 @@ const addExt = (ext, str)=>{
|
|
|
298
292
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
299
293
|
};
|
|
300
294
|
|
|
301
|
-
var name = "@aarsteinmedia/dotlottie-player";
|
|
302
|
-
var version = "2.2.7";
|
|
303
|
-
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
304
|
-
var exports = {
|
|
305
|
-
".": {
|
|
306
|
-
"import": "./dist/esm/index.js",
|
|
307
|
-
node: "./dist/esm/index.js",
|
|
308
|
-
require: "./dist/cjs/index.js",
|
|
309
|
-
types: "./dist/index.d.ts"
|
|
310
|
-
}
|
|
311
|
-
};
|
|
312
|
-
var main = "./dist/esm/index.js";
|
|
313
|
-
var unpkg = "./dist/index.js";
|
|
314
|
-
var module = "./dist/esm/index.js";
|
|
315
|
-
var types = "./dist/index.d.ts";
|
|
316
|
-
var type = "module";
|
|
317
|
-
var homepage = "https://www.aarstein.media/en/dotlottie-player";
|
|
318
|
-
var repository = {
|
|
319
|
-
url: "https://github.com/aarsteinmedia/dotlottie-player.git",
|
|
320
|
-
type: "git"
|
|
321
|
-
};
|
|
322
|
-
var bugs = "https://github.com/aarsteinmedia/dotlottie-player/issues";
|
|
323
|
-
var author = {
|
|
324
|
-
name: "Johan Martin Aarstein",
|
|
325
|
-
email: "johan@aarstein.media",
|
|
326
|
-
url: "https://www.aarstein.media",
|
|
327
|
-
organization: "Aarstein Media"
|
|
328
|
-
};
|
|
329
|
-
var license = "GPL-2.0-or-later";
|
|
330
|
-
var scripts = {
|
|
331
|
-
build: "pnpm cleanup && rollup -c",
|
|
332
|
-
"build:types": "pnpm cleanup:types && tsc",
|
|
333
|
-
"build:cem": "npx cem analyze --config 'cem.config.mjs'",
|
|
334
|
-
prod: "pnpm build:types && pnpm build && pnpm build:cem",
|
|
335
|
-
dev: "pnpm cleanup && rollup -c --watch",
|
|
336
|
-
lint: "tsc && eslint . --ext .ts,.js",
|
|
337
|
-
"lint:fix": "eslint . --ext .ts,.js --fix",
|
|
338
|
-
"cleanup:types": "shx rm -rf types && shx mkdir types",
|
|
339
|
-
cleanup: "shx rm -rf dist && shx mkdir dist"
|
|
340
|
-
};
|
|
341
|
-
var dependencies = {
|
|
342
|
-
fflate: "^0.8.1",
|
|
343
|
-
lit: "^2.8.0",
|
|
344
|
-
"lottie-web": "^5.12.2"
|
|
345
|
-
};
|
|
346
|
-
var peerDependencies = {
|
|
347
|
-
"@types/react": ">= 16.0.0"
|
|
348
|
-
};
|
|
349
|
-
var devDependencies = {
|
|
350
|
-
"@custom-elements-manifest/analyzer": "^0.6.9",
|
|
351
|
-
"@rollup/plugin-commonjs": "^25.0.7",
|
|
352
|
-
"@rollup/plugin-json": "^6.0.1",
|
|
353
|
-
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
354
|
-
"@rollup/plugin-replace": "^5.0.5",
|
|
355
|
-
"@swc/core": "^1.3.99",
|
|
356
|
-
"@types/node": "^20.10.0",
|
|
357
|
-
"@typescript-eslint/eslint-plugin": "^5.62.0",
|
|
358
|
-
"@typescript-eslint/parser": "^5.62.0",
|
|
359
|
-
eslint: "^8.54.0",
|
|
360
|
-
"eslint-plugin-lit": "^1.10.1",
|
|
361
|
-
rollup: "^3.29.4",
|
|
362
|
-
"rollup-plugin-dts": "^6.1.0",
|
|
363
|
-
"rollup-plugin-html-literals": "^1.1.8",
|
|
364
|
-
"rollup-plugin-summary": "^2.0.0",
|
|
365
|
-
"rollup-plugin-swc3": "^0.9.1",
|
|
366
|
-
shx: "^0.3.4",
|
|
367
|
-
"ts-lit-plugin": "^1.2.1",
|
|
368
|
-
typescript: "^5.3.2"
|
|
369
|
-
};
|
|
370
|
-
var customElements = "dist/custom-elements.json";
|
|
371
|
-
var files = [
|
|
372
|
-
"dist",
|
|
373
|
-
"README.md"
|
|
374
|
-
];
|
|
375
|
-
var keywords = [
|
|
376
|
-
"lottie",
|
|
377
|
-
"dotlottie",
|
|
378
|
-
"animation",
|
|
379
|
-
"web component",
|
|
380
|
-
"component",
|
|
381
|
-
"lit-element",
|
|
382
|
-
"svg",
|
|
383
|
-
"vector",
|
|
384
|
-
"player"
|
|
385
|
-
];
|
|
386
|
-
var publishConfig = {
|
|
387
|
-
access: "public"
|
|
388
|
-
};
|
|
389
|
-
var engines = {
|
|
390
|
-
node: ">= 7.6.0"
|
|
391
|
-
};
|
|
392
|
-
var funding = {
|
|
393
|
-
type: "paypal",
|
|
394
|
-
url: "https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"
|
|
395
|
-
};
|
|
396
|
-
var pkg = {
|
|
397
|
-
name: name,
|
|
398
|
-
version: version,
|
|
399
|
-
description: description,
|
|
400
|
-
exports: exports,
|
|
401
|
-
main: main,
|
|
402
|
-
unpkg: unpkg,
|
|
403
|
-
module: module,
|
|
404
|
-
types: types,
|
|
405
|
-
type: type,
|
|
406
|
-
homepage: homepage,
|
|
407
|
-
repository: repository,
|
|
408
|
-
bugs: bugs,
|
|
409
|
-
author: author,
|
|
410
|
-
license: license,
|
|
411
|
-
scripts: scripts,
|
|
412
|
-
dependencies: dependencies,
|
|
413
|
-
peerDependencies: peerDependencies,
|
|
414
|
-
devDependencies: devDependencies,
|
|
415
|
-
customElements: customElements,
|
|
416
|
-
files: files,
|
|
417
|
-
keywords: keywords,
|
|
418
|
-
publishConfig: publishConfig,
|
|
419
|
-
engines: engines,
|
|
420
|
-
funding: funding
|
|
421
|
-
};
|
|
295
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.2.10";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.101","@types/node":"^20.10.5","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","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};
|
|
422
296
|
|
|
423
|
-
var
|
|
297
|
+
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}}`;
|
|
424
298
|
|
|
425
299
|
function _ts_decorate(decorators, target, key, desc) {
|
|
426
300
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
@@ -574,17 +448,19 @@ class DotLottiePlayer extends LitElement {
|
|
|
574
448
|
this.currentState = PlayerState.Error;
|
|
575
449
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
576
450
|
});
|
|
577
|
-
if (this.container) {
|
|
578
|
-
this.container.addEventListener('mouseenter',
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
451
|
+
if (this.container && this.hover) {
|
|
452
|
+
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
453
|
+
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
454
|
+
}
|
|
455
|
+
}
|
|
456
|
+
_mouseEnter() {
|
|
457
|
+
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
458
|
+
this.play();
|
|
459
|
+
}
|
|
460
|
+
}
|
|
461
|
+
_mouseLeave() {
|
|
462
|
+
if (this.hover && this.currentState === PlayerState.Playing) {
|
|
463
|
+
this.stop();
|
|
588
464
|
}
|
|
589
465
|
}
|
|
590
466
|
_onVisibilityChange() {
|
|
@@ -794,14 +670,20 @@ class DotLottiePlayer extends LitElement {
|
|
|
794
670
|
if (curr?.mode !== undefined) {
|
|
795
671
|
if (curr.mode === PlayMode.Normal) {
|
|
796
672
|
curr.mode = PlayMode.Bounce;
|
|
673
|
+
this._isBounce = true;
|
|
797
674
|
} else {
|
|
798
675
|
curr.mode = PlayMode.Normal;
|
|
676
|
+
this._isBounce = false;
|
|
799
677
|
}
|
|
800
|
-
|
|
678
|
+
return;
|
|
679
|
+
}
|
|
680
|
+
if (this.mode === PlayMode.Normal) {
|
|
801
681
|
this.mode = PlayMode.Bounce;
|
|
802
|
-
|
|
803
|
-
|
|
682
|
+
this._isBounce = true;
|
|
683
|
+
return;
|
|
804
684
|
}
|
|
685
|
+
this.mode = PlayMode.Normal;
|
|
686
|
+
this._isBounce = false;
|
|
805
687
|
}
|
|
806
688
|
_toggleSettings(flag) {
|
|
807
689
|
if (flag === undefined) {
|
|
@@ -850,7 +732,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
850
732
|
return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
|
|
851
733
|
}
|
|
852
734
|
static get styles() {
|
|
853
|
-
return
|
|
735
|
+
return css_248z;
|
|
854
736
|
}
|
|
855
737
|
connectedCallback() {
|
|
856
738
|
super.connectedCallback();
|
|
@@ -892,8 +774,8 @@ class DotLottiePlayer extends LitElement {
|
|
|
892
774
|
render() {
|
|
893
775
|
return html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === PlayerState.Error ? html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : nothing}</div>${this.controls ? this.renderControls() : nothing}</figure>`;
|
|
894
776
|
}
|
|
895
|
-
constructor(
|
|
896
|
-
super(
|
|
777
|
+
constructor(){
|
|
778
|
+
super();
|
|
897
779
|
this.background = 'transparent';
|
|
898
780
|
this.controls = false;
|
|
899
781
|
this.currentState = PlayerState.Loading;
|
|
@@ -926,6 +808,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
926
808
|
target.focus();
|
|
927
809
|
}
|
|
928
810
|
};
|
|
811
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
812
|
+
this._mouseEnter = this._mouseEnter.bind(this);
|
|
813
|
+
this._mouseLeave = this._mouseLeave.bind(this);
|
|
929
814
|
}
|
|
930
815
|
}
|
|
931
816
|
_ts_decorate([
|
package/dist/index.d.ts
CHANGED
|
@@ -143,6 +143,8 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
143
143
|
load(src: string | LottieJSON): Promise<void>;
|
|
144
144
|
getManifest(): LottieManifest;
|
|
145
145
|
private _addEventListeners;
|
|
146
|
+
private _mouseEnter;
|
|
147
|
+
private _mouseLeave;
|
|
146
148
|
private _onVisibilityChange;
|
|
147
149
|
private _handleSeekChange;
|
|
148
150
|
private _isLottie;
|
|
@@ -172,6 +174,7 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
172
174
|
prev(): void;
|
|
173
175
|
convert(typeCheck?: boolean, manifest?: LottieManifest, animations?: LottieJSON[], fileName?: string, download?: boolean): Promise<void | ArrayBuffer> | undefined;
|
|
174
176
|
static get styles(): CSSResult;
|
|
177
|
+
constructor();
|
|
175
178
|
connectedCallback(): void;
|
|
176
179
|
protected firstUpdated(): Promise<void>;
|
|
177
180
|
disconnectedCallback(): void;
|