@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/README.md
CHANGED
|
@@ -154,7 +154,7 @@ If you're using TypeScript and want to assign the component a `ref`, you can do
|
|
|
154
154
|
```tsx
|
|
155
155
|
import { useRef } from 'react'
|
|
156
156
|
import '@aarsteinmedia/dotlottie-player'
|
|
157
|
-
import type
|
|
157
|
+
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
158
158
|
|
|
159
159
|
function App() {
|
|
160
160
|
const animation = useRef<DotLottiePlayer | null>(null)
|
|
@@ -216,7 +216,7 @@ export default defineNuxtConfig({
|
|
|
216
216
|
|
|
217
217
|
```typescript
|
|
218
218
|
import { createApp } from 'vue'
|
|
219
|
-
import
|
|
219
|
+
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
220
220
|
import App from './App.vue'
|
|
221
221
|
|
|
222
222
|
const app = createApp(App)
|
|
@@ -227,7 +227,7 @@ app.component('DotLottiePlayer', DotLottiePlayer)
|
|
|
227
227
|
Create a `plugins` folder in your root if it doesn't exist already, add a file named `dotlottie-player.js`:
|
|
228
228
|
|
|
229
229
|
```javascript
|
|
230
|
-
import
|
|
230
|
+
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
231
231
|
|
|
232
232
|
export default defineNuxtPlugin(({ vueApp }) => {
|
|
233
233
|
vueApp.component('DotLottiePlayer', DotLottiePlayer)
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
var fflate = require('fflate');
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
5
4
|
|
|
6
|
-
var
|
|
5
|
+
var fflate = require('fflate');
|
|
6
|
+
var Lottie = require('lottie-web');
|
|
7
7
|
|
|
8
8
|
var ObjectFit;
|
|
9
9
|
(function(ObjectFit) {
|
|
@@ -363,9 +363,11 @@ const addExt = (ext, str)=>{
|
|
|
363
363
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
364
364
|
};
|
|
365
365
|
|
|
366
|
+
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$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"git+https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var contributors=[{name:"Anthony Colpron",email:"anthonycolpron@gmail.com",url:"https://github.com/anthony-colpron"}];var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.10.3","@rollup/plugin-commonjs":"^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$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,contributors:contributors,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements$1,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
367
|
+
|
|
366
368
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
367
369
|
if (isServer()) {
|
|
368
|
-
global.HTMLElement = class EmptyHTMLElement
|
|
370
|
+
global.HTMLElement = class EmptyHTMLElement {
|
|
369
371
|
};
|
|
370
372
|
}
|
|
371
373
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -378,7 +380,9 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
378
380
|
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
379
381
|
continue;
|
|
380
382
|
}
|
|
381
|
-
|
|
383
|
+
if (propName in this) {
|
|
384
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
385
|
+
}
|
|
382
386
|
}
|
|
383
387
|
}
|
|
384
388
|
constructor(){
|
|
@@ -402,13 +406,14 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
402
406
|
}
|
|
403
407
|
});
|
|
404
408
|
if (typeof initialValue !== 'undefined') {
|
|
405
|
-
this[UPDATE_ON_CONNECTED]
|
|
409
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
410
|
+
this[UPDATE_ON_CONNECTED].push(propName);
|
|
411
|
+
}
|
|
406
412
|
}
|
|
407
413
|
}
|
|
408
414
|
}
|
|
409
415
|
}
|
|
410
416
|
};
|
|
411
|
-
EnhancedElement.observedProperties = [];
|
|
412
417
|
|
|
413
418
|
var css_248z = "* {\n box-sizing: border-box;\n}\n\n:host {\n --lottie-player-toolbar-height: 35px;\n --lottie-player-toolbar-background-color: #FFF;\n --lottie-player-toolbar-icon-color: #000;\n --lottie-player-toolbar-icon-hover-color: #000;\n --lottie-player-toolbar-icon-active-color: #4285f4;\n --lottie-player-seeker-track-color: rgba(0, 0, 0, 0.2);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n display: block;\n width: 100%;\n height: 100%;\n}\n:host .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n}\n:host .animation {\n width: 100%;\n height: 100%;\n display: flex;\n}\n:host [data-controls=true] .animation {\n height: calc(100% - 35px);\n}\n:host .animation-container {\n position: relative;\n}\n:host .popover {\n position: absolute;\n right: 5px;\n bottom: 40px;\n background-color: var(--lottie-player-toolbar-background-color);\n border-radius: 5px;\n padding: 10px 15px;\n border: solid 2px var(--lottie-player-toolbar-icon-color);\n animation: fadeIn 0.2s ease-in-out;\n}\n:host .popover::before {\n content: \"\";\n right: 10px;\n border: 7px solid transparent;\n border-top-color: transparent;\n margin-right: -7px;\n height: 0;\n width: 0;\n position: absolute;\n pointer-events: none;\n top: 100%;\n border-top-color: var(--lottie-player-toolbar-icon-color);\n}\n:host .toolbar {\n display: flex;\n align-items: center;\n justify-items: center;\n background: var(--lottie-player-toolbar-background-color);\n margin: 0;\n height: 35px;\n padding: 5px;\n border-radius: 5px;\n gap: 5px;\n}\n:host .toolbar.has-error {\n pointer-events: none;\n opacity: 0.5;\n}\n:host .toolbar button {\n cursor: pointer;\n fill: var(--lottie-player-toolbar-icon-color);\n color: var(--lottie-player-toolbar-icon-color);\n background: none;\n border: 0;\n padding: 0;\n outline: 0;\n height: 100%;\n margin: 0;\n align-items: center;\n gap: 5px;\n opacity: 0.9;\n}\n:host .toolbar button:not([hidden]) {\n display: flex;\n}\n:host .toolbar button:hover {\n opacity: 1;\n}\n:host .toolbar button[data-active=true] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n}\n:host .toolbar button:disabled {\n opacity: 0.5;\n}\n:host .toolbar button:focus {\n outline: 0;\n}\n:host .toolbar button svg {\n pointer-events: none;\n}\n:host .toolbar button svg > * {\n fill: inherit;\n}\n:host .toolbar button.disabled svg {\n display: none;\n}\n:host .progress-container {\n position: relative;\n width: 100%;\n}\n:host .progress-container.simple {\n margin-right: 12px;\n}\n:host .seeker {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n width: 100%;\n height: 20px;\n border-radius: 3px;\n border: 0;\n cursor: pointer;\n background-color: transparent;\n /* background-color: var(--lottie-player-seeker-track-color); */\n display: var(--lottie-player-seeker-display);\n color: var(--lottie-player-seeker-thumb-color);\n margin: 0;\n padding: 7.5px 0;\n position: relative;\n z-index: 1;\n}\n:host .seeker::-webkit-slider-runnable-track, :host .seeker::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n outline: none;\n}\n:host .seeker::-webkit-slider-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n border: 0;\n background-color: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -webkit-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-webkit-slider-thumb, :host .seeker:focus::-webkit-slider-thumb {\n transform: scale(1);\n}\n:host .seeker::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n}\n:host .seeker::-moz-range-thumb {\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background-color: var(--lottie-player-seeker-thumb-color);\n border: 0;\n cursor: pointer;\n -moz-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-moz-range-thumb, :host .seeker:focus::-moz-range-thumb {\n transform: scale(1);\n}\n:host .seeker::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n}\n:host .seeker::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n}\n:host .seeker::-ms-thumb {\n border: 0;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: var(--lottie-player-seeker-thumb-color);\n cursor: pointer;\n -ms-transition: transform 0.2s ease-in-out;\n transition: transform 0.2s ease-in-out;\n transform: scale(0);\n}\n:host .seeker:hover::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-thumb {\n transform: scale(1);\n}\n:host .seeker:focus::-ms-fill-lower, :host .seeker:focus::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n}\n:host progress {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n outline: none;\n}\n:host progress {\n position: absolute;\n width: 100%;\n height: 5px;\n border-radius: 3px;\n border: 0;\n top: 0;\n left: 0;\n margin: 7.5px 0;\n background-color: var(--lottie-player-seeker-track-color);\n pointer-events: none;\n}\n:host ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host ::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n}\n:host ::-webkit-slider-runnable-track {\n background-color: transparent;\n}\n:host ::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n}\n:host .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n}\n:host .error svg {\n width: 100%;\n height: auto;\n}\n\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n }\n 100% {\n opacity: 1;\n }\n}\n@media (prefers-color-scheme: dark) {\n :host {\n --lottie-player-toolbar-background-color: #000;\n --lottie-player-toolbar-icon-color: #FFF;\n --lottie-player-toolbar-icon-hover-color: #FFF;\n --lottie-player-seeker-track-color: rgba(255, 255, 255, 0.6);\n }\n}";
|
|
414
419
|
|
|
@@ -536,9 +541,17 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
536
541
|
togglePlay.dataset.active = (value === exports.PlayerState.Playing || value === exports.PlayerState.Paused).toString();
|
|
537
542
|
stop.dataset.active = (value === exports.PlayerState.Stopped).toString();
|
|
538
543
|
if (value === exports.PlayerState.Playing) {
|
|
539
|
-
togglePlay.innerHTML =
|
|
544
|
+
togglePlay.innerHTML = `
|
|
545
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
546
|
+
<path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z" />
|
|
547
|
+
</svg>
|
|
548
|
+
`;
|
|
540
549
|
} else {
|
|
541
|
-
togglePlay.innerHTML =
|
|
550
|
+
togglePlay.innerHTML = `
|
|
551
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
552
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
553
|
+
</svg>
|
|
554
|
+
`;
|
|
542
555
|
}
|
|
543
556
|
}
|
|
544
557
|
if (name === '_seeker' && typeof value === 'number') {
|
|
@@ -1431,35 +1444,220 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1431
1444
|
if (!slot) {
|
|
1432
1445
|
return;
|
|
1433
1446
|
}
|
|
1434
|
-
slot.innerHTML = this.controls ?
|
|
1447
|
+
slot.innerHTML = this.controls ? `
|
|
1448
|
+
<div
|
|
1449
|
+
class="lottie-controls toolbar ${this.playerState === exports.PlayerState.Error ? 'has-error' : ''}"
|
|
1450
|
+
aria-label="Lottie Animation controls"
|
|
1451
|
+
>
|
|
1452
|
+
<button
|
|
1453
|
+
class="togglePlay"
|
|
1454
|
+
data-active="false"
|
|
1455
|
+
tabindex="0"
|
|
1456
|
+
aria-label="Toggle Play/Pause"
|
|
1457
|
+
>
|
|
1458
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1459
|
+
<path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
|
|
1460
|
+
</svg>
|
|
1461
|
+
</button>
|
|
1462
|
+
|
|
1463
|
+
<button
|
|
1464
|
+
class="stop"
|
|
1465
|
+
data-active="true"
|
|
1466
|
+
tabindex="0"
|
|
1467
|
+
aria-label="Stop"
|
|
1468
|
+
>
|
|
1469
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1470
|
+
<path d="M6 6h12v12H6V6z" />
|
|
1471
|
+
</svg>
|
|
1472
|
+
</button>
|
|
1473
|
+
<button
|
|
1474
|
+
class="prev"
|
|
1475
|
+
tabindex="0"
|
|
1476
|
+
aria-label="Previous animation"
|
|
1477
|
+
hidden
|
|
1478
|
+
>
|
|
1479
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1480
|
+
<path
|
|
1481
|
+
d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"
|
|
1482
|
+
/>
|
|
1483
|
+
</svg>
|
|
1484
|
+
</button>
|
|
1485
|
+
<button
|
|
1486
|
+
class="next"
|
|
1487
|
+
tabindex="0"
|
|
1488
|
+
aria-label="Next animation"
|
|
1489
|
+
hidden
|
|
1490
|
+
>
|
|
1491
|
+
<svg width="24" height="24" aria-hidden="true" focusable="false">
|
|
1492
|
+
<path
|
|
1493
|
+
d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"
|
|
1494
|
+
/>
|
|
1495
|
+
</svg>
|
|
1496
|
+
</button>
|
|
1497
|
+
<form class="progress-container${this.simple ? ' simple' : ''}">
|
|
1498
|
+
<input
|
|
1499
|
+
class="seeker"
|
|
1500
|
+
type="range"
|
|
1501
|
+
min="0"
|
|
1502
|
+
max="100"
|
|
1503
|
+
step="1"
|
|
1504
|
+
value="${this._seeker.toString()}"
|
|
1505
|
+
aria-valuemin="0"
|
|
1506
|
+
aria-valuemax="100"
|
|
1507
|
+
role="slider"
|
|
1508
|
+
aria-valuenow="${this._seeker.toString()}"
|
|
1509
|
+
tabindex="0"
|
|
1510
|
+
aria-label="Slider for search"
|
|
1511
|
+
/>
|
|
1512
|
+
<progress max="100" value="${this._seeker}"></progress>
|
|
1513
|
+
</form>
|
|
1514
|
+
${this.simple ? '' : ` <button
|
|
1515
|
+
class="toggleLoop"
|
|
1516
|
+
data-active="${this.loop}"
|
|
1517
|
+
tabindex="0"
|
|
1518
|
+
aria-label="Toggle loop"
|
|
1519
|
+
>
|
|
1520
|
+
<svg
|
|
1521
|
+
width="24"
|
|
1522
|
+
height="24"
|
|
1523
|
+
aria-hidden="true"
|
|
1524
|
+
focusable="false"
|
|
1525
|
+
>
|
|
1526
|
+
<path
|
|
1527
|
+
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
1528
|
+
/>
|
|
1529
|
+
</svg>
|
|
1530
|
+
</button>
|
|
1531
|
+
<button
|
|
1532
|
+
class="toggleBoomerang"
|
|
1533
|
+
data-active="${this.mode === exports.PlayMode.Bounce}"
|
|
1534
|
+
aria-label="Toggle boomerang"
|
|
1535
|
+
tabindex="0"
|
|
1536
|
+
>
|
|
1537
|
+
<svg
|
|
1538
|
+
width="24"
|
|
1539
|
+
height="24"
|
|
1540
|
+
aria-hidden="true"
|
|
1541
|
+
focusable="false"
|
|
1542
|
+
>
|
|
1543
|
+
<path
|
|
1544
|
+
d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"
|
|
1545
|
+
/>
|
|
1546
|
+
</svg>
|
|
1547
|
+
</button>
|
|
1548
|
+
<button
|
|
1549
|
+
class="toggleSettings"
|
|
1550
|
+
aria-label="Settings"
|
|
1551
|
+
aria-haspopup="true"
|
|
1552
|
+
aria-expanded="${!!this._isSettingsOpen}"
|
|
1553
|
+
aria-controls="${this._identifier}-settings"
|
|
1554
|
+
>
|
|
1555
|
+
<svg
|
|
1556
|
+
width="24"
|
|
1557
|
+
height="24"
|
|
1558
|
+
aria-hidden="true"
|
|
1559
|
+
focusable="false"
|
|
1560
|
+
>
|
|
1561
|
+
<circle cx="12" cy="5.4" r="2.5" />
|
|
1562
|
+
<circle cx="12" cy="12" r="2.5" />
|
|
1563
|
+
<circle cx="12" cy="18.6" r="2.5" />
|
|
1564
|
+
</svg>
|
|
1565
|
+
</button>
|
|
1566
|
+
<div id="${this._identifier}-settings" class="popover" hidden>
|
|
1567
|
+
<button
|
|
1568
|
+
class="convert"
|
|
1569
|
+
aria-label="Convert JSON animation to dotLottie format"
|
|
1570
|
+
tabindex="0"
|
|
1571
|
+
hidden
|
|
1572
|
+
>
|
|
1573
|
+
<svg
|
|
1574
|
+
width="24"
|
|
1575
|
+
height="24"
|
|
1576
|
+
aria-hidden="true"
|
|
1577
|
+
focusable="false"
|
|
1578
|
+
>
|
|
1579
|
+
<path
|
|
1580
|
+
d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"
|
|
1581
|
+
/>
|
|
1582
|
+
</svg>
|
|
1583
|
+
Convert to dotLottie
|
|
1584
|
+
</button>
|
|
1585
|
+
<button
|
|
1586
|
+
class="snapshot"
|
|
1587
|
+
aria-label="Download still image"
|
|
1588
|
+
tabindex="0"
|
|
1589
|
+
>
|
|
1590
|
+
<svg
|
|
1591
|
+
width="24"
|
|
1592
|
+
height="24"
|
|
1593
|
+
aria-hidden="true"
|
|
1594
|
+
focusable="false"
|
|
1595
|
+
>
|
|
1596
|
+
<path
|
|
1597
|
+
d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"
|
|
1598
|
+
/>
|
|
1599
|
+
</svg>
|
|
1600
|
+
Download still image
|
|
1601
|
+
</button>
|
|
1602
|
+
</div>`}
|
|
1603
|
+
</div>
|
|
1604
|
+
` : '';
|
|
1435
1605
|
}
|
|
1436
1606
|
render() {
|
|
1437
|
-
this.template.innerHTML =
|
|
1607
|
+
this.template.innerHTML = `
|
|
1608
|
+
<figure
|
|
1609
|
+
class="animation-container main"
|
|
1610
|
+
data-controls="${this.controls ?? false}"
|
|
1611
|
+
lang="${this.description ? document?.documentElement?.lang : 'en'}"
|
|
1612
|
+
role="img"
|
|
1613
|
+
aria-label="${this.description ?? 'Lottie animation'}"
|
|
1614
|
+
data-loaded="${this._playerState.loaded}"
|
|
1615
|
+
>
|
|
1616
|
+
<div class="animation" style="background:${this.background}">
|
|
1617
|
+
${this.playerState === exports.PlayerState.Error ? ` <div class="error">
|
|
1618
|
+
<svg
|
|
1619
|
+
preserveAspectRatio="xMidYMid slice"
|
|
1620
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
1621
|
+
xml:space="preserve"
|
|
1622
|
+
width="1920"
|
|
1623
|
+
height="1080"
|
|
1624
|
+
viewBox="0 0 1920 1080"
|
|
1625
|
+
>
|
|
1626
|
+
<path fill="#fff" d="M0 0h1920v1080H0z" />
|
|
1627
|
+
<path
|
|
1628
|
+
fill="#3a6d8b"
|
|
1629
|
+
d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"
|
|
1630
|
+
/>
|
|
1631
|
+
<path fill="none" d="M718.9 807.7h645v285.4h-645z" />
|
|
1632
|
+
<text
|
|
1633
|
+
fill="#3a6d8b"
|
|
1634
|
+
style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif;"
|
|
1635
|
+
x="50%"
|
|
1636
|
+
y="848.017"
|
|
1637
|
+
text-anchor="middle"
|
|
1638
|
+
>
|
|
1639
|
+
${this._errorMessage}
|
|
1640
|
+
</text>
|
|
1641
|
+
</svg>
|
|
1642
|
+
</div>` : ''}
|
|
1643
|
+
</div>
|
|
1644
|
+
<slot name="controls"></slot>
|
|
1645
|
+
</figure>
|
|
1646
|
+
`;
|
|
1438
1647
|
this.shadow.adoptedStyleSheets = [
|
|
1439
1648
|
DotLottiePlayer.styles
|
|
1440
1649
|
];
|
|
1441
1650
|
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1442
1651
|
}
|
|
1443
1652
|
constructor(){
|
|
1444
|
-
super()
|
|
1445
|
-
this.playerState = exports.PlayerState.Loading;
|
|
1446
|
-
this._isSettingsOpen = false;
|
|
1447
|
-
this._seeker = 0;
|
|
1448
|
-
this._currentAnimation = 0;
|
|
1449
|
-
this._lottieInstance = null;
|
|
1450
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1451
|
-
this._errorMessage = 'Something went wrong';
|
|
1452
|
-
this._isBounce = false;
|
|
1453
|
-
this._isDotLottie = false;
|
|
1454
|
-
this._playerState = {
|
|
1653
|
+
super(), this.playerState = exports.PlayerState.Loading, this._isSettingsOpen = false, this._seeker = 0, this._currentAnimation = 0, this._lottieInstance = null, this._identifier = this.id || useId('dotlottie'), this._errorMessage = 'Something went wrong', this._isBounce = false, this._isDotLottie = false, this._playerState = {
|
|
1455
1654
|
prev: exports.PlayerState.Loading,
|
|
1456
1655
|
count: 0,
|
|
1457
1656
|
loaded: false,
|
|
1458
1657
|
visible: false,
|
|
1459
1658
|
scrollY: 0,
|
|
1460
1659
|
scrollTimeout: null
|
|
1461
|
-
}
|
|
1462
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1660
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1463
1661
|
this._toggleSettings();
|
|
1464
1662
|
if (target instanceof HTMLElement) {
|
|
1465
1663
|
target.focus();
|
|
@@ -1496,11 +1694,12 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1496
1694
|
});
|
|
1497
1695
|
}
|
|
1498
1696
|
}
|
|
1697
|
+
|
|
1499
1698
|
globalThis.dotLottiePlayer = ()=>new DotLottiePlayer();
|
|
1500
1699
|
const tagName = 'dotlottie-player';
|
|
1501
1700
|
if (!isServer()) {
|
|
1502
1701
|
customElements.define('dotlottie-player', DotLottiePlayer);
|
|
1503
1702
|
}
|
|
1504
1703
|
|
|
1505
|
-
exports.
|
|
1704
|
+
exports.default = DotLottiePlayer;
|
|
1506
1705
|
exports.tagName = tagName;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "src/
|
|
7
|
+
"path": "src/DotLottiePlayer.ts",
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
@@ -30,16 +30,8 @@
|
|
|
30
30
|
{
|
|
31
31
|
"kind": "field",
|
|
32
32
|
"name": "observedProperties",
|
|
33
|
-
"type": {
|
|
34
|
-
"text": "(keyof EnhancedElement)[]"
|
|
35
|
-
},
|
|
36
33
|
"static": true,
|
|
37
|
-
"
|
|
38
|
-
"readonly": true,
|
|
39
|
-
"inheritedFrom": {
|
|
40
|
-
"name": "EnhancedElement",
|
|
41
|
-
"module": "src/observeProperties.ts"
|
|
42
|
-
}
|
|
34
|
+
"readonly": true
|
|
43
35
|
},
|
|
44
36
|
{
|
|
45
37
|
"kind": "method",
|
|
@@ -751,11 +743,52 @@
|
|
|
751
743
|
],
|
|
752
744
|
"superclass": {
|
|
753
745
|
"name": "EnhancedElement",
|
|
754
|
-
"module": "/src/
|
|
746
|
+
"module": "/src/EnhancedElement"
|
|
755
747
|
},
|
|
756
748
|
"tagName": "dotlottie-player",
|
|
757
749
|
"customElement": true
|
|
758
|
-
}
|
|
750
|
+
}
|
|
751
|
+
],
|
|
752
|
+
"exports": [
|
|
753
|
+
{
|
|
754
|
+
"kind": "js",
|
|
755
|
+
"name": "DotLottiePlayer",
|
|
756
|
+
"declaration": {
|
|
757
|
+
"name": "DotLottiePlayer",
|
|
758
|
+
"module": "src/DotLottiePlayer.ts"
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
]
|
|
762
|
+
},
|
|
763
|
+
{
|
|
764
|
+
"kind": "javascript-module",
|
|
765
|
+
"path": "src/EnhancedElement.ts",
|
|
766
|
+
"declarations": [
|
|
767
|
+
{
|
|
768
|
+
"kind": "class",
|
|
769
|
+
"description": "HTMLElement enhanced to track property changes",
|
|
770
|
+
"name": "EnhancedElement",
|
|
771
|
+
"superclass": {
|
|
772
|
+
"name": "HTMLElement"
|
|
773
|
+
},
|
|
774
|
+
"customElement": true
|
|
775
|
+
}
|
|
776
|
+
],
|
|
777
|
+
"exports": [
|
|
778
|
+
{
|
|
779
|
+
"kind": "js",
|
|
780
|
+
"name": "default",
|
|
781
|
+
"declaration": {
|
|
782
|
+
"name": "EnhancedElement",
|
|
783
|
+
"module": "src/EnhancedElement.ts"
|
|
784
|
+
}
|
|
785
|
+
}
|
|
786
|
+
]
|
|
787
|
+
},
|
|
788
|
+
{
|
|
789
|
+
"kind": "javascript-module",
|
|
790
|
+
"path": "src/index.ts",
|
|
791
|
+
"declarations": [
|
|
759
792
|
{
|
|
760
793
|
"kind": "variable",
|
|
761
794
|
"name": "tagName",
|
|
@@ -768,7 +801,7 @@
|
|
|
768
801
|
"exports": [
|
|
769
802
|
{
|
|
770
803
|
"kind": "js",
|
|
771
|
-
"name": "
|
|
804
|
+
"name": "default",
|
|
772
805
|
"declaration": {
|
|
773
806
|
"name": "DotLottiePlayer",
|
|
774
807
|
"module": "src/index.ts"
|
|
@@ -811,43 +844,7 @@
|
|
|
811
844
|
"name": "dotlottie-player",
|
|
812
845
|
"declaration": {
|
|
813
846
|
"name": "DotLottiePlayer",
|
|
814
|
-
"module": "src/
|
|
815
|
-
}
|
|
816
|
-
}
|
|
817
|
-
]
|
|
818
|
-
},
|
|
819
|
-
{
|
|
820
|
-
"kind": "javascript-module",
|
|
821
|
-
"path": "src/observeProperties.ts",
|
|
822
|
-
"declarations": [
|
|
823
|
-
{
|
|
824
|
-
"kind": "class",
|
|
825
|
-
"description": "HTMLElement enhanced to track property changes",
|
|
826
|
-
"name": "EnhancedElement",
|
|
827
|
-
"members": [
|
|
828
|
-
{
|
|
829
|
-
"kind": "field",
|
|
830
|
-
"name": "observedProperties",
|
|
831
|
-
"type": {
|
|
832
|
-
"text": "(keyof EnhancedElement)[]"
|
|
833
|
-
},
|
|
834
|
-
"static": true,
|
|
835
|
-
"default": "[]"
|
|
836
|
-
}
|
|
837
|
-
],
|
|
838
|
-
"superclass": {
|
|
839
|
-
"name": "HTMLElement"
|
|
840
|
-
},
|
|
841
|
-
"customElement": true
|
|
842
|
-
}
|
|
843
|
-
],
|
|
844
|
-
"exports": [
|
|
845
|
-
{
|
|
846
|
-
"kind": "js",
|
|
847
|
-
"name": "default",
|
|
848
|
-
"declaration": {
|
|
849
|
-
"name": "EnhancedElement",
|
|
850
|
-
"module": "src/observeProperties.ts"
|
|
847
|
+
"module": "/src/DotLottiePlayer"
|
|
851
848
|
}
|
|
852
849
|
}
|
|
853
850
|
]
|