Mirrors/lossless-cut
1
0
Fork 0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 02:12:30 +01:00
Code Issues Releases Activity

fix timeline mouse click

Browse Source
This commit is contained in:
Mikael Finstad 2024-10-06 23:39:30 +02:00
parent 8024884363
commit 2f361b4dd6
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/renderer/src/Timeline.module.css
View File

@ -1,11 +1,17 @@
.time-wrapper {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.time { .time {
background: rgba(0,0,0,0.4); background: rgba(0,0,0,0.4);
border-radius: 3; border-radius: 3;
padding: 2px 4px; padding: 2px 4px;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s; transition: opacity 0.2s;
pointer-events: auto;
} }
.time:hover {
opacity: 0.1;
}

14
src/renderer/src/Timeline.tsx
View File

@ -76,7 +76,7 @@ const CommandedTime = memo(({ commandedTimePercent }: { commandedTimePercent: st
const timelineHeight = 36; const timelineHeight = 36;
const timeWrapperStyle: CSSProperties = { position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }; const timeWrapperStyle: CSSProperties = { height: timelineHeight };
function Timeline({ function Timeline({
durationSafe, durationSafe,
@ -302,7 +302,15 @@ function Timeline({
window.addEventListener('mousemove', onMouseMove); window.addEventListener('mousemove', onMouseMove);
}, [getMouseTimelinePos, handleScrub, seekAbs]); }, [getMouseTimelinePos, handleScrub, seekAbs]);
const timeRef = useRef<HTMLDivElement>(null);
const onMouseMove = useCallback<MouseEventHandler<HTMLDivElement>>((e) => { const onMouseMove = useCallback<MouseEventHandler<HTMLDivElement>>((e) => {
// need to manually check, because we cannot use css :hover when pointer-events: none
// and we need pointer-events: none on time because we want to be able to click through it to segments behind (and they are not parent)
const rect = timeRef.current?.getBoundingClientRect();
const isInBounds = rect && e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
timeRef.current?.style.setProperty('opacity', isInBounds ? '0.2' : '1');
if (!mouseDownRef.current) { // no button pressed if (!mouseDownRef.current) { // no button pressed
setHoveringTime(getMouseTimelinePos(e.nativeEvent)); setHoveringTime(getMouseTimelinePos(e.nativeEvent));
} }
@ -410,8 +418,8 @@ function Timeline({
</div> </div>
</div> </div>
<div style={timeWrapperStyle} onWheel={onWheel}> <div style={timeWrapperStyle} className={styles['time-wrapper']}>
<div className={styles['time']}> <div className={styles['time']} ref={timeRef}>
{formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''} {formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''}
</div> </div>
</div> </div>