Add zooming functionality (#140)

src/main/preload/local-settings.ts

@@ -1,4 +1,4 @@
-import { ipcRenderer } from 'electron';
+import { ipcRenderer, webFrame } from 'electron';
 import Store from 'electron-store';
 
 const store = new Store();
@@ -23,10 +23,15 @@ const disableMediaKeys = () => {
   ipcRenderer.send('global-media-keys-disable');
 };
 
+const setZoomFactor = (zoomFactor: number) => {
+  webFrame.setZoomFactor(zoomFactor / 100);
+};
+
 export const localSettings = {
   disableMediaKeys,
   enableMediaKeys,
   get,
   restart,
   set,
+  setZoomFactor,
 };

src/renderer/features/settings/components/general/application-settings.tsx

@@ -1,10 +1,13 @@
-import { Select } from '/@/renderer/components';
+import isElectron from 'is-electron';
+import { NumberInput, Select } from '/@/renderer/components';
 import {
   SettingsSection,
   SettingOption,
 } from '/@/renderer/features/settings/components/settings-section';
 import { useGeneralSettings, useSettingsStoreActions } from '/@/renderer/store/settings.store';
 
+const localSettings = isElectron() ? window.electron.localSettings : null;
+
 const FONT_OPTIONS = [
   { label: 'Archivo', value: 'Archivo' },
   { label: 'Fredoka', value: 'Fredoka' },
@@ -53,6 +56,32 @@ export const ApplicationSettings = () => {
       isHidden: false,
       title: 'Font (Content)',
     },
+    {
+      control: (
+        <NumberInput
+          disabled={!isElectron()}
+          max={300}
+          min={50}
+          value={settings.zoomFactor}
+          onBlur={(e) => {
+            if (!e) return;
+            const newVal = e.currentTarget.value
+              ? Math.min(Math.max(Number(e.currentTarget.value), 50), 300)
+              : settings.zoomFactor;
+            setSettings({
+              general: {
+                ...settings,
+                zoomFactor: newVal,
+              },
+            });
+            localSettings.setZoomFactor(newVal);
+          }}
+        />
+      ),
+      description: 'Sets the application zoom factor in percent',
+      isHidden: false,
+      title: 'Zoom factor',
+    },
   ];
 
   return <SettingsSection options={options} />;

src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx

@@ -28,6 +28,8 @@ const BINDINGS_MAP: Record<BindingActions, string> = {
   volumeDown: 'Volume down',
   volumeMute: 'Volume mute',
   volumeUp: 'Volume up',
+  zoomIn: 'Zoom in',
+  zoomOut: 'Zoom out',
 };
 
 const HotkeysContainer = styled.div`
@@ -65,6 +67,8 @@ export const HotkeyManagerSettings = () => {
           else if (e.key === '/') keys.push('numpaddivide');
           else if (e.key === '.') keys.push('numpaddecimal');
           else keys.push(`numpad${e.key}`.toLowerCase());
+        } else if (e.key === '+') {
+          keys.push('equal');
         } else {
           keys.push(e.key?.toLowerCase());
         }

src/renderer/layouts/default-layout.tsx

@@ -5,11 +5,13 @@ import {
   useWindowSettings,
   useSettingsStore,
   useHotkeySettings,
+  useGeneralSettings,
+  useSettingsStoreActions,
 } from '/@/renderer/store/settings.store';
 import { Platform, PlaybackType } from '/@/renderer/types';
 import { MainContent } from '/@/renderer/layouts/default-layout/main-content';
 import { PlayerBar } from '/@/renderer/layouts/default-layout/player-bar';
-import { useHotkeys } from '@mantine/hooks';
+import { HotkeyItem, useHotkeys } from '@mantine/hooks';
 import { CommandPalette } from '/@/renderer/features/search/components/command-palette';
 import { useCommandPalette } from '/@/renderer/store';
 
@@ -52,8 +54,32 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
   const { windowBarStyle } = useWindowSettings();
   const { opened, ...handlers } = useCommandPalette();
   const { bindings } = useHotkeySettings();
+  const localSettings = isElectron() ? window.electron.localSettings : null;
+  const settings = useGeneralSettings();
+  const { setSettings } = useSettingsStoreActions();
 
-  useHotkeys([[bindings.globalSearch.hotkey, () => handlers.open()]]);
+  const updateZoom = (increase: number) => {
+    const newVal = settings.zoomFactor + increase;
+    if (newVal > 300 || newVal < 50 || !isElectron()) return;
+    setSettings({
+      general: {
+        ...settings,
+        zoomFactor: newVal,
+      },
+    });
+    localSettings?.setZoomFactor(settings.zoomFactor);
+  };
+  localSettings?.setZoomFactor(settings.zoomFactor);
+
+  const zoomHotkeys: HotkeyItem[] = [
+    [bindings.zoomIn.hotkey, () => updateZoom(5)],
+    [bindings.zoomOut.hotkey, () => updateZoom(-5)],
+  ];
+
+  useHotkeys([
+    [bindings.globalSearch.hotkey, () => handlers.open()],
+    ...(isElectron() ? zoomHotkeys : []),
+  ]);
 
   return (
     <>

src/renderer/store/settings.store.ts

@@ -95,6 +95,8 @@ export enum BindingActions {
   TOGGLE_REPEAT = 'toggleRepeat',
   VOLUME_DOWN = 'volumeDown',
   VOLUME_UP = 'volumeUp',
+  ZOOM_IN = 'zoomIn',
+  ZOOM_OUT = 'zoomOut',
 }
 
 export interface SettingsState {
@@ -116,6 +118,7 @@ export interface SettingsState {
     themeDark: AppTheme;
     themeLight: AppTheme;
     volumeWheelStep: number;
+    zoomFactor: number;
   };
   hotkeys: {
     bindings: Record<BindingActions, { allowGlobal: boolean; hotkey: string; isGlobal: boolean }>;
@@ -185,6 +188,7 @@ const initialState: SettingsState = {
     themeDark: AppTheme.DEFAULT_DARK,
     themeLight: AppTheme.DEFAULT_LIGHT,
     volumeWheelStep: 5,
+    zoomFactor: 100,
   },
   hotkeys: {
     bindings: {
@@ -205,6 +209,8 @@ const initialState: SettingsState = {
       volumeDown: { allowGlobal: true, hotkey: '', isGlobal: false },
       volumeMute: { allowGlobal: true, hotkey: '', isGlobal: false },
       volumeUp: { allowGlobal: true, hotkey: '', isGlobal: false },
+      zoomIn: { allowGlobal: true, hotkey: '', isGlobal: false },
+      zoomOut: { allowGlobal: true, hotkey: '', isGlobal: false },
     },
     globalMediaHotkeys: true,
   },