@aarsteinmedia/dotlottie-player 3.0.0 → 3.0.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 +53 -11
- package/dist/custom-elements.json +3 -30
- package/dist/esm/index.js +53 -11
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/package.json +10 -1
package/dist/cjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
var Lottie = require('lottie-web');
|
|
4
4
|
var fflate = require('fflate');
|
|
5
5
|
|
|
6
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
6
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];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","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.6","@types/node":"^22.1.0","@typescript-eslint/eslint-plugin":"^8.0.1","@typescript-eslint/parser":"^8.0.1",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.20.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
7
7
|
|
|
8
8
|
var ObjectFit;
|
|
9
9
|
(function(ObjectFit) {
|
|
@@ -439,35 +439,77 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
439
439
|
return [
|
|
440
440
|
'animateOnScroll',
|
|
441
441
|
'autoplay',
|
|
442
|
-
'
|
|
443
|
-
'count',
|
|
444
|
-
'description',
|
|
442
|
+
'controls',
|
|
445
443
|
'direction',
|
|
446
444
|
'hover',
|
|
447
|
-
'intermission',
|
|
448
445
|
'loop',
|
|
449
446
|
'mode',
|
|
450
|
-
'multiAnimationSettings',
|
|
451
|
-
'objectfit',
|
|
452
|
-
'preserveAspectRatio',
|
|
453
|
-
'renderer',
|
|
454
|
-
'segment',
|
|
455
|
-
'simple',
|
|
456
447
|
'speed',
|
|
457
448
|
'subframe'
|
|
458
449
|
];
|
|
459
450
|
}
|
|
460
451
|
attributeChangedCallback(name, _oldValue, value) {
|
|
452
|
+
if (!this._lottieInstance) {
|
|
453
|
+
return;
|
|
454
|
+
}
|
|
461
455
|
const toggleLoop = this.shadow.querySelector('.toggleLoop'), toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
462
456
|
if (!(toggleLoop instanceof HTMLButtonElement) || !(toggleBoomerang instanceof HTMLButtonElement)) {
|
|
463
457
|
return;
|
|
464
458
|
}
|
|
459
|
+
if (name === 'animateOnScroll') {
|
|
460
|
+
if (value === '' || Boolean(value)) {
|
|
461
|
+
this._lottieInstance.autoplay = false;
|
|
462
|
+
addEventListener('scroll', this._handleScroll, {
|
|
463
|
+
passive: true,
|
|
464
|
+
capture: true
|
|
465
|
+
});
|
|
466
|
+
return;
|
|
467
|
+
}
|
|
468
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
469
|
+
}
|
|
470
|
+
if (name === 'autoplay') {
|
|
471
|
+
if (this.animateOnScroll) {
|
|
472
|
+
return;
|
|
473
|
+
}
|
|
474
|
+
if (value === '' || Boolean(value)) {
|
|
475
|
+
this.play();
|
|
476
|
+
return;
|
|
477
|
+
}
|
|
478
|
+
this.stop();
|
|
479
|
+
}
|
|
480
|
+
if (name === 'controls') {
|
|
481
|
+
this.renderControls();
|
|
482
|
+
}
|
|
483
|
+
if (name === 'direction') {
|
|
484
|
+
if (Number(value) === -1) {
|
|
485
|
+
return this.setDirection(-1);
|
|
486
|
+
}
|
|
487
|
+
this.setDirection(1);
|
|
488
|
+
}
|
|
489
|
+
if (name === 'hover' && this._container) {
|
|
490
|
+
if (value === '' || Boolean(value)) {
|
|
491
|
+
this._container.addEventListener('mouseenter', this._mouseEnter);
|
|
492
|
+
this._container.addEventListener('mouseleave', this._mouseLeave);
|
|
493
|
+
return;
|
|
494
|
+
}
|
|
495
|
+
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
496
|
+
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
497
|
+
}
|
|
465
498
|
if (name === 'loop') {
|
|
466
499
|
toggleLoop.dataset.active = value;
|
|
467
500
|
}
|
|
468
501
|
if (name === 'mode') {
|
|
469
502
|
toggleBoomerang.dataset.active = (value === exports.PlayMode.Bounce).toString();
|
|
470
503
|
}
|
|
504
|
+
if (name === 'speed') {
|
|
505
|
+
const val = Number(value);
|
|
506
|
+
if (val && !isNaN(val)) {
|
|
507
|
+
this._lottieInstance.setSpeed(val);
|
|
508
|
+
}
|
|
509
|
+
}
|
|
510
|
+
if (name === 'subframe') {
|
|
511
|
+
this._lottieInstance.setSubframe(value === '' || Boolean(value));
|
|
512
|
+
}
|
|
471
513
|
}
|
|
472
514
|
static get observedProperties() {
|
|
473
515
|
return [
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
"text": "{\n prev: PlayerState\n count: number\n loaded: boolean\n visible: boolean\n scrollY: number\n scrollTimeout: NodeJS.Timeout | null\n }"
|
|
274
274
|
},
|
|
275
275
|
"privacy": "private",
|
|
276
|
-
"default": "{ prev: PlayerState.Loading, count: 0, loaded: false, visible: false, scrollY: 0, scrollTimeout: null }"
|
|
276
|
+
"default": "{ prev: PlayerState.Loading, count: 0, loaded: false, visible: false, scrollY: 0, scrollTimeout: null, }"
|
|
277
277
|
},
|
|
278
278
|
{
|
|
279
279
|
"kind": "method",
|
|
@@ -678,7 +678,7 @@
|
|
|
678
678
|
"privacy": "public",
|
|
679
679
|
"parameters": [
|
|
680
680
|
{
|
|
681
|
-
"name": "{\n typeCheck,\n manifest,\n animations,\n src,\n fileName,\n shouldDownload = true
|
|
681
|
+
"name": "{\n typeCheck,\n manifest,\n animations,\n src,\n fileName,\n shouldDownload = true,\n }",
|
|
682
682
|
"type": {
|
|
683
683
|
"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 }"
|
|
684
684
|
}
|
|
@@ -706,13 +706,7 @@
|
|
|
706
706
|
"name": "autoplay"
|
|
707
707
|
},
|
|
708
708
|
{
|
|
709
|
-
"name": "
|
|
710
|
-
},
|
|
711
|
-
{
|
|
712
|
-
"name": "count"
|
|
713
|
-
},
|
|
714
|
-
{
|
|
715
|
-
"name": "description"
|
|
709
|
+
"name": "controls"
|
|
716
710
|
},
|
|
717
711
|
{
|
|
718
712
|
"name": "direction"
|
|
@@ -720,33 +714,12 @@
|
|
|
720
714
|
{
|
|
721
715
|
"name": "hover"
|
|
722
716
|
},
|
|
723
|
-
{
|
|
724
|
-
"name": "intermission"
|
|
725
|
-
},
|
|
726
717
|
{
|
|
727
718
|
"name": "loop"
|
|
728
719
|
},
|
|
729
720
|
{
|
|
730
721
|
"name": "mode"
|
|
731
722
|
},
|
|
732
|
-
{
|
|
733
|
-
"name": "multiAnimationSettings"
|
|
734
|
-
},
|
|
735
|
-
{
|
|
736
|
-
"name": "objectfit"
|
|
737
|
-
},
|
|
738
|
-
{
|
|
739
|
-
"name": "preserveAspectRatio"
|
|
740
|
-
},
|
|
741
|
-
{
|
|
742
|
-
"name": "renderer"
|
|
743
|
-
},
|
|
744
|
-
{
|
|
745
|
-
"name": "segment"
|
|
746
|
-
},
|
|
747
|
-
{
|
|
748
|
-
"name": "simple"
|
|
749
|
-
},
|
|
750
723
|
{
|
|
751
724
|
"name": "speed"
|
|
752
725
|
},
|
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import Lottie from 'lottie-web';
|
|
2
2
|
import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
|
|
3
3
|
|
|
4
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.
|
|
4
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.0.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:"git+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 contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];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","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.6","@types/node":"^22.1.0","@typescript-eslint/eslint-plugin":"^8.0.1","@typescript-eslint/parser":"^8.0.1",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.20.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.8",tslib:"^2.6.3",typescript:"^5.5.4"};var customElements$1="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","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,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
5
5
|
|
|
6
6
|
var ObjectFit;
|
|
7
7
|
(function(ObjectFit) {
|
|
@@ -437,35 +437,77 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
437
437
|
return [
|
|
438
438
|
'animateOnScroll',
|
|
439
439
|
'autoplay',
|
|
440
|
-
'
|
|
441
|
-
'count',
|
|
442
|
-
'description',
|
|
440
|
+
'controls',
|
|
443
441
|
'direction',
|
|
444
442
|
'hover',
|
|
445
|
-
'intermission',
|
|
446
443
|
'loop',
|
|
447
444
|
'mode',
|
|
448
|
-
'multiAnimationSettings',
|
|
449
|
-
'objectfit',
|
|
450
|
-
'preserveAspectRatio',
|
|
451
|
-
'renderer',
|
|
452
|
-
'segment',
|
|
453
|
-
'simple',
|
|
454
445
|
'speed',
|
|
455
446
|
'subframe'
|
|
456
447
|
];
|
|
457
448
|
}
|
|
458
449
|
attributeChangedCallback(name, _oldValue, value) {
|
|
450
|
+
if (!this._lottieInstance) {
|
|
451
|
+
return;
|
|
452
|
+
}
|
|
459
453
|
const toggleLoop = this.shadow.querySelector('.toggleLoop'), toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
460
454
|
if (!(toggleLoop instanceof HTMLButtonElement) || !(toggleBoomerang instanceof HTMLButtonElement)) {
|
|
461
455
|
return;
|
|
462
456
|
}
|
|
457
|
+
if (name === 'animateOnScroll') {
|
|
458
|
+
if (value === '' || Boolean(value)) {
|
|
459
|
+
this._lottieInstance.autoplay = false;
|
|
460
|
+
addEventListener('scroll', this._handleScroll, {
|
|
461
|
+
passive: true,
|
|
462
|
+
capture: true
|
|
463
|
+
});
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
removeEventListener('scroll', this._handleScroll, true);
|
|
467
|
+
}
|
|
468
|
+
if (name === 'autoplay') {
|
|
469
|
+
if (this.animateOnScroll) {
|
|
470
|
+
return;
|
|
471
|
+
}
|
|
472
|
+
if (value === '' || Boolean(value)) {
|
|
473
|
+
this.play();
|
|
474
|
+
return;
|
|
475
|
+
}
|
|
476
|
+
this.stop();
|
|
477
|
+
}
|
|
478
|
+
if (name === 'controls') {
|
|
479
|
+
this.renderControls();
|
|
480
|
+
}
|
|
481
|
+
if (name === 'direction') {
|
|
482
|
+
if (Number(value) === -1) {
|
|
483
|
+
return this.setDirection(-1);
|
|
484
|
+
}
|
|
485
|
+
this.setDirection(1);
|
|
486
|
+
}
|
|
487
|
+
if (name === 'hover' && this._container) {
|
|
488
|
+
if (value === '' || Boolean(value)) {
|
|
489
|
+
this._container.addEventListener('mouseenter', this._mouseEnter);
|
|
490
|
+
this._container.addEventListener('mouseleave', this._mouseLeave);
|
|
491
|
+
return;
|
|
492
|
+
}
|
|
493
|
+
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
494
|
+
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
495
|
+
}
|
|
463
496
|
if (name === 'loop') {
|
|
464
497
|
toggleLoop.dataset.active = value;
|
|
465
498
|
}
|
|
466
499
|
if (name === 'mode') {
|
|
467
500
|
toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
|
|
468
501
|
}
|
|
502
|
+
if (name === 'speed') {
|
|
503
|
+
const val = Number(value);
|
|
504
|
+
if (val && !isNaN(val)) {
|
|
505
|
+
this._lottieInstance.setSpeed(val);
|
|
506
|
+
}
|
|
507
|
+
}
|
|
508
|
+
if (name === 'subframe') {
|
|
509
|
+
this._lottieInstance.setSubframe(value === '' || Boolean(value));
|
|
510
|
+
}
|
|
469
511
|
}
|
|
470
512
|
static get observedProperties() {
|
|
471
513
|
return [
|
package/dist/index.d.ts
CHANGED
|
@@ -254,7 +254,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
254
254
|
private _switchInstance;
|
|
255
255
|
next(): void;
|
|
256
256
|
prev(): void;
|
|
257
|
-
convert({ typeCheck, manifest, animations, src, fileName, shouldDownload }: {
|
|
257
|
+
convert({ typeCheck, manifest, animations, src, fileName, shouldDownload, }: {
|
|
258
258
|
typeCheck?: boolean;
|
|
259
259
|
manifest?: LottieManifest;
|
|
260
260
|
animations?: LottieJSON[];
|