Merge branch 'master' of https://bitbucket.org/sco44/tecnologiabanana

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 (
 			<React.Fragment>
 				<Row>
 				<TopBar />
 				</Row>
-				<Row className="justify-content-center bg-black">
+				<Row>
-					<Col xs="12" sm="6">
+					<Col>
                         <Route path={["/video/:id", "/*"]} component={VideoPlayer} />
 					</Col>
+					<Col>
+						<Switch>
+                        <Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
+                        <Route path={["/"]} component={VideoInfo}/>
+						</Switch>
+					</Col>
 				</Row>
 				<Row className='scrollable'>
 					<Switch>
-					<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
 					<Route exact path='/' component={VideoList} />
-					<Route render={() => <div>URL not found</div>}/>
+					<Route path={["/video/:id","/search/:query"]} component={Related}/>
 					</Switch>
 				</Row>
 			</React.Fragment>

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 (
         <React.Fragment>
-          <Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
+          <Col  style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
           {/* codice per tabs reccomenders */}
               <Tabs defaultActiveKey={1} id="tabs" animation={0}>
-                  <Tab eventKey={1} title="Video">
+                  <Tab eventKey={1} title="Video" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}>
                       <div>
                           {this.state.VideoDetails.map(function(item,index){
                                   return(
                                       <div key={index}>
-                                          <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
+                                          <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
-                                          <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}>
+                                          <p><b>ID Video :</b> {item.id}<br/>
-                                              <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
+                                              <b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
-                                              <ListGroupItem><h5>Publish Time</h5>{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);
-                                              })}
+                                              })}<br/>
-                                              </ListGroupItem>
+                                              <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
-                                              <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
+                                              <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
-                                              <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
+                                              <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
-                                              <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){
+                                                      if(index===4)
+                                                          return (<br/>);
                                                   return(
                                                       <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
                                                   )
-                                              })}</ListGroupItem>
+                                              })}
-                                          </ListGroup>
+                                          </p>
                                       </div>
                                   )
                               }
                           )}
                       </div>
                   </Tab>
-                  <Tab eventKey={2} title="Tecnical Informations" >
+                  <Tab eventKey={2} title="Tecnical Informations">
                       <div>
                           {this.state.VideoDetails.map(function (item,index) {
                               return(
                                   <div key={index}>
-                                      <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
+                                      <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
-                                      <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}>
+                                      <p><b>Duration :</b> {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){
-                                          <ListGroupItem><h5>Duration</h5>{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);})}
+                                              else return(p6+':'+p7);})}<br/>
-                                          </ListGroupItem>
+                                          <b>Definition :</b> {item.contentDetails.definition}<br/>
-                                          <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
+                                          <b>Dimension :</b> {item.contentDetails.dimension}<br/>
-                                          <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
+                                          <b> Views :</b> {item.statistics.viewCount}<br/>
-                                          <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
+                                          <b>Likes :</b> {item.statistics.likeCount}<br/>
-                                          <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
+                                          <b>Dislikes :</b> {item.statistics.dislikeCount}
-                                          <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
+                                      </p>
-                                      </ListGroup>
                                   </div>
                               )
                           })}
                       </div>
                   </Tab>
-                  <Tab eventKey={3} title="Comment">
+                  <Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
-                      <ul>
+                      <div>
                           {this.state.comments.map(function (item,index) {
                               return(
                                   <div key={index}>
-                                      <Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
+                                      <Card style = {{width: '30rem',fontSize : 'small',marginTop : '0.5rem',marginBottom:'0,5rem',borderRadius : '1rem'}}>
                                           <Card.Body>
-                                              <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '5rem', height : '5rem',padding : '1rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
+                                              <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
                                               <Card.Text>
                                                   <Linkify>
                                                       {item.snippet.topLevelComment.snippet.textDisplay}
@@ -175,7 +173,7 @@
                                   </div>
                               )
                           })}
-                      </ul>
+                      </div>
                   </Tab>
                   <Tab eventKey={4} title="Wikipedia">
                       <div>
@@ -184,9 +182,6 @@
                   </Tab>
               </Tabs>
           </Col>
-          <Col className='border border-dark'  lg={{span:4, offset:1}}>
-          <p>2</p>
-          </Col>
         </React.Fragment>
       );
     }

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 (
+			<div style={{marginTop: '1rem',marginBottom: '1rem'}}>
 			<React.Fragment>
 				<YouTube
-					opts={this.state.opt}
+					opts={opts}
 					videoId={this.state.videoId}
 					onReady={this._onReady}
 					onPlay={this._onPlay}
 					onError={this._onError}
 					onStateChange={this._onStateChange}
-					className="embed-responsive-item"
+					//className="embed-responsive-item"
-					containerClassName="embed-responsive embed-responsive-16by9"
+					//containerClassName="embed-responsive embed-responsive-16by9"
 				/>
 			</React.Fragment>
+			</div>
 		);
 	}
 	
@@ -74,6 +78,7 @@ class VideoPlayer extends Component {
 
 	_onReady(event) {}
 
+
 	_onStateChange(event) {
 		let timerId1, timerId2;
 		if (parseInt(event.data) === -1) {

src/reccomenders/Related.js

@@ -1,44 +1,96 @@
 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 (
-      <div>
+        <div style={{width: '100rem',height:'100rem'}}>
-
+            {this.state.items.map(function (item,index) {
+                return(
+                    <div key={index} style={{margin: '1rem',float: 'left'}}>
+                        <Card>
+                            <Link
+                                to={{
+                                    pathname: '/video/' + item.id.videoId,
+                                }}
+                            >
+                                <Card.Img
+                                    src={item.snippet.thumbnails.high.url}
+                                    alt={'Thumbnail of ' + item.title}
+                                    style={{width:'30rem',height:'20rem'}}
+                                />
+                                <Card.ImgOverlay>
+                                    <Card.Title className="bg-dark d-inline text-white">
+                                        {item.snippet.title}<br/>
+                                        {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
+                                        })}
+                                    </Card.Title>
+                                </Card.ImgOverlay>
+                            </Link>
+                        </Card>
+                    </div>
+                )
+            })}
         </div>
     );
   }