@aarsteinmedia/dotlottie-player 3.1.0 → 3.2.1
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 +224 -25
- package/dist/custom-elements.json +47 -50
- package/dist/esm/index.js +222 -25
- package/dist/index.d.ts +2 -4
- package/dist/index.js +206 -2
- package/package.json +2 -2
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.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};
|
|
2
|
+
import Lottie from 'lottie-web';
|
|
5
3
|
|
|
6
4
|
var ObjectFit;
|
|
7
5
|
(function(ObjectFit) {
|
|
@@ -361,9 +359,11 @@ const addExt = (ext, str)=>{
|
|
|
361
359
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
362
360
|
};
|
|
363
361
|
|
|
362
|
+
var name="@aarsteinmedia/dotlottie-player";var version="3.2.1";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.23","@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
|
+
|
|
364
364
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
365
365
|
if (isServer()) {
|
|
366
|
-
global.HTMLElement = class EmptyHTMLElement
|
|
366
|
+
global.HTMLElement = class EmptyHTMLElement {
|
|
367
367
|
};
|
|
368
368
|
}
|
|
369
369
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -376,7 +376,9 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
376
376
|
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
377
377
|
continue;
|
|
378
378
|
}
|
|
379
|
-
|
|
379
|
+
if (propName in this) {
|
|
380
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
381
|
+
}
|
|
380
382
|
}
|
|
381
383
|
}
|
|
382
384
|
constructor(){
|
|
@@ -400,13 +402,14 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
400
402
|
}
|
|
401
403
|
});
|
|
402
404
|
if (typeof initialValue !== 'undefined') {
|
|
403
|
-
this[UPDATE_ON_CONNECTED]
|
|
405
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
406
|
+
this[UPDATE_ON_CONNECTED].push(propName);
|
|
407
|
+
}
|
|
404
408
|
}
|
|
405
409
|
}
|
|
406
410
|
}
|
|
407
411
|
}
|
|
408
412
|
};
|
|
409
|
-
EnhancedElement.observedProperties = [];
|
|
410
413
|
|
|
411
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}";
|
|
412
415
|
|
|
@@ -534,9 +537,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
534
537
|
togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
|
|
535
538
|
stop.dataset.active = (value === PlayerState.Stopped).toString();
|
|
536
539
|
if (value === PlayerState.Playing) {
|
|
537
|
-
togglePlay.innerHTML =
|
|
540
|
+
togglePlay.innerHTML = `
|
|
541
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
542
|
+
<path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" />
|
|
543
|
+
</svg>
|
|
544
|
+
`;
|
|
538
545
|
} else {
|
|
539
|
-
togglePlay.innerHTML =
|
|
546
|
+
togglePlay.innerHTML = `
|
|
547
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
548
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
549
|
+
</svg>
|
|
550
|
+
`;
|
|
540
551
|
}
|
|
541
552
|
}
|
|
542
553
|
if (name === '_seeker' && typeof value === 'number') {
|
|
@@ -1429,35 +1440,220 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1429
1440
|
if (!slot) {
|
|
1430
1441
|
return;
|
|
1431
1442
|
}
|
|
1432
|
-
slot.innerHTML = this.controls ?
|
|
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
|
+
` : '';
|
|
1433
1601
|
}
|
|
1434
1602
|
render() {
|
|
1435
|
-
this.template.innerHTML =
|
|
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
|
+
`;
|
|
1436
1643
|
this.shadow.adoptedStyleSheets = [
|
|
1437
1644
|
DotLottiePlayer.styles
|
|
1438
1645
|
];
|
|
1439
1646
|
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1440
1647
|
}
|
|
1441
1648
|
constructor(){
|
|
1442
|
-
super()
|
|
1443
|
-
this.playerState = PlayerState.Loading;
|
|
1444
|
-
this._isSettingsOpen = false;
|
|
1445
|
-
this._seeker = 0;
|
|
1446
|
-
this._currentAnimation = 0;
|
|
1447
|
-
this._lottieInstance = null;
|
|
1448
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1449
|
-
this._errorMessage = 'Something went wrong';
|
|
1450
|
-
this._isBounce = false;
|
|
1451
|
-
this._isDotLottie = false;
|
|
1452
|
-
this._playerState = {
|
|
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 = {
|
|
1453
1650
|
prev: PlayerState.Loading,
|
|
1454
1651
|
count: 0,
|
|
1455
1652
|
loaded: false,
|
|
1456
1653
|
visible: false,
|
|
1457
1654
|
scrollY: 0,
|
|
1458
1655
|
scrollTimeout: null
|
|
1459
|
-
}
|
|
1460
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1656
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1461
1657
|
this._toggleSettings();
|
|
1462
1658
|
if (target instanceof HTMLElement) {
|
|
1463
1659
|
target.focus();
|
|
@@ -1494,10 +1690,11 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1494
1690
|
});
|
|
1495
1691
|
}
|
|
1496
1692
|
}
|
|
1693
|
+
|
|
1497
1694
|
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1498
1695
|
const tagName = 'dotlottie-player';
|
|
1499
1696
|
if (!isServer()) {
|
|
1500
1697
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1501
1698
|
}
|
|
1502
1699
|
|
|
1503
|
-
export {
|
|
1700
|
+
export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,9 +2,7 @@ import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } fro
|
|
|
2
2
|
import { RefObject, CSSProperties } from 'react';
|
|
3
3
|
|
|
4
4
|
declare class EnhancedElement extends HTMLElement {
|
|
5
|
-
[key: symbol]: unknown;
|
|
6
5
|
constructor();
|
|
7
|
-
static observedProperties: (keyof EnhancedElement)[];
|
|
8
6
|
connectedCallback(): void;
|
|
9
7
|
}
|
|
10
8
|
|
|
@@ -156,7 +154,7 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
156
154
|
template: HTMLTemplateElement;
|
|
157
155
|
static get observedAttributes(): string[];
|
|
158
156
|
attributeChangedCallback(name: string, _oldValue: unknown, value: string): void;
|
|
159
|
-
static get observedProperties():
|
|
157
|
+
static get observedProperties(): string[];
|
|
160
158
|
propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
|
|
161
159
|
set animateOnScroll(value: AnimateOnScroll);
|
|
162
160
|
get animateOnScroll(): AnimateOnScroll;
|
|
@@ -280,4 +278,4 @@ declare class DotLottiePlayer extends EnhancedElement {
|
|
|
280
278
|
|
|
281
279
|
declare const tagName = "dotlottie-player";
|
|
282
280
|
|
|
283
|
-
export {
|
|
281
|
+
export { PlayMode, PlayerEvents, PlayerState, DotLottiePlayer as default, tagName };
|