aiden
/
lossless-cut
mirror of https://github.com/mifi/lossless-cut
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improvements

Browse Source 
-improve help screen
bugfixes
pull/304/head
Mikael Finstad 6 years ago
parent 58caf7a880
commit e9a092350f
6 changed files with 75 additions and 51 deletions
Show Stats Download Patch File Download Diff File

7
src/App.jsx
Unescape Escape View File

@ -1656,6 +1656,10 @@ const App = memo(() => {
<div className="no-user-select" style={{ position: 'fixed', left: 0, right: 0, top: topBarHeight, bottom: bottomBarHeight, border: '2vmin dashed #252525', color: '#505050', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}>
<div style={{ fontSize: '9vmin', textTransform: 'uppercase' }}>{t('DROP FILE(S)')}</div>
<div style={{ fontSize: '4vmin', color: '#777', cursor: 'pointer' }} role="button" onClick={toggleHelp}>
Press <kbd>H</kbd> for help
</div>
{mifiLink && mifiLink.loadUrl && (
<div style={{ position: 'relative', margin: '3vmin', width: '60vmin', height: '20vmin' }}>
<iframe src={mifiLink.loadUrl} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute' }} />
@ -1699,7 +1703,7 @@ const App = memo(() => {
)}
</AnimatePresence>
<div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight }}>
<div className="no-user-select" style={{ position: 'absolute', top: topBarHeight, left: 0, right: sideBarWidth, bottom: bottomBarHeight, pointerEvents: 'none' }}>
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
<video
muted={muted}
@ -1881,6 +1885,7 @@ const App = memo(() => {
visible={helpVisible}
onTogglePress={toggleHelp}
ffmpegCommandLog={ffmpegCommandLog}
currentCutSeg={currentCutSeg}
/>
<SettingsSheet

36
src/HelpSheet.jsx
Unescape Escape View File

@ -1,11 +1,12 @@
import React, { memo } from 'react';
import { IoIosCloseCircleOutline } from 'react-icons/io';
import { FaClipboard } from 'react-icons/fa';
import { FaClipboard, FaHandPointRight, FaHandPointLeft, FaStepBackward, FaStepForward } from 'react-icons/fa';
import { motion, AnimatePresence } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import SetCutpointButton from './SetCutpointButton';
import { toast } from './util';
import { primaryColor } from './colors';
import { primaryTextColor } from './colors';
const electron = window.require('electron');
const { clipboard } = electron;
@ -13,7 +14,7 @@ const { clipboard } = electron;
const { githubLink } = electron.remote.require('./constants');
const HelpSheet = memo(({
visible, onTogglePress, ffmpegCommandLog,
visible, onTogglePress, ffmpegCommandLog, currentCutSeg,
}) => {
const { t } = useTranslation();
@ -29,11 +30,13 @@ const HelpSheet = memo(({
<IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />
<p style={{ fontWeight: 'bold' }}>
For usage help and issues, go to<br />
<span style={{ color: primaryColor, cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal(githubLink)}>{githubLink}</span>
{t('For usage help and issues, please go to:')}<br />
<span style={{ color: primaryTextColor, cursor: 'pointer' }} role="button" onClick={() => electron.shell.openExternal(githubLink)}>{githubLink}</span>
</p>
<h1>{t('Keyboard & mouse shortcuts')}</h1>
<div><kbd>H</kbd> {t('Show/hide this screen')}</div>
<div><kbd>H</kbd> {t('Show/hide help screen')}</div>
<h2>{t('Playback')}</h2>
@ -51,6 +54,17 @@ const HelpSheet = memo(({
<div><kbd>→</kbd> {t('Seek forward 1 sec')}</div>
<div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>←</kbd> {t('Seek backward 1% of timeline at current zoom')}</div>
<div><kbd>CTRL</kbd> / <kbd>CMD</kbd> + <kbd>→</kbd> {t('Seek forward 1% of timeline at current zoom')}</div>
<div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} style={{ verticalAlign: 'middle' }} /> {t('Jump to cut end')}</div>
<div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} style={{ verticalAlign: 'middle' }} /> {t('Jump to cut end')}</div>
<h2>{t('Segments and cut points')}</h2>
<div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} />, <kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
<div style={{ lineHeight: 1.7 }}><SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} />, <kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
<div><kbd>+</kbd> {t('Add cut segment')}</div>
<div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
<div><kbd>↑</kbd> {t('Select previous segment')}</div>
<div><kbd>↓</kbd> {t('Select next segment')}</div>
<h2>{t('Timeline/zoom operations')}</h2>
<div><kbd>Z</kbd> {t('Toggle zoom between 1x and a calculated comfortable zoom level')}</div>
@ -59,15 +73,7 @@ const HelpSheet = memo(({
<div><kbd>CTRL</kbd> <i>+ {t('Mouse scroll/wheel up/down')}</i> - {t('Zoom in/out timeline')}</div>
<div><i>{t('Mouse scroll/wheel left/right')}</i> - {t('Pan timeline')}</div>
<h2>{t('Segments and cut points')}</h2>
<div><kbd>I</kbd> {t('Mark in / cut start point for current segment')}</div>
<div><kbd>O</kbd> {t('Mark out / cut end point for current segment')}</div>
<div><kbd>+</kbd> {t('Add cut segment')}</div>
<div><kbd>BACKSPACE</kbd> {t('Remove current segment')}</div>
<div><kbd>↑</kbd> {t('Select previous segment')}</div>
<div><kbd>↓</kbd> {t('Select next segment')}</div>
<h2>{t('File system actions')}</h2>
<h2>{t('Output actions')}</h2>
<div><kbd>E</kbd> {t('Export segment(s)')}</div>
<div><kbd>C</kbd> {t('Capture snapshot')}</div>
<div><kbd>D</kbd> {t('Delete source file')}</div>

25
src/SetCutpointButton.jsx
Unescape Escape View File

@ -0,0 +1,25 @@
import React from 'react';
import { getSegColors } from './util';
const SetCutpointButton = ({ currentCutSeg, side, Icon, onClick, title, style }) => {
const {
segActiveBgColor: currentSegActiveBgColor,
segBorderColor: currentSegBorderColor,
} = getSegColors(currentCutSeg);
const start = side === 'start';
const border = `4px solid ${currentSegBorderColor}`;
return (
<Icon
size={13}
title={title}
role="button"
style={{ color: 'white', padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
onClick={onClick}
/>
);
};
export default SetCutpointButton;

2
src/SettingsSheet.jsx
Unescape Escape View File

@ -16,7 +16,7 @@ const SettingsSheet = memo(({
initial={{ scale: 0, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0, opacity: 0 }}
className="help-sheet"
className="settings-sheet"
>
<IoIosCloseCircleOutline role="button" onClick={onTogglePress} size={30} style={{ position: 'fixed', right: 0, top: 0, padding: 20 }} />

34
src/TimelineControls.jsx
Unescape Escape View File

@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import { getSegColors, parseDuration, formatDuration } from './util';
import { primaryTextColor } from './colors';
import SetCutpointButton from './SetCutpointButton';
const TimelineControls = memo(({
seekAbs, currentSegIndexSafe, cutSegments, currentCutSeg, setCutStart, setCutEnd,
@ -18,31 +18,13 @@ const TimelineControls = memo(({
}) => {
const { t } = useTranslation();
const {
segActiveBgColor: currentSegActiveBgColor,
segBorderColor: currentSegBorderColor,
} = getSegColors(currentCutSeg);
const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
function renderSetCutpointButton({ side, Icon, onClick, title, style }) {
const start = side === 'start';
const border = `4px solid ${currentSegBorderColor}`;
return (
<Icon
size={13}
title={title}
role="button"
style={{ padding: start ? '4px 4px 4px 2px' : '4px 2px 4px 4px', borderLeft: start && border, borderRight: !start && border, background: currentSegActiveBgColor, borderRadius: 6, ...style }}
onClick={onClick}
/>
);
}
function renderJumpCutpointButton(direction) {
const newIndex = currentSegIndexSafe + direction;
const seg = cutSegments[newIndex];
const getSegButtonStyle = ({ segActiveBgColor, segBorderColor }) => ({ background: segActiveBgColor, border: `2px solid ${segBorderColor}`, borderRadius: 6, color: 'white', fontSize: 14, textAlign: 'center', lineHeight: '11px', fontWeight: 'bold' });
let segButtonStyle;
if (seg) {
@ -164,9 +146,8 @@ const TimelineControls = memo(({
{renderJumpCutpointButton(-1)}
{renderSetCutpointButton({ side: 'start', Icon: FaStepBackward, onClick: jumpCutStart, title: t('Jump to cut start'), style: { marginRight: 5 } })}
{renderSetCutpointButton({ side: 'start', Icon: FaHandPointLeft, onClick: setCutStart, title: t('Set cut start to current position') })}
<SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaStepBackward} onClick={jumpCutStart} title={t('Jump to cut start')} style={{ marginRight: 5 }} />
<SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} onClick={setCutStart} title={t('Set cut start to current position')} />
{renderCutTimeInput('start')}
@ -203,9 +184,8 @@ const TimelineControls = memo(({
{renderCutTimeInput('end')}
{renderSetCutpointButton({ side: 'end', Icon: FaHandPointRight, onClick: setCutEnd, title: t('Set cut end to current position') })}
{renderSetCutpointButton({ side: 'end', Icon: FaStepForward, onClick: jumpCutEnd, title: t('Jump to cut end'), style: { marginLeft: 5 } })}
<SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} onClick={setCutEnd} title={t('Set cut end to current position')} />
<SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaStepForward} onClick={jumpCutEnd} title={t('Jump to cut end')} style={{ marginLeft: 5 }} />
{renderJumpCutpointButton(1)}

22
src/main.css
Unescape Escape View File

@ -18,9 +18,7 @@ body {
cursor: default;
}
.help-sheet {
background: white;
color: black;
.help-sheet, .settings-sheet {
padding: 1em 2em;
position: fixed;
left: 0;
@ -31,27 +29,37 @@ body {
overflow-y: scroll;
}
.help-sheet h1 {
.help-sheet {
background: #6b6b6b;
color: white;
}
.settings-sheet {
background: white;
color: black;
}
.help-sheet h1, .settings-sheet h1 {
font-size: 1.2em;
margin-bottom: .5em;
margin-top: 1.3em;
text-transform: uppercase;
}
.help-sheet h2 {
.help-sheet h2, .settings-sheet h2 {
font-size: 1em;
margin-bottom: .5em;
text-transform: uppercase;
}
.help-sheet kbd {
kbd {
display: inline-block;
padding: 3px 5px;
font-size: 11px;
line-height: 10px;
color: #555;
vertical-align: middle;
background-color: rgba(0,0,0,0.03);
background-color: #fdfdfd;
border: solid 1px #ccc;
border-bottom-color: #bbb;
border-radius: 3px;

Write Preview
Loading…
Cancel
Save