From 86a90ca8dae248fbdf5b7f0d5ae8d12638245af3 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjaybhangar@gmail.com>
Date: Sat, 8 Dec 2018 00:01:09 +0200
Subject: [PATCH 1/2] [wip] video player page

---
 public/index.html             |  2 +-
 src/actions/action_types.js   |  5 +++++
 src/actions/topics.js         |  2 ++
 src/actions/videos.js         |  8 ++++++++
 src/components/VideoItem.js   | 14 ++++++++-----
 src/components/VideoPlayer.js | 24 ++++++++++++-----------
 src/containers/Video.js       | 37 +++++++++++++++++++++++++++++++++--
 src/reducers/index.js         |  6 ++++--
 src/reducers/videos.js        | 20 +++++++++++++++++++
 src/utils/api.js              |  2 +-
 10 files changed, 98 insertions(+), 22 deletions(-)
 create mode 100644 src/actions/videos.js
 create mode 100644 src/reducers/videos.js
diff --git a/public/index.html b/public/index.html
index 4bfce95..6a09eb6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>858</title>
   </head>
   <body>
     <noscript>
diff --git a/src/actions/action_types.js b/src/actions/action_types.js
index 0fc42bd..fa6b8ad 100644
--- a/src/actions/action_types.js
+++ b/src/actions/action_types.js
@@ -1,4 +1,9 @@
+
+// Topics Action Types
 export const START_LOADING_ALL_TOPICS = 'START_LOADING_ALL_TOPICS';
 export const LOADED_ALL_TOPICS = 'LOADED_ALL_TOPICS';
 export const START_LOADING_RANDOM_TOPIC = 'START_LOADING_RANDOM_TOPIC';
 export const LOADED_RANDOM_TOPIC = 'LOADED_RANDOM_TOPIC';
+
+// Videos Action Types
+export const ADD_VIDEOS_TO_STATE = 'ADD_VIDEOS_TO_STATE';
\ No newline at end of file
diff --git a/src/actions/topics.js b/src/actions/topics.js
index 50e53c2..8ef07e9 100644
--- a/src/actions/topics.js
+++ b/src/actions/topics.js
@@ -2,6 +2,7 @@ import { fetchAllTopics, fetchVideosByTopic } from '../utils/api';
 import { APIError } from './errors';
 import { getItem, setItem } from '../utils/safe-storage';
 import getRandomTopic from '../utils/get-random-topic';
+import { addVideosToState } from './videos';
 import { 
   START_LOADING_ALL_TOPICS, 
   LOADED_ALL_TOPICS,
@@ -42,6 +43,7 @@ export function getRandomTopicVideos(allTopics, numVideos=4) {
     dispatch(loadingRandomTopicVideos());
     fetchVideosByTopic(randomTopic.name, 0, 4)
       .then(videos => {
+        dispatch(addVideosToState(videos));
         dispatch(loadedRandomTopicVideos(randomTopic, videos));
       });
   };
diff --git a/src/actions/videos.js b/src/actions/videos.js
new file mode 100644
index 0000000..b0deee6
--- /dev/null
+++ b/src/actions/videos.js
@@ -0,0 +1,8 @@
+import { ADD_VIDEOS_TO_STATE } from './action_types';
+
+export function addVideosToState(videos) {
+  return {
+    type: ADD_VIDEOS_TO_STATE,
+    payload: videos
+  };
+}
\ No newline at end of file
diff --git a/src/components/VideoItem.js b/src/components/VideoItem.js
index fc7562c..1918951 100644
--- a/src/components/VideoItem.js
+++ b/src/components/VideoItem.js
@@ -1,16 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link } from 'react-router';
 import { getThumbnail } from '../utils/video';
 class VideoItem extends React.Component {
 
   render() {
+    const videoLink = `/videos/${this.props.id}`;
     return (
-      <section className="video-item">
-        <section className="video-thumbnail-container">
-          <img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/>
+      <Link to={ videoLink }>
+        <section className="video-item">
+          <section className="video-thumbnail-container">
+            <img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/>
+          </section>
+          <h3 className="video-title">{ this.props.title }</h3>
         </section>
-        <h3 className="video-title">{ this.props.title }</h3>
-      </section>
+      </Link>
     )
   }
 }
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
index 915c974..55ec5be 100644
--- a/src/components/VideoPlayer.js
+++ b/src/components/VideoPlayer.js
@@ -1,5 +1,7 @@
 import React from 'react';
 import Grid from 'react-css-grid';
+import PropTyes from 'prop-types';
+import { getVideo } from '../utils/video';
 
 class VideoPlayer extends React.Component {
   render() {
@@ -8,19 +10,13 @@ class VideoPlayer extends React.Component {
       <Grid width={450}
             gap={16}>
         <section>
-          <h2>Title</h2>
-          <video src="https://video22.858.ma/BUR/240p3.mp4" controls>
+          <h2>{ this.props.title }</h2>
+          <video src={ getVideo(this.props.id) } controls>
           </video>
-          <h3>date mm/dd/yy </h3>
+          <h3>date { this.props.date } </h3>
         </section>
         <section className="text-left">
-          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
-            industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
-            scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
-            electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
-            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
-            Aldus
-            PageMaker including versions of Lorem Ipsum.</p>
+          <p>{ this.props.description }</p>
         </section>
 
       </Grid>
@@ -28,4 +24,10 @@ class VideoPlayer extends React.Component {
   }
 }
 
-export default (VideoPlayer);
\ No newline at end of file
+VideoPlayer.propTypes = {
+  title: PropTypes.string,
+  date: PropType.string,
+  description: PropTypes.string
+};
+
+export default VideoPlayer;
\ No newline at end of file
diff --git a/src/containers/Video.js b/src/containers/Video.js
index a426b70..c48da0f 100644
--- a/src/containers/Video.js
+++ b/src/containers/Video.js
@@ -1,14 +1,47 @@
 import React from 'react';
+import {connect} from 'react-redux';
 import VideoPlayer from "../components/VideoPlayer";
 
 class Video extends React.Component {
 
+  getInitialState() {
+    return {
+      currentVideo: null
+    };
+  }
+
+  componentDidMount() {
+    // get videoId from the URL
+    const videoId = this.props.match.params.id;
+
+    // if data for videoId is already part of allVideos, setState to currentVideo
+    if (this.props.allVideos.hasOwnProperty(videoId)) {
+      const currentVideo = this.props.allVideos[videoId];
+      this.setState({'currentVideo': currentVideo});
+    } else {
+      // TODO: get video data if not available in cache
+    }
+  }
+
   render() {
+    const video = this.state.currentVideo;
     return (
       <section>
-        <VideoPlayer/>
+        { video && 
+          <VideoPlayer 
+            id={ video.id }
+            title={ video.title }
+            date = { video.date }
+            description={ video.description }
+          /> 
+        }
       </section>
     );
   }
 }
-export default (Video);
\ No newline at end of file
+
+const mapStateToProps = state => {
+  allVideos: this.state.allVideos; 
+};
+
+export default connect(mapStateToProps)(Video);
\ No newline at end of file
diff --git a/src/reducers/index.js b/src/reducers/index.js
index acd129d..7c2d74a 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -1,9 +1,11 @@
 import { combineReducers } from 'redux';
 
-import TopicsReducer from './topics'
+import TopicsReducer from './topics';
+import VideosReducer from './videos';
 
 const rootReducer = combineReducers({
-  topics: TopicsReducer
+  topics: TopicsReducer,
+  videos: VideosReducer
 });
 
 export default rootReducer;
\ No newline at end of file
diff --git a/src/reducers/videos.js b/src/reducers/videos.js
new file mode 100644
index 0000000..aa5a2fb
--- /dev/null
+++ b/src/reducers/videos.js
@@ -0,0 +1,20 @@
+import {
+  ADD_VIDEOS_TO_STATE
+} from '../actions/action_types';
+
+export default function(state={}, action) {
+  switch (action.type) {
+    case ADD_VIDEOS_TO_STATE:
+      let clonedState = Object.assign({}, state);
+      if (!clonedState.allVideos) {
+        clonedState.allVideos = {};
+      }
+      const videosToAdd = action.payload;
+      videosToAdd.forEach(video => {
+        if (!clonedState.allVideos.hasOwnProperty(video.id)) {
+          clonedState.allVideos[video.id] = video;
+        }
+      });
+      return clonedState;
+  }
+}
\ No newline at end of file
diff --git a/src/utils/api.js b/src/utils/api.js
index 7fdef56..eea050f 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -98,7 +98,7 @@ export function fetchAllDates(startRange=0, endRange=1000) {
 */
 export function fetchVideosByX(key, value, startRange, endRange, sortKey='random') {
   const data = {
-    "keys": ["editable", "modified", "title", "source", "project", "topic", "language", "duration", "id"],
+    "keys": ["editable", "modified", "title", "source", "project", "topic", "language", "duration", "id", "description", "date"],
     "query": {
       "conditions": [{
         "key": key,
-- 
2.17.1


From f1667af8de23195e8a4d4da572ad430ffd65ed15 Mon Sep 17 00:00:00 2001
From: Sanjay Bhangar <sanjaybhangar@gmail.com>
Date: Sat, 8 Dec 2018 00:42:02 +0200
Subject: [PATCH 2/2] make link to video player work, fetch video data if not
 available in global state

---
 src/actions/action_types.js   |  4 +++-
 src/actions/videos.js         |  2 +-
 src/components/RandomTopic.js |  4 ++--
 src/components/VideoItem.js   |  2 +-
 src/components/VideoPlayer.js |  4 ++--
 src/containers/Video.js       | 27 ++++++++++++++++++---------
 src/reducers/videos.js        |  2 ++
 src/utils/api.js              | 16 +++++++++++++++-
 src/utils/video.js            |  2 +-
 9 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/src/actions/action_types.js b/src/actions/action_types.js
index fa6b8ad..2c967fa 100644
--- a/src/actions/action_types.js
+++ b/src/actions/action_types.js
@@ -6,4 +6,6 @@ export const START_LOADING_RANDOM_TOPIC = 'START_LOADING_RANDOM_TOPIC';
 export const LOADED_RANDOM_TOPIC = 'LOADED_RANDOM_TOPIC';
 
 // Videos Action Types
-export const ADD_VIDEOS_TO_STATE = 'ADD_VIDEOS_TO_STATE';
\ No newline at end of file
+export const ADD_VIDEOS_TO_STATE = 'ADD_VIDEOS_TO_STATE';
+export const START_LOADING_VIDEO = 'START_LOADING_VIDEO';
+export const LOADED_VIDEO = 'LOADED_VIDEO';
\ No newline at end of file
diff --git a/src/actions/videos.js b/src/actions/videos.js
index b0deee6..d74b1f5 100644
--- a/src/actions/videos.js
+++ b/src/actions/videos.js
@@ -5,4 +5,4 @@ export function addVideosToState(videos) {
     type: ADD_VIDEOS_TO_STATE,
     payload: videos
   };
-}
\ No newline at end of file
+}
diff --git a/src/components/RandomTopic.js b/src/components/RandomTopic.js
index b70439a..55904d2 100644
--- a/src/components/RandomTopic.js
+++ b/src/components/RandomTopic.js
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import SectionHeading from "./SectionHeading";
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 class RandomTopic extends React.Component {
 
@@ -15,7 +15,7 @@ class RandomTopic extends React.Component {
           width={450}
           gap={16}>
           {this.props.videos.map(video =>
-            <VideoItem id={video.id} title={video.title}/>
+            <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
           <Link to="/topics">
             See All Topics
diff --git a/src/components/VideoItem.js b/src/components/VideoItem.js
index 1918951..c009605 100644
--- a/src/components/VideoItem.js
+++ b/src/components/VideoItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 import { getThumbnail } from '../utils/video';
 class VideoItem extends React.Component {
 
diff --git a/src/components/VideoPlayer.js b/src/components/VideoPlayer.js
index 55ec5be..8bdab40 100644
--- a/src/components/VideoPlayer.js
+++ b/src/components/VideoPlayer.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import Grid from 'react-css-grid';
-import PropTyes from 'prop-types';
+import PropTypes from 'prop-types';
 import { getVideo } from '../utils/video';
 
 class VideoPlayer extends React.Component {
@@ -26,7 +26,7 @@ class VideoPlayer extends React.Component {
 
 VideoPlayer.propTypes = {
   title: PropTypes.string,
-  date: PropType.string,
+  date: PropTypes.string,
   description: PropTypes.string
 };
 
diff --git a/src/containers/Video.js b/src/containers/Video.js
index c48da0f..07f9e64 100644
--- a/src/containers/Video.js
+++ b/src/containers/Video.js
@@ -1,25 +1,34 @@
 import React from 'react';
 import {connect} from 'react-redux';
 import VideoPlayer from "../components/VideoPlayer";
+import { fetchVideoById } from '../utils/api';
 
 class Video extends React.Component {
 
-  getInitialState() {
-    return {
+  constructor() {
+    super();
+    this.state = {
       currentVideo: null
     };
   }
 
   componentDidMount() {
     // get videoId from the URL
-    const videoId = this.props.match.params.id;
+    const videoId = this.props.match.params.videoId;
 
     // if data for videoId is already part of allVideos, setState to currentVideo
-    if (this.props.allVideos.hasOwnProperty(videoId)) {
+    if (this.props.allVideos && this.props.allVideos.hasOwnProperty(videoId)) {
       const currentVideo = this.props.allVideos[videoId];
-      this.setState({'currentVideo': currentVideo});
+      this.setState({currentVideo: currentVideo});
     } else {
-      // TODO: get video data if not available in cache
+      
+      // video is not part of allVideos, fetch it from the API
+      fetchVideoById(videoId)
+        .then(video => {
+          this.setState({
+            currentVideo: video
+          });
+        });
     }
   }
 
@@ -40,8 +49,8 @@ class Video extends React.Component {
   }
 }
 
-const mapStateToProps = state => {
-  allVideos: this.state.allVideos; 
-};
+const mapStateToProps = state => ({
+  allVideos: state.videos.allVideos
+});
 
 export default connect(mapStateToProps)(Video);
\ No newline at end of file
diff --git a/src/reducers/videos.js b/src/reducers/videos.js
index aa5a2fb..9ca4923 100644
--- a/src/reducers/videos.js
+++ b/src/reducers/videos.js
@@ -16,5 +16,7 @@ export default function(state={}, action) {
         }
       });
       return clonedState;
+    default:
+      return state;
   }
 }
\ No newline at end of file
diff --git a/src/utils/api.js b/src/utils/api.js
index eea050f..14f2b21 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -1,6 +1,16 @@
 import config from '../config';
 import 'whatwg-fetch';
 
+const VIDEO_KEYS = [
+  "title",
+  "source",
+  "project",
+  "topic",
+  "language",
+  "duration",
+  "id",
+  "date"
+];
 
 /*
   Base function to make API calls
@@ -98,7 +108,7 @@ export function fetchAllDates(startRange=0, endRange=1000) {
 */
 export function fetchVideosByX(key, value, startRange, endRange, sortKey='random') {
   const data = {
-    "keys": ["editable", "modified", "title", "source", "project", "topic", "language", "duration", "id", "description", "date"],
+    "keys": VIDEO_KEYS,
     "query": {
       "conditions": [{
         "key": key,
@@ -205,3 +215,7 @@ export function fetchRandomPlace() {
 export function fetchVideosByPlace(placeId, startRange=0, endRange=100, sortKey='random') {
   return fetchVideosByX('place', placeId, startRange, endRange, sortKey);
 }
+
+export function fetchVideoById(id) {
+  return callApi('get', {'id': id, keys: VIDEO_KEYS});
+}
diff --git a/src/utils/video.js b/src/utils/video.js
index f677cef..62c7d81 100644
--- a/src/utils/video.js
+++ b/src/utils/video.js
@@ -5,5 +5,5 @@ export function getThumbnail(id, size='256') {
 }
 
 export function getVideo(id, size='480') {
-  return `${config.videoBase}/${id}/${size}.mp4`;
+  return `${config.videoBase}/${id}/${size}p.mp4`;
 }
\ No newline at end of file
-- 
2.17.1

