Surah page (#670)

* fixed responsive issues for surah translated name

* fixed verse badge

* fixed media

* last word in ayah ( ayah number ) don't have audio

* fixed translations

* .env should be in gitignore list!

* fixed lint rules

src/components/Home/SurahsList/index.js

@@ -24,7 +24,7 @@ const SurahsList = (props) => {
               <span className={`icon-surah${chapter.id}`} />
             </div>
 
-            <div className={`col-md-12 col-md-push-2 ${styles.translated_name}`}>
+            <div className={`col-md-12 col-xs-push-2 col-sm-push-2 col-md-push-2 col-lg-push-2 col-xl-push-2 ${styles.translated_name}`}>
               <span className={`text-uppercase ${chapter.translatedName.languageName}`}>
                 {chapter.translatedName.name}
               </span>

src/components/Translation/index.js

@@ -0,0 +1,31 @@
+/* eslint-disable react/prefer-stateless-function */
+import React, { Component, PropTypes } from 'react';
+
+import { translationType } from 'types';
+
+const styles = require('./style.scss');
+
+export default class Translation extends Component {
+  static propTypes = {
+    translation: translationType.isRequired,
+    index: PropTypes.number
+  };
+
+  render() {
+    const { translation, index } = this.props;
+    const lang = translation.languageName;
+    const isArabic = lang === 'arabic';
+
+    return (
+      <div id={index} className={`${styles.translation} ${isArabic && 'arabic'} translation`}>
+        <h4 className="montserrat">{translation.resourceName}</h4>
+        <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
+          <small
+            dangerouslySetInnerHTML={{ __html: translation.text }}
+            className={`${lang || 'times-new'}`}
+          />
+        </h2>
+      </div>
+    );
+  }
+}

src/components/Translation/style.scss

@@ -0,0 +1,29 @@
+@import '../../styles/variables';
+
+.translation{
+  &.arabic{
+    text-align: right;
+  }
+
+  h4{
+    color: $light-green;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    font-size: 14px;
+    font-weight: 400;
+
+    @media(max-width: $screen-sm-max) {
+      font-size: 12px;
+    }
+  }
+
+  h2{
+    margin-top: 5px;
+    margin-bottom: 25px;
+  }
+
+  sup{
+    color: $light-green;
+    cursor: pointer;
+  }
+}

src/components/Verse/index.js

@@ -7,6 +7,7 @@ import Share from 'components/Share';
 import Copy from 'components/Copy';
 import LocaleFormattedMessage from 'components/LocaleFormattedMessage';
 import Word from 'components/Word';
+import Translation from 'components/Translation';
 
 import debug from 'helpers/debug';
 
@@ -72,47 +73,29 @@ export default class Verse extends Component {
       pause();
     }
 
-    setAyah(verse);
+    setAyah(verse.verseKey);
     play();
   }
 
   renderTranslations() {
     const { verse, match } = this.props;
 
-    const array = match || verse.content || [];
+    const array = match || verse.translations || [];
 
-    return array.map((content, index) => {
-      const arabic = new RegExp(/[\u0600-\u06FF]/);
-      const character = content.text;
-      const isArabic = arabic.test(character);
-      const lang = (content.name || content.resource.name).replace(/\s+/g, '-').toLowerCase();
-
-      return (
-        <div
-          className={`${styles.translation} ${isArabic && 'arabic'} translation`}
-          key={index}
-        >
-          <h4 className="montserrat">{content.name || content.resource.name}</h4>
-          <h2 className={`${isArabic ? 'text-right' : 'text-left'} text-translation times-new`}>
-            <small
-              dangerouslySetInnerHTML={{ __html: content.text }}
-              className={`${lang || 'times-new'}`}
-            />
-          </h2>
-        </div>
-      );
-    });
+    return array.map((translation, index) => (
+      <Translation translation={translation} index={index} />
+    ));
   }
 
   renderMedia() {
     const { verse, mediaActions, isSearched } = this.props;
 
-    if (isSearched || !verse.mediaContent) return false;
+    if (isSearched || !verse.mediaContents) return false;
 
     return (
       <div>
         {
-          verse.mediaContent.map((content, index) => (
+          verse.mediaContents.map((content, index) => (
             <div
               className={`${styles.translation} translation`}
               key={index}
@@ -131,7 +114,7 @@ export default class Verse extends Component {
                     <LocaleFormattedMessage
                       id="verse.media.lectureFrom"
                       defaultMessage="Watch lecture by {from}"
-                      values={{ from: content.resource.name }}
+                      values={{ from: content.authorName }}
                     />
                   </a>
                 </small>
@@ -182,7 +165,7 @@ export default class Verse extends Component {
       return (
         <a
           tabIndex="-1"
-          onClick={() => this.handlePlay(verse.verseKey)}
+          onClick={() => this.handlePlay(verse)}
           className="text-muted"
         >
           <i className={`ss-icon ${playing ? 'ss-pause' : 'ss-play'} vertical-align-middle`} />{' '}
@@ -249,29 +232,26 @@ export default class Verse extends Component {
 
   renderAyahBadge() {
     const { isSearched } = this.props;
+    let metric;
+
     const content = (
       <h4>
         <span className={`label label-default ${styles.label}`}>
-          {this.props.verse.chapterId}:{this.props.verse.ayahNum}
+          {this.props.verse.verseKey}
         </span>
       </h4>
     );
 
     if (isSearched) {
-      return (
-        <Link
-          to={`/${this.props.verse.chapterId}/${this.props.verse.ayahNum}`}
-          data-metrics-event-name="Verse:Searched:Link"
-        >
-          {content}
-        </Link>
-      );
+      metric = 'Verse:Searched:Link';
+    } else {
+      metric = 'Verse:Link';
     }
 
     return (
       <Link
-        to={`/${this.props.verse.chapterId}:${this.props.verse.ayahNum}`}
-        data-metrics-event-name="Verse:Link"
+        to={`/${this.props.verse.chapterId}/${this.props.verse.verseNumber}`}
+        data-metrics-event-name={metric}
       >
         {content}
       </Link>

src/components/Verse/style.scss

@@ -23,29 +23,6 @@
     visibility: hidden;
   }
 
-  .translation{
-    &.arabic{
-      text-align: right;
-    }
-
-    h4{
-      color: $light-green;
-      margin-bottom: 5px;
-      text-transform: uppercase;
-      font-size: 14px;
-      font-weight: 400;
-
-      @media(max-width: $screen-sm-max) {
-        font-size: 12px;
-      }
-    }
-
-    h2{
-      margin-top: 5px;
-      margin-bottom: 25px;
-    }
-  }
-
   .controls{
     a{
       margin-bottom: 15px;

src/components/Word/index.js

@@ -1,4 +1,4 @@
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import bindTooltip from 'utils/bindTooltip';
 /* eslint-disable no-unused-vars */
 const CHAR_TYPE_WORD = 'word';
@@ -7,7 +7,7 @@ const CHAR_TYPE_PAUSE = 'pause';
 const CHAR_TYPE_RUB = 'rub';
 const CHAR_TYPE_SAJDAH = 'sajdah';
 
-export default class Word extends React.Component {
+export default class Word extends Component {
   static propTypes = {
     word: PropTypes.object.isRequired, // eslint-disable-line
     tooltip: PropTypes.string,
@@ -33,15 +33,18 @@ export default class Word extends React.Component {
 
   handleWordPlay = () => {
     const { word } = this.props;
-    const audio = new Audio(word.audio.url); // eslint-disable-line
 
-    audio.play();
+    if (word.audio) {
+      const audio = new Audio(word.audio.url); // eslint-disable-line
+
+      audio.play();
+    }
   }
 
   handleSegmentPlay = () => {
     const { word, currentVerse, audioActions, audioPosition, isPlaying, isSearched } = this.props;
 
-    if (isSearched) {
+    if (isSearched || !word.audio) {
       return;
     }
 

src/config.js

@@ -33,7 +33,7 @@ const config = {
         { name: 'Charset', content: 'UTF-8' },
         { name: 'Distribution', content: 'Global' },
         { name: 'Rating', content: 'General' },
-        { name: 'viewport', content: 'width=device-width, user-scalable=no, initial-scale=1' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' },
         { name: 'google-site-verification', content: 'ehFz7FvmL7V9MzP40F8_kLABhCzqGzMDMrCnUP44Too' },
         { name: 'theme-color', content: '#004f54' },
         { property: 'og:site_name', content: title },

src/containers/App/index.js

@@ -26,7 +26,7 @@ const ModalBody = Modal.Body;
 class App extends Component {
   static propTypes = {
     media: PropTypes.shape({
-      content: PropTypes.string
+      content: PropTypes.object
     }).isRequired,
     removeMedia: PropTypes.func.isRequired,
     children: PropTypes.element,
@@ -93,23 +93,17 @@ class App extends Component {
         {children || main}
         <SmartBanner title="The Noble Quran - القرآن الكريم" button="Install" />
         <Footer />
-        <Modal bsSize="large" show={!!media.content} onHide={removeMedia}>
+        <Modal bsSize="large" show={media && media.content} onHide={removeMedia}>
           <ModalHeader closeButton>
             <ModalTitle className="montserrat">
-              {media.content && media.content.resource.name}
+              {media.content && media.content.authorName}
             </ModalTitle>
           </ModalHeader>
           <ModalBody>
-            <div className="embed-responsive embed-responsive-16by9">
-              {
-                media.content &&
-                  <iframe
-                    className="embed-responsive-item"
-                    src={media.content.url}
-                    allowFullScreen
-                  />
-              }
-            </div>
+            <div
+              className="embed-responsive embed-responsive-16by9"
+              dangerouslySetInnerHTML={{ __html: media.content && media.content.embedText }}
+            />
           </ModalBody>
         </Modal>
       </div>

src/redux/actions/verses.js

@@ -14,12 +14,11 @@ import {
 // For safe measure
 const defaultOptions = {
   audio: 8,
-  quran: 1,
-  content: [19]
+  translations: [20]
 };
 
 export function load(id, from, to, options = defaultOptions) {
-  const { audio, quran, content } = options;
+  const { audio, translations } = options;
 
   cookie.save('lastVisit', JSON.stringify({ chapterId: id, verseId: from }));
 
@@ -31,8 +30,7 @@ export function load(id, from, to, options = defaultOptions) {
         from,
         to,
         recitation: audio,
-        quran,
-        translations: content
+        translations
       }
     }),
     chapterId: id

src/redux/modules/options.js

@@ -9,8 +9,7 @@ const initialState = {
   isShowingSurahInfo: false,
   loadingRecitations: false,
   audio: 8,
-  quran: 1,
-  content: [19],
+  translations: [20],
   tooltip: 'translation',
   options: {
     recitations: []

src/styles/main.scss

@@ -32,8 +32,9 @@ html,body{
   background-color: #F5FBF7;
 }
 
-a:hover{
+a:hover, a:focus{
   text-decoration: none;
+  outline: none;
 }
 
 .form-control:focus{

src/types/index.js

@@ -7,3 +7,4 @@ export { default as segmentType } from './segmentType';
 export { default as wordType } from './wordType';
 export { default as matchType } from './matchType';
 export { default as recitationType } from './recitationType';
+export { default as translationType } from './translationType';

src/types/translationType.js

@@ -0,0 +1,7 @@
+import { PropTypes } from 'react';
+
+export default PropTypes.shape({
+  languageName: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  resourceName: PropTypes.string.isRequired
+});

src/types/verseType.js

@@ -1,5 +1,6 @@
 import { PropTypes } from 'react';
 import wordType from './wordType';
+import translationType from './translationType';
 
 export default PropTypes.shape({
   id: PropTypes.number.isRequired,
@@ -11,9 +12,8 @@ export default PropTypes.shape({
   verseKey: PropTypes.string.isRequired,
   sajdah: PropTypes.bool,
   words: PropTypes.arrayOf(wordType).isRequired,
-  textTashkeel: PropTypes.string.isRequired,
   textMadani: PropTypes.string.isRequired,
   textSimple: PropTypes.string.isRequired,
-  content: PropTypes.array, // NOTE: In search, it is not required.
+  translations: PropTypes.arrayOf(translationType), // NOTE: In search, it is not required.
   audio: PropTypes.object // NOTE: In search, it is not required.
 });