add total time

src/SegmentList.jsx

@@ -3,65 +3,73 @@ import prettyMs from 'pretty-ms';
 import { FaSave } from 'react-icons/fa';
 import { motion } from 'framer-motion';
 
-import { saveColor } from './colors';
+import { saveColor, timelineBackground } from './colors';
 
 const SegmentList = memo(({
   formatTimecode, cutSegments, getFrameCount, getSegColors, onSegClick,
   currentSegIndex, invertCutSegments,
 }) => {
   if (!cutSegments && invertCutSegments) {
-    return <div>Make sure you have no overlapping segments.</div>;
+    return <div style={{ padding: '0 10px' }}>Make sure you have no overlapping segments.</div>;
   }
 
   if (!cutSegments || cutSegments.length === 0) {
-    return <div>No segments to export.</div>;
+    return <div style={{ padding: '0 10px' }}>No segments to export.</div>;
   }
 
   return (
     <Fragment>
-      <div style={{ fontSize: 14, marginBottom: 10 }}>Segments to export:</div>
-      {cutSegments.map((seg, index) => {
-        const duration = seg.end - seg.start;
-        const durationMs = duration * 1000;
+      <div style={{ padding: '0 10px', overflowY: 'scroll', flexGrow: 1 }}>
+        <div style={{ fontSize: 14, marginBottom: 10 }}>Segments to export:</div>
 
-        const isActive = !invertCutSegments && currentSegIndex === index;
-        const uuid = seg.uuid || `${seg.start}`;
+        {cutSegments.map((seg, index) => {
+          const duration = seg.end - seg.start;
+          const durationMs = duration * 1000;
 
-        function renderNumber() {
-          if (invertCutSegments) return <FaSave style={{ color: saveColor, marginRight: 5, verticalAlign: 'middle' }} size={14} />;
+          const isActive = !invertCutSegments && currentSegIndex === index;
+          const uuid = seg.uuid || `${seg.start}`;
 
-          const {
-            segBgColor, segBorderColor,
-          } = getSegColors(seg);
+          function renderNumber() {
+            if (invertCutSegments) return <FaSave style={{ color: saveColor, marginRight: 5, verticalAlign: 'middle' }} size={14} />;
 
-          return <b style={{ color: 'white', padding: '0 3px', marginRight: 5, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
-        }
+            const {
+              segBgColor, segBorderColor,
+            } = getSegColors(seg);
 
-        return (
-          <motion.div
-            role="button"
-            onClick={() => !invertCutSegments && onSegClick(index)}
-            key={uuid}
-            positionTransition
-            style={{ originY: 0, margin: '5px 0', border: `1px solid rgba(255,255,255,${isActive ? 1 : 0.3})`, padding: 5, borderRadius: 5 }}
-            initial={{ scaleY: 0 }}
-            animate={{ scaleY: 1 }}
-            exit={{ scaleY: 0 }}
-          >
-            <div style={{ fontSize: 13, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
-              {renderNumber()}
-              <span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
-            </div>
-            <div style={{ fontSize: 13 }}>
-              Duration {prettyMs(durationMs)}
-            </div>
-            <div style={{ fontSize: 12 }}>
-              ({Math.floor(durationMs)} ms, {getFrameCount(duration)} frames)
-            </div>
-            <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
-          </motion.div>
-        );
-      })}
+            return <b style={{ color: 'white', padding: '0 3px', marginRight: 5, background: segBgColor, border: `1px solid ${isActive ? segBorderColor : 'transparent'}`, borderRadius: 10, fontSize: 12 }}>{index + 1}</b>;
+          }
+
+          return (
+            <motion.div
+              role="button"
+              onClick={() => !invertCutSegments && onSegClick(index)}
+              key={uuid}
+              positionTransition
+              style={{ originY: 0, margin: '5px 0', border: `1px solid rgba(255,255,255,${isActive ? 1 : 0.3})`, padding: 5, borderRadius: 5 }}
+              initial={{ scaleY: 0 }}
+              animate={{ scaleY: 1 }}
+              exit={{ scaleY: 0 }}
+            >
+              <div style={{ fontSize: 13, whiteSpace: 'nowrap', color: 'white', marginBottom: 3 }}>
+                {renderNumber()}
+                <span>{formatTimecode(seg.start)} - {formatTimecode(seg.end)}</span>
+              </div>
+              <div style={{ fontSize: 13 }}>
+                Duration {prettyMs(durationMs)}
+              </div>
+              <div style={{ fontSize: 12 }}>
+                ({Math.floor(durationMs)} ms, {getFrameCount(duration)} frames)
+              </div>
+              <div style={{ fontSize: 12, color: 'white' }}>{seg.name}</div>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      <div style={{ padding: 10, boxSizing: 'border-box', background: timelineBackground, borderBottom: '1px solid grey', display: 'flex', justifyContent: 'space-between' }}>
+        <div>Total time:</div>
+        <div>{formatTimecode(cutSegments.reduce((acc, { start, end }) => (end - start) + acc, 0))}</div>
+      </div>
     </Fragment>
   );
 });

src/colors.js

@@ -1,3 +1,4 @@
 export const saveColor = 'hsl(158, 100%, 43%)';
 export const primaryColor = 'hsl(194, 78%, 47%)';
 export const controlsBackground = '#6b6b6b';
+export const timelineBackground = '#444';

src/renderer.jsx

@@ -22,7 +22,7 @@ import TimelineSeg from './TimelineSeg';
 import InverseCutSegment from './InverseCutSegment';
 import StreamsSelector from './StreamsSelector';
 import { loadMifiLink } from './mifi';
-import { primaryColor, controlsBackground } from './colors';
+import { primaryColor, controlsBackground, timelineBackground } from './colors';
 
 import loadingLottie from './7077-magic-flow.json';
 
@@ -1008,6 +1008,7 @@ const App = memo(() => {
       title: 'You opened a new file. What do you want to do?',
       icon: 'question',
       input: 'radio',
+      inputValue: 'open',
       showCancelButton: true,
       inputOptions: {
         open: 'Open the file instead of the current one. You will lose all work',
@@ -1677,7 +1678,7 @@ const App = memo(() => {
           </div>
 
           <div style={{
-            position: 'absolute', width: rightBarWidth, padding: '0 10px', right: 0, boxSizing: 'border-box', bottom: bottomBarHeight, top: topBarHeight, background: controlsBackground, color: 'rgba(255,255,255,0.7)', overflowY: 'scroll',
+            position: 'absolute', width: rightBarWidth, right: 0, bottom: bottomBarHeight, top: topBarHeight, background: controlsBackground, color: 'rgba(255,255,255,0.7)', display: 'flex', flexDirection: 'column',
           }}
           >
             <SegmentList
@@ -1708,7 +1709,7 @@ const App = memo(() => {
               ref={timelineScrollerRef}
             >
               <div
-                style={{ height: 36, width: `${zoom * 100}%`, position: 'relative', backgroundColor: '#444' }}
+                style={{ height: 36, width: `${zoom * 100}%`, position: 'relative', backgroundColor: timelineBackground }}
                 ref={timelineWrapperRef}
               >
                 {currentTimePos !== undefined && <motion.div transition={{ type: 'spring', damping: 70, stiffness: 800 }} animate={{ left: currentTimePos }} style={{ position: 'absolute', bottom: 0, top: 0, zIndex: 3, backgroundColor: 'black', width: currentTimeWidth, pointerEvents: 'none' }} />}