@aarsteinmedia/dotlottie-player 3.2.1 → 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/dist/cjs/index.js +286 -280
- package/dist/custom-elements.json +982 -911
- package/dist/esm/index.js +286 -280
- package/dist/index.d.ts +61 -52
- 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,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 === 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()) {
|
|
@@ -415,14 +643,12 @@ 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
|
}
|
|
@@ -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) {
|
|
@@ -543,7 +769,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
543
769
|
if (value === exports.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 {
|
|
@@ -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
|
}
|
|
@@ -865,7 +1093,7 @@ 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
|
}
|
|
@@ -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
|
}
|
|
@@ -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;
|
|
@@ -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
|
}
|
|
@@ -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
|
}
|
|
@@ -1340,7 +1554,9 @@ 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];
|
|
@@ -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 = 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 = {
|
|
1654
|
-
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 = {
|
|
1655
1660
|
count: 0,
|
|
1656
1661
|
loaded: false,
|
|
1657
|
-
|
|
1662
|
+
prev: exports.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);
|