Merge pull request #50 from sabeurthabti/feature/qaripagedesign

/sura and /download

api/tasks/addAudioData.js

@@ -6,20 +6,19 @@ const createData = (files, index) => {
 
   if (file.qari && (!file.format || !file.metadata)) {
     const url = `http://download.quranicaudio.com/quran/${file.qari.relative_path}${file.file_name}`;
-    console.log(url);
-    try{
+    try {
       return probe(url, (err, data) => {
         file.metadata = data.metadata;
         file.format = data.format;
         file.save();
 
         createData(files, index + 1);
       });
-    } catch(error) {
+    } catch (error) {
       console.warn(error);
     }
   }
-}
+};
 
 models.audioFile.all({ where: {extension: 'mp3', metadata: null, format: null}, include: [models.qari] }).then(files => {
   return createData(files, 0);

src/actions/audioplayer.js

@@ -62,11 +62,13 @@ export function random() {
   };
 }
 
-export function load({ surah, qari }) {
+export function load({ surah, qari, surahPage, qaris }) {
   return {
     type: LOAD,
     surah,
-    qari
+    qari,
+    surahPage,
+    qaris
   };
 }
 

src/components/Audioplayer/index.js

@@ -24,26 +24,11 @@ import Track from './Track';
 
 const styles = require('./style.scss');
 
-@connect(
-  state => ({
-    file: state.audioplayer.file,
-    surahs: state.surahs.entities,
-    qari: state.audioplayer.qari,
-    surah: state.audioplayer.surah,
-    progress: state.audioplayer.progress,
-    duration: state.audioplayer.duration,
-    currentTime: state.audioplayer.currentTime,
-    isPlaying: state.audioplayer.isPlaying,
-    shouldRepeat: state.audioplayer.shouldRepeat,
-    shouldContinuous: state.audioplayer.shouldContinuous,
-    shouldRandom: state.audioplayer.shouldRandom,
-  }),
-  { load, play, pause, playPause, update, repeat, next, previous, continuous, random }
-)
-export default class Audioplayer extends Component {
+class Audioplayer extends Component {
   static propTypes = {
     load: PropTypes.func.isRequired,
     surahs: PropTypes.object.isRequired,
+    qaris: PropTypes.object,
     surah: PropTypes.shape({
       id: PropTypes.number.isRequired,
       ayat: PropTypes.number.isRequired,
@@ -65,13 +50,14 @@ export default class Audioplayer extends Component {
     shouldRepeat: PropTypes.bool.isRequired,
     shouldContinuous: PropTypes.bool.isRequired,
     shouldRandom: PropTypes.bool.isRequired,
+    surahPage: PropTypes.bool,
     progress: PropTypes.number,
     currentTime: PropTypes.number,
     duration: PropTypes.number
   };
 
   componentWillReceiveProps(nextProps) {
-    if (this.props.surah !== nextProps.surah) {
+    if (this.props.surah !== nextProps.surah || this.props.qari !== nextProps.qari) {
       this.handleFileLoad(nextProps.file);
       this.handleRemoveFileListeneres(this.props.file);
     }
@@ -178,8 +164,9 @@ export default class Audioplayer extends Component {
   }
 
   renderPreviousButton() {
-    const { previous, surah, surahs } = this.props; // eslint-disable-line no-shadow
-    const disabled = surah ? surah.id === 1 && true : true;
+    const { previous, surah, surahs, surahPage, qari } = this.props; // eslint-disable-line no-shadow
+    const disableBasedOnSurah = surah ? surah.id === 1 && true : true;
+    const disabled = surahPage ? qari.id === 1 && true : disableBasedOnSurah;
 
     return (
       <i
@@ -190,8 +177,9 @@ export default class Audioplayer extends Component {
   }
 
   renderNextButton() {
-    const { next, surah, surahs } = this.props; // eslint-disable-line no-shadow
-    const disabled = surah ? surah.id === 114 && true : true;
+    const { next, surah, surahs, qaris, surahPage, qari } = this.props; // eslint-disable-line no-shadow
+    const disableBasedOnSurah = surah ? surah.id === 114 && true : true;
+    const disabled = surahPage ? qari.id === Object.keys(qaris).length : disableBasedOnSurah;
 
     return (
       <i
@@ -293,3 +281,23 @@ export default class Audioplayer extends Component {
     );
   }
 }
+
+
+export default connect(
+  state => ({
+    file: state.audioplayer.file,
+    surahs: state.surahs.entities,
+    qari: state.audioplayer.qari,
+    qaris: state.audioplayer.qaris,
+    surah: state.audioplayer.surah,
+    progress: state.audioplayer.progress,
+    duration: state.audioplayer.duration,
+    currentTime: state.audioplayer.currentTime,
+    isPlaying: state.audioplayer.isPlaying,
+    shouldRepeat: state.audioplayer.shouldRepeat,
+    surahPage: state.audioplayer.surahPage,
+    shouldContinuous: state.audioplayer.shouldContinuous,
+    shouldRandom: state.audioplayer.shouldRandom,
+  }),
+  { load, play, pause, playPause, update, repeat, next, previous, continuous, random }
+)(Audioplayer);

src/components/Header/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import Grid from 'react-bootstrap/lib/Grid';
+import Row from 'react-bootstrap/lib/Row';
+import Col from 'react-bootstrap/lib/Col';
+const styles = require('./style.scss');
+export default () => (
+  <Grid className={styles.header} fluid>
+    <Row>
+      <Col md={8} mdOffset={2} className={`text-center ${styles.header__text}`}>
+        <h1 className={styles.heading}>QuranicAudio</h1>
+      </Col>
+    </Row>
+  </Grid>
+);

src/components/Header/style.scss

@@ -0,0 +1,41 @@
+@import "../../styles/variables.scss";
+
+.header {
+  background-color: $brand-primary;
+  background: url('../../../static/images/index-bg.jpg') center center no-repeat;
+  background-size: cover;
+  height: 300px;
+  color: #fff;
+
+  @include mobile() {
+    height: 30vh;
+    padding: 1px;
+
+    &.fixed {
+      position: fixed;
+      top: 0px;
+      width:100%;
+      height: 120px;
+      background: #009faa;
+      color: #FFF;
+      font-size: 23px;
+      padding-top: 50px;
+      transition: height 0.3s linear 0s, padding 0.3s linear 0s;
+      overflow:hidden;
+    }
+  }
+}
+
+.header__text {
+  @include mobile() {
+    margin-top: 15%;
+  }
+}
+
+.heading {
+  font-family: 'Montserrat-Bold';
+  font-size: 48px;
+  margin-top: 80px;
+  left: 0;
+  position: relative;
+}

src/containers/Main/about.js

@@ -1,49 +1,33 @@
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
+import React from 'react';
 import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
-import Link from 'react-router/lib/Link';
+import Header from '../../components/Header';
 
 const styles = require('./style.scss');
 
-class Home extends Component {
-  render() {
-    return (
-      <div>
-        <Grid className={styles.header} fluid>
-          <Row>
-            <Col md={8} mdOffset={2} className={`text-center ${styles.header__text}`}>
-              <h1 className={styles.heading}><Link to="/" className={styles.heading__link}>QuranicAudio</Link></h1>
-            </Col>
-          </Row>
-        </Grid>
-        <Grid>
-          <Row className={styles.aboutContainer}>
-            <Col md={8} mdOffset={2}>
-              <Row>
-                <h1>About</h1>
-                <p>
-                QuranicAudio.com is the largest collection of cd quality Quran recitations on the internet. Mp3s on this site may be downloaded and used for personal use free of charge. However, you may not use these files for commercial purposes as many of these files have rules and regulations that prevent their sale except by the publishing companies.
-                </p>
-                <p>
-                QuranicAudio.com is the largest collection of cd quality Quran recitations on the internet. Mp3s on this site may be downloaded and used for personal use free of charge. However, you may not use these files for commercial purposes as many of these files have rules and regulations that prevent their sale except by the publishing companies.
-                </p>
-                <p>
-                Files on QuranicAudio.com come from many different sources. Many of them are hand ripped from cds. Others have been downloaded from various other high quality sites on the internet, including HidayahOnline, DawahAcademy, <a href="http://kalamullah.com">Kalamullah.com</a>, <a href="http://sabbir.com">Sabbir.com</a>, <a href="http://dhikrullah.com">dhikrullah.com</a>, <a href="http://zanjabil.net">zanjabil.net</a>, <a href="http://shuraym.com">shuraym.com</a>, and others. Many of the files have also been sent to us by some of our users, may Allah reward them greatly.
-                </p>
-              </Row>
-            </Col>
-          </Row>
-        </Grid>
-      </div>
-    );
-  }
-}
-
-export default connect(
-  state => ({
-    qaris: state.qaris.entities,
-    sections: state.sections.entities
-  })
-)(Home);
+export default () => {
+  return (
+    <div>
+      <Header />
+      <Grid>
+        <Row className={styles.aboutContainer}>
+          <Col md={8} mdOffset={2}>
+            <Row>
+              <h1>About</h1>
+              <p>
+              QuranicAudio.com is the largest collection of cd quality Quran recitations on the internet. Mp3s on this site may be downloaded and used for personal use free of charge. However, you may not use these files for commercial purposes as many of these files have rules and regulations that prevent their sale except by the publishing companies.
+              </p>
+              <p>
+              QuranicAudio.com is the largest collection of cd quality Quran recitations on the internet. Mp3s on this site may be downloaded and used for personal use free of charge. However, you may not use these files for commercial purposes as many of these files have rules and regulations that prevent their sale except by the publishing companies.
+              </p>
+              <p>
+              Files on QuranicAudio.com come from many different sources. Many of them are hand ripped from cds. Others have been downloaded from various other high quality sites on the internet, including HidayahOnline, DawahAcademy, <a href="http://kalamullah.com">Kalamullah.com</a>, <a href="http://sabbir.com">Sabbir.com</a>, <a href="http://dhikrullah.com">dhikrullah.com</a>, <a href="http://zanjabil.net">zanjabil.net</a>, <a href="http://shuraym.com">shuraym.com</a>, and others. Many of the files have also been sent to us by some of our users, may Allah reward them greatly.
+              </p>
+            </Row>
+          </Col>
+        </Row>
+      </Grid>
+    </div>
+  );
+};

src/containers/Main/index.js

@@ -7,6 +7,7 @@ import Nav from 'react-bootstrap/lib/Nav';
 import NavItem from 'react-bootstrap/lib/NavItem';
 import formatQarisByLetter from '../../utils/formatQarisByLetter';
 import QarisList from '../../components/QarisList';
+import Header from '../../components/Header';
 
 const styles = require('./style.scss');
 
@@ -51,11 +52,7 @@ class Home extends Component {
 
     return (
       <div>
-        <Grid className={styles.header} fluid>
-            <Col md={8} mdOffset={2} className={`text-center ${styles.header__text}`}>
-              <h1 className={styles.heading}>QuranicAudio</h1>
-            </Col>
-        </Grid>
+        <Header />
         <Grid>
           <Row className={styles.container}>
             <Col md={12} className={styles.pills}>