\n {this.state.playerState === PlayerState.Error ? (\n
\n \n ⚠️\n \n
\n ) : (\n
(this.container = el)}\n style={{\n background,\n margin: '0 auto',\n outline: 'none',\n overflow: 'hidden',\n ...style,\n }}\n className={className}\n >
\n )}\n {React.Children.map(children, child => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n animationData,\n background,\n debug,\n instance,\n loop,\n pause: () => this.pause(),\n play: () => this.play(),\n playerState,\n seeker,\n setBackground: (value: string) => {\n this.setState({ background: value });\n\n if (typeof onBackgroundChange === 'function') {\n onBackgroundChange(value);\n }\n },\n setSeeker: (f: number, p: boolean) => this.setSeeker(f, p),\n stop: () => this.stop(),\n toggleDebug: () => this.toggleDebug(),\n setLoop: (loop: boolean) => this.setLoop(loop),\n colorChangedEvent: (hex: string) => {\n this.handleBgChange(hex);\n },\n snapshot: () => {\n this.snapshot();\n },\n });\n }\n return null;\n })}\n
\n );\n }\n\n private toggleDebug() {\n this.setState({ debug: !this.state.debug });\n }\n\n private async createLottie() {\n const {\n autoplay,\n direction,\n loop,\n lottieRef,\n renderer,\n speed,\n src,\n background,\n rendererSettings,\n hover,\n } = this.props;\n const { instance } = this.state;\n\n if (!src || !this.container) {\n return;\n }\n\n // Load the resource information\n try {\n // Parse the src to see if it is a URL or Lottie JSON data\n let animationData = parseSrc(src);\n\n if (typeof animationData === 'string') {\n const fetchResult = await fetch(animationData as string).catch(() => {\n this.setState({ playerState: PlayerState.Error });\n this.triggerEvent(PlayerEvent.Error);\n throw new Error('@LottieFiles/lottie-react: Animation data could not be fetched.');\n });\n\n animationData = await fetchResult.json().catch(() => {\n this.setState({ playerState: PlayerState.Error });\n this.triggerEvent(PlayerEvent.Error);\n throw new Error('@LottieFiles/lottie-react: Animation data could not be fetched.');\n });\n }\n\n // Clear previous animation, if any\n if (instance) {\n instance.destroy();\n }\n\n // Initialize lottie player and load animation\n const newInstance = lottie.loadAnimation({\n rendererSettings: rendererSettings || defaultOptions,\n animationData,\n autoplay: autoplay || false,\n container: this.container as Element,\n loop: loop || false,\n renderer,\n });\n if (speed) {\n newInstance.setSpeed(speed);\n }\n this.setState({ animationData });\n\n this.setState({ instance: newInstance }, () => {\n this.triggerEvent(PlayerEvent.InstanceSaved);\n\n if (typeof lottieRef === 'function') {\n lottieRef(newInstance);\n }\n if (autoplay) {\n this.play();\n }\n });\n\n // Handle new frame event\n newInstance.addEventListener('enterFrame', () => {\n this.triggerEvent(PlayerEvent.Frame);\n\n this.setState({\n seeker: Math.floor((newInstance as any).currentFrame),\n });\n });\n\n // Handle lottie-web ready event\n newInstance.addEventListener('DOMLoaded', () => {\n this.triggerEvent(PlayerEvent.Load);\n });\n\n // Handle animation data load complete\n newInstance.addEventListener('data_ready', () => {\n this.triggerEvent(PlayerEvent.Ready);\n });\n\n // Set error state when animation load fail event triggers\n newInstance.addEventListener('data_failed', () => {\n this.setState({ playerState: PlayerState.Error });\n this.triggerEvent(PlayerEvent.Error);\n });\n\n // Handle new loop event\n newInstance.addEventListener('loopComplete', () => {\n this.triggerEvent(PlayerEvent.Loop);\n });\n\n // Set state to paused if loop is off and anim has completed\n newInstance.addEventListener('complete', () => {\n this.triggerEvent(PlayerEvent.Complete);\n this.setState({ playerState: PlayerState.Paused });\n\n if (!this.props.keepLastFrame || this.props.loop) {\n this.setSeeker(0);\n }\n });\n\n // Set handlers to auto play animation on hover if enabled\n if (this.container) {\n this.container.addEventListener('mouseenter', () => {\n if (hover && this.state.playerState !== PlayerState.Playing) {\n if (this.props.keepLastFrame) {\n this.stop();\n }\n this.play();\n }\n });\n this.container.addEventListener('mouseleave', () => {\n if (hover && this.state.playerState === PlayerState.Playing) {\n this.stop();\n }\n });\n }\n\n // Set initial playback speed and direction\n if (speed) {\n this.setPlayerSpeed(speed);\n }\n\n if (direction) {\n this.setPlayerDirection(direction);\n }\n\n if (background) {\n this.setState({ background });\n }\n } catch (e) {\n this.setState({ playerState: PlayerState.Error });\n this.triggerEvent(PlayerEvent.Error);\n }\n }\n\n public play() {\n const { instance } = this.state;\n\n if (instance) {\n this.triggerEvent(PlayerEvent.Play);\n\n instance.play();\n\n this.setState({ playerState: PlayerState.Playing });\n }\n }\n\n public pause() {\n const { instance } = this.state;\n\n if (instance) {\n this.triggerEvent(PlayerEvent.Pause);\n\n instance.pause();\n\n this.setState({ playerState: PlayerState.Paused });\n }\n }\n\n public stop() {\n const { instance } = this.state;\n\n if (instance) {\n this.triggerEvent(PlayerEvent.Stop);\n\n instance.stop();\n\n this.setState({ playerState: PlayerState.Stopped });\n }\n }\n\n public setPlayerSpeed(speed: number) {\n const { instance } = this.state;\n\n if (instance) {\n instance.setSpeed(speed);\n }\n }\n\n public setPlayerDirection(direction: PlayerDirection) {\n const { instance } = this.state;\n\n if (instance) {\n instance.setDirection(direction);\n }\n }\n\n public setSeeker(seek: number, play = false) {\n const { instance, playerState } = this.state;\n\n if (instance) {\n if (!play || playerState !== PlayerState.Playing) {\n instance.goToAndStop(seek, true);\n this.triggerEvent(PlayerEvent.Pause);\n this.setState({ playerState: PlayerState.Paused });\n } else {\n instance.goToAndPlay(seek, true);\n }\n }\n }\n\n public setLoop(loop: boolean) {\n const { instance } = this.state;\n\n if (instance) {\n instance.loop = loop;\n this.setState({ instance: instance });\n }\n }\n private triggerEvent(event: PlayerEvent) {\n const { onEvent } = this.props;\n\n if (onEvent) {\n onEvent(event);\n }\n }\n}\n","function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import * as React from 'react';\n\ninterface ColorPickerProps {\n colorChangedEvent?: (hex: string) => void;\n}\nexport class ColorPicker extends React.Component