@aarsteinmedia/dotlottie-player 6.3.5 → 6.3.8
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/CHANGELOG.md +7 -0
- package/custom-elements.json +123 -1
- package/dist/canvas.d.ts +2 -2
- package/dist/canvas.js +2 -2
- package/dist/chunks/{DotLottiePlayerBase-BBHa6yP8.js → DotLottiePlayerBase-COmjFUND.js} +100 -61
- package/dist/chunks/{DotLottiePlayerBase.d-BSagzEPB.d.ts → DotLottiePlayerBase.d-DaXI0b6M.d.ts} +4 -3
- package/dist/chunks/errorScreen-CN8UGB0n.js +7 -0
- package/dist/full.d.ts +5 -6
- package/dist/full.js +13 -9
- package/dist/light.d.ts +2 -2
- package/dist/light.js +4 -4
- package/dist/svg.d.ts +2 -2
- package/dist/svg.js +4 -4
- package/dist/unpkg-canvas.js +23 -23
- package/dist/unpkg-full.js +21 -21
- package/dist/unpkg-light.js +22 -22
- package/dist/unpkg-svg.js +19 -19
- package/package.json +25 -31
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
|
|
9
9
|
|
|
10
|
+
## [6.3.6] - 09-06-2026
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Added support for seedRandom expression.
|
|
15
|
+
- Various backend optimizations.
|
|
16
|
+
|
|
10
17
|
## [6.3.0] - 22-02-2026
|
|
11
18
|
|
|
12
19
|
### Changed
|
package/custom-elements.json
CHANGED
|
@@ -1,5 +1,127 @@
|
|
|
1
1
|
{
|
|
2
2
|
"schemaVersion": "1.0.0",
|
|
3
3
|
"readme": "",
|
|
4
|
-
"modules": [
|
|
4
|
+
"modules": [
|
|
5
|
+
{
|
|
6
|
+
"kind": "javascript-module",
|
|
7
|
+
"path": "dist/full.js",
|
|
8
|
+
"declarations": [
|
|
9
|
+
{
|
|
10
|
+
"kind": "class",
|
|
11
|
+
"description": "DotLottie Player Web Component.",
|
|
12
|
+
"name": "DotLottiePlayer",
|
|
13
|
+
"members": [
|
|
14
|
+
{
|
|
15
|
+
"kind": "method",
|
|
16
|
+
"name": "addAnimation",
|
|
17
|
+
"parameters": [
|
|
18
|
+
{
|
|
19
|
+
"name": "params"
|
|
20
|
+
}
|
|
21
|
+
]
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"kind": "method",
|
|
25
|
+
"name": "convert",
|
|
26
|
+
"parameters": [
|
|
27
|
+
{
|
|
28
|
+
"name": "params"
|
|
29
|
+
}
|
|
30
|
+
]
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
"kind": "method",
|
|
34
|
+
"name": "loadAnimation",
|
|
35
|
+
"parameters": [
|
|
36
|
+
{
|
|
37
|
+
"name": "config"
|
|
38
|
+
}
|
|
39
|
+
]
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"kind": "method",
|
|
43
|
+
"name": "setOptions",
|
|
44
|
+
"parameters": [
|
|
45
|
+
{
|
|
46
|
+
"name": "{ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }"
|
|
47
|
+
}
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
],
|
|
51
|
+
"superclass": {
|
|
52
|
+
"name": "DotLottiePlayerBase",
|
|
53
|
+
"module": "/dist/chunks/DotLottiePlayerBase-COmjFUND.js"
|
|
54
|
+
},
|
|
55
|
+
"tagName": "tagName",
|
|
56
|
+
"customElement": true
|
|
57
|
+
}
|
|
58
|
+
],
|
|
59
|
+
"exports": [
|
|
60
|
+
{
|
|
61
|
+
"kind": "js",
|
|
62
|
+
"name": "PlayMode",
|
|
63
|
+
"declaration": {
|
|
64
|
+
"name": "PlayMode",
|
|
65
|
+
"package": "@aarsteinmedia/lottie-web/utils"
|
|
66
|
+
}
|
|
67
|
+
},
|
|
68
|
+
{
|
|
69
|
+
"kind": "js",
|
|
70
|
+
"name": "PlayerEvents",
|
|
71
|
+
"declaration": {
|
|
72
|
+
"name": "PlayerEvents",
|
|
73
|
+
"package": "@aarsteinmedia/lottie-web/utils"
|
|
74
|
+
}
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
"kind": "js",
|
|
78
|
+
"name": "RendererType",
|
|
79
|
+
"declaration": {
|
|
80
|
+
"name": "RendererType",
|
|
81
|
+
"package": "@aarsteinmedia/lottie-web/utils"
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "js",
|
|
86
|
+
"name": "MouseOut",
|
|
87
|
+
"declaration": {
|
|
88
|
+
"name": "M",
|
|
89
|
+
"module": "./chunks/DotLottiePlayerBase-COmjFUND.js"
|
|
90
|
+
}
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
"kind": "js",
|
|
94
|
+
"name": "PlayerState",
|
|
95
|
+
"declaration": {
|
|
96
|
+
"name": "P",
|
|
97
|
+
"module": "./chunks/DotLottiePlayerBase-COmjFUND.js"
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"kind": "custom-element-definition",
|
|
102
|
+
"name": "tagName",
|
|
103
|
+
"declaration": {
|
|
104
|
+
"name": "DotLottiePlayer",
|
|
105
|
+
"module": "dist/full.js"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
"kind": "js",
|
|
110
|
+
"name": "default",
|
|
111
|
+
"declaration": {
|
|
112
|
+
"name": "DotLottiePlayer",
|
|
113
|
+
"module": "dist/full.js"
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"kind": "js",
|
|
118
|
+
"name": "tagName",
|
|
119
|
+
"declaration": {
|
|
120
|
+
"name": "tagName",
|
|
121
|
+
"module": "dist/full.js"
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
]
|
|
125
|
+
}
|
|
126
|
+
]
|
|
5
127
|
}
|
package/dist/canvas.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
|
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
3
|
import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
|
|
4
4
|
import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
|
|
5
|
-
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-
|
|
6
|
-
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-
|
|
5
|
+
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
6
|
+
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
7
7
|
|
|
8
8
|
declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
|
|
9
9
|
get renderer(): RendererType;
|
package/dist/canvas.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
3
|
import Lottie from '@aarsteinmedia/lottie-web/canvas';
|
|
4
|
-
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-
|
|
5
|
-
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-
|
|
4
|
+
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
5
|
+
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
6
6
|
import '@aarsteinmedia/lottie-web/dotlottie';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { isServer, PlayMode, PreserveAspectRatio,
|
|
1
|
+
import { getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
|
|
2
|
+
import { isServer, PlayMode, PreserveAspectRatio, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
|
|
3
|
+
|
|
4
|
+
let modulePromise$1;
|
|
5
|
+
function loadControlsModule() {
|
|
6
|
+
modulePromise$1 = modulePromise$1 ?? Promise.resolve().then(function () { return controls; });
|
|
7
|
+
return modulePromise$1;
|
|
8
|
+
}
|
|
3
9
|
|
|
4
10
|
/**
|
|
5
11
|
* Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
|
|
@@ -61,6 +67,25 @@ if (isServer) {
|
|
|
61
67
|
|
|
62
68
|
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\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls='true'] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .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 &::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 }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .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 &.has-error {\n pointer-events: none;\n opacity: 0.5;\n }\n\n & 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 &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active='true'] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: 0.5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n & > * {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n & 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 &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n .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\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 &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-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\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-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\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-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\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & *::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\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}\n";
|
|
63
69
|
|
|
70
|
+
let dotlottieTools = null, loadPromise = null;
|
|
71
|
+
function loadDotLottieTools() {
|
|
72
|
+
if (dotlottieTools) {
|
|
73
|
+
return Promise.resolve(dotlottieTools);
|
|
74
|
+
}
|
|
75
|
+
loadPromise = loadPromise ?? (async ()=>{
|
|
76
|
+
const { addAnimation, convert } = await import('@aarsteinmedia/lottie-web/dotlottie');
|
|
77
|
+
dotlottieTools = {
|
|
78
|
+
addAnimation,
|
|
79
|
+
convert
|
|
80
|
+
};
|
|
81
|
+
return {
|
|
82
|
+
addAnimation,
|
|
83
|
+
convert
|
|
84
|
+
};
|
|
85
|
+
})();
|
|
86
|
+
return loadPromise;
|
|
87
|
+
}
|
|
88
|
+
|
|
64
89
|
const boomerangIcon = /* HTML */ `
|
|
65
90
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
66
91
|
<path
|
|
@@ -109,6 +134,14 @@ const nextIcon = /* HTML */ `
|
|
|
109
134
|
</svg>
|
|
110
135
|
`;
|
|
111
136
|
|
|
137
|
+
const pauseIcon = /* HTML */ `
|
|
138
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
139
|
+
<path
|
|
140
|
+
d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
|
|
141
|
+
/>
|
|
142
|
+
</svg>
|
|
143
|
+
`;
|
|
144
|
+
|
|
112
145
|
const playIcon = /* HTML */ `
|
|
113
146
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
114
147
|
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
@@ -216,12 +249,18 @@ const tagName = 'dotlottie-player';
|
|
|
216
249
|
}
|
|
217
250
|
const convertButton = this.shadow.querySelector('.convert');
|
|
218
251
|
if (convertButton instanceof HTMLButtonElement) {
|
|
219
|
-
convertButton.onclick = ()=>{
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
252
|
+
convertButton.onclick = async ()=>{
|
|
253
|
+
convertButton.disabled = true;
|
|
254
|
+
try {
|
|
255
|
+
const { convert } = await loadDotLottieTools();
|
|
256
|
+
await convert({
|
|
257
|
+
isDotLottie: this.isDotLottie,
|
|
258
|
+
manifest: this.getManifest(),
|
|
259
|
+
src: this.src || this.source
|
|
260
|
+
});
|
|
261
|
+
} finally{
|
|
262
|
+
convertButton.disabled = false;
|
|
263
|
+
}
|
|
225
264
|
};
|
|
226
265
|
}
|
|
227
266
|
const snapshot = this.shadow.querySelector('.snapshot');
|
|
@@ -235,14 +274,17 @@ const tagName = 'dotlottie-player';
|
|
|
235
274
|
}
|
|
236
275
|
}
|
|
237
276
|
}
|
|
277
|
+
function updatePlayPauseButton(togglePlay, state) {
|
|
278
|
+
const isActive = state === PlayerState.Playing || state === PlayerState.Paused;
|
|
279
|
+
togglePlay.dataset.active = isActive.toString();
|
|
280
|
+
togglePlay.innerHTML = state === PlayerState.Playing ? pauseIcon : playIcon;
|
|
281
|
+
}
|
|
238
282
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
</svg>
|
|
245
|
-
`;
|
|
283
|
+
var controls = /*#__PURE__*/Object.freeze({
|
|
284
|
+
__proto__: null,
|
|
285
|
+
default: renderControls,
|
|
286
|
+
updatePlayPauseButton: updatePlayPauseButton
|
|
287
|
+
});
|
|
246
288
|
|
|
247
289
|
/**
|
|
248
290
|
* Render Player.
|
|
@@ -252,7 +294,7 @@ const pauseIcon = /* HTML */ `
|
|
|
252
294
|
}
|
|
253
295
|
this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
|
|
254
296
|
aria-label="${this.description}"
|
|
255
|
-
` : ''}
|
|
297
|
+
` : ''}></figure><slot name="controls"></slot></div>`;
|
|
256
298
|
this.shadow.adoptedStyleSheets = [
|
|
257
299
|
await DotLottiePlayerBase.styles()
|
|
258
300
|
];
|
|
@@ -319,29 +361,17 @@ const pauseIcon = /* HTML */ `
|
|
|
319
361
|
return mandatory.every((field)=>Object.hasOwn(json, field));
|
|
320
362
|
}, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
|
|
321
363
|
|
|
364
|
+
let modulePromise = null;
|
|
365
|
+
function loadErrorModule() {
|
|
366
|
+
modulePromise = modulePromise ?? import('./errorScreen-CN8UGB0n.js');
|
|
367
|
+
return modulePromise;
|
|
368
|
+
}
|
|
369
|
+
|
|
322
370
|
const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
323
371
|
const styleSheet = new CSSStyleSheet();
|
|
324
372
|
await styleSheet.replace(css_248z);
|
|
325
373
|
return styleSheet;
|
|
326
374
|
};
|
|
327
|
-
// export interface DotLottieAnimationInstance {
|
|
328
|
-
// addEventListener: (name: string, callback: (...args: any[]) => void) => void
|
|
329
|
-
// autoplay?: boolean
|
|
330
|
-
// currentFrame: number
|
|
331
|
-
// destroy: () => void
|
|
332
|
-
// goToAndPlay: (value: number, isFrame?: boolean) => void
|
|
333
|
-
// goToAndStop: (value: number, isFrame?: boolean) => void
|
|
334
|
-
// pause: () => void
|
|
335
|
-
// play: () => void
|
|
336
|
-
// playDirection: number
|
|
337
|
-
// removeEventListener: (name: string, callback: (...args: any[]) => void) => void
|
|
338
|
-
// setDirection: (direction: AnimationDirection) => void
|
|
339
|
-
// setLoop: (loop: boolean) => void
|
|
340
|
-
// setSpeed: (speed: number) => void
|
|
341
|
-
// setSubframe: (useSubframe: boolean) => void
|
|
342
|
-
// stop: () => void
|
|
343
|
-
// totalFrames: number
|
|
344
|
-
// }
|
|
345
375
|
/**
|
|
346
376
|
* DotLottie Player Web Component.
|
|
347
377
|
*/ class DotLottiePlayerBase extends PropertyCallbackElement {
|
|
@@ -667,17 +697,31 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
667
697
|
scrollTimeout: null,
|
|
668
698
|
scrollY: 0,
|
|
669
699
|
visible: false
|
|
670
|
-
}, this._render = renderPlayer,
|
|
700
|
+
}, this._render = renderPlayer, /**
|
|
671
701
|
* Seeker.
|
|
672
702
|
*/ this._seeker = 0, /**
|
|
673
703
|
* This is included in watched properties,
|
|
674
704
|
* so that next-button will show up
|
|
675
705
|
* on load, if controls are visible.
|
|
676
|
-
*/ this._animations = [], /**
|
|
706
|
+
*/ this._animations = [], this._controlsLoadId = 0, /**
|
|
677
707
|
* Which animation to show, if several.
|
|
678
|
-
*/ this._currentAnimation = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
|
|
708
|
+
*/ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
|
|
679
709
|
* Multi-animation settings.
|
|
680
|
-
*/ this._multiAnimationSettings = []
|
|
710
|
+
*/ this._multiAnimationSettings = [], this._renderControls = async ()=>{
|
|
711
|
+
const slot = this.shadow?.querySelector('slot[name=controls]');
|
|
712
|
+
if (!slot) {
|
|
713
|
+
return;
|
|
714
|
+
}
|
|
715
|
+
if (!this.controls) {
|
|
716
|
+
slot.innerHTML = '';
|
|
717
|
+
return;
|
|
718
|
+
}
|
|
719
|
+
const loadId = ++this._controlsLoadId, { default: renderControls } = await loadControlsModule();
|
|
720
|
+
if (loadId !== this._controlsLoadId) {
|
|
721
|
+
return;
|
|
722
|
+
}
|
|
723
|
+
renderControls.call(this);
|
|
724
|
+
};
|
|
681
725
|
this._complete = this._complete.bind(this);
|
|
682
726
|
this._dataFailed = this._dataFailed.bind(this);
|
|
683
727
|
this._dataReady = this._dataReady.bind(this);
|
|
@@ -699,7 +743,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
699
743
|
this.stop = this.stop.bind(this);
|
|
700
744
|
this.prev = this.prev.bind(this);
|
|
701
745
|
this.next = this.next.bind(this);
|
|
702
|
-
this._renderControls = this._renderControls.bind(this);
|
|
703
746
|
this.snapshot = this.snapshot.bind(this);
|
|
704
747
|
this.toggleLoop = this.toggleLoop.bind(this);
|
|
705
748
|
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
@@ -746,7 +789,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
746
789
|
}
|
|
747
790
|
case 'controls':
|
|
748
791
|
{
|
|
749
|
-
this._renderControls();
|
|
792
|
+
await this._renderControls();
|
|
750
793
|
break;
|
|
751
794
|
}
|
|
752
795
|
case 'direction':
|
|
@@ -982,21 +1025,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
982
1025
|
// Start playing if autoplay is enabled
|
|
983
1026
|
if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
|
|
984
1027
|
this.seek('99%');
|
|
985
|
-
// if (!('IntersectionObserver' in window)) {
|
|
986
|
-
// if (!this.animateOnScroll) {
|
|
987
|
-
// this.play()
|
|
988
|
-
// }
|
|
989
|
-
// this._playerState.visible = true
|
|
990
|
-
// }
|
|
991
|
-
// this._addIntersectionObserver()
|
|
992
|
-
}
|
|
993
|
-
this._renderControls();
|
|
994
|
-
if (this.autoplay || this.playOnVisible) {
|
|
995
|
-
const togglePlay = this.shadow?.querySelector('.togglePlay');
|
|
996
|
-
if (togglePlay) {
|
|
997
|
-
togglePlay.innerHTML = pauseIcon;
|
|
998
|
-
}
|
|
999
1028
|
}
|
|
1029
|
+
await this._renderControls();
|
|
1000
1030
|
} catch (error) {
|
|
1001
1031
|
console.error(error);
|
|
1002
1032
|
this._errorMessage = handleErrors(error).message;
|
|
@@ -1066,13 +1096,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
1066
1096
|
return;
|
|
1067
1097
|
}
|
|
1068
1098
|
if (name === 'playerState') {
|
|
1069
|
-
togglePlay
|
|
1099
|
+
updatePlayPauseButton(togglePlay, value);
|
|
1070
1100
|
stopButton.dataset.active = (value === PlayerState.Stopped).toString();
|
|
1071
|
-
if (value === PlayerState.Playing) {
|
|
1072
|
-
togglePlay.innerHTML = pauseIcon;
|
|
1073
|
-
} else {
|
|
1074
|
-
togglePlay.innerHTML = playIcon;
|
|
1075
|
-
}
|
|
1076
1101
|
}
|
|
1077
1102
|
if (name === '_seeker' && typeof value === 'number') {
|
|
1078
1103
|
seeker.value = value.toString();
|
|
@@ -1328,6 +1353,20 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
1328
1353
|
target.focus();
|
|
1329
1354
|
}
|
|
1330
1355
|
}
|
|
1356
|
+
async _showError() {
|
|
1357
|
+
if (this.playerState !== PlayerState.Error) {
|
|
1358
|
+
return;
|
|
1359
|
+
}
|
|
1360
|
+
const figure = this.shadow?.querySelector('.animation');
|
|
1361
|
+
if (!(figure instanceof HTMLElement)) {
|
|
1362
|
+
return;
|
|
1363
|
+
}
|
|
1364
|
+
const loadId = ++this._errorLoadId, { default: errorScreen } = await loadErrorModule();
|
|
1365
|
+
if (loadId !== this._errorLoadId) {
|
|
1366
|
+
return;
|
|
1367
|
+
}
|
|
1368
|
+
figure.innerHTML = errorScreen(this._errorMessage);
|
|
1369
|
+
}
|
|
1331
1370
|
setOptions(_options) {
|
|
1332
1371
|
throw new Error('Method not implemented');
|
|
1333
1372
|
}
|
|
@@ -1749,4 +1788,4 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
|
|
|
1749
1788
|
}
|
|
1750
1789
|
}
|
|
1751
1790
|
|
|
1752
|
-
export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, tagName as t };
|
|
1791
|
+
export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, loadDotLottieTools as l, tagName as t };
|
package/dist/chunks/{DotLottiePlayerBase.d-BSagzEPB.d.ts → DotLottiePlayerBase.d-DaXI0b6M.d.ts}
RENAMED
|
@@ -7,8 +7,6 @@ declare abstract class PropertyCallbackElement extends HTMLElement {
|
|
|
7
7
|
propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
|
-
declare function renderControls(this: DotLottiePlayerBase): void;
|
|
11
|
-
|
|
12
10
|
declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
|
|
13
11
|
|
|
14
12
|
declare enum MouseOut {
|
|
@@ -105,10 +103,11 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
|
|
|
105
103
|
scrollTimeout: NodeJS.Timeout | null;
|
|
106
104
|
};
|
|
107
105
|
protected _render: typeof renderPlayer;
|
|
108
|
-
protected _renderControls: typeof renderControls;
|
|
109
106
|
protected _seeker: number;
|
|
110
107
|
private _animations;
|
|
108
|
+
private _controlsLoadId;
|
|
111
109
|
private _currentAnimation;
|
|
110
|
+
private _errorLoadId;
|
|
112
111
|
private _intersectionObserver?;
|
|
113
112
|
private _isBounce;
|
|
114
113
|
private _isDotLottie;
|
|
@@ -153,6 +152,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
|
|
|
153
152
|
protected _handleClick(): void;
|
|
154
153
|
protected _handleSeekChange({ target }: Event): void;
|
|
155
154
|
protected _handleSettingsClick({ target }: Event): void;
|
|
155
|
+
protected _renderControls: () => Promise<void>;
|
|
156
|
+
protected _showError(): Promise<void>;
|
|
156
157
|
protected setOptions(_options: {
|
|
157
158
|
container?: undefined | HTMLElement;
|
|
158
159
|
rendererType: RendererType;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { PreserveAspectRatio, namespaceSVG } from '@aarsteinmedia/lottie-web/utils';
|
|
2
|
+
|
|
3
|
+
function errorScreen(message) {
|
|
4
|
+
return /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${message}</text></svg></div>`;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
export { errorScreen as default };
|
package/dist/full.d.ts
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/utils';
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
3
|
import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
|
|
4
|
-
import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-BSagzEPB.js';
|
|
4
|
+
import { AddAnimationParams, ConvertParams, AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
|
|
5
|
+
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
6
|
+
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
8
7
|
|
|
9
8
|
declare class DotLottiePlayer extends DotLottiePlayerBase {
|
|
10
|
-
addAnimation:
|
|
11
|
-
convert:
|
|
9
|
+
addAnimation(params: AddAnimationParams): Promise<_aarsteinmedia_lottie_web.Result>;
|
|
10
|
+
convert(params: ConvertParams): Promise<_aarsteinmedia_lottie_web.Result>;
|
|
12
11
|
loadAnimation(config: AnimationConfiguration): _aarsteinmedia_lottie_web.AnimationItem;
|
|
13
12
|
protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
|
|
14
13
|
container?: undefined | HTMLElement;
|
package/dist/full.js
CHANGED
|
@@ -1,15 +1,23 @@
|
|
|
1
1
|
import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
import { loadAnimation } from '@aarsteinmedia/lottie-web';
|
|
4
|
+
import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
5
|
+
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
6
|
+
import '@aarsteinmedia/lottie-web/dotlottie';
|
|
7
7
|
|
|
8
8
|
/**
|
|
9
9
|
* DotLottie Player Web Component.
|
|
10
10
|
*/ class DotLottiePlayer extends DotLottiePlayerBase {
|
|
11
|
+
async addAnimation(params) {
|
|
12
|
+
const { addAnimation } = await loadDotLottieTools();
|
|
13
|
+
return await addAnimation(params);
|
|
14
|
+
}
|
|
15
|
+
async convert(params) {
|
|
16
|
+
const { convert } = await loadDotLottieTools();
|
|
17
|
+
return await convert(params);
|
|
18
|
+
}
|
|
11
19
|
loadAnimation(config) {
|
|
12
|
-
return
|
|
20
|
+
return loadAnimation(config);
|
|
13
21
|
}
|
|
14
22
|
setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }) {
|
|
15
23
|
const options = {
|
|
@@ -38,7 +46,6 @@ export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BB
|
|
|
38
46
|
{
|
|
39
47
|
options.rendererSettings = {
|
|
40
48
|
...options.rendererSettings,
|
|
41
|
-
// clearCanvas: true,
|
|
42
49
|
preserveAspectRatio,
|
|
43
50
|
progressiveLoad: true
|
|
44
51
|
};
|
|
@@ -47,9 +54,6 @@ export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BB
|
|
|
47
54
|
}
|
|
48
55
|
return options;
|
|
49
56
|
}
|
|
50
|
-
constructor(...args){
|
|
51
|
-
super(...args), this.addAnimation = addAnimation, this.convert = convert;
|
|
52
|
-
}
|
|
53
57
|
}
|
|
54
58
|
|
|
55
59
|
/**
|
package/dist/light.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
|
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
3
|
import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
|
|
4
4
|
import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
|
|
5
|
-
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-
|
|
6
|
-
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-
|
|
5
|
+
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
6
|
+
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
7
7
|
|
|
8
8
|
declare class DotLottiePlayerLight extends DotLottiePlayerBase {
|
|
9
9
|
get renderer(): RendererType;
|
package/dist/light.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
|
-
import
|
|
4
|
-
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-
|
|
5
|
-
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-
|
|
3
|
+
import { loadAnimation } from '@aarsteinmedia/lottie-web/light';
|
|
4
|
+
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
5
|
+
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
6
6
|
import '@aarsteinmedia/lottie-web/dotlottie';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -16,7 +16,7 @@ import '@aarsteinmedia/lottie-web/dotlottie';
|
|
|
16
16
|
this.isLight = true;
|
|
17
17
|
}
|
|
18
18
|
loadAnimation(config) {
|
|
19
|
-
return
|
|
19
|
+
return loadAnimation(config);
|
|
20
20
|
}
|
|
21
21
|
setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
|
|
22
22
|
const options = {
|
package/dist/svg.d.ts
CHANGED
|
@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
|
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
3
|
import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
|
|
4
4
|
import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
|
|
5
|
-
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-
|
|
6
|
-
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-
|
|
5
|
+
import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
6
|
+
export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
|
|
7
7
|
|
|
8
8
|
declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
|
|
9
9
|
get renderer(): RendererType;
|
package/dist/svg.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
|
|
2
2
|
export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
|
|
3
|
-
import
|
|
4
|
-
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-
|
|
5
|
-
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-
|
|
3
|
+
import { loadAnimation } from '@aarsteinmedia/lottie-web/svg';
|
|
4
|
+
import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
5
|
+
export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
|
|
6
6
|
import '@aarsteinmedia/lottie-web/dotlottie';
|
|
7
7
|
|
|
8
8
|
/**
|
|
@@ -16,7 +16,7 @@ import '@aarsteinmedia/lottie-web/dotlottie';
|
|
|
16
16
|
this.isLight = true;
|
|
17
17
|
}
|
|
18
18
|
loadAnimation(config) {
|
|
19
|
-
return
|
|
19
|
+
return loadAnimation(config);
|
|
20
20
|
}
|
|
21
21
|
setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
|
|
22
22
|
const options = {
|