diff --git a/.gitignore b/.gitignore index eecc05b..fb867e0 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,5 @@ yarn-debug.log* yarn-error.log* .idea/ +.vs/ +db.json \ No newline at end of file diff --git a/src/App.js b/src/App.js index f39b312..c6bb2af 100644 --- a/src/App.js +++ b/src/App.js @@ -7,33 +7,24 @@ import TopBar from './TopBar'; // eslint-disable-line no-unused-vars import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars import VideoInfo from './VideoInfo'; import './css/App.css'; -import Related from './reccomenders/Related.js'; class App extends React.Component { - componentDidUpdate(prevProps,prevState,snapshot){ - document.location.reload(true); - } render() { return ( - - - - - - - - - + + + - + + - +
URL not found
}/> diff --git a/src/VideoInfo.js b/src/VideoInfo.js index 105f86c..1b2e7a1 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -1,195 +1,200 @@ - import React, { Component } from 'react'; - // import PropTypes from 'prop-types'; - import Wikipedia from './areainfo/Wikipedia'; - import {Col, Tabs, Tab,} from 'react-bootstrap'; - import axios from 'axios'; - import Linkify from "react-linkify"; - import Card from "react-bootstrap/lib/Card"; +import React, { Component } from 'react'; +// import PropTypes from 'prop-types'; +import Wikipedia from './areainfo/Wikipedia'; +import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap'; +import axios from 'axios'; +import Linkify from "react-linkify"; +import Card from "react-bootstrap/lib/Card"; - class VideoInfo extends Component { - constructor(props) { - super(props); - this.state={ - error: null, - isLoaded: false, - VideoDetails: {}, - videoId: '0J2QdDbelmY', - comments : [] - }; +class VideoInfo extends Component { + constructor(props) { + super(props); + this.state={ + error: null, + isLoaded: false, + VideoDetails: {}, + videoId: '0J2QdDbelmY', + comments : [] + }; + } + + componentWillMount() { + if(this.props.match.params.id){ + if(this.props.match.params.id === this.state.videoId){} + else{ + this.setState({videoId: this.props.match.params.id}); } + } + } - componentWillMount() { - if(this.props.match.params.id){ - if(this.props.match.params.id === this.state.videoId){} - else{ - this.setState({videoId: this.props.match.params.id}); + componentDidMount() { + axios.get('https://www.googleapis.com/youtube/v3/videos', { + params: { + 'part': 'snippet,contentDetails,statistics,topicDetails', + 'id': this.state.videoId, + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' } - } - } - - componentDidMount() { - axios.get('https://www.googleapis.com/youtube/v3/videos', { - params: { - 'part': 'snippet,contentDetails,statistics,topicDetails', - 'id': this.state.videoId, - 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - } - }).then(response => { - this.setState({ - VideoDetails: response.data.items, - isLoaded: true}); - }, error => { - console.error(error); - this.setState({ - isLoaded: true, - error - }); + }).then(response => { + this.setState({ + VideoDetails: response.data.items, + isLoaded: true}); + }, error => { + console.error(error); + this.setState({ + isLoaded: true, + error }); + }); - //Richiesta per ottenere i commenti del video - axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { - params: { - 'part': 'snippet', - 'videoId': this.state.videoId, - 'order': 'relevance', - 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - } - }).then( - response => { - this.setState({ - comments: response.data.items, - }); - }, - error => { - console.error(error); - } - ) - } + //Richiesta per ottenere i commenti del video + axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { + params: { + 'part': 'snippet', + 'videoId': this.state.videoId, //Da sostituire con variabile + 'order': 'relevance', + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + }).then( + response => { + this.setState({ + comments: response.data.items, + }); + }, + error => { + console.error(error); + } + ) + } - // componentWillReceiveProps(nextProps) { + // componentWillReceiveProps(nextProps) { - // } + // } - // shouldComponentUpdate(nextProps, nextState) { + // shouldComponentUpdate(nextProps, nextState) { - // } + // } - componentWillUpdate(nextProps, nextState) { - // console.info('nextProps',nextProps); - // console.info('nextState',nextState); - if(nextProps.match.params.id === this.state.videoId){} - else if( nextProps.match.params.id){ - this.setState({videoId: nextProps.match.params.id}); - } - } - - componentDidUpdate(prevProps, prevState) { - // console.info('prevProps',prevProps); - // console.info('prevState',prevState); - } - - // componentWillUnmount() { - - // } - - render() { - const { error, isLoaded, VideoDetails } = this.state; - if (error) { - return ( - - Error: {error.message} -- Cannot get {error.config.url} - - ); - } else if (!isLoaded) { - return Loading...; - } else { - return ( - - - {/* codice per tabs reccomenders */} - - -
- {this.state.VideoDetails.map(function(item,index){ - return( -
-
{item.snippet.title}
-

ID Video : {item.id}
- Publish Time : {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ - return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6); - })}
- Channel Name : {item.snippet.channelTitle}
- Description :
{item.snippet.description}
- Tags :
{item.snippet.tags.map(function(element,index){ - if(index===4) - return (
); - return( - {element} - ) - })} -

-
- ) - } - )} -
- - -
- {this.state.VideoDetails.map(function (item,index) { - return( -
-
{item.snippet.title}
-

Duration : {item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){ - if(p1) return(p2+':'+p3+':'+p4); - else return(p6+':'+p7);})}
- Definition : {item.contentDetails.definition}
- Dimension : {item.contentDetails.dimension}
- Views : {item.statistics.viewCount}
- Likes : {item.statistics.likeCount}
- Dislikes : {item.statistics.dislikeCount} -

-
- ) - })} -
- - -
- {this.state.comments.map(function (item,index) { - return( -
- - - {item.snippet.topLevelComment.snippet.authorDisplayName} - - - {item.snippet.topLevelComment.snippet.textDisplay} - - - - -
- ) - })} -
- - -
- -
- - - - - ); - } + componentWillUpdate(nextProps, nextState) { + // console.info('nextProps',nextProps); + // console.info('nextState',nextState); + if(nextProps.match.params.id === this.state.videoId){} + else if( nextProps.match.params.id){ + this.setState({videoId: nextProps.match.params.id}); } } - VideoInfo.propTypes = { + componentDidUpdate(prevProps, prevState) { + // console.info('prevProps',prevProps); + // console.info('prevState',prevState); + } - }; + // componentWillUnmount() { - export default VideoInfo; \ No newline at end of file + // } + + render() { + const { error, isLoaded, VideoDetails } = this.state; + if (error) { + return ( + + Error: {error.message} -- Cannot get {error.config.url} + + ); + } else if (!isLoaded) { + return Loading...; + } else { + return ( + + + {/* codice per tabs reccomenders */} + + +
+ {this.state.VideoDetails.map(function(item,index){ + return( +
+

{item.snippet.title}

+ +
ID Video
{item.id} +
Publish Time
{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ + return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6); + })} + +
Channel Name
{item.snippet.channelTitle} +
Description
{item.snippet.description} +
Tags
{item.snippet.tags.map(function(element,index){ + return( + {element} + ) + })} + +
+ ) + } + )} +
+ + +
+ {this.state.VideoDetails.map(function (item,index) { + return( +
+

{item.snippet.title}

+ +
Duration
{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){ + if(p1) return(p2+':'+p3+':'+p4); + else return(p6+':'+p7);})} + +
Definition
{item.contentDetails.definition} +
Dimension
{item.contentDetails.dimension} +
Views
{item.statistics.viewCount} +
Likes
{item.statistics.likeCount} +
Dislikes
{item.statistics.dislikeCount} + +
+ ) + })} +
+ + +
    + {this.state.comments.map(function (item,index) { + return( +
    + + + {item.snippet.topLevelComment.snippet.authorDisplayName} + + + {item.snippet.topLevelComment.snippet.textDisplay} + + + + +
    + ) + })} +
+ + +
+ +
+ + + + +

2

+ + + ); + } + } +} + +VideoInfo.propTypes = { + +}; + +export default VideoInfo; \ No newline at end of file diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index b4f562f..e27ab78 100644 --- a/src/VideoPlayer.js +++ b/src/VideoPlayer.js @@ -7,6 +7,15 @@ class VideoPlayer extends Component { constructor(props) { super(props); this.state = { + opt: { + // height: '390', + // width: '640', + playerVars: { + // https://developers.google.com/youtube/player_parameters + autoplay: 0, + modestbranding: 1 + } + }, videoId: '0J2QdDbelmY', promise1: null, promise2: null, @@ -24,7 +33,6 @@ class VideoPlayer extends Component { return { videoId: props.match.params.id }; }); } - } componentWillReceiveProps(nextProps) { @@ -36,36 +44,24 @@ class VideoPlayer extends Component { this.setState((state, props) => { return { videoId: props.match.params.id }; }); - } componentWillUnmount() {} render() { - const opts= { - height: '520', - width: '900', - playerVars: { - // https://developers.google.com/youtube/player_parameters - autoplay: 0, - modestbranding: 1 - } - }; return ( -
-
); } @@ -78,7 +74,6 @@ class VideoPlayer extends Component { _onReady(event) {} - _onStateChange(event) { let timerId1, timerId2; if (parseInt(event.data) === -1) {