@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/esm/index.js
CHANGED
|
@@ -49,6 +49,7 @@ var PreserveAspectRatio;
|
|
|
49
49
|
PreserveAspectRatio["None"] = "xMinYMin slice";
|
|
50
50
|
PreserveAspectRatio["Initial"] = "none";
|
|
51
51
|
})(PreserveAspectRatio || (PreserveAspectRatio = {}));
|
|
52
|
+
|
|
52
53
|
class CustomError extends Error {
|
|
53
54
|
}
|
|
54
55
|
const addExt = (ext, str)=>{
|
|
@@ -64,19 +65,19 @@ const addExt = (ext, str)=>{
|
|
|
64
65
|
return `${str}.${ext}`;
|
|
65
66
|
}, aspectRatio = (objectFit)=>{
|
|
66
67
|
switch(objectFit){
|
|
67
|
-
case
|
|
68
|
-
case
|
|
68
|
+
case ObjectFit.Contain:
|
|
69
|
+
case ObjectFit.ScaleDown:
|
|
69
70
|
return 'xMidYMid meet';
|
|
70
|
-
case
|
|
71
|
+
case ObjectFit.Cover:
|
|
71
72
|
return 'xMidYMid slice';
|
|
72
|
-
case
|
|
73
|
+
case ObjectFit.Fill:
|
|
73
74
|
return 'none';
|
|
74
|
-
case
|
|
75
|
+
case ObjectFit.None:
|
|
75
76
|
return 'xMinYMin slice';
|
|
76
77
|
default:
|
|
77
78
|
return 'xMidYMid meet';
|
|
78
79
|
}
|
|
79
|
-
}, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations,
|
|
80
|
+
}, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, fileName, manifest, shouldDownload = true })=>{
|
|
80
81
|
try {
|
|
81
82
|
if (!animations?.length || !manifest) {
|
|
82
83
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
@@ -114,8 +115,8 @@ const addExt = (ext, str)=>{
|
|
|
114
115
|
}
|
|
115
116
|
const buffer = await getArrayBuffer(dotlottie);
|
|
116
117
|
return shouldDownload ? download(buffer, {
|
|
117
|
-
|
|
118
|
-
|
|
118
|
+
mimeType: 'application/zip',
|
|
119
|
+
name
|
|
119
120
|
}) : buffer;
|
|
120
121
|
} catch (err) {
|
|
121
122
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
@@ -127,8 +128,8 @@ const addExt = (ext, str)=>{
|
|
|
127
128
|
}
|
|
128
129
|
const name = addExt('json', fileName) || `${useId()}.json`, jsonString = JSON.stringify(animation);
|
|
129
130
|
return shouldDownload ? download(jsonString, {
|
|
130
|
-
|
|
131
|
-
|
|
131
|
+
mimeType: 'application/json',
|
|
132
|
+
name
|
|
132
133
|
}) : jsonString;
|
|
133
134
|
} catch (err) {
|
|
134
135
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
@@ -176,8 +177,8 @@ const addExt = (ext, str)=>{
|
|
|
176
177
|
];
|
|
177
178
|
return {
|
|
178
179
|
animations,
|
|
179
|
-
|
|
180
|
-
|
|
180
|
+
isDotLottie: false,
|
|
181
|
+
manifest: undefined
|
|
181
182
|
};
|
|
182
183
|
}
|
|
183
184
|
const result = await fetch(input, {
|
|
@@ -198,8 +199,8 @@ const addExt = (ext, str)=>{
|
|
|
198
199
|
animations: [
|
|
199
200
|
lottie
|
|
200
201
|
],
|
|
201
|
-
|
|
202
|
-
|
|
202
|
+
isDotLottie: false,
|
|
203
|
+
manifest: undefined
|
|
203
204
|
};
|
|
204
205
|
}
|
|
205
206
|
const text = await result.clone().text();
|
|
@@ -209,8 +210,8 @@ const addExt = (ext, str)=>{
|
|
|
209
210
|
animations: [
|
|
210
211
|
lottie
|
|
211
212
|
],
|
|
212
|
-
|
|
213
|
-
|
|
213
|
+
isDotLottie: false,
|
|
214
|
+
manifest: undefined
|
|
214
215
|
};
|
|
215
216
|
} catch (e) {
|
|
216
217
|
console.warn(e);
|
|
@@ -219,15 +220,15 @@ const addExt = (ext, str)=>{
|
|
|
219
220
|
const { data, manifest } = await getLottieJSON(result);
|
|
220
221
|
return {
|
|
221
222
|
animations: data,
|
|
222
|
-
|
|
223
|
-
|
|
223
|
+
isDotLottie: true,
|
|
224
|
+
manifest
|
|
224
225
|
};
|
|
225
226
|
} catch (err) {
|
|
226
227
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
227
228
|
return {
|
|
228
229
|
animations: undefined,
|
|
229
|
-
|
|
230
|
-
|
|
230
|
+
isDotLottie: false,
|
|
231
|
+
manifest: undefined
|
|
231
232
|
};
|
|
232
233
|
}
|
|
233
234
|
}, getArrayBuffer = async (zippable)=>{
|
|
@@ -359,11 +360,238 @@ const addExt = (ext, str)=>{
|
|
|
359
360
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
360
361
|
};
|
|
361
362
|
|
|
362
|
-
|
|
363
|
+
function renderPlayer() {
|
|
364
|
+
this.template.innerHTML = `
|
|
365
|
+
<figure
|
|
366
|
+
class="animation-container main"
|
|
367
|
+
data-controls="${this.controls ?? false}"
|
|
368
|
+
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
369
|
+
role="img"
|
|
370
|
+
aria-label="${this.description ?? 'Lottie animation'}"
|
|
371
|
+
data-loaded="${this._playerState.loaded}"
|
|
372
|
+
>
|
|
373
|
+
<div class="animation" style="background:${this.background}">
|
|
374
|
+
${this.playerState === PlayerState.Error ? ` <div class="error">
|
|
375
|
+
<svg
|
|
376
|
+
preserveAspectRatio="xMidYMid slice"
|
|
377
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
378
|
+
xml:space="preserve"
|
|
379
|
+
width="1920"
|
|
380
|
+
height="1080"
|
|
381
|
+
viewBox="0 0 1920 1080"
|
|
382
|
+
>
|
|
383
|
+
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
384
|
+
<path
|
|
385
|
+
fill="#3a6d8b"
|
|
386
|
+
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"
|
|
387
|
+
/>
|
|
388
|
+
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
389
|
+
<text
|
|
390
|
+
fill="#3a6d8b"
|
|
391
|
+
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
392
|
+
x="50%"
|
|
393
|
+
y="848.017"
|
|
394
|
+
text-anchor="middle"
|
|
395
|
+
>
|
|
396
|
+
${this._errorMessage}
|
|
397
|
+
</text>
|
|
398
|
+
</svg>
|
|
399
|
+
</div>` : ''}
|
|
400
|
+
</div>
|
|
401
|
+
<slot name="controls"></slot>
|
|
402
|
+
</figure>
|
|
403
|
+
`;
|
|
404
|
+
this.shadow.adoptedStyleSheets = [
|
|
405
|
+
DotLottiePlayer.styles
|
|
406
|
+
];
|
|
407
|
+
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
function renderControls() {
|
|
411
|
+
if (!this.controls) {
|
|
412
|
+
return;
|
|
413
|
+
}
|
|
414
|
+
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
415
|
+
if (!slot) {
|
|
416
|
+
return;
|
|
417
|
+
}
|
|
418
|
+
slot.innerHTML = `
|
|
419
|
+
<div
|
|
420
|
+
class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
|
|
421
|
+
aria-label="Lottie Animation controls"
|
|
422
|
+
>
|
|
423
|
+
<button
|
|
424
|
+
class="togglePlay"
|
|
425
|
+
data-active="false"
|
|
426
|
+
tabindex="0"
|
|
427
|
+
aria-label="Toggle Play/Pause"
|
|
428
|
+
>
|
|
429
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
430
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
431
|
+
</svg>
|
|
432
|
+
</button>
|
|
433
|
+
|
|
434
|
+
<button class="stop" data-active="true" tabindex="0" aria-label="Stop">
|
|
435
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
436
|
+
<path d="M6 6h12v12H6V6z" />
|
|
437
|
+
</svg>
|
|
438
|
+
</button>
|
|
439
|
+
<button class="prev" tabindex="0" aria-label="Previous animation" hidden>
|
|
440
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
441
|
+
<path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z" />
|
|
442
|
+
</svg>
|
|
443
|
+
</button>
|
|
444
|
+
<button class="next" tabindex="0" aria-label="Next animation" hidden>
|
|
445
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
446
|
+
<path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z" />
|
|
447
|
+
</svg>
|
|
448
|
+
</button>
|
|
449
|
+
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
450
|
+
<input
|
|
451
|
+
class="seeker"
|
|
452
|
+
type="range"
|
|
453
|
+
min="0"
|
|
454
|
+
max="100"
|
|
455
|
+
step="1"
|
|
456
|
+
value="${this._seeker.toString()}"
|
|
457
|
+
aria-valuemin="0"
|
|
458
|
+
aria-valuemax="100"
|
|
459
|
+
role="slider"
|
|
460
|
+
aria-valuenow="${this._seeker.toString()}"
|
|
461
|
+
tabindex="0"
|
|
462
|
+
aria-label="Slider for search"
|
|
463
|
+
/>
|
|
464
|
+
<progress max="100" value="${this._seeker}"></progress>
|
|
465
|
+
</form>
|
|
466
|
+
${this.simple ? '' : ` <button
|
|
467
|
+
class="toggleLoop"
|
|
468
|
+
data-active="${this.loop}"
|
|
469
|
+
tabindex="0"
|
|
470
|
+
aria-label="Toggle loop"
|
|
471
|
+
>
|
|
472
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
473
|
+
<path
|
|
474
|
+
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"
|
|
475
|
+
/>
|
|
476
|
+
</svg>
|
|
477
|
+
</button>
|
|
478
|
+
<button
|
|
479
|
+
class="toggleBoomerang"
|
|
480
|
+
data-active="${this.mode === PlayMode.Bounce}"
|
|
481
|
+
aria-label="Toggle boomerang"
|
|
482
|
+
tabindex="0"
|
|
483
|
+
>
|
|
484
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
485
|
+
<path
|
|
486
|
+
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"
|
|
487
|
+
/>
|
|
488
|
+
</svg>
|
|
489
|
+
</button>
|
|
490
|
+
<button
|
|
491
|
+
class="toggleSettings"
|
|
492
|
+
aria-label="Settings"
|
|
493
|
+
aria-haspopup="true"
|
|
494
|
+
aria-expanded="${!!this._isSettingsOpen}"
|
|
495
|
+
aria-controls="${this._identifier}-settings"
|
|
496
|
+
>
|
|
497
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
498
|
+
<circle cx="12" cy="5.4" r="2.5" />
|
|
499
|
+
<circle cx="12" cy="12" r="2.5" />
|
|
500
|
+
<circle cx="12" cy="18.6" r="2.5" />
|
|
501
|
+
</svg>
|
|
502
|
+
</button>
|
|
503
|
+
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
504
|
+
<button
|
|
505
|
+
class="convert"
|
|
506
|
+
aria-label="Convert JSON animation to dotLottie format"
|
|
507
|
+
tabindex="0"
|
|
508
|
+
hidden
|
|
509
|
+
>
|
|
510
|
+
<svg
|
|
511
|
+
width="24"
|
|
512
|
+
height="24"
|
|
513
|
+
aria-hidden="true"
|
|
514
|
+
focusable="false"
|
|
515
|
+
>
|
|
516
|
+
<path
|
|
517
|
+
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"
|
|
518
|
+
/>
|
|
519
|
+
</svg>
|
|
520
|
+
Convert to dotLottie
|
|
521
|
+
</button>
|
|
522
|
+
<button
|
|
523
|
+
class="snapshot"
|
|
524
|
+
aria-label="Download still image"
|
|
525
|
+
tabindex="0"
|
|
526
|
+
>
|
|
527
|
+
<svg
|
|
528
|
+
width="24"
|
|
529
|
+
height="24"
|
|
530
|
+
aria-hidden="true"
|
|
531
|
+
focusable="false"
|
|
532
|
+
>
|
|
533
|
+
<path
|
|
534
|
+
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"
|
|
535
|
+
/>
|
|
536
|
+
</svg>
|
|
537
|
+
Download still image
|
|
538
|
+
</button>
|
|
539
|
+
</div>`}
|
|
540
|
+
</div>
|
|
541
|
+
`;
|
|
542
|
+
const togglePlay = this.shadow.querySelector('.togglePlay');
|
|
543
|
+
if (togglePlay instanceof HTMLButtonElement) {
|
|
544
|
+
togglePlay.onclick = this.togglePlay;
|
|
545
|
+
}
|
|
546
|
+
const stop = this.shadow.querySelector('.stop');
|
|
547
|
+
if (stop instanceof HTMLButtonElement) {
|
|
548
|
+
stop.onclick = this.stop;
|
|
549
|
+
}
|
|
550
|
+
const prev = this.shadow.querySelector('.prev');
|
|
551
|
+
if (prev instanceof HTMLButtonElement) {
|
|
552
|
+
prev.onclick = this.prev;
|
|
553
|
+
}
|
|
554
|
+
const next = this.shadow.querySelector('.next');
|
|
555
|
+
if (next instanceof HTMLButtonElement) {
|
|
556
|
+
next.onclick = this.next;
|
|
557
|
+
}
|
|
558
|
+
const seeker = this.shadow.querySelector('.seeker');
|
|
559
|
+
if (seeker instanceof HTMLInputElement) {
|
|
560
|
+
seeker.onchange = this._handleSeekChange;
|
|
561
|
+
seeker.onmousedown = this._freeze;
|
|
562
|
+
}
|
|
563
|
+
if (!this.simple) {
|
|
564
|
+
const toggleLoop = this.shadow.querySelector('.toggleLoop');
|
|
565
|
+
if (toggleLoop instanceof HTMLButtonElement) {
|
|
566
|
+
toggleLoop.onclick = this.toggleLoop;
|
|
567
|
+
}
|
|
568
|
+
const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
|
|
569
|
+
if (toggleBoomerang instanceof HTMLButtonElement) {
|
|
570
|
+
toggleBoomerang.onclick = this.toggleBoomerang;
|
|
571
|
+
}
|
|
572
|
+
const convert = this.shadow.querySelector('.convert');
|
|
573
|
+
if (convert instanceof HTMLButtonElement) {
|
|
574
|
+
convert.onclick = this.convert;
|
|
575
|
+
}
|
|
576
|
+
const snapshot = this.shadow.querySelector('.snapshot');
|
|
577
|
+
if (snapshot instanceof HTMLButtonElement) {
|
|
578
|
+
snapshot.onclick = this.snapshot;
|
|
579
|
+
}
|
|
580
|
+
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
581
|
+
if (toggleSettings instanceof HTMLButtonElement) {
|
|
582
|
+
toggleSettings.onclick = this._handleSettingsClick;
|
|
583
|
+
toggleSettings.onblur = this._handleBlur;
|
|
584
|
+
}
|
|
585
|
+
}
|
|
586
|
+
}
|
|
587
|
+
|
|
588
|
+
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={".":{"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="./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,main:main,unpkg:unpkg,module:module,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};
|
|
589
|
+
|
|
590
|
+
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}";
|
|
363
591
|
|
|
364
592
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
365
593
|
if (isServer()) {
|
|
366
|
-
global.HTMLElement = class EmptyHTMLElement
|
|
594
|
+
global.HTMLElement = class EmptyHTMLElement {
|
|
367
595
|
};
|
|
368
596
|
}
|
|
369
597
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -376,7 +604,9 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
376
604
|
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
377
605
|
continue;
|
|
378
606
|
}
|
|
379
|
-
|
|
607
|
+
if (propName in this) {
|
|
608
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
609
|
+
}
|
|
380
610
|
}
|
|
381
611
|
}
|
|
382
612
|
constructor(){
|
|
@@ -400,22 +630,21 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
400
630
|
}
|
|
401
631
|
});
|
|
402
632
|
if (typeof initialValue !== 'undefined') {
|
|
403
|
-
this[UPDATE_ON_CONNECTED]
|
|
633
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
634
|
+
this[UPDATE_ON_CONNECTED].push(propName);
|
|
635
|
+
}
|
|
404
636
|
}
|
|
405
637
|
}
|
|
406
638
|
}
|
|
407
639
|
}
|
|
408
640
|
};
|
|
409
|
-
EnhancedElement.observedProperties = [];
|
|
410
|
-
|
|
411
|
-
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}";
|
|
412
641
|
|
|
413
642
|
class DotLottiePlayer extends EnhancedElement {
|
|
414
643
|
async connectedCallback() {
|
|
415
644
|
super.connectedCallback();
|
|
416
|
-
this.
|
|
645
|
+
this._render();
|
|
417
646
|
this._container = this.shadow.querySelector('.animation');
|
|
418
|
-
this.
|
|
647
|
+
this._renderControls();
|
|
419
648
|
if (typeof document.hidden !== 'undefined') {
|
|
420
649
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
421
650
|
}
|
|
@@ -454,8 +683,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
454
683
|
if (value === '' || Boolean(value)) {
|
|
455
684
|
this._lottieInstance.autoplay = false;
|
|
456
685
|
addEventListener('scroll', this._handleScroll, {
|
|
457
|
-
|
|
458
|
-
|
|
686
|
+
capture: true,
|
|
687
|
+
passive: true
|
|
459
688
|
});
|
|
460
689
|
return;
|
|
461
690
|
}
|
|
@@ -472,7 +701,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
472
701
|
this.stop();
|
|
473
702
|
}
|
|
474
703
|
if (name === 'controls') {
|
|
475
|
-
this.
|
|
704
|
+
this._renderControls();
|
|
476
705
|
}
|
|
477
706
|
if (name === 'direction') {
|
|
478
707
|
if (Number(value) === -1) {
|
|
@@ -536,7 +765,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
536
765
|
if (value === PlayerState.Playing) {
|
|
537
766
|
togglePlay.innerHTML = `
|
|
538
767
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
539
|
-
<path
|
|
768
|
+
<path
|
|
769
|
+
d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
|
|
770
|
+
/>
|
|
540
771
|
</svg>
|
|
541
772
|
`;
|
|
542
773
|
} else {
|
|
@@ -795,11 +1026,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
795
1026
|
initialSegment = undefined;
|
|
796
1027
|
}
|
|
797
1028
|
const options = {
|
|
1029
|
+
autoplay,
|
|
798
1030
|
container: this._container,
|
|
1031
|
+
initialSegment,
|
|
799
1032
|
loop,
|
|
800
|
-
autoplay,
|
|
801
1033
|
renderer: this.renderer,
|
|
802
|
-
initialSegment,
|
|
803
1034
|
rendererSettings: {
|
|
804
1035
|
imagePreserveAspectRatio: preserveAspectRatio
|
|
805
1036
|
}
|
|
@@ -858,7 +1089,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
858
1089
|
return;
|
|
859
1090
|
}
|
|
860
1091
|
try {
|
|
861
|
-
const { animations,
|
|
1092
|
+
const { animations, isDotLottie, manifest } = await getAnimationData(src);
|
|
862
1093
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
863
1094
|
throw new Error('Broken or corrupted file');
|
|
864
1095
|
}
|
|
@@ -873,10 +1104,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
873
1104
|
this._manifest = manifest ?? {
|
|
874
1105
|
animations: [
|
|
875
1106
|
{
|
|
876
|
-
id: useId(),
|
|
877
1107
|
autoplay: !this.animateOnScroll && this.autoplay,
|
|
878
|
-
loop: this.loop,
|
|
879
1108
|
direction: this.direction,
|
|
1109
|
+
id: useId(),
|
|
1110
|
+
loop: this.loop,
|
|
880
1111
|
mode: this.mode,
|
|
881
1112
|
speed: this.speed
|
|
882
1113
|
}
|
|
@@ -922,20 +1153,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
922
1153
|
}
|
|
923
1154
|
_toggleEventListeners(action) {
|
|
924
1155
|
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
925
|
-
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
926
|
-
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
927
|
-
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
928
|
-
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
929
|
-
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
930
|
-
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
931
|
-
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
932
|
-
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
933
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
934
|
-
seeker?.[method]('change', this._handleSeekChange);
|
|
935
|
-
seeker?.[method]('mousedown', this._freeze);
|
|
936
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
937
|
-
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
938
|
-
toggleSettings?.[method]('blur', this._handleBlur);
|
|
939
1156
|
if (this._lottieInstance) {
|
|
940
1157
|
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
941
1158
|
this._lottieInstance[method]('complete', this._complete);
|
|
@@ -949,17 +1166,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
949
1166
|
this._container[method]('mouseleave', this._mouseLeave);
|
|
950
1167
|
}
|
|
951
1168
|
window[method]('focus', this._handleWindowBlur, {
|
|
952
|
-
|
|
953
|
-
|
|
1169
|
+
capture: false,
|
|
1170
|
+
passive: true
|
|
954
1171
|
});
|
|
955
1172
|
window[method]('blur', this._handleWindowBlur, {
|
|
956
|
-
|
|
957
|
-
|
|
1173
|
+
capture: false,
|
|
1174
|
+
passive: true
|
|
958
1175
|
});
|
|
959
1176
|
if (this.animateOnScroll) {
|
|
960
1177
|
window[method]('scroll', this._handleScroll, {
|
|
961
|
-
|
|
962
|
-
|
|
1178
|
+
capture: true,
|
|
1179
|
+
passive: true
|
|
963
1180
|
});
|
|
964
1181
|
}
|
|
965
1182
|
}
|
|
@@ -973,7 +1190,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
973
1190
|
if (!this._lottieInstance) {
|
|
974
1191
|
return;
|
|
975
1192
|
}
|
|
976
|
-
const {
|
|
1193
|
+
const { playDirection, totalFrames } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
|
|
977
1194
|
if (this.count) {
|
|
978
1195
|
if (this._isBounce) {
|
|
979
1196
|
this._playerState.count += 0.5;
|
|
@@ -1149,18 +1366,18 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1149
1366
|
animations?.push(...animationsToAdd);
|
|
1150
1367
|
}
|
|
1151
1368
|
return {
|
|
1152
|
-
success: true,
|
|
1153
1369
|
result: await createDotLottie({
|
|
1154
1370
|
animations,
|
|
1155
|
-
manifest,
|
|
1156
1371
|
fileName,
|
|
1372
|
+
manifest,
|
|
1157
1373
|
shouldDownload
|
|
1158
|
-
})
|
|
1374
|
+
}),
|
|
1375
|
+
success: true
|
|
1159
1376
|
};
|
|
1160
1377
|
} catch (err) {
|
|
1161
1378
|
return {
|
|
1162
|
-
|
|
1163
|
-
|
|
1379
|
+
error: handleErrors(err).message,
|
|
1380
|
+
success: false
|
|
1164
1381
|
};
|
|
1165
1382
|
}
|
|
1166
1383
|
}
|
|
@@ -1249,8 +1466,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1249
1466
|
return;
|
|
1250
1467
|
}
|
|
1251
1468
|
download(data, {
|
|
1252
|
-
|
|
1253
|
-
|
|
1469
|
+
mimeType: 'image/svg+xml',
|
|
1470
|
+
name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`
|
|
1254
1471
|
});
|
|
1255
1472
|
return data;
|
|
1256
1473
|
}
|
|
@@ -1333,7 +1550,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1333
1550
|
return this._lottieInstance.goToAndPlay(0, true);
|
|
1334
1551
|
}
|
|
1335
1552
|
toggleLoop() {
|
|
1336
|
-
|
|
1553
|
+
const val = !this.loop;
|
|
1554
|
+
this.loop = val;
|
|
1555
|
+
this.setLoop(val);
|
|
1337
1556
|
}
|
|
1338
1557
|
toggleBoomerang() {
|
|
1339
1558
|
const curr = this.multiAnimationSettings?.[this._currentAnimation];
|
|
@@ -1409,7 +1628,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1409
1628
|
this._currentAnimation--;
|
|
1410
1629
|
this._switchInstance(true);
|
|
1411
1630
|
}
|
|
1412
|
-
async convert({
|
|
1631
|
+
async convert({ animations, fileName, manifest, shouldDownload = true, src, typeCheck }) {
|
|
1413
1632
|
if (typeCheck || this._isDotLottie) {
|
|
1414
1633
|
return createJSON({
|
|
1415
1634
|
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
@@ -1419,11 +1638,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1419
1638
|
}
|
|
1420
1639
|
return createDotLottie({
|
|
1421
1640
|
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
1641
|
+
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1422
1642
|
manifest: {
|
|
1423
1643
|
...manifest || this._manifest,
|
|
1424
1644
|
generator: pkg.name
|
|
1425
1645
|
},
|
|
1426
|
-
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1427
1646
|
shouldDownload
|
|
1428
1647
|
});
|
|
1429
1648
|
}
|
|
@@ -1432,236 +1651,15 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1432
1651
|
styleSheet.replace(css_248z);
|
|
1433
1652
|
return styleSheet;
|
|
1434
1653
|
}
|
|
1435
|
-
renderControls() {
|
|
1436
|
-
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
1437
|
-
if (!slot) {
|
|
1438
|
-
return;
|
|
1439
|
-
}
|
|
1440
|
-
slot.innerHTML = this.controls ? `
|
|
1441
|
-
<div
|
|
1442
|
-
class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
|
|
1443
|
-
aria-label="Lottie Animation controls"
|
|
1444
|
-
>
|
|
1445
|
-
<button
|
|
1446
|
-
class="togglePlay"
|
|
1447
|
-
data-active="false"
|
|
1448
|
-
tabindex="0"
|
|
1449
|
-
aria-label="Toggle Play/Pause"
|
|
1450
|
-
>
|
|
1451
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1452
|
-
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1453
|
-
</svg>
|
|
1454
|
-
</button>
|
|
1455
|
-
|
|
1456
|
-
<button
|
|
1457
|
-
class="stop"
|
|
1458
|
-
data-active="true"
|
|
1459
|
-
tabindex="0"
|
|
1460
|
-
aria-label="Stop"
|
|
1461
|
-
>
|
|
1462
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1463
|
-
<path d="M6 6h12v12H6V6z" />
|
|
1464
|
-
</svg>
|
|
1465
|
-
</button>
|
|
1466
|
-
<button
|
|
1467
|
-
class="prev"
|
|
1468
|
-
tabindex="0"
|
|
1469
|
-
aria-label="Previous animation"
|
|
1470
|
-
hidden
|
|
1471
|
-
>
|
|
1472
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1473
|
-
<path
|
|
1474
|
-
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1475
|
-
/>
|
|
1476
|
-
</svg>
|
|
1477
|
-
</button>
|
|
1478
|
-
<button
|
|
1479
|
-
class="next"
|
|
1480
|
-
tabindex="0"
|
|
1481
|
-
aria-label="Next animation"
|
|
1482
|
-
hidden
|
|
1483
|
-
>
|
|
1484
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1485
|
-
<path
|
|
1486
|
-
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1487
|
-
/>
|
|
1488
|
-
</svg>
|
|
1489
|
-
</button>
|
|
1490
|
-
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1491
|
-
<input
|
|
1492
|
-
class="seeker"
|
|
1493
|
-
type="range"
|
|
1494
|
-
min="0"
|
|
1495
|
-
max="100"
|
|
1496
|
-
step="1"
|
|
1497
|
-
value="${this._seeker.toString()}"
|
|
1498
|
-
aria-valuemin="0"
|
|
1499
|
-
aria-valuemax="100"
|
|
1500
|
-
role="slider"
|
|
1501
|
-
aria-valuenow="${this._seeker.toString()}"
|
|
1502
|
-
tabindex="0"
|
|
1503
|
-
aria-label="Slider for search"
|
|
1504
|
-
/>
|
|
1505
|
-
<progress max="100" value="${this._seeker}"></progress>
|
|
1506
|
-
</form>
|
|
1507
|
-
${this.simple ? '' : ` <button
|
|
1508
|
-
class="toggleLoop"
|
|
1509
|
-
data-active="${this.loop}"
|
|
1510
|
-
tabindex="0"
|
|
1511
|
-
aria-label="Toggle loop"
|
|
1512
|
-
>
|
|
1513
|
-
<svg
|
|
1514
|
-
width="24"
|
|
1515
|
-
height="24"
|
|
1516
|
-
aria-hidden="true"
|
|
1517
|
-
focusable="false"
|
|
1518
|
-
>
|
|
1519
|
-
<path
|
|
1520
|
-
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"
|
|
1521
|
-
/>
|
|
1522
|
-
</svg>
|
|
1523
|
-
</button>
|
|
1524
|
-
<button
|
|
1525
|
-
class="toggleBoomerang"
|
|
1526
|
-
data-active="${this.mode === PlayMode.Bounce}"
|
|
1527
|
-
aria-label="Toggle boomerang"
|
|
1528
|
-
tabindex="0"
|
|
1529
|
-
>
|
|
1530
|
-
<svg
|
|
1531
|
-
width="24"
|
|
1532
|
-
height="24"
|
|
1533
|
-
aria-hidden="true"
|
|
1534
|
-
focusable="false"
|
|
1535
|
-
>
|
|
1536
|
-
<path
|
|
1537
|
-
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"
|
|
1538
|
-
/>
|
|
1539
|
-
</svg>
|
|
1540
|
-
</button>
|
|
1541
|
-
<button
|
|
1542
|
-
class="toggleSettings"
|
|
1543
|
-
aria-label="Settings"
|
|
1544
|
-
aria-haspopup="true"
|
|
1545
|
-
aria-expanded="${!!this._isSettingsOpen}"
|
|
1546
|
-
aria-controls="${this._identifier}-settings"
|
|
1547
|
-
>
|
|
1548
|
-
<svg
|
|
1549
|
-
width="24"
|
|
1550
|
-
height="24"
|
|
1551
|
-
aria-hidden="true"
|
|
1552
|
-
focusable="false"
|
|
1553
|
-
>
|
|
1554
|
-
<circle cx="12" cy="5.4" r="2.5" />
|
|
1555
|
-
<circle cx="12" cy="12" r="2.5" />
|
|
1556
|
-
<circle cx="12" cy="18.6" r="2.5" />
|
|
1557
|
-
</svg>
|
|
1558
|
-
</button>
|
|
1559
|
-
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1560
|
-
<button
|
|
1561
|
-
class="convert"
|
|
1562
|
-
aria-label="Convert JSON animation to dotLottie format"
|
|
1563
|
-
tabindex="0"
|
|
1564
|
-
hidden
|
|
1565
|
-
>
|
|
1566
|
-
<svg
|
|
1567
|
-
width="24"
|
|
1568
|
-
height="24"
|
|
1569
|
-
aria-hidden="true"
|
|
1570
|
-
focusable="false"
|
|
1571
|
-
>
|
|
1572
|
-
<path
|
|
1573
|
-
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"
|
|
1574
|
-
/>
|
|
1575
|
-
</svg>
|
|
1576
|
-
Convert to dotLottie
|
|
1577
|
-
</button>
|
|
1578
|
-
<button
|
|
1579
|
-
class="snapshot"
|
|
1580
|
-
aria-label="Download still image"
|
|
1581
|
-
tabindex="0"
|
|
1582
|
-
>
|
|
1583
|
-
<svg
|
|
1584
|
-
width="24"
|
|
1585
|
-
height="24"
|
|
1586
|
-
aria-hidden="true"
|
|
1587
|
-
focusable="false"
|
|
1588
|
-
>
|
|
1589
|
-
<path
|
|
1590
|
-
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"
|
|
1591
|
-
/>
|
|
1592
|
-
</svg>
|
|
1593
|
-
Download still image
|
|
1594
|
-
</button>
|
|
1595
|
-
</div>`}
|
|
1596
|
-
</div>
|
|
1597
|
-
` : '';
|
|
1598
|
-
}
|
|
1599
|
-
render() {
|
|
1600
|
-
this.template.innerHTML = `
|
|
1601
|
-
<figure
|
|
1602
|
-
class="animation-container main"
|
|
1603
|
-
data-controls="${this.controls ?? false}"
|
|
1604
|
-
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1605
|
-
role="img"
|
|
1606
|
-
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1607
|
-
data-loaded="${this._playerState.loaded}"
|
|
1608
|
-
>
|
|
1609
|
-
<div class="animation" style="background:${this.background}">
|
|
1610
|
-
${this.playerState === PlayerState.Error ? ` <div class="error">
|
|
1611
|
-
<svg
|
|
1612
|
-
preserveAspectRatio="xMidYMid slice"
|
|
1613
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1614
|
-
xml:space="preserve"
|
|
1615
|
-
width="1920"
|
|
1616
|
-
height="1080"
|
|
1617
|
-
viewBox="0 0 1920 1080"
|
|
1618
|
-
>
|
|
1619
|
-
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1620
|
-
<path
|
|
1621
|
-
fill="#3a6d8b"
|
|
1622
|
-
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"
|
|
1623
|
-
/>
|
|
1624
|
-
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1625
|
-
<text
|
|
1626
|
-
fill="#3a6d8b"
|
|
1627
|
-
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1628
|
-
x="50%"
|
|
1629
|
-
y="848.017"
|
|
1630
|
-
text-anchor="middle"
|
|
1631
|
-
>
|
|
1632
|
-
${this._errorMessage}
|
|
1633
|
-
</text>
|
|
1634
|
-
</svg>
|
|
1635
|
-
</div>` : ''}
|
|
1636
|
-
</div>
|
|
1637
|
-
<slot name="controls"></slot>
|
|
1638
|
-
</figure>
|
|
1639
|
-
`;
|
|
1640
|
-
this.shadow.adoptedStyleSheets = [
|
|
1641
|
-
DotLottiePlayer.styles
|
|
1642
|
-
];
|
|
1643
|
-
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1644
|
-
}
|
|
1645
1654
|
constructor(){
|
|
1646
|
-
super()
|
|
1647
|
-
this.playerState = PlayerState.Loading;
|
|
1648
|
-
this._isSettingsOpen = false;
|
|
1649
|
-
this._seeker = 0;
|
|
1650
|
-
this._currentAnimation = 0;
|
|
1651
|
-
this._lottieInstance = null;
|
|
1652
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1653
|
-
this._errorMessage = 'Something went wrong';
|
|
1654
|
-
this._isBounce = false;
|
|
1655
|
-
this._isDotLottie = false;
|
|
1656
|
-
this._playerState = {
|
|
1657
|
-
prev: PlayerState.Loading,
|
|
1655
|
+
super(), this._renderControls = renderControls, this._render = renderPlayer, this.playerState = PlayerState.Loading, this._isSettingsOpen = false, this._seeker = 0, this._currentAnimation = 0, this._lottieInstance = null, this._identifier = this.id || useId('dotlottie'), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
|
|
1658
1656
|
count: 0,
|
|
1659
1657
|
loaded: false,
|
|
1660
|
-
|
|
1658
|
+
prev: PlayerState.Loading,
|
|
1659
|
+
scrollTimeout: null,
|
|
1661
1660
|
scrollY: 0,
|
|
1662
|
-
|
|
1663
|
-
}
|
|
1664
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1661
|
+
visible: false
|
|
1662
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1665
1663
|
this._toggleSettings();
|
|
1666
1664
|
if (target instanceof HTMLElement) {
|
|
1667
1665
|
target.focus();
|
|
@@ -1686,7 +1684,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1686
1684
|
this.stop = this.stop.bind(this);
|
|
1687
1685
|
this.prev = this.prev.bind(this);
|
|
1688
1686
|
this.next = this.next.bind(this);
|
|
1689
|
-
this.
|
|
1687
|
+
this._renderControls = this._renderControls.bind(this);
|
|
1690
1688
|
this.snapshot = this.snapshot.bind(this);
|
|
1691
1689
|
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1692
1690
|
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|