41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { millisToMinutesAndSeconds } from 'App/utils';
|
|
|
|
interface Props {
|
|
endTime: number;
|
|
}
|
|
function TimelineScale(props: Props) {
|
|
const { endTime } = props;
|
|
const scaleRef = React.useRef<HTMLDivElement>(null);
|
|
const gap = 60;
|
|
|
|
const drawScale = (container: any) => {
|
|
const width = container.offsetWidth;
|
|
const part = Math.round(width / gap);
|
|
container.replaceChildren();
|
|
for (let i = 0; i < part; i++) {
|
|
const txt = millisToMinutesAndSeconds(i * (endTime / part));
|
|
const el = document.createElement('div');
|
|
el.style.position = 'absolute';
|
|
el.style.left = `${i * gap}px`;
|
|
el.style.paddingTop = '1px';
|
|
el.style.opacity = '0.8';
|
|
el.innerHTML = `${txt}`;
|
|
el.style.fontSize = '12px';
|
|
el.classList.add('text-white')
|
|
|
|
container.appendChild(el);
|
|
}
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
if (!scaleRef.current) {
|
|
return;
|
|
}
|
|
|
|
drawScale(scaleRef.current);
|
|
}, [scaleRef]);
|
|
return <div className="h-6 bg-gray-darkest w-full" ref={scaleRef} />;
|
|
}
|
|
|
|
export default TimelineScale;
|