@aarsteinmedia/dotlottie-player 3.2.0 → 3.2.2
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/README.md +3 -3
- package/dist/cjs/index.js +294 -296
- package/dist/custom-elements.json +981 -929
- package/dist/esm/index.js +294 -296
- package/dist/index.d.ts +62 -55
- package/dist/index.js +148 -180
- package/package.json +13 -12
package/dist/cjs/index.js
CHANGED
|
@@ -53,6 +53,7 @@ var PreserveAspectRatio;
|
|
|
53
53
|
PreserveAspectRatio["None"] = "xMinYMin slice";
|
|
54
54
|
PreserveAspectRatio["Initial"] = "none";
|
|
55
55
|
})(PreserveAspectRatio || (PreserveAspectRatio = {}));
|
|
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,11 +364,238 @@ 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 === exports.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 === exports.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 === exports.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.2";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^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.28","@types/node":"^22.7.3","@typescript-eslint/eslint-plugin":"^8.7.0","@typescript-eslint/parser":"^8.7.0",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.1","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.30.0","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-perfectionist":"^3.7.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.22.4","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.3",tslib:"^2.7.0",typescript:"^5.6.2"};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()) {
|
|
370
|
-
global.HTMLElement = class EmptyHTMLElement
|
|
598
|
+
global.HTMLElement = class EmptyHTMLElement {
|
|
371
599
|
};
|
|
372
600
|
}
|
|
373
601
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -380,7 +608,9 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
380
608
|
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
381
609
|
continue;
|
|
382
610
|
}
|
|
383
|
-
|
|
611
|
+
if (propName in this) {
|
|
612
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
613
|
+
}
|
|
384
614
|
}
|
|
385
615
|
}
|
|
386
616
|
constructor(){
|
|
@@ -404,22 +634,21 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
404
634
|
}
|
|
405
635
|
});
|
|
406
636
|
if (typeof initialValue !== 'undefined') {
|
|
407
|
-
this[UPDATE_ON_CONNECTED]
|
|
637
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
638
|
+
this[UPDATE_ON_CONNECTED].push(propName);
|
|
639
|
+
}
|
|
408
640
|
}
|
|
409
641
|
}
|
|
410
642
|
}
|
|
411
643
|
}
|
|
412
644
|
};
|
|
413
|
-
EnhancedElement.observedProperties = [];
|
|
414
|
-
|
|
415
|
-
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}";
|
|
416
645
|
|
|
417
646
|
class DotLottiePlayer extends EnhancedElement {
|
|
418
647
|
async connectedCallback() {
|
|
419
648
|
super.connectedCallback();
|
|
420
|
-
this.
|
|
649
|
+
this._render();
|
|
421
650
|
this._container = this.shadow.querySelector('.animation');
|
|
422
|
-
this.
|
|
651
|
+
this._renderControls();
|
|
423
652
|
if (typeof document.hidden !== 'undefined') {
|
|
424
653
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
425
654
|
}
|
|
@@ -458,8 +687,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
458
687
|
if (value === '' || Boolean(value)) {
|
|
459
688
|
this._lottieInstance.autoplay = false;
|
|
460
689
|
addEventListener('scroll', this._handleScroll, {
|
|
461
|
-
|
|
462
|
-
|
|
690
|
+
capture: true,
|
|
691
|
+
passive: true
|
|
463
692
|
});
|
|
464
693
|
return;
|
|
465
694
|
}
|
|
@@ -476,7 +705,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
476
705
|
this.stop();
|
|
477
706
|
}
|
|
478
707
|
if (name === 'controls') {
|
|
479
|
-
this.
|
|
708
|
+
this._renderControls();
|
|
480
709
|
}
|
|
481
710
|
if (name === 'direction') {
|
|
482
711
|
if (Number(value) === -1) {
|
|
@@ -540,7 +769,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
540
769
|
if (value === exports.PlayerState.Playing) {
|
|
541
770
|
togglePlay.innerHTML = `
|
|
542
771
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
543
|
-
<path
|
|
772
|
+
<path
|
|
773
|
+
d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
|
|
774
|
+
/>
|
|
544
775
|
</svg>
|
|
545
776
|
`;
|
|
546
777
|
} else {
|
|
@@ -799,11 +1030,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
799
1030
|
initialSegment = undefined;
|
|
800
1031
|
}
|
|
801
1032
|
const options = {
|
|
1033
|
+
autoplay,
|
|
802
1034
|
container: this._container,
|
|
1035
|
+
initialSegment,
|
|
803
1036
|
loop,
|
|
804
|
-
autoplay,
|
|
805
1037
|
renderer: this.renderer,
|
|
806
|
-
initialSegment,
|
|
807
1038
|
rendererSettings: {
|
|
808
1039
|
imagePreserveAspectRatio: preserveAspectRatio
|
|
809
1040
|
}
|
|
@@ -862,7 +1093,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
862
1093
|
return;
|
|
863
1094
|
}
|
|
864
1095
|
try {
|
|
865
|
-
const { animations,
|
|
1096
|
+
const { animations, isDotLottie, manifest } = await getAnimationData(src);
|
|
866
1097
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
867
1098
|
throw new Error('Broken or corrupted file');
|
|
868
1099
|
}
|
|
@@ -877,10 +1108,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
877
1108
|
this._manifest = manifest ?? {
|
|
878
1109
|
animations: [
|
|
879
1110
|
{
|
|
880
|
-
id: useId(),
|
|
881
1111
|
autoplay: !this.animateOnScroll && this.autoplay,
|
|
882
|
-
loop: this.loop,
|
|
883
1112
|
direction: this.direction,
|
|
1113
|
+
id: useId(),
|
|
1114
|
+
loop: this.loop,
|
|
884
1115
|
mode: this.mode,
|
|
885
1116
|
speed: this.speed
|
|
886
1117
|
}
|
|
@@ -926,20 +1157,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
926
1157
|
}
|
|
927
1158
|
_toggleEventListeners(action) {
|
|
928
1159
|
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
929
|
-
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
930
|
-
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
931
|
-
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
932
|
-
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
933
|
-
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
934
|
-
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
935
|
-
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
936
|
-
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
937
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
938
|
-
seeker?.[method]('change', this._handleSeekChange);
|
|
939
|
-
seeker?.[method]('mousedown', this._freeze);
|
|
940
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
941
|
-
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
942
|
-
toggleSettings?.[method]('blur', this._handleBlur);
|
|
943
1160
|
if (this._lottieInstance) {
|
|
944
1161
|
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
945
1162
|
this._lottieInstance[method]('complete', this._complete);
|
|
@@ -953,17 +1170,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
953
1170
|
this._container[method]('mouseleave', this._mouseLeave);
|
|
954
1171
|
}
|
|
955
1172
|
window[method]('focus', this._handleWindowBlur, {
|
|
956
|
-
|
|
957
|
-
|
|
1173
|
+
capture: false,
|
|
1174
|
+
passive: true
|
|
958
1175
|
});
|
|
959
1176
|
window[method]('blur', this._handleWindowBlur, {
|
|
960
|
-
|
|
961
|
-
|
|
1177
|
+
capture: false,
|
|
1178
|
+
passive: true
|
|
962
1179
|
});
|
|
963
1180
|
if (this.animateOnScroll) {
|
|
964
1181
|
window[method]('scroll', this._handleScroll, {
|
|
965
|
-
|
|
966
|
-
|
|
1182
|
+
capture: true,
|
|
1183
|
+
passive: true
|
|
967
1184
|
});
|
|
968
1185
|
}
|
|
969
1186
|
}
|
|
@@ -977,7 +1194,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
977
1194
|
if (!this._lottieInstance) {
|
|
978
1195
|
return;
|
|
979
1196
|
}
|
|
980
|
-
const {
|
|
1197
|
+
const { playDirection, totalFrames } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
|
|
981
1198
|
if (this.count) {
|
|
982
1199
|
if (this._isBounce) {
|
|
983
1200
|
this._playerState.count += 0.5;
|
|
@@ -1153,18 +1370,18 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1153
1370
|
animations?.push(...animationsToAdd);
|
|
1154
1371
|
}
|
|
1155
1372
|
return {
|
|
1156
|
-
success: true,
|
|
1157
1373
|
result: await createDotLottie({
|
|
1158
1374
|
animations,
|
|
1159
|
-
manifest,
|
|
1160
1375
|
fileName,
|
|
1376
|
+
manifest,
|
|
1161
1377
|
shouldDownload
|
|
1162
|
-
})
|
|
1378
|
+
}),
|
|
1379
|
+
success: true
|
|
1163
1380
|
};
|
|
1164
1381
|
} catch (err) {
|
|
1165
1382
|
return {
|
|
1166
|
-
|
|
1167
|
-
|
|
1383
|
+
error: handleErrors(err).message,
|
|
1384
|
+
success: false
|
|
1168
1385
|
};
|
|
1169
1386
|
}
|
|
1170
1387
|
}
|
|
@@ -1253,8 +1470,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1253
1470
|
return;
|
|
1254
1471
|
}
|
|
1255
1472
|
download(data, {
|
|
1256
|
-
|
|
1257
|
-
|
|
1473
|
+
mimeType: 'image/svg+xml',
|
|
1474
|
+
name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`
|
|
1258
1475
|
});
|
|
1259
1476
|
return data;
|
|
1260
1477
|
}
|
|
@@ -1337,7 +1554,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1337
1554
|
return this._lottieInstance.goToAndPlay(0, true);
|
|
1338
1555
|
}
|
|
1339
1556
|
toggleLoop() {
|
|
1340
|
-
|
|
1557
|
+
const val = !this.loop;
|
|
1558
|
+
this.loop = val;
|
|
1559
|
+
this.setLoop(val);
|
|
1341
1560
|
}
|
|
1342
1561
|
toggleBoomerang() {
|
|
1343
1562
|
const curr = this.multiAnimationSettings?.[this._currentAnimation];
|
|
@@ -1413,7 +1632,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1413
1632
|
this._currentAnimation--;
|
|
1414
1633
|
this._switchInstance(true);
|
|
1415
1634
|
}
|
|
1416
|
-
async convert({
|
|
1635
|
+
async convert({ animations, fileName, manifest, shouldDownload = true, src, typeCheck }) {
|
|
1417
1636
|
if (typeCheck || this._isDotLottie) {
|
|
1418
1637
|
return createJSON({
|
|
1419
1638
|
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
@@ -1423,11 +1642,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1423
1642
|
}
|
|
1424
1643
|
return createDotLottie({
|
|
1425
1644
|
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
1645
|
+
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1426
1646
|
manifest: {
|
|
1427
1647
|
...manifest || this._manifest,
|
|
1428
1648
|
generator: pkg.name
|
|
1429
1649
|
},
|
|
1430
|
-
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1431
1650
|
shouldDownload
|
|
1432
1651
|
});
|
|
1433
1652
|
}
|
|
@@ -1436,236 +1655,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1436
1655
|
styleSheet.replace(css_248z);
|
|
1437
1656
|
return styleSheet;
|
|
1438
1657
|
}
|
|
1439
|
-
renderControls() {
|
|
1440
|
-
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
1441
|
-
if (!slot) {
|
|
1442
|
-
return;
|
|
1443
|
-
}
|
|
1444
|
-
slot.innerHTML = this.controls ? `
|
|
1445
|
-
<div
|
|
1446
|
-
class="lottie-controls toolbar ${this.playerState === exports.PlayerState.Error ? 'has-error' : ''}"
|
|
1447
|
-
aria-label="Lottie Animation controls"
|
|
1448
|
-
>
|
|
1449
|
-
<button
|
|
1450
|
-
class="togglePlay"
|
|
1451
|
-
data-active="false"
|
|
1452
|
-
tabindex="0"
|
|
1453
|
-
aria-label="Toggle Play/Pause"
|
|
1454
|
-
>
|
|
1455
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1456
|
-
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1457
|
-
</svg>
|
|
1458
|
-
</button>
|
|
1459
|
-
|
|
1460
|
-
<button
|
|
1461
|
-
class="stop"
|
|
1462
|
-
data-active="true"
|
|
1463
|
-
tabindex="0"
|
|
1464
|
-
aria-label="Stop"
|
|
1465
|
-
>
|
|
1466
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1467
|
-
<path d="M6 6h12v12H6V6z" />
|
|
1468
|
-
</svg>
|
|
1469
|
-
</button>
|
|
1470
|
-
<button
|
|
1471
|
-
class="prev"
|
|
1472
|
-
tabindex="0"
|
|
1473
|
-
aria-label="Previous animation"
|
|
1474
|
-
hidden
|
|
1475
|
-
>
|
|
1476
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1477
|
-
<path
|
|
1478
|
-
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1479
|
-
/>
|
|
1480
|
-
</svg>
|
|
1481
|
-
</button>
|
|
1482
|
-
<button
|
|
1483
|
-
class="next"
|
|
1484
|
-
tabindex="0"
|
|
1485
|
-
aria-label="Next animation"
|
|
1486
|
-
hidden
|
|
1487
|
-
>
|
|
1488
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1489
|
-
<path
|
|
1490
|
-
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1491
|
-
/>
|
|
1492
|
-
</svg>
|
|
1493
|
-
</button>
|
|
1494
|
-
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1495
|
-
<input
|
|
1496
|
-
class="seeker"
|
|
1497
|
-
type="range"
|
|
1498
|
-
min="0"
|
|
1499
|
-
max="100"
|
|
1500
|
-
step="1"
|
|
1501
|
-
value="${this._seeker.toString()}"
|
|
1502
|
-
aria-valuemin="0"
|
|
1503
|
-
aria-valuemax="100"
|
|
1504
|
-
role="slider"
|
|
1505
|
-
aria-valuenow="${this._seeker.toString()}"
|
|
1506
|
-
tabindex="0"
|
|
1507
|
-
aria-label="Slider for search"
|
|
1508
|
-
/>
|
|
1509
|
-
<progress max="100" value="${this._seeker}"></progress>
|
|
1510
|
-
</form>
|
|
1511
|
-
${this.simple ? '' : ` <button
|
|
1512
|
-
class="toggleLoop"
|
|
1513
|
-
data-active="${this.loop}"
|
|
1514
|
-
tabindex="0"
|
|
1515
|
-
aria-label="Toggle loop"
|
|
1516
|
-
>
|
|
1517
|
-
<svg
|
|
1518
|
-
width="24"
|
|
1519
|
-
height="24"
|
|
1520
|
-
aria-hidden="true"
|
|
1521
|
-
focusable="false"
|
|
1522
|
-
>
|
|
1523
|
-
<path
|
|
1524
|
-
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"
|
|
1525
|
-
/>
|
|
1526
|
-
</svg>
|
|
1527
|
-
</button>
|
|
1528
|
-
<button
|
|
1529
|
-
class="toggleBoomerang"
|
|
1530
|
-
data-active="${this.mode === exports.PlayMode.Bounce}"
|
|
1531
|
-
aria-label="Toggle boomerang"
|
|
1532
|
-
tabindex="0"
|
|
1533
|
-
>
|
|
1534
|
-
<svg
|
|
1535
|
-
width="24"
|
|
1536
|
-
height="24"
|
|
1537
|
-
aria-hidden="true"
|
|
1538
|
-
focusable="false"
|
|
1539
|
-
>
|
|
1540
|
-
<path
|
|
1541
|
-
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"
|
|
1542
|
-
/>
|
|
1543
|
-
</svg>
|
|
1544
|
-
</button>
|
|
1545
|
-
<button
|
|
1546
|
-
class="toggleSettings"
|
|
1547
|
-
aria-label="Settings"
|
|
1548
|
-
aria-haspopup="true"
|
|
1549
|
-
aria-expanded="${!!this._isSettingsOpen}"
|
|
1550
|
-
aria-controls="${this._identifier}-settings"
|
|
1551
|
-
>
|
|
1552
|
-
<svg
|
|
1553
|
-
width="24"
|
|
1554
|
-
height="24"
|
|
1555
|
-
aria-hidden="true"
|
|
1556
|
-
focusable="false"
|
|
1557
|
-
>
|
|
1558
|
-
<circle cx="12" cy="5.4" r="2.5" />
|
|
1559
|
-
<circle cx="12" cy="12" r="2.5" />
|
|
1560
|
-
<circle cx="12" cy="18.6" r="2.5" />
|
|
1561
|
-
</svg>
|
|
1562
|
-
</button>
|
|
1563
|
-
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1564
|
-
<button
|
|
1565
|
-
class="convert"
|
|
1566
|
-
aria-label="Convert JSON animation to dotLottie format"
|
|
1567
|
-
tabindex="0"
|
|
1568
|
-
hidden
|
|
1569
|
-
>
|
|
1570
|
-
<svg
|
|
1571
|
-
width="24"
|
|
1572
|
-
height="24"
|
|
1573
|
-
aria-hidden="true"
|
|
1574
|
-
focusable="false"
|
|
1575
|
-
>
|
|
1576
|
-
<path
|
|
1577
|
-
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"
|
|
1578
|
-
/>
|
|
1579
|
-
</svg>
|
|
1580
|
-
Convert to dotLottie
|
|
1581
|
-
</button>
|
|
1582
|
-
<button
|
|
1583
|
-
class="snapshot"
|
|
1584
|
-
aria-label="Download still image"
|
|
1585
|
-
tabindex="0"
|
|
1586
|
-
>
|
|
1587
|
-
<svg
|
|
1588
|
-
width="24"
|
|
1589
|
-
height="24"
|
|
1590
|
-
aria-hidden="true"
|
|
1591
|
-
focusable="false"
|
|
1592
|
-
>
|
|
1593
|
-
<path
|
|
1594
|
-
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"
|
|
1595
|
-
/>
|
|
1596
|
-
</svg>
|
|
1597
|
-
Download still image
|
|
1598
|
-
</button>
|
|
1599
|
-
</div>`}
|
|
1600
|
-
</div>
|
|
1601
|
-
` : '';
|
|
1602
|
-
}
|
|
1603
|
-
render() {
|
|
1604
|
-
this.template.innerHTML = `
|
|
1605
|
-
<figure
|
|
1606
|
-
class="animation-container main"
|
|
1607
|
-
data-controls="${this.controls ?? false}"
|
|
1608
|
-
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1609
|
-
role="img"
|
|
1610
|
-
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1611
|
-
data-loaded="${this._playerState.loaded}"
|
|
1612
|
-
>
|
|
1613
|
-
<div class="animation" style="background:${this.background}">
|
|
1614
|
-
${this.playerState === exports.PlayerState.Error ? ` <div class="error">
|
|
1615
|
-
<svg
|
|
1616
|
-
preserveAspectRatio="xMidYMid slice"
|
|
1617
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1618
|
-
xml:space="preserve"
|
|
1619
|
-
width="1920"
|
|
1620
|
-
height="1080"
|
|
1621
|
-
viewBox="0 0 1920 1080"
|
|
1622
|
-
>
|
|
1623
|
-
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1624
|
-
<path
|
|
1625
|
-
fill="#3a6d8b"
|
|
1626
|
-
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"
|
|
1627
|
-
/>
|
|
1628
|
-
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1629
|
-
<text
|
|
1630
|
-
fill="#3a6d8b"
|
|
1631
|
-
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1632
|
-
x="50%"
|
|
1633
|
-
y="848.017"
|
|
1634
|
-
text-anchor="middle"
|
|
1635
|
-
>
|
|
1636
|
-
${this._errorMessage}
|
|
1637
|
-
</text>
|
|
1638
|
-
</svg>
|
|
1639
|
-
</div>` : ''}
|
|
1640
|
-
</div>
|
|
1641
|
-
<slot name="controls"></slot>
|
|
1642
|
-
</figure>
|
|
1643
|
-
`;
|
|
1644
|
-
this.shadow.adoptedStyleSheets = [
|
|
1645
|
-
DotLottiePlayer.styles
|
|
1646
|
-
];
|
|
1647
|
-
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1648
|
-
}
|
|
1649
1658
|
constructor(){
|
|
1650
|
-
super()
|
|
1651
|
-
this.playerState = exports.PlayerState.Loading;
|
|
1652
|
-
this._isSettingsOpen = false;
|
|
1653
|
-
this._seeker = 0;
|
|
1654
|
-
this._currentAnimation = 0;
|
|
1655
|
-
this._lottieInstance = null;
|
|
1656
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1657
|
-
this._errorMessage = 'Something went wrong';
|
|
1658
|
-
this._isBounce = false;
|
|
1659
|
-
this._isDotLottie = false;
|
|
1660
|
-
this._playerState = {
|
|
1661
|
-
prev: exports.PlayerState.Loading,
|
|
1659
|
+
super(), this._renderControls = renderControls, this._render = renderPlayer, this.playerState = exports.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 = {
|
|
1662
1660
|
count: 0,
|
|
1663
1661
|
loaded: false,
|
|
1664
|
-
|
|
1662
|
+
prev: exports.PlayerState.Loading,
|
|
1663
|
+
scrollTimeout: null,
|
|
1665
1664
|
scrollY: 0,
|
|
1666
|
-
|
|
1667
|
-
}
|
|
1668
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1665
|
+
visible: false
|
|
1666
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1669
1667
|
this._toggleSettings();
|
|
1670
1668
|
if (target instanceof HTMLElement) {
|
|
1671
1669
|
target.focus();
|
|
@@ -1690,7 +1688,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1690
1688
|
this.stop = this.stop.bind(this);
|
|
1691
1689
|
this.prev = this.prev.bind(this);
|
|
1692
1690
|
this.next = this.next.bind(this);
|
|
1693
|
-
this.
|
|
1691
|
+
this._renderControls = this._renderControls.bind(this);
|
|
1694
1692
|
this.snapshot = this.snapshot.bind(this);
|
|
1695
1693
|
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1696
1694
|
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|