react-filerobot-video-editor/lib/components/tools/Trim/Segment.js

React component version of filerobot video editor (FVE).

import _slicedToArray from"@babel/runtime/helpers/slicedToArray";import React,{useCallback,useEffect,useRef,useState}from"react";import Draggable from"react-draggable";import{useStore}from"../../../hooks";import{StyledHandle,StyledRightHandle,StyledSegment,StyledSegmentHandle,StyledSegmentWrapper}from"./Trim.styled";import{pixelToTime,timeToPixel}from"./Trim.utils";import{MIN_SEGMENT_WIDTH}from"./Trim.constants";var Segment=function(a){var b=a.sliderRef,c=a.duration,d=a.segment,e=a.segmentIndex,f=void 0===e?0:e,g=a.currentSegmentIndex,h=a.updateVideoProgress,i=a.trimContainerWidth,j=a.getSegmentBounds,k=a.updateSegmentBounds,l=useStore(),m=l.originalSource,n=useState(0),o=_slicedToArray(n,2),p=o[0],q=o[1],r=useState(0),s=_slicedToArray(r,2),t=s[0],u=s[1],v=useState(null),w=_slicedToArray(v,2),x=w[0],y=w[1],z=useRef(null),A=useRef(null),B=useRef(null),C=useRef(!1),D=t-p,E=useCallback(function(a){return pixelToTime(a,i,c)},[i,c]),F=useCallback(function(a){return timeToPixel(a,i,c)},[i,c]),G=function(){C.current=!0,m.pause()},H=function(){var a=E(p),b=E(t);k(a,b,f),setTimeout(function(){C.current=!1},0)};useEffect(function(){i&&!C.current&&(q(F((null===d||void 0===d?void 0:d.start)||0)),u(F((null===d||void 0===d?void 0:d.end)||c)))},[c,d,i]),useEffect(function(){return function(){C.current&&clearTimeout(C.current)}},[]);var I=g===f;return React.createElement(StyledSegmentWrapper,{className:"FIE_trim-segment-wrapper"},React.createElement(StyledSegment,{className:"FIE_trim-segment","data-testid":"FIE-trim-segment",isHighlighted:I,id:I?"highlighted-segment":"",left:p,width:D},React.createElement(Draggable,{"data-testid":"FIE-trim-segment-left-handle",axis:"x",bounds:"parent",position:{x:-10,y:0},nodeRef:z,onStart:G,onDrag:function(a){var c,d=null===(c=b.current)||void 0===c?void 0:c.getBoundingClientRect(),e=j(f),g=e.minStart,h=Math.min(t-MIN_SEGMENT_WIDTH,Math.max(g,a.clientX-d.left));q(h)},onStop:H},React.createElement(StyledHandle,{className:"FIE_segment-left-handle",ref:z})),React.createElement(Draggable,{"data-testid":"FIE-trim-segment-handle",axis:"x",bounds:"parent",nodeRef:A,onStart:function(a){C.current=!0,m.pause(),y({mouseX:a.clientX,startPos:p})},onDrag:function(a){if(x){var b=a.clientX-x.mouseX,c=j(f),d=c.minStart,e=c.maxEnd,g=Math.max(d,Math.min(e-D,x.startPos+b));q(g),u(g+D)}},onStop:function(a){var c,d=null===(c=b.current)||void 0===c?void 0:c.getBoundingClientRect(),e=E(p),g=E(t),i=a.clientX-d.left;y(null),h(E(i)),k(e,g,f),setTimeout(function(){C.current=!1},0)}},React.createElement(StyledSegmentHandle,{className:"FIE_segment-handle",ref:A,style:{width:"".concat(D-42,"px")}})),React.createElement(Draggable,{"data-testid":"FIE-trim-segment-right-handle",axis:"x",bounds:"parent",position:{x:D-22,y:0},nodeRef:B,onStart:G,onDrag:function(a){var c,d=null===(c=b.current)||void 0===c?void 0:c.getBoundingClientRect(),e=j(f),g=e.maxEnd,h=Math.max(p+MIN_SEGMENT_WIDTH,Math.min(g,a.clientX-d.left));u(h)},onStop:H},React.createElement(StyledRightHandle,{className:"FIE_segment-right-handle",ref:B}))))};export default Segment;