Merge pull request #2029 from Gauravjeetsingh/akhand-path-issues

Resolve the scroll issue in Akhand path view

Author: Gauravjeetsingh

app.js

@@ -654,6 +654,15 @@ app.on('window-all-closed', () => {
   // }
 });
 
+ipcMain.on('sync-scroll', (event, data) => {
+  viewerWindow.webContents.executeJavaScript(`
+    document.querySelector('#verse-${data}').scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    });
+  `);
+});
+
 ipcMain.on('enable-wc-webview', (event, data) => {
   const webViewWC = webContents.fromId(parseInt(data, 10));
   remote.enable(webViewWC);

www/main/navigator/shabad/ShabadContent.jsx

@@ -50,9 +50,8 @@ const ShabadContent = () => {
   } = useStoreActions((state) => state.navigator);
 
   // mangalPosition was removed from below settings
-  const { autoplayToggle, autoplayDelay, baniLength, liveFeed, intelligentSpacebar } = useStoreState(
-    (state) => state.userSettings,
-  );
+  const { autoplayToggle, autoplayDelay, baniLength, liveFeed, intelligentSpacebar } =
+    useStoreState((state) => state.userSettings);
 
   const [activeShabad, setActiveShabad] = useState([]);
   const [activeVerse, setActiveVerse] = useState({});
@@ -102,21 +101,21 @@ const ShabadContent = () => {
       const regex = checkPauri.length > 1 ? /]\d*]/ : /]/;
       return versesNew
         ? versesNew.map((verse, index) => {
-          if (verse) {
-            const verseObj = {
-              ID: index,
-              verseId: verse.ID,
-              verse: verse.Gurmukhi,
-              english: verse.English ? verse.English : '',
-              lineNo: currentLine,
-              crossPlatformId: verse.crossPlatformID ? verse.crossPlatformID : '',
-            };
-            // eslint-disable-next-line no-unused-expressions
-            regex.test(verse.Gurmukhi) && currentLine++;
-            return verseObj;
-          }
-          return {};
-        })
+            if (verse) {
+              const verseObj = {
+                ID: index,
+                verseId: verse.ID,
+                verse: verse.Gurmukhi,
+                english: verse.English ? verse.English : '',
+                lineNo: currentLine,
+                crossPlatformId: verse.crossPlatformID ? verse.crossPlatformID : '',
+              };
+              // eslint-disable-next-line no-unused-expressions
+              regex.test(verse.Gurmukhi) && currentLine++;
+              return verseObj;
+            }
+            return {};
+          })
         : [];
     }
   };
@@ -292,7 +291,7 @@ const ShabadContent = () => {
         }
       }
       return nextVerseIndex;
-    }
+    };
 
     if (isSundarGutkaBani || isCeremonyBani) {
       openNextVerse();
@@ -305,7 +304,11 @@ const ShabadContent = () => {
       let nextVerseIndex = homeVerse;
 
       if (intelligentSpacebar) {
-        nextVerseIndex = handleIntelligentSpacebar(nextVerseIndex, mappedShabadArray, currentVerseIndex);
+        nextVerseIndex = handleIntelligentSpacebar(
+          nextVerseIndex,
+          mappedShabadArray,
+          currentVerseIndex,
+        );
       }
 
       const nextVerseId = mappedShabadArray[nextVerseIndex].verseId;

www/main/navigator/shabad/ShabadText.jsx

@@ -57,9 +57,8 @@ export const ShabadText = ({
     lineNumber,
   } = useStoreState((state) => state.navigator);
 
-  const { baniLength, liveFeed, autoplayDelay, autoplayToggle, intelligentSpacebar } = useStoreState(
-    (state) => state.userSettings,
-  );
+  const { baniLength, liveFeed, autoplayDelay, autoplayToggle, intelligentSpacebar } =
+    useStoreState((state) => state.userSettings);
 
   const {
     setActiveVerseId,

www/main/viewer/ShabadDeck/ShabadDeck.jsx

@@ -1,5 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useStoreState } from 'easy-peasy';
+import { ipcRenderer } from 'electron';
+
 import Slide from '../Slide/Slide';
 import QuickTools from '../Slide/QuickTools';
 import {
@@ -40,8 +42,27 @@ function ShabadDeck() {
     themeBg,
     currentWorkspace,
   } = useStoreState((state) => state.userSettings);
+
   const [activeVerse, setActiveVerse] = useState([]);
   const [nextVerse, setNextVerse] = useState({});
+  const verseRefKeys = useRef([]);
+
+  const observerOptions = {
+    root: null,
+    rootMargin: '0px',
+    threshold: 0.8,
+  };
+
+  const updateVerse = (entries) => {
+    entries.forEach((entry) => {
+      if (entry.isIntersecting) {
+        const visibleVerse = entry.target.dataset.verseid;
+        ipcRenderer.send('sync-scroll', visibleVerse);
+      }
+    });
+  };
+
+  const observer = new IntersectionObserver(updateVerse, observerOptions);
 
   const baniLengthCols = {
     short: 'existsSGPC',
@@ -50,6 +71,18 @@ function ShabadDeck() {
     extralong: 'existsBuddhaDal',
   };
 
+  const verseRefs = useRef({});
+
+  const updateVerseRef = (verseId, ref) => {
+    if (ref) {
+      verseRefs.current[verseId] = ref;
+      if (!verseRefKeys.current.includes(verseId)) {
+        verseRefKeys.current = [...verseRefKeys.current, verseId];
+      }
+      observer.observe(ref);
+    }
+  };
+
   const getCurrentThemeInstance = () => themes.find((theme) => theme.key === currentTheme);
 
   const bakeThemeStyles = (themeInstance, themeObj) => {
@@ -174,6 +207,19 @@ function ShabadDeck() {
     }
   }, [activeShabadId, activeVerseId, sundarGutkaBaniId, ceremonyId, akhandpatt, displayNextLine]);
 
+  useEffect(() => {
+    if (activeVerseId && akhandpatt) {
+      const verseDOM = verseRefs.current[activeVerseId];
+
+      if (verseDOM) {
+        verseDOM.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+        });
+      }
+    }
+  }, [activeVerseId, akhandpatt, verseRefKeys.current]);
+
   useEffect(() => {
     if (isMiscSlide) {
       if (activeVerse.length !== 0) {
@@ -207,6 +253,7 @@ function ShabadDeck() {
               nextLineObj={nextVerse}
               isMiscSlide={isMiscSlide}
               bgColor={applyOverlay()}
+              updateVerseRef={updateVerseRef}
             />
           ))
         ) : (

www/main/viewer/Slide/Slide.jsx

@@ -11,7 +11,7 @@ import SlideAnnouncement from './SlideAnnouncement';
 
 global.platform = require('../../desktop_scripts');
 
-const Slide = ({ verseObj, nextLineObj, isMiscSlide, bgColor }) => {
+const Slide = ({ verseObj, nextLineObj, isMiscSlide, bgColor, updateVerseRef }) => {
   const {
     larivaar,
     larivaarAssist,
@@ -129,8 +129,18 @@ const Slide = ({ verseObj, nextLineObj, isMiscSlide, bgColor }) => {
     verseObj,
   ]);
 
+  if (!verseObj) return null;
+
   return (
-    <div className="verse-slide-wrapper" style={{ background: bgColor }}>
+    <div
+      className="verse-slide-wrapper"
+      id={`verse-${verseObj.ID}`}
+      style={{ background: bgColor }}
+      ref={(el) => {
+        updateVerseRef(verseObj.ID, el);
+      }}
+      data-verseid={verseObj.ID}
+    >
       <CSSTransition in={showVerse} timeout={300} classNames="fade" unmountOnExit>
         <div className={`verse-slide ${leftAlign ? ' slide-left-align' : ''}`}>
           {isMiscSlide && <SlideAnnouncement getFontSize={getFontSize} isMiscSlide={isMiscSlide} />}
@@ -188,6 +198,7 @@ Slide.propTypes = {
   nextLineObj: PropTypes.object,
   isMiscSlide: PropTypes.bool,
   bgColor: PropTypes.string,
+  updateVerseRef: PropTypes.func,
 };
 
 export default Slide;

www/src/scss/viewer/verse-slide/_verse-slide.scss

@@ -3,6 +3,12 @@
     height: auto !important;
     padding: 10px !important;
   }
+
+  .verse-slide-wrapper {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+  }
 }
 
 .single-display-mode {