@aarsteinmedia/dotlottie-player 3.2.2 → 3.2.4
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/LICENSE.md +122 -0
- package/dist/cjs/index.js +88 -85
- package/dist/custom-elements.json +10 -5
- package/dist/esm/index.js +17 -17
- package/dist/index.d.ts +2 -6
- package/dist/index.js +7 -7
- package/package.json +45 -17
- package/LICENSE +0 -339
package/dist/cjs/index.js
CHANGED
|
@@ -5,16 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var fflate = require('fflate');
|
|
6
6
|
var Lottie = require('lottie-web');
|
|
7
7
|
|
|
8
|
-
var ObjectFit
|
|
9
|
-
(function(ObjectFit) {
|
|
8
|
+
var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
|
|
10
9
|
ObjectFit["Contain"] = "contain";
|
|
11
10
|
ObjectFit["Cover"] = "cover";
|
|
12
11
|
ObjectFit["Fill"] = "fill";
|
|
13
12
|
ObjectFit["ScaleDown"] = "scale-down";
|
|
14
13
|
ObjectFit["None"] = "none";
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
14
|
+
return ObjectFit;
|
|
15
|
+
}({});
|
|
16
|
+
var PlayerState = /*#__PURE__*/ function(PlayerState) {
|
|
18
17
|
PlayerState["Completed"] = "completed";
|
|
19
18
|
PlayerState["Destroyed"] = "destroyed";
|
|
20
19
|
PlayerState["Error"] = "error";
|
|
@@ -23,14 +22,14 @@ exports.PlayerState = void 0;
|
|
|
23
22
|
PlayerState["Paused"] = "paused";
|
|
24
23
|
PlayerState["Playing"] = "playing";
|
|
25
24
|
PlayerState["Stopped"] = "stopped";
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
return PlayerState;
|
|
26
|
+
}({});
|
|
27
|
+
var PlayMode = /*#__PURE__*/ function(PlayMode) {
|
|
29
28
|
PlayMode["Bounce"] = "bounce";
|
|
30
29
|
PlayMode["Normal"] = "normal";
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
return PlayMode;
|
|
31
|
+
}({});
|
|
32
|
+
var PlayerEvents = /*#__PURE__*/ function(PlayerEvents) {
|
|
34
33
|
PlayerEvents["Complete"] = "complete";
|
|
35
34
|
PlayerEvents["Destroyed"] = "destroyed";
|
|
36
35
|
PlayerEvents["Error"] = "error";
|
|
@@ -45,14 +44,15 @@ exports.PlayerEvents = void 0;
|
|
|
45
44
|
PlayerEvents["Ready"] = "ready";
|
|
46
45
|
PlayerEvents["Rendered"] = "rendered";
|
|
47
46
|
PlayerEvents["Stop"] = "stop";
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
47
|
+
return PlayerEvents;
|
|
48
|
+
}({});
|
|
49
|
+
var PreserveAspectRatio = /*#__PURE__*/ function(PreserveAspectRatio) {
|
|
51
50
|
PreserveAspectRatio["Contain"] = "xMidYMid meet";
|
|
52
51
|
PreserveAspectRatio["Cover"] = "xMidYMid slice";
|
|
53
52
|
PreserveAspectRatio["None"] = "xMinYMin slice";
|
|
54
53
|
PreserveAspectRatio["Initial"] = "none";
|
|
55
|
-
|
|
54
|
+
return PreserveAspectRatio;
|
|
55
|
+
}({});
|
|
56
56
|
|
|
57
57
|
class CustomError extends Error {
|
|
58
58
|
}
|
|
@@ -375,7 +375,7 @@ function renderPlayer() {
|
|
|
375
375
|
data-loaded="${this._playerState.loaded}"
|
|
376
376
|
>
|
|
377
377
|
<div class="animation" style="background:${this.background}">
|
|
378
|
-
${this.playerState ===
|
|
378
|
+
${this.playerState === PlayerState.Error ? ` <div class="error">
|
|
379
379
|
<svg
|
|
380
380
|
preserveAspectRatio="xMidYMid slice"
|
|
381
381
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -421,7 +421,7 @@ function renderControls() {
|
|
|
421
421
|
}
|
|
422
422
|
slot.innerHTML = `
|
|
423
423
|
<div
|
|
424
|
-
class="lottie-controls toolbar ${this.playerState ===
|
|
424
|
+
class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
|
|
425
425
|
aria-label="Lottie Animation controls"
|
|
426
426
|
>
|
|
427
427
|
<button
|
|
@@ -481,7 +481,7 @@ function renderControls() {
|
|
|
481
481
|
</button>
|
|
482
482
|
<button
|
|
483
483
|
class="toggleBoomerang"
|
|
484
|
-
data-active="${this.mode ===
|
|
484
|
+
data-active="${this.mode === PlayMode.Bounce}"
|
|
485
485
|
aria-label="Toggle boomerang"
|
|
486
486
|
tabindex="0"
|
|
487
487
|
>
|
|
@@ -589,9 +589,9 @@ function renderControls() {
|
|
|
589
589
|
}
|
|
590
590
|
}
|
|
591
591
|
|
|
592
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.2.
|
|
592
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.2.4";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 && tsc-alias","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","lint:fix":"eslint","lint:css":"npx stylelint **/*.scss","lint:css:fix":"npx stylelint **/*.scss --fix","lint:pkg":"npmPkgJsonLint .","lint:pkg:fix":"npmPkgJsonLint . --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","@eslint/compat":"^1.2.1","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.13.0","@rollup/plugin-commonjs":"^28.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.36","@types/node":"^22.7.7","@typescript-eslint/eslint-plugin":"^8.10.0","@typescript-eslint/parser":"^8.10.0",autoprefixer:"^10.4.20",esbuild:"^0.24.0","esbuild-sass-plugin":"^3.3.1",eslint:"^9.13.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.31.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.9.1","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","npm-package-json-lint":"^8.0.0","npm-package-json-lint-config-default":"^7.0.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.24.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.12.1","rollup-plugin-typescript-paths":"^1.5.0",sass:"^1.80.3",stylelint:"^16.10.0","stylelint-config-standard-scss":"^13.1.0","tsc-alias":"^1.8.10",tslib:"^2.8.0",typescript:"^5.6.3"};var browserslist={production:[">0.3%","not dead","not op_mini all"],development:["last 1 chrome version","last 1 firefox version","last 1 safari version"]};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,browserslist:browserslist,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
593
593
|
|
|
594
|
-
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:
|
|
594
|
+
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: rgb(0 0 0 / 20%);\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: fade-in 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid 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 .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:host .toolbar {\n display: flex;\n place-items: center 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 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 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 appearance: none;\n outline: none;\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\n@keyframes fade-in {\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: rgb(255 255 255 / 60%);\n }\n}";
|
|
595
595
|
|
|
596
596
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
597
597
|
if (isServer()) {
|
|
@@ -654,7 +654,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
654
654
|
}
|
|
655
655
|
this._addIntersectionObserver();
|
|
656
656
|
await this.load(this.src);
|
|
657
|
-
this.dispatchEvent(new CustomEvent(
|
|
657
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
|
|
658
658
|
}
|
|
659
659
|
disconnectedCallback() {
|
|
660
660
|
if (this._intersectionObserver) {
|
|
@@ -732,9 +732,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
732
732
|
if (name === 'mode') {
|
|
733
733
|
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
734
734
|
if (toggleBoomerang instanceof HTMLButtonElement) {
|
|
735
|
-
toggleBoomerang.dataset.active = (value ===
|
|
735
|
+
toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
|
|
736
736
|
}
|
|
737
|
-
this._isBounce = value ===
|
|
737
|
+
this._isBounce = value === PlayMode.Bounce;
|
|
738
738
|
}
|
|
739
739
|
if (name === 'speed') {
|
|
740
740
|
const val = Number(value);
|
|
@@ -764,9 +764,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
764
764
|
return;
|
|
765
765
|
}
|
|
766
766
|
if (name === 'playerState') {
|
|
767
|
-
togglePlay.dataset.active = (value ===
|
|
768
|
-
stop.dataset.active = (value ===
|
|
769
|
-
if (value ===
|
|
767
|
+
togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
|
|
768
|
+
stop.dataset.active = (value === PlayerState.Stopped).toString();
|
|
769
|
+
if (value === PlayerState.Playing) {
|
|
770
770
|
togglePlay.innerHTML = `
|
|
771
771
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
772
772
|
<path
|
|
@@ -906,10 +906,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
906
906
|
}
|
|
907
907
|
get mode() {
|
|
908
908
|
const val = this.getAttribute('mode');
|
|
909
|
-
if (val ===
|
|
909
|
+
if (val === PlayMode.Bounce) {
|
|
910
910
|
return val;
|
|
911
911
|
}
|
|
912
|
-
return
|
|
912
|
+
return PlayMode.Normal;
|
|
913
913
|
}
|
|
914
914
|
set multiAnimationSettings(value) {
|
|
915
915
|
this.setAttribute('multiAnimationSettings', JSON.stringify(value));
|
|
@@ -1071,13 +1071,13 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1071
1071
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
1072
1072
|
for (const entry of entries){
|
|
1073
1073
|
if (!entry.isIntersecting || document.hidden) {
|
|
1074
|
-
if (this.playerState ===
|
|
1074
|
+
if (this.playerState === PlayerState.Playing) {
|
|
1075
1075
|
this._freeze();
|
|
1076
1076
|
}
|
|
1077
1077
|
this._playerState.visible = false;
|
|
1078
1078
|
continue;
|
|
1079
1079
|
}
|
|
1080
|
-
if (!this.animateOnScroll && this.playerState ===
|
|
1080
|
+
if (!this.animateOnScroll && this.playerState === PlayerState.Frozen) {
|
|
1081
1081
|
this.play();
|
|
1082
1082
|
}
|
|
1083
1083
|
if (!this._playerState.scrollY) {
|
|
@@ -1097,10 +1097,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1097
1097
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
1098
1098
|
throw new Error('Broken or corrupted file');
|
|
1099
1099
|
}
|
|
1100
|
-
this._isBounce = this.mode ===
|
|
1100
|
+
this._isBounce = this.mode === PlayMode.Bounce;
|
|
1101
1101
|
if (this.multiAnimationSettings?.length) {
|
|
1102
1102
|
if (this.multiAnimationSettings[this._currentAnimation]?.mode) {
|
|
1103
|
-
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode ===
|
|
1103
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
1104
1104
|
}
|
|
1105
1105
|
}
|
|
1106
1106
|
this._isDotLottie = !!isDotLottie;
|
|
@@ -1120,9 +1120,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1120
1120
|
if (this._lottieInstance) {
|
|
1121
1121
|
this._lottieInstance.destroy();
|
|
1122
1122
|
}
|
|
1123
|
-
this.playerState =
|
|
1123
|
+
this.playerState = PlayerState.Stopped;
|
|
1124
1124
|
if (!this.animateOnScroll && (this.autoplay || this.multiAnimationSettings?.[this._currentAnimation]?.autoplay)) {
|
|
1125
|
-
this.playerState =
|
|
1125
|
+
this.playerState = PlayerState.Playing;
|
|
1126
1126
|
}
|
|
1127
1127
|
this._lottieInstance = Lottie.loadAnimation({
|
|
1128
1128
|
...this._getOptions(),
|
|
@@ -1130,8 +1130,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1130
1130
|
});
|
|
1131
1131
|
} catch (err) {
|
|
1132
1132
|
this._errorMessage = handleErrors(err).message;
|
|
1133
|
-
this.playerState =
|
|
1134
|
-
this.dispatchEvent(new CustomEvent(
|
|
1133
|
+
this.playerState = PlayerState.Error;
|
|
1134
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
1135
1135
|
return;
|
|
1136
1136
|
}
|
|
1137
1137
|
this._addEventListeners();
|
|
@@ -1203,12 +1203,12 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1203
1203
|
}
|
|
1204
1204
|
if (this._playerState.count >= this.count) {
|
|
1205
1205
|
this.setLoop(false);
|
|
1206
|
-
this.playerState =
|
|
1207
|
-
this.dispatchEvent(new CustomEvent(
|
|
1206
|
+
this.playerState = PlayerState.Completed;
|
|
1207
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
1208
1208
|
return;
|
|
1209
1209
|
}
|
|
1210
1210
|
}
|
|
1211
|
-
this.dispatchEvent(new CustomEvent(
|
|
1211
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
1212
1212
|
if (this._isBounce) {
|
|
1213
1213
|
this._lottieInstance.goToAndStop(playDirection === -1 ? inPoint : outPoint * 0.99, true);
|
|
1214
1214
|
this._lottieInstance.setDirection(playDirection * -1);
|
|
@@ -1231,7 +1231,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1231
1231
|
}
|
|
1232
1232
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
1233
1233
|
this._seeker = Math.round(currentFrame / totalFrames * 100);
|
|
1234
|
-
this.dispatchEvent(new CustomEvent(
|
|
1234
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
1235
1235
|
detail: {
|
|
1236
1236
|
frame: currentFrame,
|
|
1237
1237
|
seeker: this._seeker
|
|
@@ -1253,8 +1253,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1253
1253
|
}
|
|
1254
1254
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
1255
1255
|
this._seeker = Math.round(currentFrame / totalFrames * 100);
|
|
1256
|
-
this.playerState =
|
|
1257
|
-
this.dispatchEvent(new CustomEvent(
|
|
1256
|
+
this.playerState = PlayerState.Completed;
|
|
1257
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
|
|
1258
1258
|
detail: {
|
|
1259
1259
|
frame: currentFrame,
|
|
1260
1260
|
seeker: this._seeker
|
|
@@ -1263,39 +1263,39 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1263
1263
|
}
|
|
1264
1264
|
_DOMLoaded() {
|
|
1265
1265
|
this._playerState.loaded = true;
|
|
1266
|
-
this.dispatchEvent(new CustomEvent(
|
|
1266
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
1267
1267
|
}
|
|
1268
1268
|
_dataReady() {
|
|
1269
|
-
this.dispatchEvent(new CustomEvent(
|
|
1269
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
1270
1270
|
}
|
|
1271
1271
|
_dataFailed() {
|
|
1272
|
-
this.playerState =
|
|
1273
|
-
this.dispatchEvent(new CustomEvent(
|
|
1272
|
+
this.playerState = PlayerState.Error;
|
|
1273
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
1274
1274
|
}
|
|
1275
1275
|
_handleWindowBlur({ type }) {
|
|
1276
|
-
if (this.playerState ===
|
|
1276
|
+
if (this.playerState === PlayerState.Playing && type === 'blur') {
|
|
1277
1277
|
this._freeze();
|
|
1278
1278
|
}
|
|
1279
|
-
if (this.playerState ===
|
|
1279
|
+
if (this.playerState === PlayerState.Frozen && type === 'focus') {
|
|
1280
1280
|
this.play();
|
|
1281
1281
|
}
|
|
1282
1282
|
}
|
|
1283
1283
|
_mouseEnter() {
|
|
1284
|
-
if (this.hover && this.playerState !==
|
|
1284
|
+
if (this.hover && this.playerState !== PlayerState.Playing) {
|
|
1285
1285
|
this.play();
|
|
1286
1286
|
}
|
|
1287
1287
|
}
|
|
1288
1288
|
_mouseLeave() {
|
|
1289
|
-
if (this.hover && this.playerState ===
|
|
1289
|
+
if (this.hover && this.playerState === PlayerState.Playing) {
|
|
1290
1290
|
this.stop();
|
|
1291
1291
|
}
|
|
1292
1292
|
}
|
|
1293
1293
|
_onVisibilityChange() {
|
|
1294
|
-
if (document.hidden && this.playerState ===
|
|
1294
|
+
if (document.hidden && this.playerState === PlayerState.Playing) {
|
|
1295
1295
|
this._freeze();
|
|
1296
1296
|
return;
|
|
1297
1297
|
}
|
|
1298
|
-
if (this.playerState ===
|
|
1298
|
+
if (this.playerState === PlayerState.Frozen) {
|
|
1299
1299
|
this.play();
|
|
1300
1300
|
}
|
|
1301
1301
|
}
|
|
@@ -1312,15 +1312,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1312
1312
|
clearTimeout(this._playerState.scrollTimeout);
|
|
1313
1313
|
}
|
|
1314
1314
|
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1315
|
-
this.playerState =
|
|
1315
|
+
this.playerState = PlayerState.Paused;
|
|
1316
1316
|
}, 400);
|
|
1317
1317
|
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;
|
|
1318
1318
|
requestAnimationFrame(()=>{
|
|
1319
1319
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
1320
|
-
this.playerState =
|
|
1320
|
+
this.playerState = PlayerState.Playing;
|
|
1321
1321
|
this._lottieInstance?.goToAndStop(roundedScroll, true);
|
|
1322
1322
|
} else {
|
|
1323
|
-
this.playerState =
|
|
1323
|
+
this.playerState = PlayerState.Paused;
|
|
1324
1324
|
}
|
|
1325
1325
|
});
|
|
1326
1326
|
}
|
|
@@ -1397,9 +1397,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1397
1397
|
}
|
|
1398
1398
|
try {
|
|
1399
1399
|
this._lottieInstance.play();
|
|
1400
|
-
this.dispatchEvent(new CustomEvent(
|
|
1400
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
|
|
1401
1401
|
} finally{
|
|
1402
|
-
this.playerState =
|
|
1402
|
+
this.playerState = PlayerState.Playing;
|
|
1403
1403
|
}
|
|
1404
1404
|
}
|
|
1405
1405
|
pause() {
|
|
@@ -1411,9 +1411,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1411
1411
|
}
|
|
1412
1412
|
try {
|
|
1413
1413
|
this._lottieInstance.pause();
|
|
1414
|
-
this.dispatchEvent(new CustomEvent(
|
|
1414
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
|
|
1415
1415
|
} finally{
|
|
1416
|
-
this.playerState =
|
|
1416
|
+
this.playerState = PlayerState.Paused;
|
|
1417
1417
|
}
|
|
1418
1418
|
}
|
|
1419
1419
|
stop() {
|
|
@@ -1426,19 +1426,19 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1426
1426
|
this._playerState.count = 0;
|
|
1427
1427
|
try {
|
|
1428
1428
|
this._lottieInstance.stop();
|
|
1429
|
-
this.dispatchEvent(new CustomEvent(
|
|
1429
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
|
|
1430
1430
|
} finally{
|
|
1431
|
-
this.playerState =
|
|
1431
|
+
this.playerState = PlayerState.Stopped;
|
|
1432
1432
|
}
|
|
1433
1433
|
}
|
|
1434
1434
|
destroy() {
|
|
1435
1435
|
if (!this._lottieInstance) {
|
|
1436
1436
|
return;
|
|
1437
1437
|
}
|
|
1438
|
-
this.playerState =
|
|
1438
|
+
this.playerState = PlayerState.Destroyed;
|
|
1439
1439
|
this._lottieInstance.destroy();
|
|
1440
1440
|
this._lottieInstance = null;
|
|
1441
|
-
this.dispatchEvent(new CustomEvent(
|
|
1441
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
1442
1442
|
this.remove();
|
|
1443
1443
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
1444
1444
|
}
|
|
@@ -1452,9 +1452,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1452
1452
|
}
|
|
1453
1453
|
const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
|
|
1454
1454
|
this._seeker = frame;
|
|
1455
|
-
if (this.playerState ===
|
|
1455
|
+
if (this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
1456
1456
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
1457
|
-
this.playerState =
|
|
1457
|
+
this.playerState = PlayerState.Playing;
|
|
1458
1458
|
return;
|
|
1459
1459
|
}
|
|
1460
1460
|
this._lottieInstance.goToAndStop(frame, true);
|
|
@@ -1496,9 +1496,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1496
1496
|
}
|
|
1497
1497
|
try {
|
|
1498
1498
|
this._lottieInstance.pause();
|
|
1499
|
-
this.dispatchEvent(new CustomEvent(
|
|
1499
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
|
|
1500
1500
|
} finally{
|
|
1501
|
-
this.playerState =
|
|
1501
|
+
this.playerState = PlayerState.Frozen;
|
|
1502
1502
|
}
|
|
1503
1503
|
}
|
|
1504
1504
|
async reload() {
|
|
@@ -1537,13 +1537,13 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1537
1537
|
return;
|
|
1538
1538
|
}
|
|
1539
1539
|
const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
|
|
1540
|
-
if (this.playerState ===
|
|
1540
|
+
if (this.playerState === PlayerState.Playing) {
|
|
1541
1541
|
return this.pause();
|
|
1542
1542
|
}
|
|
1543
|
-
if (this.playerState !==
|
|
1543
|
+
if (this.playerState !== PlayerState.Completed) {
|
|
1544
1544
|
return this.play();
|
|
1545
1545
|
}
|
|
1546
|
-
this.playerState =
|
|
1546
|
+
this.playerState = PlayerState.Playing;
|
|
1547
1547
|
if (this._isBounce) {
|
|
1548
1548
|
this.setDirection(playDirection * -1);
|
|
1549
1549
|
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
@@ -1561,21 +1561,21 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1561
1561
|
toggleBoomerang() {
|
|
1562
1562
|
const curr = this.multiAnimationSettings?.[this._currentAnimation];
|
|
1563
1563
|
if (curr?.mode !== undefined) {
|
|
1564
|
-
if (curr.mode ===
|
|
1565
|
-
curr.mode =
|
|
1564
|
+
if (curr.mode === PlayMode.Normal) {
|
|
1565
|
+
curr.mode = PlayMode.Bounce;
|
|
1566
1566
|
this._isBounce = true;
|
|
1567
1567
|
return;
|
|
1568
1568
|
}
|
|
1569
|
-
curr.mode =
|
|
1569
|
+
curr.mode = PlayMode.Normal;
|
|
1570
1570
|
this._isBounce = false;
|
|
1571
1571
|
return;
|
|
1572
1572
|
}
|
|
1573
|
-
if (this.mode ===
|
|
1574
|
-
this.mode =
|
|
1573
|
+
if (this.mode === PlayMode.Normal) {
|
|
1574
|
+
this.mode = PlayMode.Bounce;
|
|
1575
1575
|
this._isBounce = true;
|
|
1576
1576
|
return;
|
|
1577
1577
|
}
|
|
1578
|
-
this.mode =
|
|
1578
|
+
this.mode = PlayMode.Normal;
|
|
1579
1579
|
this._isBounce = false;
|
|
1580
1580
|
}
|
|
1581
1581
|
_toggleSettings(flag) {
|
|
@@ -1601,27 +1601,27 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1601
1601
|
animationData: this._animations[this._currentAnimation]
|
|
1602
1602
|
});
|
|
1603
1603
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) {
|
|
1604
|
-
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode ===
|
|
1604
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
1605
1605
|
}
|
|
1606
1606
|
this._removeEventListeners();
|
|
1607
1607
|
this._addEventListeners();
|
|
1608
|
-
this.dispatchEvent(new CustomEvent(isPrevious ?
|
|
1608
|
+
this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
|
|
1609
1609
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
1610
1610
|
if (this.animateOnScroll) {
|
|
1611
1611
|
this._lottieInstance?.goToAndStop(0, true);
|
|
1612
|
-
this.playerState =
|
|
1612
|
+
this.playerState = PlayerState.Paused;
|
|
1613
1613
|
return;
|
|
1614
1614
|
}
|
|
1615
1615
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
1616
|
-
this.playerState =
|
|
1616
|
+
this.playerState = PlayerState.Playing;
|
|
1617
1617
|
return;
|
|
1618
1618
|
}
|
|
1619
1619
|
this._lottieInstance?.goToAndStop(0, true);
|
|
1620
|
-
this.playerState =
|
|
1620
|
+
this.playerState = PlayerState.Stopped;
|
|
1621
1621
|
} catch (err) {
|
|
1622
1622
|
this._errorMessage = handleErrors(err).message;
|
|
1623
|
-
this.playerState =
|
|
1624
|
-
this.dispatchEvent(new CustomEvent(
|
|
1623
|
+
this.playerState = PlayerState.Error;
|
|
1624
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
1625
1625
|
}
|
|
1626
1626
|
}
|
|
1627
1627
|
next() {
|
|
@@ -1656,10 +1656,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1656
1656
|
return styleSheet;
|
|
1657
1657
|
}
|
|
1658
1658
|
constructor(){
|
|
1659
|
-
super(), this._renderControls = renderControls, this._render = renderPlayer, this.playerState =
|
|
1659
|
+
super(), this._renderControls = renderControls, this._render = renderPlayer, this.playerState = PlayerState.Loading, this._isSettingsOpen = false, this._seeker = 0, this._currentAnimation = 0, this._lottieInstance = null, this._identifier = this.id || useId('dotlottie'), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
|
|
1660
1660
|
count: 0,
|
|
1661
1661
|
loaded: false,
|
|
1662
|
-
prev:
|
|
1662
|
+
prev: PlayerState.Loading,
|
|
1663
1663
|
scrollTimeout: null,
|
|
1664
1664
|
scrollY: 0,
|
|
1665
1665
|
visible: false
|
|
@@ -1707,5 +1707,8 @@ if (!isServer()) {
|
|
|
1707
1707
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1708
1708
|
}
|
|
1709
1709
|
|
|
1710
|
+
exports.PlayMode = PlayMode;
|
|
1711
|
+
exports.PlayerEvents = PlayerEvents;
|
|
1712
|
+
exports.PlayerState = PlayerState;
|
|
1710
1713
|
exports.default = DotLottiePlayer;
|
|
1711
1714
|
exports.tagName = tagName;
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
"name": "PlayMode",
|
|
36
36
|
"declaration": {
|
|
37
37
|
"name": "PlayMode",
|
|
38
|
-
"
|
|
38
|
+
"package": "@/enums"
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
{
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"name": "PlayerEvents",
|
|
44
44
|
"declaration": {
|
|
45
45
|
"name": "PlayerEvents",
|
|
46
|
-
"
|
|
46
|
+
"package": "@/enums"
|
|
47
47
|
}
|
|
48
48
|
},
|
|
49
49
|
{
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"name": "PlayerState",
|
|
52
52
|
"declaration": {
|
|
53
53
|
"name": "PlayerState",
|
|
54
|
-
"
|
|
54
|
+
"package": "@/enums"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
57
57
|
{
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"name": "dotlottie-player",
|
|
68
68
|
"declaration": {
|
|
69
69
|
"name": "DotLottiePlayer",
|
|
70
|
-
"
|
|
70
|
+
"package": "@/elements/DotLottiePlayer"
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
]
|
|
@@ -903,6 +903,11 @@
|
|
|
903
903
|
"kind": "method",
|
|
904
904
|
"name": "addAnimation",
|
|
905
905
|
"privacy": "public",
|
|
906
|
+
"return": {
|
|
907
|
+
"type": {
|
|
908
|
+
"text": "Promise<{\n result?: void | ArrayBuffer\n success: boolean\n error?: string\n }>"
|
|
909
|
+
}
|
|
910
|
+
},
|
|
906
911
|
"parameters": [
|
|
907
912
|
{
|
|
908
913
|
"name": "configs",
|
|
@@ -1199,7 +1204,7 @@
|
|
|
1199
1204
|
],
|
|
1200
1205
|
"superclass": {
|
|
1201
1206
|
"name": "EnhancedElement",
|
|
1202
|
-
"
|
|
1207
|
+
"package": "@/elements/EnhancedElement"
|
|
1203
1208
|
},
|
|
1204
1209
|
"tagName": "dotlottie-player",
|
|
1205
1210
|
"customElement": true
|