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

@ -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

View File

@ -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 {

View File

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

View File

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

View File

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

View File

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

View File

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