render()

in src/components/common/animation-control/animation-control.js [104:167]


    render() {
      const {currentTime, domain, speed, step, timeSteps} = this.props.animationConfig;
      const {showSpeedControl} = this.state;
      const animationType = Array.isArray(timeSteps)
        ? ANIMATION_TYPE.interval
        : ANIMATION_TYPE.continuous;

      return (
        <BottomWidgetInner className="bottom-widget--inner">
          <AnimationWidgetInner className="animation-widget--inner">
            <div style={{marginLeft: '-10px'}}>
              <AnimationController
                value={currentTime}
                domain={domain}
                speed={speed}
                updateAnimation={this._updateAnimation}
                steps={timeSteps}
                animationType={animationType}
              >
                {(isAnimating, start, pause, reset) => (
                  <AnimationPlaybacks
                    className="animation-control-playpause"
                    startAnimation={start}
                    isAnimating={isAnimating}
                    pauseAnimation={pause}
                    resetAnimation={reset}
                    buttonHeight={BUTTON_HEIGHT}
                    buttonStyle="link"
                  />
                )}
              </AnimationController>
            </div>
            <StyledDomain className="animation-control__time-domain">
              <span>{moment.utc(domain[0]).format(DEFAULT_TIME_FORMAT)}</span>
            </StyledDomain>
            <SliderWrapper className="animation-control__slider">
              <Slider
                showValues={false}
                isRanged={false}
                step={step}
                minValue={domain ? domain[0] : 0}
                maxValue={domain ? domain[1] : 1}
                value1={currentTime}
                onSlider1Change={this.onSlider1Change}
                enableBarDrag={true}
              />
            </SliderWrapper>
            <StyledDomain className="animation-control__time-domain">
              <span>{moment.utc(domain[1]).format(DEFAULT_TIME_FORMAT)}</span>
            </StyledDomain>
            <div className="animation-control__speed-control">
              <SpeedControl
                onClick={this.toggleSpeedControl}
                showSpeedControl={showSpeedControl}
                updateAnimationSpeed={this.props.updateAnimationSpeed}
                speed={speed}
                buttonHeight={BUTTON_HEIGHT}
              />
            </div>
          </AnimationWidgetInner>
          <FloatingTimeDisplay currentTime={currentTime} />
        </BottomWidgetInner>
      );
    }