fix: enable the bani controller in multipane

KhalisFoundation · Jun 12, 2024 · 7fc3386 · 7fc3386
1 parent 6749dd7
commit 7fc3386
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 56 deletions.
diff --git a/www/main/addons/bani-controller/components/BaniController.jsx b/www/main/addons/bani-controller/components/BaniController.jsx
@@ -77,7 +77,6 @@ const BaniController = ({ onScreenClose, className }) => {
     content2FontSize,
     content3FontSize,
     baniLength,
-    currentWorkspace,
     // mangalPosition,
   } = useStoreState((state) => state.userSettings);
 
@@ -231,12 +230,6 @@ const BaniController = ({ onScreenClose, className }) => {
                 <div className="sttm-loader" />
               ) : (
                 <>
-                  {currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE') && (
-                    <p className="error-msg">
-                      <i className="fa-solid fa-triangle-exclamation"></i>
-                      <span>Bani controller is not supported in Multi-Pane workspace.</span>
-                    </p>
-                  )}
                   <div className="sync-code-label">
                     {codeLabel || i18n.t('TOOLBAR.SYNC_CONTROLLER.UNIQUE_CODE_LABEL')}
                   </div>

diff --git a/www/main/navigator/search/hooks/use-new-shabad.jsx b/www/main/navigator/search/hooks/use-new-shabad.jsx
@@ -20,7 +20,7 @@ export const useNewShabad = () => {
     pane3,
   } = useStoreState((state) => state.navigator);
 
-  const { currentWorkspace } = useStoreState((state) => state.userSettings);
+  const { currentWorkspace, defaultPaneId } = useStoreState((state) => state.userSettings);
 
   const {
     setActiveShabadId,
@@ -38,8 +38,21 @@ export const useNewShabad = () => {
   } = useStoreActions((actions) => actions.navigator);
 
   return (newSelectedShabad, newSelectedVerse, newSearchVerse, multiPaneId = false) => {
+    let shabadPane;
     if (currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE')) {
-      switch (multiPaneId) {
+      if (!multiPaneId) {
+        const existingPane = [pane1, pane2, pane3].filter(
+          (pane) => pane.activeShabad === newSelectedShabad,
+        );
+        if (existingPane.length > 0) {
+          [shabadPane] = existingPane;
+        } else {
+          shabadPane = defaultPaneId;
+        }
+      } else {
+        shabadPane = multiPaneId;
+      }
+      switch (shabadPane) {
         case 1:
           setPane1({
             ...pane1,
@@ -95,6 +108,17 @@ export const useNewShabad = () => {
     if (activeShabadId !== newSelectedShabad) {
       if (currentWorkspace !== i18n.t('WORKSPACES.MULTI_PANE')) {
         setActiveShabadId(newSelectedShabad);
+        if (window.socket !== undefined && window.socket !== null) {
+          window.socket.emit('data', {
+            type: 'shabad',
+            host: 'sttm-desktop',
+            id: newSelectedShabad,
+            shabadid: newSelectedShabad, // @deprecated
+            highlight: newSelectedVerse,
+            homeId: newSelectedVerse,
+            verseChange: false,
+          });
+        }
       }
 
       // initialVerseId is the verse which is stored in history
@@ -111,20 +135,5 @@ export const useNewShabad = () => {
     if (newSelectedVerse && activeVerseId !== newSelectedVerse) {
       setActiveVerseId(newSelectedVerse);
     }
-    if (
-      window.socket !== undefined &&
-      window.socket !== null &&
-      currentWorkspace !== i18n.t('WORKSPACES.MULTI_PANE')
-    ) {
-      window.socket.emit('data', {
-        type: 'shabad',
-        host: 'sttm-desktop',
-        id: newSelectedShabad,
-        shabadid: newSelectedShabad, // @deprecated
-        highlight: newSelectedVerse,
-        homeId: newSelectedVerse,
-        verseChange: false,
-      });
-    }
   };
 };
diff --git a/www/main/navigator/shabad/ShabadText.jsx b/www/main/navigator/shabad/ShabadText.jsx
@@ -10,13 +10,14 @@ import {
   changeHomeVerse,
   changeVerse,
   filterRequiredVerseItems,
+  filterOverlayVerseItems,
   udpateHistory,
   scrollToVerse,
   saveToHistory,
   copyToClipboard,
   intelligentNextVerse,
+  sendToBaniController,
 } from './utils';
-import { filterOverlayVerseItems } from './utils/filter-verse-items';
 
 const baniLengthCols = {
   short: 'existsSGPC',
@@ -32,11 +33,15 @@ export const ShabadText = ({
   setPaneAttributes,
   currentPane,
 }) => {
+  const [previousVerseIndex, setPreviousIndex] = useState();
   const [filteredItems, setFilteredItems] = useState([]);
+  const [activeVerse, setActiveVerse] = useState({});
   const [rawVerses, setRawVerses] = useState([]);
-  const [previousVerseIndex, setPreviousIndex] = useState();
   const [atHome, setHome] = useState(true);
 
+  const virtuosoRef = useRef(null);
+  const activeVerseRef = useRef(null);
+
   const {
     activeVerseId,
     isMiscSlide,
@@ -66,13 +71,10 @@ export const ShabadText = ({
     setCeremonyId,
     setIsCeremonyBani,
     setIsSundarGutkaBani,
+    savedCrossPlatformId,
   } = useStoreActions((actions) => actions.navigator);
-  const [activeVerse, setActiveVerse] = useState({});
-
-  const virtuosoRef = useRef(null);
-  const activeVerseRef = useRef(null);
 
-  const updateTraversedVerse = (newTraversedVerse, verseIndex) => {
+  const updateTraversedVerse = (newTraversedVerse, verseIndex, crossPlatformId = null) => {
     if (isMiscSlide) {
       setIsMiscSlide(false);
     }
@@ -102,6 +104,14 @@ export const ShabadText = ({
       setPaneAttributes,
       paneAttributes,
     });
+    sendToBaniController(crossPlatformId, filteredItems, newTraversedVerse, baniLength, {
+      isSundarGutkaBani,
+      sundarGutkaBaniId,
+      isCeremonyBani,
+      ceremonyId,
+      activeShabadId,
+      paneAttributes,
+    });
   };
 
   const updateHomeVerse = (verseIndex) => {
@@ -175,6 +185,15 @@ export const ShabadText = ({
     }
   }, [filteredItems]);
 
+  useEffect(() => {
+    const baniVerseIndex = filteredItems.findIndex(
+      (obj) => obj.crossPlatformId === savedCrossPlatformId,
+    );
+    if (baniVerseIndex >= 0) {
+      updateTraversedVerse(filteredItems[baniVerseIndex].ID, baniVerseIndex);
+    }
+  }, [savedCrossPlatformId]);
+
   useEffect(() => {
     const overlayVerse = filterOverlayVerseItems(rawVerses, activeVerseId);
     ipcRenderer.send(
@@ -184,7 +203,16 @@ export const ShabadText = ({
         live: liveFeed,
       }),
     );
-  }, [activeShabadId, activeVerseId]);
+    if ([activeShabadId, sundarGutkaBaniId, ceremonyId].includes(paneAttributes.activeShabad)) {
+      setPaneAttributes({
+        ...paneAttributes,
+        activeVerse: activeVerseId,
+      });
+      const verseIndex = filteredItems.findIndex((verse) => verse.verseId === activeVerseId);
+      if (verseIndex >= 0) setActiveVerse({ [verseIndex]: activeVerseId });
+      scrollToVerse(activeVerseId, filteredItems, virtuosoRef);
+    }
+  }, [activeShabadId, activeVerseId, sundarGutkaBaniId, ceremonyId]);
 
   const getVerse = (direction) => {
     let verseIndex = null;

diff --git a/www/main/navigator/shabad/utils/change-verse.js b/www/main/navigator/shabad/utils/change-verse.js
@@ -100,34 +100,34 @@ export const sendToBaniController = (
   if (window.socket !== undefined && window.socket !== null) {
     let baniVerse;
     if (!crossPlatformId) {
-      baniVerse = activeShabad.find((obj) => obj.ID === newTraversedVerse);
+      baniVerse = activeShabad.find((obj) => obj.verseId === newTraversedVerse);
     }
-    if (isSundarGutkaBani) {
+    if (isSundarGutkaBani && sundarGutkaBaniId) {
       window.socket.emit('data', {
         host: 'sttm-desktop',
         type: 'bani',
-        id: sundarGutkaBaniId,
-        shabadid: sundarGutkaBaniId, // @deprecated
-        highlight: crossPlatformId || baniVerse.crossPlatformID,
+        id: paneAttributes.activeShabad,
+        shabadid: paneAttributes.activeShabad, // @deprecated
+        highlight: crossPlatformId || baniVerse.crossPlatformId,
         baniLength,
         // mangalPosition,
         verseChange: false,
       });
-    } else if (isCeremonyBani) {
+    } else if (isCeremonyBani && ceremonyId) {
       window.socket.emit('data', {
         host: 'sttm-desktop',
         type: 'ceremony',
-        id: ceremonyId,
-        shabadid: ceremonyId, // @deprecated
-        highlight: crossPlatformId || baniVerse.crossPlatformID,
+        id: paneAttributes.activeShabad,
+        shabadid: paneAttributes.activeShabad, // @deprecated
+        highlight: crossPlatformId || baniVerse.crossPlatformId,
         verseChange: false,
       });
-    } else {
+    } else if (activeShabadId) {
       window.socket.emit('data', {
         type: 'shabad',
         host: 'sttm-desktop',
-        id: activeShabadId,
-        shabadid: activeShabadId, // @deprecated
+        id: paneAttributes.activeShabad,
+        shabadid: paneAttributes.activeShabad, // @deprecated
         highlight: newTraversedVerse,
         homeId: paneAttributes.homeVerse,
         verseChange: false,

diff --git a/www/main/navigator/shabad/utils/index.js b/www/main/navigator/shabad/utils/index.js
@@ -4,7 +4,7 @@ export {
   udpateHistory,
   intelligentNextVerse,
 } from './change-verse';
-export { filterRequiredVerseItems } from './filter-verse-items';
+export { filterRequiredVerseItems, filterOverlayVerseItems } from './filter-verse-items';
 export { changeHomeVerse } from './change-home-verse';
 export { scrollToVerse } from './scroll-to-verse';
 export { saveToHistory } from './save-to-history';

diff --git a/www/src/scss/styles.scss b/www/src/scss/styles.scss
@@ -160,17 +160,6 @@ button {
   overflow: auto;
   position: fixed;
   width: calc(100% - 100px);
-
-  .error-msg{
-    i {
-      padding-right: 6px;
-    }
-    background: $rust-red;
-    border-radius: 6px;
-    color: white;
-    margin-top: 0;
-    padding: 6px;
-  }
 }
 
 .sundar-gutka-wrapper,