@aarsteinmedia/dotlottie-player 3.2.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 +10 -18
- package/dist/custom-elements.json +1 -20
- package/dist/esm/index.js +10 -18
- package/dist/index.d.ts +1 -3
- package/dist/index.js +1 -1
- 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
|
@@ -363,11 +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.1
|
|
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
367
|
|
|
368
368
|
const UPDATE_ON_CONNECTED = Symbol('UPDATE_ON_CONNECTED');
|
|
369
369
|
if (isServer()) {
|
|
370
|
-
global.HTMLElement = class EmptyHTMLElement
|
|
370
|
+
global.HTMLElement = class EmptyHTMLElement {
|
|
371
371
|
};
|
|
372
372
|
}
|
|
373
373
|
let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
@@ -380,7 +380,9 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
380
380
|
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
381
381
|
continue;
|
|
382
382
|
}
|
|
383
|
-
|
|
383
|
+
if (propName in this) {
|
|
384
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
385
|
+
}
|
|
384
386
|
}
|
|
385
387
|
}
|
|
386
388
|
constructor(){
|
|
@@ -404,13 +406,14 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
404
406
|
}
|
|
405
407
|
});
|
|
406
408
|
if (typeof initialValue !== 'undefined') {
|
|
407
|
-
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
|
+
}
|
|
408
412
|
}
|
|
409
413
|
}
|
|
410
414
|
}
|
|
411
415
|
}
|
|
412
416
|
};
|
|
413
|
-
EnhancedElement.observedProperties = [];
|
|
414
417
|
|
|
415
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}";
|
|
416
419
|
|
|
@@ -1647,25 +1650,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1647
1650
|
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1648
1651
|
}
|
|
1649
1652
|
constructor(){
|
|
1650
|
-
super()
|
|
1651
|
-
this.playerState = exports.PlayerState.Loading;
|
|
1652
|
-
this._isSettingsOpen = false;
|
|
1653
|
-
this._seeker = 0;
|
|
1654
|
-
this._currentAnimation = 0;
|
|
1655
|
-
this._lottieInstance = null;
|
|
1656
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1657
|
-
this._errorMessage = 'Something went wrong';
|
|
1658
|
-
this._isBounce = false;
|
|
1659
|
-
this._isDotLottie = false;
|
|
1660
|
-
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 = {
|
|
1661
1654
|
prev: exports.PlayerState.Loading,
|
|
1662
1655
|
count: 0,
|
|
1663
1656
|
loaded: false,
|
|
1664
1657
|
visible: false,
|
|
1665
1658
|
scrollY: 0,
|
|
1666
1659
|
scrollTimeout: null
|
|
1667
|
-
}
|
|
1668
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1660
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1669
1661
|
this._toggleSettings();
|
|
1670
1662
|
if (target instanceof HTMLElement) {
|
|
1671
1663
|
target.focus();
|
|
@@ -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/EnhancedElement.ts"
|
|
42
|
-
}
|
|
34
|
+
"readonly": true
|
|
43
35
|
},
|
|
44
36
|
{
|
|
45
37
|
"kind": "method",
|
|
@@ -776,17 +768,6 @@
|
|
|
776
768
|
"kind": "class",
|
|
777
769
|
"description": "HTMLElement enhanced to track property changes",
|
|
778
770
|
"name": "EnhancedElement",
|
|
779
|
-
"members": [
|
|
780
|
-
{
|
|
781
|
-
"kind": "field",
|
|
782
|
-
"name": "observedProperties",
|
|
783
|
-
"type": {
|
|
784
|
-
"text": "(keyof EnhancedElement)[]"
|
|
785
|
-
},
|
|
786
|
-
"static": true,
|
|
787
|
-
"default": "[]"
|
|
788
|
-
}
|
|
789
|
-
],
|
|
790
771
|
"superclass": {
|
|
791
772
|
"name": "HTMLElement"
|
|
792
773
|
},
|
package/dist/esm/index.js
CHANGED
|
@@ -359,11 +359,11 @@ const addExt = (ext, str)=>{
|
|
|
359
359
|
return `${prefix ?? `:${s4()}`}_${s4()}`;
|
|
360
360
|
};
|
|
361
361
|
|
|
362
|
-
var name="@aarsteinmedia/dotlottie-player";var version="3.1
|
|
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
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
|
|
|
@@ -1643,25 +1646,14 @@ class DotLottiePlayer extends EnhancedElement {
|
|
|
1643
1646
|
this.shadow.appendChild(this.template.content.cloneNode(true));
|
|
1644
1647
|
}
|
|
1645
1648
|
constructor(){
|
|
1646
|
-
super()
|
|
1647
|
-
this.playerState = PlayerState.Loading;
|
|
1648
|
-
this._isSettingsOpen = false;
|
|
1649
|
-
this._seeker = 0;
|
|
1650
|
-
this._currentAnimation = 0;
|
|
1651
|
-
this._lottieInstance = null;
|
|
1652
|
-
this._identifier = this.id || useId('dotlottie');
|
|
1653
|
-
this._errorMessage = 'Something went wrong';
|
|
1654
|
-
this._isBounce = false;
|
|
1655
|
-
this._isDotLottie = false;
|
|
1656
|
-
this._playerState = {
|
|
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 = {
|
|
1657
1650
|
prev: PlayerState.Loading,
|
|
1658
1651
|
count: 0,
|
|
1659
1652
|
loaded: false,
|
|
1660
1653
|
visible: false,
|
|
1661
1654
|
scrollY: 0,
|
|
1662
1655
|
scrollTimeout: null
|
|
1663
|
-
}
|
|
1664
|
-
this._handleSettingsClick = ({ target })=>{
|
|
1656
|
+
}, this._handleSettingsClick = ({ target })=>{
|
|
1665
1657
|
this._toggleSettings();
|
|
1666
1658
|
if (target instanceof HTMLElement) {
|
|
1667
1659
|
target.focus();
|
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;
|