feat(frontend/overlay): link up overlay toggle fields

Related #353
shabados · Jan 11, 2020 · 7cccaed · 7cccaed
1 parent b148be4
commit 7cccaed
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 26 deletions.
diff --git a/app/frontend/src/Overlay/Line.css b/app/frontend/src/Overlay/Line.css
@@ -30,7 +30,6 @@
   content: "\20";
 }
 
-.larivaar.overlay-line .word:after,
-.overlay-line .larivaar .word:after {
+.larivaar.overlay-line .word:after {
   content: "\200B";
 }
diff --git a/app/frontend/src/Overlay/Line.js b/app/frontend/src/Overlay/Line.js
@@ -1,12 +1,14 @@
 /* eslint-disable react/no-array-index-key */
 import React from 'react'
-import { string } from 'prop-types'
+import { string, bool, oneOfType } from 'prop-types'
 import classNames from 'classnames'
 
 import { partitionLine, classifyWords } from '../lib/utils'
 
 import './Line.css'
 
+const isNonEmptyString = ( [ , arg ] ) => typeof arg === 'string' && !!arg
+
 /**
  * Overlay Line Component.
  * Renders the various aspects of a single line.
@@ -19,6 +21,8 @@ import './Line.css'
 const Line = ( {
   className,
   gurmukhi,
+  larivaarGurbani: larivaar,
+  larivaarAssist,
   punjabiTranslation,
   englishTranslation,
   spanishTranslation,
@@ -46,17 +50,21 @@ const Line = ( {
   ]
 
   return (
-    <div className={classNames( className, { empty: gurmukhi }, 'overlay-line' )}>
-      <p className="gurmukhi larivaar">{line}</p>
+    <div className={classNames( className, {
+      empty: !gurmukhi,
+      larivaar,
+      assist: larivaar && larivaarAssist,
+    }, 'overlay-line' )}
+    >
       <p className="gurmukhi">{line}</p>
 
-      {translations.map( ( [ name, translation ] ) => (
+      {translations.filter( isNonEmptyString ).map( ( [ name, translation ] ) => (
         <p key={`${name}-${translation}`} className={classNames( name, 'translation' )}>
           {translation}
         </p>
       ) )}
 
-      {transliterations.map( ( [ name, transliteration ] ) => (
+      {transliterations.filter( isNonEmptyString ).map( ( [ name, transliteration ] ) => (
         <p key={`${name}-${transliteration}`} className={classNames( name, 'transliteration' )}>
           {classifyWords( transliteration, true ).map(
             ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={classNames( type, 'word' )}>{word}</span>,
@@ -71,22 +79,26 @@ const Line = ( {
 Line.propTypes = {
   className: string,
   gurmukhi: string.isRequired,
-  punjabiTranslation: string,
-  englishTranslation: string,
-  spanishTranslation: string,
-  englishTransliteration: string,
-  hindiTransliteration: string,
-  urduTransliteration: string,
+  punjabiTranslation: oneOfType( [ string, bool ] ),
+  englishTranslation: oneOfType( [ string, bool ] ),
+  spanishTranslation: oneOfType( [ string, bool ] ),
+  englishTransliteration: oneOfType( [ string, bool ] ),
+  hindiTransliteration: oneOfType( [ string, bool ] ),
+  urduTransliteration: oneOfType( [ string, bool ] ),
+  larivaarGurbani: bool,
+  larivaarAssist: bool,
 }
 
 Line.defaultProps = {
   className: null,
-  englishTranslation: '',
-  spanishTranslation: '',
-  punjabiTranslation: '',
-  englishTransliteration: '',
-  hindiTransliteration: '',
-  urduTransliteration: '',
+  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
@@ -16,7 +16,12 @@ const Overlay = () => {
 
   const { local: localSettings, global: globalSettings } = settings || {}
   const { sources } = localSettings || {}
-  const { overlay: { overlayName } } = globalSettings || {}
+  const { overlay: {
+    overlayName,
+    larivaarGurbani,
+    larivaarAssist,
+    ...overlay
+  } } = globalSettings || {}
 
   // Get the lines from the shabad, if they exist
   const { lines = [] } = shabad || bani || {}
@@ -42,12 +47,14 @@ const Overlay = () => {
         simpleGraphics
         gurmukhi={line ? line.gurmukhi : ''}
         {...( line && {
-          englishTranslation: getTranslationFor( 1 ),
-          punjabiTranslation: getTranslationFor( 2 ),
-          spanishTranslation: getTranslationFor( 3 ),
-          englishTransliteration: getTransliterationFor( 1 ),
-          hindiTransliteration: getTransliterationFor( 4 ),
-          urduTransliteration: getTransliterationFor( 5 ),
+          larivaarGurbani,
+          larivaarAssist,
+          englishTranslation: overlay.englishTranslation && getTranslationFor( 1 ),
+          punjabiTranslation: overlay.punjabiTranslation && getTranslationFor( 2 ),
+          spanishTranslation: overlay.spanishTranslation && getTranslationFor( 3 ),
+          englishTransliteration: overlay.englishTransliteration && getTransliterationFor( 1 ),
+          hindiTransliteration: overlay.hindiTransliteration && getTransliterationFor( 4 ),
+          urduTransliteration: overlay.urduTransliteration && getTransliterationFor( 5 ),
         } )}
       />
     </div>