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

improve keyframes button

This commit is contained in:
Mikael Finstad 2020-02-27 23:40:20 +08:00
parent 25f6638661
commit 102a2e648a

View File

@ -1,4 +1,4 @@
import React, { memo } from 'react'; import React, { Fragment, memo } from 'react';
import { FaHandPointLeft, FaHandPointRight, FaStepBackward, FaStepForward, FaCaretLeft, FaCaretRight, FaPause, FaPlay, FaImages, FaKey } from 'react-icons/fa'; import { FaHandPointLeft, FaHandPointRight, FaStepBackward, FaStepForward, FaCaretLeft, FaCaretRight, FaPause, FaPlay, FaImages, FaKey } from 'react-icons/fa';
import { GiSoundWaves } from 'react-icons/gi'; import { GiSoundWaves } from 'react-icons/gi';
// import useTraceUpdate from 'use-trace-update'; // import useTraceUpdate from 'use-trace-update';
@ -111,7 +111,7 @@ const TimelineControls = memo(({
const PlayPause = playing ? FaPause : FaPlay; const PlayPause = playing ? FaPause : FaPlay;
const leftRightWidth = 50; const leftRightWidth = 100;
return ( return (
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
@ -126,6 +126,7 @@ const TimelineControls = memo(({
/> />
)} )}
{hasVideo && ( {hasVideo && (
<Fragment>
<FaImages <FaImages
size={20} size={20}
style={{ padding: '0 5px', color: timelineMode === 'thumbnails' ? primaryTextColor : undefined }} style={{ padding: '0 5px', color: timelineMode === 'thumbnails' ? primaryTextColor : undefined }}
@ -133,7 +134,6 @@ const TimelineControls = memo(({
title="Show thumbnails" title="Show thumbnails"
onClick={() => setTimelineMode('thumbnails')} onClick={() => setTimelineMode('thumbnails')}
/> />
)}
<FaKey <FaKey
size={16} size={16}
@ -142,6 +142,8 @@ const TimelineControls = memo(({
title="Show keyframes" title="Show keyframes"
onClick={() => setKeyframesEnabled(v => !v)} onClick={() => setKeyframesEnabled(v => !v)}
/> />
</Fragment>
)}
</div> </div>
<div style={{ flexGrow: 1 }} /> <div style={{ flexGrow: 1 }} />