Adding media and modal (#493)

* Adding media and modal

* squeeze a fix

.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

@@ -22,6 +22,7 @@ export default class Ayah extends Component {
     ayah: PropTypes.object.isRequired,
     bookmarked: PropTypes.bool.isRequired,
     bookmarkActions: PropTypes.object,
+    mediaActions: PropTypes.object.isRequired,
     match: PropTypes.array,
     isSearch: PropTypes.bool,
     isPlaying: PropTypes.bool,
@@ -87,6 +88,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, audioActions: { setCurrentWord }, tooltip } = this.props;
 
@@ -257,6 +293,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

@@ -9,6 +9,12 @@ 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';
@@ -17,11 +23,15 @@ import { authConnect } from './connect';
 
 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
   };
 
@@ -30,7 +40,7 @@ class App extends Component {
   };
 
   render() {
-    const { children } = this.props;
+    const { children, media, removeMedia } = this.props;
     debug('component:APPLICATION', 'Render');
 
     return (
@@ -103,6 +113,19 @@ 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>
     );
   }
@@ -112,4 +135,7 @@ const metricsApp = metrics(metricsConfig)(App);
 
 const AsyncApp = asyncConnect([{ promise: authConnect }])(metricsApp);
 
-export default connect(state => ({surahs: state.surahs.entities }))(AsyncApp);
+export default connect(
+  state => ({surahs: state.surahs.entities, media: state.media }),
+  { removeMedia }
+)(AsyncApp);

src/containers/Surah/index.js

@@ -42,6 +42,7 @@ import * as AudioActions from '../../redux/actions/audioplayer.js';
 import * as AyahActions from '../../redux/actions/ayahs.js';
 import * as BookmarkActions from '../../redux/actions/bookmarks.js';
 import * as OptionsActions from '../../redux/actions/options.js';
+import * as MediaActions from '../../redux/actions/media.js';
 
 const style = require('./style.scss');
 
@@ -306,6 +307,7 @@ class Surah extends Component {
         tooltip={options.tooltip}
         bookmarkActions={actions.bookmark}
         audioActions={actions.audio}
+        mediaActions={actions.media}
         isPlaying={isPlaying}
         isAuthenticated={isAuthenticated}
         key={`${ayah.surahId}-${ayah.ayahNum}-ayah`}
@@ -466,8 +468,9 @@ function mapDispatchToProps(dispatch) {
       options: bindActionCreators(OptionsActions, dispatch),
       ayah: bindActionCreators(AyahActions, dispatch),
       audio: bindActionCreators(AudioActions, dispatch),
-      push: bindActionCreators(push, dispatch),
-      bookmark: bindActionCreators(BookmarkActions, dispatch)
+      bookmark: bindActionCreators(BookmarkActions, 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

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

webpack/prod.config.js

@@ -117,6 +117,7 @@ module.exports = {
       'process.env.SEGMENTS_KEY': JSON.stringify(process.env.SEGMENTS_KEY),
       'process.env.SENTRY_KEY_CLIENT': JSON.stringify(process.env.SENTRY_KEY_CLIENT),
       'process.env.SENTRY_KEY_SERVER': JSON.stringify(process.env.SENTRY_KEY_SERVER),
+      'process.env.FACEBOOK_APP_ID': JSON.stringify(process.env.FACEBOOK_APP_ID),
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
       __SERVER__: false,
       __CLIENT__: true,