@aarsteinmedia/dotlottie-player 4.0.11 → 4.0.13
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/CHANGELOG.md +15 -0
- package/custom-elements.json +650 -2
- package/dist/cjs/index.js +91 -83
- package/dist/esm/index.js +92 -84
- package/dist/index.js +2 -2
- package/package.json +32 -30
package/dist/cjs/index.js
CHANGED
|
@@ -495,21 +495,9 @@ if (isServer()) {
|
|
|
495
495
|
global.HTMLElement = class EmptyHTMLElement {
|
|
496
496
|
};
|
|
497
497
|
}
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
502
|
-
arr = this[UPDATE_ON_CONNECTED];
|
|
503
|
-
}
|
|
504
|
-
for (const propName of arr){
|
|
505
|
-
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
506
|
-
continue;
|
|
507
|
-
}
|
|
508
|
-
if (propName in this) {
|
|
509
|
-
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
510
|
-
}
|
|
511
|
-
}
|
|
512
|
-
}
|
|
498
|
+
/**
|
|
499
|
+
* HTMLElement enhanced to track property changes
|
|
500
|
+
*/ class EnhancedElement extends HTMLElement {
|
|
513
501
|
constructor(){
|
|
514
502
|
super();
|
|
515
503
|
// @ts-ignore
|
|
@@ -540,13 +528,96 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
540
528
|
}
|
|
541
529
|
}
|
|
542
530
|
}
|
|
543
|
-
|
|
531
|
+
connectedCallback() {
|
|
532
|
+
let arr = [];
|
|
533
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
534
|
+
arr = this[UPDATE_ON_CONNECTED];
|
|
535
|
+
}
|
|
536
|
+
for (const propName of arr){
|
|
537
|
+
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
538
|
+
continue;
|
|
539
|
+
}
|
|
540
|
+
if (propName in this) {
|
|
541
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
}
|
|
544
546
|
|
|
545
|
-
var
|
|
547
|
+
var name="@aarsteinmedia/dotlottie-player";var pkg = {name:name};
|
|
546
548
|
|
|
547
|
-
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: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n width: 100%;\n height: 100%;\n
|
|
549
|
+
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: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls=\"true\"] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .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: fade-in .2s ease-in-out;\n\n &::before {\n content: \"\";\n right: 10px;\n border: 7px solid 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 }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center 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 &.has-error {\n pointer-events: none;\n opacity: .5;\n }\n\n & 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: .9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active=\"true\"] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: .5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n >* {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n .seeker {\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\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 &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\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 &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\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: rgb(255 255 255 / 60%);\n }\n}\n";
|
|
548
550
|
|
|
549
|
-
|
|
551
|
+
/**
|
|
552
|
+
* dotLottie Player Web Component
|
|
553
|
+
* @export
|
|
554
|
+
* @class DotLottiePlayer
|
|
555
|
+
* @extends { EnhancedElement }
|
|
556
|
+
* @description Web Component for playing Lottie animations in your web app.
|
|
557
|
+
*/ class DotLottiePlayer extends EnhancedElement {
|
|
558
|
+
constructor(){
|
|
559
|
+
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
560
|
+
* Multi-animation settings
|
|
561
|
+
*/ this._multiAnimationSettings = [], /**
|
|
562
|
+
* Animation Container
|
|
563
|
+
*/ this._container = null, /**
|
|
564
|
+
* @state
|
|
565
|
+
* Player state
|
|
566
|
+
*/ this.playerState = PlayerState.Loading, /**
|
|
567
|
+
* @state
|
|
568
|
+
* Whether settings toolbar is open
|
|
569
|
+
*/ this._isSettingsOpen = false, /**
|
|
570
|
+
* @state
|
|
571
|
+
* Seeker
|
|
572
|
+
*/ this._seeker = 0, /**
|
|
573
|
+
* @state
|
|
574
|
+
* Which animation to show, if several
|
|
575
|
+
*/ 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 = {
|
|
576
|
+
count: 0,
|
|
577
|
+
loaded: false,
|
|
578
|
+
prev: PlayerState.Loading,
|
|
579
|
+
scrollTimeout: null,
|
|
580
|
+
scrollY: 0,
|
|
581
|
+
visible: false
|
|
582
|
+
}, /**
|
|
583
|
+
* Handle settings click event
|
|
584
|
+
*/ this._handleSettingsClick = ({ target })=>{
|
|
585
|
+
this._toggleSettings();
|
|
586
|
+
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
587
|
+
if (target instanceof HTMLElement) {
|
|
588
|
+
target.focus();
|
|
589
|
+
}
|
|
590
|
+
};
|
|
591
|
+
this._complete = this._complete.bind(this);
|
|
592
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
593
|
+
this._dataReady = this._dataReady.bind(this);
|
|
594
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
595
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
596
|
+
this._freeze = this._freeze.bind(this);
|
|
597
|
+
this._handleBlur = this._handleBlur.bind(this);
|
|
598
|
+
this._handleScroll = this._handleScroll.bind(this);
|
|
599
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
600
|
+
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
601
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
602
|
+
this._mouseEnter = this._mouseEnter.bind(this);
|
|
603
|
+
this._mouseLeave = this._mouseLeave.bind(this);
|
|
604
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
605
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
606
|
+
this.togglePlay = this.togglePlay.bind(this);
|
|
607
|
+
this.stop = this.stop.bind(this);
|
|
608
|
+
this.prev = this.prev.bind(this);
|
|
609
|
+
this.next = this.next.bind(this);
|
|
610
|
+
this._renderControls = this._renderControls.bind(this);
|
|
611
|
+
this.snapshot = this.snapshot.bind(this);
|
|
612
|
+
this.toggleLoop = this.toggleLoop.bind(this);
|
|
613
|
+
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
614
|
+
this.convert = this.convert.bind(this);
|
|
615
|
+
this.destroy = this.destroy.bind(this);
|
|
616
|
+
this.template = document.createElement('template');
|
|
617
|
+
this.shadow = this.attachShadow({
|
|
618
|
+
mode: 'open'
|
|
619
|
+
});
|
|
620
|
+
}
|
|
550
621
|
/**
|
|
551
622
|
* Initialize everything on component first render
|
|
552
623
|
*/ async connectedCallback() {
|
|
@@ -1715,70 +1786,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1715
1786
|
styleSheet.replace(css_248z);
|
|
1716
1787
|
return styleSheet;
|
|
1717
1788
|
}
|
|
1718
|
-
|
|
1719
|
-
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
1720
|
-
* Multi-animation settings
|
|
1721
|
-
*/ this._multiAnimationSettings = [], /**
|
|
1722
|
-
* Animation Container
|
|
1723
|
-
*/ this._container = null, /**
|
|
1724
|
-
* @state
|
|
1725
|
-
* Player state
|
|
1726
|
-
*/ this.playerState = PlayerState.Loading, /**
|
|
1727
|
-
* @state
|
|
1728
|
-
* Whether settings toolbar is open
|
|
1729
|
-
*/ this._isSettingsOpen = false, /**
|
|
1730
|
-
* @state
|
|
1731
|
-
* Seeker
|
|
1732
|
-
*/ this._seeker = 0, /**
|
|
1733
|
-
* @state
|
|
1734
|
-
* Which animation to show, if several
|
|
1735
|
-
*/ 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 = {
|
|
1736
|
-
count: 0,
|
|
1737
|
-
loaded: false,
|
|
1738
|
-
prev: PlayerState.Loading,
|
|
1739
|
-
scrollTimeout: null,
|
|
1740
|
-
scrollY: 0,
|
|
1741
|
-
visible: false
|
|
1742
|
-
}, /**
|
|
1743
|
-
* Handle settings click event
|
|
1744
|
-
*/ this._handleSettingsClick = ({ target })=>{
|
|
1745
|
-
this._toggleSettings();
|
|
1746
|
-
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
1747
|
-
if (target instanceof HTMLElement) {
|
|
1748
|
-
target.focus();
|
|
1749
|
-
}
|
|
1750
|
-
};
|
|
1751
|
-
this._complete = this._complete.bind(this);
|
|
1752
|
-
this._dataFailed = this._dataFailed.bind(this);
|
|
1753
|
-
this._dataReady = this._dataReady.bind(this);
|
|
1754
|
-
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
1755
|
-
this._enterFrame = this._enterFrame.bind(this);
|
|
1756
|
-
this._freeze = this._freeze.bind(this);
|
|
1757
|
-
this._handleBlur = this._handleBlur.bind(this);
|
|
1758
|
-
this._handleScroll = this._handleScroll.bind(this);
|
|
1759
|
-
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
1760
|
-
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
1761
|
-
this._loopComplete = this._loopComplete.bind(this);
|
|
1762
|
-
this._mouseEnter = this._mouseEnter.bind(this);
|
|
1763
|
-
this._mouseLeave = this._mouseLeave.bind(this);
|
|
1764
|
-
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
1765
|
-
this._switchInstance = this._switchInstance.bind(this);
|
|
1766
|
-
this.togglePlay = this.togglePlay.bind(this);
|
|
1767
|
-
this.stop = this.stop.bind(this);
|
|
1768
|
-
this.prev = this.prev.bind(this);
|
|
1769
|
-
this.next = this.next.bind(this);
|
|
1770
|
-
this._renderControls = this._renderControls.bind(this);
|
|
1771
|
-
this.snapshot = this.snapshot.bind(this);
|
|
1772
|
-
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1773
|
-
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
1774
|
-
this.convert = this.convert.bind(this);
|
|
1775
|
-
this.destroy = this.destroy.bind(this);
|
|
1776
|
-
this.template = document.createElement('template');
|
|
1777
|
-
this.shadow = this.attachShadow({
|
|
1778
|
-
mode: 'open'
|
|
1779
|
-
});
|
|
1780
|
-
}
|
|
1781
|
-
};
|
|
1789
|
+
}
|
|
1782
1790
|
|
|
1783
1791
|
/**
|
|
1784
1792
|
* Expose DotLottiePlayer class as global variable
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { strToU8,
|
|
1
|
+
import { strToU8, strFromU8, zip, unzip as unzip$1 } from 'fflate';
|
|
2
2
|
import * as Lottie from 'lottie-web/build/player/lottie.js';
|
|
3
3
|
|
|
4
4
|
var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
|
|
@@ -472,21 +472,9 @@ if (isServer()) {
|
|
|
472
472
|
global.HTMLElement = class EmptyHTMLElement {
|
|
473
473
|
};
|
|
474
474
|
}
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
479
|
-
arr = this[UPDATE_ON_CONNECTED];
|
|
480
|
-
}
|
|
481
|
-
for (const propName of arr){
|
|
482
|
-
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
483
|
-
continue;
|
|
484
|
-
}
|
|
485
|
-
if (propName in this) {
|
|
486
|
-
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
487
|
-
}
|
|
488
|
-
}
|
|
489
|
-
}
|
|
475
|
+
/**
|
|
476
|
+
* HTMLElement enhanced to track property changes
|
|
477
|
+
*/ class EnhancedElement extends HTMLElement {
|
|
490
478
|
constructor(){
|
|
491
479
|
super();
|
|
492
480
|
// @ts-ignore
|
|
@@ -517,13 +505,96 @@ let EnhancedElement = class EnhancedElement extends HTMLElement {
|
|
|
517
505
|
}
|
|
518
506
|
}
|
|
519
507
|
}
|
|
520
|
-
|
|
508
|
+
connectedCallback() {
|
|
509
|
+
let arr = [];
|
|
510
|
+
if (UPDATE_ON_CONNECTED in this && Array.isArray(this[UPDATE_ON_CONNECTED])) {
|
|
511
|
+
arr = this[UPDATE_ON_CONNECTED];
|
|
512
|
+
}
|
|
513
|
+
for (const propName of arr){
|
|
514
|
+
if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
|
|
515
|
+
continue;
|
|
516
|
+
}
|
|
517
|
+
if (propName in this) {
|
|
518
|
+
this.propertyChangedCallback(propName, undefined, this[propName]);
|
|
519
|
+
}
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
}
|
|
521
523
|
|
|
522
|
-
var
|
|
524
|
+
var name="@aarsteinmedia/dotlottie-player";var pkg = {name:name};
|
|
523
525
|
|
|
524
|
-
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: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n width: 100%;\n height: 100%;\n
|
|
526
|
+
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: rgb(0 0 0 / 20%);\n --lottie-player-seeker-thumb-color: #4285f4;\n --lottie-player-seeker-display: block;\n\n width: 100%;\n height: 100%;\n\n &:not([hidden]) {\n display: block;\n }\n\n .main {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n margin: 0;\n padding: 0;\n }\n\n .animation {\n width: 100%;\n height: 100%;\n display: flex;\n margin: 0;\n padding: 0;\n }\n\n [data-controls=\"true\"] .animation {\n height: calc(100% - 35px);\n }\n\n .animation-container {\n position: relative;\n }\n\n .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: fade-in .2s ease-in-out;\n\n &::before {\n content: \"\";\n right: 10px;\n border: 7px solid 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 }\n\n .error {\n display: flex;\n margin: auto;\n justify-content: center;\n height: 100%;\n align-items: center;\n\n & svg {\n width: 100%;\n height: auto;\n }\n }\n\n .toolbar {\n display: flex;\n place-items: center 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 &.has-error {\n pointer-events: none;\n opacity: .5;\n }\n\n & 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: .9;\n\n &:not([hidden]) {\n display: flex;\n }\n\n &:hover {\n opacity: 1;\n }\n\n &[data-active=\"true\"] {\n opacity: 1;\n fill: var(--lottie-player-toolbar-icon-active-color);\n }\n\n &:disabled {\n opacity: .5;\n }\n\n &:focus {\n outline: 0;\n }\n\n & svg {\n pointer-events: none;\n\n >* {\n fill: inherit;\n }\n }\n\n &.disabled svg {\n display: none;\n }\n }\n }\n\n .progress-container {\n position: relative;\n width: 100%;\n\n &.simple {\n margin-right: 12px;\n }\n }\n\n .seeker {\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\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 &::-webkit-slider-runnable-track,\n &::-webkit-slider-thumb {\n appearance: none;\n outline: none;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-webkit-slider-thumb,\n &:focus::-webkit-slider-thumb {\n transform: scale(1);\n }\n\n &::-moz-range-progress {\n background-color: var(--lottie-player-seeker-thumb-color);\n height: 5px;\n border-radius: 3px;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-moz-range-thumb,\n &:focus::-moz-range-thumb {\n transform: scale(1);\n }\n\n &::-ms-track {\n width: 100%;\n height: 5px;\n cursor: pointer;\n background: transparent;\n border-color: transparent;\n color: transparent;\n }\n\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n border-radius: 3px;\n }\n\n &::-ms-fill-lower {\n background-color: var(--lottie-player-seeker-thumb-color);\n border-radius: 3px;\n }\n\n &::-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 .2s ease-in-out;\n transition: transform .2s ease-in-out;\n transform: scale(0);\n }\n\n &:hover::-ms-thumb {\n transform: scale(1);\n }\n\n &:focus {\n &::-ms-thumb {\n transform: scale(1);\n }\n\n &::-ms-fill-lower,\n &::-ms-fill-upper {\n background: var(--lottie-player-seeker-track-color);\n }\n }\n }\n\n & progress {\n appearance: none;\n outline: none;\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 &::-webkit-progress-inner-element {\n border-radius: 3px;\n overflow: hidden;\n }\n\n &::-webkit-slider-runnable-track {\n background-color: transparent;\n }\n\n &::-webkit-progress-value {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n }\n\n ::-moz-progress-bar {\n background-color: var(--lottie-player-seeker-thumb-color);\n }\n\n}\n\n@keyframes fade-in {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\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: rgb(255 255 255 / 60%);\n }\n}\n";
|
|
525
527
|
|
|
526
|
-
|
|
528
|
+
/**
|
|
529
|
+
* dotLottie Player Web Component
|
|
530
|
+
* @export
|
|
531
|
+
* @class DotLottiePlayer
|
|
532
|
+
* @extends { EnhancedElement }
|
|
533
|
+
* @description Web Component for playing Lottie animations in your web app.
|
|
534
|
+
*/ class DotLottiePlayer extends EnhancedElement {
|
|
535
|
+
constructor(){
|
|
536
|
+
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
537
|
+
* Multi-animation settings
|
|
538
|
+
*/ this._multiAnimationSettings = [], /**
|
|
539
|
+
* Animation Container
|
|
540
|
+
*/ this._container = null, /**
|
|
541
|
+
* @state
|
|
542
|
+
* Player state
|
|
543
|
+
*/ this.playerState = PlayerState.Loading, /**
|
|
544
|
+
* @state
|
|
545
|
+
* Whether settings toolbar is open
|
|
546
|
+
*/ this._isSettingsOpen = false, /**
|
|
547
|
+
* @state
|
|
548
|
+
* Seeker
|
|
549
|
+
*/ this._seeker = 0, /**
|
|
550
|
+
* @state
|
|
551
|
+
* Which animation to show, if several
|
|
552
|
+
*/ 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 = {
|
|
553
|
+
count: 0,
|
|
554
|
+
loaded: false,
|
|
555
|
+
prev: PlayerState.Loading,
|
|
556
|
+
scrollTimeout: null,
|
|
557
|
+
scrollY: 0,
|
|
558
|
+
visible: false
|
|
559
|
+
}, /**
|
|
560
|
+
* Handle settings click event
|
|
561
|
+
*/ this._handleSettingsClick = ({ target })=>{
|
|
562
|
+
this._toggleSettings();
|
|
563
|
+
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
564
|
+
if (target instanceof HTMLElement) {
|
|
565
|
+
target.focus();
|
|
566
|
+
}
|
|
567
|
+
};
|
|
568
|
+
this._complete = this._complete.bind(this);
|
|
569
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
570
|
+
this._dataReady = this._dataReady.bind(this);
|
|
571
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
572
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
573
|
+
this._freeze = this._freeze.bind(this);
|
|
574
|
+
this._handleBlur = this._handleBlur.bind(this);
|
|
575
|
+
this._handleScroll = this._handleScroll.bind(this);
|
|
576
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
577
|
+
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
578
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
579
|
+
this._mouseEnter = this._mouseEnter.bind(this);
|
|
580
|
+
this._mouseLeave = this._mouseLeave.bind(this);
|
|
581
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
582
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
583
|
+
this.togglePlay = this.togglePlay.bind(this);
|
|
584
|
+
this.stop = this.stop.bind(this);
|
|
585
|
+
this.prev = this.prev.bind(this);
|
|
586
|
+
this.next = this.next.bind(this);
|
|
587
|
+
this._renderControls = this._renderControls.bind(this);
|
|
588
|
+
this.snapshot = this.snapshot.bind(this);
|
|
589
|
+
this.toggleLoop = this.toggleLoop.bind(this);
|
|
590
|
+
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
591
|
+
this.convert = this.convert.bind(this);
|
|
592
|
+
this.destroy = this.destroy.bind(this);
|
|
593
|
+
this.template = document.createElement('template');
|
|
594
|
+
this.shadow = this.attachShadow({
|
|
595
|
+
mode: 'open'
|
|
596
|
+
});
|
|
597
|
+
}
|
|
527
598
|
/**
|
|
528
599
|
* Initialize everything on component first render
|
|
529
600
|
*/ async connectedCallback() {
|
|
@@ -1692,70 +1763,7 @@ let DotLottiePlayer = class DotLottiePlayer extends EnhancedElement {
|
|
|
1692
1763
|
styleSheet.replace(css_248z);
|
|
1693
1764
|
return styleSheet;
|
|
1694
1765
|
}
|
|
1695
|
-
|
|
1696
|
-
super(), this._renderControls = renderControls, this._render = renderPlayer, /**
|
|
1697
|
-
* Multi-animation settings
|
|
1698
|
-
*/ this._multiAnimationSettings = [], /**
|
|
1699
|
-
* Animation Container
|
|
1700
|
-
*/ this._container = null, /**
|
|
1701
|
-
* @state
|
|
1702
|
-
* Player state
|
|
1703
|
-
*/ this.playerState = PlayerState.Loading, /**
|
|
1704
|
-
* @state
|
|
1705
|
-
* Whether settings toolbar is open
|
|
1706
|
-
*/ this._isSettingsOpen = false, /**
|
|
1707
|
-
* @state
|
|
1708
|
-
* Seeker
|
|
1709
|
-
*/ this._seeker = 0, /**
|
|
1710
|
-
* @state
|
|
1711
|
-
* Which animation to show, if several
|
|
1712
|
-
*/ 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 = {
|
|
1713
|
-
count: 0,
|
|
1714
|
-
loaded: false,
|
|
1715
|
-
prev: PlayerState.Loading,
|
|
1716
|
-
scrollTimeout: null,
|
|
1717
|
-
scrollY: 0,
|
|
1718
|
-
visible: false
|
|
1719
|
-
}, /**
|
|
1720
|
-
* Handle settings click event
|
|
1721
|
-
*/ this._handleSettingsClick = ({ target })=>{
|
|
1722
|
-
this._toggleSettings();
|
|
1723
|
-
// Because Safari does not add focus on click, we need to add it manually, so the onblur event will fire
|
|
1724
|
-
if (target instanceof HTMLElement) {
|
|
1725
|
-
target.focus();
|
|
1726
|
-
}
|
|
1727
|
-
};
|
|
1728
|
-
this._complete = this._complete.bind(this);
|
|
1729
|
-
this._dataFailed = this._dataFailed.bind(this);
|
|
1730
|
-
this._dataReady = this._dataReady.bind(this);
|
|
1731
|
-
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
1732
|
-
this._enterFrame = this._enterFrame.bind(this);
|
|
1733
|
-
this._freeze = this._freeze.bind(this);
|
|
1734
|
-
this._handleBlur = this._handleBlur.bind(this);
|
|
1735
|
-
this._handleScroll = this._handleScroll.bind(this);
|
|
1736
|
-
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
1737
|
-
this._handleWindowBlur = this._handleWindowBlur.bind(this);
|
|
1738
|
-
this._loopComplete = this._loopComplete.bind(this);
|
|
1739
|
-
this._mouseEnter = this._mouseEnter.bind(this);
|
|
1740
|
-
this._mouseLeave = this._mouseLeave.bind(this);
|
|
1741
|
-
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
1742
|
-
this._switchInstance = this._switchInstance.bind(this);
|
|
1743
|
-
this.togglePlay = this.togglePlay.bind(this);
|
|
1744
|
-
this.stop = this.stop.bind(this);
|
|
1745
|
-
this.prev = this.prev.bind(this);
|
|
1746
|
-
this.next = this.next.bind(this);
|
|
1747
|
-
this._renderControls = this._renderControls.bind(this);
|
|
1748
|
-
this.snapshot = this.snapshot.bind(this);
|
|
1749
|
-
this.toggleLoop = this.toggleLoop.bind(this);
|
|
1750
|
-
this.toggleBoomerang = this.toggleBoomerang.bind(this);
|
|
1751
|
-
this.convert = this.convert.bind(this);
|
|
1752
|
-
this.destroy = this.destroy.bind(this);
|
|
1753
|
-
this.template = document.createElement('template');
|
|
1754
|
-
this.shadow = this.attachShadow({
|
|
1755
|
-
mode: 'open'
|
|
1756
|
-
});
|
|
1757
|
-
}
|
|
1758
|
-
};
|
|
1766
|
+
}
|
|
1759
1767
|
|
|
1760
1768
|
/**
|
|
1761
1769
|
* Expose DotLottiePlayer class as global variable
|