From f1667af8de23195e8a4d4da572ad430ffd65ed15 Mon Sep 17 00:00:00 2001 From: Sanjay Bhangar Date: Sat, 8 Dec 2018 00:42:02 +0200 Subject: [PATCH] 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 => - + )} 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