add padding option

app.js

@@ -5,7 +5,7 @@ const express = require('express');
 const fs = require('fs');
 const path = require('path');
 const { v4: uuidv4 } = require('uuid');
-const op = require('portfinder');
+const portfinder = require('portfinder');
 const i18n = require('i18next');
 const i18nBackend = require('i18next-node-fs-backend');
 const os = require('os');
@@ -337,7 +337,7 @@ function createViewer(ipcData) {
     remote.enable(viewerWindow.webContents);
     viewerWindow.webContents.on('did-finish-load', () => {
       viewerWindow.webContents.insertCSS(
-        '.slide-quicktools { display: none; } .verse-slide { padding-top: 40px !IMPORTANT }',
+        '.slide-tools { display: none; } .verse-slide { padding-top: 40px !IMPORTANT }',
       );
       viewerWindow.show();
       const [width, height] = viewerWindow.getSize();
@@ -464,7 +464,7 @@ const emptyOverlay = () => {
 const singleInstanceLock = app.requestSingleInstanceLock();
 
 const searchPorts = () => {
-  op.getPort(
+  portfinder.getPort(
     {
       // Re: http://www.sikhiwiki.org/index.php/Gurgadi
       ports: [1397, 1469, 1539, 1552, 1574, 1581, 1606, 1644, 1661, 1665, 1675, 1708],

www/locales/en.json

@@ -346,6 +346,7 @@
     "APP_LAYOUT": "App Layout",
     "PRESENTER_VIEW": "Presenter View",
     "QUICK_TOOLS": "Quick Tools",
+    "PADDING_TOOLS": "Padding Tools",
     "SHORTCUT_TRAY": "Shortcut Tray",
     "LIVE_FEED": "Live Feed Text Files",
     "OTHER_OPTIONS": "Other Options",

www/main/common/store/GlobalState.js

@@ -54,7 +54,14 @@ const GlobalState = createStore({
   },
   navigator: createNavigatorSettingsState(navigatorSettings),
   viewerSettings: {
+    containerPadding: {
+      left: 48,
+      top: 20,
+      right: 0,
+      bottom: 0,
+    },
     quickTools: false,
+    paddingTools: false,
     slideOrder: ['translation', 'teeka', 'transliteration'],
     setSlideOrder: action((state, payload) => {
       const oldValue = state.slideOrder;
@@ -86,6 +93,33 @@ const GlobalState = createStore({
       state.slideOrder = payload;
       return state;
     }),
+    setPadding: action((state, payload) => {
+      if (global.webview) {
+        global.webview.send(
+          'update-viewer-setting',
+          JSON.stringify({
+            payload,
+            actionName: 'setPadding',
+            settingType: 'viewerSettings',
+          }),
+        );
+      }
+
+      if (global.platform) {
+        global.platform.ipc.send(
+          'update-viewer-setting',
+          JSON.stringify({
+            payload,
+            actionName: 'setPadding',
+            settingType: 'viewerSettings',
+          }),
+        );
+      }
+      const newState = state;
+      newState.containerPadding[payload.type] = payload.value;
+
+      return newState;
+    }),
   },
   userSettings: createUserSettingsState(settings, savedSettings, userConfigPath),
   baniOverlay: createOverlaySettingsState(
@@ -95,7 +129,7 @@ const GlobalState = createStore({
   ),
 });
 
-global.platform.ipc.on('update-global-setting', (event, setting) => {
+global.platform.ipc.on('update-global-setting', (_event, setting) => {
   const { settingType, actionName, payload } = JSON.parse(setting);
   GlobalState.getActions()[settingType][actionName](payload);
 });

www/main/navigator/Navigator.jsx

@@ -25,8 +25,9 @@ const Navigator = () => {
   } = useSlides();
 
   let controllerMarkup = null;
+  const isCurrentWorkSpaceSingleDisplay = currentWorkspace === i18n.t('WORKSPACES.SINGLE_DISPLAY');
 
-  if (currentWorkspace === i18n.t('WORKSPACES.SINGLE_DISPLAY')) {
+  if (isCurrentWorkSpaceSingleDisplay) {
     controllerMarkup = (
       <div
         className={`single-display-controller ${
@@ -73,12 +74,12 @@ const Navigator = () => {
     <>
       <div
         className={
-          currentWorkspace === i18n.t('WORKSPACES.SINGLE_DISPLAY')
+          isCurrentWorkSpaceSingleDisplay
             ? 'single-display-viewer'
             : 'navigator-row'
         }
       >
-        {currentWorkspace !== i18n.t('WORKSPACES.SINGLE_DISPLAY') && <SearchPane />}
+        {!isCurrentWorkSpaceSingleDisplay && <SearchPane />}
         <ViewerPane />
       </div>
       {controllerMarkup}

www/main/viewer/ShabadDeck/ShabadDeck.jsx

@@ -10,6 +10,7 @@ import {
   loadShabad,
 } from '../../navigator/utils';
 import ViewerIcon from '../icons/ViewerIcon';
+import PaddingTools from '../Slide/PaddingTools';
 
 const os = require('os');
 const remote = require('@electron/remote');
@@ -40,6 +41,7 @@ function ShabadDeck() {
     themeBg,
     currentWorkspace,
   } = useStoreState((state) => state.userSettings);
+  const { containerPadding } = useStoreState((state) => state.viewerSettings);
   const [activeVerse, setActiveVerse] = useState([]);
   const [nextVerse, setNextVerse] = useState({});
 
@@ -181,6 +183,7 @@ function ShabadDeck() {
       }
     }
   }, [isMiscSlide]);
+
   return (
     <>
       {themeBg.type === 'video' && (
@@ -198,20 +201,31 @@ function ShabadDeck() {
         )}
         style={applyTheme()}
       >
-        {!minimizedBySingleDisplay && <QuickTools isMiscSlide={isMiscSlide} />}
-        {activeVerse.length ? (
-          activeVerse.map((activeVerseObj, index) => (
-            <Slide
-              key={index}
-              verseObj={activeVerseObj}
-              nextLineObj={nextVerse}
-              isMiscSlide={isMiscSlide}
-              bgColor={applyOverlay()}
-            />
-          ))
-        ) : (
-          <Slide isMiscSlide={isMiscSlide} bgColor={applyOverlay()} />
-        )}
+        <div className="slide-tools">
+          {!minimizedBySingleDisplay && <QuickTools isMiscSlide={isMiscSlide} />}
+          {!minimizedBySingleDisplay && <PaddingTools isMiscSlide={isMiscSlide} />}
+        </div>
+
+        <div
+          id="viewer-container-slide-wrapper"
+          style={{
+            padding: `${containerPadding.top}px ${containerPadding.right}px ${containerPadding.bottom}px ${containerPadding.left}px`,
+          }}
+        >
+          {activeVerse.length ? (
+            activeVerse.map((activeVerseObj, index) => (
+              <Slide
+                key={index}
+                verseObj={activeVerseObj}
+                nextLineObj={nextVerse}
+                isMiscSlide={isMiscSlide}
+                bgColor={applyOverlay()}
+              />
+            ))
+          ) : (
+            <Slide isMiscSlide={isMiscSlide} bgColor={applyOverlay()} />
+          )}
+        </div>
       </div>
       <ViewerIcon className="viewer-logo" />
     </>

www/main/viewer/Slide/PaddingTools.jsx

@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useStoreActions, useStoreState } from 'easy-peasy';
+import { convertToCamelCase } from '../../common/utils';
+
+const icons = [
+  {
+    name: 'minus',
+    actionName: 'Padding',
+  },
+  {
+    name: 'plus',
+    actionName: 'Padding',
+  },
+];
+const PADDING_VARIANTS = ['top', 'right', 'bottom', 'left'];
+const PADDING_MAX = 48;
+const PADDING_MIN = 0;
+
+const PaddingTools = (props) => {
+  const viewerSettingsStore = useStoreState((state) => state.viewerSettings);
+  const { setPaddingToolsOpen } = useStoreActions((state) => state.viewerSettings);
+
+  const createViewerSettingObject = ({ name, variant }) => {
+    const payload = { type: variant };
+    const currentPadding = parseInt(viewerSettingsStore.containerPadding[variant], 10);
+
+    if (name === 'minus') {
+      payload.value = currentPadding > PADDING_MIN ? currentPadding - 1 : PADDING_MIN;
+    } else if (name === 'plus') {
+      payload.value = currentPadding < PADDING_MAX ? currentPadding + 1 : PADDING_MAX;
+    }
+
+    return {
+      actionName: 'setPadding',
+      payload,
+      settingType: 'viewerSettings',
+    };
+  };
+
+  const createPaddingIcon = ({ name, variant }) => {
+    const currentPadding = parseInt(viewerSettingsStore.containerPadding[variant], 10);
+    const isMinusIcon = name === 'minus';
+    const isIconDisabled = isMinusIcon
+      ? currentPadding === PADDING_MIN
+      : currentPadding === PADDING_MAX;
+    return (
+      <i
+        disabled={isIconDisabled}
+        className={isMinusIcon ? 'fa fa-minus-circle' : 'fa fa-plus-circle'}
+        onClick={() => {
+          if (!isIconDisabled) {
+            const viewerSettingObj = createViewerSettingObject({ name, variant });
+            global.platform.ipc.send('update-global-setting', JSON.stringify(viewerSettingObj));
+          }
+        }}
+      />
+    );
+  };
+
+  const createPaddingChanger = (variant) => {
+    const iconValue = viewerSettingsStore.containerPadding[variant];
+
+    return (
+      <div className="paddingtool">
+        <h4 className="paddingtool-title">{`Padding-${convertToCamelCase(variant)}`}</h4>
+        <div className="paddingtool-icons">
+          {createPaddingIcon({ name: icons[0].name, variant })}
+          <p className="paddingtool-icon-value">{iconValue}</p>
+          {createPaddingIcon({ name: icons[1].name, variant })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={`slide-paddingtools`}>
+      <div
+        className="quicktool-header"
+        onClick={() => setPaddingToolsOpen(!viewerSettingsStore.paddingToolsOpen)}
+      >
+        Padding Tools
+        <i className={`fa fa-caret-${viewerSettingsStore.paddingToolsOpen ? 'up' : 'down'}`}></i>
+      </div>
+      {viewerSettingsStore.paddingToolsOpen && (
+        <div
+          className={`paddingtool-body paddingtool-${
+            props.isMiscSlide ? 'announcement' : 'gurbani'
+          }`}
+        >
+          {PADDING_VARIANTS.map((variant) => createPaddingChanger(variant))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+PaddingTools.propTypes = {
+  isMiscSlide: PropTypes.bool,
+};
+
+export default PaddingTools;

www/main/viewer/store/ViewerState.js

@@ -29,22 +29,41 @@ const ViewerState = createStore({
     ...createSettingsActions('navigator'),
   },
   viewerSettings: {
+    containerPadding: {
+      left: 48,
+      top: 20,
+      right: 0,
+      bottom: 0,
+    },
     quickToolsOpen: false,
+    paddingToolsOpen: false,
     slideOrder: ['translation', 'teeka', 'transliteration'],
     setSlideOrder: action((state, slideOrder) => ({
       ...state,
       slideOrder,
     })),
     setQuickToolsOpen: action((state, payload) => {
       const newState = state;
+      newState.paddingToolsOpen = false; // explictely making sure we are closing the paddingTools when setting the quick tools.
       newState.quickToolsOpen = payload;
       return newState;
     }),
+    setPaddingToolsOpen: action((state, payload) => {
+      const newState = state;
+      newState.quickToolsOpen = false; // explictely making sure we are closing the quickTools when setting the padding tools.
+      newState.paddingToolsOpen = payload;
+      return newState;
+    }),
+    setPadding: action((state, payload) => {
+      const newState = state;
+      newState.containerPadding[payload.type] = payload.value;
+      return newState;
+    }),
   },
 });
 
 // Whenever a setting is changed in GlobalState, call the respective action here as well.
-global.platform.ipc.on('update-viewer-setting', (event, setting) => {
+global.platform.ipc.on('update-viewer-setting', (_event, setting) => {
   const { actionName, payload, settingType } = JSON.parse(setting);
   ViewerState.getActions()[settingType][actionName](payload);
 });

www/src/scss/viewer/_viewer.scss

@@ -14,4 +14,9 @@
     transition: 0s border-radius linear;
     transition: 0.2s font-size ease-in;
   }
+
+  &-slide-wrapper {
+    height: 100%;
+    width: 100%;
+  }
 }