Merge branch 'master' of github.com:quran/quran.com-frontend into imp…

…rove_ui_for_juz

README.md

@@ -44,6 +44,7 @@ analyze-bundle-size bundle-stats.json
 
 [Reactjs]: https://facebook.github.io/react/docs/getting-started.html
 [Redux]: http://redux.js.org/
+[styled-components]: http://styled-components.com
 [Expressjs]: http://expressjs.com/en/starter/hello-world.html
 [Webpack]: http://webpack.github.io/docs/what-is-webpack.html
 [nodejs]: https://nodejs.org/en/

package.json

@@ -13,7 +13,6 @@
     "test:stylelint": "stylelint './src/**/*.scss' --config ./webpack/.stylelintrc",
     "dev-old": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node ./webpack/webpack-dev-server.js & env NODE_PATH='./src' PORT=8000 node ./bin/server.js",
     "dev": "env NODE_PATH='./src' PORT=8000 UV_THREADPOOL_SIZE=100 node --expose-gc ./node_modules/webpack-dev-server/bin/webpack-dev-server.js --config ./webpack/dev.config.js --progress  & env NODE_PATH='./src' PORT=8000 node --expose-gc ./bin/server.js",
-    "start": "NODE_PATH='src' node ./start",
     "build": "npm run build:client & npm run build:server",
     "build:server": "babel ./src -d ./dist -D",
     "build:client": "webpack --config ./webpack/prod.config.js",
@@ -33,6 +32,10 @@
       "npm run prettier",
       "npm run lint:fix",
       "git add"
+    ],
+    "*.scss": [
+      "npm run prettier",
+      "git add"
     ]
   },
   "engines": {
@@ -104,7 +107,7 @@
     "promise": "7.1.1",
     "proxy-middleware": "0.14.0",
     "qs": "6.2.1",
-    "quran-components": "^0.0.77",
+    "quran-components": "^0.0.78",
     "raven": "1.1.1",
     "raw-loader": "0.5.1",
     "react": "15.4.1",
@@ -139,6 +142,7 @@
     "sitemap": "1.8.1",
     "strip-loader": "0.1.2",
     "style-loader": "0.13.1",
+    "styled-components": "^2.1.0",
     "superagent": "3.3.1",
     "url": "0.11.0",
     "url-loader": "0.5.7",
@@ -184,7 +188,7 @@
     "phantomjs-polyfill": "0.0.1",
     "piping": "0.3.0",
     "pre-commit": "1.1.3",
-    "prettier": "^1.2.2",
+    "prettier": "^1.5.2",
     "react-addons-test-utils": "15.4.1",
     "react-transform-catch-errors": "1.0.0",
     "react-transform-hmr": "1.0.1",

src/client.js

@@ -10,10 +10,12 @@ import useScroll from 'react-router-scroll';
 import { ReduxAsyncConnect } from 'redux-connect';
 import { syncHistoryWithStore } from 'react-router-redux';
 import { AppContainer } from 'react-hot-loader';
+import { ThemeProvider } from 'styled-components';
 
 import debug from 'debug';
 
 import config from './config';
+import theme from './theme';
 import ApiClient from './helpers/ApiClient';
 import createStore from './redux/create';
 import routes from './routes';
@@ -47,16 +49,18 @@ match(
   { history, routes: routes(store) },
   (error, redirectLocation, renderProps) => {
     const component = (
-      <Router
-        {...renderProps}
-        render={props => (
-          <ReduxAsyncConnect
-            {...props}
-            helpers={{ client }}
-            render={applyRouterMiddleware(useScroll())}
-          />
-        )}
-      />
+      <ThemeProvider theme={theme}>
+        <Router
+          {...renderProps}
+          render={props => (
+            <ReduxAsyncConnect
+              {...props}
+              helpers={{ client }}
+              render={applyRouterMiddleware(useScroll())}
+            />
+          )}
+        />
+      </ThemeProvider>
     );
 
     const mountNode = document.getElementById('app');

src/components/Audioplayer/ScrollButton/index.js

@@ -1,9 +1,20 @@
 import React, { PropTypes } from 'react';
+import styled from 'styled-components';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 
-const style = require('../style.scss');
+const ScrollLink = styled.a`
+  width: 100%;
+  display: inline-block;
+  cursor: pointer;
+  padding-right: 1.5%;
+  color: ${props =>
+    props.active ? props.theme.brandPrimary : props.theme.textColor};
+  outline: none;
+  cursor: pointer;
+  margin-bottom: 0;
+`;
 
 const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
   const tooltip = (
@@ -22,14 +33,13 @@ const ScrollButton = ({ shouldScroll, onScrollToggle }) => {
         placement="top"
         trigger={['hover', 'focus']}
       >
-        <a
+        <ScrollLink
           tabIndex="-1"
-          className={`pointer ${style.buttons} ${shouldScroll ? style.scroll : ''}`}
+          active={shouldScroll}
           onClick={onScrollToggle}
-          style={{ marginBottom: 0 }}
         >
           <i className="ss-icon ss-link" />
-        </a>
+        </ScrollLink>
       </OverlayTrigger>
     </div>
   );

src/components/Audioplayer/Track/index.js

@@ -1,7 +1,35 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { Component, PropTypes } from 'react';
+import styled from 'styled-components';
 
-const styles = require('./style.scss');
+const Container = styled.div`
+  height: 6px;
+  width: 100%;
+  background-color: #f7f7f7;
+  cursor: pointer;
+  margin-bottom: 5px;
+`;
+
+const Progress = styled.div`
+  height: 100%;
+  background-color: ${props => props.theme.brandPrimary};
+  position: relative;
+  padding-left: 12px;
+
+  &:after {
+    content: '';
+    height: 12px;
+    width: 12px;
+    border-radius: 10px;
+    position: absolute;
+    right: 0;
+    display: block;
+    background: #fff;
+    top: -3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
+    transition: height 0.5s;
+  }
+`;
 
 export default class Track extends Component {
   static propTypes = {
@@ -12,10 +40,8 @@ export default class Track extends Component {
   handleClick = (event) => {
     const { onTrackChange } = this.props;
 
-    const fraction = (
-      event.nativeEvent.offsetX /
-      this.container.getBoundingClientRect().width
-    );
+    const fraction =
+      event.nativeEvent.offsetX / this.container.getBoundingClientRect().width;
 
     return onTrackChange(fraction);
   };
@@ -24,13 +50,14 @@ export default class Track extends Component {
     const { progress } = this.props;
 
     return (
-      <div
-        ref={(container) => { this.container = container; }}
-        className={styles.container}
+      <Container
+        ref={(container) => {
+          this.container = container;
+        }}
         onClick={this.handleClick}
       >
-        <div className={styles.progress} style={{ width: `${progress}%` }} />
-      </div>
+        <Progress style={{ width: `${progress}%` }} />
+      </Container>
     );
   }
 }

src/components/Audioplayer/index.js

@@ -1,6 +1,7 @@
 /* global document */
 // TODO: This file is too too large.
 import React, { Component, PropTypes } from 'react';
+import styled from 'styled-components';
 import * as customPropTypes from 'customPropTypes';
 import { connect } from 'react-redux';
 import { camelize } from 'humps';
@@ -27,6 +28,20 @@ const RepeatDropdown = Loadable({
   LoadingComponent: ComponentLoader
 });
 
+const Wrapper = styled.div`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 10%;
+`;
+
+const ControlItem = styled.li`
+  vertical-align: middle;
+  padding-right: 20px;
+  color: #939598;
+`;
+
 export class Audioplayer extends Component {
   state = {
     loadingFile: false
@@ -125,7 +140,12 @@ export class Audioplayer extends Component {
     if (!currentFile) return false;
 
     if (isPlaying) {
-      currentFile.play();
+      const playPromise = currentFile.play();
+      // Catch/silence error when a pause interrupts a play request
+      // on browsers which return a promise
+      if (playPromise !== undefined && typeof playPromise.then === 'function') {
+        playPromise.then(null, () => {});
+      }
     } else {
       currentFile.pause();
     }
@@ -361,7 +381,7 @@ export class Audioplayer extends Component {
     file.onloadeddata = null; // eslint-disable-line no-param-reassign
     file.ontimeupdate = null; // eslint-disable-line no-param-reassign
     file.onplay = null; // eslint-disable-line no-param-reassign
-    file.onPause = null; // eslint-disable-line no-param-reassign
+    file.onpause = null; // eslint-disable-line no-param-reassign
     file.onended = null; // eslint-disable-line no-param-reassign
     file.onprogress = null; // eslint-disable-line no-param-reassign
   };
@@ -458,55 +478,50 @@ export class Audioplayer extends Component {
 
     return (
       <div
-        className={`${isPlaying && style.isPlaying} ${style.container} ${className}`}
+        className={`${isPlaying &&
+          style.isPlaying} ${style.container} ${className}`}
       >
-        <div className={style.wrapper}>
-          {currentFile &&
+        <Wrapper>
+          {currentFile && (
             <Track
               progress={currentTime / duration * 100}
               onTrackChange={this.handleTrackChange}
-            />}
+            />
+          )}
           {segments &&
-            segments[currentVerse.verseKey] &&
-            <Segments
-              segments={segments[currentVerse.verseKey]}
-              currentVerse={currentVerse.verseKey}
-              currentTime={currentTime}
-            />}
-        </div>
-        <ul className={`list-inline ${style.controls}`}>
-          <li className={style.controlItem}>
+            segments[currentVerse.verseKey] && (
+              <Segments
+                segments={segments[currentVerse.verseKey]}
+                currentVerse={currentVerse.verseKey}
+                currentTime={currentTime}
+              />
+            )}
+        </Wrapper>
+        <ul className="list-inline" style={{ margin: 0 }}>
+          <ControlItem>
             <LocaleFormattedMessage
               id="player.currentVerse"
               defaultMessage="Ayah"
             />
-            :
-            {' '}
-            {currentVerse.verseKey.split(':')[1]}
-          </li>
-          <li className={style.controlItem}>
-            {this.renderPreviousButton()}
-          </li>
-          <li className={style.controlItem}>
-            {this.renderPlayStopButtons()}
-          </li>
-          <li className={style.controlItem}>
-            {this.renderNextButton()}
-          </li>
-          <li className={style.controlItem}>
+            : {currentVerse.verseKey.split(':')[1]}
+          </ControlItem>
+          <ControlItem>{this.renderPreviousButton()}</ControlItem>
+          <ControlItem>{this.renderPlayStopButtons()}</ControlItem>
+          <ControlItem>{this.renderNextButton()}</ControlItem>
+          <ControlItem>
             <RepeatDropdown
               repeat={repeat}
               setRepeat={setRepeat}
               current={parseInt(currentVerse.verseKey.split(':')[1], 10)}
               chapter={chapter}
             />
-          </li>
-          <li className={style.controlItem}>
+          </ControlItem>
+          <ControlItem>
             <ScrollButton
               shouldScroll={shouldScroll}
               onScrollToggle={this.handleScrollToggle}
             />
-          </li>
+          </ControlItem>
         </ul>
       </div>
     );