|
|
|
|
@ -14,7 +14,7 @@ const captureFrame = require('./capture-frame');
|
|
|
|
|
const ffmpeg = require('./ffmpeg');
|
|
|
|
|
const util = require('./util');
|
|
|
|
|
|
|
|
|
|
const dialog = electron.remote.dialog;
|
|
|
|
|
const { dialog } = electron.remote;
|
|
|
|
|
|
|
|
|
|
function setFileNameTitle(filePath) {
|
|
|
|
|
const appName = 'LosslessCut';
|
|
|
|
|
@ -27,7 +27,7 @@ function getVideo() {
|
|
|
|
|
|
|
|
|
|
function seekAbs(val) {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
if (val == null || isNaN(val)) return;
|
|
|
|
|
if (val == null || Number.isNaN(val)) return;
|
|
|
|
|
|
|
|
|
|
let outVal = val;
|
|
|
|
|
if (outVal < 0) outVal = 0;
|
|
|
|
|
@ -48,29 +48,34 @@ function shortStep(dir) {
|
|
|
|
|
seekRel((1 / 60) * dir);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* eslint-disable react/jsx-one-expression-per-line */
|
|
|
|
|
function renderHelpSheet(visible) {
|
|
|
|
|
if (visible) {
|
|
|
|
|
return (<div className="help-sheet">
|
|
|
|
|
<h1>Keyboard shortcuts</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><kbd>H</kbd> Show/hide help</li>
|
|
|
|
|
<li><kbd>SPACE</kbd>, <kbd>k</kbd> Play/pause</li>
|
|
|
|
|
<li><kbd>J</kbd> Slow down video</li>
|
|
|
|
|
<li><kbd>L</kbd> Speed up video</li>
|
|
|
|
|
<li><kbd>←</kbd> Seek backward 1 sec</li>
|
|
|
|
|
<li><kbd>→</kbd> Seek forward 1 sec</li>
|
|
|
|
|
<li><kbd>.</kbd> (period) Tiny seek forward (1/60 sec)</li>
|
|
|
|
|
<li><kbd>,</kbd> (comma) Tiny seek backward (1/60 sec)</li>
|
|
|
|
|
<li><kbd>I</kbd> Mark in / cut start point</li>
|
|
|
|
|
<li><kbd>O</kbd> Mark out / cut end point</li>
|
|
|
|
|
<li><kbd>E</kbd> Cut (export selection in the same directory)</li>
|
|
|
|
|
<li><kbd>C</kbd> Capture snapshot (in the same directory)</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>);
|
|
|
|
|
return (
|
|
|
|
|
<div className="help-sheet">
|
|
|
|
|
<h1>Keyboard shortcuts</h1>
|
|
|
|
|
<ul>
|
|
|
|
|
<li><kbd>H</kbd> Show/hide help</li>
|
|
|
|
|
<li><kbd>SPACE</kbd>, <kbd>k</kbd> Play/pause</li>
|
|
|
|
|
<li><kbd>J</kbd> Slow down video</li>
|
|
|
|
|
<li><kbd>L</kbd> Speed up video</li>
|
|
|
|
|
<li><kbd>←</kbd> Seek backward 1 sec</li>
|
|
|
|
|
<li><kbd>→</kbd> Seek forward 1 sec</li>
|
|
|
|
|
<li><kbd>.</kbd> (period) Tiny seek forward (1/60 sec)</li>
|
|
|
|
|
<li><kbd>,</kbd> (comma) Tiny seek backward (1/60 sec)</li>
|
|
|
|
|
<li><kbd>I</kbd> Mark in / cut start point</li>
|
|
|
|
|
<li><kbd>O</kbd> Mark out / cut end point</li>
|
|
|
|
|
<li><kbd>E</kbd> Cut (export selection in the same directory)</li>
|
|
|
|
|
<li><kbd>C</kbd> Capture snapshot (in the same directory)</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
/* eslint-enable react/jsx-one-expression-per-line */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function withBlur(cb) {
|
|
|
|
|
return (e) => {
|
|
|
|
|
@ -114,8 +119,10 @@ class App extends React.Component {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const load = (filePath, html5FriendlyPath) => {
|
|
|
|
|
const { working } = this.state;
|
|
|
|
|
|
|
|
|
|
console.log('Load', { filePath, html5FriendlyPath });
|
|
|
|
|
if (this.state.working) return alert('I\'m busy');
|
|
|
|
|
if (working) return alert('I\'m busy');
|
|
|
|
|
|
|
|
|
|
this.resetState();
|
|
|
|
|
|
|
|
|
|
@ -159,7 +166,8 @@ class App extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.ondragover = document.ondragend = ev => ev.preventDefault();
|
|
|
|
|
document.ondragover = ev => ev.preventDefault();
|
|
|
|
|
document.ondragend = document.ondragover;
|
|
|
|
|
|
|
|
|
|
document.body.ondrop = (ev) => {
|
|
|
|
|
ev.preventDefault();
|
|
|
|
|
@ -196,31 +204,33 @@ class App extends React.Component {
|
|
|
|
|
this.setState({ duration });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onCutProgress(cutProgress) {
|
|
|
|
|
onCutProgress = (cutProgress) => {
|
|
|
|
|
this.setState({ cutProgress });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setCutStart() {
|
|
|
|
|
this.setState({ cutStartTime: this.state.currentTime });
|
|
|
|
|
setCutStart = () => {
|
|
|
|
|
this.setState(({ currentTime }) => ({ cutStartTime: currentTime }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setCutEnd() {
|
|
|
|
|
this.setState({ cutEndTime: this.state.currentTime });
|
|
|
|
|
setCutEnd = () => {
|
|
|
|
|
this.setState(({ currentTime }) => ({ cutEndTime: currentTime }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setOutputDir() {
|
|
|
|
|
setOutputDir = () => {
|
|
|
|
|
dialog.showOpenDialog({ properties: ['openDirectory'] }, (paths) => {
|
|
|
|
|
this.setState({ customOutDir: (paths && paths.length === 1) ? paths[0] : undefined });
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getFileUri() {
|
|
|
|
|
return (this.state.html5FriendlyPath || this.state.filePath || '').replace(/#/g, '%23');
|
|
|
|
|
const { html5FriendlyPath, filePath } = this.state;
|
|
|
|
|
return (html5FriendlyPath || filePath || '').replace(/#/g, '%23');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getOutputDir() {
|
|
|
|
|
if (this.state.customOutDir) return this.state.customOutDir;
|
|
|
|
|
if (this.state.filePath) return path.dirname(this.state.filePath);
|
|
|
|
|
const { customOutDir, filePath } = this.state;
|
|
|
|
|
if (customOutDir) return customOutDir;
|
|
|
|
|
if (filePath) return path.dirname(filePath);
|
|
|
|
|
return undefined;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -238,72 +248,48 @@ class App extends React.Component {
|
|
|
|
|
return 0; // Haven't gotten duration yet
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isRotationSet() {
|
|
|
|
|
// 360 means we don't modify rotation
|
|
|
|
|
return this.state.rotation !== 360;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isCutRangeValid() {
|
|
|
|
|
return this.state.cutStartTime < this.getApparentCutEndTime();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
increaseRotation() {
|
|
|
|
|
const rotation = (this.state.rotation + 90) % 450;
|
|
|
|
|
this.setState({ rotation });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
resetState() {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
video.currentTime = 0;
|
|
|
|
|
video.playbackRate = 1;
|
|
|
|
|
this.setState(localState);
|
|
|
|
|
setFileNameTitle();
|
|
|
|
|
increaseRotation = () => {
|
|
|
|
|
this.setState(({ rotation }) => ({ rotation: (rotation + 90) % 450 }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleCaptureFormat() {
|
|
|
|
|
toggleCaptureFormat = () => {
|
|
|
|
|
const isPng = this.state.captureFormat === 'png';
|
|
|
|
|
this.setState({ captureFormat: isPng ? 'jpeg' : 'png' });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleIncludeAllStreams() {
|
|
|
|
|
this.setState({ includeAllStreams: !this.state.includeAllStreams });
|
|
|
|
|
toggleIncludeAllStreams = () => {
|
|
|
|
|
this.setState(({ includeAllStreams }) => ({ includeAllStreams: !includeAllStreams }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
jumpCutStart() {
|
|
|
|
|
toggleStripAudio = () => this.setState(({ stripAudio }) => ({ stripAudio: !stripAudio }));
|
|
|
|
|
|
|
|
|
|
toggleKeyframeCut = () => this.setState(({ keyframeCut }) => ({ keyframeCut: !keyframeCut }));
|
|
|
|
|
|
|
|
|
|
jumpCutStart = () => {
|
|
|
|
|
seekAbs(this.state.cutStartTime);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
jumpCutEnd() {
|
|
|
|
|
jumpCutEnd = () => {
|
|
|
|
|
seekAbs(this.getApparentCutEndTime());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handlePan(e) {
|
|
|
|
|
handlePan = (e) => {
|
|
|
|
|
_.throttle(e2 => this.handleTap(e2), 200)(e);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleTap(e) {
|
|
|
|
|
handleTap = (e) => {
|
|
|
|
|
const $target = $('.timeline-wrapper');
|
|
|
|
|
const parentOffset = $target.offset();
|
|
|
|
|
const relX = e.srcEvent.pageX - parentOffset.left;
|
|
|
|
|
setCursor((relX / $target[0].offsetWidth) * this.state.duration);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changePlaybackRate(dir) {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
if (!this.state.playing) {
|
|
|
|
|
video.playbackRate = 0.5; // dir * 0.5;
|
|
|
|
|
video.play();
|
|
|
|
|
} else {
|
|
|
|
|
const newRate = video.playbackRate + (dir * 0.15);
|
|
|
|
|
video.playbackRate = _.clamp(newRate, 0.05, 16);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
playbackRateChange() {
|
|
|
|
|
playbackRateChange = () => {
|
|
|
|
|
this.state.playbackRate = getVideo().playbackRate;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
playCommand() {
|
|
|
|
|
playCommand = () => {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
if (this.state.playing) return video.pause();
|
|
|
|
|
|
|
|
|
|
@ -315,8 +301,8 @@ class App extends React.Component {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async deleteSourceClick() {
|
|
|
|
|
if (this.state.working || !confirm('Are you sure you want to move the source file to trash?')) return;
|
|
|
|
|
deleteSourceClick = async () => {
|
|
|
|
|
if (this.state.working || !window.confirm('Are you sure you want to move the source file to trash?')) return;
|
|
|
|
|
const { filePath } = this.state;
|
|
|
|
|
|
|
|
|
|
this.setState({ working: true });
|
|
|
|
|
@ -324,7 +310,7 @@ class App extends React.Component {
|
|
|
|
|
this.resetState();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async cutClick() {
|
|
|
|
|
cutClick = async () => {
|
|
|
|
|
if (this.state.working) return alert('I\'m busy');
|
|
|
|
|
|
|
|
|
|
const {
|
|
|
|
|
@ -352,7 +338,7 @@ class App extends React.Component {
|
|
|
|
|
includeAllStreams,
|
|
|
|
|
stripAudio,
|
|
|
|
|
keyframeCut,
|
|
|
|
|
onProgress: progress => this.onCutProgress(progress),
|
|
|
|
|
onProgress: this.onCutProgress,
|
|
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error('stdout:', err.stdout);
|
|
|
|
|
@ -367,18 +353,45 @@ class App extends React.Component {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
capture() {
|
|
|
|
|
const filePath = this.state.filePath;
|
|
|
|
|
const outputDir = this.state.customOutDir;
|
|
|
|
|
const currentTime = this.state.currentTime;
|
|
|
|
|
const captureFormat = this.state.captureFormat;
|
|
|
|
|
capture = () => {
|
|
|
|
|
const {
|
|
|
|
|
filePath, customOutDir: outputDir, currentTime, captureFormat,
|
|
|
|
|
} = this.state;
|
|
|
|
|
if (!filePath) return;
|
|
|
|
|
captureFrame(outputDir, filePath, getVideo(), currentTime, captureFormat)
|
|
|
|
|
.catch(err => alert(err));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changePlaybackRate(dir) {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
if (!this.state.playing) {
|
|
|
|
|
video.playbackRate = 0.5; // dir * 0.5;
|
|
|
|
|
video.play();
|
|
|
|
|
} else {
|
|
|
|
|
const newRate = video.playbackRate + (dir * 0.15);
|
|
|
|
|
video.playbackRate = _.clamp(newRate, 0.05, 16);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
resetState() {
|
|
|
|
|
const video = getVideo();
|
|
|
|
|
video.currentTime = 0;
|
|
|
|
|
video.playbackRate = 1;
|
|
|
|
|
this.setState(localState);
|
|
|
|
|
setFileNameTitle();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isRotationSet() {
|
|
|
|
|
// 360 means we don't modify rotation
|
|
|
|
|
return this.state.rotation !== 360;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
isCutRangeValid() {
|
|
|
|
|
return this.state.cutStartTime < this.getApparentCutEndTime();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleHelp() {
|
|
|
|
|
this.setState({ helpVisible: !this.state.helpVisible });
|
|
|
|
|
this.setState(({ helpVisible }) => ({ helpVisible: !helpVisible }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
renderCutTimeInput(type) {
|
|
|
|
|
@ -404,58 +417,67 @@ class App extends React.Component {
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (<input
|
|
|
|
|
style={{ ...cutTimeInputStyle, color: isCutTimeManualSet() ? '#dc1d1d' : undefined }}
|
|
|
|
|
type="text"
|
|
|
|
|
onChange={e => handleCutTimeInput(e.target.value)}
|
|
|
|
|
value={isCutTimeManualSet()
|
|
|
|
|
? this.state[cutTimeManualKey]
|
|
|
|
|
: util.formatDuration(type === 'start' ? this.state.cutStartTime : this.getApparentCutEndTime())
|
|
|
|
|
return (
|
|
|
|
|
<input
|
|
|
|
|
style={{ ...cutTimeInputStyle, color: isCutTimeManualSet() ? '#dc1d1d' : undefined }}
|
|
|
|
|
type="text"
|
|
|
|
|
onChange={e => handleCutTimeInput(e.target.value)}
|
|
|
|
|
value={isCutTimeManualSet()
|
|
|
|
|
? this.state[cutTimeManualKey]
|
|
|
|
|
: util.formatDuration(type === 'start' ? this.state.cutStartTime : this.getApparentCutEndTime())
|
|
|
|
|
}
|
|
|
|
|
/>);
|
|
|
|
|
/>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const jumpCutButtonStyle = { position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px' };
|
|
|
|
|
const infoSpanStyle = { background: 'rgba(255, 255, 255, 0.4)', padding: '.1em .4em', margin: '0 3px', fontSize: 13, borderRadius: '.3em' };
|
|
|
|
|
const jumpCutButtonStyle = {
|
|
|
|
|
position: 'absolute', color: 'black', bottom: 0, top: 0, padding: '2px 8px',
|
|
|
|
|
};
|
|
|
|
|
const infoSpanStyle = {
|
|
|
|
|
background: 'rgba(255, 255, 255, 0.4)', padding: '.1em .4em', margin: '0 3px', fontSize: 13, borderRadius: '.3em',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
return (<div>
|
|
|
|
|
{!this.state.filePath && <div id="drag-drop-field">DROP VIDEO</div>}
|
|
|
|
|
{this.state.working && (
|
|
|
|
|
<div style={{ color: 'white', background: 'rgba(0, 0, 0, 0.3)', borderRadius: '.5em', margin: '1em', padding: '.2em .5em', position: 'absolute', zIndex: 1, top: 0, left: 0 }}>
|
|
|
|
|
return (
|
|
|
|
|
<div>
|
|
|
|
|
{!this.state.filePath && <div id="drag-drop-field">DROP VIDEO</div>}
|
|
|
|
|
{this.state.working && (
|
|
|
|
|
<div style={{
|
|
|
|
|
color: 'white', background: 'rgba(0, 0, 0, 0.3)', borderRadius: '.5em', margin: '1em', padding: '.2em .5em', position: 'absolute', zIndex: 1, top: 0, left: 0,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<i className="fa fa-cog fa-spin fa-3x fa-fw" style={{ verticalAlign: 'middle', width: '1em', height: '1em' }} />
|
|
|
|
|
{this.state.cutProgress != null &&
|
|
|
|
|
{this.state.cutProgress != null && (
|
|
|
|
|
<span style={{ color: 'rgba(255, 255, 255, 0.7)', paddingLeft: '.4em' }}>
|
|
|
|
|
{Math.floor(this.state.cutProgress * 100)} %
|
|
|
|
|
{`${Math.floor(this.state.cutProgress * 100)} %`}
|
|
|
|
|
</span>
|
|
|
|
|
}
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
<div id="player">
|
|
|
|
|
<video
|
|
|
|
|
src={this.getFileUri()}
|
|
|
|
|
onRateChange={() => this.playbackRateChange()}
|
|
|
|
|
onPlay={() => this.onPlay(true)}
|
|
|
|
|
onPause={() => this.onPlay(false)}
|
|
|
|
|
onDurationChange={e => this.onDurationChange(e.target.duration)}
|
|
|
|
|
onTimeUpdate={e => this.setState({ currentTime: e.target.currentTime })}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="controls-wrapper">
|
|
|
|
|
<Hammer
|
|
|
|
|
onTap={e => this.handleTap(e)}
|
|
|
|
|
onPan={e => this.handlePan(e)}
|
|
|
|
|
options={{
|
|
|
|
|
recognizers: {
|
|
|
|
|
},
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="timeline-wrapper">
|
|
|
|
|
<div className="current-time" style={{ left: `${((this.state.currentTime || 0) / (this.state.duration || 1)) * 100}%` }} />
|
|
|
|
|
|
|
|
|
|
{this.isCutRangeValid() &&
|
|
|
|
|
)}
|
|
|
|
|
|
|
|
|
|
{/* eslint-disable jsx-a11y/media-has-caption */}
|
|
|
|
|
<div id="player">
|
|
|
|
|
<video
|
|
|
|
|
src={this.getFileUri()}
|
|
|
|
|
onRateChange={this.playbackRateChange}
|
|
|
|
|
onPlay={() => this.onPlay(true)}
|
|
|
|
|
onPause={() => this.onPlay(false)}
|
|
|
|
|
onDurationChange={e => this.onDurationChange(e.target.duration)}
|
|
|
|
|
onTimeUpdate={e => this.setState({ currentTime: e.target.currentTime })}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
{/* eslint-enable jsx-a11y/media-has-caption */}
|
|
|
|
|
|
|
|
|
|
<div className="controls-wrapper">
|
|
|
|
|
<Hammer
|
|
|
|
|
onTap={this.handleTap}
|
|
|
|
|
onPan={this.handlePan}
|
|
|
|
|
options={{ recognizers: {} }}
|
|
|
|
|
>
|
|
|
|
|
<div className="timeline-wrapper">
|
|
|
|
|
<div className="current-time" style={{ left: `${((this.state.currentTime || 0) / (this.state.duration || 1)) * 100}%` }} />
|
|
|
|
|
|
|
|
|
|
{this.isCutRangeValid() && (
|
|
|
|
|
<div
|
|
|
|
|
className="cut-start-time"
|
|
|
|
|
style={{
|
|
|
|
|
@ -463,158 +485,168 @@ class App extends React.Component {
|
|
|
|
|
width: `${(((this.getApparentCutEndTime()) - this.state.cutStartTime) / (this.state.duration || 1)) * 100}%`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<div id="current-time-display">{util.formatDuration(this.state.currentTime)}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Hammer>
|
|
|
|
|
<div id="current-time-display">{util.formatDuration(this.state.currentTime)}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Hammer>
|
|
|
|
|
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-step-backward"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
title="Jump to start of video"
|
|
|
|
|
onClick={() => seekAbs(0)}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-step-backward"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
title="Jump to start of video"
|
|
|
|
|
onClick={() => seekAbs(0)}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
{this.renderCutTimeInput('start')}
|
|
|
|
|
<i
|
|
|
|
|
style={{ ...jumpCutButtonStyle, left: 0 }}
|
|
|
|
|
className="fa fa-step-backward"
|
|
|
|
|
title="Jump to cut start"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={withBlur(this.jumpCutStart)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
{this.renderCutTimeInput('start')}
|
|
|
|
|
<i
|
|
|
|
|
style={{ ...jumpCutButtonStyle, left: 0 }}
|
|
|
|
|
className="fa fa-step-backward"
|
|
|
|
|
title="Jump to cut start"
|
|
|
|
|
className="button fa fa-caret-left"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={withBlur(() => this.jumpCutStart())}
|
|
|
|
|
onClick={() => shortStep(-1)}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
className={classnames({
|
|
|
|
|
button: true, fa: true, 'fa-pause': this.state.playing, 'fa-play': !this.state.playing,
|
|
|
|
|
})}
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.playCommand}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-caret-right"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => shortStep(1)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-caret-left"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => shortStep(-1)}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
className={classnames({ button: true, fa: true, 'fa-pause': this.state.playing, 'fa-play': !this.state.playing })}
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.playCommand()}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-caret-right"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => shortStep(1)}
|
|
|
|
|
/>
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
{this.renderCutTimeInput('end')}
|
|
|
|
|
<i
|
|
|
|
|
style={{ ...jumpCutButtonStyle, right: 0 }}
|
|
|
|
|
className="fa fa-step-forward"
|
|
|
|
|
title="Jump to cut end"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={withBlur(this.jumpCutEnd)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
|
|
|
{this.renderCutTimeInput('end')}
|
|
|
|
|
<i
|
|
|
|
|
style={{ ...jumpCutButtonStyle, right: 0 }}
|
|
|
|
|
className="fa fa-step-forward"
|
|
|
|
|
title="Jump to cut end"
|
|
|
|
|
className="button fa fa-step-forward"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={withBlur(() => this.jumpCutEnd())}
|
|
|
|
|
title="Jump to end of video"
|
|
|
|
|
onClick={() => seekAbs(this.state.duration)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<i
|
|
|
|
|
className="button fa fa-step-forward"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
title="Jump to end of video"
|
|
|
|
|
onClick={() => seekAbs(this.state.duration)}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div>
|
|
|
|
|
<i
|
|
|
|
|
title="Set cut start to current position"
|
|
|
|
|
className="button fa fa-angle-left"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.setCutStart()}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Cut"
|
|
|
|
|
className="button fa fa-scissors"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.cutClick()}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Delete source file"
|
|
|
|
|
className="button fa fa-trash"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.deleteSourceClick()}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Set cut end to current position"
|
|
|
|
|
className="button fa fa-angle-right"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.setCutEnd()}
|
|
|
|
|
/>
|
|
|
|
|
<div>
|
|
|
|
|
<i
|
|
|
|
|
title="Set cut start to current position"
|
|
|
|
|
className="button fa fa-angle-left"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.setCutStart}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Cut"
|
|
|
|
|
className="button fa fa-scissors"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.cutClick}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Delete source file"
|
|
|
|
|
className="button fa fa-trash"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.deleteSourceClick}
|
|
|
|
|
/>
|
|
|
|
|
<i
|
|
|
|
|
title="Set cut end to current position"
|
|
|
|
|
className="button fa fa-angle-right"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.setCutEnd}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="left-menu">
|
|
|
|
|
<span style={infoSpanStyle} title="Format of current file">
|
|
|
|
|
{this.state.fileFormat || 'FMT'}
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<span style={infoSpanStyle} title="Playback rate">
|
|
|
|
|
{_.round(this.state.playbackRate, 1) || 1}x
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="left-menu">
|
|
|
|
|
<span style={infoSpanStyle} title="Format of current file">
|
|
|
|
|
{this.state.fileFormat || 'FMT'}
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<div className="right-menu">
|
|
|
|
|
<button
|
|
|
|
|
title={`Cut mode ${this.state.keyframeCut ? 'nearest keyframe cut' : 'normal cut'}`}
|
|
|
|
|
onClick={withBlur(() => this.setState({ keyframeCut: !this.state.keyframeCut }))}
|
|
|
|
|
>
|
|
|
|
|
{this.state.keyframeCut ? 'kc' : 'nc'}
|
|
|
|
|
</button>
|
|
|
|
|
<span style={infoSpanStyle} title="Playback rate">
|
|
|
|
|
{_.round(this.state.playbackRate, 1) || 1}
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
title={`Set output streams. Current: ${this.state.includeAllStreams ? 'include (and cut) all streams' : 'include only primary streams'}`}
|
|
|
|
|
onClick={withBlur(() => this.toggleIncludeAllStreams())}
|
|
|
|
|
>
|
|
|
|
|
{this.state.includeAllStreams ? 'all' : 'ps'}
|
|
|
|
|
</button>
|
|
|
|
|
<div className="right-menu">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={`Cut mode ${this.state.keyframeCut ? 'nearest keyframe cut' : 'normal cut'}`}
|
|
|
|
|
onClick={withBlur(this.toggleKeyframeCut)}
|
|
|
|
|
>
|
|
|
|
|
{this.state.keyframeCut ? 'kc' : 'nc'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={`Set output streams. Current: ${this.state.includeAllStreams ? 'include (and cut) all streams' : 'include only primary streams'}`}
|
|
|
|
|
onClick={withBlur(this.toggleIncludeAllStreams)}
|
|
|
|
|
>
|
|
|
|
|
{this.state.includeAllStreams ? 'all' : 'ps'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={`Delete audio? Current: ${this.state.stripAudio ? 'delete audio tracks' : 'keep audio tracks'}`}
|
|
|
|
|
onClick={withBlur(this.toggleStripAudio)}
|
|
|
|
|
>
|
|
|
|
|
{this.state.stripAudio ? 'da' : 'ka'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={`Set output rotation. Current: ${this.isRotationSet() ? this.getRotationStr() : 'Don\'t modify'}`}
|
|
|
|
|
onClick={withBlur(this.increaseRotation)}
|
|
|
|
|
>
|
|
|
|
|
{this.isRotationSet() ? this.getRotationStr() : '-°'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title={`Custom output dir (cancel to restore default). Current: ${this.getOutputDir() || 'Not set (use input dir)'}`}
|
|
|
|
|
onClick={withBlur(this.setOutputDir)}
|
|
|
|
|
>
|
|
|
|
|
{this.getOutputDir() ? 'cd' : 'id'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
title={`Delete audio? Current: ${this.state.stripAudio ? 'delete audio tracks' : 'keep audio tracks'}`}
|
|
|
|
|
onClick={withBlur(() => this.setState({ stripAudio: !this.state.stripAudio }))}
|
|
|
|
|
>
|
|
|
|
|
{this.state.stripAudio ? 'da' : 'ka'}
|
|
|
|
|
</button>
|
|
|
|
|
<i
|
|
|
|
|
title="Capture frame"
|
|
|
|
|
style={{ margin: '-.4em -.2em' }}
|
|
|
|
|
className="button fa fa-camera"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={this.capture}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
title={`Set output rotation. Current: ${this.isRotationSet() ? this.getRotationStr() : 'Don\'t modify'}`}
|
|
|
|
|
onClick={withBlur(() => this.increaseRotation())}
|
|
|
|
|
>
|
|
|
|
|
{this.isRotationSet() ? this.getRotationStr() : '-°'}
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
title="Capture frame format"
|
|
|
|
|
onClick={withBlur(this.toggleCaptureFormat)}
|
|
|
|
|
>
|
|
|
|
|
{this.state.captureFormat}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
title={`Custom output dir (cancel to restore default). Current: ${this.getOutputDir() || 'Not set (use input dir)'}`}
|
|
|
|
|
onClick={withBlur(() => this.setOutputDir())}
|
|
|
|
|
>
|
|
|
|
|
{this.getOutputDir() ? 'cd' : 'id'}
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<i
|
|
|
|
|
title="Capture frame"
|
|
|
|
|
style={{ margin: '-.4em -.2em' }}
|
|
|
|
|
className="button fa fa-camera"
|
|
|
|
|
aria-hidden="true"
|
|
|
|
|
onClick={() => this.capture()}
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<button
|
|
|
|
|
title="Capture frame format"
|
|
|
|
|
onClick={withBlur(() => this.toggleCaptureFormat())}
|
|
|
|
|
>
|
|
|
|
|
{this.state.captureFormat}
|
|
|
|
|
</button>
|
|
|
|
|
{renderHelpSheet(this.state.helpVisible)}
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{renderHelpSheet(this.state.helpVisible)}
|
|
|
|
|
</div>);
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|