make link to video player work, fetch video data if not available in global state

This commit is contained in:
Sanjay Bhangar 2018-12-08 00:42:02 +02:00
parent 86a90ca8da
commit f1667af8de
9 changed files with 45 additions and 18 deletions

View File

@ -7,3 +7,5 @@ export const LOADED_RANDOM_TOPIC = 'LOADED_RANDOM_TOPIC';
// Videos Action Types // 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';

View File

@ -15,7 +15,7 @@ class RandomTopic extends React.Component {
width={450} width={450}
gap={16}> gap={16}>
{this.props.videos.map(video => {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"> <Link to="/topics">
See All Topics See All Topics

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { Link } from 'react-router'; import { Link } from 'react-router-dom';
import { getThumbnail } from '../utils/video'; import { getThumbnail } from '../utils/video';
class VideoItem extends React.Component { class VideoItem extends React.Component {

View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import Grid from 'react-css-grid'; import Grid from 'react-css-grid';
import PropTyes from 'prop-types'; import PropTypes from 'prop-types';
import { getVideo } from '../utils/video'; import { getVideo } from '../utils/video';
class VideoPlayer extends React.Component { class VideoPlayer extends React.Component {
@ -26,7 +26,7 @@ class VideoPlayer extends React.Component {
VideoPlayer.propTypes = { VideoPlayer.propTypes = {
title: PropTypes.string, title: PropTypes.string,
date: PropType.string, date: PropTypes.string,
description: PropTypes.string description: PropTypes.string
}; };

View File

@ -1,25 +1,34 @@
import React from 'react'; import React from 'react';
import {connect} from 'react-redux'; import {connect} from 'react-redux';
import VideoPlayer from "../components/VideoPlayer"; import VideoPlayer from "../components/VideoPlayer";
import { fetchVideoById } from '../utils/api';
class Video extends React.Component { class Video extends React.Component {
getInitialState() { constructor() {
return { super();
this.state = {
currentVideo: null currentVideo: null
}; };
} }
componentDidMount() { componentDidMount() {
// get videoId from the URL // 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 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]; const currentVideo = this.props.allVideos[videoId];
this.setState({'currentVideo': currentVideo}); this.setState({currentVideo: currentVideo});
} else { } 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 => { const mapStateToProps = state => ({
allVideos: this.state.allVideos; allVideos: state.videos.allVideos
}; });
export default connect(mapStateToProps)(Video); export default connect(mapStateToProps)(Video);

View File

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

View File

@ -1,6 +1,16 @@
import config from '../config'; import config from '../config';
import 'whatwg-fetch'; import 'whatwg-fetch';
const VIDEO_KEYS = [
"title",
"source",
"project",
"topic",
"language",
"duration",
"id",
"date"
];
/* /*
Base function to make API calls 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') { export function fetchVideosByX(key, value, startRange, endRange, sortKey='random') {
const data = { const data = {
"keys": ["editable", "modified", "title", "source", "project", "topic", "language", "duration", "id", "description", "date"], "keys": VIDEO_KEYS,
"query": { "query": {
"conditions": [{ "conditions": [{
"key": key, "key": key,
@ -205,3 +215,7 @@ export function fetchRandomPlace() {
export function fetchVideosByPlace(placeId, startRange=0, endRange=100, sortKey='random') { export function fetchVideosByPlace(placeId, startRange=0, endRange=100, sortKey='random') {
return fetchVideosByX('place', placeId, startRange, endRange, sortKey); return fetchVideosByX('place', placeId, startRange, endRange, sortKey);
} }
export function fetchVideoById(id) {
return callApi('get', {'id': id, keys: VIDEO_KEYS});
}

View File

@ -5,5 +5,5 @@ export function getThumbnail(id, size='256') {
} }
export function getVideo(id, size='480') { export function getVideo(id, size='480') {
return `${config.videoBase}/${id}/${size}.mp4`; return `${config.videoBase}/${id}/${size}p.mp4`;
} }