diff --git a/www/main/addons/bani-controller/components/BaniController.jsx b/www/main/addons/bani-controller/components/BaniController.jsx index c91f16114..bbab1c1a5 100644 --- a/www/main/addons/bani-controller/components/BaniController.jsx +++ b/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]); diff --git a/www/main/addons/bani-controller/hooks/use-socket-listeners.js b/www/main/addons/bani-controller/hooks/use-socket-listeners.js index 8c3e60dea..d70fd3417 100644 --- a/www/main/addons/bani-controller/hooks/use-socket-listeners.js +++ b/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', diff --git a/www/main/navigator/search/hooks/use-new-shabad.jsx b/www/main/navigator/search/hooks/use-new-shabad.jsx index f6d404515..c41421da8 100644 --- a/www/main/navigator/search/hooks/use-new-shabad.jsx +++ b/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'); diff --git a/www/main/navigator/search/utils/update-multipane.js b/www/main/navigator/search/utils/update-multipane.js new file mode 100644 index 000000000..de78d7e9b --- /dev/null +++ b/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; diff --git a/www/main/navigator/shabad/ShabadContent.jsx b/www/main/navigator/shabad/ShabadContent.jsx index 149653ea4..ef92f5a51 100644 --- a/www/main/navigator/shabad/ShabadContent.jsx +++ b/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); } diff --git a/www/main/navigator/shabad/ShabadText.jsx b/www/main/navigator/shabad/ShabadText.jsx index b006474f5..7b8f524c2 100644 --- a/www/main/navigator/shabad/ShabadText.jsx +++ b/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); } diff --git a/www/src/scss/navigator/common/_pane.scss b/www/src/scss/navigator/common/_pane.scss index bbff1c24f..0fb304c38 100644 --- a/www/src/scss/navigator/common/_pane.scss +++ b/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;