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

make timeline time transparent

Browse Source 
when hovering it with mouse
closes #2177
also possibly #2116
This commit is contained in:
Mikael Finstad 2024-10-06 15:43:40 +02:00
parent 3e71595ece
commit 3f502a8944
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/renderer/src/Timeline.module.css Normal file
View File

@ -0,0 +1,11 @@
.time {
background: rgba(0,0,0,0.4);
border-radius: 3;
padding: 2px 4px;
color: rgba(255, 255, 255, 0.8);
transition: opacity 0.2s;
pointer-events: auto;
}
.time:hover {
opacity: 0.1;
}

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

@ -10,6 +10,8 @@ import BetweenSegments from './BetweenSegments';
import useContextMenu from './hooks/useContextMenu'; import useContextMenu from './hooks/useContextMenu';
import useUserSettings from './hooks/useUserSettings'; import useUserSettings from './hooks/useUserSettings';
import styles from './Timeline.module.css';
import { timelineBackground, darkModeTransition } from './colors'; import { timelineBackground, darkModeTransition } from './colors';
import { Frame } from './ffmpeg'; import { Frame } from './ffmpeg';
@ -71,7 +73,6 @@ 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 = { position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' };
const timeStyle: CSSProperties = { background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' };
function Timeline({ function Timeline({
durationSafe, durationSafe,
@ -401,8 +402,8 @@ function Timeline({
</div> </div>
</div> </div>
<div style={timeWrapperStyle}> <div style={timeWrapperStyle} onWheel={onWheel}>
<div style={timeStyle}> <div className={styles['time']}>
{formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''} {formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''}
</div> </div>
</div> </div>