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';
+export const ADD_VIDEOS_TO_STATE = 'ADD_VIDEOS_TO_STATE';
+export const START_LOADING_VIDEO = 'START_LOADING_VIDEO';
+export const LOADED_VIDEO = 'LOADED_VIDEO';

src/actions/videos.js

@@ -5,4 +5,4 @@ export function addVideosToState(videos) {
     type: ADD_VIDEOS_TO_STATE,
     payload: videos
   };
-}
+}

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

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 {
 

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
 };
 

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);

src/reducers/videos.js

@@ -16,5 +16,7 @@ export default function(state={}, action) {
         }
       });
       return clonedState;
+    default:
+      return state;
   }
 }

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});
+}

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`;
 }