1
0
mirror of https://github.com/mifi/lossless-cut.git synced 2024-11-22 10:22:31 +01:00

mose wheel scrolling #248

This commit is contained in:
Mikael Finstad 2020-02-16 20:53:29 +08:00
parent bab424131f
commit 3b72b20ca4
3 changed files with 8 additions and 10 deletions

View File

@ -5,7 +5,7 @@ const { formatDuration } = require('./util');
const TimelineSeg = ({
isCutRangeValid, duration, apparentCutStart, apparentCutEnd, isActive, segNum,
duration, apparentCutStart, apparentCutEnd, isActive, segNum,
onSegClick, color,
}) => {
const markerWidth = 4;
@ -57,7 +57,7 @@ const TimelineSeg = ({
<div
style={{ flexGrow: 1, textAlign: 'left', fontSize: 10 }}
title={apparentCutEnd > apparentCutStart && formatDuration({ seconds: apparentCutEnd - apparentCutStart })}
title={apparentCutEnd > apparentCutStart ? formatDuration({ seconds: apparentCutEnd - apparentCutStart }) : undefined}
>
{segNum + 1}
</div>

View File

@ -61,12 +61,6 @@ input, button, textarea, :focus {
text-align: center;
}
.timeline-wrapper {
width: 100%;
position: relative;
background-color: #444;
}
.help-sheet {
background: #525252;
color: white;

View File

@ -414,7 +414,11 @@ const App = memo(() => {
const target = timelineWrapperRef.current;
const rect = target.getBoundingClientRect();
const relX = e.srcEvent.pageX - (rect.left + document.body.scrollLeft);
seekAbs((relX / target.offsetWidth) * (duration || 0));
if (duration) seekAbs((relX / target.offsetWidth) * duration);
}
function onWheel(e) {
seekRel(e.deltaX / 10);
}
const playCommand = useCallback(() => {
@ -1079,7 +1083,7 @@ const App = memo(() => {
options={{ recognizers: {} }}
>
<div>
<div className="timeline-wrapper" ref={timelineWrapperRef}>
<div style={{ width: '100%', position: 'relative', backgroundColor: '#444' }} ref={timelineWrapperRef} onWheel={onWheel}>
{currentTimePos !== undefined && <div style={{ position: 'absolute', bottom: 0, top: 0, left: currentTimePos, zIndex: 3, backgroundColor: 'rgba(255, 255, 255, 1)', width: 1, pointerEvents: 'none' }} />}
<AnimatePresence>