@vidispine/vdt-react-timeline 23.2.0 → 23.3.0-pre.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +455 -457
- package/dist/index.umd.cjs +3 -3
- package/package.json +7 -7
package/dist/index.umd.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(L,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react/jsx-runtime"),require("react"),require("lodash.clamp"),require("clsx"),require("react-is"),require("react-konva"),require("lodash.sortby"),require("lodash.uniq")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","lodash.clamp","clsx","react-is","react-konva","lodash.sortby","lodash.uniq"],g):(L=typeof globalThis<"u"?globalThis:L||self,g(L["@vidispine/vdt-react-timeline"]={},L.jsxRuntime,L.react,L._clamp,L.clsx,L.reactIs,L.reactKonva,L._sortBy,L._uniq))})(this,function(L,g,k,ne,Q,xe,V,Be,Ge){"use strict";const z=(t,i,s,n,l)=>t+(l-s)*(i-t)/(n-s),Ce=(t,i,s)=>{process.env.NODE_ENV==="development"&&console[s](`${t?`${t}: `:""}${i}`)},K={error:(...t)=>Ce(...t,"error"),warn:(...t)=>Ce(...t,"warn")};function Xe(t,i){const s=[];for(let n=0;n<t.length-1;n+=1)s.push(i(t[n],t[n+1]));return s}function ie(...t){const i=getComputedStyle(document.body);return t.map(s=>i.getPropertyValue(s))}function $e({uncontrolledDefaultState:t=void 0,uncontrolledOnChange:i=void 0,controlledState:s=void 0,controlledOnChange:n=void 0,componentName:l,stateName:o}){const[f,d]=k.useState(t),m=k.useRef(null),h=a=>{m.current!==null&&m.current!==a&&(a?K.warn(l,`${o} changed from uncontrolled to controlled`):K.warn(l,`${o} changed from controlled to uncontrolled`)),m.current=a};return s!==void 0?(h(!0),[s,n]):(h(!1),[f,n?(...a)=>{i?i(d,...a):d(...a),n(...a)}:i||d])}function Ye(t,i,s){const n=s.end-s.start<100&&t==="in"?1:2;return t==="in"?1/n:n}function Ue({start:t,end:i,defaultPerspective:s,perspective:n,onChangePerspective:l,zoomMultiplier:o=Ye}){const[f,d]=$e({uncontrolledDefaultState:s||{start:t,end:i},controlledState:n,controlledOnChange:l,componentName:"VdtTimeline",stateName:"perspective"}),m=typeof o=="function"?o:c=>c==="in"?1/o:o,h=(c,p)=>{d({start:ne(Number(c),t,i),end:ne(Number(p),t,i)})};return{perspective:f,setPerspective:h,zoom:(c,p)=>{const P=f.end-f.start,E=(p-f.start)/P,T=m(c,p,f);if(T===1)return;const j=(f.end-f.start)*T,_=p-E*j,N=p+(1-E)*j,H=(()=>t>_?t-_:N>i?i-N:0)();h(_+H,N+H)}}}const le=k.createContext();function Re({start:t,end:i,time:s,onChangeTime:n,timelineRef:l,children:o,perspective:f,onChangePerspective:d,defaultPerspective:m}){const h=Ue({start:t,end:i,perspective:f,onChangePerspective:d,defaultPerspective:m}),a=k.useMemo(()=>({...h,start:t,end:i,time:s,onChangeTime:n,timelineRef:l}),[i,n,t,s,h,l]);return g.jsx(le.Provider,{value:a,children:o})}function re(){return k.useContext(le)}function Fe(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var ue={exports:{}};/*
|
|
2
2
|
object-assign
|
|
3
3
|
(c) Sindre Sorhus
|
|
4
4
|
@license MIT
|
|
5
|
-
*/var
|
|
6
|
-
Valid keys: `+JSON.stringify(Object.keys(t),null," "));var X=U(w,R,O,D,S+"."+R,s);if(X)return X}return null}return k(u)}function G(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(G);if(t===null||d(t))return!0;var u=c(t);if(u){var C=u.call(t),b;if(u!==t.entries){for(;!(b=C.next()).done;)if(!G(b.value))return!1}else for(;!(b=C.next()).done;){var O=b.value;if(O&&!G(O[1]))return!1}}else return!1;return!0;default:return!1}}function Y(t,u){return t==="symbol"?!0:u?u["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&u instanceof Symbol:!1}function Z(t){var u=typeof t;return Array.isArray(t)?"array":t instanceof RegExp?"object":Y(u,t)?"symbol":u}function ee(t){if(typeof t>"u"||t===null)return""+t;var u=Z(t);if(u==="object"){if(t instanceof Date)return"date";if(t instanceof RegExp)return"regexp"}return u}function we(t){var u=ee(t);switch(u){case"array":case"object":return"an "+u;case"boolean":case"date":case"regexp":return"a "+u;default:return u}}function ke(t){return!t.constructor||!t.constructor.name?p:t.constructor.name}return P.checkPropTypes=l,P.resetWarningCache=l.resetWarningCache,P.PropTypes=P,P},he}var ye,qe;function Qe(){if(qe)return ye;qe=1;var r=fe();function i(){}function s(){}return s.resetWarningCache=i,ye=function(){function n(f,d,m,h,a,c){if(c!==r){var p=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw p.name="Invariant Violation",p}}n.isRequired=n;function l(){return n}var o={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:l,element:n,elementType:n,instanceOf:l,node:n,objectOf:l,oneOf:l,oneOfType:l,shape:l,exact:l,checkPropTypes:s,resetWarningCache:i};return o.PropTypes=o,o},ye}if(process.env.NODE_ENV!=="production"){var Ke=je,et=!0;Re.exports=Je()(Ke.isElement,et)}else Re.exports=Qe()();const dt="";function me({start:r,end:i,time:s,onChangeTime:n,children:l,className:o,perspective:f,onChangePerspective:d,defaultPerspective:m,zoomMultiplier:h,...a}){const c=j.useRef();return g.jsx(Ce,{start:r,end:i,time:s,onChangeTime:n,timelineRef:c,perspective:f,onChangePerspective:d,defaultPerspective:m,zoomMultiplier:h,children:g.jsx("div",{ref:c,className:Q("VdtTimeline-root",o),...a,children:l})})}me.propTypes={start:e.number.isRequired,end:e.number.isRequired,time:e.number,children:e.oneOfType([e.arrayOf(e.node),e.node]),onChangeTime:e.func,perspective:e.shape({start:e.number,end:e.number}),onChangePerspective:e.func,defaultPerspective:e.shape({start:e.number,end:e.number}),zoomMultiplier:e.oneOfType([e.number,e.func]),className:e.string},me.defaultProps={time:void 0,children:void 0,onChangeTime:void 0,perspective:void 0,onChangePerspective:void 0,defaultPerspective:void 0,zoomMultiplier:void 0,className:void 0};const Me=15,Ve=100,ft="",[tt]=ie("--vdt-timeline-palette-secondary"),Ne=document.createElement("img");Ne.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function ge({className:r,perspective:i,time:s,lineWidth:n,headWidth:l,headHeight:o,style:f,onDrag:d,HeadProps:m,...h}){var q;const{perspective:a,time:c,onChangeTime:p}=re()||{perspective:i,time:s};a===void 0&&K.error("VdtTimelinePlayhead","missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");const P=j.useRef(),E=(q=P.current)==null?void 0:q.parentElement,T=(E==null?void 0:E.clientWidth)||0,[k,L]=j.useState(!1),[N,H]=j.useState(c),W=z(0,T,a.start,a.end,N),x=I=>I<=a.end&&I>=a.start,$=!x(N);j.useEffect(()=>{c!==void 0&&!k&&H(c)},[c,k]);const B=d||p&&((I,...M)=>p(...M));return g.jsx("div",{ref:P,className:Q("VdtTimelinePlayhead-root",r),style:{width:n,left:W,display:$&&"none",zIndex:Ve,...f},draggable:!0,onDragStart:I=>(L(!0),I.dataTransfer.setDragImage(Ne,0,0),!1),onDragEnd:()=>{L(!1),B!=null&&B.flush&&B.flush()},onDrag:I=>{if(B){const{x:M}=P.current.parentElement.getBoundingClientRect(),F=z(a.start,a.end,0,T,I.clientX-M);if(x(F)){const J=ne(F,a.start,a.end);B(I,J),H(J)}}},...h,children:g.jsx("div",{className:"VdtTimelinePlayhead-head",style:{position:"absolute",height:o,width:l,backgroundColor:tt,left:-(l/2-n/2),top:-o+1,clipPath:"polygon(0% 0%, 0% 70%, 50% 100%, 100% 70%, 100% 0%)"},...m})})}ge.propTypes={style:e.instanceOf(Object),headHeight:e.number,headWidth:e.number,lineWidth:e.number,perspective:e.shape({start:e.number,end:e.number}),time:e.number,onDrag:e.func,HeadProps:e.instanceOf(Object),className:e.string},ge.defaultProps={style:{},headHeight:16,headWidth:12,lineWidth:2,perspective:void 0,time:0,onDrag:void 0,HeadProps:{},className:void 0};function oe(r){const[i,s]=j.useState({}),n=j.useRef(new ResizeObserver(l=>{var f;const o=(f=l[0])==null?void 0:f.contentRect;o&&s(o)}));return j.useEffect(()=>{const l=n==null?void 0:n.current,o=r==null?void 0:r.current;return o&&l.observe(o),()=>{o&&l.unobserve(o)}},[r]),i}const pt="",vt="",[rt]=ie("--vdt-timeline-palette-primary"),nt=j.memo(({amplitudeSegments:r,pxPerTimeUnit:i,start:s,height:n,...l})=>r.map(({amplitude:o,start:f,end:d},m)=>{const h=i*(d-f),a=(f-s)*i,c=n*o,p=(n-c)/2;return g.jsx(V.Rect,{x:a,y:p,height:c,width:h,fill:rt,...l},m)}));function Te({className:r,waveform:i,start:s,end:n,perspective:l,StageProps:o,LayerProps:f,RectProps:d,WaveRectProps:m,...h}){const{start:a,end:c,perspective:p}=re()||{start:s,end:n,perspective:l};(a===void 0||c===void 0||p===void 0)&&K.error("VdtTimelineWaveform","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' or 'perspective' must be passed explicitly");const P=j.useRef(),{width:E=0,height:T=0}=oe(P),k=j.useMemo(()=>i.map((W,x)=>({amplitude:W,start:z(a,c,0,i.length-1,x),end:z(a,c,0,i.length-1,x+1)})),[i,a,c]),L=E/(c-a),N=(c-a)/(p.end-p.start),H=z(0,N*E,a,c,p.start);return g.jsx("div",{ref:P,className:Q("VdtTimelineWaveform-root",r),...h,children:g.jsx(V.Stage,{height:T,width:E,x:-H,scaleX:N,...o,children:g.jsxs(V.Layer,{listening:!1,...f,children:[g.jsx(V.Rect,{x:0,y:0,width:E,height:T,...d}),g.jsx(nt,{amplitudeSegments:k,pxPerTimeUnit:L,start:a,height:T,...m})]})})})}Te.propTypes={waveform:e.arrayOf(e.number),start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),WaveRectProps:e.instanceOf(Object),className:e.string},Te.defaultProps={waveform:[],start:void 0,end:void 0,perspective:void 0,StageProps:{},LayerProps:{},RectProps:{},WaveRectProps:{},className:void 0};function se({hoverEffect:r=()=>{}}={}){const[i,s]=j.useState(!1),n=j.useRef(null);return{isHovering:i,onMouseEnter:l=>{s(!0),n.current=r(l)},onMouseLeave:()=>{s(!1),n.current&&n.current(),n.current=null}}}const[it,ot]=ie("--vdt-timeline-palette-primary","--vdt-timeline-palette-primary-dark"),be=5;function Pe({onClick:r,x:i,width:s,y:n,height:l,padding:o,start:f,end:d,onHover:m,onMove:h,onMoveStart:a,onMoveEnd:c,onResize:p,onResizeStart:P,onResizeEnd:E,...T}){[i,s,n,l].some(A=>A===void 0)&&K.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");const k=j.useRef(),{isHovering:L,...N}=se({hoverEffect:A=>(m&&m(A,!0),()=>{m&&m(A,!1)})}),{isHovering:H,...W}=se({hoverEffect:A=>(p&&(A.target.getStage().container().style.cursor="col-resize"),()=>{p&&(A.target.getStage().container().style.cursor="default")})}),[x,$]=j.useState(!1),B=!!r;j.useEffect(()=>{if(k.current){const A=(()=>x?"grabbing":L&&B?"pointer":"default")();k.current.getStage().container().style.cursor=A}},[x,L,B]);const q=n+o,I=l-2*o,M={y:q,height:I,x:i,width:s},F=L||H?{fill:ot}:{},J=A=>{const G=A==="start"?i:i+s-be;return{onDragStart:()=>{P&&P(A)},draggable:!!p,dragBoundFunc:Y=>({x:Y.x,y:q}),onDragEnd:()=>{E&&E(A)},width:be,x:G,onDragMove:Y=>{if(!p)return;const{x:Z}=Y.target.position();Y.target.x(G);const ee=Math.floor(z(f,d,i,i+s,Z+(A==="start"?0:be)));p(Y,A,ee)}}};return g.jsxs(g.Fragment,{children:[g.jsx(V.Rect,{ref:k,draggable:!!h,dragBoundFunc:A=>({x:A.x,y:q}),onDragStart:A=>{h&&($(!0),a&&a(A))},onDragEnd:A=>{h&&($(!1),c&&c(A))},onDragMove:A=>{if(!h)return;const{x:G}=A.target.position();A.target.x(i);const Y=Math.floor(z(f,d,i,i+s,G));h(A,Y)},fill:it,onClick:r,...M,...F,...N,...T}),g.jsx(V.Rect,{...M,...W,...J("start")}),g.jsx(V.Rect,{...M,...W,...J("end")})]})}Pe.propTypes={onClick:e.func,onHover:e.func,onMove:e.func,onMoveStart:e.func,onMoveEnd:e.func,onResize:e.func,onResizeStart:e.func,onResizeEnd:e.func,x:e.number,width:e.number,y:e.number,height:e.number,padding:e.number,start:e.number.isRequired,end:e.number.isRequired,className:e.string},Pe.defaultProps={onClick:void 0,onHover:void 0,onMove:void 0,onMoveStart:void 0,onMoveEnd:void 0,onResize:void 0,onResizeStart:void 0,onResizeEnd:void 0,x:void 0,width:void 0,y:0,height:Me,padding:1,className:void 0};function Oe({className:r,children:i,perspective:s,onClick:n,style:l,onHover:o,StageProps:f,LayerProps:d,GroupProps:m,RectProps:h,...a}){const{perspective:c}=re()||{perspective:s};c===void 0&&K.error("VdtTimelineTrack","missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");const p=j.Children.toArray(i).filter(({props:W={}})=>!(W.start>c.end||W.end<c.start)),P=j.useRef(),{width:E=0,height:T=0}=oe(P),k=Math.max(...j.Children.map(i,({props:{y:W=0,height:x=0}={}})=>W+x))||Me,L=W=>{const{start:x,end:$}=W.props||{},B=(()=>{if(x!==void 0&&$!==void 0){const q=z(0,E,c.start,c.end,x),I=z(0,E,c.start,c.end,$)-q;return{x:q,width:I}}return{}})();return j.cloneElement(W,{...W.props,...B})},{isHovering:N,...H}=se({hoverEffect:W=>{o&&o(W,!0);const x=W.target.getStage().container();return n&&(x.style.cursor="pointer"),()=>{o&&o(W,!1),n&&(x.style.cursor="default")}}});return g.jsx("div",{ref:P,className:Q("VdtTimelineTrack-root",r),style:{height:k,...l},...a,children:g.jsx(V.Stage,{height:T,width:E,...f,children:g.jsx(V.Layer,{...d,children:g.jsxs(V.Group,{...m,children:[g.jsx(V.Rect,{x:0,y:0,width:E,height:T,onClick:n,...H,...h}),j.Children.map(p,L)]})})})})}Oe.propTypes={children(r,i,s){const n=r[i];let l;return j.Children.forEach(n,o=>{const{props:{start:f,end:d}={}}=o;(f===void 0||d===void 0)&&(l=new Error(`children of ${s} must be passed a 'start' and 'end' prop. These props are used to position the child within the track.`))}),l},perspective:e.shape({start:e.number,end:e.number}),onClick:e.func,onHover:e.func,StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),GroupProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},Oe.defaultProps={style:{},children:void 0,perspective:void 0,onClick:void 0,onHover:void 0,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},className:void 0};const ht="";function ae({className:r,children:i,label:s,LabelProps:n,LabelTextProps:l,...o}){return g.jsxs("div",{className:Q("VdtTimelineRow-root",r,{"VdtTimelineRow-hasLabel":!!s}),...o,children:[s&&g.jsx("div",{className:"VdtTimelineRow-label",...n,children:g.jsx("span",{className:"VdtTimelineRow-labelText",...l,children:s})}),i]})}ae.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),label:e.node,LabelProps:e.instanceOf(Object),LabelTextProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},ae.defaultProps={children:void 0,label:void 0,LabelProps:{},LabelTextProps:{},className:void 0,style:{}};const yt="",He=2,[st,at]=ie("--vdt-timeline-palette-text-primary","--vdt-timeline-palette-text-secondary");function ct({x:r,y:i,minX:s,maxX:n,label:l,TickGroupProps:o,TickTextProps:f,TickLineProps:d}){const m=l!==void 0,{color:h,tickWidth:a,tickSize:c}=m?{color:st,tickWidth:2,tickSize:8}:{color:at,tickWidth:1,tickSize:4},[p,P]=j.useState(),E=j.useRef();j.useEffect(()=>{E.current&&P(E.current.getTextWidth())},[]);const T=ne(r-p/2,s+He,n-p-He)||void 0;return r<s||r>n?null:g.jsxs(V.Group,{...o,children:[g.jsx(V.Text,{ref:E,x:T,y:i-c-20,fontFamily:"Helvetica",text:l,fontStyle:"bold",fontSize:10,fill:h,...f}),g.jsx(V.Line,{points:[r,i-c,r,i],stroke:h,strokeWidth:a,...d})]})}function ze({width:r,perspective:i}){const s=Math.max(Math.floor(r/90),2),n=Ge([...Array(s).keys()].map(o=>z(i.start,i.end,0,s-1,o))).map(o=>({time:o,label:String(Math.round(o))})),l=Xe(n,(o,f)=>{const d=(f.time-o.time)/10;return[...Array(9).keys()].map(m=>({time:o.time+(m+1)*d}))}).flat();return Be([...n,...l],["time"])}function Se({className:r,children:i,ticks:s,onClick:n,onHover:l,onWheel:o,onDrag:f,start:d,end:m,perspective:h,timelineRef:a,StageProps:c,LayerProps:p,GroupProps:P,RectProps:E,TickGroupProps:T,TickTextProps:k,TickLineProps:L,...N}){var S,w;const{start:H,end:W,perspective:x,setPerspective:$,zoom:B,onChangeTime:q,timelineRef:I}=re()||{start:d,end:m,perspective:h,timelineRef:a};(H===void 0||W===void 0||x===void 0)&&K.error("VdtTimelinePlayheadTrack","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly"),I===void 0&&(i==null?void 0:i.length)>0&&K.warn("VdtTimelinePlayheadTrack","missing 'timelineRef' prop. This ref is used to set the height of the playhead within the timeline.");const M=o||B&&((v,...y)=>B(...y)),F=n||q&&((v,...y)=>q(...y)),J=f||$&&((v,...y)=>$(...y)),A=j.useRef(),{width:G=0,height:Y=0}=oe(A),Z=s||ze,we=(typeof Z=="function"?Z({start:H,end:W,width:G,perspective:x}):Z).map(({label:v,time:y})=>({x:z(0,G,x.start,x.end,y),label:v,time:y})),{height:ke}=oe(I),t=(((S=A==null?void 0:A.current)==null?void 0:S.offsetTop)||0)-(((w=I==null?void 0:I.current)==null?void 0:w.offsetTop)||0),u=Y,C=ke-Y-t||void 0,b=j.useRef(),{isHovering:O,...D}=se({hoverEffect:v=>{l&&l(v,!0);const y=v.target.getStage().container();return F&&(y.style.cursor="pointer"),()=>{l&&l(v,!1),F&&(y.style.cursor="default")}}});return g.jsxs("div",{ref:A,className:Q("VdtTimelinePlayheadTrack-root",r),...N,children:[j.Children.map(i,v=>j.cloneElement(v,{style:{top:u,height:C}})),g.jsx(V.Stage,{height:Y,width:G,...c,children:g.jsx(V.Layer,{...p,children:g.jsxs(V.Group,{onClick:v=>{if(b.current&&F){const{x:y}=b.current.getRelativePointerPosition();F(v,z(x.start,x.end,0,G,y))}},onWheel:v=>{if(b.current&&M){const{x:y}=b.current.getRelativePointerPosition();M(v,v.evt.deltaY<0?"in":"out",z(x.start,x.end,0,G,y))}},draggable:!0,dragBoundFunc:()=>({x:0,y:0}),onDragStart:v=>{const y=v.target.getStage().container();y.style.cursor="grabbing"},onDragEnd:v=>{const y=v.target.getStage().container();y.style.cursor="pointer"},onDragMove:v=>{if(J){const{movementX:y}=v.evt;if(y===0)return;const R=z(x.start,x.end,0,G,-y),U=x.end-x.start,X=ne(R,H,W-U),te=X+U;J(v,X,te)}},...D,...P,children:[g.jsx(V.Rect,{ref:b,x:0,y:0,width:G,height:Y,...E}),we.map(({x:v,label:y,time:R})=>g.jsx(ct,{minX:0,maxX:G,x:v,label:y,y:Y,TickGroupProps:T,TickLineProps:L,TickTextProps:k},R))]})})})]})}Se.propTypes={onClick:e.func,onHover:e.func,ticks:e.oneOfType([e.arrayOf(e.shape({time:e.number,label:e.string})),e.func]),onWheel:e.func,onDrag:e.func,children:e.oneOfType([e.arrayOf(e.node),e.node]),start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),timelineRef:e.shape({current:e.instanceOf(Element)}),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),GroupProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),TickGroupProps:e.instanceOf(Object),TickTextProps:e.instanceOf(Object),TickLineProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},Se.defaultProps={onClick:void 0,onHover:void 0,ticks:ze,children:void 0,start:void 0,end:void 0,perspective:void 0,onWheel:void 0,onDrag:void 0,timelineRef:void 0,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},TickGroupProps:{},TickTextProps:{},TickLineProps:{},className:void 0,style:{}};const mt="",[lt]=ie("--vdt-timeline-palette-secondary");function ce({className:r,onScroll:i,onClick:s,start:n,end:l,perspective:o,style:f,StageProps:d,LayerProps:m,RectProps:h,...a}){const{start:c,end:p,perspective:P,setPerspective:E}=re()||{start:n,end:l,perspective:o};(c===void 0||p===void 0||P===void 0)&&K.error("VdtTimelineScroll","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");const T=j.useRef(),{width:k=0,height:L=0}=oe(T),N=z(0,k,c,p,P.start),H=P.end-P.start,W=z(0,k,0,p-c,H),x=i||E&&((q,...I)=>E(...I)),$=s||E&&((q,...I)=>E(...I)),B=c!==P.start||p!==P.end;return g.jsx("div",{className:Q("VdtTimelineScroll-root",r),style:{display:!B&&"none",zIndex:Ve+1,...f},ref:T,...a,children:g.jsx(V.Stage,{height:L,width:k,onClick:q=>{if(!$)return;const{x:I}=q.currentTarget.getRelativePointerPosition();let M;I>N+W?M=Math.floor(z(c,p,0,k,I-W)):I<N&&(M=Math.floor(z(c,p,0,k,I))),M!==void 0&&M!==P.start&&$(q,M,M+H)},...d,children:g.jsx(V.Layer,{...m,children:g.jsx(V.Rect,{x:N,y:0,width:W,height:L,fill:lt,draggable:!0,dragBoundFunc:q=>({x:ne(q.x,0,k-W),y:0}),onDragMove:q=>{if(!x)return;const{x:I}=q.target.position();q.target.x(N);const M=Math.floor(z(c,p,0,k,I));x(q,M,M+H)},...h})})})})}ce.propTypes={onScroll:e.func,onClick:e.func,start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),style:e.instanceOf(Object),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),className:e.string},ce.defaultProps={onScroll:void 0,onClick:void 0,start:void 0,end:void 0,perspective:void 0,style:{},StageProps:{},LayerProps:{},RectProps:{},className:void 0};const gt="";function ut(r,{start:i,end:s}){return Math.floor(.02*(i-s))}function Ee({className:r,children:i,getScrollDistance:s,RowProps:n,ScrollProps:l,...o}){const{start:f,end:d,perspective:m,setPerspective:h}=re();return g.jsxs("div",{className:Q("VdtTimelineScrollContainer-root",r),onWheel:a=>{if(a.shiftKey){const c=s(a,{start:f,end:d,perspective:m}),p=m.start+(a.deltaY>0?-c:c),P=m.end-m.start,E=p+P;E>d?h(d-P,d):p<f?h(f,P):h(p,E)}},...o,children:[i,g.jsx(ae,{className:Q("VdtTimelineScrollContainer-timelineRow"),...n,children:g.jsx(ce,{...l})})]})}Ee.propTypes={className:e.string,children:e.oneOfType([e.arrayOf(e.node),e.node]),getScrollDistance:e.func,RowProps:e.instanceOf(Object),ScrollProps:e.instanceOf(Object)},Ee.defaultProps={children:void 0,getScrollDistance:ut,RowProps:{},ScrollProps:{},className:void 0},_.Timeline=me,_.TimelineContext=le,_.TimelineEvent=Pe,_.TimelinePlayhead=ge,_.TimelinePlayheadTrack=Se,_.TimelineProvider=Ce,_.TimelineRow=ae,_.TimelineScroll=ce,_.TimelineScrollContainer=Ee,_.TimelineTrack=Oe,_.TimelineWaveform=Te,_.useTimeline=re,Object.defineProperty(_,Symbol.toStringTag,{value:"Module"})});
|
|
5
|
+
*/var de,Ae;function Ze(){if(Ae)return de;Ae=1;var t=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable;function n(o){if(o==null)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(o)}function l(){try{if(!Object.assign)return!1;var o=new String("abc");if(o[5]="de",Object.getOwnPropertyNames(o)[0]==="5")return!1;for(var f={},d=0;d<10;d++)f["_"+String.fromCharCode(d)]=d;var m=Object.getOwnPropertyNames(f).map(function(a){return f[a]});if(m.join("")!=="0123456789")return!1;var h={};return"abcdefghijklmnopqrst".split("").forEach(function(a){h[a]=a}),Object.keys(Object.assign({},h)).join("")==="abcdefghijklmnopqrst"}catch{return!1}}return de=l()?Object.assign:function(o,f){for(var d,m=n(o),h,a=1;a<arguments.length;a++){d=Object(arguments[a]);for(var c in d)i.call(d,c)&&(m[c]=d[c]);if(t){h=t(d);for(var p=0;p<h.length;p++)s.call(d,h[p])&&(m[h[p]]=d[h[p]])}}return m},de}var fe,De;function pe(){if(De)return fe;De=1;var t="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";return fe=t,fe}var ve,Ie;function We(){return Ie||(Ie=1,ve=Function.call.bind(Object.prototype.hasOwnProperty)),ve}var he,_e;function Je(){if(_e)return he;_e=1;var t=function(){};if(process.env.NODE_ENV!=="production"){var i=pe(),s={},n=We();t=function(o){var f="Warning: "+o;typeof console<"u"&&console.error(f);try{throw new Error(f)}catch{}}}function l(o,f,d,m,h){if(process.env.NODE_ENV!=="production"){for(var a in o)if(n(o,a)){var c;try{if(typeof o[a]!="function"){var p=Error((m||"React class")+": "+d+" type `"+a+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof o[a]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw p.name="Invariant Violation",p}c=o[a](f,a,m,d,null,i)}catch(E){c=E}if(c&&!(c instanceof Error)&&t((m||"React class")+": type specification of "+d+" `"+a+"` is invalid; the type checker function must return `null` or an `Error` but returned a "+typeof c+". You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument)."),c instanceof Error&&!(c.message in s)){s[c.message]=!0;var P=h?h():"";t("Failed "+d+" type: "+c.message+(P??""))}}}}return l.resetWarningCache=function(){process.env.NODE_ENV!=="production"&&(s={})},he=l,he}var ye,Le;function Qe(){if(Le)return ye;Le=1;var t=xe,i=Ze(),s=pe(),n=We(),l=Je(),o=function(){};process.env.NODE_ENV!=="production"&&(o=function(d){var m="Warning: "+d;typeof console<"u"&&console.error(m);try{throw new Error(m)}catch{}});function f(){return null}return ye=function(d,m){var h=typeof Symbol=="function"&&Symbol.iterator,a="@@iterator";function c(r){var u=r&&(h&&r[h]||r[a]);if(typeof u=="function")return u}var p="<<anonymous>>",P={array:_("array"),bigint:_("bigint"),bool:_("boolean"),func:_("function"),number:_("number"),object:_("object"),string:_("string"),symbol:_("symbol"),any:N(),arrayOf:H,element:W(),elementType:x(),instanceOf:$,node:M(),objectOf:q,oneOf:B,oneOfType:I,shape:J,exact:A};function E(r,u){return r===u?r!==0||1/r===1/u:r!==r&&u!==u}function T(r,u){this.message=r,this.data=u&&typeof u=="object"?u:{},this.stack=""}T.prototype=Error.prototype;function j(r){if(process.env.NODE_ENV!=="production")var u={},C=0;function b(D,S,w,v,y,R,U){if(v=v||p,R=R||w,U!==s){if(m){var X=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw X.name="Invariant Violation",X}else if(process.env.NODE_ENV!=="production"&&typeof console<"u"){var te=v+":"+w;!u[te]&&C<3&&(o("You are manually calling a React.PropTypes validation function for the `"+R+"` prop on `"+v+"`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details."),u[te]=!0,C++)}}return S[w]==null?D?S[w]===null?new T("The "+y+" `"+R+"` is marked as required "+("in `"+v+"`, but its value is `null`.")):new T("The "+y+" `"+R+"` is marked as required in "+("`"+v+"`, but its value is `undefined`.")):null:r(S,w,v,y,R)}var O=b.bind(null,!1);return O.isRequired=b.bind(null,!0),O}function _(r){function u(C,b,O,D,S,w){var v=C[b],y=F(v);if(y!==r){var R=ee(v);return new T("Invalid "+D+" `"+S+"` of type "+("`"+R+"` supplied to `"+O+"`, expected ")+("`"+r+"`."),{expectedType:r})}return null}return j(u)}function N(){return j(f)}function H(r){function u(C,b,O,D,S){if(typeof r!="function")return new T("Property `"+S+"` of component `"+O+"` has invalid PropType notation inside arrayOf.");var w=C[b];if(!Array.isArray(w)){var v=F(w);return new T("Invalid "+D+" `"+S+"` of type "+("`"+v+"` supplied to `"+O+"`, expected an array."))}for(var y=0;y<w.length;y++){var R=r(w,y,O,D,S+"["+y+"]",s);if(R instanceof Error)return R}return null}return j(u)}function W(){function r(u,C,b,O,D){var S=u[C];if(!d(S)){var w=F(S);return new T("Invalid "+O+" `"+D+"` of type "+("`"+w+"` supplied to `"+b+"`, expected a single ReactElement."))}return null}return j(r)}function x(){function r(u,C,b,O,D){var S=u[C];if(!t.isValidElementType(S)){var w=F(S);return new T("Invalid "+O+" `"+D+"` of type "+("`"+w+"` supplied to `"+b+"`, expected a single ReactElement type."))}return null}return j(r)}function $(r){function u(C,b,O,D,S){if(!(C[b]instanceof r)){var w=r.name||p,v=ke(C[b]);return new T("Invalid "+D+" `"+S+"` of type "+("`"+v+"` supplied to `"+O+"`, expected ")+("instance of `"+w+"`."))}return null}return j(u)}function B(r){if(!Array.isArray(r))return process.env.NODE_ENV!=="production"&&(arguments.length>1?o("Invalid arguments supplied to oneOf, expected an array, got "+arguments.length+" arguments. A common mistake is to write oneOf(x, y, z) instead of oneOf([x, y, z])."):o("Invalid argument supplied to oneOf, expected an array.")),f;function u(C,b,O,D,S){for(var w=C[b],v=0;v<r.length;v++)if(E(w,r[v]))return null;var y=JSON.stringify(r,function(U,X){var te=ee(X);return te==="symbol"?String(X):X});return new T("Invalid "+D+" `"+S+"` of value `"+String(w)+"` "+("supplied to `"+O+"`, expected one of "+y+"."))}return j(u)}function q(r){function u(C,b,O,D,S){if(typeof r!="function")return new T("Property `"+S+"` of component `"+O+"` has invalid PropType notation inside objectOf.");var w=C[b],v=F(w);if(v!=="object")return new T("Invalid "+D+" `"+S+"` of type "+("`"+v+"` supplied to `"+O+"`, expected an object."));for(var y in w)if(n(w,y)){var R=r(w,y,O,D,S+"."+y,s);if(R instanceof Error)return R}return null}return j(u)}function I(r){if(!Array.isArray(r))return process.env.NODE_ENV!=="production"&&o("Invalid argument supplied to oneOfType, expected an instance of array."),f;for(var u=0;u<r.length;u++){var C=r[u];if(typeof C!="function")return o("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+je(C)+" at index "+u+"."),f}function b(O,D,S,w,v){for(var y=[],R=0;R<r.length;R++){var U=r[R],X=U(O,D,S,w,v,s);if(X==null)return null;X.data&&n(X.data,"expectedType")&&y.push(X.data.expectedType)}var te=y.length>0?", expected one of type ["+y.join(", ")+"]":"";return new T("Invalid "+w+" `"+v+"` supplied to "+("`"+S+"`"+te+"."))}return j(b)}function M(){function r(u,C,b,O,D){return G(u[C])?null:new T("Invalid "+O+" `"+D+"` supplied to "+("`"+b+"`, expected a ReactNode."))}return j(r)}function Z(r,u,C,b,O){return new T((r||"React class")+": "+u+" type `"+C+"."+b+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+O+"`.")}function J(r){function u(C,b,O,D,S){var w=C[b],v=F(w);if(v!=="object")return new T("Invalid "+D+" `"+S+"` of type `"+v+"` "+("supplied to `"+O+"`, expected `object`."));for(var y in r){var R=r[y];if(typeof R!="function")return Z(O,D,S,y,ee(R));var U=R(w,y,O,D,S+"."+y,s);if(U)return U}return null}return j(u)}function A(r){function u(C,b,O,D,S){var w=C[b],v=F(w);if(v!=="object")return new T("Invalid "+D+" `"+S+"` of type `"+v+"` "+("supplied to `"+O+"`, expected `object`."));var y=i({},C[b],r);for(var R in y){var U=r[R];if(n(r,R)&&typeof U!="function")return Z(O,D,S,R,ee(U));if(!U)return new T("Invalid "+D+" `"+S+"` key `"+R+"` supplied to `"+O+"`.\nBad object: "+JSON.stringify(C[b],null," ")+`
|
|
6
|
+
Valid keys: `+JSON.stringify(Object.keys(r),null," "));var X=U(w,R,O,D,S+"."+R,s);if(X)return X}return null}return j(u)}function G(r){switch(typeof r){case"number":case"string":case"undefined":return!0;case"boolean":return!r;case"object":if(Array.isArray(r))return r.every(G);if(r===null||d(r))return!0;var u=c(r);if(u){var C=u.call(r),b;if(u!==r.entries){for(;!(b=C.next()).done;)if(!G(b.value))return!1}else for(;!(b=C.next()).done;){var O=b.value;if(O&&!G(O[1]))return!1}}else return!1;return!0;default:return!1}}function Y(r,u){return r==="symbol"?!0:u?u["@@toStringTag"]==="Symbol"||typeof Symbol=="function"&&u instanceof Symbol:!1}function F(r){var u=typeof r;return Array.isArray(r)?"array":r instanceof RegExp?"object":Y(u,r)?"symbol":u}function ee(r){if(typeof r>"u"||r===null)return""+r;var u=F(r);if(u==="object"){if(r instanceof Date)return"date";if(r instanceof RegExp)return"regexp"}return u}function je(r){var u=ee(r);switch(u){case"array":case"object":return"an "+u;case"boolean":case"date":case"regexp":return"a "+u;default:return u}}function ke(r){return!r.constructor||!r.constructor.name?p:r.constructor.name}return P.checkPropTypes=l,P.resetWarningCache=l.resetWarningCache,P.PropTypes=P,P},ye}var me,qe;function Ke(){if(qe)return me;qe=1;var t=pe();function i(){}function s(){}return s.resetWarningCache=i,me=function(){function n(f,d,m,h,a,c){if(c!==t){var p=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw p.name="Invariant Violation",p}}n.isRequired=n;function l(){return n}var o={array:n,bigint:n,bool:n,func:n,number:n,object:n,string:n,symbol:n,any:n,arrayOf:l,element:n,elementType:n,instanceOf:l,node:n,objectOf:l,oneOf:l,oneOfType:l,shape:l,exact:l,checkPropTypes:s,resetWarningCache:i};return o.PropTypes=o,o},me}if(process.env.NODE_ENV!=="production"){var et=xe,tt=!0;ue.exports=Qe()(et.isElement,tt)}else ue.exports=Ke()();var rt=ue.exports;const e=Fe(rt),pt="";function ge({start:t,end:i,time:s,onChangeTime:n,children:l,className:o,perspective:f,onChangePerspective:d,defaultPerspective:m,zoomMultiplier:h,...a}){const c=k.useRef();return g.jsx(Re,{start:t,end:i,time:s,onChangeTime:n,timelineRef:c,perspective:f,onChangePerspective:d,defaultPerspective:m,zoomMultiplier:h,children:g.jsx("div",{ref:c,className:Q("VdtTimeline-root",o),...a,children:l})})}ge.propTypes={start:e.number.isRequired,end:e.number.isRequired,time:e.number,children:e.oneOfType([e.arrayOf(e.node),e.node]),onChangeTime:e.func,perspective:e.shape({start:e.number,end:e.number}),onChangePerspective:e.func,defaultPerspective:e.shape({start:e.number,end:e.number}),zoomMultiplier:e.oneOfType([e.number,e.func]),className:e.string},ge.defaultProps={time:void 0,children:void 0,onChangeTime:void 0,perspective:void 0,onChangePerspective:void 0,defaultPerspective:void 0,zoomMultiplier:void 0,className:void 0};const Me=15,Ve=100,vt="",[nt]=ie("--vdt-timeline-palette-secondary"),Ne=document.createElement("img");Ne.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";function Te({className:t,perspective:i,time:s,lineWidth:n,headWidth:l,headHeight:o,style:f,onDrag:d,HeadProps:m,...h}){var q;const{perspective:a,time:c,onChangeTime:p}=re()||{perspective:i,time:s};a===void 0&&K.error("VdtTimelinePlayhead","missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");const P=k.useRef(),E=(q=P.current)==null?void 0:q.parentElement,T=(E==null?void 0:E.clientWidth)||0,[j,_]=k.useState(!1),[N,H]=k.useState(c),W=z(0,T,a.start,a.end,N),x=I=>I<=a.end&&I>=a.start,$=!x(N);k.useEffect(()=>{c!==void 0&&!j&&H(c)},[c,j]);const B=d||p&&((I,...M)=>p(...M));return g.jsx("div",{ref:P,className:Q("VdtTimelinePlayhead-root",t),style:{width:n,left:W,display:$&&"none",zIndex:Ve,...f},draggable:!0,onDragStart:I=>(_(!0),I.dataTransfer.setDragImage(Ne,0,0),!1),onDragEnd:()=>{_(!1),B!=null&&B.flush&&B.flush()},onDrag:I=>{if(B){const{x:M}=P.current.parentElement.getBoundingClientRect(),Z=z(a.start,a.end,0,T,I.clientX-M);if(x(Z)){const J=ne(Z,a.start,a.end);B(I,J),H(J)}}},...h,children:g.jsx("div",{className:"VdtTimelinePlayhead-head",style:{position:"absolute",height:o,width:l,backgroundColor:nt,left:-(l/2-n/2),top:-o+1,clipPath:"polygon(0% 0%, 0% 70%, 50% 100%, 100% 70%, 100% 0%)"},...m})})}Te.propTypes={style:e.instanceOf(Object),headHeight:e.number,headWidth:e.number,lineWidth:e.number,perspective:e.shape({start:e.number,end:e.number}),time:e.number,onDrag:e.func,HeadProps:e.instanceOf(Object),className:e.string},Te.defaultProps={style:{},headHeight:16,headWidth:12,lineWidth:2,perspective:void 0,time:0,onDrag:void 0,HeadProps:{},className:void 0};function oe(t){const[i,s]=k.useState({}),n=k.useRef(new ResizeObserver(l=>{var f;const o=(f=l[0])==null?void 0:f.contentRect;o&&s(o)}));return k.useEffect(()=>{const l=n==null?void 0:n.current,o=t==null?void 0:t.current;return o&&l.observe(o),()=>{o&&l.unobserve(o)}},[t]),i}const ht="",yt="",[it]=ie("--vdt-timeline-palette-primary"),ot=k.memo(({amplitudeSegments:t,pxPerTimeUnit:i,start:s,height:n,...l})=>t.map(({amplitude:o,start:f,end:d},m)=>{const h=i*(d-f),a=(f-s)*i,c=n*o,p=(n-c)/2;return g.jsx(V.Rect,{x:a,y:p,height:c,width:h,fill:it,...l},m)}));function be({className:t,waveform:i,start:s,end:n,perspective:l,StageProps:o,LayerProps:f,RectProps:d,WaveRectProps:m,...h}){const{start:a,end:c,perspective:p}=re()||{start:s,end:n,perspective:l};(a===void 0||c===void 0||p===void 0)&&K.error("VdtTimelineWaveform","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' or 'perspective' must be passed explicitly");const P=k.useRef(),{width:E=0,height:T=0}=oe(P),j=k.useMemo(()=>i.map((W,x)=>({amplitude:W,start:z(a,c,0,i.length-1,x),end:z(a,c,0,i.length-1,x+1)})),[i,a,c]),_=E/(c-a),N=(c-a)/(p.end-p.start),H=z(0,N*E,a,c,p.start);return g.jsx("div",{ref:P,className:Q("VdtTimelineWaveform-root",t),...h,children:g.jsx(V.Stage,{height:T,width:E,x:-H,scaleX:N,...o,children:g.jsxs(V.Layer,{listening:!1,...f,children:[g.jsx(V.Rect,{x:0,y:0,width:E,height:T,...d}),g.jsx(ot,{amplitudeSegments:j,pxPerTimeUnit:_,start:a,height:T,...m})]})})})}be.propTypes={waveform:e.arrayOf(e.number),start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),WaveRectProps:e.instanceOf(Object),className:e.string},be.defaultProps={waveform:[],start:void 0,end:void 0,perspective:void 0,StageProps:{},LayerProps:{},RectProps:{},WaveRectProps:{},className:void 0};function se({hoverEffect:t=()=>{}}={}){const[i,s]=k.useState(!1),n=k.useRef(null);return{isHovering:i,onMouseEnter:l=>{s(!0),n.current=t(l)},onMouseLeave:()=>{s(!1),n.current&&n.current(),n.current=null}}}const[st,at]=ie("--vdt-timeline-palette-primary","--vdt-timeline-palette-primary-dark"),Pe=5;function Oe({onClick:t,x:i,width:s,y:n,height:l,padding:o,start:f,end:d,onHover:m,onMove:h,onMoveStart:a,onMoveEnd:c,onResize:p,onResizeStart:P,onResizeEnd:E,...T}){[i,s,n,l].some(A=>A===void 0)&&K.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");const j=k.useRef(),{isHovering:_,...N}=se({hoverEffect:A=>(m&&m(A,!0),()=>{m&&m(A,!1)})}),{isHovering:H,...W}=se({hoverEffect:A=>(p&&(A.target.getStage().container().style.cursor="col-resize"),()=>{p&&(A.target.getStage().container().style.cursor="default")})}),[x,$]=k.useState(!1),B=!!t;k.useEffect(()=>{if(j.current){const A=(()=>x?"grabbing":_&&B?"pointer":"default")();j.current.getStage().container().style.cursor=A}},[x,_,B]);const q=n+o,I=l-2*o,M={y:q,height:I,x:i,width:s},Z=_||H?{fill:at}:{},J=A=>{const G=A==="start"?i:i+s-Pe;return{onDragStart:()=>{P&&P(A)},draggable:!!p,dragBoundFunc:Y=>({x:Y.x,y:q}),onDragEnd:()=>{E&&E(A)},width:Pe,x:G,onDragMove:Y=>{if(!p)return;const{x:F}=Y.target.position();Y.target.x(G);const ee=Math.floor(z(f,d,i,i+s,F+(A==="start"?0:Pe)));p(Y,A,ee)}}};return g.jsxs(g.Fragment,{children:[g.jsx(V.Rect,{ref:j,draggable:!!h,dragBoundFunc:A=>({x:A.x,y:q}),onDragStart:A=>{h&&($(!0),a&&a(A))},onDragEnd:A=>{h&&($(!1),c&&c(A))},onDragMove:A=>{if(!h)return;const{x:G}=A.target.position();A.target.x(i);const Y=Math.floor(z(f,d,i,i+s,G));h(A,Y)},fill:st,onClick:t,...M,...Z,...N,...T}),g.jsx(V.Rect,{...M,...W,...J("start")}),g.jsx(V.Rect,{...M,...W,...J("end")})]})}Oe.propTypes={onClick:e.func,onHover:e.func,onMove:e.func,onMoveStart:e.func,onMoveEnd:e.func,onResize:e.func,onResizeStart:e.func,onResizeEnd:e.func,x:e.number,width:e.number,y:e.number,height:e.number,padding:e.number,start:e.number.isRequired,end:e.number.isRequired,className:e.string},Oe.defaultProps={onClick:void 0,onHover:void 0,onMove:void 0,onMoveStart:void 0,onMoveEnd:void 0,onResize:void 0,onResizeStart:void 0,onResizeEnd:void 0,x:void 0,width:void 0,y:0,height:Me,padding:1,className:void 0};function Se({className:t,children:i,perspective:s,onClick:n,style:l,onHover:o,StageProps:f,LayerProps:d,GroupProps:m,RectProps:h,...a}){const{perspective:c}=re()||{perspective:s};c===void 0&&K.error("VdtTimelineTrack","missing 'perspective' prop. If the component is used outside a VdtTimelineContext, 'perspective' must be passed explicitly");const p=k.Children.toArray(i).filter(({props:W={}})=>!(W.start>c.end||W.end<c.start)),P=k.useRef(),{width:E=0,height:T=0}=oe(P),j=Math.max(...k.Children.map(i,({props:{y:W=0,height:x=0}={}})=>W+x))||Me,_=W=>{const{start:x,end:$}=W.props||{},B=(()=>{if(x!==void 0&&$!==void 0){const q=z(0,E,c.start,c.end,x),I=z(0,E,c.start,c.end,$)-q;return{x:q,width:I}}return{}})();return k.cloneElement(W,{...W.props,...B})},{isHovering:N,...H}=se({hoverEffect:W=>{o&&o(W,!0);const x=W.target.getStage().container();return n&&(x.style.cursor="pointer"),()=>{o&&o(W,!1),n&&(x.style.cursor="default")}}});return g.jsx("div",{ref:P,className:Q("VdtTimelineTrack-root",t),style:{height:j,...l},...a,children:g.jsx(V.Stage,{height:T,width:E,...f,children:g.jsx(V.Layer,{...d,children:g.jsxs(V.Group,{...m,children:[g.jsx(V.Rect,{x:0,y:0,width:E,height:T,onClick:n,...H,...h}),k.Children.map(p,_)]})})})})}Se.propTypes={children(t,i,s){const n=t[i];let l;return k.Children.forEach(n,o=>{const{props:{start:f,end:d}={}}=o;(f===void 0||d===void 0)&&(l=new Error(`children of ${s} must be passed a 'start' and 'end' prop. These props are used to position the child within the track.`))}),l},perspective:e.shape({start:e.number,end:e.number}),onClick:e.func,onHover:e.func,StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),GroupProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},Se.defaultProps={style:{},children:void 0,perspective:void 0,onClick:void 0,onHover:void 0,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},className:void 0};const mt="";function ae({className:t,children:i,label:s,LabelProps:n,LabelTextProps:l,...o}){return g.jsxs("div",{className:Q("VdtTimelineRow-root",t,{"VdtTimelineRow-hasLabel":!!s}),...o,children:[s&&g.jsx("div",{className:"VdtTimelineRow-label",...n,children:g.jsx("span",{className:"VdtTimelineRow-labelText",...l,children:s})}),i]})}ae.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),label:e.node,LabelProps:e.instanceOf(Object),LabelTextProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},ae.defaultProps={children:void 0,label:void 0,LabelProps:{},LabelTextProps:{},className:void 0,style:{}};const gt="",He=2,[ct,lt]=ie("--vdt-timeline-palette-text-primary","--vdt-timeline-palette-text-secondary");function ut({x:t,y:i,minX:s,maxX:n,label:l,TickGroupProps:o,TickTextProps:f,TickLineProps:d}){const m=l!==void 0,{color:h,tickWidth:a,tickSize:c}=m?{color:ct,tickWidth:2,tickSize:8}:{color:lt,tickWidth:1,tickSize:4},[p,P]=k.useState(),E=k.useRef();k.useEffect(()=>{E.current&&P(E.current.getTextWidth())},[]);const T=ne(t-p/2,s+He,n-p-He)||void 0;return t<s||t>n?null:g.jsxs(V.Group,{...o,children:[g.jsx(V.Text,{ref:E,x:T,y:i-c-20,fontFamily:"Helvetica",text:l,fontStyle:"bold",fontSize:10,fill:h,...f}),g.jsx(V.Line,{points:[t,i-c,t,i],stroke:h,strokeWidth:a,...d})]})}function ze({width:t,perspective:i}){const s=Math.max(Math.floor(t/90),2),n=Ge([...Array(s).keys()].map(o=>z(i.start,i.end,0,s-1,o))).map(o=>({time:o,label:String(Math.round(o))})),l=Xe(n,(o,f)=>{const d=(f.time-o.time)/10;return[...Array(9).keys()].map(m=>({time:o.time+(m+1)*d}))}).flat();return Be([...n,...l],["time"])}function Ee({className:t,children:i,ticks:s,onClick:n,onHover:l,onWheel:o,onDrag:f,start:d,end:m,perspective:h,timelineRef:a,StageProps:c,LayerProps:p,GroupProps:P,RectProps:E,TickGroupProps:T,TickTextProps:j,TickLineProps:_,...N}){var S,w;const{start:H,end:W,perspective:x,setPerspective:$,zoom:B,onChangeTime:q,timelineRef:I}=re()||{start:d,end:m,perspective:h,timelineRef:a};(H===void 0||W===void 0||x===void 0)&&K.error("VdtTimelinePlayheadTrack","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly"),I===void 0&&(i==null?void 0:i.length)>0&&K.warn("VdtTimelinePlayheadTrack","missing 'timelineRef' prop. This ref is used to set the height of the playhead within the timeline.");const M=o||B&&((v,...y)=>B(...y)),Z=n||q&&((v,...y)=>q(...y)),J=f||$&&((v,...y)=>$(...y)),A=k.useRef(),{width:G=0,height:Y=0}=oe(A),F=s||ze,je=(typeof F=="function"?F({start:H,end:W,width:G,perspective:x}):F).map(({label:v,time:y})=>({x:z(0,G,x.start,x.end,y),label:v,time:y})),{height:ke}=oe(I),r=(((S=A==null?void 0:A.current)==null?void 0:S.offsetTop)||0)-(((w=I==null?void 0:I.current)==null?void 0:w.offsetTop)||0),u=Y,C=ke-Y-r||void 0,b=k.useRef(),{isHovering:O,...D}=se({hoverEffect:v=>{l&&l(v,!0);const y=v.target.getStage().container();return Z&&(y.style.cursor="pointer"),()=>{l&&l(v,!1),Z&&(y.style.cursor="default")}}});return g.jsxs("div",{ref:A,className:Q("VdtTimelinePlayheadTrack-root",t),...N,children:[k.Children.map(i,v=>k.cloneElement(v,{style:{top:u,height:C}})),g.jsx(V.Stage,{height:Y,width:G,...c,children:g.jsx(V.Layer,{...p,children:g.jsxs(V.Group,{onClick:v=>{if(b.current&&Z){const{x:y}=b.current.getRelativePointerPosition();Z(v,z(x.start,x.end,0,G,y))}},onWheel:v=>{if(b.current&&M){const{x:y}=b.current.getRelativePointerPosition();M(v,v.evt.deltaY<0?"in":"out",z(x.start,x.end,0,G,y))}},draggable:!0,dragBoundFunc:()=>({x:0,y:0}),onDragStart:v=>{const y=v.target.getStage().container();y.style.cursor="grabbing"},onDragEnd:v=>{const y=v.target.getStage().container();y.style.cursor="pointer"},onDragMove:v=>{if(J){const{movementX:y}=v.evt;if(y===0)return;const R=z(x.start,x.end,0,G,-y),U=x.end-x.start,X=ne(R,H,W-U),te=X+U;J(v,X,te)}},...D,...P,children:[g.jsx(V.Rect,{ref:b,x:0,y:0,width:G,height:Y,...E}),je.map(({x:v,label:y,time:R})=>g.jsx(ut,{minX:0,maxX:G,x:v,label:y,y:Y,TickGroupProps:T,TickLineProps:_,TickTextProps:j},R))]})})})]})}Ee.propTypes={onClick:e.func,onHover:e.func,ticks:e.oneOfType([e.arrayOf(e.shape({time:e.number,label:e.string})),e.func]),onWheel:e.func,onDrag:e.func,children:e.oneOfType([e.arrayOf(e.node),e.node]),start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),timelineRef:e.shape({current:e.instanceOf(Element)}),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),GroupProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),TickGroupProps:e.instanceOf(Object),TickTextProps:e.instanceOf(Object),TickLineProps:e.instanceOf(Object),className:e.string,style:e.instanceOf(Object)},Ee.defaultProps={onClick:void 0,onHover:void 0,ticks:ze,children:void 0,start:void 0,end:void 0,perspective:void 0,onWheel:void 0,onDrag:void 0,timelineRef:void 0,StageProps:{},LayerProps:{},GroupProps:{},RectProps:{},TickGroupProps:{},TickTextProps:{},TickLineProps:{},className:void 0,style:{}};const Tt="",[dt]=ie("--vdt-timeline-palette-secondary");function ce({className:t,onScroll:i,onClick:s,start:n,end:l,perspective:o,style:f,StageProps:d,LayerProps:m,RectProps:h,...a}){const{start:c,end:p,perspective:P,setPerspective:E}=re()||{start:n,end:l,perspective:o};(c===void 0||p===void 0||P===void 0)&&K.error("VdtTimelineScroll","missing 'start', 'end' or 'perspective' props. If the component is used outside a VdtTimelineContext, 'start', 'end' and 'perspective' must be passed explicitly");const T=k.useRef(),{width:j=0,height:_=0}=oe(T),N=z(0,j,c,p,P.start),H=P.end-P.start,W=z(0,j,0,p-c,H),x=i||E&&((q,...I)=>E(...I)),$=s||E&&((q,...I)=>E(...I)),B=c!==P.start||p!==P.end;return g.jsx("div",{className:Q("VdtTimelineScroll-root",t),style:{display:!B&&"none",zIndex:Ve+1,...f},ref:T,...a,children:g.jsx(V.Stage,{height:_,width:j,onClick:q=>{if(!$)return;const{x:I}=q.currentTarget.getRelativePointerPosition();let M;I>N+W?M=Math.floor(z(c,p,0,j,I-W)):I<N&&(M=Math.floor(z(c,p,0,j,I))),M!==void 0&&M!==P.start&&$(q,M,M+H)},...d,children:g.jsx(V.Layer,{...m,children:g.jsx(V.Rect,{x:N,y:0,width:W,height:_,fill:dt,draggable:!0,dragBoundFunc:q=>({x:ne(q.x,0,j-W),y:0}),onDragMove:q=>{if(!x)return;const{x:I}=q.target.position();q.target.x(N);const M=Math.floor(z(c,p,0,j,I));x(q,M,M+H)},...h})})})})}ce.propTypes={onScroll:e.func,onClick:e.func,start:e.number,end:e.number,perspective:e.shape({start:e.number,end:e.number}),style:e.instanceOf(Object),StageProps:e.instanceOf(Object),LayerProps:e.instanceOf(Object),RectProps:e.instanceOf(Object),className:e.string},ce.defaultProps={onScroll:void 0,onClick:void 0,start:void 0,end:void 0,perspective:void 0,style:{},StageProps:{},LayerProps:{},RectProps:{},className:void 0};const bt="";function ft(t,{start:i,end:s}){return Math.floor(.02*(i-s))}function we({className:t,children:i,getScrollDistance:s,RowProps:n,ScrollProps:l,...o}){const{start:f,end:d,perspective:m,setPerspective:h}=re();return g.jsxs("div",{className:Q("VdtTimelineScrollContainer-root",t),onWheel:a=>{if(a.shiftKey){const c=s(a,{start:f,end:d,perspective:m}),p=m.start+(a.deltaY>0?-c:c),P=m.end-m.start,E=p+P;E>d?h(d-P,d):p<f?h(f,P):h(p,E)}},...o,children:[i,g.jsx(ae,{className:Q("VdtTimelineScrollContainer-timelineRow"),...n,children:g.jsx(ce,{...l})})]})}we.propTypes={className:e.string,children:e.oneOfType([e.arrayOf(e.node),e.node]),getScrollDistance:e.func,RowProps:e.instanceOf(Object),ScrollProps:e.instanceOf(Object)},we.defaultProps={children:void 0,getScrollDistance:ft,RowProps:{},ScrollProps:{},className:void 0},L.Timeline=ge,L.TimelineContext=le,L.TimelineEvent=Oe,L.TimelinePlayhead=Te,L.TimelinePlayheadTrack=Ee,L.TimelineProvider=Re,L.TimelineRow=ae,L.TimelineScroll=ce,L.TimelineScrollContainer=we,L.TimelineTrack=Se,L.TimelineWaveform=be,L.useTimeline=re,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vidispine/vdt-react-timeline",
|
|
3
|
-
"version": "23.
|
|
3
|
+
"version": "23.3.0-pre.2",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"format": "prettier . --check"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@vidispine/vdt-js": "23.
|
|
34
|
+
"@vidispine/vdt-js": "23.3.0-pre.2",
|
|
35
35
|
"clsx": "^1.2.1",
|
|
36
36
|
"konva": "^8.4.2",
|
|
37
37
|
"lodash.clamp": "^4.0.3",
|
|
@@ -44,15 +44,15 @@
|
|
|
44
44
|
"react-dom": "^17.0.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@vidispine/eslint-config-mdx": "23.
|
|
48
|
-
"@vidispine/eslint-config-react": "23.
|
|
49
|
-
"@vidispine/eslint-config-storybook": "23.
|
|
50
|
-
"@vidispine/prettier-config": "23.
|
|
47
|
+
"@vidispine/eslint-config-mdx": "23.3.0-pre.2",
|
|
48
|
+
"@vidispine/eslint-config-react": "23.3.0-pre.2",
|
|
49
|
+
"@vidispine/eslint-config-storybook": "23.3.0-pre.2",
|
|
50
|
+
"@vidispine/prettier-config": "23.3.0-pre.2",
|
|
51
51
|
"@vitejs/plugin-react": "3.1.0",
|
|
52
52
|
"eslint": "8.34.0",
|
|
53
53
|
"prettier": "2.8.4",
|
|
54
54
|
"prop-types": "15.8.1",
|
|
55
|
-
"vite": "4.3.
|
|
55
|
+
"vite": "4.3.9"
|
|
56
56
|
},
|
|
57
57
|
"eslintConfig": {
|
|
58
58
|
"extends": [
|