From a0f8689baa23e783949b5ac9c2a10fcc09b49639 Mon Sep 17 00:00:00 2001 From: Giampiero Galeazzi Date: Thu, 13 Dec 2018 19:47:34 +0100 Subject: [PATCH] -Aggiungo Reccomender Related. -Modificato App.js in modo che il player sia sulla sinistra e le informazioni sulla destra;inoltre le informazioni del video vengono visualizzate anche per il video iniziale quando si apre la pagina per la prima volta. -Modificato render di VideoInfo. --- src/App.js | 21 ++++++--- src/VideoInfo.js | 65 +++++++++++++-------------- src/VideoPlayer.js | 29 +++++++----- src/reccomenders/Related.js | 90 +++++++++++++++++++++++++++++-------- 4 files changed, 133 insertions(+), 72 deletions(-) diff --git a/src/App.js b/src/App.js index c6bb2af..f39b312 100644 --- a/src/App.js +++ b/src/App.js @@ -7,24 +7,33 @@ 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 3ee805d..105f86c 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -1,7 +1,7 @@ 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"; @@ -51,7 +51,7 @@ axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { params: { 'part': 'snippet', - 'videoId': this.state.videoId, //Da sostituire con variabile + 'videoId': this.state.videoId, 'order': 'relevance', 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' } @@ -106,65 +106,63 @@ } 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){ +
{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){ + })}
+ 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){ +
{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} - + 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.authorDisplayName} {item.snippet.topLevelComment.snippet.textDisplay} @@ -175,7 +173,7 @@
    ) })} -
+
@@ -184,9 +182,6 @@ - -

2

- ); } diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index e27ab78..b4f562f 100644 --- a/src/VideoPlayer.js +++ b/src/VideoPlayer.js @@ -7,15 +7,6 @@ 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, @@ -33,6 +24,7 @@ class VideoPlayer extends Component { return { videoId: props.match.params.id }; }); } + } componentWillReceiveProps(nextProps) { @@ -44,24 +36,36 @@ 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 ( +
+
); } @@ -74,6 +78,7 @@ class VideoPlayer extends Component { _onReady(event) {} + _onStateChange(event) { let timerId1, timerId2; if (parseInt(event.data) === -1) { diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js index f031881..2a2e085 100644 --- a/src/reccomenders/Related.js +++ b/src/reccomenders/Related.js @@ -1,45 +1,97 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; +import axios from 'axios'; +import YouTube from "react-youtube"; +import {Link} from "react-router-dom"; +import {Card} from "react-bootstrap"; +import CardGroup from "react-bootstrap/es/CardGroup"; class Related extends Component { 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}); + } + } } 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); + } + ) } - componentWillReceiveProps(nextProps) { + //componentWillReceiveProps(nextProps) {} - } - - shouldComponentUpdate(nextProps, nextState) { - - } + //shouldComponentUpdate(nextProps, nextState) {} componentWillUpdate(nextProps, 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) { + //componentDidUpdate(prevProps, prevState) {} - } - - componentWillUnmount() { - - } + //componentWillUnmount() {} 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 + })} + + + + +
+ ) + })} +
); } }