@lordicon/react/dist/player.native.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{isNil as s}from"@lordicon/helpers";import i from"lottie-react-native";import e from"react";import{Animated as o,Easing as a,View as r}from"react-native";import{h as n}from"./helpers-CE3Eu4wb.js";const h=o.createAnimatedComponent(i);class p extends e.Component{_states=[];_state;_playing=!1;_animation;_progress=0;_iconData;_properties=[];constructor(t){super(t);const{iconData:s,states:i,state:e,properties:a}=n(t);this._iconData=s,this._states=i,this._state=e,this._properties=a,this.state={progress:new o.Value(1)},this.state.progress.addListener((({value:t})=>{this._progress=t}))}connect(){this._iconData&&(this.goToFirstFrame(),this.onReady())}disconnect(){this._animation&&(this._animation.animation.stop(),this._animation=void 0)}componentDidMount(){this.connect()}componentWillUnmount(){this.disconnect()}componentDidUpdate(t,s){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()}frameToProgress(t){return t/this._totalFrames}progressToFrame(t){return t*this._totalFrames}duration(t){return t*this._fr}onFinish(t){this._playing=!1,this._animation&&!t&&(this._animation=void 0),t||this.props.onComplete?.()}onDirectionChanged(){if(!this._animation)return;const t=this._playing;this._animation.animation.stop();const s=o.timing(this.state.progress,{toValue:this.frameToProgress(this._animation.from),duration:this.duration(Math.abs(this.progressToFrame(this._progress)-this._animation.from)),useNativeDriver:!1,easing:a.linear});this._animation={animation:s,from:this._animation.to,to:this._animation.from,direction:this.props.direction||1},t&&(this._playing=!0,s.start((({finished:t})=>{this.onFinish(!t)})))}onStateChanged(){const t=this.isPlaying;this._state=void 0,s(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.playFromBeginning(),this.pause(),t&&this.play()}onIconChanged(){const{iconData:t,states:s,state:i,properties:e}=n(this.props);this._iconData=t,this._states=s,this._state=i,this._properties=e,this.disconnect(),this.connect()}onReady(){this.props.onReady?.()}play(){if(this._animation)this._playing=!0,this._animation.animation.start((({finished:t})=>{this.onFinish(!t)}));else{this._playing=!0;const t=this._state?this._state.time:0,s=this._state?this._state.time+this._state.duration:this._totalFrames,i=-1===this.props.direction?[s,t]:[t,s],e=this.duration(Math.abs(s-t));if(this.progressToFrame(this._progress).toFixed(4)===i[1].toFixed(4))return void this.onFinish(!1);this.state.progress?.setValue(this.frameToProgress(i[0]));const r=o.timing(this.state.progress,{toValue:this.frameToProgress(i[1]),duration:e,useNativeDriver:!1,easing:a.linear});r.start((({finished:t})=>{this.onFinish(!t)})),this._animation={animation:r,from:i[0],to:i[1],direction:this.props.direction||1}}}playFromBeginning(){this._playing=!0;const t=this._state?this._state.time:0,s=this._state?this._state.time+this._state.duration:this._totalFrames,i=[t,s],e=this.duration(Math.abs(s-t));this.state.progress?.setValue(this.frameToProgress(i[0]));const r=o.timing(this.state.progress,{toValue:this.frameToProgress(i[1]),duration:e,useNativeDriver:!1,easing:a.linear});r.start((({finished:t})=>{this.onFinish(!t)})),this._animation={animation:r,from:i[0],to:i[1],direction:this.props.direction||1}}pause(){this._animation&&this._animation.animation.stop()}goToFirstFrame(){const t=this._state?this._state.time:0;this.state.progress?.setValue(this.frameToProgress(t))}goToLastFrame(){const t=this._state?this._state.time+this._state.duration:0;this.state.progress?.setValue(this.frameToProgress(t))}render(){const s=this.props.size||32;return t(r,{style:[{width:s,height:s,aspectRatio:1,flexDirection:"row"},this.props.style],children:t(h,{style:[{flex:1}],autoPlay:!1,loop:!1,progress:this.state.progress,source:this._iconData,renderMode:this.props.renderMode,cacheComposition:!1,colorFilters:this.props.colorize?[{keypath:"*",color:this.props.colorize}]:void 0})})}get frames(){return this._state?.duration||this._totalFrames}get isPlaying(){return this._playing}get states(){return this._states}get currentState(){return this._state}get _totalFrames(){return this._iconData.op-1}get _fr(){return 1e3/this._iconData.fr}}export{p as Player};
//# sourceMappingURL=player.native.js.map