@aarsteinmedia/dotlottie-player 3.0.9 → 3.2.0
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 +233 -19
- package/dist/custom-elements.json +58 -42
- package/dist/esm/index.js +231 -19
- package/dist/index.d.ts +10 -2
- package/dist/index.js +206 -2
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import Lottie from 'lottie-web';
|
|
2
1
|
import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
|
|
3
|
-
|
|
4
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.0.9";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":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.21.2","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.77.8",tslib:"^2.7.0",typescript:"^5.5.4"};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};
|
|
2
|
+
import Lottie from 'lottie-web';
|
|
5
3
|
|
|
6
4
|
var ObjectFit;
|
|
7
5
|
(function(ObjectFit) {
|
|
@@ -83,11 +81,11 @@ const addExt = (ext, str)=>{
|
|
|
83
81
|
if (!animations?.length || !manifest) {
|
|
84
82
|
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
85
83
|
}
|
|
86
|
-
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
84
|
+
const manifestCompressionLevel = 0, animationCompressionLevel = 9, name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
87
85
|
'manifest.json': [
|
|
88
86
|
strToU8(JSON.stringify(manifest), true),
|
|
89
87
|
{
|
|
90
|
-
level:
|
|
88
|
+
level: manifestCompressionLevel
|
|
91
89
|
}
|
|
92
90
|
]
|
|
93
91
|
};
|
|
@@ -103,14 +101,14 @@ const addExt = (ext, str)=>{
|
|
|
103
101
|
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
|
|
104
102
|
base64ToU8(dataURL),
|
|
105
103
|
{
|
|
106
|
-
level:
|
|
104
|
+
level: animationCompressionLevel
|
|
107
105
|
}
|
|
108
106
|
];
|
|
109
107
|
}
|
|
110
108
|
dotlottie[`animations/${manifest.animations[i].id}.json`] = [
|
|
111
109
|
strToU8(JSON.stringify(animation), true),
|
|
112
110
|
{
|
|
113
|
-
level:
|
|
111
|
+
level: animationCompressionLevel
|
|
114
112
|
}
|
|
115
113
|
];
|
|
116
114
|
}
|
|
@@ -289,6 +287,7 @@ const addExt = (ext, str)=>{
|
|
|
289
287
|
case 'png':
|
|
290
288
|
case 'gif':
|
|
291
289
|
case 'webp':
|
|
290
|
+
case 'avif':
|
|
292
291
|
return `image/${ext}`;
|
|
293
292
|
case 'mp3':
|
|
294
293
|
case 'mpeg':
|
|
@@ -360,6 +359,8 @@ const addExt = (ext, str)=>{
|
|
|
360
359
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
361
360
|
};
|
|
362
361
|
|
|
362
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.1.0";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":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.7.22","@types/node":"^22.5.2","@typescript-eslint/eslint-plugin":"^8.4.0","@typescript-eslint/parser":"^8.4.0",autoprefixer:"^10.4.20","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-import-resolver-typescript":"^3.6.3","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.11.0","eslint-plugin-prettier":"^5.2.1","postcss-flexbugs-fixes":"^5.0.2",prettier:"^3.3.3",rimraf:"^6.0.1",rollup:"^4.21.2","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.77.8",tslib:"^2.7.0",typescript:"^5.5.4"};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};
|
|
363
|
+
|
|
363
364
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
364
365
|
if (isServer()) {
|
|
365
366
|
global.HTMLElement = class EmptyHTMLElement extends HTMLElement {
|
|
@@ -533,9 +534,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
533
534
|
togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
|
|
534
535
|
stop.dataset.active = (value === PlayerState.Stopped).toString();
|
|
535
536
|
if (value === PlayerState.Playing) {
|
|
536
|
-
togglePlay.innerHTML =
|
|
537
|
+
togglePlay.innerHTML = `
|
|
538
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
539
|
+
<path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" />
|
|
540
|
+
</svg>
|
|
541
|
+
`;
|
|
537
542
|
} else {
|
|
538
|
-
togglePlay.innerHTML =
|
|
543
|
+
togglePlay.innerHTML = `
|
|
544
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
545
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
546
|
+
</svg>
|
|
547
|
+
`;
|
|
539
548
|
}
|
|
540
549
|
}
|
|
541
550
|
if (name === '_seeker' && typeof value === 'number') {
|
|
@@ -1139,14 +1148,20 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1139
1148
|
];
|
|
1140
1149
|
animations?.push(...animationsToAdd);
|
|
1141
1150
|
}
|
|
1142
|
-
return
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1151
|
+
return {
|
|
1152
|
+
success: true,
|
|
1153
|
+
result: await createDotLottie({
|
|
1154
|
+
animations,
|
|
1155
|
+
manifest,
|
|
1156
|
+
fileName,
|
|
1157
|
+
shouldDownload
|
|
1158
|
+
})
|
|
1159
|
+
};
|
|
1148
1160
|
} catch (err) {
|
|
1149
|
-
|
|
1161
|
+
return {
|
|
1162
|
+
success: false,
|
|
1163
|
+
error: handleErrors(err).message
|
|
1164
|
+
};
|
|
1150
1165
|
}
|
|
1151
1166
|
}
|
|
1152
1167
|
getLottie() {
|
|
@@ -1422,10 +1437,206 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1422
1437
|
if (!slot) {
|
|
1423
1438
|
return;
|
|
1424
1439
|
}
|
|
1425
|
-
slot.innerHTML = this.controls ?
|
|
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
|
+
` : '';
|
|
1426
1598
|
}
|
|
1427
1599
|
render() {
|
|
1428
|
-
this.template.innerHTML =
|
|
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
|
+
`;
|
|
1429
1640
|
this.shadow.adoptedStyleSheets = [
|
|
1430
1641
|
DotLottiePlayer.styles
|
|
1431
1642
|
];
|
|
@@ -1487,10 +1698,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1487
1698
|
});
|
|
1488
1699
|
}
|
|
1489
1700
|
}
|
|
1701
|
+
|
|
1490
1702
|
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1491
1703
|
const tagName = 'dotlottie-player';
|
|
1492
1704
|
if (!isServer()) {
|
|
1493
1705
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1494
1706
|
}
|
|
1495
1707
|
|
|
1496
|
-
export {
|
|
1708
|
+
export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };
|
package/dist/index.d.ts
CHANGED
|
@@ -232,7 +232,15 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
232
232
|
private _handleScroll;
|
|
233
233
|
private _handleSeekChange;
|
|
234
234
|
private _isLottie;
|
|
235
|
-
addAnimation(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<
|
|
235
|
+
addAnimation(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<{
|
|
236
|
+
success: boolean;
|
|
237
|
+
result: void | ArrayBuffer;
|
|
238
|
+
error?: undefined;
|
|
239
|
+
} | {
|
|
240
|
+
success: boolean;
|
|
241
|
+
error: string;
|
|
242
|
+
result?: undefined;
|
|
243
|
+
}>;
|
|
236
244
|
getLottie(): AnimationItem | null;
|
|
237
245
|
play(): Promise<void>;
|
|
238
246
|
pause(): void;
|
|
@@ -272,4 +280,4 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
272
280
|
|
|
273
281
|
declare const tagName = "dotlottie-player";
|
|
274
282
|
|
|
275
|
-
export {
|
|
283
|
+
export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };
|