feat(frontend): add inline transliterations to presenter gurmukhi (#623)

Co-authored-by: Bhajneet S.K <bhajneet@gmail.com>
shabados · Nov 4, 2020 · 125a48c · 125a48c
1 parent 461e442
commit 125a48c
Show file tree

Hide file tree

Showing 14 changed files with 416 additions and 357 deletions.
diff --git a/app/frontend/package.json b/app/frontend/package.json
@@ -13,10 +13,10 @@
   },
   "homepage": "/",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.25",
-    "@fortawesome/free-regular-svg-icons": "^5.11.2",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/react-fontawesome": "^0.1.5",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "@fortawesome/react-fontawesome": "^0.1.11",
     "@material-ui/core": "^4.5.0",
     "@sentry/browser": "^5.6.3",
     "classnames": "^2.2.6",

diff --git a/app/frontend/src/Controller/Search/Result.js b/app/frontend/src/Controller/Search/Result.js
@@ -1,12 +1,12 @@
 import React, { forwardRef, useContext } from 'react'
-import { string, number, shape, bool, func } from 'prop-types'
+import { string, number, shape, bool, func, arrayOf } from 'prop-types'
 import classNames from 'classnames'
 import { ListItem } from '@material-ui/core'
 
 import controller from '../../lib/controller'
-import { getTranslation, getTransliteration, customiseLine } from '../../lib/utils'
+import { getTranslation, customiseLine } from '../../lib/utils'
 import { WritersContext, RecommendedSourcesContext, SettingsContext } from '../../lib/contexts'
-import { LANGUAGE_NAMES, SOURCE_ABBREVIATIONS } from '../../lib/consts'
+import { LANGUAGE_NAMES, SOURCE_ABBREVIATIONS, TRANSLITERATORS } from '../../lib/consts'
 
 /**
  * Renders a single result, highlighting the match.
@@ -33,7 +33,6 @@ const Result = forwardRef( ( {
   highlighter,
   sourcePage,
   translations,
-  transliterations,
 }, ref ) => {
   const { local: {
     sources,
@@ -48,11 +47,8 @@ const Result = forwardRef( ( {
   const writers = useContext( WritersContext )
   const recommendedSources = useContext( RecommendedSourcesContext )
 
-  const transliteration = resultTransliterationLanguage && transliterations && customiseLine(
-    getTransliteration(
-      { transliterations },
-      resultTransliterationLanguage,
-    ),
+  const transliteration = resultTransliterationLanguage && customiseLine(
+    TRANSLITERATORS[ resultTransliterationLanguage ]( gurmukhi ),
     { lineEnding, typeId },
   )
 
@@ -123,15 +119,14 @@ const Result = forwardRef( ( {
 Result.propTypes = {
   gurmukhi: string.isRequired,
   id: string.isRequired,
-  typeId: string.isRequired,
+  typeId: number.isRequired,
   shabadId: string.isRequired,
   focused: bool.isRequired,
   highlighter: func.isRequired,
   sourceId: number.isRequired,
   shabad: shape( { } ).isRequired,
   sourcePage: number.isRequired,
-  translations: string.isRequired,
-  transliterations: string.isRequired,
+  translations: arrayOf( shape( { translation: string.isRequired } ) ).isRequired,
 }
 
 export default Result
diff --git a/app/frontend/src/Overlay/Line.js b/app/frontend/src/Overlay/Line.js
@@ -1,98 +1,75 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react'
-import { string, bool, oneOfType } from 'prop-types'
+import { string, bool, objectOf, func } from 'prop-types'
 import classNames from 'classnames'
 
-import { LANGUAGES, LANGUAGE_NAMES } from '../lib/consts'
+import { LANGUAGE_NAMES, TRANSLATION_ORDER, TRANSLITERATION_ORDER } from '../lib/consts'
 import { partitionLine, classifyWords } from '../lib/utils'
 
 import './Line.css'
 
-const isNonEmptyString = ( [ , arg ] ) => typeof arg === 'string' && !!arg
+const sortBy = sorter => ( [ n1 ], [ n2 ] ) => sorter[ n1 ] - sorter[ n2 ]
 
 /**
  * Overlay Line Component.
  * Renders the various aspects of a single line.
- * @param {string} className An optional class name to append.
- * @param {string} gurmukhi The Gurmukhi of the line to render.
- * @param {string} punjabiTranslation The Punjabi translation of the line to render.
- * @param {string} englishTranslation The English translation of the line to render.
- * @param {string} transliteration The English transliteration of the line to render.
  */
 const Line = ( {
   className,
   gurmukhi,
   larivaarGurbani: larivaar,
   larivaarAssist,
-  punjabiTranslation,
-  englishTranslation,
-  spanishTranslation,
-  englishTransliteration,
-  hindiTransliteration,
-  urduTransliteration,
-} ) => {
-  const line = partitionLine( gurmukhi )
-    .map( ( line, lineIndex ) => (
-      <span key={lineIndex}>
-        {line.map( ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span> )}
+  translations,
+  transliterators,
+} ) => (
+  <div className={classNames( className, {
+    larivaar,
+    assist: larivaar && larivaarAssist,
+  }, 'overlay-line' )}
+  >
+    <p className="gurmukhi">
+      <span className="text">
+        {partitionLine( gurmukhi )
+          .map( ( line, lineIndex ) => (
+            <span key={lineIndex}>
+              {line.map( ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span> )}
+            </span>
+          ) )}
       </span>
-    ) )
+    </p>
 
-  const translations = [
-    [ LANGUAGE_NAMES[ LANGUAGES.english ], englishTranslation ],
-    [ LANGUAGE_NAMES[ LANGUAGES.punjabi ], punjabiTranslation ],
-    [ LANGUAGE_NAMES[ LANGUAGES.spanish ], spanishTranslation ],
-  ]
-
-  const transliterations = [
-    [ LANGUAGE_NAMES[ LANGUAGES.english ], englishTransliteration ],
-    [ LANGUAGE_NAMES[ LANGUAGES.hindi ], hindiTransliteration ],
-    [ LANGUAGE_NAMES[ LANGUAGES.urdu ], urduTransliteration ],
-  ]
-
-  return (
-    <div className={classNames( className, {
-      larivaar,
-      assist: larivaar && larivaarAssist,
-    }, 'overlay-line' )}
-    >
-      <p className="gurmukhi">
-        <span className="text">
-          {line}
-        </span>
-      </p>
-
-      {translations.filter( isNonEmptyString ).map( ( [ name, translation ] ) => (
-        <p key={`${name}-${translation}`} className={classNames( name, 'translation' )}>
+    {Object
+      .entries( translations )
+      .sort( sortBy( TRANSLATION_ORDER ) )
+      .map( ( [ languageId, translation ] ) => (
+        <p key={`${gurmukhi}-${languageId}-translation`} className={classNames( LANGUAGE_NAMES[ languageId ], 'translation' )}>
           <span className="text">
             {translation}
           </span>
         </p>
       ) )}
 
-      {transliterations.filter( isNonEmptyString ).map( ( [ name, transliteration ] ) => (
-        <p key={`${name}-${transliteration}`} className={classNames( name, 'transliteration' )}>
+    {Object
+      .entries( transliterators )
+      .sort( sortBy( TRANSLITERATION_ORDER ) )
+      .map( ( [ languageId, transliterate ] ) => (
+        <p key={`${gurmukhi}-${languageId}-transliteration`} className={classNames( LANGUAGE_NAMES[ languageId ], 'transliteration' )}>
           <span className="text">
-            {classifyWords( transliteration, true ).map(
+            {classifyWords( transliterate( gurmukhi ), true ).map(
               ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span>,
             )}
           </span>
         </p>
       ) )}
 
-    </div>
-  )
-}
+  </div>
+)
 
 Line.propTypes = {
   className: string,
   gurmukhi: string.isRequired,
-  punjabiTranslation: oneOfType( [ string, bool ] ),
-  englishTranslation: oneOfType( [ string, bool ] ),
-  spanishTranslation: oneOfType( [ string, bool ] ),
-  englishTransliteration: oneOfType( [ string, bool ] ),
-  hindiTransliteration: oneOfType( [ string, bool ] ),
-  urduTransliteration: oneOfType( [ string, bool ] ),
+  translations: objectOf( string ).isRequired,
+  transliterators: objectOf( func ).isRequired,
   larivaarGurbani: bool,
   larivaarAssist: bool,
 }
@@ -101,12 +78,6 @@ Line.defaultProps = {
   className: null,
   larivaarAssist: false,
   larivaarGurbani: false,
-  englishTranslation: false,
-  spanishTranslation: false,
-  punjabiTranslation: false,
-  englishTransliteration: false,
-  hindiTransliteration: false,
-  urduTransliteration: false,
 }
 
 export default Line
diff --git a/app/frontend/src/Overlay/index.js b/app/frontend/src/Overlay/index.js
@@ -7,8 +7,8 @@ import ThemeLoader from './ThemeLoader'
 
 import { SettingsContext, StatusContext } from '../lib/contexts'
 import { LANGUAGES } from '../lib/consts'
-import { useTranslations, useTransliterations, useCurrentLine } from '../lib/hooks'
-import { customiseLine } from '../lib/utils'
+import { useTranslations, useCurrentLine } from '../lib/hooks'
+import { customiseLine, getTransliterators } from '../lib/utils'
 
 import './index.css'
 
@@ -17,54 +17,40 @@ const Overlay = () => {
   const { connected } = useContext( StatusContext )
 
   const { global: globalSettings } = settings || {}
-  const { overlay: {
-    overlayName,
-    larivaarGurbani,
-    larivaarAssist,
-    ...overlay
-  } } = globalSettings || {}
+  const { overlay: { overlayName, ...overlay } } = globalSettings || {}
 
   const [ line ] = useCurrentLine()
   const { typeId } = line || {}
   const { lineEnding } = overlay
 
   const translations = mapValues(
-    useTranslations( line && [
+    useTranslations( [
       overlay.englishTranslation && LANGUAGES.english,
       overlay.punjabiTranslation && LANGUAGES.punjabi,
       overlay.spanishTranslation && LANGUAGES.spanish,
     ] ),
     line => customiseLine( line, { lineEnding, typeId } ),
   )
 
-  const transliterations = mapValues(
-    useTransliterations( line && [
+  const transliterators = mapValues(
+    getTransliterators( [
       overlay.englishTransliteration && LANGUAGES.english,
       overlay.hindiTransliteration && LANGUAGES.hindi,
       overlay.urduTransliteration && LANGUAGES.urdu,
     ] ),
-    line => customiseLine( line, { lineEnding, typeId } ),
+    transliterate => text => transliterate( customiseLine( text, { lineEnding, typeId } ) ),
   )
 
   return connected && (
-    <div className={classNames( {
-      empty: !line,
-    }, 'overlay' )}
-    >
+    <div className={classNames( { empty: !line }, 'overlay' )}>
       <ThemeLoader name={overlayName} />
+
       <Line
+        {...overlay}
         simpleGraphics
         gurmukhi={line ? line.gurmukhi : ''}
-        {...( line && {
-          larivaarGurbani,
-          larivaarAssist,
-          englishTranslation: translations.english,
-          punjabiTranslation: translations.punjabi,
-          spanishTranslation: translations.spanish,
-          englishTransliteration: transliterations.english,
-          hindiTransliteration: transliterations.hindi,
-          urduTransliteration: transliterations.urdu,
-        } )}
+        translations={translations}
+        transliterators={transliterators}
       />
     </div>
   )