use formatTimecode more places #878

package.json

@@ -70,7 +70,6 @@
     "p-map": "^4.0.0",
     "patch-package": "^6.2.1",
     "pify": "^5.0.0",
-    "pretty-ms": "^7.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-hammerjs": "^1.0.1",

src/App.jsx

@@ -426,15 +426,15 @@ const App = memo(() => {
     return Math.floor(sec * detectedFps);
   }, [detectedFps]);
 
-  const formatTimecode = useCallback((sec) => {
+  const formatTimecode = useCallback(({ seconds, shorten }) => {
     if (timecodeFormat === 'framesTotal') {
-      const frameCount = getFrameCount(sec);
+      const frameCount = getFrameCount(seconds);
       return frameCount != null ? frameCount : '';
     }
     if (timecodeFormat === 'timecodeWithFramesFraction') {
-      return formatDuration({ seconds: sec, fps: detectedFps });
+      return formatDuration({ seconds, fps: detectedFps, shorten });
     }
-    return formatDuration({ seconds: sec });
+    return formatDuration({ seconds, shorten });
   }, [detectedFps, timecodeFormat, getFrameCount]);
 
   useEffect(() => {

src/SegmentList.jsx

@@ -1,5 +1,4 @@
 import React, { memo, useMemo, useRef, useCallback } from 'react';
-import prettyMs from 'pretty-ms';
 import { FaSave, FaPlus, FaMinus, FaTag, FaSortNumericDown, FaAngleRight, FaCheck, FaTimes } from 'react-icons/fa';
 import { AiOutlineSplitCells } from 'react-icons/ai';
 import { motion } from 'framer-motion';
@@ -71,7 +70,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
     return <b style={{ color: 'white', padding: '0 4px', marginRight: 3, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
   }
 
-  const timeStr = useMemo(() => `${formatTimecode(seg.start)} - ${formatTimecode(seg.end)}`, [seg.start, seg.end, formatTimecode]);
+  const timeStr = useMemo(() => `${formatTimecode({ seconds: seg.start })} - ${formatTimecode({ seconds: seg.end })}`, [seg.start, seg.end, formatTimecode]);
 
   function onDoubleClick() {
     if (invertCutSegments) return;
@@ -103,7 +102,7 @@ const Segment = memo(({ seg, index, currentSegIndex, formatTimecode, getFrameCou
       </div>
       <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
       <div style={{ fontSize: 13 }}>
-        {t('Duration')} {prettyMs(durationMs)}
+        {t('Duration')} {formatTimecode({ seconds: duration, shorten: true })}
       </div>
       <div style={{ fontSize: 12 }}>
         <Trans>{{ durationMsFormatted }} ms, {{ frameCount }} frames</Trans>
@@ -172,6 +171,8 @@ const SegmentList = memo(({
       return <Icon size={24} title={segmentExportEnabled ? t('Include this segment in export') : t('Exclude this segment from export')} style={{ ...buttonBaseStyle, backgroundColor: currentSegActiveBgColor }} role="button" onClick={() => onExportSegmentEnabledToggle(currentCutSeg)} />;
     }
 
+    const segmentsTotal = enabledOutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0);
+
     return (
       <>
         <div style={{ display: 'flex', padding: '5px 0', alignItems: 'center', justifyContent: 'center', borderBottom: '1px solid grey' }}>
@@ -224,7 +225,7 @@ const SegmentList = memo(({
 
         <div style={{ padding: '5px 10px', boxSizing: 'border-box', borderBottom: '1px solid grey', borderTop: '1px solid grey', display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
           <div>{t('Segments total:')}</div>
-          <div>{formatTimecode(enabledOutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0))}</div>
+          <div>{formatTimecode({ seconds: segmentsTotal })}</div>
         </div>
       </>
     );

src/Timeline.jsx

@@ -246,6 +246,7 @@ const Timeline = memo(({
                   cutStart={seg.start}
                   cutEnd={seg.end}
                   invertCutSegments={invertCutSegments}
+                  formatTimecode={formatTimecode}
                 />
               );
             })}
@@ -275,7 +276,7 @@ const Timeline = memo(({
 
         <div style={{ position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none', zIndex: 2 }}>
           <div style={{ background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' }}>
-            {formatTimecode(displayTime)}
+            {formatTimecode({ seconds: displayTime })}
           </div>
         </div>
       </div>

src/TimelineSeg.jsx

@@ -4,12 +4,10 @@ import { FaTrashAlt } from 'react-icons/fa';
 
 import { mySpring } from './animations';
 
-import { formatDuration } from './util/duration';
-
 
 const TimelineSeg = memo(({
   duration, cutStart, cutEnd, isActive, segNum, name,
-  onSegClick, invertCutSegments, segBgColor, segActiveBgColor, segBorderColor,
+  onSegClick, invertCutSegments, segBgColor, segActiveBgColor, segBorderColor, formatTimecode,
 }) => {
   const cutSectionWidth = `${((cutEnd - cutStart) / duration) * 100}%`;
 
@@ -42,8 +40,9 @@ const TimelineSeg = memo(({
 
   const onThisSegClick = () => onSegClick(segNum);
 
-  const durationStr = cutEnd > cutStart ? `${formatDuration({ seconds: cutEnd - cutStart, shorten: true })} ` : '';
-  const title = `${durationStr}${name}`;
+  const title = [];
+  if (cutEnd > cutStart) title.push(`${formatTimecode({ seconds: cutEnd - cutStart, shorten: true })}`);
+  if (name) title.push(name);
 
   return (
     <motion.div
@@ -54,7 +53,7 @@ const TimelineSeg = memo(({
       exit={{ opacity: 0, scaleX: 0 }}
       role="button"
       onClick={onThisSegClick}
-      title={title}
+      title={title.join(' ')}
     >
       <div style={{ alignSelf: 'flex-start', flexShrink: 1, fontSize: 10, minWidth: 0, overflow: 'hidden' }}>{segNum + 1}</div>
 

yarn.lock

@@ -8415,11 +8415,6 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
-parse-ms@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/parse-ms/-/parse-ms-2.1.0.tgz#348565a753d4391fa524029956b172cb7753097d"
-  integrity sha512-kHt7kzLoS9VBZfUsiKjv43mr91ea+U05EyKkEtqp7vNbHxmaVuEqN7XxeEVnGrMtYOAxGrDElSi96K7EgO1zCA==
-
 parse5@6.0.1, parse5@^6.0.0:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/parse5/-/parse5-6.0.1.tgz#e1a1c085c569b3dc08321184f19a39cc27f7c30b"
@@ -9202,13 +9197,6 @@ pretty-format@^27.4.6:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
-pretty-ms@^7.0.1:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.1.tgz#7d903eaab281f7d8e03c66f867e239dc32fb73e8"
-  integrity sha512-973driJZvxiGOQ5ONsFhOF/DtzPMOMtgC11kCpUrPGMTgqp2q/1gwzCquocrN33is0VZ5GFHXZYMM9l6h67v2Q==
-  dependencies:
-    parse-ms "^2.1.0"
-
 prismjs@^1.25.0:
   version "1.26.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.26.0.tgz#16881b594828bb6b45296083a8cbab46b0accd47"