From d7ca25525c88338bd7e905e55f946bfbb4cb8703 Mon Sep 17 00:00:00 2001 From: Gelaechter <30231932+gelaechter@users.noreply.github.com> Date: Sun, 11 Jun 2023 19:45:13 +0000 Subject: [PATCH] Add zooming functionality (#140) --- src/main/preload/local-settings.ts | 7 ++++- .../general/application-settings.tsx | 31 ++++++++++++++++++- .../hotkeys/hotkey-manager-settings.tsx | 4 +++ src/renderer/layouts/default-layout.tsx | 30 ++++++++++++++++-- src/renderer/store/settings.store.ts | 6 ++++ 5 files changed, 74 insertions(+), 4 deletions(-) diff --git a/src/main/preload/local-settings.ts b/src/main/preload/local-settings.ts index c0764140..33ff14da 100644 --- a/src/main/preload/local-settings.ts +++ b/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, }; diff --git a/src/renderer/features/settings/components/general/application-settings.tsx b/src/renderer/features/settings/components/general/application-settings.tsx index 60f763ba..91dfd450 100644 --- a/src/renderer/features/settings/components/general/application-settings.tsx +++ b/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: ( + { + 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 ; diff --git a/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx b/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx index d933f945..5c513b61 100644 --- a/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx +++ b/src/renderer/features/settings/components/hotkeys/hotkey-manager-settings.tsx @@ -28,6 +28,8 @@ const BINDINGS_MAP: Record = { 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()); } diff --git a/src/renderer/layouts/default-layout.tsx b/src/renderer/layouts/default-layout.tsx index c656330d..0cab9056 100644 --- a/src/renderer/layouts/default-layout.tsx +++ b/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 ( <> diff --git a/src/renderer/store/settings.store.ts b/src/renderer/store/settings.store.ts index bea6f2b5..3e0de8ae 100644 --- a/src/renderer/store/settings.store.ts +++ b/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; @@ -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, },