Merge pull request #817 from KhalisFoundation/dev

Release v1.4
KhalisFoundation · Oct 24, 2019 · c3d63e0 · c3d63e0
2 parents 01e2536 + c77b6fe
commit c3d63e0
Show file tree

Hide file tree

Showing 23 changed files with 393 additions and 248 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sttm/web",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Sevadaars are currently working hard to build a newer version of SikhiToTheMax website using modern web technologies.",
   "main": "index.js",
   "scripts": {

diff --git a/src/js/components/Baani.js b/src/js/components/Baani.js
@@ -6,7 +6,7 @@ import Transliteration from './Transliteration';
 import BaaniLine from './BaaniLine';
 import { clickEvent, ACTIONS } from '../util/analytics';
 import { TEXTS, SHABAD_CONTENT_CLASSNAME } from '.././constants';
-import { copyToClipboard, showToast, shortenURL, makeSelection } from '../util';
+import { copyToClipboard, showToast, shortenURL } from '../util';
 
 import { translationMap, transliterationMap, getVerseId } from '@/util/api/shabad';
 
@@ -24,7 +24,7 @@ export default class Baani extends React.PureComponent {
 
   static propTypes = {
     gurbani: PropTypes.array.isRequired,
-    type: PropTypes.oneOf(['shabad', 'ang', 'hukamnama']).isRequired,
+    type: PropTypes.oneOf(['shabad', 'ang', 'hukamnama', 'sync']).isRequired,
     splitView: PropTypes.bool.isRequired,
     translationLanguages: PropTypes.array.isRequired,
     transliterationLanguages: PropTypes.array.isRequired,
@@ -35,6 +35,7 @@ export default class Baani extends React.PureComponent {
     fontSize: PropTypes.number.isRequired,
     fontFamily: PropTypes.string.isRequired,
     centerAlignGurbani: PropTypes.bool.isRequired,
+    showFullScreen: PropTypes.bool,
   };
 
   getShareLine = shabad => {
@@ -112,7 +113,6 @@ export default class Baani extends React.PureComponent {
     }
     const selectedDiv = e.currentTarget;
     if (window.getSelection().toString()) {
-      makeSelection(selectedDiv);
       const shareDiv = selectedDiv.querySelector('.share');
       shareDiv.classList.add('showShare');
     }
@@ -146,12 +146,53 @@ export default class Baani extends React.PureComponent {
       fontFamily,
       highlight,
       centerAlignGurbani,
+      showFullScreen,
     } = this.props;
 
     const disabledActions = ['ang', 'hukamnama'].includes(type)
       ? ['tweet']
       : ['openShabad', 'tweet'];
 
+    const getBaniLine = shabad => (
+      <BaaniLine
+        text={shabad.verse}
+        unicode={unicode}
+        shouldHighlight={showFullScreen ? false : highlight === parseInt(getVerseId(shabad), 10)}
+        larivaar={larivaar}
+        larivaarAssist={larivaarAssist}
+        fontSize={fontSize}
+        fontFamily={fontFamily}
+      />
+    );
+
+    const getTransliterations = shabad => transliterationLanguages.map(language => (
+      <Transliteration key={getVerseId(shabad) + language}>
+        {transliterationMap[language](shabad)}
+      </Transliteration>
+    ));
+
+    const getActions = shabad => (
+      <Actions
+        disabledActions={disabledActions}
+        shabad={shabad}
+        onFacebookClick={this.onFacebookClick(shabad)}
+        onCopyClick={this.onCopyClick(shabad)}
+      />
+    );
+
+    const getTranslations = shabad => translationLanguages.map(language => (
+      <Translation
+        key={getVerseId(shabad) + language}
+        type={language}
+        {...Translation.getTranslationProps({
+          translationMap,
+          language,
+          shabad,
+          unicode,
+        })}
+      />
+    ));
+
     const mixedViewMarkup = (
       <div className="mixed-view-baani">
         {gurbani.map(shabad => (
@@ -167,45 +208,35 @@ export default class Baani extends React.PureComponent {
                 : null
             }
           >
-            <BaaniLine
-              text={shabad.verse}
-              unicode={unicode}
-              shouldHighlight={highlight === parseInt(getVerseId(shabad), 10)}
-              larivaar={larivaar}
-              larivaarAssist={larivaarAssist}
-              fontSize={fontSize}
-              fontFamily={fontFamily}
-            />
-            {transliterationLanguages.map(language => (
-              <Transliteration key={getVerseId(shabad) + language}>
-                {transliterationMap[language](shabad)}
-              </Transliteration>
-            ))}
-
-            {translationLanguages.map(language => (
-              <Translation
-                key={getVerseId(shabad) + language}
-                type={language}
-                {...Translation.getTranslationProps({
-                  translationMap,
-                  language,
-                  shabad,
-                  unicode,
-                })}
-              />
-            ))}
-
-            <Actions
-              disabledActions={disabledActions}
-              shabad={shabad}
-              onFacebookClick={this.onFacebookClick(shabad)}
-              onCopyClick={this.onCopyClick(shabad)}
-            />
+            {getBaniLine(shabad)}
+            {getTransliterations(shabad)}
+            {getTranslations(shabad)}
+            {getActions(shabad)}
           </div>
         ))}
       </div>
     );
 
+    const fullScreenMarkup = (
+      <div className="full-screen-baani">
+        {gurbani.map(shabad => (
+          highlight === parseInt(getVerseId(shabad), 10) ?
+            <div
+              key={getVerseId(shabad)}
+              id={`line-${getVerseId(shabad)}`}
+              className="line"
+              onMouseUp={this.showShare}
+              onMouseDown={this.removeSelection}
+            >
+              {getBaniLine(shabad)}
+              {getTransliterations(shabad)}
+              {getTranslations(shabad)}
+              {getActions(shabad)}
+            </div> : ''
+        ))}
+      </div>
+    );
+
     const splitViewMarkup = (
       <div className="split-view-baani">
         <div className="split-view-baani-wrapper">
@@ -219,22 +250,8 @@ export default class Baani extends React.PureComponent {
                   : null
               }
             >
-              <BaaniLine
-                text={shabad.verse}
-                unicode={unicode}
-                shouldHighlight={highlight === parseInt(getVerseId(shabad), 10)}
-                larivaar={larivaar}
-                larivaarAssist={larivaarAssist}
-                fontSize={fontSize}
-                fontFamily={fontFamily}
-              />
-
-              <Actions
-                disabledActions={disabledActions}
-                shabad={shabad}
-                onFacebookClick={this.onFacebookClick(shabad)}
-                onCopyClick={this.onCopyClick(shabad)}
-              />
+              {getBaniLine(shabad)}
+              {getActions(shabad)}
             </div>
           ))}
         </div>
@@ -266,13 +283,23 @@ export default class Baani extends React.PureComponent {
       </div>
     );
 
+    const getMarkup = () => {
+      if (showFullScreen) {
+        return fullScreenMarkup;
+      } else if (splitView) {
+        return splitViewMarkup;
+      } else {
+        return mixedViewMarkup;
+      }
+    }
+
     return (
       <div
         className={`${SHABAD_CONTENT_CLASSNAME} ${
-          centerAlignGurbani ? ' center-align' : ''
-        }`}
+          centerAlignGurbani || showFullScreen ? ' center-align' : ''
+          }`}
       >
-        {splitView ? splitViewMarkup : mixedViewMarkup}
+        {getMarkup()}
       </div>
     );
   }

diff --git a/src/js/components/Breadcrumb/Breadcrumb.js b/src/js/components/Breadcrumb/Breadcrumb.js
@@ -34,8 +34,8 @@ export default class BreadCrumb extends React.PureComponent {
                 {' › '}
               </React.Fragment>
             ) : (
-              <span className="breadcrumbLast">{title}</span>
-            )
+                <span key={`breadcrumbLast${index}`} className="breadcrumbLast">{title}</span>
+              )
           )}
       </h4>
     );

diff --git a/src/js/components/Controls.js b/src/js/components/Controls.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import cx from 'classnames';
 import ShabadControls from './ShabadControls';
 import ShareButtons, { supportedMedia as _s } from './ShareButtons';
 import {
@@ -25,6 +26,8 @@ export const supportedMedia = _s;
 class Controls extends React.PureComponent {
   state = {
     showBorder: false,
+    lastScrollPos: 0,
+    showControls: true
   };
 
   componentDidMount() {
@@ -44,6 +47,29 @@ class Controls extends React.PureComponent {
       if (this.mounted && this.state.showBorder === false) {
         this.setState({ showBorder: true });
       }
+
+      const currentScroll = this.$wrapper.offsetTop;
+      const { showDisplayOptions, showFontOptions } = this.props;
+      this.setState(prevState => {
+        const { showControls, lastScrollPos } = prevState;
+
+        if (lastScrollPos > currentScroll) {
+          return {
+            lastScrollPos: currentScroll,
+            showControls: !showControls
+              ? true
+              : showControls
+          };
+        }
+        return {
+          lastScrollPos: currentScroll,
+          showControls: showControls &&
+            !showDisplayOptions &&
+            !showFontOptions ?
+            false :
+            showControls
+        };
+      });
     } else {
       if (this.mounted && this.state.showBorder === true) {
         this.setState({ showBorder: false });
@@ -54,10 +80,17 @@ class Controls extends React.PureComponent {
   setRef = node => (this.$wrapper = node);
 
   render() {
+    const { showBorder, showControls } = this.state;
+    const classNames = cx({
+      'no-select': true,
+      'with-border': showBorder,
+      'show-controls': showControls,
+      'hide-controls': !showControls,
+    });
     return (
       <div
         id="controls-wrapper"
-        className={`no-select ${this.state.showBorder ? 'with-border' : ''}`}
+        className={classNames}
         ref={this.setRef}
       >
         <ShareButtons {...this.props} />