diff --git a/package.json b/package.json index 5e2bff8d..5ab3f0c5 100644 --- a/package.json +++ b/package.json @@ -52,8 +52,6 @@ }, "dependencies": { "axios": "^0.19.2", - "bluebird": "^3.4.6", - "classnames": "^2.2.5", "color": "^3.1.0", "electron-default-menu": "^1.0.0", "electron-is-dev": "^0.1.2", @@ -64,11 +62,11 @@ "fs-extra": "^8.1.0", "github-api": "^3.2.2", "hammerjs": "^2.0.8", - "jquery": "^3.4.0", "lodash": "^4.17.13", "mime-types": "^2.1.14", "moment": "^2.18.1", "mousetrap": "^1.6.1", + "p-map": "^3.0.0", "p-queue": "^6.2.0", "prop-types": "^15.6.2", "react": "^16.12.0", diff --git a/src/capture-frame.js b/src/capture-frame.js index 29dbcc74..fc9cfd8f 100644 --- a/src/capture-frame.js +++ b/src/capture-frame.js @@ -1,12 +1,9 @@ -const bluebird = require('bluebird'); -const fs = require('fs'); +const fs = require('fs-extra'); const mime = require('mime-types'); const strongDataUri = require('strong-data-uri'); const { formatDuration, getOutPath, transferTimestampsWithOffset } = require('./util'); -bluebird.promisifyAll(fs); - function getFrameFromVideo(video, format) { const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; @@ -26,7 +23,7 @@ async function captureFrame(customOutDir, filePath, video, currentTime, captureF const time = formatDuration({ seconds: currentTime, fileNameFriendly: true }); const outPath = getOutPath(customOutDir, filePath, `${time}.${ext}`); - await fs.writeFileAsync(outPath, buf); + await fs.writeFile(outPath, buf); const offset = -video.duration + currentTime; return transferTimestampsWithOffset(filePath, outPath, offset); } diff --git a/src/ffmpeg.js b/src/ffmpeg.js index 52d0f7df..ae38c17a 100644 --- a/src/ffmpeg.js +++ b/src/ffmpeg.js @@ -1,5 +1,5 @@ const execa = require('execa'); -const bluebird = require('bluebird'); +const pMap = require('p-map'); const path = require('path'); const fileType = require('file-type'); const readChunk = require('read-chunk'); @@ -262,7 +262,7 @@ async function autoMergeSegments({ customOutDir, sourceFile, segmentPaths, inclu const ext = path.extname(sourceFile); const outPath = getOutPath(customOutDir, sourceFile, `cut-merged-${new Date().getTime()}${ext}`); await mergeFiles({ paths: segmentPaths, outPath, includeAllStreams }); - await bluebird.map(segmentPaths, trash, { concurrency: 5 }); + await pMap(segmentPaths, trash, { concurrency: 5 }); } /** diff --git a/src/renderer.jsx b/src/renderer.jsx index 16f3a843..c50c31c2 100644 --- a/src/renderer.jsx +++ b/src/renderer.jsx @@ -6,7 +6,6 @@ import TimelineSeg from './TimelineSeg'; import { loadMifiLink } from './mifi'; const electron = require('electron'); // eslint-disable-line -const $ = require('jquery'); const Mousetrap = require('mousetrap'); const round = require('lodash/round'); const clamp = require('lodash/clamp'); @@ -17,7 +16,6 @@ const trash = require('trash'); const uuid = require('uuid'); const ReactDOM = require('react-dom'); -const classnames = require('classnames'); const { default: PQueue } = require('p-queue'); const { unlink, exists } = require('fs-extra'); @@ -84,6 +82,7 @@ const App = memo(() => { const [filePath, setFilePath] = useState(''); const [playbackRate, setPlaybackRate] = useState(1); const [detectedFps, setDetectedFps] = useState(); + const [streams, setStreams] = useState([]); // Global state const [stripAudio, setStripAudio] = useState(false); @@ -97,6 +96,7 @@ const App = memo(() => { const [mifiLink, setMifiLink] = useState(); const videoRef = useRef(); + const timelineWrapperRef = useRef(); function seekAbs(val) { const video = videoRef.current; @@ -321,10 +321,10 @@ const App = memo(() => { const jumpCutEnd = () => seekAbs(getApparentCutEndTime()); function handleTap(e) { - const $target = $('.timeline-wrapper'); - const parentOffset = $target.offset(); - const relX = e.srcEvent.pageX - parentOffset.left; - seekAbs((relX / $target[0].offsetWidth) * (duration || 0)); + const target = timelineWrapperRef.current; + const rect = target.getBoundingClientRect(); + const relX = e.srcEvent.pageX - (rect.left + document.body.scrollLeft); + seekAbs((relX / target.offsetWidth) * (duration || 0)); } const onPlaybackRateChange = () => setPlaybackRate(videoRef.current.playbackRate); @@ -486,10 +486,11 @@ const App = memo(() => { return; } - const { streams } = await ffmpeg.getAllStreams(fp); + const { streams: streamsNew } = await ffmpeg.getAllStreams(fp); // console.log('streams', streams); + setStreams(streamsNew); - streams.find((stream) => { + streamsNew.find((stream) => { const match = typeof stream.avg_frame_rate === 'string' && stream.avg_frame_rate.match(/^([0-9]+)\/([0-9]+)$/); if (stream.codec_type === 'video' && match) { const fps = parseInt(match[1], 10) / parseInt(match[2], 10); @@ -508,7 +509,7 @@ const App = memo(() => { setHtml5FriendlyPath(html5FriendlyPathRequested); } else if ( !(await checkExistingHtml5FriendlyFile(fp, 'slow-audio') || await checkExistingHtml5FriendlyFile(fp, 'slow') || await checkExistingHtml5FriendlyFile(fp, 'fast')) - && !doesPlayerSupportFile(streams) + && !doesPlayerSupportFile(streamsNew) ) { await createDummyVideo(fp); } @@ -931,26 +932,28 @@ const App = memo(() => { onPan={handleTap} options={{ recognizers: {} }} > -
- {currentTimePos !== undefined &&
} - - {cutSegments.map((seg, i) => ( - setCurrentSeg(currentSegNew)} - isActive={i === currentSeg} - isCutRangeValid={isCutRangeValid(i)} - duration={durationSafe} - cutStartTime={getCutStartTime(i)} - cutEndTime={getCutEndTime(i)} - apparentCutStart={getApparentCutStartTime(i)} - apparentCutEnd={getApparentCutEndTime(i)} - /> - ))} - -
{formatTimecode(offsetCurrentTime)}
+
+
+ {currentTimePos !== undefined &&
} + + {cutSegments.map((seg, i) => ( + setCurrentSeg(currentSegNew)} + isActive={i === currentSeg} + isCutRangeValid={isCutRangeValid(i)} + duration={durationSafe} + cutStartTime={getCutStartTime(i)} + cutEndTime={getCutEndTime(i)} + apparentCutStart={getApparentCutStartTime(i)} + apparentCutEnd={getApparentCutEndTime(i)} + /> + ))} + +
{formatTimecode(offsetCurrentTime)}
+
@@ -982,9 +985,7 @@ const App = memo(() => { onClick={() => shortStep(-1)} />