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

visualize segment tags in seg list

Browse Source
This commit is contained in:
Mikael Finstad 2023-09-06 11:39:02 +02:00
parent aff48c14ff
commit 03a4bb914f
No known key found for this signature in database
GPG Key ID: 25AB36E3E81CBC26
1 changed files with 10 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/SegmentList.jsx
View File

@ -14,6 +14,7 @@ import useUserSettings from './hooks/useUserSettings';
import { saveColor, controlsBackground, primaryTextColor, darkModeTransition } from './colors';
import { useSegColors } from './contexts';
import { mySpring } from './animations';
import { getSegmentTags } from './segments';
const buttonBaseStyle = {
margin: '0 3px', borderRadius: 3, color: 'white', cursor: 'pointer',
@ -108,6 +109,8 @@ const Segment = memo(({ darkMode, seg, index, currentSegIndex, formatTimecode, g
const cursor = invertCutSegments ? undefined : 'grab';
const tags = useMemo(() => getSegmentTags(seg), [seg]);
return (
<motion.div
ref={ref}
@ -126,7 +129,13 @@ const Segment = memo(({ darkMode, seg, index, currentSegIndex, formatTimecode, g
<span style={{ cursor, fontSize: Math.min(310 / timeStr.length, 14), whiteSpace: 'nowrap' }}>{timeStr}</span>
</div>
<div style={{ fontSize: 12, color: primaryTextColor }}>{seg.name}</div>
<div style={{ fontSize: 12 }}>
{seg.name && <span style={{ color: primaryTextColor, marginRight: '.3em' }}>{seg.name}</span>}
{Object.entries(tags).map(([name, value]) => (
<span style={{ fontSize: 11, backgroundColor: 'var(--gray5)', color: 'var(--gray12)', borderRadius: '.4em', padding: '0 .2em', marginRight: '.1em' }} key={name}>{name}:<b>{value}</b></span>
))}
</div>
<div style={{ fontSize: 13 }}>
{t('Duration')} {formatTimecode({ seconds: duration, shorten: true })}
</div>