1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
import { isInteger } from 'lodash';
import * as React from 'react';
import { useEffect, useState, useCallback, useRef } from "react"
import "./ProgressBar.scss"
import { MediaSegment } from './RecordingView';
interface ProgressBarProps {
videos: MediaSegment[],
}
export function ProgressBar(props: ProgressBarProps) {
const progressBarRef = useRef<HTMLDivElement | null>(null)
// array for the order of video segments
const [segments, setSegments] = useState([]);
// const totalTime = useMemo(() => props.videos.lastElement().endTime, [props.videos])
const totalTime = () => props.videos.lastElement().endTime
// 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
// }
// }
// }
const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) =>{
// e.persist()
// console.log('event', e)
// don't move the videobox element
e.stopPropagation()
const progressBar = progressBarRef.current
if (progressBar == null) return
console.log('progressbar', progressBar)
const updateSegmentOrder = (event: PointerEvent): void => {
// event.stopPropagation()
// const hoveredSegment = event.target as HTMLDivElement & EventTarget
// console.log('updateSegmentOrder called', hoveredSegment.id === clickedSegment.id)
// if (hoveredSegment.id === clickedSegment.id) return;
console.log('updateSegmentOrder : target', event.target.id)
}
// progressBar.addEventListener('pointermove', updateSegmentOrder)
const clickedSegment = e.target as HTMLDivElement & EventTarget
console.log('segment', clickedSegment.getBoundingClientRect())
const rect = clickedSegment.getBoundingClientRect()
const dragSegment = (event: PointerEvent): void => {
// event.stopPropagation()
clickedSegment.style.position = 'absolute';
clickedSegment.style.zIndex = '999';
clickedSegment.style.width = `${rect.width}px`;
clickedSegment.style.height = `${rect.height}px`;
clickedSegment.style.left = `${event.offsetX - rect.width/2}px`;
clickedSegment.style.top = `${event.offsetY - rect.height/2}px`;
}
progressBar.setPointerCapture(e.pointerId)
progressBar.addEventListener('pointermove', dragSegment)
progressBar.addEventListener('pointerup', () => {
progressBar.removeEventListener('pointermove', dragSegment), { once: true }
clickedSegment.style.position = clickedSegment.style.zIndex = 'inherit';
// progressBar.removeEventListener('pointermove', updateSegmentOrder), { once: true }
})
}
return (
<div className="progressbar" id="progressbar" onPointerDown={onPointerDown} ref={progressBarRef}>
{/* <div
className="progressbar done"
style={{ width: `${props.progress}%` }}
// onClick={handleClick}
></div> */}
{props.videos.map((vid, i) => <div id={`segment-${i.toString()}`} className='segment' style={{ width: `${((vid.endTime - vid.startTime) / totalTime()) * 100}%` }}></div>)}
</div>
)
}
|
