Skip to content

Commit ec75d3c

Browse files
gurjit03yadvirkaurJapnitSsaintsoldierx
authored
Release v1.17.9 (#1752)
* fix hyphen issue for sync and controller code * minnor change for sync and controller code * chore: removes visraam class * Adds isMahaanKoshTooltipEnabled boolean to the render logic of Larivaar & standard display * Adds a setting to enable Mahaan Kosh Tooltip under the settings tab, needs work on the svg icon * Adds reading mode to getBaaniLine to fix the mahaankosh reading mode bug * Fixes MahaanKoshTooltipBug by wrapping BaaniLine with MahaanKoshContext.provider * Updates test case * chore: fixes display print option * chore: fixes horizontal scroll * Updates Meta.test.jsx snapshot to fix failed build * Fixes MahaanKoshTooltip Toggle icon * Fixes MahaanKoshTooltipSetting Icon * Fix api urls constants (#1749) * chore: adds production url back to the api constants * chore: updates package.json * updates banner page text (#1750) * chore: updates main page banner text * fix: fixes typo and links * chore: updates texts * chore: updates to v1.17.9 (#1751) --------- Co-authored-by: Yadvir Kaur <yadvirkaur15@gmail.com> Co-authored-by: Japnit Singh <singj36@mcmaster.ca> Co-authored-by: Aman Singh <saintsoldierx@gmail.com> Co-authored-by: Japnit Singh <57968393+JapnitS@users.noreply.github.com>
1 parent 8e7f08d commit ec75d3c

28 files changed

Lines changed: 412 additions & 299 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sttm/web",
3-
"version": "1.17.3",
3+
"version": "1.17.9",
44
"description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
55
"main": "index.js",
66
"engines": {

‎src/js/components/Baani/Baani.js‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,7 @@ class Baani extends React.PureComponent {
230230
highlight,
231231
showFullScreen,
232232
visraams,
233+
isReadingMode,
233234
} = this.props;
234235

235236
return (
@@ -248,6 +249,8 @@ class Baani extends React.PureComponent {
248249
fontFamily={fontFamily}
249250
isVisraam={visraams}
250251
visraam={shabad.visraam}
252+
isReadingMode={isReadingMode}
253+
key={shabad.verseId}
251254
/>
252255
);
253256
};
@@ -884,31 +887,31 @@ class Baani extends React.PureComponent {
884887
const hindiTranslationLanguages = this.getHindiTranslationLanguages();
885888
const spanishTranslationLanguage = translationLanguages.includes('spanish')
886889
const shabads = Object.entries(normalizedGurbani).map(([idx, shabads]) => shabads.map(shabad => shabad)).flat();
890+
let lineIndex = 0;
891+
const { selectedWord, selectedWordIndex, selectedLine } = this.state;
887892
return (
888893
<div>
889-
{shabads.map(shabad => {
890-
return(
891-
<div key={shabad.verseId} className={`${unicode ? 'unicode' : 'gurlipi-reading-mode'}`}>
892-
<BaaniLine
893-
text={shabad.verse}
894-
unicode={unicode}
895-
shouldHighlight={
896-
showFullScreen
897-
? false
898-
: highlight === parseInt(getVerseId(shabad), 10)
899-
}
900-
larivaar={larivaar}
901-
larivaarAssist={larivaarAssist}
902-
fontSize={fontSize}
903-
lineHeight={lineHeight}
904-
fontFamily={fontFamily}
905-
visraams={visraams}
906-
visraam={shabad.visraam}
907-
isReadingMode={isReadingMode}
908-
key={shabad.verseId}
909-
/>
910-
</div>
911-
)
894+
{shabads.map((shabad) => {
895+
lineIndex++;
896+
return (
897+
<div
898+
key={shabad.verseId}
899+
className={`${unicode ? 'unicode' : 'gurlipi-reading-mode'}`}
900+
>
901+
<MahankoshContext.Provider
902+
key={lineIndex}
903+
value={{
904+
currentLine: lineIndex,
905+
selectedLine,
906+
selectedWord,
907+
selectedWordIndex,
908+
setMahankoshInformation: this.setMahankoshInformation,
909+
}}
910+
>
911+
{this.getBaniLine(shabad)}
912+
</MahankoshContext.Provider>
913+
</div>
914+
);
912915
})}
913916
{transliterationLanguages.map((language) => {
914917
return (

‎src/js/components/Banner/Banner.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@ import React from 'react';
22
import CrossIcon from '../Icons/Times';
33
import { Link } from 'react-router-dom';
44

5+
export const updateLastSeen = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
6+
e.currentTarget.parentElement?.remove();
7+
sessionStorage.setItem("bannerMessage", "seen");
8+
};
9+
510
type Props = {
611
banner: {
712
type: string;
@@ -16,6 +21,7 @@ type Props = {
1621
}
1722

1823
const Banner = (props: Props) => {
24+
const handleBannerCrossClick = props.onCrossIconClick ?? updateLastSeen;
1925
return (
2026
<div className="banner-container">
2127
<div className={`notification type-${props.banner.type} ${props.banner.classes?.notification}`}>
@@ -35,7 +41,7 @@ const Banner = (props: Props) => {
3541
</Link>
3642
</button>}
3743
</div>
38-
<button className="banner-cross-bg" onClick={(e) => props.onCrossIconClick?.(e)}>
44+
<button className="banner-cross-bg" onClick={(e) => handleBannerCrossClick(e)}>
3945
<CrossIcon className="banner-cross" />
4046
</button>
4147
</div>

‎src/js/components/Banner/MainPageBanner.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,27 @@ import React from 'react';
22
import { useFetchData } from '@/hooks';
33
import Banner from './Banner';
44

5-
const BASE_URL = "https://sttm.s3.us-west-2.amazonaws.com/urgent-message.json";
5+
interface Props {
6+
onCrossIconClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
7+
}
68

7-
const MainPageBanner = () => {
9+
const BASE_URL = "https://sttm.s3.us-west-2.amazonaws.com/urgent-message.json";
10+
const lastSeen = sessionStorage.getItem("bannerMessage");
811

12+
const MainPageBanner = (props: Props) => {
913
const {
1014
isFetchingData: isFetchingBannerMessage,
1115
data: bannerData,
1216
} = useFetchData(BASE_URL);
1317

14-
const lastSeen = sessionStorage.getItem("bannerMessage");
15-
const updateLastSeen = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
16-
e.currentTarget.parentElement?.remove();
17-
sessionStorage.setItem("bannerMessage", "seen");
18-
};
19-
2018
if (isFetchingBannerMessage || !bannerData.active || !bannerData.data || lastSeen === 'seen') {
2119
return null
2220
}
2321

2422
return (
25-
<Banner
23+
<Banner
2624
banner={bannerData.data}
27-
onCrossIconClick={updateLastSeen}
25+
onCrossIconClick={props.onCrossIconClick}
2826
/>
2927
)
3028
}

‎src/js/components/Controls.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import {
3535
toggleParagraphMode,
3636
toggleReadingMode,
3737
toggleVisraams,
38+
toggleMahaanKoshTooltip,
3839
setVisraamSource,
3940
setVisraamStyle,
4041
changeFont,
@@ -122,6 +123,7 @@ const mapDispatchToProps = {
122123
toggleDarkMode,
123124
toggleAutoScrollMode,
124125
toggleVisraams,
126+
toggleMahaanKoshTooltip,
125127
setLineHeight,
126128
setVisraamSource,
127129
setVisraamStyle,

‎src/js/components/ControlsSettings/ControlSettings.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export interface ISettingActions {
4343
toggleCenterAlignOption: () => {},
4444
toggleSplitViewOption: () => {},
4545
toggleDarkMode: () => {},
46+
toggleMahaanKoshTooltip: () => {},
4647
toggleCartoonifiedPages: () => {},
4748
toggleShabadAudioPlayer: () => {},
4849
toggleParagraphMode: () => {},
@@ -87,6 +88,7 @@ export interface ISettingActions {
8788
centerAlignGurbani: boolean,
8889
splitView: boolean,
8990
darkMode: boolean,
91+
mahaanKoshTooltip: boolean,
9092
sgBaaniLength: string,
9193
fontFamily: string,
9294
showAdvancedOptions: boolean,
@@ -228,6 +230,7 @@ export const QUICK_SETTINGS = ({
228230
toggleCenterAlignOption,
229231
toggleSplitViewOption,
230232
toggleDarkMode,
233+
toggleMahaanKoshTooltip,
231234
toggleCartoonifiedPages,
232235
toggleShabadAudioPlayer,
233236
toggleParagraphMode,
@@ -253,6 +256,7 @@ export const QUICK_SETTINGS = ({
253256
centerAlignGurbani,
254257
splitView,
255258
darkMode,
259+
mahaanKoshTooltip,
256260
showCartoonifiedPages,
257261
showShabadAudioPlayer,
258262
paragraphMode,
@@ -336,6 +340,13 @@ export const QUICK_SETTINGS = ({
336340
checked: darkMode,
337341
action: toggleDarkMode,
338342
},
343+
{
344+
type: 'toggle-option',
345+
label: 'Mahaan Kosh Tooltip',
346+
tooltip: 'Mahaan Kosh Tooltip',
347+
checked: mahaanKoshTooltip,
348+
action: toggleMahaanKoshTooltip,
349+
},
339350
{
340351
type: 'toggle-option',
341352
label: 'Vishraams',

‎src/js/components/ControlsSettings/ControlsSettings.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ClickableListItem from './ClickableListItem';
55
import Times from '../Icons/Times';
66
import Accordion from '../Accordion';
77
import { ADVANCED_SETTINGS, HEADER_SETTINGS, KEYBOARD_SHORTCUTS, QUICK_SETTINGS, RESET_SETTING } from './ControlSettings';
8-
import { AlignLeftIcon, MinusIcon, PlusIcon, SplitViewIcon, GlobeIcon, LarivaarIcon, MicrophoneIcon, DarkModeIcon, VishraamIcon, SteekIcon, AkhandPaathIcon, AutoPlayIcon, LarivaarAssistIcon, AlignCenterIcon, ParagraphIcon, VishraamStyleIcon, CartoonIcon, AudioPlayerIcon } from "../Icons/CustomIcons";
8+
import { AlignLeftIcon, MinusIcon, PlusIcon, SplitViewIcon, GlobeIcon, LarivaarIcon, MicrophoneIcon, DarkModeIcon, VishraamIcon, SteekIcon, AkhandPaathIcon, AutoPlayIcon, LarivaarAssistIcon, AlignCenterIcon, ParagraphIcon, VishraamStyleIcon, CartoonIcon, AudioPlayerIcon, MahaanKoshTooltipIcon } from "../Icons/CustomIcons";
99
import {
1010
FONT_OPTIONS,
1111
VISRAAM,
@@ -78,6 +78,11 @@ const ControlsSettings = (props: any) => {
7878
return (
7979
<DarkModeIcon />
8080
)
81+
82+
case 'Mahaan Kosh Tooltip':
83+
return (
84+
<MahaanKoshTooltipIcon />
85+
)
8186
case 'Vishraams':
8287
return (
8388
<VishraamIcon />

‎src/js/components/FavouriteShabadButton/hooks/index.js‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,13 @@ function useClient() {
2626

2727
function useFavouriteShabads() {
2828
const { data: favouriteShabads } = useQuery({
29-
queryKey: 'favourite-shabads',
30-
queryFn: () =>
31-
apiClient(`/favourite-shabads`, { token: getToken() }).then((data) =>
32-
data.favouriteShabads
33-
),
29+
queryKey: ['favourite-shabads', getToken()],
30+
queryFn: () => {
31+
return apiClient(`/favourite-shabads`, { token: getToken() }).then((data) => {
32+
return data.favouriteShabads
33+
})
34+
}
35+
3436
});
3537

3638
return favouriteShabads ?? [];

‎src/js/components/Icons/CustomIcons.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -269,6 +269,21 @@ export const DarkModeIcon = (props) => (
269269
);
270270
DarkModeIcon.propTypes = iconPropTypes;
271271

272+
export const MahaanKoshTooltipIcon = (props) => (
273+
<span onClick={props.onClick} className={props.className}>
274+
<svg
275+
width="23"
276+
height="23"
277+
viewBox="-5 0 58 48"
278+
stroke="none"
279+
xmlns="http://www.w3.org/2000/svg"
280+
>
281+
<path d="M19 41C13.5 38.25 8.00129 30 5.00063 25C1.99996 20 8.3132 15.3125 12.0004 19C15.6876 22.6875 16.0004 23 16.0004 23V7.50001C16.0004 5.56701 17.5674 4 19.5004 4C21.4334 4 23.0004 5.56701 23.0004 7.50001V16C23.0004 14.067 24.5674 12.5 26.5004 12.5C28.4334 12.5 30.0004 14.067 30.0004 16V17.5C30.0004 15.567 31.5674 14 33.5004 14C35.4334 14 37.0004 15.5655 37.0004 17.4985V22.5002C37.0004 20.5672 38.5674 19 40.5004 19C42.4334 19 44.0004 20.567 44.0004 22.5V31.2439C44.0004 32.3988 43.7376 33.5441 43.0869 34.4982C41.9179 36.2122 39.6023 39.0351 36 41C30.4999 44 24.5 43.75 19 41Z" />
282+
</svg>
283+
</span>
284+
);
285+
MahaanKoshTooltipIcon.propTypes = iconPropTypes;
286+
272287
export const SplitViewIcon = (props) => (
273288
<span onClick={props.onClick} className={props.className}>
274289
<svg

‎src/js/components/Larivaar/ImprovedLarivaar.tsx‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,16 +40,21 @@ export const Larivaar = ({
4040
currentLine,
4141
setMahankoshInformation
4242
} = useContext(MahankoshContext);
43-
const larivaarAssistColor = useSelector(state => getLarivaarAssistColor(state));
44-
const isDarkMode = useSelector(state => state.darkMode);
43+
const larivaarAssistColor = useSelector((state) =>
44+
getLarivaarAssistColor(state)
45+
);
46+
const isDarkMode = useSelector((state) => state.darkMode);
47+
const isMahaanKoshTooltipEnabled = useSelector(
48+
(state) => state.mahaanKoshTooltip
49+
);
4550

4651
// closure implementation
4752
const handleMahankoshMouseEnter = (currentLine: number) => {
4853
return (selectedWord: string, selectedWordIndex: number) => {
4954

5055
//Clear any existing instance of the active tooltip before setting new word
51-
dispatch({ type: SET_MAHANKOSH_TOOLTIP_ACTIVE, payload: false })
52-
56+
dispatch({ type: SET_MAHANKOSH_TOOLTIP_ACTIVE, payload: false });
57+
5358
setMahankoshInformation({
5459
selectedLine: currentLine,
5560
selectedWord,
@@ -71,6 +76,17 @@ export const Larivaar = ({
7176

7277
// If larivaar is disabled
7378
if (!enable) {
79+
if (!isMahaanKoshTooltipEnabled) {
80+
return (
81+
<HighlightedSearchResult
82+
highlightIndex={highlightIndex}
83+
query={query}
84+
visraams={visraam}
85+
>
86+
{children}
87+
</HighlightedSearchResult>
88+
);
89+
}
7490
return (
7591
<HighlightedSearchResult
7692
isShowMahankoshTooltip={isShowMahankoshTooltip}
@@ -95,25 +111,38 @@ export const Larivaar = ({
95111
}
96112

97113
const isBothLarivaarAssistAndVisraam = isVisraam && larivaarAssist;
98-
114+
99115
const visraamClass = getVisraamClass({akharIndex: index, visraams: visraam, isBothLarivaarAssistAndVisraam});
100116
let akharClass = '';
101-
102-
if (isShowMahankoshTooltip) {
117+
118+
if (isShowMahankoshTooltip && isMahaanKoshTooltipEnabled) {
103119
akharClass += ' mahankoshSelectedGurbaniWord';
104120
}
105121

106-
const mahankoshTooltipAttributes = isShowMahankoshTooltip ? getMahankoshTooltipAttributes({isDarkMode, content: word}) : {};
107-
122+
const mahankoshTooltipAttributes =
123+
isShowMahankoshTooltip && isMahaanKoshTooltipEnabled
124+
? getMahankoshTooltipAttributes({ isDarkMode, content: word })
125+
: {};
126+
108127
return (
109128
<span
110129
key={index}
111130
{...mahankoshTooltipAttributes}
112-
onMouseEnter={() => {
113-
handleMahankoshWordStore(word, index)
114-
}}
115-
onClick={handleGurbaniShabadClick}
116-
onMouseLeave={handleClearMahankoshTooltip}
131+
onMouseEnter={
132+
isMahaanKoshTooltipEnabled
133+
? () => {
134+
handleMahankoshWordStore(word, index);
135+
}
136+
: undefined
137+
}
138+
onClick={
139+
isMahaanKoshTooltipEnabled ? handleGurbaniShabadClick : undefined
140+
}
141+
onMouseLeave={
142+
isMahaanKoshTooltipEnabled
143+
? handleClearMahankoshTooltip
144+
: undefined
145+
}
117146
className={akharClass}
118147
>
119148
<LarivaarWord

0 commit comments

Comments
 (0)