tecnologiabanana/src/VideoInfo.js

import React, { Component } from 'react';
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 moment from 'moment';
import momentDurationFormat from 'moment-duration-format';

class VideoInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            VideoDetails: {},
            videoId: '0J2QdDbelmY',
            comments: []
        };
        this.momentDuration = this.momentDuration.bind(this);
    }

    momentDuration(duration){
        return moment.duration(duration).format('hh:mm:ss');
    }

    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.all([
            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,
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
            }
        }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
            params: {
                'part': 'snippet',
                'videoId': this.state.videoId,
                'order': 'relevance',
                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
            }
        })])
            .then(axios.spread((videosResponse, commentThreadResponse) => {
                this.setState({
                    VideoDetails: videosResponse.data.items,
                    comments: commentThreadResponse.data.items,
                    isLoaded: true
                });
            }), error => {
                console.error(error);
                this.setState({
                    isLoaded: true,
                    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 });
        }
    }

    render() {
        const { error, isLoaded, VideoDetails, comments } = this.state;
        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
        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  style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
                        {/* codice per tabs reccomenders */}
                        <Tabs defaultActiveKey={1} id="tabs" animation={0}>
                            <Tab eventKey={1} title="Video" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}>
                                <div style={{color : 'white'}}>
                                    {this.state.VideoDetails.map(function(item,index){
                                            return(
                                                <div key={index}>
                                                    <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
                                                    <p><b>ID Video :</b> {item.id}<br/>
                                                        <b>Publish Time :</b> {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/>
                                                        <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
                                                        <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
                                                        <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
                                                            if(index===4)
                                                                return (<br/>);
                                                            return(
                                                                <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
                                                            )
                                                        })}
                                                    </p>
                                                </div>
                                            )
                                        }
                                    )}
                                </div>
                            </Tab>
                            <Tab eventKey={2} title="Tecnical Informations">
                                <div style={{color:'white'}}>
                                    {this.state.VideoDetails.map(function (item,index) {
                                        return(
                                            <div key={index}>
                                                <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
                                                <p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<br/>
                                                    <b>Definition :</b> {item.contentDetails.definition}<br/>
                                                    <b>Dimension :</b> {item.contentDetails.dimension}<br/>
                                                    <b> Views :</b> {item.statistics.viewCount}<br/>
                                                    <b>Likes :</b> {item.statistics.likeCount}<br/>
                                                    <b>Dislikes :</b> {item.statistics.dislikeCount}
                                                </p>
                                            </div>
                                        )
                                    })}
                                </div>
                            </Tab>
                            <Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
                                <div>
                                    {this.state.comments.map(function (item,index) {
                                        return(
                                            <div key={index}>
                                                <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 : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
                                                        <Card.Text>
                                                            <Linkify>
                                                                {item.snippet.topLevelComment.snippet.textDisplay}
                                                            </Linkify>
                                                        </Card.Text>
                                                    </Card.Body>
                                                </Card>
                                            </div>
                                        )
                                    })}
                                </div>
                            </Tab>
                            <Tab eventKey={4} title="Wikipedia">
                                <div>

                                </div>
                            </Tab>
                        </Tabs>
                    </Col>
                </React.Fragment>
            );
        }
    }
}

VideoInfo.propTypes = {

};

export default VideoInfo;