Merge pull request #1381 from KhalisFoundation/dev

Release merge

common/api-urls-constants.js

@@ -12,5 +12,6 @@ module.exports = {
     LOCAL: '//stgapi.sikhitothemax.org/',
   },
   CEREMONIES: '//api.sikhitothemax.org/ceremonies/',
-  DOODLE: '//api.sikhitothemax.org/doodle/'
+  DOODLE: '//api.sikhitothemax.org/doodle/',
+  WRITERS: '//api.banidb.com/v2/writers/'
 };

package.json

@@ -123,6 +123,7 @@
     "marinate": "^0.1.5",
     "postcss-root-to-json": "0.0.0",
     "react": "^16.13.1",
+    "react-collapsible": "^2.8.3",
     "react-date-picker": "^8.0.3",
     "react-dom": "^16.13.1",
     "react-h5-audio-player": "^3.4.1",
@@ -149,4 +150,4 @@
       "pre-push": "npm run pre-push-message && npm run test"
     }
   }
-}
+}

src/js/components/AutoScrollControl/AutoScrollControl.tsx

@@ -34,7 +34,7 @@ class AutoScrollControl extends React.PureComponent<IAutoScrollControlProps, IAu
   static minScrollingSpeed = 1;
   // static lowerSpeedThreshHold = 0.4;
   // static higherSpeedThreshHold = 1.2;
-  static threshold = 2;
+  static thresHold = 2;
   _maxScrollPossible!: number;
   _nextScrollPosition!: number;
   _sliding!: boolean;
@@ -144,14 +144,12 @@ class AutoScrollControl extends React.PureComponent<IAutoScrollControlProps, IAu
       const [scrollingSpeed] = this.state.scrollingSpeed;
 
       // We are having minimum scroll per pixel + adding the extra dynamic pixel movement based on slider value.
-      // We are having 2 different threshold for speeds controls - higher and lower
-
-      const movement = toFixedFloat((0.1 + ((scrollingSpeed / 100) * AutoScrollControl.threshold)), 2);
+      const movement = toFixedFloat((0.1 + ((scrollingSpeed / 100) * AutoScrollControl.thresHold)), 3);
 
       // Only allow the scrolling if we have surpassed previous scrolls or if it's firefox browser.
-      if (this._isFirefoxAgent || scrollY >= Math.floor(this._nextScrollPosition)) {
+      if (this._isFirefoxAgent || scrollY >= Math.round(this._nextScrollPosition)) {
         this._nextScrollPosition += movement;
-        window.scrollTo({ left: 0, top: this._nextScrollPosition, behavior: 'smooth' });
+        window.scrollTo({ left: 0, top: Math.round(this._nextScrollPosition), behavior: 'smooth' });
       }
 
       this._interval = requestAnimationFrame(this.handleAutoScroll);

src/js/components/Baani/Baani.js

@@ -65,6 +65,7 @@ export default class Baani extends React.PureComponent {
     isParagraphMode: PropTypes.bool.isRequired,
     onBaaniLineClick: PropTypes.func,
     sgBaaniLength: PropTypes.string,
+    visraams: PropTypes.bool
   };
 
   constructor(props) {
@@ -231,6 +232,7 @@ export default class Baani extends React.PureComponent {
       fontFamily,
       highlight,
       showFullScreen,
+      visraams,
     } = this.props;
 
     return (
@@ -247,6 +249,7 @@ export default class Baani extends React.PureComponent {
         fontSize={fontSize}
         lineHeight={lineHeight}
         fontFamily={fontFamily}
+        visraams={visraams}
         visraam={shabad.visraam}
       />
     );

src/js/components/BaaniLine.js

@@ -16,6 +16,7 @@ export default class BaaniLine extends React.PureComponent {
     fontFamily: PropTypes.string.isRequired,
     lineHeight: PropTypes.number,
     visraam: PropTypes.object,
+    visraams: PropTypes.bool,
   };
 
   render() {
@@ -29,6 +30,7 @@ export default class BaaniLine extends React.PureComponent {
       unicode,
       text,
       visraam,
+      visraams
     } = this.props;
 
     return (
@@ -50,6 +52,7 @@ export default class BaaniLine extends React.PureComponent {
             enable={larivaar}
             unicode={unicode}
             visraam={visraam}
+            visraams={visraams}
           >
             {unicode ? text.unicode : text.gurmukhi}
           </Larivaar>

src/js/components/BaaniLineActions/BaaniLineActions.tsx

@@ -49,8 +49,8 @@ export default class BaaniLineActions extends React.PureComponent<
         <Link
           key={0}
           role="button"
-          aria-label="Go to shabad"
-          title="Go to shabad"
+          aria-label="Go to Shabad"
+          title="Go to Shabad"
           onClick={openShabad}
           to={toShabadURL({ shabad })}
         >

src/js/components/Checkboxes/Checkboxes.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+
+export interface Collection {
+  options: any,
+  action: (attr: any) => {},
+  label: string,
+  checked: any
+}
+interface CheckboxesProps {
+  collections: Collection[]
+}
+
+const Checkboxes = (props: CheckboxesProps) => {
+  const { collections } = props;
+
+  const toggleCheckBox = (op: any, action: any) => () => {
+    action(op);
+  }
+
+  const collectionsMarkup = collections.map((c) => {
+    const { options, action, label, checked } = c;
+
+    return (
+      <ul key={label} className="checkbox-container">
+        {options.map((option: string) => (
+          <li key={option} className="checkbox-item">
+            <input
+              id={`checkbox-${label}-${option}`}
+              type="checkbox"
+              value={option}
+              onChange={() => action(option)}
+              checked={checked.includes(option)}
+              className="checkbox-input" />
+            <span
+              className={`fake-checkbox check-${option}`}
+              onClick={toggleCheckBox(option, action)} >
+            </span>
+            <label
+              htmlFor={`checkbox-${label}-${option}`}
+              className="checkbox-item-label">
+              {option}
+            </label>
+          </li>
+        ))}
+      </ul>
+    )
+  });
+
+  return (
+    <>
+      {collectionsMarkup}
+    </>
+  )
+}
+
+
+export default Checkboxes;