@vidispine/vdt-react-timeline 23.1.0-pre.1 → 23.1.0-pre.3

package/dist/Timeline/Timeline.js

@@ -0,0 +1,10 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { useRef } from 'react';
+import clsx from 'clsx';
+import { TimelineProvider } from '../TimelineContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded=["start","end","time","onChangeTime","children","className","perspective","onChangePerspective","defaultPerspective","zoomMultiplier"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function Timeline(_ref){var start=_ref.start,end=_ref.end,time=_ref.time,onChangeTime=_ref.onChangeTime,children=_ref.children,className=_ref.className,perspective=_ref.perspective,onChangePerspective=_ref.onChangePerspective,defaultPerspective=_ref.defaultPerspective,zoomMultiplier=_ref.zoomMultiplier,props=_objectWithoutProperties(_ref,_excluded);var timelineRef=useRef();return/*#__PURE__*/jsx(TimelineProvider,{start:start,end:end,time:time,onChangeTime:onChangeTime,timelineRef:timelineRef,perspective:perspective,onChangePerspective:onChangePerspective,defaultPerspective:defaultPerspective,zoomMultiplier:zoomMultiplier,children:/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({ref:timelineRef,className:clsx('VdtTimeline-root',className)},props),{},{children:children}))});}Timeline.defaultProps={time:undefined,children:undefined,onChangeTime:undefined,perspective:undefined,onChangePerspective:undefined,defaultPerspective:undefined,zoomMultiplier:undefined,className:undefined};
+
+export { Timeline as default };

package/dist/TimelineContext.js

@@ -0,0 +1,8 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { createContext, useMemo, useContext } from 'react';
+import useTimelinePerspective from './useTimelinePerspective.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var TimelineContext=/*#__PURE__*/createContext();function TimelineProvider(_ref){var start=_ref.start,end=_ref.end,time=_ref.time,onChangeTime=_ref.onChangeTime,timelineRef=_ref.timelineRef,children=_ref.children,perspective=_ref.perspective,onChangePerspective=_ref.onChangePerspective,defaultPerspective=_ref.defaultPerspective;var timelinePerspective=useTimelinePerspective({start:start,end:end,perspective:perspective,onChangePerspective:onChangePerspective,defaultPerspective:defaultPerspective});var contextValue=useMemo(function(){return _objectSpread(_objectSpread({},timelinePerspective),{},{start:start,end:end,time:time,onChangeTime:onChangeTime,timelineRef:timelineRef});},[end,onChangeTime,start,time,timelinePerspective,timelineRef]);return/*#__PURE__*/jsx(TimelineContext.Provider,{value:contextValue,children:children});}function useTimeline(){return useContext(TimelineContext);}
+
+export { TimelineContext, TimelineProvider, useTimeline };

package/dist/TimelineEvent/TimelineEvent.js

@@ -0,0 +1,13 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useEffect } from 'react';
+import { Rect } from 'react-konva';
+import { DEFAULT_EVENT_HEIGHT } from '../_consts.js';
+import { vLog, interpolate, getStyleProperties } from '../_utils.js';
+import useHover from '../useHover.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var _excluded=["onClick","x","width","y","height","padding","start","end","onHover","onMove","onMoveStart","onMoveEnd","onResize","onResizeStart","onResizeEnd"],_excluded2=["isHovering"],_excluded3=["isHovering"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var _getStyleProperties=getStyleProperties('--vdt-timeline-palette-primary','--vdt-timeline-palette-primary-dark'),_getStyleProperties2=_slicedToArray(_getStyleProperties,2),palettePrimary=_getStyleProperties2[0],palettePrimaryDark=_getStyleProperties2[1];var EVENT_RESIZER_THUMB_WIDTH=5;function TimelineEvent(_ref){var onClick=_ref.onClick,x=_ref.x,width=_ref.width,y=_ref.y,height=_ref.height,padding=_ref.padding,start=_ref.start,end=_ref.end,onHover=_ref.onHover,onMove=_ref.onMove,onMoveStart=_ref.onMoveStart,onMoveEnd=_ref.onMoveEnd,onResize=_ref.onResize,onResizeStart=_ref.onResizeStart,onResizeEnd=_ref.onResizeEnd,props=_objectWithoutProperties(_ref,_excluded);if([x,width,y,height].some(function(v){return v===undefined;})){vLog.error('VdtTimelineEvent',"missing 'x', 'width', 'y', or 'height' props. If the component is not used as a direct child of VdtTimelineTrack, 'x', 'width', 'y', or 'height' must be passed explicitly");}var eventRef=useRef();var _useHover=useHover({hoverEffect:function hoverEffect(e){if(onHover)onHover(e,true);return function(){if(onHover)onHover(e,false);};}}),isHovering=_useHover.isHovering,hoverProps=_objectWithoutProperties(_useHover,_excluded2);var _useHover2=useHover({hoverEffect:function hoverEffect(e){if(onResize){e.target.getStage().container().style.cursor='col-resize';}return function(){if(onResize){e.target.getStage().container().style.cursor='default';}};}}),isHoveringResize=_useHover2.isHovering,resizeHoverProps=_objectWithoutProperties(_useHover2,_excluded3);var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isMoving=_useState2[0],setIsMoving=_useState2[1];var hasOnClick=!!onClick;useEffect(function(){if(eventRef.current){var cursor=function(){if(isMoving)return 'grabbing';if(isHovering&&hasOnClick)return 'pointer';return 'default';}();eventRef.current.getStage().container().style.cursor=cursor;}},[isMoving,isHovering,hasOnClick]);var paddedY=y+padding;var paddedHeight=height-2*padding;var posProps={y:paddedY,height:paddedHeight,x:x,width:width};var defaultHoverProps=isHovering||isHoveringResize?{fill:palettePrimaryDark}:{};var resizerProps=function resizerProps(which){var resizerX=which==='start'?x:x+width-EVENT_RESIZER_THUMB_WIDTH;return {onDragStart:function onDragStart(){if(!onResizeStart)return;onResizeStart(which);},draggable:!!onResize,dragBoundFunc:function dragBoundFunc(pos){return {x:pos.x,y:paddedY};},onDragEnd:function onDragEnd(){if(!onResizeEnd)return;onResizeEnd(which);},width:EVENT_RESIZER_THUMB_WIDTH,x:resizerX,onDragMove:function onDragMove(e){if(!onResize)return;var _e$target$position=e.target.position(),newX=_e$target$position.x;e.target.x(resizerX);var newPos=Math.floor(interpolate(start,end,x,x+width,newX+(which==='start'?0:EVENT_RESIZER_THUMB_WIDTH)));onResize(e,which,newPos);}};};return/*#__PURE__*/jsxs(Fragment,{children:[/*#__PURE__*/jsx(Rect,_objectSpread(_objectSpread(_objectSpread(_objectSpread({ref:eventRef,draggable:!!onMove,dragBoundFunc:function dragBoundFunc(pos){return {x:pos.x,y:paddedY};},onDragStart:function onDragStart(e){if(!onMove)return;setIsMoving(true);if(onMoveStart){onMoveStart(e);}},onDragEnd:function onDragEnd(e){if(!onMove)return;setIsMoving(false);if(onMoveEnd){onMoveEnd(e);}},onDragMove:function onDragMove(e){if(!onMove)return;var _e$target$position2=e.target.position(),newX=_e$target$position2.x;e.target.x(x);var newStart=Math.floor(interpolate(start,end,x,x+width,newX));onMove(e,newStart);},fill:palettePrimary,onClick:onClick},posProps),defaultHoverProps),hoverProps),props)),/*#__PURE__*/jsx(Rect,_objectSpread(_objectSpread(_objectSpread({},posProps),resizeHoverProps),resizerProps('start'))),/*#__PURE__*/jsx(Rect,_objectSpread(_objectSpread(_objectSpread({},posProps),resizeHoverProps),resizerProps('end')))]});}TimelineEvent.defaultProps={onClick:undefined,onHover:undefined,onMove:undefined,onMoveStart:undefined,onMoveEnd:undefined,onResize:undefined,onResizeStart:undefined,onResizeEnd:undefined,x:undefined,width:undefined,y:0,height:DEFAULT_EVENT_HEIGHT,padding:1,className:undefined};
+
+export { TimelineEvent as default };

package/dist/TimelinePlayhead/TimelinePlayhead.js

@@ -0,0 +1,14 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import clamp from 'lodash.clamp';
+import { DEFAULT_PLAYHEAD_ZINDEX } from '../_consts.js';
+import { vLog, interpolate, getStyleProperties } from '../_utils.js';
+import { useTimeline } from '../TimelineContext.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded=["className","perspective","time","lineWidth","headWidth","headHeight","style","onDrag","HeadProps"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var _getStyleProperties=getStyleProperties('--vdt-timeline-palette-secondary'),_getStyleProperties2=_slicedToArray(_getStyleProperties,1),paletteSecondary=_getStyleProperties2[0];var EmptyImage=document.createElement('img');EmptyImage.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';function TimelinePlayhead(_ref){var _ref$current;var className=_ref.className,propPerspective=_ref.perspective,propTime=_ref.time,lineWidth=_ref.lineWidth,headWidth=_ref.headWidth,headHeight=_ref.headHeight,style=_ref.style,onDrag=_ref.onDrag,HeadProps=_ref.HeadProps,props=_objectWithoutProperties(_ref,_excluded);var _ref2=useTimeline()||{perspective:propPerspective,time:propTime},perspective=_ref2.perspective,time=_ref2.time,onChangeTime=_ref2.onChangeTime;if(perspective===undefined){vLog.error('VdtTimelinePlayhead',"missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");}var ref=useRef();var containerEl=(_ref$current=ref.current)===null||_ref$current===void 0?void 0:_ref$current.parentElement;var containerWidth=(containerEl===null||containerEl===void 0?void 0:containerEl.clientWidth)||0;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isDragging=_useState2[0],setIsDragging=_useState2[1];var _useState3=useState(time),_useState4=_slicedToArray(_useState3,2),localTime=_useState4[0],setLocalTime=_useState4[1];var markerLeft=interpolate(0,containerWidth,perspective.start,perspective.end,localTime);var isValidTime=function isValidTime(f){return f<=perspective.end&&f>=perspective.start;};var hide=!isValidTime(localTime);useEffect(function(){if(time!==undefined&&!isDragging){setLocalTime(time);}},[time,isDragging]);var handleDrag=onDrag||onChangeTime&&function(e){for(var _len=arguments.length,args=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key];}return onChangeTime.apply(void 0,args);};return/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({ref:ref,className:clsx('VdtTimelinePlayhead-root',className),style:_objectSpread({width:lineWidth,left:markerLeft,display:hide&&'none',zIndex:DEFAULT_PLAYHEAD_ZINDEX},style),draggable:true,onDragStart:function onDragStart(e){setIsDragging(true);e.dataTransfer.setDragImage(EmptyImage,0,0);return false;},onDragEnd:function onDragEnd(){setIsDragging(false);if(handleDrag!==null&&handleDrag!==void 0&&handleDrag.flush){handleDrag.flush();}},onDrag:function onDrag(e){if(handleDrag){var _ref$current$parentEl=ref.current.parentElement.getBoundingClientRect(),containerX=_ref$current$parentEl.x;var newTime=interpolate(perspective.start,perspective.end,0,containerWidth,e.clientX-containerX);if(isValidTime(newTime)){var clampedNewTime=clamp(newTime,perspective.start,perspective.end);handleDrag(e,clampedNewTime);setLocalTime(clampedNewTime);}}}},props),{},{children:/*#__PURE__*/jsx("div",_objectSpread({className:"VdtTimelinePlayhead-head",style:{position:'absolute',height:headHeight,width:headWidth,backgroundColor:paletteSecondary,left:-(headWidth/2-lineWidth/2),top:-headHeight+1,clipPath:'polygon(0% 0%, 0% 70%, 50% 100%, 100% 70%, 100% 0%)'}},HeadProps))}));}TimelinePlayhead.defaultProps={style:{},headHeight:16,headWidth:12,lineWidth:2,perspective:undefined,time:0,onDrag:undefined,HeadProps:{},className:undefined};
+
+export { TimelinePlayhead as default };

package/dist/TimelinePlayheadTrack/TimelinePlayheadTrack.js

@@ -0,0 +1,19 @@
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, Children, cloneElement, useState, useEffect } from 'react';
+import clsx from 'clsx';
+import clamp from 'lodash.clamp';
+import sortBy from 'lodash.sortby';
+import uniq from 'lodash.uniq';
+import { Stage, Layer, Group, Rect, Text, Line } from 'react-konva';
+import { vLog, interpolate, getStyleProperties, mapPairs } from '../_utils.js';
+import { useTimeline } from '../TimelineContext.js';
+import useHover from '../useHover.js';
+import useResizeObserver from '../useResizeObserver.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded=["className","children","ticks","onClick","onHover","onWheel","onDrag","start","end","perspective","timelineRef","StageProps","LayerProps","GroupProps","RectProps","TickGroupProps","TickTextProps","TickLineProps"],_excluded2=["isHovering"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var LABEL_EDGE_MARGIN=2;var _getStyleProperties=getStyleProperties('--vdt-timeline-palette-text-primary','--vdt-timeline-palette-text-secondary'),_getStyleProperties2=_slicedToArray(_getStyleProperties,2),paletteTextPrimary=_getStyleProperties2[0],paletteTextSecondary=_getStyleProperties2[1];function TimelineTick(_ref){var x=_ref.x,y=_ref.y,minX=_ref.minX,maxX=_ref.maxX,label=_ref.label,TickGroupProps=_ref.TickGroupProps,TickTextProps=_ref.TickTextProps,TickLineProps=_ref.TickLineProps;var hasLabel=label!==undefined;var _ref2=hasLabel?{color:paletteTextPrimary,tickWidth:2,tickSize:8}:{color:paletteTextSecondary,tickWidth:1,tickSize:4},color=_ref2.color,tickWidth=_ref2.tickWidth,tickSize=_ref2.tickSize;var _useState=useState(),_useState2=_slicedToArray(_useState,2),labelWidth=_useState2[0],setLabelWidth=_useState2[1];var textRef=useRef();useEffect(function(){if(textRef.current){setLabelWidth(textRef.current.getTextWidth());}},[]);var textX=clamp(x-labelWidth/2,minX+LABEL_EDGE_MARGIN,maxX-labelWidth-LABEL_EDGE_MARGIN)||undefined;if(x<minX||x>maxX){return null;}return/*#__PURE__*/jsxs(Group,_objectSpread(_objectSpread({},TickGroupProps),{},{children:[/*#__PURE__*/jsx(Text,_objectSpread({ref:textRef,x:textX,y:y-tickSize-20,fontFamily:"Helvetica",text:label,fontStyle:"bold",fontSize:10,fill:color},TickTextProps)),/*#__PURE__*/jsx(Line,_objectSpread({points:[x,y-tickSize,x,y],stroke:color,strokeWidth:tickWidth},TickLineProps))]}));}function defaultTicks(_ref3){var width=_ref3.width,perspective=_ref3.perspective;var numTicks=Math.max(Math.floor(width/90),2);var labeledTicks=uniq(_toConsumableArray(Array(numTicks).keys()).map(function(i){return interpolate(perspective.start,perspective.end,0,numTicks-1,i);})).map(function(time){return {time:time,label:String(Math.round(time))};});var unlabeledTicks=mapPairs(labeledTicks,function(curr,next){var tickDelta=(next.time-curr.time)/10;return _toConsumableArray(Array(9).keys()).map(function(i){return {time:curr.time+(i+1)*tickDelta};});}).flat();return sortBy([].concat(_toConsumableArray(labeledTicks),_toConsumableArray(unlabeledTicks)),['time']);}function TimelinePlayheadTrack(_ref4){var _trackContainerRef$cu,_timelineRef$current;var className=_ref4.className,children=_ref4.children,propTicks=_ref4.ticks,onClick=_ref4.onClick,onHover=_ref4.onHover,onWheel=_ref4.onWheel,onDrag=_ref4.onDrag,propStart=_ref4.start,propEnd=_ref4.end,propPerspective=_ref4.perspective,propTimelineRef=_ref4.timelineRef,StageProps=_ref4.StageProps,LayerProps=_ref4.LayerProps,GroupProps=_ref4.GroupProps,RectProps=_ref4.RectProps,TickGroupProps=_ref4.TickGroupProps,TickTextProps=_ref4.TickTextProps,TickLineProps=_ref4.TickLineProps,props=_objectWithoutProperties(_ref4,_excluded);var _ref5=useTimeline()||{start:propStart,end:propEnd,perspective:propPerspective,timelineRef:propTimelineRef},start=_ref5.start,end=_ref5.end,perspective=_ref5.perspective,setPerspective=_ref5.setPerspective,zoom=_ref5.zoom,onChangeTime=_ref5.onChangeTime,timelineRef=_ref5.timelineRef;if(start===undefined||end===undefined||perspective===undefined){vLog.error('VdtTimelinePlayheadTrack',"missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");}if(timelineRef===undefined&&(children===null||children===void 0?void 0:children.length)>0){vLog.warn('VdtTimelinePlayheadTrack',"missing 'timelineRef' prop. This ref is used to set the height of the playhead within the timeline.");}var handleWheel=onWheel||zoom&&function(e){for(var _len=arguments.length,args=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key];}return zoom.apply(void 0,args);};var handleClick=onClick||onChangeTime&&function(e){for(var _len2=arguments.length,args=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++){args[_key2-1]=arguments[_key2];}return onChangeTime.apply(void 0,args);};var handleDrag=onDrag||setPerspective&&function(e){for(var _len3=arguments.length,args=new Array(_len3>1?_len3-1:0),_key3=1;_key3<_len3;_key3++){args[_key3-1]=arguments[_key3];}return setPerspective.apply(void 0,args);};var trackContainerRef=useRef();var _useResizeObserver=useResizeObserver(trackContainerRef),_useResizeObserver$wi=_useResizeObserver.width,width=_useResizeObserver$wi===void 0?0:_useResizeObserver$wi,_useResizeObserver$he=_useResizeObserver.height,height=_useResizeObserver$he===void 0?0:_useResizeObserver$he;var getTicks=propTicks||defaultTicks;var timeTicks=typeof getTicks==='function'?getTicks({start:start,end:end,width:width,perspective:perspective}):getTicks;var ticks=timeTicks.map(function(_ref6){var label=_ref6.label,time=_ref6.time;return {x:interpolate(0,width,perspective.start,perspective.end,time),label:label,time:time};});var _useResizeObserver2=useResizeObserver(timelineRef),timelineHeight=_useResizeObserver2.height;var timelineOffsetTop=((trackContainerRef===null||trackContainerRef===void 0?void 0:(_trackContainerRef$cu=trackContainerRef.current)===null||_trackContainerRef$cu===void 0?void 0:_trackContainerRef$cu.offsetTop)||0)-((timelineRef===null||timelineRef===void 0?void 0:(_timelineRef$current=timelineRef.current)===null||_timelineRef$current===void 0?void 0:_timelineRef$current.offsetTop)||0);var playheadTop=height;var playheadHeight=timelineHeight-height-timelineOffsetTop||undefined;var trackRectRef=useRef();var _useHover=useHover({hoverEffect:function hoverEffect(e){if(onHover)onHover(e,true);var container=e.target.getStage().container();if(handleClick){container.style.cursor='pointer';}return function(){if(onHover)onHover(e,false);if(handleClick){container.style.cursor='default';}};}});_useHover.isHovering;var hoverProps=_objectWithoutProperties(_useHover,_excluded2);return/*#__PURE__*/jsxs("div",_objectSpread(_objectSpread({ref:trackContainerRef,className:clsx('VdtTimelinePlayheadTrack-root',className)},props),{},{children:[Children.map(children,function(child){return/*#__PURE__*/cloneElement(child,{style:{top:playheadTop,height:playheadHeight}});}),/*#__PURE__*/jsx(Stage,_objectSpread(_objectSpread({height:height,width:width},StageProps),{},{children:/*#__PURE__*/jsx(Layer,_objectSpread(_objectSpread({},LayerProps),{},{children:/*#__PURE__*/jsxs(Group,_objectSpread(_objectSpread(_objectSpread({onClick:function onClick(e){if(trackRectRef.current&&handleClick){var _trackRectRef$current=trackRectRef.current.getRelativePointerPosition(),x=_trackRectRef$current.x;handleClick(e,interpolate(perspective.start,perspective.end,0,width,x));}},onWheel:function onWheel(e){if(trackRectRef.current&&handleWheel){var _trackRectRef$current2=trackRectRef.current.getRelativePointerPosition(),x=_trackRectRef$current2.x;handleWheel(e,e.evt.deltaY<0?'in':'out',interpolate(perspective.start,perspective.end,0,width,x));}},draggable:true,dragBoundFunc:function dragBoundFunc(){return {x:0,y:0};},onDragStart:function onDragStart(e){var container=e.target.getStage().container();container.style.cursor='grabbing';},onDragEnd:function onDragEnd(e){var container=e.target.getStage().container();container.style.cursor='pointer';},onDragMove:function onDragMove(e){if(handleDrag){var movementX=e.evt.movementX;if(movementX===0)return;var newStart=interpolate(perspective.start,perspective.end,0,width,-movementX);var perspectiveDuration=perspective.end-perspective.start;var clampedNewStart=clamp(newStart,start,end-perspectiveDuration);var newEnd=clampedNewStart+perspectiveDuration;handleDrag(e,clampedNewStart,newEnd);}}},hoverProps),GroupProps),{},{children:[/*#__PURE__*/jsx(Rect,_objectSpread({ref:trackRectRef,x:0,y:0,width:width,height:height},RectProps)),ticks.map(function(_ref7){var x=_ref7.x,label=_ref7.label,time=_ref7.time;return/*#__PURE__*/jsx(TimelineTick,{minX:0,maxX:width,x:x,label:label,y:height,TickGroupProps:TickGroupProps,TickLineProps:TickLineProps,TickTextProps:TickTextProps},time);})]}))}))}))]}));}TimelinePlayheadTrack.defaultProps={onClick:undefined,onHover:undefined,ticks:defaultTicks,children:undefined,start:undefined,end:undefined,perspective:undefined,onWheel:undefined,onDrag:undefined,timelineRef:undefined,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},TickGroupProps:{},TickTextProps:{},TickLineProps:{},className:undefined,style:{}};
+
+export { TimelinePlayheadTrack as default };

package/dist/TimelineRow/TimelineRow.js

@@ -0,0 +1,8 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import clsx from 'clsx';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var _excluded=["className","children","label","LabelProps","LabelTextProps"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function TimelineRow(_ref){var className=_ref.className,children=_ref.children,label=_ref.label,LabelProps=_ref.LabelProps,LabelTextProps=_ref.LabelTextProps,props=_objectWithoutProperties(_ref,_excluded);return/*#__PURE__*/jsxs("div",_objectSpread(_objectSpread({className:clsx('VdtTimelineRow-root',className,{'VdtTimelineRow-hasLabel':!!label})},props),{},{children:[label&&/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({className:"VdtTimelineRow-label"},LabelProps),{},{children:/*#__PURE__*/jsx("span",_objectSpread(_objectSpread({className:"VdtTimelineRow-labelText"},LabelTextProps),{},{children:label}))})),children]}));}TimelineRow.defaultProps={children:undefined,label:undefined,LabelProps:{},LabelTextProps:{},className:undefined,style:{}};
+
+export { TimelineRow as default };

package/dist/TimelineScroll/TimelineScroll.js

@@ -0,0 +1,16 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef } from 'react';
+import clsx from 'clsx';
+import clamp from 'lodash.clamp';
+import { Stage, Layer, Rect } from 'react-konva';
+import { DEFAULT_PLAYHEAD_ZINDEX } from '../_consts.js';
+import { vLog, interpolate, getStyleProperties } from '../_utils.js';
+import { useTimeline } from '../TimelineContext.js';
+import useResizeObserver from '../useResizeObserver.js';
+import { jsx } from 'react/jsx-runtime';
+
+var _excluded=["className","onScroll","onClick","start","end","perspective","style","StageProps","LayerProps","RectProps"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var _getStyleProperties=getStyleProperties('--vdt-timeline-palette-secondary'),_getStyleProperties2=_slicedToArray(_getStyleProperties,1),paletteSecondary=_getStyleProperties2[0];function TimelineScroll(_ref){var className=_ref.className,onScroll=_ref.onScroll,onClick=_ref.onClick,propStart=_ref.start,propEnd=_ref.end,propPerspective=_ref.perspective,style=_ref.style,StageProps=_ref.StageProps,LayerProps=_ref.LayerProps,RectProps=_ref.RectProps,props=_objectWithoutProperties(_ref,_excluded);var _ref2=useTimeline()||{start:propStart,end:propEnd,perspective:propPerspective},start=_ref2.start,end=_ref2.end,perspective=_ref2.perspective,setPerspective=_ref2.setPerspective;if(start===undefined||end===undefined||perspective===undefined){vLog.error('VdtTimelineScroll',"missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");}var ref=useRef();var _useResizeObserver=useResizeObserver(ref),_useResizeObserver$wi=_useResizeObserver.width,scrollTrackWidth=_useResizeObserver$wi===void 0?0:_useResizeObserver$wi,_useResizeObserver$he=_useResizeObserver.height,height=_useResizeObserver$he===void 0?0:_useResizeObserver$he;var scrollLeft=interpolate(0,scrollTrackWidth,start,end,perspective.start);var perspectiveDuration=perspective.end-perspective.start;var scrollWidth=interpolate(0,scrollTrackWidth,0,end-start,perspectiveDuration);var handleScroll=onScroll||setPerspective&&function(e){for(var _len=arguments.length,args=new Array(_len>1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key];}return setPerspective.apply(void 0,args);};var handleClick=onClick||setPerspective&&function(e){for(var _len2=arguments.length,args=new Array(_len2>1?_len2-1:0),_key2=1;_key2<_len2;_key2++){args[_key2-1]=arguments[_key2];}return setPerspective.apply(void 0,args);};var isZoomed=start!==perspective.start||end!==perspective.end;return/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({className:clsx('VdtTimelineScroll-root',className),style:_objectSpread({display:!isZoomed&&'none',zIndex:DEFAULT_PLAYHEAD_ZINDEX+1},style),ref:ref},props),{},{children:/*#__PURE__*/jsx(Stage,_objectSpread(_objectSpread({height:height,width:scrollTrackWidth,onClick:function onClick(e){if(!handleClick)return;var _e$currentTarget$getR=e.currentTarget.getRelativePointerPosition(),x=_e$currentTarget$getR.x;var newStart;if(x>scrollLeft+scrollWidth){newStart=Math.floor(interpolate(start,end,0,scrollTrackWidth,x-scrollWidth));}else if(x<scrollLeft){newStart=Math.floor(interpolate(start,end,0,scrollTrackWidth,x));}if(newStart!==undefined&&newStart!==perspective.start){handleClick(e,newStart,newStart+perspectiveDuration);}}},StageProps),{},{children:/*#__PURE__*/jsx(Layer,_objectSpread(_objectSpread({},LayerProps),{},{children:/*#__PURE__*/jsx(Rect,_objectSpread({x:scrollLeft,y:0,width:scrollWidth,height:height,fill:paletteSecondary,draggable:true,dragBoundFunc:function dragBoundFunc(pos){return {x:clamp(pos.x,0,scrollTrackWidth-scrollWidth),y:0};},onDragMove:function onDragMove(e){if(!handleScroll)return;var _e$target$position=e.target.position(),x=_e$target$position.x;e.target.x(scrollLeft);var newStart=Math.floor(interpolate(start,end,0,scrollTrackWidth,x));handleScroll(e,newStart,newStart+perspectiveDuration);}},RectProps))}))}))}));}TimelineScroll.defaultProps={onScroll:undefined,onClick:undefined,start:undefined,end:undefined,perspective:undefined,style:{},StageProps:{},LayerProps:{},RectProps:{},className:undefined};
+
+export { TimelineScroll as default };

package/dist/TimelineScrollContainer/TimelineScrollContainer.js

@@ -0,0 +1,11 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import clsx from 'clsx';
+import { useTimeline } from '../TimelineContext.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import TimelineRow from '../TimelineRow/TimelineRow.js';
+import TimelineScroll from '../TimelineScroll/TimelineScroll.js';
+
+var _excluded=["className","children","getScrollDistance","RowProps","ScrollProps"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function defaultGetScrollDistance(e,_ref){var start=_ref.start,end=_ref.end;return Math.floor(0.02*(start-end));}function TimelineScrollContainer(_ref2){var className=_ref2.className,children=_ref2.children,getScrollDistance=_ref2.getScrollDistance,RowProps=_ref2.RowProps,ScrollProps=_ref2.ScrollProps,props=_objectWithoutProperties(_ref2,_excluded);var _useTimeline=useTimeline(),start=_useTimeline.start,end=_useTimeline.end,perspective=_useTimeline.perspective,setPerspective=_useTimeline.setPerspective;return/*#__PURE__*/jsxs("div",_objectSpread(_objectSpread({className:clsx('VdtTimelineScrollContainer-root',className),onWheel:function onWheel(e){if(e.shiftKey){var delta=getScrollDistance(e,{start:start,end:end,perspective:perspective});var newPerspectiveStart=perspective.start+(e.deltaY>0?-delta:delta);var perspectiveDuration=perspective.end-perspective.start;var newPerspectiveEnd=newPerspectiveStart+perspectiveDuration;if(newPerspectiveEnd>end){setPerspective(end-perspectiveDuration,end);}else if(newPerspectiveStart<start){setPerspective(start,perspectiveDuration);}else {setPerspective(newPerspectiveStart,newPerspectiveEnd);}}}},props),{},{children:[children,/*#__PURE__*/jsx(TimelineRow,_objectSpread(_objectSpread({className:clsx('VdtTimelineScrollContainer-timelineRow')},RowProps),{},{children:/*#__PURE__*/jsx(TimelineScroll,_objectSpread({},ScrollProps))}))]}));}TimelineScrollContainer.defaultProps={children:undefined,getScrollDistance:defaultGetScrollDistance,RowProps:{},ScrollProps:{},className:undefined};
+
+export { TimelineScrollContainer as default };

package/dist/TimelineTrack/TimelineTrack.js

@@ -0,0 +1,17 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { Children, useRef, cloneElement } from 'react';
+import clsx from 'clsx';
+import { Stage, Layer, Group, Rect } from 'react-konva';
+import { DEFAULT_EVENT_HEIGHT } from '../_consts.js';
+import { vLog, interpolate } from '../_utils.js';
+import { useTimeline } from '../TimelineContext.js';
+import useHover from '../useHover.js';
+import useResizeObserver from '../useResizeObserver.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded=["className","children","perspective","onClick","style","onHover","StageProps","LayerProps","GroupProps","RectProps"],_excluded2=["isHovering"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}function TimelineTrack(_ref){var className=_ref.className,children=_ref.children,propPerspective=_ref.perspective,onClick=_ref.onClick,style=_ref.style,onHover=_ref.onHover,StageProps=_ref.StageProps,LayerProps=_ref.LayerProps,GroupProps=_ref.GroupProps,RectProps=_ref.RectProps,props=_objectWithoutProperties(_ref,_excluded);var _ref2=useTimeline()||{perspective:propPerspective},perspective=_ref2.perspective;if(perspective===undefined){vLog.error('VdtTimelineTrack',"missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");}var visibleChildren=Children.toArray(children).filter(function(_ref3){var _ref3$props=_ref3.props,childProps=_ref3$props===void 0?{}:_ref3$props;var isOutsidePerspective=childProps.start>perspective.end||childProps.end<perspective.start;return !isOutsidePerspective;});var eventsContainerRef=useRef();var _useResizeObserver=useResizeObserver(eventsContainerRef),_useResizeObserver$wi=_useResizeObserver.width,eventContainerWidth=_useResizeObserver$wi===void 0?0:_useResizeObserver$wi,_useResizeObserver$he=_useResizeObserver.height,eventContainerHeight=_useResizeObserver$he===void 0?0:_useResizeObserver$he;// expect children to be passed 'y' and 'height' props so that we can calculate the track height
+var eventsContainerHeight=Math.max.apply(Math,_toConsumableArray(Children.map(children,function(_ref4){var _ref4$props=_ref4.props;_ref4$props=_ref4$props===void 0?{}:_ref4$props;var _ref4$props$y=_ref4$props.y,y=_ref4$props$y===void 0?0:_ref4$props$y,_ref4$props$height=_ref4$props.height,height=_ref4$props$height===void 0?0:_ref4$props$height;return y+height;})))||DEFAULT_EVENT_HEIGHT;var cloneChild=function cloneChild(child){var _ref5=child.props||{},childStart=_ref5.start,childEnd=_ref5.end;var xProps=function(){if(childStart!==undefined&&childEnd!==undefined){var childX=interpolate(0,eventContainerWidth,perspective.start,perspective.end,childStart);var childWidth=interpolate(0,eventContainerWidth,perspective.start,perspective.end,childEnd)-childX;return {x:childX,width:childWidth};}return {};}();return/*#__PURE__*/cloneElement(child,_objectSpread(_objectSpread({},child.props),xProps));};var _useHover=useHover({hoverEffect:function hoverEffect(e){if(onHover)onHover(e,true);var container=e.target.getStage().container();if(onClick){container.style.cursor='pointer';}return function(){if(onHover)onHover(e,false);if(onClick){container.style.cursor='default';}};}});_useHover.isHovering;var hoverProps=_objectWithoutProperties(_useHover,_excluded2);return/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({ref:eventsContainerRef,className:clsx('VdtTimelineTrack-root',className),style:_objectSpread({height:eventsContainerHeight},style)},props),{},{children:/*#__PURE__*/jsx(Stage,_objectSpread(_objectSpread({height:eventContainerHeight,width:eventContainerWidth},StageProps),{},{children:/*#__PURE__*/jsx(Layer,_objectSpread(_objectSpread({},LayerProps),{},{children:/*#__PURE__*/jsxs(Group,_objectSpread(_objectSpread({},GroupProps),{},{children:[/*#__PURE__*/jsx(Rect,_objectSpread(_objectSpread({x:0,y:0,width:eventContainerWidth,height:eventContainerHeight,onClick:onClick},hoverProps),RectProps)),Children.map(visibleChildren,cloneChild)]}))}))}))}));}TimelineTrack.defaultProps={style:{},children:undefined,perspective:undefined,onClick:undefined,onHover:undefined,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},className:undefined};
+
+export { TimelineTrack as default };

package/dist/TimelineWaveform/TimelineWaveform.js

@@ -0,0 +1,15 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useRef, useMemo, memo } from 'react';
+import clsx from 'clsx';
+import { Stage, Layer, Rect } from 'react-konva';
+import { getStyleProperties, vLog, interpolate } from '../_utils.js';
+import { useTimeline } from '../TimelineContext.js';
+import useResizeObserver from '../useResizeObserver.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var _excluded=["amplitudeSegments","pxPerTimeUnit","start","height"],_excluded2=["className","waveform","start","end","perspective","StageProps","LayerProps","RectProps","WaveRectProps"];function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach(function(key){_defineProperty(target,key,source[key]);}):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach(function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key));});}return target;}var _getStyleProperties=getStyleProperties('--vdt-timeline-palette-primary'),_getStyleProperties2=_slicedToArray(_getStyleProperties,1),palettePrimary=_getStyleProperties2[0];var TimelineWaveFormRects=/*#__PURE__*/memo(function(_ref){var amplitudeSegments=_ref.amplitudeSegments,pxPerTimeUnit=_ref.pxPerTimeUnit,start=_ref.start,height=_ref.height,props=_objectWithoutProperties(_ref,_excluded);return amplitudeSegments.map(function(_ref2,i){var amplitude=_ref2.amplitude,segmentStart=_ref2.start,segmentEnd=_ref2.end;var rectWidth=pxPerTimeUnit*(segmentEnd-segmentStart);var rectX=(segmentStart-start)*pxPerTimeUnit;var rectHeight=height*amplitude;var centeredY=(height-rectHeight)/2;return/*#__PURE__*/jsx(Rect// eslint-disable-next-line react/no-array-index-key
+,_objectSpread({x:rectX,y:centeredY,height:rectHeight,width:rectWidth,fill:palettePrimary},props),i);});});function TimelineWaveform(_ref3){var className=_ref3.className,waveform=_ref3.waveform,propStart=_ref3.start,propEnd=_ref3.end,propPerspective=_ref3.perspective,StageProps=_ref3.StageProps,LayerProps=_ref3.LayerProps,RectProps=_ref3.RectProps,WaveRectProps=_ref3.WaveRectProps,props=_objectWithoutProperties(_ref3,_excluded2);var _ref4=useTimeline()||{start:propStart,end:propEnd,perspective:propPerspective},start=_ref4.start,end=_ref4.end,perspective=_ref4.perspective;if(start===undefined||end===undefined||perspective===undefined){vLog.error('VdtTimelineWaveform',"missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' or 'perspective' must be passed explicitly");}var ref=useRef();var _useResizeObserver=useResizeObserver(ref),_useResizeObserver$wi=_useResizeObserver.width,width=_useResizeObserver$wi===void 0?0:_useResizeObserver$wi,_useResizeObserver$he=_useResizeObserver.height,height=_useResizeObserver$he===void 0?0:_useResizeObserver$he;var amplitudeSegments=useMemo(function(){return waveform.map(function(amplitude,i){return {amplitude:amplitude,start:interpolate(start,end,0,waveform.length-1,i),end:interpolate(start,end,0,waveform.length-1,i+1)};});},[waveform,start,end]);var pxPerTimeUnit=width/(end-start);var scaleX=(end-start)/(perspective.end-perspective.start);var offsetX=interpolate(0,scaleX*width,start,end,perspective.start);return/*#__PURE__*/jsx("div",_objectSpread(_objectSpread({ref:ref,className:clsx('VdtTimelineWaveform-root',className)},props),{},{children:/*#__PURE__*/jsx(Stage,_objectSpread(_objectSpread({height:height,width:width,x:-offsetX,scaleX:scaleX},StageProps),{},{children:/*#__PURE__*/jsxs(Layer,_objectSpread(_objectSpread({listening:false},LayerProps),{},{children:[/*#__PURE__*/jsx(Rect,_objectSpread({x:0,y:0,width:width,height:height},RectProps)),/*#__PURE__*/jsx(TimelineWaveFormRects,_objectSpread({amplitudeSegments:amplitudeSegments,pxPerTimeUnit:pxPerTimeUnit,start:start,height:height},WaveRectProps))]}))}))}));}TimelineWaveform.defaultProps={waveform:[],start:undefined,end:undefined,perspective:undefined,StageProps:{},LayerProps:{},RectProps:{},WaveRectProps:{},className:undefined};
+
+export { TimelineWaveform as default };

package/dist/_consts.js

@@ -0,0 +1,3 @@
+var DEFAULT_EVENT_HEIGHT=15;var DEFAULT_PLAYHEAD_ZINDEX=100;
+
+export { DEFAULT_EVENT_HEIGHT, DEFAULT_PLAYHEAD_ZINDEX };

package/dist/_utils.js

@@ -0,0 +1,4 @@
+var interpolate=function interpolate(y0,y1,x0,x1,x){return y0+(x-x0)*(y1-y0)/(x1-x0);};var vLogImpl=function vLogImpl(component,msg,level){if(process.env.NODE_ENV==='development'){// eslint-disable-next-line no-console
+console[level]("".concat(component?"".concat(component,": "):'').concat(msg));}};var vLog={error:function error(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}return vLogImpl.apply(void 0,args.concat(['error']));},warn:function warn(){for(var _len2=arguments.length,args=new Array(_len2),_key2=0;_key2<_len2;_key2++){args[_key2]=arguments[_key2];}return vLogImpl.apply(void 0,args.concat(['warn']));}};function mapPairs(arr,func){var result=[];for(var i=0;i<arr.length-1;i+=1){result.push(func(arr[i],arr[i+1]));}return result;}function getStyleProperties(){var style=getComputedStyle(document.body);for(var _len3=arguments.length,properties=new Array(_len3),_key3=0;_key3<_len3;_key3++){properties[_key3]=arguments[_key3];}return properties.map(function(prop){return style.getPropertyValue(prop);});}
+
+export { getStyleProperties, interpolate, mapPairs, vLog };

package/dist/index.js

@@ -0,0 +1,10 @@
+export { TimelineContext, TimelineProvider, useTimeline } from './TimelineContext.js';
+export { default as Timeline } from './Timeline/Timeline.js';
+export { default as TimelinePlayhead } from './TimelinePlayhead/TimelinePlayhead.js';
+export { default as TimelineWaveform } from './TimelineWaveform/TimelineWaveform.js';
+export { default as TimelineEvent } from './TimelineEvent/TimelineEvent.js';
+export { default as TimelineTrack } from './TimelineTrack/TimelineTrack.js';
+export { default as TimelineRow } from './TimelineRow/TimelineRow.js';
+export { default as TimelinePlayheadTrack } from './TimelinePlayheadTrack/TimelinePlayheadTrack.js';
+export { default as TimelineScroll } from './TimelineScroll/TimelineScroll.js';
+export { default as TimelineScrollContainer } from './TimelineScrollContainer/TimelineScrollContainer.js';

package/dist/useHover.js

@@ -0,0 +1,6 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef } from 'react';
+
+function useHover(){var _ref=arguments.length>0&&arguments[0]!==undefined?arguments[0]:{},_ref$hoverEffect=_ref.hoverEffect,hoverEffect=_ref$hoverEffect===void 0?function(){}:_ref$hoverEffect;var _useState=useState(false),_useState2=_slicedToArray(_useState,2),isHovering=_useState2[0],setIsHovering=_useState2[1];var cleanupHover=useRef(null);return {isHovering:isHovering,onMouseEnter:function onMouseEnter(e){setIsHovering(true);cleanupHover.current=hoverEffect(e);},onMouseLeave:function onMouseLeave(){setIsHovering(false);if(cleanupHover.current){cleanupHover.current();}cleanupHover.current=null;}};}
+
+export { useHover as default };

package/dist/useOptionallyControlledState.js

@@ -0,0 +1,7 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef } from 'react';
+import { vLog } from './_utils.js';
+
+function useOptionallyControlledState(_ref){var _ref$uncontrolledDefa=_ref.uncontrolledDefaultState,uncontrolledDefaultState=_ref$uncontrolledDefa===void 0?undefined:_ref$uncontrolledDefa,_ref$uncontrolledOnCh=_ref.uncontrolledOnChange,uncontrolledOnChange=_ref$uncontrolledOnCh===void 0?undefined:_ref$uncontrolledOnCh,_ref$controlledState=_ref.controlledState,controlledState=_ref$controlledState===void 0?undefined:_ref$controlledState,_ref$controlledOnChan=_ref.controlledOnChange,controlledOnChange=_ref$controlledOnChan===void 0?undefined:_ref$controlledOnChan,componentName=_ref.componentName,stateName=_ref.stateName;var _useState=useState(uncontrolledDefaultState),_useState2=_slicedToArray(_useState,2),uncontrolledState=_useState2[0],setUncontrolledState=_useState2[1];var isControlled=useRef(null);var setIsControlled=function setIsControlled(newValue){if(isControlled.current!==null&&isControlled.current!==newValue){if(newValue){vLog.warn(componentName,"".concat(stateName," changed from uncontrolled to controlled"));}else {vLog.warn(componentName,"".concat(stateName," changed from controlled to uncontrolled"));}}isControlled.current=newValue;};if(controlledState!==undefined){setIsControlled(true);return [controlledState,controlledOnChange];}setIsControlled(false);return [uncontrolledState,controlledOnChange?function(){for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}if(uncontrolledOnChange){uncontrolledOnChange.apply(void 0,[setUncontrolledState].concat(args));}else {setUncontrolledState.apply(void 0,args);}controlledOnChange.apply(void 0,args);}:uncontrolledOnChange||setUncontrolledState];}
+
+export { useOptionallyControlledState as default };

package/dist/useResizeObserver.js

@@ -0,0 +1,6 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useRef, useEffect } from 'react';
+
+function useResizeObserver(ref){var _useState=useState({}),_useState2=_slicedToArray(_useState,2),rect=_useState2[0],setRect=_useState2[1];var observerRef=useRef(new ResizeObserver(function(entries){var _entries$;var contentRect=(_entries$=entries[0])===null||_entries$===void 0?void 0:_entries$.contentRect;if(contentRect){setRect(contentRect);}}));useEffect(function(){var observer=observerRef===null||observerRef===void 0?void 0:observerRef.current;var el=ref===null||ref===void 0?void 0:ref.current;if(el){observer.observe(el);}return function(){if(el){observer.unobserve(el);}};},[ref]);return rect;}
+
+export { useResizeObserver as default };

package/dist/useTimelinePerspective.js

@@ -0,0 +1,7 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import clamp from 'lodash.clamp';
+import useOptionallyControlledState from './useOptionallyControlledState.js';
+
+function defaultGetZoomMultiplier(direction,time,perspective){var multiplier=perspective.end-perspective.start<100&&direction==='in'?1:2;return direction==='in'?1/multiplier:multiplier;}function useTimelinePerspective(_ref){var start=_ref.start,end=_ref.end,propDefaultPerspective=_ref.defaultPerspective,propPerspective=_ref.perspective,propOnChangePerspective=_ref.onChangePerspective,_ref$zoomMultiplier=_ref.zoomMultiplier,zoomMultiplier=_ref$zoomMultiplier===void 0?defaultGetZoomMultiplier:_ref$zoomMultiplier;var _useOptionallyControl=useOptionallyControlledState({uncontrolledDefaultState:propDefaultPerspective||{start:start,end:end},controlledState:propPerspective,controlledOnChange:propOnChangePerspective,componentName:'VdtTimeline',stateName:'perspective'}),_useOptionallyControl2=_slicedToArray(_useOptionallyControl,2),perspective=_useOptionallyControl2[0],setPerspective=_useOptionallyControl2[1];var getZoomMultiplier=typeof zoomMultiplier==='function'?zoomMultiplier:function(direction){return direction==='in'?1/zoomMultiplier:zoomMultiplier;};var checkedSetPerspective=function checkedSetPerspective(perspectiveStart,perspectiveEnd){setPerspective({start:clamp(Number(perspectiveStart),start,end),end:clamp(Number(perspectiveEnd),start,end)});};var zoom=function zoom(direction,time){var perspectiveDuration=perspective.end-perspective.start;var normalizedTimeOffset=(time-perspective.start)/perspectiveDuration;var currZoomMultiplier=getZoomMultiplier(direction,time,perspective);if(currZoomMultiplier===1){return;}var newPerspectiveDuration=(perspective.end-perspective.start)*currZoomMultiplier;var newPerspectiveStart=time-normalizedTimeOffset*newPerspectiveDuration;var newPerspectiveEnd=time+(1-normalizedTimeOffset)*newPerspectiveDuration;var perspectiveMisalignmentCorrection=function(){if(start>newPerspectiveStart){return start-newPerspectiveStart;}if(newPerspectiveEnd>end){return end-newPerspectiveEnd;}return 0;}();checkedSetPerspective(newPerspectiveStart+perspectiveMisalignmentCorrection,newPerspectiveEnd+perspectiveMisalignmentCorrection);};return {perspective:perspective,setPerspective:checkedSetPerspective,zoom:zoom};}
+
+export { useTimelinePerspective as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vidispine/vdt-react-timeline",
-  "version": "23.1.0-pre.1",
+  "version": "23.1.0-pre.3",
   "license": "SEE LICENSE IN LICENSE.md",
   "publishConfig": {
     "access": "public"
@@ -13,7 +13,8 @@
     "directory": "packages/vdt-react-timeline"
   },
   "main": "dist/index.js",
-  "module": "dist/index.es.js",
+  "module": "dist/index.js",
+  "sideEffects": false,
   "files": [
     "dist"
   ],
@@ -24,13 +25,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.1",
-    "@vidispine/vdt-js": "23.1.0-pre.1",
+    "@vidispine/vdt-js": "23.1.0-pre.3",
     "clsx": "^1.2.1",
     "konva": "^8.3.14",
     "lodash.clamp": "^4.0.3",
     "lodash.sortby": "^4.7.0",
     "lodash.uniq": "^4.5.0",
-    "prop-types": "^15.8.1",
     "react-konva": "^17.0.2-6"
   },
   "peerDependencies": {
@@ -44,14 +44,16 @@
     "@babel/preset-env": "7.20.2",
     "@babel/preset-react": "7.18.6",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.2",
+    "@rollup/plugin-commonjs": "21.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
-    "@vidispine/eslint-config-mdx": "23.1.0-pre.1",
-    "@vidispine/eslint-config-react": "23.1.0-pre.1",
-    "@vidispine/eslint-config-storybook": "23.1.0-pre.1",
-    "@vidispine/prettier-config": "23.1.0-pre.1",
+    "@vidispine/eslint-config-mdx": "23.1.0-pre.3",
+    "@vidispine/eslint-config-react": "23.1.0-pre.3",
+    "@vidispine/eslint-config-storybook": "23.1.0-pre.3",
+    "@vidispine/prettier-config": "23.1.0-pre.3",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
     "eslint": "8.28.0",
     "prettier": "2.8.0",
+    "prop-types": "15.8.1",
     "rimraf": "3.0.2",
     "rollup": "2.79.1",
     "rollup-plugin-styles": "4.0.0"