diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f10ce97..b726704f 100644 --- a/CHANGELOG.md +++ b/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. diff --git a/www/configs/navigator-settings.json b/www/configs/navigator-settings.json index 83fe7bab..426af644 100644 --- a/www/configs/navigator-settings.json +++ b/www/configs/navigator-settings.json @@ -16,6 +16,8 @@ "savedCrossPlatformId": null, "historyOrder": "newest", + "lineNumber": null, + "isMiscSlide": false, "miscSlideText": "", diff --git a/www/configs/overlay.json b/www/configs/overlay.json index 0787271a..f75ab40d 100644 --- a/www/configs/overlay.json +++ b/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", diff --git a/www/locales/en.json b/www/locales/en.json index 8d443945..ca0e79dd 100644 --- a/www/locales/en.json +++ b/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", diff --git a/www/main/addons/bani-controller/components/BaniController.jsx b/www/main/addons/bani-controller/components/BaniController.jsx index 11a70973..c91f1611 100644 --- a/www/main/addons/bani-controller/components/BaniController.jsx +++ b/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]); 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 01a44554..8c3e60de 100644 --- a/www/main/addons/bani-controller/hooks/use-socket-listeners.js +++ b/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', diff --git a/www/main/addons/sundar-gutka/components/SundarGutka.jsx b/www/main/addons/sundar-gutka/components/SundarGutka.jsx index 43016843..26065677 100644 --- a/www/main/addons/sundar-gutka/components/SundarGutka.jsx +++ b/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); }; diff --git a/www/main/navigator/search/hooks/use-new-shabad.jsx b/www/main/navigator/search/hooks/use-new-shabad.jsx index 88651111..f6d40451 100644 --- a/www/main/navigator/search/hooks/use-new-shabad.jsx +++ b/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; } diff --git a/www/main/navigator/shabad/ShabadContent.jsx b/www/main/navigator/shabad/ShabadContent.jsx index e58fa69b..149653ea 100644 --- a/www/main/navigator/shabad/ShabadContent.jsx +++ b/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 diff --git a/www/main/navigator/shabad/ShabadText.jsx b/www/main/navigator/shabad/ShabadText.jsx index 65232f55..b006474f 100644 --- a/www/main/navigator/shabad/ShabadText.jsx +++ b/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); } } diff --git a/www/main/overlay/components/OverlaySetting.jsx b/www/main/overlay/components/OverlaySetting.jsx index a4a61745..643a4098 100644 --- a/www/main/overlay/components/OverlaySetting.jsx +++ b/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 }) => { , ); break; + case 'text-format-icon': + settingDOM.push( + +
+ +
+
+ +
+
, + ); + break; case 'icon-toggle': settingDOM.push(
diff --git a/www/obs/index.html b/www/obs/index.html index e9c2e447..67142be4 100644 --- a/www/obs/index.html +++ b/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 => { diff --git a/www/src/scss/_overlay.scss b/www/src/scss/_overlay.scss index b939467a..f7c22b40 100644 --- a/www/src/scss/_overlay.scss +++ b/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;