Merge pull request #1983 from KhalisFoundation/dev

Beta release v9.2.2

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## New Updates
 
-### 9.2.2 - ਊਨਾ Release _June 18, 2024_
+### 9.2.2 - ਊਨਾ Release _June 24, 2024_
 
 #### Misc. bug fix and other improvements
 - Enhanced Bani Controller: Improved functionality when using the Bani Controller in a multipane workspace.

www/configs/navigator-settings.json

@@ -16,6 +16,8 @@
   "savedCrossPlatformId": null,
   "historyOrder": "newest",
 
+  "lineNumber": null,
+
 
   "isMiscSlide": false,
   "miscSlideText": "",

www/configs/overlay.json

@@ -4,7 +4,7 @@
       "subtitles": {
         "title": "SUBTITLES",
         "type": "title",
-        "subcategories": ["gurbani-options", "text-options"]
+        "subcategories": ["gurbani-options", "text-options", "text-format-options"]
       },
       "gurbani-options": {
         "title": "GURBANI",
@@ -16,6 +16,11 @@
         "type": "dropdown",
         "settings": ["text-color", "text-font", "text-size"]
       },
+      "text-format-options": {
+        "title": "TEXT_FORMAT",
+        "type": "icon-toggle",
+        "settings": ["text-format"]
+      },
       "background": {
         "title": "BACKGROUND",
         "type": "title",
@@ -129,6 +134,11 @@
         "step": 0.25,
         "disableOnChange": ["fit-text-switch"]
       },
+      "text-format": {
+        "title": "",
+        "type": "text-format-icon",
+        "initialValue": { "bold": false, "italic": false }
+      },
       "bg-color": {
         "title": "",
         "type": "color-input",

www/locales/en.json

@@ -21,6 +21,7 @@
     "SUBTITLES": "Subtitles",
     "GURBANI": "Gurbani",
     "TEXT": "Text",
+    "TEXT_FORMAT": "Text Formatting",
     "BACKGROUND": "Background",
     "DATE_AND_TIME": "Date & Time",
     "ANNOUNCEMENT": "Announcement",

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

@@ -69,6 +69,7 @@ const BaniController = ({ onScreenClose, className }) => {
     setMiscSlideText,
     setIsMiscSlideGurmukhi,
     setSavedCrossPlatformId,
+    setLineNumber,
   } = useStoreActions((state) => state.navigator);
 
   const {
@@ -205,6 +206,7 @@ const BaniController = ({ onScreenClose, className }) => {
       setMiscSlideText,
       setIsMiscSlideGurmukhi,
       setSavedCrossPlatformId,
+      setLineNumber,
     );
   }, [socketData]);
 

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

@@ -32,12 +32,14 @@ const useSocketListeners = (
   setMiscSlideText,
   setIsMiscSlideGurmukhi,
   setSavedCrossPlatformId,
+  setLineNumber,
 ) => {
   if (socketData) {
     const isPinCorrect = parseInt(socketData.pin, 10) === adminPin;
     const listenerActions = {
       shabad: (payload) => {
         changeActiveShabad(payload.shabadId, payload.verseId);
+        setLineNumber(payload.lineCount);
         analytics.trackEvent({
           category: 'controller',
           action: 'shabad',

www/main/addons/sundar-gutka/components/SundarGutka.jsx

@@ -142,7 +142,7 @@ const SundarGutka = ({ isShowTranslitSwitch = false, onScreenClose }) => {
     }
   };
 
-  const openBaniFromDropdown = (paneId) => {
+  const openBaniFromDropdown = (e, paneId) => {
     loadBani(parseInt(paneSelector.current.dataset.baniId, 10), paneId);
     setPaneSelectorActive(false);
   };

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

@@ -41,11 +41,10 @@ export const useNewShabad = () => {
     let shabadPane;
     if (currentWorkspace === i18n.t('WORKSPACES.MULTI_PANE')) {
       if (!multiPaneId) {
-        const existingPane = [pane1, pane2, pane3].filter(
-          (pane) => pane.activeShabad === newSelectedShabad,
-        );
-        if (existingPane.length > 0) {
-          [shabadPane] = existingPane;
+        const existingPane =
+          [pane1, pane2, pane3].findIndex((pane) => pane.activeShabad === newSelectedShabad) + 1;
+        if (existingPane > 0) {
+          shabadPane = existingPane;
         } else {
           shabadPane = defaultPaneId;
         }

www/main/navigator/shabad/ShabadContent.jsx

@@ -34,6 +34,7 @@ const ShabadContent = () => {
     minimizedBySingleDisplay,
     isDontSaveHistory,
     savedCrossPlatformId,
+    lineNumber,
   } = useStoreState((state) => state.navigator);
 
   const {
@@ -500,6 +501,10 @@ const ShabadContent = () => {
         live: liveFeed,
       }),
     );
+    if (lineNumber !== null && filteredItems[lineNumber - 1].verseId === activeVerseId) {
+      setActiveVerse({ [lineNumber - 1]: activeVerseId });
+      scrollToVerse(activeVerseId, filteredItems, virtuosoRef);
+    }
   }, [activeShabad, activeVerseId]);
 
   // checks if keyboard shortcut is fired then it invokes the function

www/main/navigator/shabad/ShabadText.jsx

@@ -54,6 +54,7 @@ export const ShabadText = ({
     initialVerseId,
     activePaneId,
     shortcuts,
+    lineNumber,
   } = useStoreState((state) => state.navigator);
 
   const { baniLength, liveFeed, autoplayDelay, autoplayToggle } = useStoreState(
@@ -145,6 +146,7 @@ export const ShabadText = ({
             initialVerseId,
           );
           setFilteredItems(filterRequiredVerseItems(verseList));
+          updateTraversedVerse(verseList[0].ID, 0);
         }
       });
     } else if (baniType === 'ceremony') {
@@ -209,13 +211,8 @@ export const ShabadText = ({
       (isSundarGutkaBani && sundarGutkaBaniId === paneAttributes.activeShabad) ||
       (!isSundarGutkaBani && !isCeremonyBani && activeShabadId === paneAttributes.activeShabad)
     ) {
-      setPaneAttributes({
-        ...paneAttributes,
-        activeVerse: activeVerseId,
-      });
-      const verseIndex = filteredItems.findIndex((verse) => verse.verseId === activeVerseId);
-      if (verseIndex >= 0 && activeVerseId !== 61 && filteredItems[verseIndex].verse !== ',') {
-        setActiveVerse({ [verseIndex]: activeVerseId });
+      if (lineNumber !== null && filteredItems[lineNumber - 1].verseId === activeVerseId) {
+        setActiveVerse({ [lineNumber - 1]: activeVerseId });
         scrollToVerse(activeVerseId, filteredItems, virtuosoRef);
       }
     }

www/main/overlay/components/OverlaySetting.jsx

@@ -67,6 +67,13 @@ const OverlaySetting = ({ settingObj, stateVar, stateFunction }) => {
     }
   };
 
+  const handleFormatIcon = (event) => {
+    const clickedEvent = event.currentTarget ? event.currentTarget.dataset.value : event;
+    const currentFormat = { ...baniOverlayState[stateVar] };
+    currentFormat[clickedEvent] = !currentFormat[clickedEvent];
+    baniOverlayActions[stateFunction](currentFormat);
+  };
+
   const settingDOM = [];
 
   if (title) {
@@ -107,6 +114,26 @@ const OverlaySetting = ({ settingObj, stateVar, stateFunction }) => {
         </span>,
       );
       break;
+    case 'text-format-icon':
+      settingDOM.push(
+        <span className={`text-icon-container`}>
+          <div
+            className={`text-icon icon-bold ${baniOverlayState[stateVar].bold && 'active'}`}
+            data-value="bold"
+            onClick={handleFormatIcon}
+          >
+            <i className="fa fa-bold"></i>
+          </div>
+          <div
+            className={`text-icon icon-italic ${baniOverlayState[stateVar].italic && 'active'}`}
+            data-value="italic"
+            onClick={handleFormatIcon}
+          >
+            <i className="fa fa-italic"></i>
+          </div>
+        </span>,
+      );
+      break;
     case 'icon-toggle':
       settingDOM.push(
         <div className="size-icon-container" onClick={handleToggleChange}>

www/obs/index.html

@@ -257,6 +257,13 @@
         }
         $gurbani.innerHTML = assist(line, overlayLarivaar, larivaarAssist);
       });
+
+      // Apply the font weight and italic to translation and transliteration
+      document.querySelectorAll('span.o-translation, span.o-transliteration').forEach(el => {
+        el.style.fontWeight = overlayPrefs.textFormat.bold ? 900 : 400;
+        el.style.fontStyle = overlayPrefs.textFormat.italic ? 'italic' : 'normal';
+      });
+
     };
 
     socket.on('show-line', request => {

www/src/scss/_overlay.scss

@@ -615,6 +615,25 @@ input[type='color'] {
         width: 30px;
       }
 
+      .text-icon-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-evenly;
+
+        .text-icon {
+          background-color: #e3e3e3;
+          color: #222;
+          padding: 8px;
+          border: 1px solid #222;
+          width: 30px;
+
+          &.active {
+            background-color: #222;
+            color: #e3e3e3;
+          }
+        }
+      }
+
       .size-icon-container {
         display: flex;
         flex-wrap: wrap;