tecnologiabanana/src/VideoInfo.js

import React from 'react';
import Wikipedia from './areainfo/Wikipedia';
import { Tabs, Tab, Table } from 'react-bootstrap';
import { withRouter } from 'react-router-dom';
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';
import './css/VideoInfo.scss';
const ytclear = require('@c0b41/ytclear');

class VideoInfo extends React.Component {

    state = {
        error: null,
        isLoaded: false,
        VideoDetails: {},
        videoId: '',
        comments: [],
        others: {}
    };

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

    ISO_8601parse(a) {
        return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
    }

    isArtistOrTitle(a){
        // switch(parseInt(b)){
        //     case 1:
            
        //         break;
        //     case 2:

        //         break;
        //     default: 
        //         break;
        // }
        axios.all([
            axios.get("https://musicbrainz.org/ws/2/work", {
                params: {
                    query: `work:${a[0]} AND artist:${a[1]}`,
                    //artist: a[1],
                    fmt: "json",
                    limit: 1,
                    inc: "aliases"
                }}),
                axios.get("https://musicbrainz.org/ws/2/work", {
                    params: {
                        query: `work:${a[1]} AND artist:${a[0]}`,
                    //    artist: a[0],
                        fmt: "json",
                        limit: 1,
                        inc: "aliases"

                    }})
            ])
            .then(axios.spread((response1, response2) => { 
                    console.log(response1.data, response2.data);
                    axios.all([
                        axios.get(`https://musicbrainz.org/ws/2/work/${response1.data.works[0].id}`,{
                            params:{
                                fmt:'json',
                                limit:1,
                                inc: 'aliases'
                            }
                        }),
                        axios.get(`https://musicbrainz.org/ws/2/work/${response2.data.works[0].id}`,{
                            params:{
                                fmt:'json',
                                limit:1,
                                inc: 'recording-rels'
                            }
                        }),
                    ]).then(axios.spread((responseA1,responseA2)=>{
                        console.log(responseA1.data, responseA2.data);

                    }))
                }),
                error => { }
            );
            }
        
    

    getInfoComments() {
        return 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.isArtistOrTitle(ytclear(videosResponse.data.items[0].snippet.title).split('-'));
                this.setState({
                    VideoDetails: videosResponse.data.items[0],
                    comments: commentThreadResponse.data.items,
                    others: {
                        artist: null,
                        title: videosResponse.data.items[0].snippet.title
                    },
                    isLoaded: true
                });
            }), error => {
                console.error(error);
                this.setState({
                    isLoaded: true,
                    error
                });
            });
    }

    static getDerivedStateFromProps(nextProps, prevState) {
        if(nextProps.videoId !== prevState.videoId)
            return { videoId: nextProps.videoId };
        return null;
    }
    componentDidMount() {
        this.getInfoComments();
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if(prevState.videoId !== this.state.videoId)
            this.getInfoComments();
    }

    // shouldComponentUpdate(nextProps, nextState) {
    // }
    
    render() {
        const { error, isLoaded, VideoDetails, comments } = this.state;
        const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
        const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method
        if (error) {
            return (
                <span className="text-white">
                <span>{}</span>
                    Error: {error.message} -- Cannot get {error.config.url}
                </span>
            );
        } else if (!isLoaded) {
            return <span className="text-white">Loading...</span>;
        } else {
            return (
                <React.Fragment>
                    <span class="h5 text-white">{VideoDetails.snippet.title}</span>
                    <Tabs defaultActiveKey="video" id="tabs">
                        <Tab className="text-white" eventKey="video" title="Video">
                            <p>
                                <b>ID Video: </b>{VideoDetails.id}<br />
                                <b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
                                <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
                                <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
                                <b>Tags: </b>{VideoDetails.snippet.tags ?
                                    VideoDetails.snippet.tags.map(tag => (<span className='d-block'>{tag}</span>)) : ""}
                                {/* tags should be links  */}
                            </p>
                        </Tab>
                        <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
                            <p><b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
                                <b>Definition: </b> {VideoDetails.contentDetails.definition}<br />
                                <b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br />
                                <b>Views: </b> {VideoDetails.statistics.viewCount}<br />
                                <b>Likes: </b> {VideoDetails.statistics.likeCount}{String.fromCodePoint(0x1F44D)}<br />
                                <b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}{String.fromCodePoint(0x1F44E)}
                            </p>
                        </Tab>
                        <Tab eventKey="comments" title="Comment">
                            {comments.map(function (comment, index) {
                                return (
                                    <Card key={index} className="my-1">
                                        <Card.Body>
                                            <Card.Title>
                                                <Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{ width: '3rem', height: '3rem' }} />
                                                {comment.snippet.topLevelComment.snippet.authorDisplayName}
                                            </Card.Title>
                                            <Card.Text>
                                                <Linkify>
                                                    {comment.snippet.topLevelComment.snippet.textOriginal}
                                                </Linkify>
                                            </Card.Text>
                                        </Card.Body>
                                    </Card>
                                )
                            })}
                        </Tab>
                        <Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
                            <Wikipedia 
                            title={this.state.others.title}
                            artist={this.state.others.artist}
                            videoId={this.state.videoId}
                            />
                        </Tab>
                    </Tabs>
                </React.Fragment>
            );
        }
    }

}
VideoInfo.propTypes = {

};

export default withRouter(VideoInfo);