@ausbom/time-scrubber 0.3.11 → 0.5.0

package/lib/TimeScrubber.d.ts

@@ -10,7 +10,7 @@ export interface IProps {
   autoHideMarkers?: boolean
   autoPlay?: boolean
   errorText?: string
-  forecastMarker?: string
+  forecastMarker?: string | null
   innerRef?: React.RefObject<any>
   isError?: boolean
   isLoading?: boolean
@@ -19,6 +19,7 @@ export interface IProps {
   loop?: boolean
   onChange?: (timeStep: string) => void
   onPause?: () => void
+  onPlay?: () => void
   rightUtils?: React.ReactNode
   showUtils?: boolean
   timePerStep?: number

package/lib/TimeScrubber.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"));var _lodash=_interopRequireDefault(require("lodash.debounce"));var _classnames=_interopRequireDefault(require("classnames"));var _icon=require("@ausbom/icon");var _styles=require("@ausbom/styles");var _Play=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Play24"));var _Pause=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Pause24"));var _Timeline=_interopRequireDefault(require("./components/Timeline/Timeline"));var _types=require("./types");var _utils=require("./utils");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}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 getForecastMarkerPercentageWidth=function getForecastMarkerPercentageWidth(timeSteps,markerId){var markerIndex=(0,_utils.getStepIndexById)(timeSteps,markerId);if(!markerId||markerIndex<0){return 100}return(0,_utils.toPercentageWidth)(timeSteps,markerIndex)};var TimeScrubber=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(TimeScrubber,_React$Component);var _super=_createSuper(TimeScrubber);function TimeScrubber(props){var _this;(0,_classCallCheck2["default"])(this,TimeScrubber);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{playState:_this.props.autoPlay?_types.ScrubberState.PLAYING:_types.ScrubberState.PAUSED});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerRefs",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerContainerRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){var autoHideMarkers=_this.props.autoHideMarkers;if(autoHideMarkers){_this.placeLabels()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){_this.setState({playState:_types.ScrubberState.PLAYING})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.setState({playState:_types.ScrubberState.PAUSED},function(){_this.props.onPause()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"placeLabels",function(){var itemPadding=8;var hideClass="bom-scrub-marker--hidden";var lastEnd=0;var containerBbox=null;if(_this.markerContainerRef&&_this.markerContainerRef.current){containerBbox=_this.markerContainerRef.current.getBoundingClientRect()}_this.markerRefs.forEach(function(label,i){_this.markerRefs[i].classList.remove(hideClass);var bbox=label.getBoundingClientRect();var start=bbox.left;var end=bbox.right;if(containerBbox&&end>containerBbox.right){_this.markerRefs[i].classList.add(hideClass)}if(start<lastEnd+itemPadding){_this.markerRefs[i].classList.add(hideClass)}else{lastEnd=end}})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handlePlayPauseClick",function(event){event.preventDefault();_this.togglePlayState()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleRootKeyDown",function(event){var keyCode=event.keyCode;var SPACE_KEY_CODE=32;if(keyCode===SPACE_KEY_CODE){event.preventDefault();_this.togglePlayState()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"togglePlayState",function(){_this.setState(function(_ref){var playState=_ref.playState;var newState;if(playState===_types.ScrubberState.PLAYING){newState={playState:_types.ScrubberState.PAUSED}}else if(playState===_types.ScrubberState.PAUSED){newState={playState:_types.ScrubberState.PLAYING}}return newState},function(){if(_this.state.playState===_types.ScrubberState.PAUSED){_this.props.onPause()}})});_this.markerRefs=[];_this.markerContainerRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,100);return _this}(0,_createClass2["default"])(TimeScrubber,[{key:"componentDidMount",value:function componentDidMount(){this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"scrubTo",value:function scrubTo(step){var _this2=this;this.setState({playState:_types.ScrubberState.PAUSED},function(){_this2.props.onChange(step.id)})}},{key:"playStep",value:function playStep(step){this.props.onChange(step.id)}},{key:"renderLabels",value:function renderLabels(){var _this3=this;var timeSteps=this.props.timeSteps;this.markerRefs=[];return timeSteps.map(function(step,stepIndex){var smallLabelText=step.markerLabelTruncated?step.markerLabelTruncated:step.markerLabel;if(!step.markerLabel){return null}return/*#__PURE__*/_react["default"].createElement("div",{key:step.id,ref:function ref(r){if(r){_this3.markerRefs.push(r)}},className:(0,_classnames["default"])(step.className,"bom-scrub-marker"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%")})},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--small"},smallLabelText),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--large"},step.markerLabel))})}},{key:"renderTimeline",value:function renderTimeline(){var _this4=this;var _this$props=this.props,activeStep=_this$props.activeStep,forecastMarker=_this$props.forecastMarker,loop=_this$props.loop,timePerStep=_this$props.timePerStep,timeSteps=_this$props.timeSteps;var playState=this.state.playState;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);var displayLabel=activeStepObj?activeStepObj.displayLabel:null;var forecastMarkerIndex=(0,_utils.getStepIndexById)(timeSteps,forecastMarker);return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},displayLabel),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline"},/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0||forecastMarkerIndex>=1})}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-scrubber"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-forecast-marker",style:{width:"".concat(getForecastMarkerPercentageWidth(timeSteps,forecastMarker),"%")}}),/*#__PURE__*/_react["default"].createElement(_Timeline["default"],{activeStep:activeStep,loop:loop,playState:playState,timePerStep:timePerStep,timeSteps:timeSteps,onStepPlayback:function onStepPlayback(step){_this4.playStep(step)},onFinishPlayback:function onFinishPlayback(){_this4.setState({playState:_types.ScrubberState.PAUSED})},onScrub:function onScrub(step){_this4.scrubTo(step)}}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-markers",ref:this.markerContainerRef},this.renderLabels())),/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0})})))}},{key:"render",value:function render(){var _this5=this;var _this$props2=this.props,errorText=_this$props2.errorText,isError=_this$props2.isError,isLoading=_this$props2.isLoading,leftUtils=_this$props2.leftUtils,loadingText=_this$props2.loadingText,loop=_this$props2.loop,rightUtils=_this$props2.rightUtils,showUtils=_this$props2.showUtils,timeSteps=_this$props2.timeSteps;var playState=this.state.playState;var hasSteps=timeSteps&&timeSteps.length>0;var hasMultipleSteps=timeSteps.length>1;var renderTimelineContents=function renderTimelineContents(){if(isLoading){return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,loadingText&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},loadingText),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__loading-bar"}))}if(!isLoading&&isError){return errorText&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__error-message"},errorText)}return hasSteps&&_this5.renderTimeline()};return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub",{"bom-scrub--loading":isLoading,"bom-scrub--error":isError}),onKeyDown:this.handleRootKeyDown},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action",{"bom-scrub-action--with-extra":loop}),type:"button",onClick:this.handlePlayPauseClick,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?_Pause["default"]:_Play["default"],primaryColor:_styles.palette.neutral.white,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play"),loop&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__extra"},"Loop")),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline-container"},renderTimelineContents())),showUtils&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__left"},leftUtils),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__right"},rightUtils)))}}]);return TimeScrubber}(_react["default"].Component);(0,_defineProperty2["default"])(TimeScrubber,"defaultProps",{autoHideMarkers:true,autoPlay:false,errorText:"",forecastMarker:null,isError:false,isLoading:false,loadingText:"",loop:false,onChange:function onChange(){},onPause:function onPause(){},showUtils:true,timePerStep:500,timeSteps:[]});var _default=TimeScrubber;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 _classnames=_interopRequireDefault(require("classnames"));var _icon=require("@ausbom/icon");var _styles=require("@ausbom/styles");var _Play=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Play24"));var _Pause=_interopRequireDefault(require("@ausbom/icon/lib/icons/system/Pause24"));var _Timeline=_interopRequireDefault(require("./components/Timeline/Timeline"));var _types=require("./types");var _utils=require("./utils");function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);if(enumerableOnly)symbols=symbols.filter(function(sym){return Object.getOwnPropertyDescriptor(object,sym).enumerable});keys.push.apply(keys,symbols)}return keys}function _objectSpread(target){for(var i=1;i<arguments.length;i++){var source=arguments[i]!=null?arguments[i]:{};if(i%2){ownKeys(Object(source),true).forEach(function(key){(0,_defineProperty2["default"])(target,key,source[key])})}else if(Object.getOwnPropertyDescriptors){Object.defineProperties(target,Object.getOwnPropertyDescriptors(source))}else{ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))})}}return target}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 getForecastMarkerPercentageWidth=function getForecastMarkerPercentageWidth(timeSteps,markerId){var markerIndex=(0,_utils.getStepIndexById)(timeSteps,markerId);if(!markerId||markerIndex<0){return 100}return(0,_utils.toPercentageWidth)(timeSteps,markerIndex)};var TimeScrubber=/*#__PURE__*/function(_React$Component){(0,_inherits2["default"])(TimeScrubber,_React$Component);var _super=_createSuper(TimeScrubber);function TimeScrubber(props){var _this;(0,_classCallCheck2["default"])(this,TimeScrubber);_this=_super.call(this,props);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"state",{playState:_this.props.autoPlay?_types.ScrubberState.PLAYING:_types.ScrubberState.PAUSED});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerRefs",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"markerContainerRef",void 0);(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleResize",function(){var autoHideMarkers=_this.props.autoHideMarkers;if(autoHideMarkers){_this.placeLabels()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"play",function(){_this.setState({playState:_types.ScrubberState.PLAYING},function(){_this.props.onPlay()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"pause",function(){_this.setState({playState:_types.ScrubberState.PAUSED},function(){_this.props.onPause()})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"placeLabels",function(){var itemPadding=8;var hideClass="bom-scrub-marker--hidden";var lastEnd=0;var containerBbox=null;if(_this.markerContainerRef&&_this.markerContainerRef.current){containerBbox=_this.markerContainerRef.current.getBoundingClientRect()}_this.markerRefs.forEach(function(label,i){_this.markerRefs[i].classList.remove(hideClass);var bbox=label.getBoundingClientRect();var start=bbox.left;var end=bbox.right;if(containerBbox&&end>containerBbox.right){_this.markerRefs[i].classList.add(hideClass)}if(start<lastEnd+itemPadding){_this.markerRefs[i].classList.add(hideClass)}else{lastEnd=end}})});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handlePlayPauseClick",function(event){event.preventDefault();_this.togglePlayState()});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"handleRootKeyDown",function(event){var keyCode=event.keyCode;var SPACE_KEY_CODE=32;if(keyCode===SPACE_KEY_CODE){event.preventDefault();_this.togglePlayState()}});(0,_defineProperty2["default"])((0,_assertThisInitialized2["default"])(_this),"togglePlayState",function(){_this.setState(function(_ref){var playState=_ref.playState;var newState;if(playState===_types.ScrubberState.PLAYING){newState={playState:_types.ScrubberState.PAUSED}}else if(playState===_types.ScrubberState.PAUSED){newState={playState:_types.ScrubberState.PLAYING};_this.props.onPlay()}return newState},function(){if(_this.state.playState===_types.ScrubberState.PAUSED){_this.props.onPause()}})});_this.markerRefs=[];_this.markerContainerRef=/*#__PURE__*/_react["default"].createRef();_this.handleResize=(0,_lodash["default"])(_this.handleResize,100);return _this}(0,_createClass2["default"])(TimeScrubber,[{key:"componentDidMount",value:function componentDidMount(){this.handleResize();window.addEventListener("resize",this.handleResize)}},{key:"componentWillUnmount",value:function componentWillUnmount(){window.removeEventListener("resize",this.handleResize)}},{key:"scrubTo",value:function scrubTo(step){var _this2=this;this.setState({playState:_types.ScrubberState.PAUSED},function(){_this2.props.onChange(step.id)});// If the scrubber is playing, run the onPause callback
+if(this.state.playState===_types.ScrubberState.PLAYING){this.props.onPause()}}},{key:"playStep",value:function playStep(step){this.props.onChange(step.id)}},{key:"renderLabels",value:function renderLabels(){var _this3=this;var timeSteps=this.props.timeSteps;this.markerRefs=[];// Pre calculate how many segments we have for the label
+var segmentsToNextMarker=timeSteps.map(function(timeStep,timeStepIndex,timeStepArr){if(!timeStep.markerLabel)return 1;var nextMarkerIndex=timeStepArr.findIndex(function(a,i){return i>timeStepIndex&&(a.markerLabel!=null||a.markerLabel==="")})-timeStepIndex;if(nextMarkerIndex>0)return nextMarkerIndex;return timeStepArr.length+1+nextMarkerIndex});return timeSteps.map(function(step,stepIndex){var smallLabelText=step.markerLabelTruncated?step.markerLabelTruncated:step.markerLabel;if(!step.markerLabel){return null}return/*#__PURE__*/_react["default"].createElement("div",{key:step.id,ref:function ref(r){if(r){_this3.markerRefs.push(r)}},className:(0,_classnames["default"])(step.className,"bom-scrub-marker","bom-scrub-marker--ellipsis"),style:_objectSpread(_objectSpread({},step.style),{},{left:"".concat((0,_utils.toPercentageWidth)(timeSteps,stepIndex),"%"),width:"calc(".concat(segmentsToNextMarker[stepIndex]," * ").concat(100/timeSteps.length,"% - 2px)")})},/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--small"},smallLabelText),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-marker--large"},step.markerLabel))})}},{key:"renderTimeline",value:function renderTimeline(){var _this4=this;var _this$props=this.props,activeStep=_this$props.activeStep,forecastMarker=_this$props.forecastMarker,loop=_this$props.loop,timePerStep=_this$props.timePerStep,timeSteps=_this$props.timeSteps;var playState=this.state.playState;var activeStepObj=(0,_utils.getStepById)(timeSteps,activeStep);var displayLabel=activeStepObj?activeStepObj.displayLabel:null;var forecastMarkerIndex=(0,_utils.getStepIndexById)(timeSteps,forecastMarker);return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},displayLabel),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline"},/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0||forecastMarkerIndex>=1})}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-scrubber"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-forecast-marker",style:{width:"".concat(getForecastMarkerPercentageWidth(timeSteps,forecastMarker),"%")}}),/*#__PURE__*/_react["default"].createElement(_Timeline["default"],{activeStep:activeStep,loop:loop,playState:playState,timePerStep:timePerStep,timeSteps:timeSteps,onStepPlayback:function onStepPlayback(step){_this4.playStep(step)},onFinishPlayback:function onFinishPlayback(){_this4.setState({playState:_types.ScrubberState.PAUSED})},onScrub:function onScrub(step){_this4.scrubTo(step)}}),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-markers",ref:this.markerContainerRef},this.renderLabels())),/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub-overhang",{"bom-scrub-overhang--filled":!forecastMarker||forecastMarkerIndex<0})})))}},{key:"render",value:function render(){var _this5=this;var _this$props2=this.props,errorText=_this$props2.errorText,isError=_this$props2.isError,isLoading=_this$props2.isLoading,leftUtils=_this$props2.leftUtils,loadingText=_this$props2.loadingText,loop=_this$props2.loop,rightUtils=_this$props2.rightUtils,showUtils=_this$props2.showUtils,timeSteps=_this$props2.timeSteps;var playState=this.state.playState;var hasSteps=timeSteps&&timeSteps.length>0;var hasMultipleSteps=timeSteps.length>1;var renderTimelineContents=function renderTimelineContents(){if(isLoading){return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,loadingText&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-display-label"},loadingText),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__loading-bar"}))}if(!isLoading&&isError){return errorText&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline__error-message"},errorText)}return hasSteps&&_this5.renderTimeline()};return/*#__PURE__*/_react["default"].createElement(_react["default"].Fragment,null,/*#__PURE__*/_react["default"].createElement("div",{className:(0,_classnames["default"])("bom-scrub",{"bom-scrub--loading":isLoading,"bom-scrub--error":isError}),onKeyDown:this.handleRootKeyDown},/*#__PURE__*/_react["default"].createElement("button",{"data-testid":"bom-time-scrub-play-pause",className:(0,_classnames["default"])("bom-scrub-action",{"bom-scrub-action--with-extra":loop}),type:"button",onClick:this.handlePlayPauseClick,disabled:!hasMultipleSteps},/*#__PURE__*/_react["default"].createElement(_icon.SystemIcon,{className:"bom-scrub-action__icon",icon:playState===_types.ScrubberState.PLAYING||isLoading||isError?_Pause["default"]:_Play["default"],primaryColor:_styles.palette.neutral.white,size:24}),/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__label"},playState===_types.ScrubberState.PLAYING?"Pause":"Play"),loop&&/*#__PURE__*/_react["default"].createElement("span",{className:"bom-scrub-action__extra"},"Loop")),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-timeline-container"},renderTimelineContents())),showUtils&&/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils"},/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__left"},leftUtils),/*#__PURE__*/_react["default"].createElement("div",{className:"bom-scrub-utils__right"},rightUtils)))}}]);return TimeScrubber}(_react["default"].Component);(0,_defineProperty2["default"])(TimeScrubber,"defaultProps",{autoHideMarkers:false,autoPlay:false,errorText:"",forecastMarker:null,isError:false,isLoading:false,loadingText:"",loop:false,onChange:function onChange(){},onPause:function onPause(){},onPlay:function onPlay(){},showUtils:true,timePerStep:500,timeSteps:[]});var _default=TimeScrubber;exports["default"]=_default;

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 _classnames=_interopRequireDefault(require("classnames"));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:(0,_classnames["default"])("bom-scrub-tl__track-segment",{"bom-scrub-tl__track-segment--marker":!!step.markerLabel}),"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/lib/components/Timeline/Timeline.scss

@@ -24,6 +24,23 @@ $_thumb-diameter: 20px;
   margin-right: 2px;
   height: 4px;
 
+  &--marker {
+    &::after {
+      display: block;
+      content: '';
+      width: 1px;
+      height: 6px;
+      background: get-palette-color('neutral.greyDark');
+      position: absolute;
+      top: 12px;
+
+      @include bp(m) {
+        height: 8px;
+        top: 13px;
+      }
+    }
+  }
+
   @include bp(m) {
     height: 6px;
   }

package/lib/scss/module.scss

@@ -209,19 +209,10 @@
   color: get-palette-color('neutral.charcoalMedium');
   position: absolute;
 
-  &::before {
-    display: block;
-    content: '';
-    width: 1px;
-    height: 6px;
-    background: get-palette-color('neutral.greyDark');
-    position: absolute;
-    top: -8px;
-
-    @include bp(m) {
-      height: 8px;
-      top: -7px;
-    }
+  &.bom-scrub-marker--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   @include bom-type-scale(
@@ -232,7 +223,7 @@
   @include bp(m) {
     @include bom-type-scale(
       $size: 'type-14',
-      $line: 'nospace',
+      $line: 'display',
     );
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ausbom/time-scrubber",
-  "version": "0.3.11",
+  "version": "0.5.0",
   "description": "",
   "keywords": [],
   "author": "",
@@ -41,5 +41,5 @@
     "@ausbom/styles": "^0.9.2",
     "lodash.debounce": "4.0.8"
   },
-  "gitHead": "0bf333c15b131c52eb8c63b1ee2f89ffe01c7ff4"
+  "gitHead": "080312dfd193301b5a4e5730eedc51943b5769c9"
 }