@aarsteinmedia/dotlottie-player 3.0.7 → 3.0.9
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 +45 -70
- package/dist/custom-elements.json +34 -1
- package/dist/esm/index.js +45 -70
- package/dist/index.d.ts +4 -1
- package/dist/index.js +2 -2
- package/package.json +6 -6
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.9";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.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",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.3","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.21.2","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.7.0",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) {
|
|
@@ -364,7 +364,7 @@ const addExt = (ext, str)=>{
|
|
|
364
364
|
|
|
365
365
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
366
366
|
if (isServer()) {
|
|
367
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
367
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
368
368
|
};
|
|
369
369
|
}
|
|
370
370
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -407,6 +407,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
407
407
|
}
|
|
408
408
|
}
|
|
409
409
|
};
|
|
410
|
+
EnhancedElement.observedProperties = [];
|
|
410
411
|
|
|
411
412
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgba(0, 0, 0, 0.2);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n display: block;\n width: 100%;\n height: 100%;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fadeIn 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n border-top-color: transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n}\n:host progress {\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgba(255, 255, 255, 0.6);\n }\n}";
|
|
412
413
|
|
|
@@ -494,7 +495,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
494
495
|
if (toggleLoop instanceof HTMLButtonElement) {
|
|
495
496
|
toggleLoop.dataset.active = value;
|
|
496
497
|
}
|
|
497
|
-
this.
|
|
498
|
+
this.setLoop(value === '' || Boolean(value));
|
|
498
499
|
}
|
|
499
500
|
if (name === 'mode') {
|
|
500
501
|
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
@@ -506,11 +507,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
506
507
|
if (name === 'speed') {
|
|
507
508
|
const val = Number(value);
|
|
508
509
|
if (val && !isNaN(val)) {
|
|
509
|
-
this.
|
|
510
|
+
this.setSpeed(val);
|
|
510
511
|
}
|
|
511
512
|
}
|
|
512
513
|
if (name === 'subframe') {
|
|
513
|
-
this.
|
|
514
|
+
this.setSubframe(value === '' || Boolean(value));
|
|
514
515
|
}
|
|
515
516
|
}
|
|
516
517
|
static get observedProperties() {
|
|
@@ -912,78 +913,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
912
913
|
getManifest() {
|
|
913
914
|
return this._manifest;
|
|
914
915
|
}
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
916
|
+
_toggleEventListeners(action) {
|
|
917
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
918
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
919
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
920
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
921
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
922
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
923
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
924
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
925
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
926
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
927
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
928
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
929
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
930
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
931
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
932
|
+
if (this._lottieInstance) {
|
|
933
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
934
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
935
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
936
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
937
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
938
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
918
939
|
}
|
|
919
|
-
this.shadow.querySelector('.togglePlay')?.addEventListener('click', this.togglePlay);
|
|
920
|
-
this.shadow.querySelector('.stop')?.addEventListener('click', this.stop);
|
|
921
|
-
this.shadow.querySelector('.prev')?.addEventListener('click', this.prev);
|
|
922
|
-
this.shadow.querySelector('.next')?.addEventListener('click', this.next);
|
|
923
|
-
this.shadow.querySelector('.toggleLoop')?.addEventListener('click', this.toggleLoop);
|
|
924
|
-
this.shadow.querySelector('.toggleBoomerang')?.addEventListener('click', this.toggleBoomerang);
|
|
925
|
-
this.shadow.querySelector('.convert')?.addEventListener('click', this.convert);
|
|
926
|
-
this.shadow.querySelector('.snapshot')?.addEventListener('click', this.snapshot);
|
|
927
|
-
const toggleSettings = this.shadow.querySelector('.seeker');
|
|
928
|
-
toggleSettings?.addEventListener('change', this._handleSeekChange);
|
|
929
|
-
toggleSettings?.addEventListener('mousedown', this._freeze);
|
|
930
|
-
const settings = this.shadow.querySelector('.toggleSettings');
|
|
931
|
-
settings?.addEventListener('click', this._handleSettingsClick);
|
|
932
|
-
settings?.addEventListener('blur', this._handleBlur);
|
|
933
|
-
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
934
|
-
this._lottieInstance.addEventListener('complete', this._complete);
|
|
935
|
-
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
936
|
-
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
937
|
-
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
938
|
-
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
939
940
|
if (this._container && this.hover) {
|
|
940
|
-
this._container
|
|
941
|
-
this._container
|
|
941
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
942
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
942
943
|
}
|
|
943
|
-
|
|
944
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
944
945
|
passive: true,
|
|
945
946
|
capture: false
|
|
946
947
|
});
|
|
947
|
-
|
|
948
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
948
949
|
passive: true,
|
|
949
950
|
capture: false
|
|
950
951
|
});
|
|
951
952
|
if (this.animateOnScroll) {
|
|
952
|
-
|
|
953
|
+
window[method]('scroll', this._handleScroll, {
|
|
953
954
|
passive: true,
|
|
954
955
|
capture: true
|
|
955
956
|
});
|
|
956
957
|
}
|
|
957
958
|
}
|
|
959
|
+
_addEventListeners() {
|
|
960
|
+
this._toggleEventListeners('add');
|
|
961
|
+
}
|
|
958
962
|
_removeEventListeners() {
|
|
959
|
-
|
|
960
|
-
return;
|
|
961
|
-
}
|
|
962
|
-
this.shadow.querySelector('.togglePlay')?.removeEventListener('click', this.togglePlay);
|
|
963
|
-
this.shadow.querySelector('.stop')?.removeEventListener('click', this.stop);
|
|
964
|
-
this.shadow.querySelector('.prev')?.removeEventListener('click', this.prev);
|
|
965
|
-
this.shadow.querySelector('.next')?.removeEventListener('click', this.next);
|
|
966
|
-
this.shadow.querySelector('.toggleLoop')?.removeEventListener('click', this.toggleLoop);
|
|
967
|
-
this.shadow.querySelector('.toggleBoomerang')?.removeEventListener('click', this.toggleBoomerang);
|
|
968
|
-
this.shadow.querySelector('.convert')?.removeEventListener('click', this.convert);
|
|
969
|
-
this.shadow.querySelector('.snapshot')?.removeEventListener('click', this.snapshot);
|
|
970
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
971
|
-
seeker?.removeEventListener('change', this._handleSeekChange);
|
|
972
|
-
seeker?.removeEventListener('mousedown', this._freeze);
|
|
973
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
974
|
-
toggleSettings?.removeEventListener('click', this._handleSettingsClick);
|
|
975
|
-
toggleSettings?.removeEventListener('blur', this._handleBlur);
|
|
976
|
-
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
977
|
-
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
978
|
-
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
979
|
-
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
980
|
-
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
981
|
-
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
982
|
-
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
983
|
-
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
984
|
-
removeEventListener('focus', this._handleWindowBlur, true);
|
|
985
|
-
removeEventListener('blur', this._handleWindowBlur, true);
|
|
986
|
-
removeEventListener('scroll', this._handleScroll, true);
|
|
963
|
+
this._toggleEventListeners('remove');
|
|
987
964
|
}
|
|
988
965
|
_loopComplete() {
|
|
989
966
|
if (!this._lottieInstance) {
|
|
@@ -1100,8 +1077,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1100
1077
|
}
|
|
1101
1078
|
if (isServer()) {
|
|
1102
1079
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1080
|
+
return;
|
|
1103
1081
|
}
|
|
1104
1082
|
if (this._playerState.visible) {
|
|
1083
|
+
if (this._playerState.scrollTimeout) {
|
|
1084
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1085
|
+
}
|
|
1086
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1087
|
+
this.playerState = exports.PlayerState.Paused;
|
|
1088
|
+
}, 400);
|
|
1105
1089
|
const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
|
|
1106
1090
|
requestAnimationFrame(()=>{
|
|
1107
1091
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1112,12 +1096,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1112
1096
|
}
|
|
1113
1097
|
});
|
|
1114
1098
|
}
|
|
1115
|
-
if (this._playerState.scrollTimeout) {
|
|
1116
|
-
clearTimeout(this._playerState.scrollTimeout);
|
|
1117
|
-
}
|
|
1118
|
-
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1119
|
-
this.playerState = exports.PlayerState.Paused;
|
|
1120
|
-
}, 400);
|
|
1121
1099
|
}
|
|
1122
1100
|
_handleSeekChange({ target }) {
|
|
1123
1101
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
@@ -1267,7 +1245,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1267
1245
|
if (!this._lottieInstance) {
|
|
1268
1246
|
return;
|
|
1269
1247
|
}
|
|
1270
|
-
this.subframe = value;
|
|
1271
1248
|
this._lottieInstance.setSubframe(value);
|
|
1272
1249
|
}
|
|
1273
1250
|
setCount(value) {
|
|
@@ -1301,7 +1278,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1301
1278
|
if (!this._lottieInstance) {
|
|
1302
1279
|
return;
|
|
1303
1280
|
}
|
|
1304
|
-
this.speed = value;
|
|
1305
1281
|
this._lottieInstance.setSpeed(value);
|
|
1306
1282
|
}
|
|
1307
1283
|
setDirection(value) {
|
|
@@ -1314,7 +1290,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1314
1290
|
if (!this._lottieInstance) {
|
|
1315
1291
|
return;
|
|
1316
1292
|
}
|
|
1317
|
-
this.loop = value;
|
|
1318
1293
|
this._lottieInstance.setLoop(value);
|
|
1319
1294
|
}
|
|
1320
1295
|
setMultiAnimationSettings(settings) {
|
|
@@ -30,8 +30,16 @@
|
|
|
30
30
|
{
|
|
31
31
|
"kind": "field",
|
|
32
32
|
"name": "observedProperties",
|
|
33
|
+
"type": {
|
|
34
|
+
"text": "(keyof EnhancedElement)[]"
|
|
35
|
+
},
|
|
33
36
|
"static": true,
|
|
34
|
-
"
|
|
37
|
+
"default": "[]",
|
|
38
|
+
"readonly": true,
|
|
39
|
+
"inheritedFrom": {
|
|
40
|
+
"name": "EnhancedElement",
|
|
41
|
+
"module": "src/observeProperties.ts"
|
|
42
|
+
}
|
|
35
43
|
},
|
|
36
44
|
{
|
|
37
45
|
"kind": "method",
|
|
@@ -312,6 +320,20 @@
|
|
|
312
320
|
"privacy": "public",
|
|
313
321
|
"description": "Get Lottie Manifest"
|
|
314
322
|
},
|
|
323
|
+
{
|
|
324
|
+
"kind": "method",
|
|
325
|
+
"name": "_toggleEventListeners",
|
|
326
|
+
"privacy": "private",
|
|
327
|
+
"parameters": [
|
|
328
|
+
{
|
|
329
|
+
"name": "action",
|
|
330
|
+
"type": {
|
|
331
|
+
"text": "'add' | 'remove'"
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
],
|
|
335
|
+
"description": "Toggle event listeners"
|
|
336
|
+
},
|
|
315
337
|
{
|
|
316
338
|
"kind": "method",
|
|
317
339
|
"name": "_addEventListeners",
|
|
@@ -802,6 +824,17 @@
|
|
|
802
824
|
"kind": "class",
|
|
803
825
|
"description": "HTMLElement enhanced to track property changes",
|
|
804
826
|
"name": "EnhancedElement",
|
|
827
|
+
"members": [
|
|
828
|
+
{
|
|
829
|
+
"kind": "field",
|
|
830
|
+
"name": "observedProperties",
|
|
831
|
+
"type": {
|
|
832
|
+
"text": "(keyof EnhancedElement)[]"
|
|
833
|
+
},
|
|
834
|
+
"static": true,
|
|
835
|
+
"default": "[]"
|
|
836
|
+
}
|
|
837
|
+
],
|
|
805
838
|
"superclass": {
|
|
806
839
|
"name": "HTMLElement"
|
|
807
840
|
},
|
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.9";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.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",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.3","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.21.2","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.7.0",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) {
|
|
@@ -362,7 +362,7 @@ const addExt = (ext, str)=>{
|
|
|
362
362
|
|
|
363
363
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
364
364
|
if (isServer()) {
|
|
365
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
365
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
366
366
|
};
|
|
367
367
|
}
|
|
368
368
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -405,6 +405,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
405
405
|
}
|
|
406
406
|
}
|
|
407
407
|
};
|
|
408
|
+
EnhancedElement.observedProperties = [];
|
|
408
409
|
|
|
409
410
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgba(0, 0, 0, 0.2);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n display: block;\n width: 100%;\n height: 100%;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fadeIn 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n border-top-color: transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n}\n:host progress {\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgba(255, 255, 255, 0.6);\n }\n}";
|
|
410
411
|
|
|
@@ -492,7 +493,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
492
493
|
if (toggleLoop instanceof HTMLButtonElement) {
|
|
493
494
|
toggleLoop.dataset.active = value;
|
|
494
495
|
}
|
|
495
|
-
this.
|
|
496
|
+
this.setLoop(value === '' || Boolean(value));
|
|
496
497
|
}
|
|
497
498
|
if (name === 'mode') {
|
|
498
499
|
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
@@ -504,11 +505,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
504
505
|
if (name === 'speed') {
|
|
505
506
|
const val = Number(value);
|
|
506
507
|
if (val && !isNaN(val)) {
|
|
507
|
-
this.
|
|
508
|
+
this.setSpeed(val);
|
|
508
509
|
}
|
|
509
510
|
}
|
|
510
511
|
if (name === 'subframe') {
|
|
511
|
-
this.
|
|
512
|
+
this.setSubframe(value === '' || Boolean(value));
|
|
512
513
|
}
|
|
513
514
|
}
|
|
514
515
|
static get observedProperties() {
|
|
@@ -910,78 +911,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
910
911
|
getManifest() {
|
|
911
912
|
return this._manifest;
|
|
912
913
|
}
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
914
|
+
_toggleEventListeners(action) {
|
|
915
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
916
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
917
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
918
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
919
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
920
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
921
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
922
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
923
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
924
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
925
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
926
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
927
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
928
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
929
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
930
|
+
if (this._lottieInstance) {
|
|
931
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
932
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
933
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
934
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
935
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
936
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
916
937
|
}
|
|
917
|
-
this.shadow.querySelector('.togglePlay')?.addEventListener('click', this.togglePlay);
|
|
918
|
-
this.shadow.querySelector('.stop')?.addEventListener('click', this.stop);
|
|
919
|
-
this.shadow.querySelector('.prev')?.addEventListener('click', this.prev);
|
|
920
|
-
this.shadow.querySelector('.next')?.addEventListener('click', this.next);
|
|
921
|
-
this.shadow.querySelector('.toggleLoop')?.addEventListener('click', this.toggleLoop);
|
|
922
|
-
this.shadow.querySelector('.toggleBoomerang')?.addEventListener('click', this.toggleBoomerang);
|
|
923
|
-
this.shadow.querySelector('.convert')?.addEventListener('click', this.convert);
|
|
924
|
-
this.shadow.querySelector('.snapshot')?.addEventListener('click', this.snapshot);
|
|
925
|
-
const toggleSettings = this.shadow.querySelector('.seeker');
|
|
926
|
-
toggleSettings?.addEventListener('change', this._handleSeekChange);
|
|
927
|
-
toggleSettings?.addEventListener('mousedown', this._freeze);
|
|
928
|
-
const settings = this.shadow.querySelector('.toggleSettings');
|
|
929
|
-
settings?.addEventListener('click', this._handleSettingsClick);
|
|
930
|
-
settings?.addEventListener('blur', this._handleBlur);
|
|
931
|
-
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
932
|
-
this._lottieInstance.addEventListener('complete', this._complete);
|
|
933
|
-
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
934
|
-
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
935
|
-
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
936
|
-
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
937
938
|
if (this._container && this.hover) {
|
|
938
|
-
this._container
|
|
939
|
-
this._container
|
|
939
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
940
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
940
941
|
}
|
|
941
|
-
|
|
942
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
942
943
|
passive: true,
|
|
943
944
|
capture: false
|
|
944
945
|
});
|
|
945
|
-
|
|
946
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
946
947
|
passive: true,
|
|
947
948
|
capture: false
|
|
948
949
|
});
|
|
949
950
|
if (this.animateOnScroll) {
|
|
950
|
-
|
|
951
|
+
window[method]('scroll', this._handleScroll, {
|
|
951
952
|
passive: true,
|
|
952
953
|
capture: true
|
|
953
954
|
});
|
|
954
955
|
}
|
|
955
956
|
}
|
|
957
|
+
_addEventListeners() {
|
|
958
|
+
this._toggleEventListeners('add');
|
|
959
|
+
}
|
|
956
960
|
_removeEventListeners() {
|
|
957
|
-
|
|
958
|
-
return;
|
|
959
|
-
}
|
|
960
|
-
this.shadow.querySelector('.togglePlay')?.removeEventListener('click', this.togglePlay);
|
|
961
|
-
this.shadow.querySelector('.stop')?.removeEventListener('click', this.stop);
|
|
962
|
-
this.shadow.querySelector('.prev')?.removeEventListener('click', this.prev);
|
|
963
|
-
this.shadow.querySelector('.next')?.removeEventListener('click', this.next);
|
|
964
|
-
this.shadow.querySelector('.toggleLoop')?.removeEventListener('click', this.toggleLoop);
|
|
965
|
-
this.shadow.querySelector('.toggleBoomerang')?.removeEventListener('click', this.toggleBoomerang);
|
|
966
|
-
this.shadow.querySelector('.convert')?.removeEventListener('click', this.convert);
|
|
967
|
-
this.shadow.querySelector('.snapshot')?.removeEventListener('click', this.snapshot);
|
|
968
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
969
|
-
seeker?.removeEventListener('change', this._handleSeekChange);
|
|
970
|
-
seeker?.removeEventListener('mousedown', this._freeze);
|
|
971
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
972
|
-
toggleSettings?.removeEventListener('click', this._handleSettingsClick);
|
|
973
|
-
toggleSettings?.removeEventListener('blur', this._handleBlur);
|
|
974
|
-
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
975
|
-
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
976
|
-
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
977
|
-
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
978
|
-
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
979
|
-
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
980
|
-
this._container.removeEventListener('mouseenter', this._mouseEnter);
|
|
981
|
-
this._container.removeEventListener('mouseleave', this._mouseLeave);
|
|
982
|
-
removeEventListener('focus', this._handleWindowBlur, true);
|
|
983
|
-
removeEventListener('blur', this._handleWindowBlur, true);
|
|
984
|
-
removeEventListener('scroll', this._handleScroll, true);
|
|
961
|
+
this._toggleEventListeners('remove');
|
|
985
962
|
}
|
|
986
963
|
_loopComplete() {
|
|
987
964
|
if (!this._lottieInstance) {
|
|
@@ -1098,8 +1075,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1098
1075
|
}
|
|
1099
1076
|
if (isServer()) {
|
|
1100
1077
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1078
|
+
return;
|
|
1101
1079
|
}
|
|
1102
1080
|
if (this._playerState.visible) {
|
|
1081
|
+
if (this._playerState.scrollTimeout) {
|
|
1082
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1083
|
+
}
|
|
1084
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1085
|
+
this.playerState = PlayerState.Paused;
|
|
1086
|
+
}, 400);
|
|
1103
1087
|
const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
|
|
1104
1088
|
requestAnimationFrame(()=>{
|
|
1105
1089
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1110,12 +1094,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1110
1094
|
}
|
|
1111
1095
|
});
|
|
1112
1096
|
}
|
|
1113
|
-
if (this._playerState.scrollTimeout) {
|
|
1114
|
-
clearTimeout(this._playerState.scrollTimeout);
|
|
1115
|
-
}
|
|
1116
|
-
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1117
|
-
this.playerState = PlayerState.Paused;
|
|
1118
|
-
}, 400);
|
|
1119
1097
|
}
|
|
1120
1098
|
_handleSeekChange({ target }) {
|
|
1121
1099
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
@@ -1265,7 +1243,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1265
1243
|
if (!this._lottieInstance) {
|
|
1266
1244
|
return;
|
|
1267
1245
|
}
|
|
1268
|
-
this.subframe = value;
|
|
1269
1246
|
this._lottieInstance.setSubframe(value);
|
|
1270
1247
|
}
|
|
1271
1248
|
setCount(value) {
|
|
@@ -1299,7 +1276,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1299
1276
|
if (!this._lottieInstance) {
|
|
1300
1277
|
return;
|
|
1301
1278
|
}
|
|
1302
|
-
this.speed = value;
|
|
1303
1279
|
this._lottieInstance.setSpeed(value);
|
|
1304
1280
|
}
|
|
1305
1281
|
setDirection(value) {
|
|
@@ -1312,7 +1288,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1312
1288
|
if (!this._lottieInstance) {
|
|
1313
1289
|
return;
|
|
1314
1290
|
}
|
|
1315
|
-
this.loop = value;
|
|
1316
1291
|
this._lottieInstance.setLoop(value);
|
|
1317
1292
|
}
|
|
1318
1293
|
setMultiAnimationSettings(settings) {
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,9 @@ import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } fro
|
|
|
2
2
|
import { RefObject, CSSProperties } from 'react';
|
|
3
3
|
|
|
4
4
|
declare class EnhancedElement extends HTMLElement {
|
|
5
|
+
[key: symbol]: unknown;
|
|
5
6
|
constructor();
|
|
7
|
+
static observedProperties: (keyof EnhancedElement)[];
|
|
6
8
|
connectedCallback(): void;
|
|
7
9
|
}
|
|
8
10
|
|
|
@@ -154,7 +156,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
154
156
|
template: HTMLTemplateElement;
|
|
155
157
|
static get observedAttributes(): string[];
|
|
156
158
|
attributeChangedCallback(name: string, _oldValue: unknown, value: string): void;
|
|
157
|
-
static get observedProperties():
|
|
159
|
+
static get observedProperties(): (keyof EnhancedElement)[];
|
|
158
160
|
propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
|
|
159
161
|
set animateOnScroll(value: AnimateOnScroll);
|
|
160
162
|
get animateOnScroll(): AnimateOnScroll;
|
|
@@ -214,6 +216,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
214
216
|
private _addIntersectionObserver;
|
|
215
217
|
load(src: string | null): Promise<void>;
|
|
216
218
|
getManifest(): LottieManifest;
|
|
219
|
+
private _toggleEventListeners;
|
|
217
220
|
private _addEventListeners;
|
|
218
221
|
private _removeEventListeners;
|
|
219
222
|
private _loopComplete;
|