diff options
| -rw-r--r-- | src/client/views/nodes/RecordingBox/ProgressBar.tsx | 72 | ||||
| -rw-r--r-- | src/client/views/nodes/RecordingBox/RecordingView.tsx | 9 |
2 files changed, 52 insertions, 29 deletions
diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.tsx b/src/client/views/nodes/RecordingBox/ProgressBar.tsx index effc3d8a8..7ceae6696 100644 --- a/src/client/views/nodes/RecordingBox/ProgressBar.tsx +++ b/src/client/views/nodes/RecordingBox/ProgressBar.tsx @@ -33,51 +33,71 @@ export function ProgressBar(props: ProgressBarProps) { const [dragged, setDragged] = useState<number>(-1); + const [totalTime, setTotalTime] = useState<number>(0); + + // this holds the index of the videoc segment to be removed + const [removed, setRemoved] = useState<number>(-1); + // const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos]) - const totalTime = () => props.videos.lastElement().endTime + // const totalTime = () => props.videos.lastElement().endTime // const memoTotal = useMemo(totalTime, [props.videos]) useEffect(() => { const segmentsJSX = ordered.map((seg, i) => - <div id={`segment-${i.toString()}`} className={ dragged === i ? 'segment-hide' : 'segment'} style={{ width: `${((seg.endTime - seg.startTime) / totalTime()) * 100}%` }}>{seg.order}</div>); + <div id={`segment-${i.toString()}`} className={ dragged === i ? 'segment-hide' : 'segment'} style={{ width: `${((seg.endTime - seg.startTime) / totalTime) * 100}%` }}>{seg.order}</div>); setSegments(segmentsJSX) }, [dragged, ordered]) useEffect(() => { + // this useEffect fired when the videos are being rearragned to the order + // in this case, do nothing. + if (props.orderVideos) return; + const order = props.videos.length - if (order && !props.orderVideos) { + // in this case, a new video is added + if (order && order > ordered.length) { const { endTime, startTime } = props.videos.lastElement(); + // update total time + setTotalTime(prevTime => prevTime + (endTime - startTime)); + // add the new segment to the ordered array setOrdered(prevOrdered => { return [...prevOrdered, { endTime, startTime , order }]; }); } + + // in this case, a segment is removed + else if (order < ordered.length) { + // update the total time + setTotalTime(prevTime => prevTime - (ordered[removed].endTime - ordered[removed].startTime)); + //remove the segment from the ordered array and decrement the order of the remaining segments + // if they are greater than the removed segment's order + const removedOrder = ordered[removed].order; + setOrdered(prevOrdered => + prevOrdered.reduce((acc, seg, i) => { + (i !== removed) && acc.push({ ...seg, order: seg.order > removedOrder ? seg.order - 1 : seg.order }); + return acc; + },[] as SegmentBox[]) + ); + // reset to default/nullish state + setRemoved(-1); + } }, [props.videos]); useEffect(() => { props.setVideos(vids => ordered.map((seg) => vids[seg.order - 1])); }, [props.orderVideos]); + useEffect(() => { + if (removed === -1) return; + console.log('removed', removed) - // const handleClick = (e: React.MouseEvent) => { - // let progressbar = document.getElementById('progressbar')! - // let bounds = progressbar!.getBoundingClientRect(); - // let x = e.clientX - bounds.left; - // let percent = x / progressbar.clientWidth * 100 - - // for (let i = 0; i < props.marks.length; i++) { - // let start = i == 0 ? 0 : props.marks[i-1]; - // if (percent > start && percent < props.marks[i]) { - // props.playSegment(i) - // // console.log(i) - // // console.log(percent) - // // console.log(props.marks[i]) - // break - // } - // } - // } + // update the videos array -> this will fire the useEffect above, where we update the orders & totalTime + const index = ordered[removed].order - 1; + props.setVideos(vids => vids.filter((vid, i) => i !== index)); + }, [removed]); const updateLastHover = (segId: number): CurrentHover | null => { // get the segId of the segment that will become the new bounding area @@ -102,16 +122,12 @@ export function ProgressBar(props: ProgressBarProps) { const progressBar = progressBarRef.current if (progressBar == null || clickedSegment.id === progressBar.id) return - console.log('pointer down') // if holding shift key, let's remove that segment + // TODO: think of a way to accomodate touch -> maybe if poiuntermove isn't fired after x secs? if (e.shiftKey) { - // TODO: fix this - const segId = parseInt(clickedSegment.id.split('-')[1]) - const o = ordered[segId].order - setOrdered(prevOrdered => { - return prevOrdered.filter((seg, i) => i !== segId) - }) - + const segId = parseInt(clickedSegment.id.split('-')[1]); + console.log('removing segment', segId) + setRemoved(segId); return } diff --git a/src/client/views/nodes/RecordingBox/RecordingView.tsx b/src/client/views/nodes/RecordingBox/RecordingView.tsx index 8c8728fc3..68d85855c 100644 --- a/src/client/views/nodes/RecordingBox/RecordingView.tsx +++ b/src/client/views/nodes/RecordingBox/RecordingView.tsx @@ -55,6 +55,7 @@ export function RecordingView(props: IRecordingViewProps) { } } + useEffect(() => { // console.log('in videos useEffect', finished) @@ -90,6 +91,12 @@ export function RecordingView(props: IRecordingViewProps) { }, [videos]) + + // make useEffect for progess and log when it fires + useEffect(() => { + console.log('progress', progress) + }, [progress]) + useEffect(() => { if (finished) { @@ -198,7 +205,7 @@ export function RecordingView(props: IRecordingViewProps) { const stop = (e: React.MouseEvent) => { e.stopPropagation() if (videoRecorder.current) { - setFinished(true); + setFinished(true); if (videoRecorder.current.state !== "inactive") { videoRecorder.current.stop(); // recorder.current.stream.getTracks().forEach((track: any) => track.stop()) |