Improve simple mode #546

src/App.jsx

@@ -2188,7 +2188,7 @@ const App = memo(() => {
           simpleMode={simpleMode}
         />
 
-        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', height: 36 }}>
           <LeftMenu
             zoom={zoom}
             setZoom={setZoom}

src/LeftMenu.jsx

@@ -24,21 +24,23 @@ const LeftMenu = memo(({ zoom, setZoom, invertCutSegments, setInvertCutSegments,
 
   return (
     <div className="no-user-select" style={{ padding: '.3em', display: 'flex', alignItems: 'center' }}>
-      <div style={{ marginLeft: 5 }}>
-        <motion.div
-          animate={{ rotateX: invertCutSegments ? 0 : 180, width: 26, height: 26 }}
-          transition={{ duration: 0.3 }}
-        >
-          <FaYinYang
-            size={26}
-            role="button"
-            title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
-            onClick={onYinYangClick}
-          />
-        </motion.div>
-      </div>
+      <SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} />
 
-      <SimpleModeButton simpleMode={simpleMode} toggleSimpleMode={toggleSimpleMode} style={{ padding: '0 10px' }} />
+      {!simpleMode && (
+        <div style={{ marginLeft: 5 }}>
+          <motion.div
+            animate={{ rotateX: invertCutSegments ? 0 : 180, width: 26, height: 26 }}
+            transition={{ duration: 0.3 }}
+          >
+            <FaYinYang
+              size={26}
+              role="button"
+              title={invertCutSegments ? t('Discard selected segments') : t('Keep selected segments')}
+              onClick={onYinYangClick}
+            />
+          </motion.div>
+        </div>
+      )}
 
       {!simpleMode && (
         <>

src/NoFileLoaded.jsx

@@ -13,12 +13,14 @@ const NoFileLoaded = memo(({ topBarHeight, bottomBarHeight, mifiLink, toggleHelp
 
   return (
     <div className="no-user-select" style={{ position: 'fixed', left: 0, right: 0, top: topBarHeight, bottom: bottomBarHeight, border: '2vmin dashed #252525', color: '#505050', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}>
-      <div style={{ fontSize: '8vmin', textTransform: 'uppercase' }}>{t('DROP FILE(S)')}</div>
+      <div style={{ fontSize: '6vmin', textTransform: 'uppercase' }}>{t('DROP FILE(S)')}</div>
 
       <div style={{ fontSize: '4vmin', color: '#777', cursor: 'pointer' }} role="button" onClick={toggleHelp}>
         Press <kbd>H</kbd> for help
       </div>
 
+      <div style={{ fontSize: '3vmin', color: '#ccc' }}><kbd>←</kbd> <kbd>→</kbd> to seek timeline</div>
+
       <div style={{ fontSize: '3vmin', color: '#ccc' }}>
         <SetCutpointButton currentCutSeg={currentCutSeg} side="start" Icon={FaHandPointLeft} style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints
       </div>

src/TimelineControls.jsx

@@ -169,22 +169,22 @@ const TimelineControls = memo(({
 
       {!simpleMode && renderCutTimeInput('start')}
 
+      <IoMdKey
+        size={20}
+        role="button"
+        title={t('Seek previous keyframe')}
+        style={{ marginRight: 5, transform: 'matrix(-1, 0, 0, 1, 0, 0)' }}
+        onClick={() => seekClosestKeyframe(-1)}
+      />
+
       {!simpleMode && (
-        <>
-          <IoMdKey
-            size={20}
-            role="button"
-            title={t('Seek previous keyframe')}
-            style={{ transform: 'matrix(-1, 0, 0, 1, 0, 0)' }}
-            onClick={() => seekClosestKeyframe(-1)}
-          />
-          <FaCaretLeft
-            size={20}
-            role="button"
-            title={t('One frame back')}
-            onClick={() => shortStep(-1)}
-          />
-        </>
+        <FaCaretLeft
+          style={{ marginLeft: -5 }}
+          size={20}
+          role="button"
+          title={t('One frame back')}
+          onClick={() => shortStep(-1)}
+        />
       )}
 
       <PlayPause
@@ -194,22 +194,23 @@ const TimelineControls = memo(({
       />
 
       {!simpleMode && (
-        <>
-          <FaCaretRight
-            size={20}
-            role="button"
-            title={t('One frame forward')}
-            onClick={() => shortStep(1)}
-          />
-          <IoMdKey
-            size={20}
-            role="button"
-            title={t('Seek next keyframe')}
-            onClick={() => seekClosestKeyframe(1)}
-          />
-        </>
+        <FaCaretRight
+          style={{ marginRight: -5, marginLeft: -2 }}
+          size={20}
+          role="button"
+          title={t('One frame forward')}
+          onClick={() => shortStep(1)}
+        />
       )}
 
+      <IoMdKey
+        style={{ marginLeft: 5 }}
+        size={20}
+        role="button"
+        title={t('Seek next keyframe')}
+        onClick={() => seekClosestKeyframe(1)}
+      />
+
       {!simpleMode && renderCutTimeInput('end')}
 
       <SetCutpointButton currentCutSeg={currentCutSeg} side="end" Icon={FaHandPointRight} onClick={setCutEnd} title={t('Set cut end to current position')} style={{ marginLeft: 5 }} />