feat-larivaar-assist-vishraams (#1723)

adds new larivaar-assist vishraams

src/js/components/Baani/Baani.js

@@ -246,7 +246,7 @@ class Baani extends React.PureComponent {
         fontSize={fontSize}
         lineHeight={lineHeight}
         fontFamily={fontFamily}
-        visraams={visraams}
+        isVisraam={visraams}
         visraam={shabad.visraam}
       />
     );

src/js/components/BaaniLine.tsx

@@ -14,7 +14,7 @@ interface Props {
   fontFamily: string,
   lineHeight?: number,
   visraam?: Object,
-  visraams: boolean,
+  isVisraam: boolean,
   isReadingMode?: boolean,
 }
 
@@ -28,7 +28,7 @@ const BaaniLine = ({
   unicode,
   text,
   visraam,
-  visraams,
+  isVisraam,
   isReadingMode = false,
 }: Props) => {
 
@@ -45,7 +45,7 @@ const BaaniLine = ({
           enable={larivaar}
           unicode={unicode}
           visraam={visraam}
-          visraams={visraams}
+          isVisraam={isVisraam}
         >
           {unicode ? text.unicode : text.gurmukhi}
         </Larivaar>
@@ -67,7 +67,7 @@ const BaaniLine = ({
           enable={larivaar}
           unicode={unicode}
           visraam={visraam}
-          visraams={visraams}
+          isVisraam={isVisraam}
         >
           {unicode ? text.unicode : text.gurmukhi}
         </Larivaar>

src/js/components/Banner/Banner.tsx

@@ -1,51 +1,46 @@
 import React from 'react';
 import CrossIcon from '../Icons/Times';
 import { Link } from 'react-router-dom';
-import { useFetchData } from '@/hooks';
 
-const Banner = () => {
-  const url = "https://sttm.s3.us-west-2.amazonaws.com/urgent-message.json";
-
-  const {
-    isFetchingData: isFetchingBannerMessage,
-    data: bannerMessage,
-  } = useFetchData(url);
-
-  const lastSeen = sessionStorage.getItem("bannerMessage");
-  const updateLastSeen = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.currentTarget.parentElement?.remove();
-    sessionStorage.setItem("bannerMessage", "seen");
-  };
-
-  if (isFetchingBannerMessage || !bannerMessage.active || lastSeen === 'seen') {
-    return null
-  }
+type Props = {
+  banner: {
+    type: string;
+    message: string;
+    label?: string;
+    link?: string;
+    classes?: {
+      notification?: string;
+    }
+  },
+  onCrossIconClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+}
 
+const Banner = (props: Props) => {
   return (
     <div className="banner-container">
-      <div className={`notification type-${bannerMessage.data.type}`}>
+      <div className={`notification type-${props.banner.type} ${props.banner.classes?.notification}`}>
         <div className='banner-text-container'>
           <div className="banner-text">
-            <span className="banner-title">{bannerMessage.data.message}</span>
+            <span className="banner-title">{props.banner.message}</span>
           </div>
-          {bannerMessage.data?.label &&
-            <button className={`banner-link-button type-${bannerMessage.data.type}`}>
+          {props.banner.label &&
+            <button className={`banner-link-button type-${props.banner.type}`}>
               <Link
                 className="banner-link-button-text"
-                to={{ pathname: `https://${bannerMessage.data?.link}` }}
+                to={{ pathname: `https://${props.banner.link}` }}
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                {bannerMessage.data?.label}
+                {props.banner.label}
               </Link>
             </button>}
         </div>
-        <button className="banner-cross-bg" onClick={(e) => updateLastSeen(e)}>
+        <button className="banner-cross-bg" onClick={(e) => props.onCrossIconClick?.(e)}>
           <CrossIcon className="banner-cross" />
         </button>
       </div>
     </div>
   )
 }
 
-export default Banner;
+export default Banner;

src/js/components/Banner/MainPageBanner.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useFetchData } from '@/hooks';
+import Banner from './Banner';
+
+const BASE_URL = "https://sttm.s3.us-west-2.amazonaws.com/urgent-message.json";
+
+const MainPageBanner = () => {
+
+  const {
+    isFetchingData: isFetchingBannerMessage,
+    data: bannerData,
+  } = useFetchData(BASE_URL);
+
+  const lastSeen = sessionStorage.getItem("bannerMessage");
+  const updateLastSeen = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.currentTarget.parentElement?.remove();
+    sessionStorage.setItem("bannerMessage", "seen");
+  };
+
+  if (isFetchingBannerMessage || !bannerData.active || !bannerData.data || lastSeen === 'seen') {
+    return null
+  }
+
+  return (
+    <Banner 
+      banner={bannerData.data}
+      onCrossIconClick={updateLastSeen}
+    />
+  )
+}
+
+export default MainPageBanner;

src/js/components/ControlsSettings/ControlsSettings.tsx

@@ -42,8 +42,8 @@ const ControlsSettings = (props: any) => {
     clearVisraamClass();
     document.body.classList[visraams ? 'add' : 'remove'](
       VISRAAM.CLASS_NAME,
-      VISRAAM.SOURCE_CLASS(visraamSource),
-      VISRAAM.TYPE_CLASS(visraamStyle)
+      VISRAAM.getSourceClass(visraamSource),
+      VISRAAM.getTypeClass(visraamStyle)
     );
     wrapperRef.current.focus();
   }, [visraams, visraamSource, visraamStyle])

src/js/components/Larivaar/ImprovedLarivaar.tsx

@@ -18,7 +18,7 @@ export interface Props {
   children: string;
   query: string;
   visraam: Object;
-  visraams: boolean;
+  isVisraam: boolean;
   isShowMahankoshTooltip?: boolean;
 }
 
@@ -30,7 +30,7 @@ export const Larivaar = ({
   unicode,
   query,
   visraam,
-  visraams,
+  isVisraam,
   isShowMahankoshTooltip = false,
 }: Props) => {
   const dispatch = useDispatch();
@@ -93,15 +93,18 @@ export const Larivaar = ({
         if (['॥', ']'].some(v => word.includes(v))) {
           return `${word} `;
         }
-        const visraamClass = getVisraamClass(children, index, visraam);
+
+        const isBothLarivaarAssistAndVisraam = isVisraam && larivaarAssist;
+
+        const visraamClass = getVisraamClass({akharIndex: index, visraams: visraam, isBothLarivaarAssistAndVisraam});
         let akharClass = '';
 
         if (isShowMahankoshTooltip) {
           akharClass += ' mahankoshSelectedGurbaniWord';
         }
 
         const mahankoshTooltipAttributes = isShowMahankoshTooltip ? getMahankoshTooltipAttributes({isDarkMode, content: word}) : {};
-
+        
         return (
           <span
             key={index}
@@ -123,7 +126,7 @@ export const Larivaar = ({
               index={index}
               visraamClass={visraamClass}
               visraam={visraam}
-              visraams={visraams}
+              isVisraam={isVisraam}
             />
           </span>
         );

src/js/components/Larivaar/Word.tsx

@@ -10,9 +10,9 @@ export interface Props {
   larivaarAssist?: boolean;
   larivaarAssistColor: string;
   index: number;
-  highlightIndex?: Array<number>;
+  highlightIndex?: number[];
   visraam: Object;
-  visraams: boolean;
+  isVisraam: boolean;
   visraamClass: string;
   highlight?: boolean;
 }
@@ -25,12 +25,13 @@ const LarivaarWord = ({
   larivaarAssistColor,
   index,
   highlight,
-  visraams,
+  isVisraam,
   visraamClass,
 }: Props) => {
 
   const isOddIdx = index % 2 === 1;
   const isColoredLarivaarAssist = larivaarAssist && isOddIdx;
+
   const segments = unicode
     ? fixLarivaarUnicode(word)
     : fixLarivaarGurmukhiFont(word);
@@ -47,7 +48,7 @@ const LarivaarWord = ({
 
   return (
     <span
-      className={visraams ? visraamClass : '' + ' gurbani-word'}
+      className={isVisraam ? visraamClass : '' + ' gurbani-word'}
     >
       {segments.map((item, i) => {
         const key = `${index}.${i}`;

src/js/components/Layout.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Header from './Header';
 import Footer from './Footer';
-import Banner from './Banner/Banner';
+import MainPageBanner from './Banner/MainPageBanner';
 import GenericError, { SachKaur, BalpreetSingh } from './GenericError';
 import PropTypes from 'prop-types';
 import { DEFAULT_PAGE_TITLE, LOCAL_STORAGE_KEY_FOR_SESSION_TOKEN, TEXTS } from '../constants';
@@ -113,7 +113,7 @@ class Layout extends React.PureComponent {
 
     return online || pathname !== '/' ? (
       <React.Fragment>
-        <Banner />
+        <MainPageBanner />
         {isAddFavoriteShabadModalOpen && <AddFavouriteShabadModal open={isAddFavoriteShabadModalOpen} />}
         <div className={`pusher ${showMultiViewPanel ? 'enable' : ''} pin-settings ${showPinSettings ? 'active' : ''}`}>
           <Header

src/js/components/Notifier/Notification.tsx

@@ -1,18 +1,15 @@
 import React from 'react';
 
-interface INotificationProps {
+interface Props {
   title: string,
   message: string
 }
 
-export const Notification: React.FC<INotificationProps> = ({
-  title,
-  message
-}) => {
+export const Notification = (props: Props) => {
   return (
     <div className="toastNotification">
-      <h3 className="toastNotificationTitle">{title}</h3>
-      <span className="toastNotificationContent">{message}</span>
+      <h3 className="toastNotificationTitle">{props.title}</h3>
+      <span className="toastNotificationContent">{props.message}</span>
     </div>
   )
 }

src/js/components/SearchResults/HighlightedResult.tsx

@@ -25,9 +25,10 @@ const HighlightedSearchResult = (props: Props) => {
   const isDarkMode = useSelector(state => state.darkMode);
 
   return props.children?.split(' ').map((word: string, i: number) => {
-    let akharClass = getVisraamClass(props.children, i, props.visraams) || ' ';
+    let akharClass = getVisraamClass({akharIndex: i, visraams: props.visraams}) || ' ';
+
     if (props.highlightIndex && props.highlightIndex.length > 0) {
-      if (props.highlightIndex.includes(i)) {
+      if (props.highlightIndex.includes(`${i}`)) {
         akharClass += 'search-highlight-word'
       }
     }
@@ -40,7 +41,6 @@ const HighlightedSearchResult = (props: Props) => {
 
     const mahankoshTooltipAttributes = props.isShowMahankoshTooltip ? getMahankoshTooltipAttributes({isDarkMode, content: word}) : {};
 
-
     return (
       <span
         key={i}

src/js/components/ShabadControls.js

@@ -167,8 +167,8 @@ class ShabadControls extends React.PureComponent {
     clearVisraamClass();
     document.body.classList[this.props.visraams ? 'add' : 'remove'](
       VISRAAM.CLASS_NAME,
-      VISRAAM.SOURCE_CLASS(this.props.visraamSource),
-      VISRAAM.TYPE_CLASS(this.props.visraamStyle)
+      VISRAAM.getSourceClass(this.props.visraamSource),
+      VISRAAM.getTypeClass(this.props.visraamStyle)
     );
   }
 

src/js/constants/visraam.ts

@@ -6,9 +6,9 @@ export const VISRAAM = {
     sttm2: 'STTM (Legacy)',
   },
   TYPES: {
-    'colored-words': 'Colored Words',
-    'gradient-bg': 'Gradient Background',
+    'colored-words': 'colored-words',
+    'gradient-bg': 'gradient-bg',
   },
-  SOURCE_CLASS: (source: string) => `vishraam-vishraam-source-${source}`,
-  TYPE_CLASS: (type: string) => `vishraam-vishraam-options-${type}`
+  getSourceClass: (source: string) => `vishraam-vishraam-source-${source}`,
+  getTypeClass: (type: string) => `vishraam-vishraam-options-${type}`
 }

src/js/features/reducers/index.js

@@ -339,13 +339,12 @@ export default function reducer(state, action) {
         action: TOGGLE_VISRAAMS,
         label: visraams ? 1 : 0,
       });
-      const larivaarAssist = state.larivaarAssist && !visraams;
+
       saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_VISRAAMS, visraams);
-      saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_LARIVAAR_ASSIST, larivaarAssist);
+
       return {
         ...state,
         visraams,
-        larivaarAssist,
       };
     }
     case SET_VISRAAM_SOURCE: {
@@ -403,13 +402,12 @@ export default function reducer(state, action) {
         action: TOGGLE_LARIVAAR_ASSIST_OPTION,
         label: larivaarAssist ? 1 : 0,
       });
-      const visraams = state.visraams && !larivaarAssist;
+
       saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_LARIVAAR_ASSIST, larivaarAssist);
-      saveToLocalStorage(LOCAL_STORAGE_KEY_FOR_VISRAAMS, visraams);
+
       return {
         ...state,
         larivaarAssist,
-        visraams,
         larivaar,
       };
     }

src/js/pages/AmritKeertanIndex/index.tsx

@@ -1,6 +1,5 @@
 /* globals AMRIT_KEERTAN_API_URL */
-import React, { useEffect } from 'react';
-import SmartBanner from 'react-smartbanner';
+import React from 'react';
 import { AmritKeertanIndexRow } from './AmritKeertanIndexRow';
 import { IAmritKeertanHeader } from './types';
 import PageLoader from '@/pages/PageLoader';