implement zoom in/out UI

https://github.com/mifi/lossless-cut/issues/691#issuecomment-2093637596

src/main/menu.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import electron, { BrowserWindow } from 'electron';
+import electron, { BrowserWindow, MenuItem, MenuItemConstructorOptions } from 'electron';
 import { t } from 'i18next';
 
 import { homepage, getReleaseUrl, licensesPage } from './constants.js';
@@ -15,8 +15,8 @@ const { Menu } = electron;
 export default ({ app, mainWindow, newVersion, isStoreBuild }: {
   app: Electron.App, mainWindow: BrowserWindow, newVersion?: string | undefined, isStoreBuild: boolean,
 }) => {
-  const menu = [
-    ...(process.platform === 'darwin' ? [{ role: 'appMenu' }] : []),
+  const menu: (MenuItemConstructorOptions | MenuItem)[] = [
+    ...(process.platform === 'darwin' ? [{ role: 'appMenu' as const }] : []),
 
     {
       label: esc(t('File')),
@@ -192,7 +192,7 @@ export default ({ app, mainWindow, newVersion, isStoreBuild }: {
         // Due to Apple Review Guidelines, we cannot include an Exit menu item here
         // Apple has their own Quit from the app menu
         ...(process.platform !== 'darwin' ? [
-          { type: 'separator' },
+          { type: 'separator' } as const,
           {
             label: esc(t('Exit')),
             click() {
@@ -214,7 +214,7 @@ export default ({ app, mainWindow, newVersion, isStoreBuild }: {
         { role: 'cut', label: esc(t('Cut')) },
         { role: 'copy', label: esc(t('Copy')) },
         { role: 'paste', label: esc(t('Paste')) },
-        { role: 'selectall', label: esc(t('Select All')) },
+        { role: 'selectAll', label: esc(t('Select All')) },
         { type: 'separator' },
         {
           label: esc(t('Tracks')),
@@ -336,15 +336,18 @@ export default ({ app, mainWindow, newVersion, isStoreBuild }: {
       label: esc(t('View')),
       submenu: [
         { role: 'togglefullscreen', label: esc(t('Toggle Full Screen')) },
+        { role: 'resetZoom', label: esc(t('Reset font size')) },
+        { role: 'zoomIn', label: esc(t('Increase font size')) },
+        { role: 'zoomOut', label: esc(t('Decrease font size')) },
       ],
     },
 
     // On Windows the windowMenu has a close Ctrl+W which clashes with File->Close shortcut
     ...(process.platform === 'darwin'
-      ? [{ role: 'windowMenu', label: esc(t('Window')) }]
+      ? [{ role: 'windowMenu' as const, label: esc(t('Window')) }]
       : [{
         label: esc(t('Window')),
-        submenu: [{ role: 'minimize', label: esc(t('Minimize')) }],
+        submenu: [{ role: 'minimize' as const, label: esc(t('Minimize')) }],
       }]
     ),
 
@@ -440,7 +443,7 @@ export default ({ app, mainWindow, newVersion, isStoreBuild }: {
           label: esc(t('Licenses')),
           click() { electron.shell.openExternal(licensesPage); },
         },
-        ...(process.platform !== 'darwin' ? [{ role: 'about', label: esc(t('About LosslessCut')) }] : []),
+        ...(process.platform !== 'darwin' ? [{ role: 'about' as const, label: esc(t('About LosslessCut')) }] : []),
       ],
     },
   ];
@@ -457,6 +460,5 @@ export default ({ app, mainWindow, newVersion, isStoreBuild }: {
     });
   }
 
-  // @ts-expect-error todo
   Menu.setApplicationMenu(Menu.buildFromTemplate(menu));
 };

src/renderer/src/NoFileLoaded.tsx

@@ -17,21 +17,21 @@ const NoFileLoaded = memo(({ mifiLink, currentCutSeg, onClick, darkMode }: {
   return (
     <div
       className="no-user-select"
-      style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, border: '1.5vmin dashed var(--gray3)', color: 'var(--gray12)', margin: '5vmin', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}
+      style={{ position: 'absolute', left: 0, right: 0, top: 0, bottom: 0, border: '.7em dashed var(--gray3)', color: 'var(--gray12)', margin: '2em', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', whiteSpace: 'nowrap' }}
       role="button"
       onClick={onClick}
     >
-      <div style={{ fontSize: '6vmin', textTransform: 'uppercase', color: 'var(--gray11)' }}>{t('DROP FILE(S)')}</div>
+      <div style={{ fontSize: '2em', textTransform: 'uppercase', color: 'var(--gray11)', marginBottom: '.2em' }}>{t('DROP FILE(S)')}</div>
 
-      <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)', marginBottom: '.3em' }}>
+      <div style={{ fontSize: '1.3em', color: 'var(--gray11)', marginBottom: '.1em' }}>
         <Trans>See <b>Help</b> menu for help</Trans>
       </div>
 
-      <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)' }}>
+      <div style={{ fontSize: '1.3em', color: 'var(--gray11)' }}>
         <Trans><SetCutpointButton currentCutSeg={currentCutSeg} side="start" style={{ verticalAlign: 'middle' }} /> <SetCutpointButton currentCutSeg={currentCutSeg} side="end" style={{ verticalAlign: 'middle' }} /> or <kbd>I</kbd> <kbd>O</kbd> to set cutpoints</Trans>
       </div>
 
-      <div style={{ fontSize: '2.5vmin', color: 'var(--gray11)' }} role="button" onClick={(e) => e.stopPropagation()}>
+      <div style={{ fontSize: '1.3em', color: 'var(--gray11)' }} role="button" onClick={(e) => e.stopPropagation()}>
         {simpleMode ? (
           <Trans><SimpleModeButton style={{ verticalAlign: 'middle' }} size={16} /> to show advanced view</Trans>
         ) : (
@@ -40,7 +40,7 @@ const NoFileLoaded = memo(({ mifiLink, currentCutSeg, onClick, darkMode }: {
       </div>
 
       {mifiLink && typeof mifiLink === 'object' && 'loadUrl' in mifiLink && typeof mifiLink.loadUrl === 'string' && mifiLink.loadUrl ? (
-        <div style={{ position: 'relative', margin: '3vmin', width: '60vmin', height: '20vmin' }}>
+        <div style={{ position: 'relative', margin: '.3em', width: '24em', height: '8em' }}>
           <iframe src={`${mifiLink.loadUrl}#dark=${darkMode ? 'true' : 'false'}`} title="iframe" style={{ background: 'rgba(0,0,0,0)', border: 'none', pointerEvents: 'none', width: '100%', height: '100%', position: 'absolute' }} />
           {/* eslint-disable-next-line jsx-a11y/interactive-supports-focus */}
           <div style={{ width: '100%', height: '100%', position: 'absolute', cursor: 'pointer' }} role="button" onClick={(e) => { e.stopPropagation(); if ('targetUrl' in mifiLink && typeof mifiLink.targetUrl === 'string') electron.shell.openExternal(mifiLink.targetUrl); }} />