@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/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,7 +360,234 @@ 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()) {
|
|
@@ -411,14 +639,12 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
411
639
|
}
|
|
412
640
|
};
|
|
413
641
|
|
|
414
|
-
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}";
|
|
415
|
-
|
|
416
642
|
class DotLottiePlayer extends EnhancedElement {
|
|
417
643
|
async connectedCallback() {
|
|
418
644
|
super.connectedCallback();
|
|
419
|
-
this.
|
|
645
|
+
this._render();
|
|
420
646
|
this._container = this.shadow.querySelector('.animation');
|
|
421
|
-
this.
|
|
647
|
+
this._renderControls();
|
|
422
648
|
if (typeof document.hidden !== 'undefined') {
|
|
423
649
|
document.addEventListener('visibilitychange', this._onVisibilityChange);
|
|
424
650
|
}
|
|
@@ -457,8 +683,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
457
683
|
if (value === '' || Boolean(value)) {
|
|
458
684
|
this._lottieInstance.autoplay = false;
|
|
459
685
|
addEventListener('scroll', this._handleScroll, {
|
|
460
|
-
|
|
461
|
-
|
|
686
|
+
capture: true,
|
|
687
|
+
passive: true
|
|
462
688
|
});
|
|
463
689
|
return;
|
|
464
690
|
}
|
|
@@ -475,7 +701,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
475
701
|
this.stop();
|
|
476
702
|
}
|
|
477
703
|
if (name === 'controls') {
|
|
478
|
-
this.
|
|
704
|
+
this._renderControls();
|
|
479
705
|
}
|
|
480
706
|
if (name === 'direction') {
|
|
481
707
|
if (Number(value) === -1) {
|
|
@@ -539,7 +765,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
539
765
|
if (value === PlayerState.Playing) {
|
|
540
766
|
togglePlay.innerHTML = `
|
|
541
767
|
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
542
|
-
<path
|
|
768
|
+
<path
|
|
769
|
+
d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"
|
|
770
|
+
/>
|
|
543
771
|
</svg>
|
|
544
772
|
`;
|
|
545
773
|
} else {
|
|
@@ -798,11 +1026,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
798
1026
|
initialSegment = undefined;
|
|
799
1027
|
}
|
|
800
1028
|
const options = {
|
|
1029
|
+
autoplay,
|
|
801
1030
|
container: this._container,
|
|
1031
|
+
initialSegment,
|
|
802
1032
|
loop,
|
|
803
|
-
autoplay,
|
|
804
1033
|
renderer: this.renderer,
|
|
805
|
-
initialSegment,
|
|
806
1034
|
rendererSettings: {
|
|
807
1035
|
imagePreserveAspectRatio: preserveAspectRatio
|
|
808
1036
|
}
|
|
@@ -861,7 +1089,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
861
1089
|
return;
|
|
862
1090
|
}
|
|
863
1091
|
try {
|
|
864
|
-
const { animations,
|
|
1092
|
+
const { animations, isDotLottie, manifest } = await getAnimationData(src);
|
|
865
1093
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
866
1094
|
throw new Error('Broken or corrupted file');
|
|
867
1095
|
}
|
|
@@ -876,10 +1104,10 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
876
1104
|
this._manifest = manifest ?? {
|
|
877
1105
|
animations: [
|
|
878
1106
|
{
|
|
879
|
-
id: useId(),
|
|
880
1107
|
autoplay: !this.animateOnScroll && this.autoplay,
|
|
881
|
-
loop: this.loop,
|
|
882
1108
|
direction: this.direction,
|
|
1109
|
+
id: useId(),
|
|
1110
|
+
loop: this.loop,
|
|
883
1111
|
mode: this.mode,
|
|
884
1112
|
speed: this.speed
|
|
885
1113
|
}
|
|
@@ -925,20 +1153,6 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
925
1153
|
}
|
|
926
1154
|
_toggleEventListeners(action) {
|
|
927
1155
|
const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
|
|
928
|
-
this.shadow.querySelector('.togglePlay')?.[method]('click', this.togglePlay);
|
|
929
|
-
this.shadow.querySelector('.stop')?.[method]('click', this.stop);
|
|
930
|
-
this.shadow.querySelector('.prev')?.[method]('click', this.prev);
|
|
931
|
-
this.shadow.querySelector('.next')?.[method]('click', this.next);
|
|
932
|
-
this.shadow.querySelector('.toggleLoop')?.[method]('click', this.toggleLoop);
|
|
933
|
-
this.shadow.querySelector('.toggleBoomerang')?.[method]('click', this.toggleBoomerang);
|
|
934
|
-
this.shadow.querySelector('.convert')?.[method]('click', this.convert);
|
|
935
|
-
this.shadow.querySelector('.snapshot')?.[method]('click', this.snapshot);
|
|
936
|
-
const seeker = this.shadow.querySelector('.seeker');
|
|
937
|
-
seeker?.[method]('change', this._handleSeekChange);
|
|
938
|
-
seeker?.[method]('mousedown', this._freeze);
|
|
939
|
-
const toggleSettings = this.shadow.querySelector('.toggleSettings');
|
|
940
|
-
toggleSettings?.[method]('click', this._handleSettingsClick);
|
|
941
|
-
toggleSettings?.[method]('blur', this._handleBlur);
|
|
942
1156
|
if (this._lottieInstance) {
|
|
943
1157
|
this._lottieInstance[method]('enterFrame', this._enterFrame);
|
|
944
1158
|
this._lottieInstance[method]('complete', this._complete);
|
|
@@ -952,17 +1166,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
952
1166
|
this._container[method]('mouseleave', this._mouseLeave);
|
|
953
1167
|
}
|
|
954
1168
|
window[method]('focus', this._handleWindowBlur, {
|
|
955
|
-
|
|
956
|
-
|
|
1169
|
+
capture: false,
|
|
1170
|
+
passive: true
|
|
957
1171
|
});
|
|
958
1172
|
window[method]('blur', this._handleWindowBlur, {
|
|
959
|
-
|
|
960
|
-
|
|
1173
|
+
capture: false,
|
|
1174
|
+
passive: true
|
|
961
1175
|
});
|
|
962
1176
|
if (this.animateOnScroll) {
|
|
963
1177
|
window[method]('scroll', this._handleScroll, {
|
|
964
|
-
|
|
965
|
-
|
|
1178
|
+
capture: true,
|
|
1179
|
+
passive: true
|
|
966
1180
|
});
|
|
967
1181
|
}
|
|
968
1182
|
}
|
|
@@ -976,7 +1190,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
976
1190
|
if (!this._lottieInstance) {
|
|
977
1191
|
return;
|
|
978
1192
|
}
|
|
979
|
-
const {
|
|
1193
|
+
const { playDirection, totalFrames } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
|
|
980
1194
|
if (this.count) {
|
|
981
1195
|
if (this._isBounce) {
|
|
982
1196
|
this._playerState.count += 0.5;
|
|
@@ -1152,18 +1366,18 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1152
1366
|
animations?.push(...animationsToAdd);
|
|
1153
1367
|
}
|
|
1154
1368
|
return {
|
|
1155
|
-
success: true,
|
|
1156
1369
|
result: await createDotLottie({
|
|
1157
1370
|
animations,
|
|
1158
|
-
manifest,
|
|
1159
1371
|
fileName,
|
|
1372
|
+
manifest,
|
|
1160
1373
|
shouldDownload
|
|
1161
|
-
})
|
|
1374
|
+
}),
|
|
1375
|
+
success: true
|
|
1162
1376
|
};
|
|
1163
1377
|
} catch (err) {
|
|
1164
1378
|
return {
|
|
1165
|
-
|
|
1166
|
-
|
|
1379
|
+
error: handleErrors(err).message,
|
|
1380
|
+
success: false
|
|
1167
1381
|
};
|
|
1168
1382
|
}
|
|
1169
1383
|
}
|
|
@@ -1252,8 +1466,8 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1252
1466
|
return;
|
|
1253
1467
|
}
|
|
1254
1468
|
download(data, {
|
|
1255
|
-
|
|
1256
|
-
|
|
1469
|
+
mimeType: 'image/svg+xml',
|
|
1470
|
+
name: `${getFilename(this.src)}-${frameOutput(this._seeker)}.svg`
|
|
1257
1471
|
});
|
|
1258
1472
|
return data;
|
|
1259
1473
|
}
|
|
@@ -1336,7 +1550,9 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1336
1550
|
return this._lottieInstance.goToAndPlay(0, true);
|
|
1337
1551
|
}
|
|
1338
1552
|
toggleLoop() {
|
|
1339
|
-
|
|
1553
|
+
const val = !this.loop;
|
|
1554
|
+
this.loop = val;
|
|
1555
|
+
this.setLoop(val);
|
|
1340
1556
|
}
|
|
1341
1557
|
toggleBoomerang() {
|
|
1342
1558
|
const curr = this.multiAnimationSettings?.[this._currentAnimation];
|
|
@@ -1412,7 +1628,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1412
1628
|
this._currentAnimation--;
|
|
1413
1629
|
this._switchInstance(true);
|
|
1414
1630
|
}
|
|
1415
|
-
async convert({
|
|
1631
|
+
async convert({ animations, fileName, manifest, shouldDownload = true, src, typeCheck }) {
|
|
1416
1632
|
if (typeCheck || this._isDotLottie) {
|
|
1417
1633
|
return createJSON({
|
|
1418
1634
|
animation: (await getAnimationData(src || this.src))?.animations?.[0],
|
|
@@ -1422,11 +1638,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1422
1638
|
}
|
|
1423
1639
|
return createDotLottie({
|
|
1424
1640
|
animations: animations || (await getAnimationData(this.src))?.animations,
|
|
1641
|
+
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1425
1642
|
manifest: {
|
|
1426
1643
|
...manifest || this._manifest,
|
|
1427
1644
|
generator: pkg.name
|
|
1428
1645
|
},
|
|
1429
|
-
fileName: `${getFilename(fileName || this.src || 'converted')}.lottie`,
|
|
1430
1646
|
shouldDownload
|
|
1431
1647
|
});
|
|
1432
1648
|
}
|
|
@@ -1435,224 +1651,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1435
1651
|
styleSheet.replace(css_248z);
|
|
1436
1652
|
return styleSheet;
|
|
1437
1653
|
}
|
|
1438
|
-
renderControls() {
|
|
1439
|
-
const slot = this.shadow.querySelector('slot[name=controls]');
|
|
1440
|
-
if (!slot) {
|
|
1441
|
-
return;
|
|
1442
|
-
}
|
|
1443
|
-
slot.innerHTML = this.controls ? `
|
|
1444
|
-
<div
|
|
1445
|
-
class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}"
|
|
1446
|
-
aria-label="Lottie Animation controls"
|
|
1447
|
-
>
|
|
1448
|
-
<button
|
|
1449
|
-
class="togglePlay"
|
|
1450
|
-
data-active="false"
|
|
1451
|
-
tabindex="0"
|
|
1452
|
-
aria-label="Toggle Play/Pause"
|
|
1453
|
-
>
|
|
1454
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1455
|
-
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1456
|
-
</svg>
|
|
1457
|
-
</button>
|
|
1458
|
-
|
|
1459
|
-
<button
|
|
1460
|
-
class="stop"
|
|
1461
|
-
data-active="true"
|
|
1462
|
-
tabindex="0"
|
|
1463
|
-
aria-label="Stop"
|
|
1464
|
-
>
|
|
1465
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1466
|
-
<path d="M6 6h12v12H6V6z" />
|
|
1467
|
-
</svg>
|
|
1468
|
-
</button>
|
|
1469
|
-
<button
|
|
1470
|
-
class="prev"
|
|
1471
|
-
tabindex="0"
|
|
1472
|
-
aria-label="Previous animation"
|
|
1473
|
-
hidden
|
|
1474
|
-
>
|
|
1475
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1476
|
-
<path
|
|
1477
|
-
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1478
|
-
/>
|
|
1479
|
-
</svg>
|
|
1480
|
-
</button>
|
|
1481
|
-
<button
|
|
1482
|
-
class="next"
|
|
1483
|
-
tabindex="0"
|
|
1484
|
-
aria-label="Next animation"
|
|
1485
|
-
hidden
|
|
1486
|
-
>
|
|
1487
|
-
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1488
|
-
<path
|
|
1489
|
-
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1490
|
-
/>
|
|
1491
|
-
</svg>
|
|
1492
|
-
</button>
|
|
1493
|
-
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1494
|
-
<input
|
|
1495
|
-
class="seeker"
|
|
1496
|
-
type="range"
|
|
1497
|
-
min="0"
|
|
1498
|
-
max="100"
|
|
1499
|
-
step="1"
|
|
1500
|
-
value="${this._seeker.toString()}"
|
|
1501
|
-
aria-valuemin="0"
|
|
1502
|
-
aria-valuemax="100"
|
|
1503
|
-
role="slider"
|
|
1504
|
-
aria-valuenow="${this._seeker.toString()}"
|
|
1505
|
-
tabindex="0"
|
|
1506
|
-
aria-label="Slider for search"
|
|
1507
|
-
/>
|
|
1508
|
-
<progress max="100" value="${this._seeker}"></progress>
|
|
1509
|
-
</form>
|
|
1510
|
-
${this.simple ? '' : ` <button
|
|
1511
|
-
class="toggleLoop"
|
|
1512
|
-
data-active="${this.loop}"
|
|
1513
|
-
tabindex="0"
|
|
1514
|
-
aria-label="Toggle loop"
|
|
1515
|
-
>
|
|
1516
|
-
<svg
|
|
1517
|
-
width="24"
|
|
1518
|
-
height="24"
|
|
1519
|
-
aria-hidden="true"
|
|
1520
|
-
focusable="false"
|
|
1521
|
-
>
|
|
1522
|
-
<path
|
|
1523
|
-
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"
|
|
1524
|
-
/>
|
|
1525
|
-
</svg>
|
|
1526
|
-
</button>
|
|
1527
|
-
<button
|
|
1528
|
-
class="toggleBoomerang"
|
|
1529
|
-
data-active="${this.mode === PlayMode.Bounce}"
|
|
1530
|
-
aria-label="Toggle boomerang"
|
|
1531
|
-
tabindex="0"
|
|
1532
|
-
>
|
|
1533
|
-
<svg
|
|
1534
|
-
width="24"
|
|
1535
|
-
height="24"
|
|
1536
|
-
aria-hidden="true"
|
|
1537
|
-
focusable="false"
|
|
1538
|
-
>
|
|
1539
|
-
<path
|
|
1540
|
-
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"
|
|
1541
|
-
/>
|
|
1542
|
-
</svg>
|
|
1543
|
-
</button>
|
|
1544
|
-
<button
|
|
1545
|
-
class="toggleSettings"
|
|
1546
|
-
aria-label="Settings"
|
|
1547
|
-
aria-haspopup="true"
|
|
1548
|
-
aria-expanded="${!!this._isSettingsOpen}"
|
|
1549
|
-
aria-controls="${this._identifier}-settings"
|
|
1550
|
-
>
|
|
1551
|
-
<svg
|
|
1552
|
-
width="24"
|
|
1553
|
-
height="24"
|
|
1554
|
-
aria-hidden="true"
|
|
1555
|
-
focusable="false"
|
|
1556
|
-
>
|
|
1557
|
-
<circle cx="12" cy="5.4" r="2.5" />
|
|
1558
|
-
<circle cx="12" cy="12" r="2.5" />
|
|
1559
|
-
<circle cx="12" cy="18.6" r="2.5" />
|
|
1560
|
-
</svg>
|
|
1561
|
-
</button>
|
|
1562
|
-
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1563
|
-
<button
|
|
1564
|
-
class="convert"
|
|
1565
|
-
aria-label="Convert JSON animation to dotLottie format"
|
|
1566
|
-
tabindex="0"
|
|
1567
|
-
hidden
|
|
1568
|
-
>
|
|
1569
|
-
<svg
|
|
1570
|
-
width="24"
|
|
1571
|
-
height="24"
|
|
1572
|
-
aria-hidden="true"
|
|
1573
|
-
focusable="false"
|
|
1574
|
-
>
|
|
1575
|
-
<path
|
|
1576
|
-
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"
|
|
1577
|
-
/>
|
|
1578
|
-
</svg>
|
|
1579
|
-
Convert to dotLottie
|
|
1580
|
-
</button>
|
|
1581
|
-
<button
|
|
1582
|
-
class="snapshot"
|
|
1583
|
-
aria-label="Download still image"
|
|
1584
|
-
tabindex="0"
|
|
1585
|
-
>
|
|
1586
|
-
<svg
|
|
1587
|
-
width="24"
|
|
1588
|
-
height="24"
|
|
1589
|
-
aria-hidden="true"
|
|
1590
|
-
focusable="false"
|
|
1591
|
-
>
|
|
1592
|
-
<path
|
|
1593
|
-
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"
|
|
1594
|
-
/>
|
|
1595
|
-
</svg>
|
|
1596
|
-
Download still image
|
|
1597
|
-
</button>
|
|
1598
|
-
</div>`}
|
|
1599
|
-
</div>
|
|
1600
|
-
` : '';
|
|
1601
|
-
}
|
|
1602
|
-
render() {
|
|
1603
|
-
this.template.innerHTML = `
|
|
1604
|
-
<figure
|
|
1605
|
-
class="animation-container main"
|
|
1606
|
-
data-controls="${this.controls ?? false}"
|
|
1607
|
-
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1608
|
-
role="img"
|
|
1609
|
-
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1610
|
-
data-loaded="${this._playerState.loaded}"
|
|
1611
|
-
>
|
|
1612
|
-
<div class="animation" style="background:${this.background}">
|
|
1613
|
-
${this.playerState === PlayerState.Error ? ` <div class="error">
|
|
1614
|
-
<svg
|
|
1615
|
-
preserveAspectRatio="xMidYMid slice"
|
|
1616
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
1617
|
-
xml:space="preserve"
|
|
1618
|
-
width="1920"
|
|
1619
|
-
height="1080"
|
|
1620
|
-
viewBox="0 0 1920 1080"
|
|
1621
|
-
>
|
|
1622
|
-
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1623
|
-
<path
|
|
1624
|
-
fill="#3a6d8b"
|
|
1625
|
-
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"
|
|
1626
|
-
/>
|
|
1627
|
-
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1628
|
-
<text
|
|
1629
|
-
fill="#3a6d8b"
|
|
1630
|
-
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1631
|
-
x="50%"
|
|
1632
|
-
y="848.017"
|
|
1633
|
-
text-anchor="middle"
|
|
1634
|
-
>
|
|
1635
|
-
${this._errorMessage}
|
|
1636
|
-
</text>
|
|
1637
|
-
</svg>
|
|
1638
|
-
</div>` : ''}
|
|
1639
|
-
</div>
|
|
1640
|
-
<slot name="controls"></slot>
|
|
1641
|
-
</figure>
|
|
1642
|
-
`;
|
|
1643
|
-
this.shadow.adoptedStyleSheets = [
|
|
1644
|
-
DotLottiePlayer.styles
|
|
1645
|
-
];
|
|
1646
|
-
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1647
|
-
}
|
|
1648
1654
|
constructor(){
|
|
1649
|
-
super(), 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 = {
|
|
1650
|
-
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 = {
|
|
1651
1656
|
count: 0,
|
|
1652
1657
|
loaded: false,
|
|
1653
|
-
|
|
1658
|
+
prev: PlayerState.Loading,
|
|
1659
|
+
scrollTimeout: null,
|
|
1654
1660
|
scrollY: 0,
|
|
1655
|
-
|
|
1661
|
+
visible: false
|
|
1656
1662
|
}, this._handleSettingsClick = ({ target })=>{
|
|
1657
1663
|
this._toggleSettings();
|
|
1658
1664
|
if (target instanceof HTMLElement) {
|
|
@@ -1678,7 +1684,7 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1678
1684
|
this.stop = this.stop.bind(this);
|
|
1679
1685
|
this.prev = this.prev.bind(this);
|
|
1680
1686
|
this.next = this.next.bind(this);
|
|
1681
|
-
this.
|
|
1687
|
+
this._renderControls = this._renderControls.bind(this);
|
|
1682
1688
|
this.snapshot = this.snapshot.bind(this);
|
|
1683
1689
|
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1684
1690
|
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|