fix: resolve the bani controller white screen error

- fix sundar gutka banis when using multipane window
- fix the shabad pane style

Author: Gauravjeetsingh

www/main/addons/bani-controller/components/BaniController.jsx

@@ -16,6 +16,7 @@ import QrCode from './QrCode';
 import ConnectionSwitch from './ConnectionSwitch';
 import ZoomController from './ZoomController';
 import useSocketListeners from '../hooks/use-socket-listeners';
+import updateMultipane from '../../../navigator/search/utils/update-multipane';
 
 const remote = require('@electron/remote');
 
@@ -29,6 +30,7 @@ const BaniController = ({ onScreenClose, className }) => {
   const canvasRef = useRef(null);
 
   const changeActiveShabad = useNewShabad();
+  const updatePane = updateMultipane();
 
   // Local State
   const [codeLabel, setCodeLabel] = useState('');
@@ -58,6 +60,7 @@ const BaniController = ({ onScreenClose, className }) => {
     miscSlideText,
     isMiscSlideGurmukhi,
     savedCrossPlatformId,
+    lineNumber,
   } = useStoreState((state) => state.navigator);
 
   const {
@@ -206,7 +209,9 @@ const BaniController = ({ onScreenClose, className }) => {
       setMiscSlideText,
       setIsMiscSlideGurmukhi,
       setSavedCrossPlatformId,
+      lineNumber,
       setLineNumber,
+      updatePane,
     );
   }, [socketData]);
 

www/main/addons/bani-controller/hooks/use-socket-listeners.js

@@ -32,14 +32,16 @@ const useSocketListeners = (
   setMiscSlideText,
   setIsMiscSlideGurmukhi,
   setSavedCrossPlatformId,
+  lineNumber,
   setLineNumber,
+  updatePane,
 ) => {
   if (socketData) {
     const isPinCorrect = parseInt(socketData.pin, 10) === adminPin;
     const listenerActions = {
       shabad: (payload) => {
         changeActiveShabad(payload.shabadId, payload.verseId);
-        setLineNumber(payload.lineCount);
+        if (lineNumber !== payload.lineCount) setLineNumber(payload.lineCount);
         analytics.trackEvent({
           category: 'controller',
           action: 'shabad',
@@ -82,6 +84,7 @@ const useSocketListeners = (
             setSavedCrossPlatformId(payload.verseId);
           }
         }
+        updatePane('bani', payload.baniId);
         analytics.trackEvent({
           category: 'controller',
           action: 'bani',
@@ -101,6 +104,7 @@ const useSocketListeners = (
         if (ceremonyId !== payload.ceremonyId) {
           setCeremonyId(payload.ceremonyId);
         }
+        updatePane('ceremony', payload.ceremonyId);
         analytics.trackEvent({
           category: 'controller',
           action: 'ceremony',

www/main/navigator/search/hooks/use-new-shabad.jsx

@@ -1,4 +1,5 @@
 import { useStoreActions, useStoreState } from 'easy-peasy';
+import updateMultipane from '../utils/update-multipane';
 
 const remote = require('@electron/remote');
 
@@ -15,12 +16,9 @@ export const useNewShabad = () => {
     isMiscSlide,
     singleDisplayActiveTab,
     searchVerse,
-    pane1,
-    pane2,
-    pane3,
   } = useStoreState((state) => state.navigator);
 
-  const { currentWorkspace, defaultPaneId } = useStoreState((state) => state.userSettings);
+  const { currentWorkspace } = useStoreState((state) => state.userSettings);
 
   const {
     setActiveShabadId,
@@ -32,60 +30,12 @@ export const useNewShabad = () => {
     setIsCeremonyBani,
     setSingleDisplayActiveTab,
     setSearchVerse,
-    setPane1,
-    setPane2,
-    setPane3,
   } = useStoreActions((actions) => actions.navigator);
 
+  const updatePane = updateMultipane();
+
   return (newSelectedShabad, newSelectedVerse, newSearchVerse, multiPaneId = false) => {
-    let shabadPane;
-    if (currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE')) {
-      if (!multiPaneId) {
-        const existingPane =
-          [pane1, pane2, pane3].findIndex((pane) => pane.activeShabad === newSelectedShabad) + 1;
-        if (existingPane > 0) {
-          shabadPane = existingPane;
-        } else {
-          shabadPane = defaultPaneId;
-        }
-      } else {
-        shabadPane = multiPaneId;
-      }
-      switch (shabadPane) {
-        case 1:
-          setPane1({
-            ...pane1,
-            content: i18n.t('MULTI_PANE.SHABAD'),
-            activeShabad: newSelectedShabad,
-            baniType: 'shabad',
-            versesRead: [newSelectedVerse],
-            activeVerse: newSelectedVerse,
-          });
-          break;
-        case 2:
-          setPane2({
-            ...pane2,
-            content: i18n.t('MULTI_PANE.SHABAD'),
-            activeShabad: newSelectedShabad,
-            baniType: 'shabad',
-            versesRead: [newSelectedVerse],
-            activeVerse: newSelectedVerse,
-          });
-          break;
-        case 3:
-          setPane3({
-            ...pane3,
-            content: i18n.t('MULTI_PANE.SHABAD'),
-            activeShabad: newSelectedShabad,
-            baniType: 'shabad',
-            versesRead: [newSelectedVerse],
-            activeVerse: newSelectedVerse,
-          });
-          break;
-        default:
-          break;
-      }
-    }
+    updatePane('shabad', newSelectedShabad, newSelectedVerse, multiPaneId);
 
     if (singleDisplayActiveTab !== 'shabad') {
       setSingleDisplayActiveTab('shabad');

www/main/navigator/search/utils/update-multipane.js

@@ -0,0 +1,59 @@
+import { useStoreActions, useStoreState } from 'easy-peasy';
+
+const remote = require('@electron/remote');
+
+const { i18n } = remote.require('./app');
+
+const updateMultipane = () => {
+  const { pane1, pane2, pane3 } = useStoreState((state) => state.navigator);
+  const { setPane1, setPane2, setPane3 } = useStoreActions((actions) => actions.navigator);
+  const { defaultPaneId, currentWorkspace } = useStoreState((state) => state.userSettings);
+
+  const paneMap = {
+    1: { setPane: setPane1, pane: pane1 },
+    2: { setPane: setPane2, pane: pane2 },
+    3: { setPane: setPane3, pane: pane3 },
+  };
+
+  return (baniType, shabadId, verseId, multiPaneId = null) => {
+    if (currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE')) {
+      let shabadPane;
+      if (!multiPaneId) {
+        const existingPane =
+          [pane1, pane2, pane3].findIndex((pane) => pane.activeShabad === shabadId) + 1;
+        if (existingPane > 0) {
+          shabadPane = existingPane;
+        } else {
+          shabadPane = defaultPaneId;
+        }
+      } else {
+        shabadPane = multiPaneId;
+      }
+      const { pane, setPane } = paneMap[shabadPane];
+      let newAttributes;
+
+      if (verseId) {
+        newAttributes = {
+          ...pane,
+          content: i18n.t('MULTI_PANE.SHABAD'),
+          activeShabad: shabadId,
+          baniType,
+          versesRead: [verseId],
+          activeVerse: verseId,
+        };
+      } else {
+        newAttributes = {
+          ...pane,
+          content: i18n.t('MULTI_PANE.SHABAD'),
+          activeShabad: shabadId,
+          baniType,
+        };
+      }
+      if (pane !== newAttributes) {
+        setPane(newAttributes);
+      }
+    }
+  };
+};
+
+export default updateMultipane;

www/main/navigator/shabad/ShabadContent.jsx

@@ -501,7 +501,7 @@ const ShabadContent = () => {
         live: liveFeed,
       }),
     );
-    if (lineNumber !== null && filteredItems[lineNumber - 1].verseId === activeVerseId) {
+    if (lineNumber !== null && filteredItems[lineNumber - 1]?.verseId === activeVerseId) {
       setActiveVerse({ [lineNumber - 1]: activeVerseId });
       scrollToVerse(activeVerseId, filteredItems, virtuosoRef);
     }

www/main/navigator/shabad/ShabadText.jsx

@@ -211,7 +211,7 @@ export const ShabadText = ({
       (isSundarGutkaBani && sundarGutkaBaniId === paneAttributes.activeShabad) ||
       (!isSundarGutkaBani && !isCeremonyBani && activeShabadId === paneAttributes.activeShabad)
     ) {
-      if (lineNumber !== null && filteredItems[lineNumber - 1].verseId === activeVerseId) {
+      if (lineNumber !== null && filteredItems[lineNumber - 1]?.verseId === activeVerseId) {
         setActiveVerse({ [lineNumber - 1]: activeVerseId });
         scrollToVerse(activeVerseId, filteredItems, virtuosoRef);
       }

www/src/scss/navigator/common/_pane.scss

@@ -29,11 +29,15 @@
   margin: 0;
   padding: 0 10px;
 
+  .shabad-pane-header {
+    height: 40px;
+  }
+
   .shabad-pn {
       display: inline-block;
       font-size: 1.1rem;
       width: 36px;
-      height: 36px;
+      height: 40px;
       text-align: center;
       line-height: 36px;
       margin-left:0px;