Add UI Zoom Feature

- Add UI Zoom feature.
- Added relevent option in settings dialog.

Author: octavezero

src/renderer/actions/SettingsActions.ts

@@ -22,6 +22,7 @@ export function getSettings(): SettingsStoreModel {
             },
             system: {
                 unobtrusive: true,
+                zoomFactor: 1.0,
             },
             playlist: {
                 folder: true,
@@ -146,3 +147,16 @@ export async function setFolderPlaylistMode(
         store.store = draft.settings;
     });
 }
+
+export async function setZoomFactor(
+    value: number,
+    state?: AppStoreModel
+): Promise<AppStoreModel> {
+    return produce<AppStoreModel>(state, draft => {
+        const store = new electronStore<SettingsStoreModel>({
+            name: 'settings',
+        });
+        draft.settings.system.zoomFactor = value;
+        store.store = draft.settings;
+    });
+}

src/renderer/components/settings/System.tsx

@@ -5,6 +5,8 @@ import { Button } from '../elements/Button';
 import AppStore from '../../stores/AppStore';
 import Notifications from '../../libraries/Notifications';
 import { Checkbox } from '../elements/Checkbox';
+import { Icon } from '../elements/Icon';
+import { webFrame } from 'electron';
 
 export interface SystemSettingsProps {
     store: AppStore;
@@ -24,10 +26,54 @@ export default class SystemSettings extends React.Component<
         this.props.store.settings.setUnobtrusiveMode(checked);
     };
 
+    handleZoomPlus = () => {
+        if (webFrame.getZoomFactor() < 4) {
+            let value = parseFloat((webFrame.getZoomFactor() + 0.1).toFixed(1));
+            webFrame.setZoomFactor(value);
+            this.props.store.settings.setZoomFactor(value);
+        }
+    };
+
+    handleZoomMinus = () => {
+        if (webFrame.getZoomFactor() > 0) {
+            let value = parseFloat((webFrame.getZoomFactor() - 0.1).toFixed(1));
+            webFrame.setZoomFactor(value);
+            this.props.store.settings.setZoomFactor(value);
+        }
+    };
+
+    handleResetZoom = () => {
+        webFrame.setZoomFactor(1);
+    };
+
     render() {
         const { store } = this.props;
         return (
             <div className="system-settings">
+                <label>User Interface Zoom</label>
+                <div className="settings-zoom">
+                    <Button
+                        type="link"
+                        icon={true}
+                        onClick={this.handleZoomMinus}>
+                        <Icon size="16" icon="minus" />
+                    </Button>
+                    <Textbox
+                        value={`${(
+                            store.state.settings.system.zoomFactor * 100
+                        ).toFixed()}%`}
+                        readOnly
+                    />
+                    <Button
+                        type="link"
+                        icon={true}
+                        onClick={this.handleZoomPlus}>
+                        <Icon size="16" icon="plus" />
+                    </Button>
+                    <Button type="default" onClick={this.handleResetZoom}>
+                        Reset Zoom
+                    </Button>
+                </div>
                 <div className="settings-banner">
                     <h5>
                         These settings will work only after restarting the app

src/renderer/stores/AppContext.tsx

@@ -9,6 +9,7 @@ import * as SearchActions from '../actions/SearchActions';
 import * as PlaylistActions from '../actions/PlaylistActions';
 import AppStore, { ActionsModel } from './AppStore';
 import Player from '../libraries/Player';
+import { webFrame } from 'electron';
 
 const defaultValue: AppStore = {
     state: {
@@ -49,6 +50,7 @@ export class AppStoreProvider extends React.Component<any, AppStoreModel> {
         this.state = defaultValue.state;
         Player.player.muted = defaultValue.state.settings.player.mute;
         Player.setVolume(defaultValue.state.settings.player.volume);
+        webFrame.setZoomFactor(defaultValue.state.settings.system.zoomFactor);
 
         this.actions = {
             init: null,

src/renderer/stores/AppStoreModel.ts

@@ -37,6 +37,7 @@ export interface SettingsStoreModel {
     };
     system: {
         unobtrusive: boolean;
+        zoomFactor: number;
     };
     playlist: {
         folder: boolean;

src/renderer/styles/containers/_settings.scss

@@ -24,3 +24,13 @@
     background: var(--accent-base-color);
     color: var(--text-accent-color);
 }
+
+.settings-zoom {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .textbox {
+        flex: 1;
+    }
+}