Adding media and modal

.env

@@ -1,6 +1,6 @@
 NODE_ENV=development
 PORT=8000
-API_URL=http://quran.com:3000
+API_URL=http://staging.quran.com:3000
 ONE_QURAN_URL=http://localhost:3030
 SEGMENTS_KEY=
 SENTRY_KEY_CLIENT=

src/components/Ayah/index.js

@@ -20,6 +20,7 @@ export default class Ayah extends Component {
   static propTypes = {
     isSearched: PropTypes.bool,
     ayah: PropTypes.object.isRequired,
+    mediaActions: PropTypes.object.isRequired,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
     isPlaying: PropTypes.bool,
@@ -84,6 +85,41 @@ export default class Ayah extends Component {
     });
   }
 
+  renderMedia() {
+    const { ayah, mediaActions } = this.props;
+
+    if (!ayah.mediaContent.length) return false;
+
+    return (
+      <div>
+        {
+          ayah.mediaContent.map((content, index) => (
+            <div
+              className={`${styles.translation} translation`}
+              key={index}
+            >
+              <h4 className="montserrat">Media: {content.resource.name}</h4>
+              <h2 className="text-translation times-new">
+                <small>
+                  <a
+                    className="pointer"
+                    onClick={() => mediaActions.setMedia(content)}
+                    data-metrics-event-name="Media Click"
+                    data-metrics-media-content-url={content.url}
+                    data-metrics-media-content-id={content.id}
+                    data-metrics-media-content-ayah-key={ayah.ayahKey}
+                  >
+                    Watch lecture
+                  </a>
+                </small>
+              </h2>
+            </div>
+          ))
+        }
+      </div>
+    );
+  }
+
   renderText() {
     const { ayah, onWordClick, tooltip } = this.props;
 
@@ -227,6 +263,7 @@ export default class Ayah extends Component {
         <div className="col-md-11">
           {this.renderText()}
           {this.renderTranslations()}
+          {this.renderMedia()}
         </div>
       </Element>
     );

src/containers/App/index.js

@@ -8,18 +8,28 @@ import Helmet from 'react-helmet';
 import Grid from 'react-bootstrap/lib/Grid';
 import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
+import Button from 'react-bootstrap/lib/Button';
+import Modal from 'react-bootstrap/lib/Modal';
+const ModalHeader = Modal.Header;
+const ModalTitle = Modal.Title;
+const ModalBody = Modal.Body;
+const ModalFooter = Modal.Footer;
 
 import debug from '../../helpers/debug';
 import config from '../../config';
 import metricsConfig from '../../helpers/metrics';
 
 import FontStyles from 'components/FontStyles';
 
+import { removeMedia } from 'redux/actions/media';
+
 const styles = require('./style.scss');
 
 class App extends Component {
   static propTypes = {
-    surahs: PropTypes.object,
+    surahs: PropTypes.object.isRequired,
+    media: PropTypes.object.isRequired,
+    removeMedia: PropTypes.func.isRequired,
     children: PropTypes.any
   };
 
@@ -28,7 +38,7 @@ class App extends Component {
   };
 
   render() {
-    const { children } = this.props;
+    const { children, media, removeMedia } = this.props;
     debug('component:APPLICATION', 'Render');
 
     return (
@@ -101,11 +111,27 @@ class App extends Component {
             </div>
           </Grid>
         </footer>
+        <Modal bsSize="large" show={!!media.content} onHide={removeMedia}>
+          <ModalHeader closeButton>
+            <ModalTitle className="montserrat">
+              {media.content && media.content.resource.name}
+            </ModalTitle>
+          </ModalHeader>
+          <ModalBody>
+            {
+              media.content &&
+              <iframe width="100%" height="515" src={media.content.url} frameBorder="0" allowFullScreen />
+            }
+          </ModalBody>
+        </Modal>
       </div>
     );
   }
 }
 
 const metricsApp = metrics(metricsConfig)(App);
 
-export default connect(state => ({surahs: state.surahs.entities }))(metricsApp);
+export default connect(
+  state => ({surahs: state.surahs.entities, media: state.media }),
+  { removeMedia }
+)(metricsApp);

src/containers/Surah/index.js

@@ -41,6 +41,7 @@ import { surahsConnect, ayahsConnect } from './connect';
 import * as AudioActions from '../../redux/actions/audioplayer.js';
 import * as AyahActions from '../../redux/actions/ayahs.js';
 import * as OptionsActions from '../../redux/actions/options.js';
+import * as MediaActions from '../../redux/actions/media.js';
 
 const style = require('./style.scss');
 
@@ -294,6 +295,7 @@ class Surah extends Component {
         tooltip={options.tooltip}
         onWordClick={actions.audio.setCurrentWord}
         actions={actions.audio}
+        mediaActions={actions.media}
         isPlaying={isPlaying}
         key={`${ayah.surahId}-${ayah.ayahNum}-ayah`}
       />
@@ -451,6 +453,7 @@ function mapDispatchToProps(dispatch) {
       options: bindActionCreators(OptionsActions, dispatch),
       ayah: bindActionCreators(AyahActions, dispatch),
       audio: bindActionCreators(AudioActions, dispatch),
+      media: bindActionCreators(MediaActions, dispatch),
       push: bindActionCreators(push, dispatch)
     }
   };

src/redux/actions/media.js

@@ -0,0 +1,17 @@
+import {
+  SET_MEDIA,
+  REMOVE_MEDIA
+} from '../constants/media';
+
+export function setMedia(content) {
+  return {
+    type: SET_MEDIA,
+    content
+  };
+};
+
+export function removeMedia() {
+  return {
+    type: REMOVE_MEDIA
+  };
+};

src/redux/constants/media.js

@@ -0,0 +1,3 @@
+export const SET_MEDIA = '@@quran/auth/SET_MEDIA';
+export const SET_OPTIONS = '@@quran/auth/SET_OPTIONS';
+export const REMOVE_MEDIA = '@@quran/auth/REMOVE_MEDIA';

src/redux/modules/media.js

@@ -0,0 +1,27 @@
+import {
+  SET_MEDIA,
+  REMOVE_MEDIA
+} from '../constants/media';
+
+const initialState = {
+  content: null
+};
+
+export default function reducer(state = initialState, action = {}) {
+  switch (action.type) {
+    case SET_MEDIA: {
+      return {
+        ...state,
+        content: action.content
+      };
+    }
+    case REMOVE_MEDIA: {
+      return {
+        ...state,
+        content: null
+      };
+    }
+    default:
+      return state;
+  }
+}

src/redux/modules/reducer.js

@@ -10,11 +10,13 @@ import options from './options';
 import searchResults from './searchResults';
 import fontFaces from './fontFaces';
 import auth from './auth';
+import media from './media';
 
 export default combineReducers({
   routing: routerReducer,
   reduxAsyncConnect,
   auth,
+  media,
   surahs,
   ayahs,
   audioplayer,