cleanup some deps

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",

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);
 }

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 });
 }
 
 /**

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: {} }}
         >
-          <div className="timeline-wrapper">
-            {currentTimePos !== undefined && <div className="current-time" style={{ left: currentTimePos }} />}
+          <div>
+            <div className="timeline-wrapper" ref={timelineWrapperRef}>
+              {currentTimePos !== undefined && <div className="current-time" style={{ left: currentTimePos }} />}
 
-            {cutSegments.map((seg, i) => (
-              <TimelineSeg
-                key={seg.uuid}
-                segNum={i}
-                color={seg.color}
-                onSegClick={currentSegNew => setCurrentSeg(currentSegNew)}
-                isActive={i === currentSeg}
-                isCutRangeValid={isCutRangeValid(i)}
-                duration={durationSafe}
-                cutStartTime={getCutStartTime(i)}
-                cutEndTime={getCutEndTime(i)}
-                apparentCutStart={getApparentCutStartTime(i)}
-                apparentCutEnd={getApparentCutEndTime(i)}
-              />
-            ))}
+              {cutSegments.map((seg, i) => (
+                <TimelineSeg
+                  key={seg.uuid}
+                  segNum={i}
+                  color={seg.color}
+                  onSegClick={currentSegNew => setCurrentSeg(currentSegNew)}
+                  isActive={i === currentSeg}
+                  isCutRangeValid={isCutRangeValid(i)}
+                  duration={durationSafe}
+                  cutStartTime={getCutStartTime(i)}
+                  cutEndTime={getCutEndTime(i)}
+                  apparentCutStart={getApparentCutStartTime(i)}
+                  apparentCutEnd={getApparentCutEndTime(i)}
+                />
+              ))}
 
-            <div id="current-time-display">{formatTimecode(offsetCurrentTime)}</div>
+              <div id="current-time-display">{formatTimecode(offsetCurrentTime)}</div>
+            </div>
           </div>
         </Hammer>
 
@@ -982,9 +985,7 @@ const App = memo(() => {
             onClick={() => shortStep(-1)}
           />
           <i
-            className={classnames({
-              button: true, fa: true, 'fa-pause': playing, 'fa-play': !playing,
-            })}
+            className={`button fa ${playing ? 'fa-pause' : 'fa-play'}`}
             role="button"
             tabIndex="0"
             onClick={playCommand}

yarn.lock

@@ -1237,11 +1237,6 @@ bluebird-lst@^1.0.9:
   dependencies:
     bluebird "^3.5.5"
 
-bluebird@^3.4.6:
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
-  integrity sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA==
-
 bluebird@^3.5.5:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.1.tgz#df70e302b471d7473489acf26a93d63b53f874de"
@@ -1471,11 +1466,6 @@ ci-info@^2.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
   integrity sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==
 
-classnames@^2.2.5:
-  version "2.2.5"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
-  integrity sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0=
-
 clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
@@ -3425,11 +3415,6 @@ isstream@~0.1.2:
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
-jquery@^3.4.0:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2"
-  integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw==
-
 js-base64@^2.1.9:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582"