@aarsteinmedia/dotlottie-player 3.2.1 → 3.2.3
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 +119 -0
- package/dist/cjs/index.js +367 -358
- package/dist/custom-elements.json +982 -911
- package/dist/esm/index.js +301 -295
- package/dist/index.d.ts +61 -52
- package/dist/index.js +148 -180
- package/package.json +19 -14
- 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,16 @@ 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
|
class CustomError extends Error {
|
|
57
58
|
}
|
|
58
59
|
const addExt = (ext, str)=>{
|
|
@@ -68,19 +69,19 @@ const addExt = (ext, str)=>{
|
|
|
68
69
|
return `${str}.${ext}`;
|
|
69
70
|
}, aspectRatio = (objectFit)=>{
|
|
70
71
|
switch(objectFit){
|
|
71
|
-
case
|
|
72
|
-
case
|
|
72
|
+
case ObjectFit.Contain:
|
|
73
|
+
case ObjectFit.ScaleDown:
|
|
73
74
|
return 'xMidYMid meet';
|
|
74
|
-
case
|
|
75
|
+
case ObjectFit.Cover:
|
|
75
76
|
return 'xMidYMid slice';
|
|
76
|
-
case
|
|
77
|
+
case ObjectFit.Fill:
|
|
77
78
|
return 'none';
|
|
78
|
-
case
|
|
79
|
+
case ObjectFit.None:
|
|
79
80
|
return 'xMinYMin slice';
|
|
80
81
|
default:
|
|
81
82
|
return 'xMidYMid meet';
|
|
82
83
|
}
|
|
83
|
-
}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations,
|
|
84
|
+
}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, fileName, manifest, shouldDownload = true })=>{
|
|
84
85
|
try {
|
|
85
86
|
if (!animations?.length || !manifest) {
|
|
86
87
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
@@ -118,8 +119,8 @@ const addExt = (ext, str)=>{
|
|
|
118
119
|
}
|
|
119
120
|
const buffer = await getArrayBuffer(dotlottie);
|
|
120
121
|
return shouldDownload ? download(buffer, {
|
|
121
|
-
|
|
122
|
-
|
|
122
|
+
mimeType: 'application/zip',
|
|
123
|
+
name
|
|
123
124
|
}) : buffer;
|
|
124
125
|
} catch (err) {
|
|
125
126
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
@@ -131,8 +132,8 @@ const addExt = (ext, str)=>{
|
|
|
131
132
|
}
|
|
132
133
|
const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation);
|
|
133
134
|
return shouldDownload ? download(jsonString, {
|
|
134
|
-
|
|
135
|
-
|
|
135
|
+
mimeType: 'application/json',
|
|
136
|
+
name
|
|
136
137
|
}) : jsonString;
|
|
137
138
|
} catch (err) {
|
|
138
139
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
@@ -180,8 +181,8 @@ const addExt = (ext, str)=>{
|
|
|
180
181
|
];
|
|
181
182
|
return {
|
|
182
183
|
animations,
|
|
183
|
-
|
|
184
|
-
|
|
184
|
+
isDotLottie: false,
|
|
185
|
+
manifest: undefined
|
|
185
186
|
};
|
|
186
187
|
}
|
|
187
188
|
const result = await fetch(input, {
|
|
@@ -202,8 +203,8 @@ const addExt = (ext, str)=>{
|
|
|
202
203
|
animations: [
|
|
203
204
|
lottie
|
|
204
205
|
],
|
|
205
|
-
|
|
206
|
-
|
|
206
|
+
isDotLottie: false,
|
|
207
|
+
manifest: undefined
|
|
207
208
|
};
|
|
208
209
|
}
|
|
209
210
|
const text = await result.clone().text();
|
|
@@ -213,8 +214,8 @@ const addExt = (ext, str)=>{
|
|
|
213
214
|
animations: [
|
|
214
215
|
lottie
|
|
215
216
|
],
|
|
216
|
-
|
|
217
|
-
|
|
217
|
+
isDotLottie: false,
|
|
218
|
+
manifest: undefined
|
|
218
219
|
};
|
|
219
220
|
} catch (e) {
|
|
220
221
|
console.warn(e);
|
|
@@ -223,15 +224,15 @@ const addExt = (ext, str)=>{
|
|
|
223
224
|
const { data, manifest } = await getLottieJSON(result);
|
|
224
225
|
return {
|
|
225
226
|
animations: data,
|
|
226
|
-
|
|
227
|
-
|
|
227
|
+
isDotLottie: true,
|
|
228
|
+
manifest
|
|
228
229
|
};
|
|
229
230
|
} catch (err) {
|
|
230
231
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
231
232
|
return {
|
|
232
233
|
animations: undefined,
|
|
233
|
-
|
|
234
|
-
|
|
234
|
+
isDotLottie: false,
|
|
235
|
+
manifest: undefined
|
|
235
236
|
};
|
|
236
237
|
}
|
|
237
238
|
}, getArrayBuffer = async (zippable)=>{
|
|
@@ -363,7 +364,234 @@ const addExt = (ext, str)=>{
|
|
|
363
364
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
364
365
|
};
|
|
365
366
|
|
|
366
|
-
|
|
367
|
+
function renderPlayer() {
|
|
368
|
+
this.template.innerHTML = `
|
|
369
|
+
<figure
|
|
370
|
+
class="animation-container main"
|
|
371
|
+
data-controls="${this.controls ?? false}"
|
|
372
|
+
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
373
|
+
role="img"
|
|
374
|
+
aria-label="${this.description ?? 'Lottie animation'}"
|
|
375
|
+
data-loaded="${this._playerState.loaded}"
|
|
376
|
+
>
|
|
377
|
+
<div class="animation" style="background:${this.background}">
|
|
378
|
+
${this.playerState === PlayerState.Error ? ` <div class="error">
|
|
379
|
+
<svg
|
|
380
|
+
preserveAspectRatio="xMidYMid slice"
|
|
381
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
382
|
+
xml:space="preserve"
|
|
383
|
+
width="1920"
|
|
384
|
+
height="1080"
|
|
385
|
+
viewBox="0 0 1920 1080"
|
|
386
|
+
>
|
|
387
|
+
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
388
|
+
<path
|
|
389
|
+
fill="#3a6d8b"
|
|
390
|
+
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"
|
|
391
|
+
/>
|
|
392
|
+
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
393
|
+
<text
|
|
394
|
+
fill="#3a6d8b"
|
|
395
|
+
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
396
|
+
x="50%"
|
|
397
|
+
y="848.017"
|
|
398
|
+
text-anchor="middle"
|
|
399
|
+
>
|
|
400
|
+
${this._errorMessage}
|
|
401
|
+
</text>
|
|
402
|
+
</svg>
|
|
403
|
+
</div>` : ''}
|
|
404
|
+
</div>
|
|
405
|
+
<slot name="controls"></slot>
|
|
406
|
+
</figure>
|
|
407
|
+
`;
|
|
408
|
+
this.shadow.adoptedStyleSheets = [
|
|
409
|
+
DotLottiePlayer.styles
|
|
410
|
+
];
|
|
411
|
+
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
412
|
+
}
|
|
413
|
+
|
|
414
|
+
function renderControls() {
|
|
415
|
+
if (!this.controls) {
|
|
416
|
+
return;
|
|
417
|
+
}
|
|
418
|
+
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
419
|
+
if (!slot) {
|
|
420
|
+
return;
|
|
421
|
+
}
|
|
422
|
+
slot.innerHTML = `
|
|
423
|
+
<div
|
|
424
|
+
class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
|
|
425
|
+
aria-label="Lottie Animation controls"
|
|
426
|
+
>
|
|
427
|
+
<button
|
|
428
|
+
class="togglePlay"
|
|
429
|
+
data-active="false"
|
|
430
|
+
tabindex="0"
|
|
431
|
+
aria-label="Toggle Play/Pause"
|
|
432
|
+
>
|
|
433
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
434
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
435
|
+
</svg>
|
|
436
|
+
</button>
|
|
437
|
+
|
|
438
|
+
<button class="stop" data-active="true" tabindex="0" aria-label="Stop">
|
|
439
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
440
|
+
<path d="M6 6h12v12H6V6z" />
|
|
441
|
+
</svg>
|
|
442
|
+
</button>
|
|
443
|
+
<button class="prev" tabindex="0" aria-label="Previous animation" hidden>
|
|
444
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
445
|
+
<path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z" />
|
|
446
|
+
</svg>
|
|
447
|
+
</button>
|
|
448
|
+
<button class="next" tabindex="0" aria-label="Next animation" hidden>
|
|
449
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
450
|
+
<path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z" />
|
|
451
|
+
</svg>
|
|
452
|
+
</button>
|
|
453
|
+
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
454
|
+
<input
|
|
455
|
+
class="seeker"
|
|
456
|
+
type="range"
|
|
457
|
+
min="0"
|
|
458
|
+
max="100"
|
|
459
|
+
step="1"
|
|
460
|
+
value="${this._seeker.toString()}"
|
|
461
|
+
aria-valuemin="0"
|
|
462
|
+
aria-valuemax="100"
|
|
463
|
+
role="slider"
|
|
464
|
+
aria-valuenow="${this._seeker.toString()}"
|
|
465
|
+
tabindex="0"
|
|
466
|
+
aria-label="Slider for search"
|
|
467
|
+
/>
|
|
468
|
+
<progress max="100" value="${this._seeker}"></progress>
|
|
469
|
+
</form>
|
|
470
|
+
${this.simple ? '' : ` <button
|
|
471
|
+
class="toggleLoop"
|
|
472
|
+
data-active="${this.loop}"
|
|
473
|
+
tabindex="0"
|
|
474
|
+
aria-label="Toggle loop"
|
|
475
|
+
>
|
|
476
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
477
|
+
<path
|
|
478
|
+
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
479
|
+
/>
|
|
480
|
+
</svg>
|
|
481
|
+
</button>
|
|
482
|
+
<button
|
|
483
|
+
class="toggleBoomerang"
|
|
484
|
+
data-active="${this.mode === PlayMode.Bounce}"
|
|
485
|
+
aria-label="Toggle boomerang"
|
|
486
|
+
tabindex="0"
|
|
487
|
+
>
|
|
488
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
489
|
+
<path
|
|
490
|
+
d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
|
|
491
|
+
/>
|
|
492
|
+
</svg>
|
|
493
|
+
</button>
|
|
494
|
+
<button
|
|
495
|
+
class="toggleSettings"
|
|
496
|
+
aria-label="Settings"
|
|
497
|
+
aria-haspopup="true"
|
|
498
|
+
aria-expanded="${!!this._isSettingsOpen}"
|
|
499
|
+
aria-controls="${this._identifier}-settings"
|
|
500
|
+
>
|
|
501
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
502
|
+
<circle cx="12" cy="5.4" r="2.5" />
|
|
503
|
+
<circle cx="12" cy="12" r="2.5" />
|
|
504
|
+
<circle cx="12" cy="18.6" r="2.5" />
|
|
505
|
+
</svg>
|
|
506
|
+
</button>
|
|
507
|
+
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
508
|
+
<button
|
|
509
|
+
class="convert"
|
|
510
|
+
aria-label="Convert JSON animation to dotLottie format"
|
|
511
|
+
tabindex="0"
|
|
512
|
+
hidden
|
|
513
|
+
>
|
|
514
|
+
<svg
|
|
515
|
+
width="24"
|
|
516
|
+
height="24"
|
|
517
|
+
aria-hidden="true"
|
|
518
|
+
focusable="false"
|
|
519
|
+
>
|
|
520
|
+
<path
|
|
521
|
+
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
522
|
+
/>
|
|
523
|
+
</svg>
|
|
524
|
+
Convert to dotLottie
|
|
525
|
+
</button>
|
|
526
|
+
<button
|
|
527
|
+
class="snapshot"
|
|
528
|
+
aria-label="Download still image"
|
|
529
|
+
tabindex="0"
|
|
530
|
+
>
|
|
531
|
+
<svg
|
|
532
|
+
width="24"
|
|
533
|
+
height="24"
|
|
534
|
+
aria-hidden="true"
|
|
535
|
+
focusable="false"
|
|
536
|
+
>
|
|
537
|
+
<path
|
|
538
|
+
d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
|
|
539
|
+
/>
|
|
540
|
+
</svg>
|
|
541
|
+
Download still image
|
|
542
|
+
</button>
|
|
543
|
+
</div>`}
|
|
544
|
+
</div>
|
|
545
|
+
`;
|
|
546
|
+
const togglePlay = this.shadow.querySelector('.togglePlay');
|
|
547
|
+
if (togglePlay instanceof HTMLButtonElement) {
|
|
548
|
+
togglePlay.onclick = this.togglePlay;
|
|
549
|
+
}
|
|
550
|
+
const stop = this.shadow.querySelector('.stop');
|
|
551
|
+
if (stop instanceof HTMLButtonElement) {
|
|
552
|
+
stop.onclick = this.stop;
|
|
553
|
+
}
|
|
554
|
+
const prev = this.shadow.querySelector('.prev');
|
|
555
|
+
if (prev instanceof HTMLButtonElement) {
|
|
556
|
+
prev.onclick = this.prev;
|
|
557
|
+
}
|
|
558
|
+
const next = this.shadow.querySelector('.next');
|
|
559
|
+
if (next instanceof HTMLButtonElement) {
|
|
560
|
+
next.onclick = this.next;
|
|
561
|
+
}
|
|
562
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
563
|
+
if (seeker instanceof HTMLInputElement) {
|
|
564
|
+
seeker.onchange = this._handleSeekChange;
|
|
565
|
+
seeker.onmousedown = this._freeze;
|
|
566
|
+
}
|
|
567
|
+
if (!this.simple) {
|
|
568
|
+
const toggleLoop = this.shadow.querySelector('.toggleLoop');
|
|
569
|
+
if (toggleLoop instanceof HTMLButtonElement) {
|
|
570
|
+
toggleLoop.onclick = this.toggleLoop;
|
|
571
|
+
}
|
|
572
|
+
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
573
|
+
if (toggleBoomerang instanceof HTMLButtonElement) {
|
|
574
|
+
toggleBoomerang.onclick = this.toggleBoomerang;
|
|
575
|
+
}
|
|
576
|
+
const convert = this.shadow.querySelector('.convert');
|
|
577
|
+
if (convert instanceof HTMLButtonElement) {
|
|
578
|
+
convert.onclick = this.convert;
|
|
579
|
+
}
|
|
580
|
+
const snapshot = this.shadow.querySelector('.snapshot');
|
|
581
|
+
if (snapshot instanceof HTMLButtonElement) {
|
|
582
|
+
snapshot.onclick = this.snapshot;
|
|
583
|
+
}
|
|
584
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
585
|
+
if (toggleSettings instanceof HTMLButtonElement) {
|
|
586
|
+
toggleSettings.onclick = this._handleSettingsClick;
|
|
587
|
+
toggleSettings.onblur = this._handleBlur;
|
|
588
|
+
}
|
|
589
|
+
}
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.2.3";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","lint:fix":"eslint"};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.0","@eslint/eslintrc":"^3.1.0","@eslint/js":"^9.12.0","@rollup/plugin-commonjs":"^28.0.0","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.3.0","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.35","@types/node":"^22.7.5","@typescript-eslint/eslint-plugin":"^8.8.1","@typescript-eslint/parser":"^8.8.1",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^9.12.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.8.0","eslint-plugin-prettier":"^5.2.1",globals:"^15.11.0","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.11.2",sass:"^1.79.5",tslib:"^2.7.0",typescript:"^5.6.3"};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};
|
|
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: 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}";
|
|
367
595
|
|
|
368
596
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
369
597
|
if (isServer()) {
|
|
@@ -415,20 +643,18 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
415
643
|
}
|
|
416
644
|
};
|
|
417
645
|
|
|
418
|
-
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}";
|
|
419
|
-
|
|
420
646
|
class DotLottiePlayer extends EnhancedElement {
|
|
421
647
|
async connectedCallback() {
|
|
422
648
|
super.connectedCallback();
|
|
423
|
-
this.
|
|
649
|
+
this._render();
|
|
424
650
|
this._container = this.shadow.querySelector('.animation');
|
|
425
|
-
this.
|
|
651
|
+
this._renderControls();
|
|
426
652
|
if (typeof document.hidden !== 'undefined') {
|
|
427
653
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
428
654
|
}
|
|
429
655
|
this._addIntersectionObserver();
|
|
430
656
|
await this.load(this.src);
|
|
431
|
-
this.dispatchEvent(new CustomEvent(
|
|
657
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
|
|
432
658
|
}
|
|
433
659
|
disconnectedCallback() {
|
|
434
660
|
if (this._intersectionObserver) {
|
|
@@ -461,8 +687,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
461
687
|
if (value === '' || Boolean(value)) {
|
|
462
688
|
this._lottieInstance.autoplay = false;
|
|
463
689
|
addEventListener('scroll', this._handleScroll, {
|
|
464
|
-
|
|
465
|
-
|
|
690
|
+
capture: true,
|
|
691
|
+
passive: true
|
|
466
692
|
});
|
|
467
693
|
return;
|
|
468
694
|
}
|
|
@@ -479,7 +705,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
479
705
|
this.stop();
|
|
480
706
|
}
|
|
481
707
|
if (name === 'controls') {
|
|
482
|
-
this.
|
|
708
|
+
this._renderControls();
|
|
483
709
|
}
|
|
484
710
|
if (name === 'direction') {
|
|
485
711
|
if (Number(value) === -1) {
|
|
@@ -506,9 +732,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
506
732
|
if (name === 'mode') {
|
|
507
733
|
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
508
734
|
if (toggleBoomerang instanceof HTMLButtonElement) {
|
|
509
|
-
toggleBoomerang.dataset.active = (value ===
|
|
735
|
+
toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
|
|
510
736
|
}
|
|
511
|
-
this._isBounce = value ===
|
|
737
|
+
this._isBounce = value === PlayMode.Bounce;
|
|
512
738
|
}
|
|
513
739
|
if (name === 'speed') {
|
|
514
740
|
const val = Number(value);
|
|
@@ -538,12 +764,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
538
764
|
return;
|
|
539
765
|
}
|
|
540
766
|
if (name === 'playerState') {
|
|
541
|
-
togglePlay.dataset.active = (value ===
|
|
542
|
-
stop.dataset.active = (value ===
|
|
543
|
-
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) {
|
|
544
770
|
togglePlay.innerHTML = `
|
|
545
771
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
546
|
-
<path
|
|
772
|
+
<path
|
|
773
|
+
d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
|
|
774
|
+
/>
|
|
547
775
|
</svg>
|
|
548
776
|
`;
|
|
549
777
|
} else {
|
|
@@ -678,10 +906,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
678
906
|
}
|
|
679
907
|
get mode() {
|
|
680
908
|
const val = this.getAttribute('mode');
|
|
681
|
-
if (val ===
|
|
909
|
+
if (val === PlayMode.Bounce) {
|
|
682
910
|
return val;
|
|
683
911
|
}
|
|
684
|
-
return
|
|
912
|
+
return PlayMode.Normal;
|
|
685
913
|
}
|
|
686
914
|
set multiAnimationSettings(value) {
|
|
687
915
|
this.setAttribute('multiAnimationSettings', JSON.stringify(value));
|
|
@@ -802,11 +1030,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
802
1030
|
initialSegment = undefined;
|
|
803
1031
|
}
|
|
804
1032
|
const options = {
|
|
1033
|
+
autoplay,
|
|
805
1034
|
container: this._container,
|
|
1035
|
+
initialSegment,
|
|
806
1036
|
loop,
|
|
807
|
-
autoplay,
|
|
808
1037
|
renderer: this.renderer,
|
|
809
|
-
initialSegment,
|
|
810
1038
|
rendererSettings: {
|
|
811
1039
|
imagePreserveAspectRatio: preserveAspectRatio
|
|
812
1040
|
}
|
|
@@ -843,13 +1071,13 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
843
1071
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
844
1072
|
for (const entry of entries){
|
|
845
1073
|
if (!entry.isIntersecting || document.hidden) {
|
|
846
|
-
if (this.playerState ===
|
|
1074
|
+
if (this.playerState === PlayerState.Playing) {
|
|
847
1075
|
this._freeze();
|
|
848
1076
|
}
|
|
849
1077
|
this._playerState.visible = false;
|
|
850
1078
|
continue;
|
|
851
1079
|
}
|
|
852
|
-
if (!this.animateOnScroll && this.playerState ===
|
|
1080
|
+
if (!this.animateOnScroll && this.playerState === PlayerState.Frozen) {
|
|
853
1081
|
this.play();
|
|
854
1082
|
}
|
|
855
1083
|
if (!this._playerState.scrollY) {
|
|
@@ -865,14 +1093,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
865
1093
|
return;
|
|
866
1094
|
}
|
|
867
1095
|
try {
|
|
868
|
-
const { animations,
|
|
1096
|
+
const { animations, isDotLottie, manifest } = await getAnimationData(src);
|
|
869
1097
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
870
1098
|
throw new Error('Broken or corrupted file');
|
|
871
1099
|
}
|
|
872
|
-
this._isBounce = this.mode ===
|
|
1100
|
+
this._isBounce = this.mode === PlayMode.Bounce;
|
|
873
1101
|
if (this.multiAnimationSettings?.length) {
|
|
874
1102
|
if (this.multiAnimationSettings[this._currentAnimation]?.mode) {
|
|
875
|
-
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode ===
|
|
1103
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
876
1104
|
}
|
|
877
1105
|
}
|
|
878
1106
|
this._isDotLottie = !!isDotLottie;
|
|
@@ -880,10 +1108,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
880
1108
|
this._manifest = manifest ?? {
|
|
881
1109
|
animations: [
|
|
882
1110
|
{
|
|
883
|
-
id: useId(),
|
|
884
1111
|
autoplay: !this.animateOnScroll && this.autoplay,
|
|
885
|
-
loop: this.loop,
|
|
886
1112
|
direction: this.direction,
|
|
1113
|
+
id: useId(),
|
|
1114
|
+
loop: this.loop,
|
|
887
1115
|
mode: this.mode,
|
|
888
1116
|
speed: this.speed
|
|
889
1117
|
}
|
|
@@ -892,9 +1120,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
892
1120
|
if (this._lottieInstance) {
|
|
893
1121
|
this._lottieInstance.destroy();
|
|
894
1122
|
}
|
|
895
|
-
this.playerState =
|
|
1123
|
+
this.playerState = PlayerState.Stopped;
|
|
896
1124
|
if (!this.animateOnScroll && (this.autoplay || this.multiAnimationSettings?.[this._currentAnimation]?.autoplay)) {
|
|
897
|
-
this.playerState =
|
|
1125
|
+
this.playerState = PlayerState.Playing;
|
|
898
1126
|
}
|
|
899
1127
|
this._lottieInstance = Lottie.loadAnimation({
|
|
900
1128
|
...this._getOptions(),
|
|
@@ -902,8 +1130,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
902
1130
|
});
|
|
903
1131
|
} catch (err) {
|
|
904
1132
|
this._errorMessage = handleErrors(err).message;
|
|
905
|
-
this.playerState =
|
|
906
|
-
this.dispatchEvent(new CustomEvent(
|
|
1133
|
+
this.playerState = PlayerState.Error;
|
|
1134
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
907
1135
|
return;
|
|
908
1136
|
}
|
|
909
1137
|
this._addEventListeners();
|
|
@@ -929,20 +1157,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
929
1157
|
}
|
|
930
1158
|
_toggleEventListeners(action) {
|
|
931
1159
|
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
932
|
-
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
933
|
-
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
934
|
-
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
935
|
-
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
936
|
-
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
937
|
-
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
938
|
-
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
939
|
-
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
940
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
941
|
-
seeker?.[method]('change', this._handleSeekChange);
|
|
942
|
-
seeker?.[method]('mousedown', this._freeze);
|
|
943
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
944
|
-
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
945
|
-
toggleSettings?.[method]('blur', this._handleBlur);
|
|
946
1160
|
if (this._lottieInstance) {
|
|
947
1161
|
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
948
1162
|
this._lottieInstance[method]('complete', this._complete);
|
|
@@ -956,17 +1170,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
956
1170
|
this._container[method]('mouseleave', this._mouseLeave);
|
|
957
1171
|
}
|
|
958
1172
|
window[method]('focus', this._handleWindowBlur, {
|
|
959
|
-
|
|
960
|
-
|
|
1173
|
+
capture: false,
|
|
1174
|
+
passive: true
|
|
961
1175
|
});
|
|
962
1176
|
window[method]('blur', this._handleWindowBlur, {
|
|
963
|
-
|
|
964
|
-
|
|
1177
|
+
capture: false,
|
|
1178
|
+
passive: true
|
|
965
1179
|
});
|
|
966
1180
|
if (this.animateOnScroll) {
|
|
967
1181
|
window[method]('scroll', this._handleScroll, {
|
|
968
|
-
|
|
969
|
-
|
|
1182
|
+
capture: true,
|
|
1183
|
+
passive: true
|
|
970
1184
|
});
|
|
971
1185
|
}
|
|
972
1186
|
}
|
|
@@ -980,7 +1194,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
980
1194
|
if (!this._lottieInstance) {
|
|
981
1195
|
return;
|
|
982
1196
|
}
|
|
983
|
-
const {
|
|
1197
|
+
const { playDirection, totalFrames } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
|
|
984
1198
|
if (this.count) {
|
|
985
1199
|
if (this._isBounce) {
|
|
986
1200
|
this._playerState.count += 0.5;
|
|
@@ -989,12 +1203,12 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
989
1203
|
}
|
|
990
1204
|
if (this._playerState.count >= this.count) {
|
|
991
1205
|
this.setLoop(false);
|
|
992
|
-
this.playerState =
|
|
993
|
-
this.dispatchEvent(new CustomEvent(
|
|
1206
|
+
this.playerState = PlayerState.Completed;
|
|
1207
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
994
1208
|
return;
|
|
995
1209
|
}
|
|
996
1210
|
}
|
|
997
|
-
this.dispatchEvent(new CustomEvent(
|
|
1211
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
998
1212
|
if (this._isBounce) {
|
|
999
1213
|
this._lottieInstance.goToAndStop(playDirection === -1 ? inPoint : outPoint * 0.99, true);
|
|
1000
1214
|
this._lottieInstance.setDirection(playDirection * -1);
|
|
@@ -1017,7 +1231,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1017
1231
|
}
|
|
1018
1232
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
1019
1233
|
this._seeker = Math.round(currentFrame / totalFrames * 100);
|
|
1020
|
-
this.dispatchEvent(new CustomEvent(
|
|
1234
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
1021
1235
|
detail: {
|
|
1022
1236
|
frame: currentFrame,
|
|
1023
1237
|
seeker: this._seeker
|
|
@@ -1039,8 +1253,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1039
1253
|
}
|
|
1040
1254
|
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
1041
1255
|
this._seeker = Math.round(currentFrame / totalFrames * 100);
|
|
1042
|
-
this.playerState =
|
|
1043
|
-
this.dispatchEvent(new CustomEvent(
|
|
1256
|
+
this.playerState = PlayerState.Completed;
|
|
1257
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
|
|
1044
1258
|
detail: {
|
|
1045
1259
|
frame: currentFrame,
|
|
1046
1260
|
seeker: this._seeker
|
|
@@ -1049,39 +1263,39 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1049
1263
|
}
|
|
1050
1264
|
_DOMLoaded() {
|
|
1051
1265
|
this._playerState.loaded = true;
|
|
1052
|
-
this.dispatchEvent(new CustomEvent(
|
|
1266
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
1053
1267
|
}
|
|
1054
1268
|
_dataReady() {
|
|
1055
|
-
this.dispatchEvent(new CustomEvent(
|
|
1269
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
1056
1270
|
}
|
|
1057
1271
|
_dataFailed() {
|
|
1058
|
-
this.playerState =
|
|
1059
|
-
this.dispatchEvent(new CustomEvent(
|
|
1272
|
+
this.playerState = PlayerState.Error;
|
|
1273
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
1060
1274
|
}
|
|
1061
1275
|
_handleWindowBlur({ type }) {
|
|
1062
|
-
if (this.playerState ===
|
|
1276
|
+
if (this.playerState === PlayerState.Playing && type === 'blur') {
|
|
1063
1277
|
this._freeze();
|
|
1064
1278
|
}
|
|
1065
|
-
if (this.playerState ===
|
|
1279
|
+
if (this.playerState === PlayerState.Frozen && type === 'focus') {
|
|
1066
1280
|
this.play();
|
|
1067
1281
|
}
|
|
1068
1282
|
}
|
|
1069
1283
|
_mouseEnter() {
|
|
1070
|
-
if (this.hover && this.playerState !==
|
|
1284
|
+
if (this.hover && this.playerState !== PlayerState.Playing) {
|
|
1071
1285
|
this.play();
|
|
1072
1286
|
}
|
|
1073
1287
|
}
|
|
1074
1288
|
_mouseLeave() {
|
|
1075
|
-
if (this.hover && this.playerState ===
|
|
1289
|
+
if (this.hover && this.playerState === PlayerState.Playing) {
|
|
1076
1290
|
this.stop();
|
|
1077
1291
|
}
|
|
1078
1292
|
}
|
|
1079
1293
|
_onVisibilityChange() {
|
|
1080
|
-
if (document.hidden && this.playerState ===
|
|
1294
|
+
if (document.hidden && this.playerState === PlayerState.Playing) {
|
|
1081
1295
|
this._freeze();
|
|
1082
1296
|
return;
|
|
1083
1297
|
}
|
|
1084
|
-
if (this.playerState ===
|
|
1298
|
+
if (this.playerState === PlayerState.Frozen) {
|
|
1085
1299
|
this.play();
|
|
1086
1300
|
}
|
|
1087
1301
|
}
|
|
@@ -1098,15 +1312,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1098
1312
|
clearTimeout(this._playerState.scrollTimeout);
|
|
1099
1313
|
}
|
|
1100
1314
|
this._playerState.scrollTimeout = setTimeout(()=>{
|
|
1101
|
-
this.playerState =
|
|
1315
|
+
this.playerState = PlayerState.Paused;
|
|
1102
1316
|
}, 400);
|
|
1103
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;
|
|
1104
1318
|
requestAnimationFrame(()=>{
|
|
1105
1319
|
if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
|
|
1106
|
-
this.playerState =
|
|
1320
|
+
this.playerState = PlayerState.Playing;
|
|
1107
1321
|
this._lottieInstance?.goToAndStop(roundedScroll, true);
|
|
1108
1322
|
} else {
|
|
1109
|
-
this.playerState =
|
|
1323
|
+
this.playerState = PlayerState.Paused;
|
|
1110
1324
|
}
|
|
1111
1325
|
});
|
|
1112
1326
|
}
|
|
@@ -1156,18 +1370,18 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1156
1370
|
animations?.push(...animationsToAdd);
|
|
1157
1371
|
}
|
|
1158
1372
|
return {
|
|
1159
|
-
success: true,
|
|
1160
1373
|
result: await createDotLottie({
|
|
1161
1374
|
animations,
|
|
1162
|
-
manifest,
|
|
1163
1375
|
fileName,
|
|
1376
|
+
manifest,
|
|
1164
1377
|
shouldDownload
|
|
1165
|
-
})
|
|
1378
|
+
}),
|
|
1379
|
+
success: true
|
|
1166
1380
|
};
|
|
1167
1381
|
} catch (err) {
|
|
1168
1382
|
return {
|
|
1169
|
-
|
|
1170
|
-
|
|
1383
|
+
error: handleErrors(err).message,
|
|
1384
|
+
success: false
|
|
1171
1385
|
};
|
|
1172
1386
|
}
|
|
1173
1387
|
}
|
|
@@ -1183,9 +1397,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1183
1397
|
}
|
|
1184
1398
|
try {
|
|
1185
1399
|
this._lottieInstance.play();
|
|
1186
|
-
this.dispatchEvent(new CustomEvent(
|
|
1400
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
|
|
1187
1401
|
} finally{
|
|
1188
|
-
this.playerState =
|
|
1402
|
+
this.playerState = PlayerState.Playing;
|
|
1189
1403
|
}
|
|
1190
1404
|
}
|
|
1191
1405
|
pause() {
|
|
@@ -1197,9 +1411,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1197
1411
|
}
|
|
1198
1412
|
try {
|
|
1199
1413
|
this._lottieInstance.pause();
|
|
1200
|
-
this.dispatchEvent(new CustomEvent(
|
|
1414
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
|
|
1201
1415
|
} finally{
|
|
1202
|
-
this.playerState =
|
|
1416
|
+
this.playerState = PlayerState.Paused;
|
|
1203
1417
|
}
|
|
1204
1418
|
}
|
|
1205
1419
|
stop() {
|
|
@@ -1212,19 +1426,19 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1212
1426
|
this._playerState.count = 0;
|
|
1213
1427
|
try {
|
|
1214
1428
|
this._lottieInstance.stop();
|
|
1215
|
-
this.dispatchEvent(new CustomEvent(
|
|
1429
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
|
|
1216
1430
|
} finally{
|
|
1217
|
-
this.playerState =
|
|
1431
|
+
this.playerState = PlayerState.Stopped;
|
|
1218
1432
|
}
|
|
1219
1433
|
}
|
|
1220
1434
|
destroy() {
|
|
1221
1435
|
if (!this._lottieInstance) {
|
|
1222
1436
|
return;
|
|
1223
1437
|
}
|
|
1224
|
-
this.playerState =
|
|
1438
|
+
this.playerState = PlayerState.Destroyed;
|
|
1225
1439
|
this._lottieInstance.destroy();
|
|
1226
1440
|
this._lottieInstance = null;
|
|
1227
|
-
this.dispatchEvent(new CustomEvent(
|
|
1441
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
1228
1442
|
this.remove();
|
|
1229
1443
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
1230
1444
|
}
|
|
@@ -1238,9 +1452,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1238
1452
|
}
|
|
1239
1453
|
const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
|
|
1240
1454
|
this._seeker = frame;
|
|
1241
|
-
if (this.playerState ===
|
|
1455
|
+
if (this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
1242
1456
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
1243
|
-
this.playerState =
|
|
1457
|
+
this.playerState = PlayerState.Playing;
|
|
1244
1458
|
return;
|
|
1245
1459
|
}
|
|
1246
1460
|
this._lottieInstance.goToAndStop(frame, true);
|
|
@@ -1256,8 +1470,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1256
1470
|
return;
|
|
1257
1471
|
}
|
|
1258
1472
|
download(data, {
|
|
1259
|
-
|
|
1260
|
-
|
|
1473
|
+
mimeType: 'image/svg+xml',
|
|
1474
|
+
name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`
|
|
1261
1475
|
});
|
|
1262
1476
|
return data;
|
|
1263
1477
|
}
|
|
@@ -1282,9 +1496,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1282
1496
|
}
|
|
1283
1497
|
try {
|
|
1284
1498
|
this._lottieInstance.pause();
|
|
1285
|
-
this.dispatchEvent(new CustomEvent(
|
|
1499
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
|
|
1286
1500
|
} finally{
|
|
1287
|
-
this.playerState =
|
|
1501
|
+
this.playerState = PlayerState.Frozen;
|
|
1288
1502
|
}
|
|
1289
1503
|
}
|
|
1290
1504
|
async reload() {
|
|
@@ -1323,13 +1537,13 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1323
1537
|
return;
|
|
1324
1538
|
}
|
|
1325
1539
|
const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
|
|
1326
|
-
if (this.playerState ===
|
|
1540
|
+
if (this.playerState === PlayerState.Playing) {
|
|
1327
1541
|
return this.pause();
|
|
1328
1542
|
}
|
|
1329
|
-
if (this.playerState !==
|
|
1543
|
+
if (this.playerState !== PlayerState.Completed) {
|
|
1330
1544
|
return this.play();
|
|
1331
1545
|
}
|
|
1332
|
-
this.playerState =
|
|
1546
|
+
this.playerState = PlayerState.Playing;
|
|
1333
1547
|
if (this._isBounce) {
|
|
1334
1548
|
this.setDirection(playDirection * -1);
|
|
1335
1549
|
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
@@ -1340,26 +1554,28 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1340
1554
|
return this._lottieInstance.goToAndPlay(0, true);
|
|
1341
1555
|
}
|
|
1342
1556
|
toggleLoop() {
|
|
1343
|
-
|
|
1557
|
+
const val = !this.loop;
|
|
1558
|
+
this.loop = val;
|
|
1559
|
+
this.setLoop(val);
|
|
1344
1560
|
}
|
|
1345
1561
|
toggleBoomerang() {
|
|
1346
1562
|
const curr = this.multiAnimationSettings?.[this._currentAnimation];
|
|
1347
1563
|
if (curr?.mode !== undefined) {
|
|
1348
|
-
if (curr.mode ===
|
|
1349
|
-
curr.mode =
|
|
1564
|
+
if (curr.mode === PlayMode.Normal) {
|
|
1565
|
+
curr.mode = PlayMode.Bounce;
|
|
1350
1566
|
this._isBounce = true;
|
|
1351
1567
|
return;
|
|
1352
1568
|
}
|
|
1353
|
-
curr.mode =
|
|
1569
|
+
curr.mode = PlayMode.Normal;
|
|
1354
1570
|
this._isBounce = false;
|
|
1355
1571
|
return;
|
|
1356
1572
|
}
|
|
1357
|
-
if (this.mode ===
|
|
1358
|
-
this.mode =
|
|
1573
|
+
if (this.mode === PlayMode.Normal) {
|
|
1574
|
+
this.mode = PlayMode.Bounce;
|
|
1359
1575
|
this._isBounce = true;
|
|
1360
1576
|
return;
|
|
1361
1577
|
}
|
|
1362
|
-
this.mode =
|
|
1578
|
+
this.mode = PlayMode.Normal;
|
|
1363
1579
|
this._isBounce = false;
|
|
1364
1580
|
}
|
|
1365
1581
|
_toggleSettings(flag) {
|
|
@@ -1385,27 +1601,27 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1385
1601
|
animationData: this._animations[this._currentAnimation]
|
|
1386
1602
|
});
|
|
1387
1603
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) {
|
|
1388
|
-
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode ===
|
|
1604
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
1389
1605
|
}
|
|
1390
1606
|
this._removeEventListeners();
|
|
1391
1607
|
this._addEventListeners();
|
|
1392
|
-
this.dispatchEvent(new CustomEvent(isPrevious ?
|
|
1608
|
+
this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
|
|
1393
1609
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
1394
1610
|
if (this.animateOnScroll) {
|
|
1395
1611
|
this._lottieInstance?.goToAndStop(0, true);
|
|
1396
|
-
this.playerState =
|
|
1612
|
+
this.playerState = PlayerState.Paused;
|
|
1397
1613
|
return;
|
|
1398
1614
|
}
|
|
1399
1615
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
1400
|
-
this.playerState =
|
|
1616
|
+
this.playerState = PlayerState.Playing;
|
|
1401
1617
|
return;
|
|
1402
1618
|
}
|
|
1403
1619
|
this._lottieInstance?.goToAndStop(0, true);
|
|
1404
|
-
this.playerState =
|
|
1620
|
+
this.playerState = PlayerState.Stopped;
|
|
1405
1621
|
} catch (err) {
|
|
1406
1622
|
this._errorMessage = handleErrors(err).message;
|
|
1407
|
-
this.playerState =
|
|
1408
|
-
this.dispatchEvent(new CustomEvent(
|
|
1623
|
+
this.playerState = PlayerState.Error;
|
|
1624
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
1409
1625
|
}
|
|
1410
1626
|
}
|
|
1411
1627
|
next() {
|
|
@@ -1416,7 +1632,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1416
1632
|
this._currentAnimation--;
|
|
1417
1633
|
this._switchInstance(true);
|
|
1418
1634
|
}
|
|
1419
|
-
async convert({
|
|
1635
|
+
async convert({ animations, fileName, manifest, shouldDownload = true, src, typeCheck }) {
|
|
1420
1636
|
if (typeCheck || this._isDotLottie) {
|
|
1421
1637
|
return createJSON({
|
|
1422
1638
|
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
@@ -1426,11 +1642,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1426
1642
|
}
|
|
1427
1643
|
return createDotLottie({
|
|
1428
1644
|
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
1645
|
+
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1429
1646
|
manifest: {
|
|
1430
1647
|
...manifest || this._manifest,
|
|
1431
1648
|
generator: pkg.name
|
|
1432
1649
|
},
|
|
1433
|
-
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1434
1650
|
shouldDownload
|
|
1435
1651
|
});
|
|
1436
1652
|
}
|
|
@@ -1439,224 +1655,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1439
1655
|
styleSheet.replace(css_248z);
|
|
1440
1656
|
return styleSheet;
|
|
1441
1657
|
}
|
|
1442
|
-
renderControls() {
|
|
1443
|
-
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
1444
|
-
if (!slot) {
|
|
1445
|
-
return;
|
|
1446
|
-
}
|
|
1447
|
-
slot.innerHTML = this.controls ? `
|
|
1448
|
-
<div
|
|
1449
|
-
class="lottie-controls toolbar ${this.playerState === exports.PlayerState.Error ? 'has-error' : ''}"
|
|
1450
|
-
aria-label="Lottie Animation controls"
|
|
1451
|
-
>
|
|
1452
|
-
<button
|
|
1453
|
-
class="togglePlay"
|
|
1454
|
-
data-active="false"
|
|
1455
|
-
tabindex="0"
|
|
1456
|
-
aria-label="Toggle Play/Pause"
|
|
1457
|
-
>
|
|
1458
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1459
|
-
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1460
|
-
</svg>
|
|
1461
|
-
</button>
|
|
1462
|
-
|
|
1463
|
-
<button
|
|
1464
|
-
class="stop"
|
|
1465
|
-
data-active="true"
|
|
1466
|
-
tabindex="0"
|
|
1467
|
-
aria-label="Stop"
|
|
1468
|
-
>
|
|
1469
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1470
|
-
<path d="M6 6h12v12H6V6z" />
|
|
1471
|
-
</svg>
|
|
1472
|
-
</button>
|
|
1473
|
-
<button
|
|
1474
|
-
class="prev"
|
|
1475
|
-
tabindex="0"
|
|
1476
|
-
aria-label="Previous animation"
|
|
1477
|
-
hidden
|
|
1478
|
-
>
|
|
1479
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1480
|
-
<path
|
|
1481
|
-
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1482
|
-
/>
|
|
1483
|
-
</svg>
|
|
1484
|
-
</button>
|
|
1485
|
-
<button
|
|
1486
|
-
class="next"
|
|
1487
|
-
tabindex="0"
|
|
1488
|
-
aria-label="Next animation"
|
|
1489
|
-
hidden
|
|
1490
|
-
>
|
|
1491
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1492
|
-
<path
|
|
1493
|
-
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1494
|
-
/>
|
|
1495
|
-
</svg>
|
|
1496
|
-
</button>
|
|
1497
|
-
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1498
|
-
<input
|
|
1499
|
-
class="seeker"
|
|
1500
|
-
type="range"
|
|
1501
|
-
min="0"
|
|
1502
|
-
max="100"
|
|
1503
|
-
step="1"
|
|
1504
|
-
value="${this._seeker.toString()}"
|
|
1505
|
-
aria-valuemin="0"
|
|
1506
|
-
aria-valuemax="100"
|
|
1507
|
-
role="slider"
|
|
1508
|
-
aria-valuenow="${this._seeker.toString()}"
|
|
1509
|
-
tabindex="0"
|
|
1510
|
-
aria-label="Slider for search"
|
|
1511
|
-
/>
|
|
1512
|
-
<progress max="100" value="${this._seeker}"></progress>
|
|
1513
|
-
</form>
|
|
1514
|
-
${this.simple ? '' : ` <button
|
|
1515
|
-
class="toggleLoop"
|
|
1516
|
-
data-active="${this.loop}"
|
|
1517
|
-
tabindex="0"
|
|
1518
|
-
aria-label="Toggle loop"
|
|
1519
|
-
>
|
|
1520
|
-
<svg
|
|
1521
|
-
width="24"
|
|
1522
|
-
height="24"
|
|
1523
|
-
aria-hidden="true"
|
|
1524
|
-
focusable="false"
|
|
1525
|
-
>
|
|
1526
|
-
<path
|
|
1527
|
-
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
1528
|
-
/>
|
|
1529
|
-
</svg>
|
|
1530
|
-
</button>
|
|
1531
|
-
<button
|
|
1532
|
-
class="toggleBoomerang"
|
|
1533
|
-
data-active="${this.mode === exports.PlayMode.Bounce}"
|
|
1534
|
-
aria-label="Toggle boomerang"
|
|
1535
|
-
tabindex="0"
|
|
1536
|
-
>
|
|
1537
|
-
<svg
|
|
1538
|
-
width="24"
|
|
1539
|
-
height="24"
|
|
1540
|
-
aria-hidden="true"
|
|
1541
|
-
focusable="false"
|
|
1542
|
-
>
|
|
1543
|
-
<path
|
|
1544
|
-
d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
|
|
1545
|
-
/>
|
|
1546
|
-
</svg>
|
|
1547
|
-
</button>
|
|
1548
|
-
<button
|
|
1549
|
-
class="toggleSettings"
|
|
1550
|
-
aria-label="Settings"
|
|
1551
|
-
aria-haspopup="true"
|
|
1552
|
-
aria-expanded="${!!this._isSettingsOpen}"
|
|
1553
|
-
aria-controls="${this._identifier}-settings"
|
|
1554
|
-
>
|
|
1555
|
-
<svg
|
|
1556
|
-
width="24"
|
|
1557
|
-
height="24"
|
|
1558
|
-
aria-hidden="true"
|
|
1559
|
-
focusable="false"
|
|
1560
|
-
>
|
|
1561
|
-
<circle cx="12" cy="5.4" r="2.5" />
|
|
1562
|
-
<circle cx="12" cy="12" r="2.5" />
|
|
1563
|
-
<circle cx="12" cy="18.6" r="2.5" />
|
|
1564
|
-
</svg>
|
|
1565
|
-
</button>
|
|
1566
|
-
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1567
|
-
<button
|
|
1568
|
-
class="convert"
|
|
1569
|
-
aria-label="Convert JSON animation to dotLottie format"
|
|
1570
|
-
tabindex="0"
|
|
1571
|
-
hidden
|
|
1572
|
-
>
|
|
1573
|
-
<svg
|
|
1574
|
-
width="24"
|
|
1575
|
-
height="24"
|
|
1576
|
-
aria-hidden="true"
|
|
1577
|
-
focusable="false"
|
|
1578
|
-
>
|
|
1579
|
-
<path
|
|
1580
|
-
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
1581
|
-
/>
|
|
1582
|
-
</svg>
|
|
1583
|
-
Convert to dotLottie
|
|
1584
|
-
</button>
|
|
1585
|
-
<button
|
|
1586
|
-
class="snapshot"
|
|
1587
|
-
aria-label="Download still image"
|
|
1588
|
-
tabindex="0"
|
|
1589
|
-
>
|
|
1590
|
-
<svg
|
|
1591
|
-
width="24"
|
|
1592
|
-
height="24"
|
|
1593
|
-
aria-hidden="true"
|
|
1594
|
-
focusable="false"
|
|
1595
|
-
>
|
|
1596
|
-
<path
|
|
1597
|
-
d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
|
|
1598
|
-
/>
|
|
1599
|
-
</svg>
|
|
1600
|
-
Download still image
|
|
1601
|
-
</button>
|
|
1602
|
-
</div>`}
|
|
1603
|
-
</div>
|
|
1604
|
-
` : '';
|
|
1605
|
-
}
|
|
1606
|
-
render() {
|
|
1607
|
-
this.template.innerHTML = `
|
|
1608
|
-
<figure
|
|
1609
|
-
class="animation-container main"
|
|
1610
|
-
data-controls="${this.controls ?? false}"
|
|
1611
|
-
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1612
|
-
role="img"
|
|
1613
|
-
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1614
|
-
data-loaded="${this._playerState.loaded}"
|
|
1615
|
-
>
|
|
1616
|
-
<div class="animation" style="background:${this.background}">
|
|
1617
|
-
${this.playerState === exports.PlayerState.Error ? ` <div class="error">
|
|
1618
|
-
<svg
|
|
1619
|
-
preserveAspectRatio="xMidYMid slice"
|
|
1620
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1621
|
-
xml:space="preserve"
|
|
1622
|
-
width="1920"
|
|
1623
|
-
height="1080"
|
|
1624
|
-
viewBox="0 0 1920 1080"
|
|
1625
|
-
>
|
|
1626
|
-
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1627
|
-
<path
|
|
1628
|
-
fill="#3a6d8b"
|
|
1629
|
-
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"
|
|
1630
|
-
/>
|
|
1631
|
-
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1632
|
-
<text
|
|
1633
|
-
fill="#3a6d8b"
|
|
1634
|
-
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1635
|
-
x="50%"
|
|
1636
|
-
y="848.017"
|
|
1637
|
-
text-anchor="middle"
|
|
1638
|
-
>
|
|
1639
|
-
${this._errorMessage}
|
|
1640
|
-
</text>
|
|
1641
|
-
</svg>
|
|
1642
|
-
</div>` : ''}
|
|
1643
|
-
</div>
|
|
1644
|
-
<slot name="controls"></slot>
|
|
1645
|
-
</figure>
|
|
1646
|
-
`;
|
|
1647
|
-
this.shadow.adoptedStyleSheets = [
|
|
1648
|
-
DotLottiePlayer.styles
|
|
1649
|
-
];
|
|
1650
|
-
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1651
|
-
}
|
|
1652
1658
|
constructor(){
|
|
1653
|
-
super(), this.playerState =
|
|
1654
|
-
prev: exports.PlayerState.Loading,
|
|
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 = {
|
|
1655
1660
|
count: 0,
|
|
1656
1661
|
loaded: false,
|
|
1657
|
-
|
|
1662
|
+
prev: PlayerState.Loading,
|
|
1663
|
+
scrollTimeout: null,
|
|
1658
1664
|
scrollY: 0,
|
|
1659
|
-
|
|
1665
|
+
visible: false
|
|
1660
1666
|
}, this._handleSettingsClick = ({ target })=>{
|
|
1661
1667
|
this._toggleSettings();
|
|
1662
1668
|
if (target instanceof HTMLElement) {
|
|
@@ -1682,7 +1688,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1682
1688
|
this.stop = this.stop.bind(this);
|
|
1683
1689
|
this.prev = this.prev.bind(this);
|
|
1684
1690
|
this.next = this.next.bind(this);
|
|
1685
|
-
this.
|
|
1691
|
+
this._renderControls = this._renderControls.bind(this);
|
|
1686
1692
|
this.snapshot = this.snapshot.bind(this);
|
|
1687
1693
|
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1688
1694
|
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
@@ -1701,5 +1707,8 @@ if (!isServer()) {
|
|
|
1701
1707
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1702
1708
|
}
|
|
1703
1709
|
|
|
1710
|
+
exports.PlayMode = PlayMode;
|
|
1711
|
+
exports.PlayerEvents = PlayerEvents;
|
|
1712
|
+
exports.PlayerState = PlayerState;
|
|
1704
1713
|
exports.default = DotLottiePlayer;
|
|
1705
1714
|
exports.tagName = tagName;
|