diff --git a/package-lock.json b/package-lock.json index 0cf287f..e497219 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1714,6 +1714,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.18.0", + "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "^1.3.0", + "is-buffer": "^1.1.5" + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -8605,9 +8614,9 @@ } }, "moment": { - "version": "2.22.2", - "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz", - "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y=" + "version": "2.23.0", + "resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz", + "integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA==" }, "moment-duration-format": { "version": "2.2.2", diff --git a/package.json b/package.json index 129cb99..68d9ae7 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "express": "^4.16.4", "lodash-id": "^0.14.0", "lowdb": "^1.0.0", - "moment": "^2.22.2", + "moment": "^2.23.0", "moment-duration-format": "^2.2.2", "react": "^16.6.1", "react-app-polyfill": "^0.1.3", diff --git a/src/App.js b/src/App.js index cdcabf7..2d1f559 100644 --- a/src/App.js +++ b/src/App.js @@ -8,16 +8,20 @@ import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars import VideoInfo from './VideoInfo'; import {ReactHeight} from 'react-height'; import './css/App.css'; +import Related from './reccomenders/Related'; class App extends React.Component { constructor(props) { super(props); this.state = { - isInfoToggled: false, maxHeight: null, - navHeight: null + navHeight: null, + isInfoToggled: true }; } + componentDidUpdate(prevProps,prevState,snapshot){ + document.location.reload(true); + } render() { return ( @@ -41,7 +45,10 @@ class App extends React.Component {
+ + +
diff --git a/src/VideoInfo.js b/src/VideoInfo.js index ed481eb..a579926 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -1,7 +1,6 @@ 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 { Col, Tabs, Tab,} from 'react-bootstrap'; import axios from 'axios'; import Linkify from "react-linkify"; import Card from "react-bootstrap/lib/Card"; @@ -36,7 +35,7 @@ class VideoInfo extends Component { componentDidMount() { axios.all([ - axios.get('https://www.googleapis.com/youtube/v3/videos', { + axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video params: { 'part': 'snippet,contentDetails,statistics,topicDetails', 'id': this.state.videoId, @@ -45,7 +44,7 @@ class VideoInfo extends Component { }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video params: { 'part': 'snippet', - 'videoId': this.state.videoId, //Da sostituire con variabile + 'videoId': this.state.videoId, 'order': 'relevance', 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' } @@ -65,32 +64,13 @@ class VideoInfo extends Component { }); } - // componentWillReceiveProps(nextProps) { - - // } - - // 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, comments } = this.state; const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method @@ -105,62 +85,61 @@ class VideoInfo extends Component { } else { return ( - + {/* codice per tabs reccomenders */} - -
- {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}
+

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

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

{item.snippet.title}

- -
Duration
{ momentDuration(item.contentDetails.duration) } -
Definition
{item.contentDetails.definition} -
Dimension
{item.contentDetails.dimension} -
Views
{item.statistics.viewCount}{"\uD83D\uDC40"} -
Likes
{item.statistics.likeCount}{"\uD83D\uDC4D"} -
Dislikes
{item.statistics.dislikeCount}{"\uD83D\uDC4E"} - +
{item.snippet.title}
+

Duration :{ momentDuration(item.contentDetails.duration) }
+ Definition : {item.contentDetails.definition}
+ Dimension : {item.contentDetails.dimension}
+ Views : {item.statistics.viewCount}
+ Likes : {item.statistics.likeCount}
+ Dislikes : {item.statistics.dislikeCount} +

) })}
- -
    - { comments.map(function (item, index) { - return ( + +
    + {this.state.comments.map(function (item,index) { + return(
    - + - {item.snippet.topLevelComment.snippet.authorDisplayName} + {item.snippet.topLevelComment.snippet.authorDisplayName} {item.snippet.topLevelComment.snippet.textDisplay} @@ -171,7 +150,7 @@ class VideoInfo extends Component {
    ) })} -
+
diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js index f031881..197e9a3 100644 --- a/src/reccomenders/Related.js +++ b/src/reccomenders/Related.js @@ -1,47 +1,88 @@ import React, { Component } from 'react'; -import PropTypes from 'prop-types'; +import axios from 'axios'; +import {Link} from "react-router-dom"; +import {Card} from "react-bootstrap"; class Related extends Component { - constructor(props) { - super(props); + constructor(props) { + super(props); + this.state={ + videoId : '0J2QdDbelmY', + items : [] + } + } - } + 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() { + componentDidMount() { + axios.get("https://www.googleapis.com/youtube/v3/search",{ + params:{ + 'part': 'snippet', + 'relatedToVideoId' : this.state.videoId, + 'type' : 'video', + 'maxResults' : '21', + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + }).then( + response => { + this.setState({ + items: response.data.items, + }) + console.log(response); + }, + error => { + console.error(error); + } + ) + } - } + componentWillUpdate(nextProps, nextState) { + if(nextProps.match.params.id === this.state.videoId){} + else if( nextProps.match.params.id){ + this.setState({videoId: nextProps.match.params.id}); + } + } - componentDidMount() { - - } - - componentWillReceiveProps(nextProps) { - - } - - shouldComponentUpdate(nextProps, nextState) { - - } - - componentWillUpdate(nextProps, nextState) { - - } - - componentDidUpdate(prevProps, prevState) { - - } - - componentWillUnmount() { - - } - - render() { - return ( -
- -
- ); - } + render() { + return ( +
+ {this.state.items.map(function (item,index) { + return( +
+ + + + + + {item.snippet.title}
+ {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ + return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani + })} + + + + +
+ ) + })} +
+ ); + } } Related.propTypes = {