@lordicon/react/dist/player.js

This library allows you to easily integrate the playback of Lordicon icons into a React application.

import{jsx as t}from"react/jsx-runtime";import{lottieColorToHex as e,isNil as o}from"@lordicon/helpers";import s from"lottie-web";import i from"react";import{h as n}from"./helpers-CE3Eu4wb.js";const r={renderer:"svg",loop:!1,autoplay:!1,rendererSettings:{preserveAspectRatio:"xMidYMid meet",progressiveLoad:!0,hideOnTransparent:!0}};let a;class h extends i.Component{_ref;_states=[];_state;_root;_iconData;_properties=[];_lottie;constructor(t){super(t);const{iconData:e,states:o,state:s,properties:r}=n(t);this._iconData=e,this._states=o,this._state=s,this._properties=r,this._ref=i.createRef()}connect(){if(!this._iconData)return;const t=this._root.lastElementChild,o=this._properties.filter((t=>"color"===t.type));if(o.length){let s="";for(const t of o){const o=t.name,i=e(t.value);s+=`\n                    :host(:not(.colorize)) svg path[fill].${o} {\n                        fill: var(--lord-icon-${o}, var(--lord-icon-${o}-base, ${i}));\n                    }\n        \n                    :host(:not(.colorize)) svg path[stroke].${o} {\n                        stroke: var(--lord-icon-${o}, var(--lord-icon-${o}-base, ${i}));\n                    }\n                `}const i=document.createElement("style");i.innerHTML=s,t.appendChild(i)}const i={};this._state&&(i.initialSegment=[this._state.time,this._state.time+this._state.duration+1]),this._lottie=s.loadAnimation({container:t,animationData:this._iconData,...i,...r}),this._lottie.setDirection(this.props.direction||1),this._lottie.addEventListener("complete",(t=>{this.onFinish()})),this._lottie.isLoaded?this.onReady():this._lottie.addEventListener("config_ready",(()=>{this.onReady()}))}disconnect(){this._lottie&&(this._lottie.destroy(),this._lottie=void 0)}componentDidMount(){if(!this._root){this._root=this._ref?.current.attachShadow({mode:"open"}),a||(a=new CSSStyleSheet,a.replaceSync("\n    :host {\n        position: relative;\n        display: block;\n        transform: translate3d(0px, 0px, 0px);\n        width: 100%;\n        aspect-ratio: 1/1;\n        overflow: hidden;\n    }\n\n    :host(.colorize) svg path[fill] {\n        fill: var(--lord-icon-colorize, currentColor);\n    }\n\n    :host(.colorize) svg path[stroke] {\n        stroke: var(--lord-icon-colorize, currentColor);\n    }\n\n    svg {\n        position: absolute;\n        pointer-events: none;\n        display: block;\n        transform: unset!important;\n    }\n\n    ::slotted(*) {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n    }\n\n    .body.ready ::slotted(*) {\n        display: none;\n    }\n")),this._root.adoptedStyleSheets=[a];const t=document.createElement("div");t.classList.add("body"),this._root.appendChild(t)}this.connect()}componentWillUnmount(){this.disconnect()}componentDidUpdate(t,e){t.state!==this.props.state&&this.onStateChanged(),t.direction!==this.props.direction&&this.onDirectionChanged(),t.icon===this.props.icon&&t.colors===this.props.colors||this.onIconChanged()}onFinish(){this.props.onComplete?.()}onDirectionChanged(){this._lottie.setDirection(this.props.direction)}onStateChanged(){const t=this.isPlaying;this._state=void 0,o(this.props.state)?this._state=this._states.filter((t=>t.default))[0]:this.props.state&&(this._state=this._states.filter((t=>t.name===this.props.state))[0]),this._state?this._lottie?.setSegment(this._state.time,this._state.time+this._state.duration+1):this._lottie.resetSegments(!0),this.goToFirstFrame(),t&&(this.pause(),this.play())}onIconChanged(){const{iconData:t,states:e,state:o,properties:s}=n(this.props);this._iconData=t,this._states=e,this._state=o,this._properties=s,this.disconnect(),this.connect()}onReady(){this.props.onReady?.()}play(){this._lottie.play()}playFromBeginning(){if(this._state){const t=[this._state.time,this._state.time+this._state.duration+1];this._lottie.playSegments(t,!0)}else this._lottie.goToAndPlay(0)}pause(){this._lottie.pause()}goToFirstFrame(){this.goToFrame(0)}goToLastFrame(){this.goToFrame(Math.max(0,this.frames))}goToFrame(t){this._lottie.goToAndStop(t,!0)}refresh(){this._lottie?.renderer.renderFrame(null)}render(){const e=this.props.size||32,o=this.props.colorize||void 0;return t("div",{ref:this._ref,className:this.props.colorize?"colorize":void 0,style:{width:e,height:e,color:o,aspectRatio:1,flexDirection:"row"}})}get frames(){return this._lottie.getDuration(!0)-1}get isPlaying(){return!this._lottie.isPaused}get states(){return this._states}get currentState(){return this._state}}export{h as Player};
//# sourceMappingURL=player.js.map