tecnologiabanana/src/VideoInfo.js

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";
const ytclear = require('@c0b41/ytclear');

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

  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,
				others: {
					artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
					title: ytclear(response.data.items[0].snippet.title).split('-')[1]
				},
        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, //Da sostituire con variabile
              'order': 'relevance',
              'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
          }
      }).then(
          response => {
              this.setState({
                  comments: response.data.items,
              });
          },
          error => {
              console.error(error);
          }
      )
  }

  // 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 } = this.state;
  if (error) {
      return (
        <React.Fragment>
          Error: {error.message} -- Cannot get {error.config.url}
        </React.Fragment>
      );
    } else if (!isLoaded) {
      return <React.Fragment>Loading...</React.Fragment>;
    } else {
    return (
      <React.Fragment>
        <Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
        {/* codice per tabs reccomenders */}
            <Tabs defaultActiveKey={1} id="tabs" animation={0}>
                <Tab eventKey={1} title="Video">
                    <div>
                        {this.state.VideoDetails.map(function(item,index){
                                return(
                                    <div key={index}>
                                        <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
                                        <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}>
                                            <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
                                            <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);
                                            })}
                                            </ListGroupItem>
                                            <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
                                            <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
                                            <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){
                                                return(
                                                    <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
                                                )
                                            })}</ListGroupItem>
                                        </ListGroup>
                                    </div>
                                )
                            }
                        )}
                    </div>
                </Tab>
                <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>
                                    <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}>
                                        <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);})}
                                        </ListGroupItem>
                                        <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
                                        <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
                                        <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
                                        <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
                                        <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
                                    </ListGroup>
                                </div>
                            )
                        })}
                    </div>
                </Tab>
                <Tab eventKey={3} title="Comment">
                    <ul>
                        {this.state.comments.map(function (item,index) {
                            return(
                                <div key={index}>
                                    <Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',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.Text>
                                                <Linkify>
                                                    {item.snippet.topLevelComment.snippet.textDisplay}
                                                </Linkify>
                                            </Card.Text>
                                        </Card.Body>
                                    </Card>
                                </div>
                            )
                        })}
                    </ul>
                </Tab>
                <Tab eventKey={4} title="Wikipedia">
								<Wikipedia
									title={
										this.props.location.state
											? this.props.location.state.title
											: this.state.others.title
									}
									artist={
										this.props.location.state
											? this.props.location.state.artist
											: this.state.others.artist
									}
									videoId={this.props.match.params.id}
								/>
                </Tab>
            </Tabs>
        </Col>
        <Col className='border border-dark'  lg={{span:4, offset:1}}>
        <p>2</p>
        </Col>
      </React.Fragment>
    );
  }
  }
}

VideoInfo.propTypes = {

};

export default VideoInfo;