feat: add screenreader with paragraph blocks (#680)

app/frontend/src/ScreenReader/index.css

@@ -0,0 +1,82 @@
+:root {
+  --display-vishraam-heavy-color: #ad0028;
+  --display-vishraam-medium-color: #00603c;
+  --display-vishraam-light-color: #005583;
+}
+
+body {
+  background-color: #f0ede9;
+  -webkit-mask-image: linear-gradient(
+    to bottom,
+    transparent 0px,
+    black 4em calc(100% - 4em),
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to bottom,
+    transparent 0%,
+    black 4em calc(100% - 4em),
+    transparent 100%
+  );
+}
+
+.lines-container {
+  width: 100%;
+  min-height: 100vh;
+  overflow-y: auto;
+  display: grid;
+}
+
+.lines {
+  width: fit-content;
+  place-self: center;
+  padding: 2.5em;
+}
+
+.line {
+  font-family: 'Open Gurbani Akhar', sans-serif;
+  font-weight: bold;
+  font-size: 2em;
+  margin: 0em;
+  line-height: 1.6;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 0.3em;
+}
+
+.word {
+  display: inline-block;
+}
+
+.title {
+  font-size: 2.5em;
+  margin-top: 2em;
+}
+
+.title:first-child {
+  margin-top: 0;
+}
+
+.title + .title {
+  margin-top: 0;
+}
+
+.title + .line:not(.title) {
+  margin-top: 0.4em;
+}
+
+.end-of-pauri + .line:not(.title) {
+  margin-top: 0.8em;
+}
+
+.heavy {
+  color: var(--display-vishraam-heavy-color) !important;
+}
+
+.medium {
+  color: var(--display-vishraam-medium-color) !important;
+}
+
+.light {
+  color: var(--display-vishraam-light-color) !important;
+}

app/frontend/src/ScreenReader/index.js

@@ -1,16 +1,84 @@
+import classNames from 'classnames'
 import React, { useContext } from 'react'
 import { hot } from 'react-hot-loader/root'
 
 import { ContentContext } from '../lib/contexts'
 
+import { classifyWords } from '../lib/line'
 import './index.css'
 
+const titlesFuzzy = [
+  '<>',
+  '] jpu ]',
+  'pwiqswhI 10',
+  '] qÍ pRswid ]',
+  '] qÍ pRswid kQqy ]',
+  'BujMg pRXwq CMd ]',
+  '] cwcrI CMd ]',
+  '] sv`Xy ]',
+  '] cOpeI ]',
+  'mhlw 1',
+  'mhlw 2',
+  'mhlw 3',
+  'mhlw 4',
+  'mhlw 5',
+  'mhlw 6',
+  'mhlw 7',
+  'mhlw 8',
+  'mhlw 9',
+  'mÚ 1',
+  'mÚ 2',
+  'mÚ 3',
+  'mÚ 4',
+  'mÚ 5',
+  'mÚ 6',
+  'mÚ 7',
+  'mÚ 8',
+  'mÚ 9',
+]
+
+const titlesExact = [
+  'jwpu ]',
+  'sloku ]',
+  'pauVI ]',
+  'AstpdI ]',
+  'cwcrI CMd ]',
+  'eyk ACrI CMd ]',
+  'sÍYXw ]',
+  'dohrw ]',
+  'sRI BgauqI jI shwie ]',
+  'vwr sRI BgauqI jI kI ]',
+  'rhrwis swihb',
+]
+
+const isTitle = str => ( titlesFuzzy.some( subtitle => str.includes( subtitle ) )
+|| titlesExact.some( title => title === str ) )
+
+const pauriEndingRegex = /][\d]+]/
+
+// if there is a line ending (॥੧॥) or ardas
+const isEndOfPauri = str => ( pauriEndingRegex.test( str ) || str.includes( 'bolo jI vwihgurU [' ) )
+
 const ScreenReader = () => {
   const { shabad, bani } = useContext( ContentContext )
 
   const { lines = [] } = shabad || bani || {}
 
-  return lines.map( ( { gurmukhi, id } ) => <p key={id}>{gurmukhi}</p> )
+  return (
+    <div className="lines-container">
+      <div className="lines">
+        {lines.map( ( { gurmukhi, id } ) => (
+          <p
+            key={id}
+            className={classNames( 'line', { title: isTitle( gurmukhi ), 'end-of-pauri': isEndOfPauri( gurmukhi ) } )}
+          >
+            { /* eslint-disable-next-line react/no-array-index-key */ }
+            {classifyWords( gurmukhi ).map( ( { word, type }, i ) => <span key={`${word}-${type}-${i}`} className={`word ${type}`}>{word}</span> )}
+          </p>
+        ) )}
+      </div>
+    </div>
+  )
 }
 
 export default hot( ScreenReader )