Archived
succo ace
This commit is contained in:
matteo
+100
-60
@@ -1,39 +1,94 @@
|
||||
import React, { Component } from 'react';
|
||||
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 Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
VideoDetails: {},
|
||||
videoId: '0J2QdDbelmY',
|
||||
comments: []
|
||||
};
|
||||
this.momentDuration = this.momentDuration.bind(this);
|
||||
this.ISO_8601parse = this.ISO_8601parse.bind(this);
|
||||
}
|
||||
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:
|
||||
|
||||
|
||||
componentDidMount() {
|
||||
console.log('didmount', this.state.videoId)
|
||||
// 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',
|
||||
@@ -49,9 +104,14 @@ class VideoInfo extends Component {
|
||||
}
|
||||
})])
|
||||
.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 => {
|
||||
@@ -63,46 +123,23 @@ class VideoInfo extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
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))
|
||||
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[0],
|
||||
comments: commentThreadResponse.data.items,
|
||||
isLoaded: true
|
||||
});
|
||||
}), error => {
|
||||
console.error(error);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
error
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log(nextProps)
|
||||
if (nextProps.match.params.id && !(nextProps.match.params.id === this.state.videoId)) {
|
||||
this.setState({ videoId: nextProps.match.params.id })
|
||||
} // mindfuck
|
||||
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
|
||||
@@ -110,6 +147,7 @@ class VideoInfo extends Component {
|
||||
if (error) {
|
||||
return (
|
||||
<span className="text-white">
|
||||
<span>{}</span>
|
||||
Error: {error.message} -- Cannot get {error.config.url}
|
||||
</span>
|
||||
);
|
||||
@@ -127,7 +165,7 @@ class VideoInfo extends Component {
|
||||
<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>{tag}</span>)) : ""}
|
||||
VideoDetails.snippet.tags.map(tag => (<span className='d-block'>{tag}</span>)) : ""}
|
||||
{/* tags should be links */}
|
||||
</p>
|
||||
</Tab>
|
||||
@@ -159,10 +197,12 @@ class VideoInfo extends Component {
|
||||
)
|
||||
})}
|
||||
</Tab>
|
||||
<Tab eventKey="wikipedia" title="Wikipedia">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<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>
|
||||
@@ -175,4 +215,4 @@ VideoInfo.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default VideoInfo;
|
||||
export default withRouter(VideoInfo);
|
||||
|
||||
Reference in New Issue
Block a user