@ausbom/time-scrubber 0.4.0 → 0.4.1

package/lib/components/Timeline/SubScrub.d.ts

@@ -2,8 +2,9 @@ import React from 'react'
 
 export interface IProps {
   active: boolean
-  progress: number
   getProgress: () => number
+  progress: number
+  animateProgress: boolean
 }
 
 export default class extends React.PureComponent<IProps> {

package/lib/components/Timeline/SubScrub.js

@@ -1 +1,3 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var SubScrub=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(SubScrub,_React$Component);var _super=_createSuper(SubScrub);function SubScrub(props){var _this;(0,_classCallCheck2["default"])(this,SubScrub);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{progress:_this.props.getProgress()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"timeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"polling",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"start",function(){if(_this.polling){return}_this.polling=true;window.requestAnimationFrame(_this.poll)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"poll",function(){if(!_this.polling){return}_this.setState({progress:_this.props.getProgress()},function(){window.requestAnimationFrame(_this.poll)})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stop",function(){_this.polling=false});_this.timeout=null;_this.polling=false;return _this}(0,_createClass2["default"])(SubScrub,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.active){this.start()}}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(!prevProps.active&&this.props.active){this.start()}if(prevProps.active&&!this.props.active){this.stop()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.stop()}},{key:"render",value:function render(){var progress=this.state.progress;return/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-tl__segment-progress",style:{transform:"scaleX(".concat(Math.min(progress,1),")")}})}}]);return SubScrub}(_react["default"].Component);(0,_defineProperty2["default"])(SubScrub,"defaultProps",{});var _default=SubScrub;exports["default"]=_default;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var SubScrub=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(SubScrub,_React$Component);var _super=_createSuper(SubScrub);function SubScrub(props){var _this;(0,_classCallCheck2["default"])(this,SubScrub);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{progress:_this.props.getProgress()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"timeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"polling",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"start",function(){if(_this.polling){return}_this.polling=true;window.requestAnimationFrame(_this.poll)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"poll",function(){if(!_this.polling){return}_this.setState({progress:_this.props.getProgress()},function(){window.requestAnimationFrame(_this.poll)})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stop",function(){_this.polling=false});_this.timeout=null;_this.polling=false;return _this}(0,_createClass2["default"])(SubScrub,[{key:"componentDidMount",value:function componentDidMount(){// Only setup polling for progress if animateProgress is true.
+if(!this.props.animateProgress||!this.props.active)return;this.start()}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){// Only update polling for progress if animateProgress is true.
+if(!this.props.animateProgress)return;if(!prevProps.active&&this.props.active)this.start();if(prevProps.active&&!this.props.active)this.stop()}},{key:"componentWillUnmount",value:function componentWillUnmount(){this.stop()}},{key:"render",value:function render(){var progress=this.state.progress;return/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-tl__segment-progress",style:{transform:"scaleX(".concat(Math.min(progress,1),")")}})}}]);return SubScrub}(_react["default"].Component);(0,_defineProperty2["default"])(SubScrub,"defaultProps",{});var _default=SubScrub;exports["default"]=_default;

package/lib/components/Timeline/Timeline.js

@@ -1 +1,4 @@
-"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _styles=require("@ausbom/styles");var _SubScrub=_interopRequireDefault(require("./SubScrub"));var _Thumb=_interopRequireDefault(require("./Thumb"));var _Drag=_interopRequireDefault(require("./Drag"));var _types=require("../../types");var _utils=require("../../utils");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Timeline=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Timeline,_React$Component);var _super=_createSuper(Timeline);function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepStartTime",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepTimePassed",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playTimeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"trackRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){_this.showHideGaps()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"showHideGaps",function(){var timeSteps=_this.props.timeSteps;var smoothClass="bom-scrub--no-gaps";var gapSize=2;var minSegmentSize=6;var thresholdWidth=timeSteps.length*(gapSize+minSegmentSize);if(!_this.trackRef||!_this.trackRef.current){return}var _this$trackRef$curren=_this.trackRef.current.getBoundingClientRect(),width=_this$trackRef$curren.width;_this.trackRef.current.classList.remove(smoothClass);if(width<thresholdWidth){_this.trackRef.current.classList.add(smoothClass)}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getActiveIndex",function(){return(0,_utils.getStepIndexById)(_this.props.timeSteps,_this.props.activeStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getNextStep",function(){var _this$props=_this.props,timeSteps=_this$props.timeSteps,activeStep=_this$props.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()+1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getPreviousStep",function(){var _this$props2=_this.props,timeSteps=_this$props2.timeSteps,activeStep=_this$props2.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()-1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"isLastStep",function(){var timeSteps=_this.props.timeSteps;return _this.getActiveIndex()===timeSteps.length-1});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){var onStepPlayback=_this.props.onStepPlayback;onStepPlayback(_this.getNextStep())});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playStep",function(){var _this$props3=_this.props,loop=_this$props3.loop,timePerStep=_this$props3.timePerStep,onStepPlayback=_this$props3.onStepPlayback;if(!loop&&_this.isLastStep()){_this.props.onFinishPlayback();return}var timeRemainingInStep=timePerStep;_this.stepStartTime=Date.now();_this.playTimeout=setTimeout(function(){onStepPlayback(_this.getNextStep())},timeRemainingInStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.stepTimePassed=0;_this.stepStartTime=null;clearTimeout(_this.playTimeout);_this.playTimeout=null});_this.stepStartTime=null;_this.stepTimePassed=0;_this.playTimeout=null;_this.trackRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,500);return _this}(0,_createClass2["default"])(Timeline,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.playState===_types.ScrubberState.PLAYING){this.play()}this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.playState===_types.ScrubberState.PAUSED&&this.props.playState===_types.ScrubberState.PLAYING){this.play()}if(prevProps.playState===_types.ScrubberState.PLAYING&&this.props.playState===_types.ScrubberState.PAUSED){this.pause()}if(this.props.playState===_types.ScrubberState.PLAYING&&prevProps.activeStep!==this.props.activeStep){this.playStep()}if((prevProps.timeSteps&&prevProps.timeSteps.length)!==(this.props.timeSteps&&this.props.timeSteps.length)){this.showHideGaps()}}},{key:"render",value:function render(){var _this2=this;var _this$props4=this.props,activeStep=_this$props4.activeStep,onScrub=_this$props4.onScrub,playState=_this$props4.playState,timePerStep=_this$props4.timePerStep,timeSteps=_this$props4.timeSteps;var activeIndex=(0,_utils.getStepIndexById)(timeSteps,activeStep);var activeStepInRange=activeIndex>=0;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);return/*#__PURE__*/_react["default"].createElement(_Drag["default"],{className:"bom-scrub-tl",onDrag:function onDrag(x){var trackDom=_this2.trackRef.current;if(!trackDom||timeSteps.length<=0){return}var _trackDom$getBounding=trackDom.getBoundingClientRect(),left=_trackDom$getBounding.left,width=_trackDom$getBounding.width;var relX=x-left;var scaled=(0,_utils.mapNumber)(relX,0,width,0,timeSteps.length);var clamped=(0,_utils.clamp)(scaled,0,timeSteps.length-1);var index=Math.floor(clamped);if(index>=0){onScrub(timeSteps[index])}}},/*#__PURE__*/_react["default"].createElement("div",{ref:this.trackRef,className:"bom-scrub-tl__track","data-testid":"bom-scrub-track"},timeSteps.map(function(step,i){var color=_styles.palette.neutral.greyDark;if(i<=activeIndex){color=_styles.palette.primary.electricBlue}else if(i===activeIndex&&playState===_types.ScrubberState.PLAYING){color=_styles.palette.primary.darkBlue}return/*#__PURE__*/_react["default"].createElement("div",{role:"button","aria-label":step.displayLabel,className:"bom-scrub-tl__track-segment","data-testid":"bom-scrub-segment",key:step.id,style:{background:color},onClick:function onClick(){onScrub(timeSteps[i])}},i===activeIndex&&playState===_types.ScrubberState.PLAYING&&/*#__PURE__*/_react["default"].createElement(_SubScrub["default"],{active:playState===_types.ScrubberState.PLAYING,getProgress:function getProgress(){var timePassed=Date.now()-_this2.stepStartTime;return timePassed/timePerStep}}))}),activeStepInRange&&/*#__PURE__*/_react["default"].createElement(_Thumb["default"],{label:activeStepObj?activeStepObj.displayLabel:null,xPos:"".concat(100/timeSteps.length*activeIndex+100/timeSteps.length/2,"%"),onGoLeft:function onGoLeft(){onScrub(_this2.getPreviousStep())},onGoRight:function onGoRight(){onScrub(_this2.getNextStep())}})))}}]);return Timeline}(_react["default"].Component);(0,_defineProperty2["default"])(Timeline,"defaultProps",{});var _default=Timeline;exports["default"]=_default;
+"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports["default"]=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _react=_interopRequireDefault(require("react"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _styles=require("@ausbom/styles");var _SubScrub=_interopRequireDefault(require("./SubScrub"));var _Thumb=_interopRequireDefault(require("./Thumb"));var _Drag=_interopRequireDefault(require("./Drag"));var _types=require("../../types");var _utils=require("../../utils");function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function _createSuperInternal(){var Super=(0,_getPrototypeOf2["default"])(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2["default"])(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else{result=Super.apply(this,arguments)}return(0,_possibleConstructorReturn2["default"])(this,result)}}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true}catch(e){return false}}var Timeline=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(Timeline,_React$Component);var _super=_createSuper(Timeline);function Timeline(props){var _this;(0,_classCallCheck2["default"])(this,Timeline);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepStartTime",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"stepTimePassed",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playTimeout",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"trackRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){_this.showHideGaps()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"showHideGaps",function(){var timeSteps=_this.props.timeSteps;var smoothClass="bom-scrub--no-gaps";var gapSize=2;var minSegmentSize=6;var thresholdWidth=timeSteps.length*(gapSize+minSegmentSize);if(!_this.trackRef||!_this.trackRef.current){return}var _this$trackRef$curren=_this.trackRef.current.getBoundingClientRect(),width=_this$trackRef$curren.width;_this.trackRef.current.classList.remove(smoothClass);if(width<thresholdWidth){_this.trackRef.current.classList.add(smoothClass)}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getActiveIndex",function(){return(0,_utils.getStepIndexById)(_this.props.timeSteps,_this.props.activeStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getNextStep",function(){var _this$props=_this.props,timeSteps=_this$props.timeSteps,activeStep=_this$props.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()+1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"getPreviousStep",function(){var _this$props2=_this.props,timeSteps=_this$props2.timeSteps,activeStep=_this$props2.activeStep;if(!timeSteps.length){return null}if(!activeStep){return timeSteps[0]}return timeSteps[(0,_utils.wrapIndex)(_this.getActiveIndex()-1,timeSteps.length)]});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"isLastStep",function(){var timeSteps=_this.props.timeSteps;return _this.getActiveIndex()===timeSteps.length-1});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){var onStepPlayback=_this.props.onStepPlayback;onStepPlayback(_this.getNextStep())});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"playStep",function(){var _this$props3=_this.props,loop=_this$props3.loop,timePerStep=_this$props3.timePerStep,onStepPlayback=_this$props3.onStepPlayback;if(!loop&&_this.isLastStep()){_this.props.onFinishPlayback();return}var timeRemainingInStep=timePerStep;_this.stepStartTime=Date.now();_this.playTimeout=setTimeout(function(){onStepPlayback(_this.getNextStep())},timeRemainingInStep)});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.stepTimePassed=0;_this.stepStartTime=null;clearTimeout(_this.playTimeout);_this.playTimeout=null});_this.stepStartTime=null;_this.stepTimePassed=0;_this.playTimeout=null;_this.trackRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,500);return _this}(0,_createClass2["default"])(Timeline,[{key:"componentDidMount",value:function componentDidMount(){if(this.props.playState===_types.ScrubberState.PLAYING){this.play()}this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.playState===_types.ScrubberState.PAUSED&&this.props.playState===_types.ScrubberState.PLAYING){this.play()}if(prevProps.playState===_types.ScrubberState.PLAYING&&this.props.playState===_types.ScrubberState.PAUSED){this.pause()}if(this.props.playState===_types.ScrubberState.PLAYING&&prevProps.activeStep!==this.props.activeStep){this.playStep()}if((prevProps.timeSteps&&prevProps.timeSteps.length)!==(this.props.timeSteps&&this.props.timeSteps.length)){this.showHideGaps()}}},{key:"render",value:function render(){var _this2=this;var _this$props4=this.props,activeStep=_this$props4.activeStep,onScrub=_this$props4.onScrub,playState=_this$props4.playState,timePerStep=_this$props4.timePerStep,timeSteps=_this$props4.timeSteps;var activeIndex=(0,_utils.getStepIndexById)(timeSteps,activeStep);var activeStepInRange=activeIndex>=0;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);return/*#__PURE__*/_react["default"].createElement(_Drag["default"],{className:"bom-scrub-tl",onDrag:function onDrag(x){var trackDom=_this2.trackRef.current;if(!trackDom||timeSteps.length<=0){return}var _trackDom$getBounding=trackDom.getBoundingClientRect(),left=_trackDom$getBounding.left,width=_trackDom$getBounding.width;var relX=x-left;var scaled=(0,_utils.mapNumber)(relX,0,width,0,timeSteps.length);var clamped=(0,_utils.clamp)(scaled,0,timeSteps.length-1);var index=Math.floor(clamped);if(index>=0){onScrub(timeSteps[index])}}},/*#__PURE__*/_react["default"].createElement("div",{ref:this.trackRef,className:"bom-scrub-tl__track","data-testid":"bom-scrub-track"},timeSteps.map(function(step,i){var color=_styles.palette.neutral.greyDark;// TODO: This logic need to be looked at
+// as the current colors do not give the appearance of animating.
+if(i<=activeIndex){color=_styles.palette.primary.electricBlue}else if(i===activeIndex&&playState===_types.ScrubberState.PLAYING){color=_styles.palette.primary.darkBlue}return/*#__PURE__*/_react["default"].createElement("div",{role:"button","aria-label":step.displayLabel,className:"bom-scrub-tl__track-segment","data-testid":"bom-scrub-segment",key:step.id,style:{background:color},onClick:function onClick(){onScrub(timeSteps[i])}},i===activeIndex&&playState===_types.ScrubberState.PLAYING&&/*#__PURE__*/ // NOTE: Pass the animateProgress prop as true to enable animation of segments (Beware, this is browser intensive)
+_react["default"].createElement(_SubScrub["default"],{active:playState===_types.ScrubberState.PLAYING,getProgress:function getProgress(){var timePassed=Date.now()-_this2.stepStartTime;return timePassed/timePerStep}}))}),activeStepInRange&&/*#__PURE__*/_react["default"].createElement(_Thumb["default"],{label:activeStepObj?activeStepObj.displayLabel:null,xPos:"".concat(100/timeSteps.length*activeIndex+100/timeSteps.length/2,"%"),onGoLeft:function onGoLeft(){onScrub(_this2.getPreviousStep())},onGoRight:function onGoRight(){onScrub(_this2.getNextStep())}})))}}]);return Timeline}(_react["default"].Component);(0,_defineProperty2["default"])(Timeline,"defaultProps",{});var _default=Timeline;exports["default"]=_default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/time-scrubber",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.9.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "753ae10075159d45876f3122758b708a5db13e19"
+  "gitHead": "7ea6556bc7ce6e587664f7ec4676d7ce40a3081c"
 }