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:
parent
bab424131f
commit
3b72b20ca4
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user