@aarsteinmedia/dotlottie-player 3.0.8 → 3.1.0
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 +60 -75
- package/dist/custom-elements.json +34 -1
- package/dist/esm/index.js +60 -75
- package/dist/index.d.ts +13 -2
- 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.1.0";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) {
|
|
@@ -85,11 +85,11 @@ const addExt = (ext, str)=>{
|
|
|
85
85
|
if (!animations?.length || !manifest) {
|
|
86
86
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
87
87
|
}
|
|
88
|
-
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
88
|
+
const manifestCompressionLevel = 0, animationCompressionLevel = 9, name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
89
89
|
'manifest.json': [
|
|
90
90
|
fflate.strToU8(JSON.stringify(manifest), true),
|
|
91
91
|
{
|
|
92
|
-
level:
|
|
92
|
+
level: manifestCompressionLevel
|
|
93
93
|
}
|
|
94
94
|
]
|
|
95
95
|
};
|
|
@@ -105,14 +105,14 @@ const addExt = (ext, str)=>{
|
|
|
105
105
|
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
|
|
106
106
|
base64ToU8(dataURL),
|
|
107
107
|
{
|
|
108
|
-
level:
|
|
108
|
+
level: animationCompressionLevel
|
|
109
109
|
}
|
|
110
110
|
];
|
|
111
111
|
}
|
|
112
112
|
dotlottie[`animations/${manifest.animations[i].id}.json`] = [
|
|
113
113
|
fflate.strToU8(JSON.stringify(animation), true),
|
|
114
114
|
{
|
|
115
|
-
level:
|
|
115
|
+
level: animationCompressionLevel
|
|
116
116
|
}
|
|
117
117
|
];
|
|
118
118
|
}
|
|
@@ -291,6 +291,7 @@ const addExt = (ext, str)=>{
|
|
|
291
291
|
case 'png':
|
|
292
292
|
case 'gif':
|
|
293
293
|
case 'webp':
|
|
294
|
+
case 'avif':
|
|
294
295
|
return `image/${ext}`;
|
|
295
296
|
case 'mp3':
|
|
296
297
|
case 'mpeg':
|
|
@@ -364,7 +365,7 @@ const addExt = (ext, str)=>{
|
|
|
364
365
|
|
|
365
366
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
366
367
|
if (isServer()) {
|
|
367
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
368
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
368
369
|
};
|
|
369
370
|
}
|
|
370
371
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -407,6 +408,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
407
408
|
}
|
|
408
409
|
}
|
|
409
410
|
};
|
|
411
|
+
EnhancedElement.observedProperties = [];
|
|
410
412
|
|
|
411
413
|
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
414
|
|
|
@@ -912,78 +914,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
912
914
|
getManifest() {
|
|
913
915
|
return this._manifest;
|
|
914
916
|
}
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
917
|
+
_toggleEventListeners(action) {
|
|
918
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
919
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
920
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
921
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
922
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
923
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
924
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
925
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
926
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
927
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
928
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
929
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
930
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
931
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
932
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
933
|
+
if (this._lottieInstance) {
|
|
934
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
935
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
936
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
937
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
938
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
939
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
918
940
|
}
|
|
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
941
|
if (this._container && this.hover) {
|
|
940
|
-
this._container
|
|
941
|
-
this._container
|
|
942
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
943
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
942
944
|
}
|
|
943
|
-
|
|
945
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
944
946
|
passive: true,
|
|
945
947
|
capture: false
|
|
946
948
|
});
|
|
947
|
-
|
|
949
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
948
950
|
passive: true,
|
|
949
951
|
capture: false
|
|
950
952
|
});
|
|
951
953
|
if (this.animateOnScroll) {
|
|
952
|
-
|
|
954
|
+
window[method]('scroll', this._handleScroll, {
|
|
953
955
|
passive: true,
|
|
954
956
|
capture: true
|
|
955
957
|
});
|
|
956
958
|
}
|
|
957
959
|
}
|
|
960
|
+
_addEventListeners() {
|
|
961
|
+
this._toggleEventListeners('add');
|
|
962
|
+
}
|
|
958
963
|
_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);
|
|
964
|
+
this._toggleEventListeners('remove');
|
|
987
965
|
}
|
|
988
966
|
_loopComplete() {
|
|
989
967
|
if (!this._lottieInstance) {
|
|
@@ -1100,8 +1078,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1100
1078
|
}
|
|
1101
1079
|
if (isServer()) {
|
|
1102
1080
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1081
|
+
return;
|
|
1103
1082
|
}
|
|
1104
1083
|
if (this._playerState.visible) {
|
|
1084
|
+
if (this._playerState.scrollTimeout) {
|
|
1085
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1086
|
+
}
|
|
1087
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1088
|
+
this.playerState = exports.PlayerState.Paused;
|
|
1089
|
+
}, 400);
|
|
1105
1090
|
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
1091
|
requestAnimationFrame(()=>{
|
|
1107
1092
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1112,12 +1097,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1112
1097
|
}
|
|
1113
1098
|
});
|
|
1114
1099
|
}
|
|
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
1100
|
}
|
|
1122
1101
|
_handleSeekChange({ target }) {
|
|
1123
1102
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
@@ -1163,14 +1142,20 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1163
1142
|
];
|
|
1164
1143
|
animations?.push(...animationsToAdd);
|
|
1165
1144
|
}
|
|
1166
|
-
return
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1145
|
+
return {
|
|
1146
|
+
success: true,
|
|
1147
|
+
result: await createDotLottie({
|
|
1148
|
+
animations,
|
|
1149
|
+
manifest,
|
|
1150
|
+
fileName,
|
|
1151
|
+
shouldDownload
|
|
1152
|
+
})
|
|
1153
|
+
};
|
|
1172
1154
|
} catch (err) {
|
|
1173
|
-
|
|
1155
|
+
return {
|
|
1156
|
+
success: false,
|
|
1157
|
+
error: handleErrors(err).message
|
|
1158
|
+
};
|
|
1174
1159
|
}
|
|
1175
1160
|
}
|
|
1176
1161
|
getLottie() {
|
|
@@ -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.1.0";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) {
|
|
@@ -83,11 +83,11 @@ const addExt = (ext, str)=>{
|
|
|
83
83
|
if (!animations?.length || !manifest) {
|
|
84
84
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
85
85
|
}
|
|
86
|
-
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
86
|
+
const manifestCompressionLevel = 0, animationCompressionLevel = 9, name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
87
87
|
'manifest.json': [
|
|
88
88
|
strToU8(JSON.stringify(manifest), true),
|
|
89
89
|
{
|
|
90
|
-
level:
|
|
90
|
+
level: manifestCompressionLevel
|
|
91
91
|
}
|
|
92
92
|
]
|
|
93
93
|
};
|
|
@@ -103,14 +103,14 @@ const addExt = (ext, str)=>{
|
|
|
103
103
|
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
|
|
104
104
|
base64ToU8(dataURL),
|
|
105
105
|
{
|
|
106
|
-
level:
|
|
106
|
+
level: animationCompressionLevel
|
|
107
107
|
}
|
|
108
108
|
];
|
|
109
109
|
}
|
|
110
110
|
dotlottie[`animations/${manifest.animations[i].id}.json`] = [
|
|
111
111
|
strToU8(JSON.stringify(animation), true),
|
|
112
112
|
{
|
|
113
|
-
level:
|
|
113
|
+
level: animationCompressionLevel
|
|
114
114
|
}
|
|
115
115
|
];
|
|
116
116
|
}
|
|
@@ -289,6 +289,7 @@ const addExt = (ext, str)=>{
|
|
|
289
289
|
case 'png':
|
|
290
290
|
case 'gif':
|
|
291
291
|
case 'webp':
|
|
292
|
+
case 'avif':
|
|
292
293
|
return `image/${ext}`;
|
|
293
294
|
case 'mp3':
|
|
294
295
|
case 'mpeg':
|
|
@@ -362,7 +363,7 @@ const addExt = (ext, str)=>{
|
|
|
362
363
|
|
|
363
364
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
364
365
|
if (isServer()) {
|
|
365
|
-
global.HTMLElement = class EmptyHTMLElement {
|
|
366
|
+
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
366
367
|
};
|
|
367
368
|
}
|
|
368
369
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -405,6 +406,7 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
405
406
|
}
|
|
406
407
|
}
|
|
407
408
|
};
|
|
409
|
+
EnhancedElement.observedProperties = [];
|
|
408
410
|
|
|
409
411
|
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
412
|
|
|
@@ -910,78 +912,54 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
910
912
|
getManifest() {
|
|
911
913
|
return this._manifest;
|
|
912
914
|
}
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
915
|
+
_toggleEventListeners(action) {
|
|
916
|
+
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
917
|
+
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
918
|
+
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
919
|
+
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
920
|
+
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
921
|
+
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
922
|
+
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
923
|
+
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
924
|
+
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
925
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
926
|
+
seeker?.[method]('change', this._handleSeekChange);
|
|
927
|
+
seeker?.[method]('mousedown', this._freeze);
|
|
928
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
929
|
+
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
930
|
+
toggleSettings?.[method]('blur', this._handleBlur);
|
|
931
|
+
if (this._lottieInstance) {
|
|
932
|
+
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
933
|
+
this._lottieInstance[method]('complete', this._complete);
|
|
934
|
+
this._lottieInstance[method]('loopComplete', this._loopComplete);
|
|
935
|
+
this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
|
|
936
|
+
this._lottieInstance[method]('data_ready', this._dataReady);
|
|
937
|
+
this._lottieInstance[method]('data_failed', this._dataFailed);
|
|
916
938
|
}
|
|
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
939
|
if (this._container && this.hover) {
|
|
938
|
-
this._container
|
|
939
|
-
this._container
|
|
940
|
+
this._container[method]('mouseenter', this._mouseEnter);
|
|
941
|
+
this._container[method]('mouseleave', this._mouseLeave);
|
|
940
942
|
}
|
|
941
|
-
|
|
943
|
+
window[method]('focus', this._handleWindowBlur, {
|
|
942
944
|
passive: true,
|
|
943
945
|
capture: false
|
|
944
946
|
});
|
|
945
|
-
|
|
947
|
+
window[method]('blur', this._handleWindowBlur, {
|
|
946
948
|
passive: true,
|
|
947
949
|
capture: false
|
|
948
950
|
});
|
|
949
951
|
if (this.animateOnScroll) {
|
|
950
|
-
|
|
952
|
+
window[method]('scroll', this._handleScroll, {
|
|
951
953
|
passive: true,
|
|
952
954
|
capture: true
|
|
953
955
|
});
|
|
954
956
|
}
|
|
955
957
|
}
|
|
958
|
+
_addEventListeners() {
|
|
959
|
+
this._toggleEventListeners('add');
|
|
960
|
+
}
|
|
956
961
|
_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);
|
|
962
|
+
this._toggleEventListeners('remove');
|
|
985
963
|
}
|
|
986
964
|
_loopComplete() {
|
|
987
965
|
if (!this._lottieInstance) {
|
|
@@ -1098,8 +1076,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1098
1076
|
}
|
|
1099
1077
|
if (isServer()) {
|
|
1100
1078
|
console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
|
|
1079
|
+
return;
|
|
1101
1080
|
}
|
|
1102
1081
|
if (this._playerState.visible) {
|
|
1082
|
+
if (this._playerState.scrollTimeout) {
|
|
1083
|
+
clearTimeout(this._playerState.scrollTimeout);
|
|
1084
|
+
}
|
|
1085
|
+
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1086
|
+
this.playerState = PlayerState.Paused;
|
|
1087
|
+
}, 400);
|
|
1103
1088
|
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
1089
|
requestAnimationFrame(()=>{
|
|
1105
1090
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
@@ -1110,12 +1095,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1110
1095
|
}
|
|
1111
1096
|
});
|
|
1112
1097
|
}
|
|
1113
|
-
if (this._playerState.scrollTimeout) {
|
|
1114
|
-
clearTimeout(this._playerState.scrollTimeout);
|
|
1115
|
-
}
|
|
1116
|
-
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1117
|
-
this.playerState = PlayerState.Paused;
|
|
1118
|
-
}, 400);
|
|
1119
1098
|
}
|
|
1120
1099
|
_handleSeekChange({ target }) {
|
|
1121
1100
|
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
@@ -1161,14 +1140,20 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1161
1140
|
];
|
|
1162
1141
|
animations?.push(...animationsToAdd);
|
|
1163
1142
|
}
|
|
1164
|
-
return
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1143
|
+
return {
|
|
1144
|
+
success: true,
|
|
1145
|
+
result: await createDotLottie({
|
|
1146
|
+
animations,
|
|
1147
|
+
manifest,
|
|
1148
|
+
fileName,
|
|
1149
|
+
shouldDownload
|
|
1150
|
+
})
|
|
1151
|
+
};
|
|
1170
1152
|
} catch (err) {
|
|
1171
|
-
|
|
1153
|
+
return {
|
|
1154
|
+
success: false,
|
|
1155
|
+
error: handleErrors(err).message
|
|
1156
|
+
};
|
|
1172
1157
|
}
|
|
1173
1158
|
}
|
|
1174
1159
|
getLottie() {
|
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;
|
|
@@ -229,7 +232,15 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
229
232
|
private _handleScroll;
|
|
230
233
|
private _handleSeekChange;
|
|
231
234
|
private _isLottie;
|
|
232
|
-
addAnimation(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<
|
|
235
|
+
addAnimation(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<{
|
|
236
|
+
success: boolean;
|
|
237
|
+
result: void | ArrayBuffer;
|
|
238
|
+
error?: undefined;
|
|
239
|
+
} | {
|
|
240
|
+
success: boolean;
|
|
241
|
+
error: string;
|
|
242
|
+
result?: undefined;
|
|
243
|
+
}>;
|
|
233
244
|
getLottie(): AnimationItem | null;
|
|
234
245
|
play(): Promise<void>;
|
|
235
246
|
pause(): void;
|