sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ci siamo quasi

Browse Source
This commit is contained in:
matteo
2018-12-15 00:24:41 +01:00
parent 46ea1fa2a4
commit 121a34f007
6 changed files with 1063 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VideoInfo.js
+102 -18
View File
@@ -24,16 +24,17 @@ class VideoInfo extends Component {
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 });
}
}
}
// 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() {
console.log('didmount',this.state.videoId)
axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: {
@@ -64,13 +65,94 @@ class VideoInfo extends Component {
});
}
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, snapshot) {
console.info('didup', this.props.match.params.id)
// this.setState((state, props) => { return { }});
if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
this.setState({ videoId: this.props.match.params.id, isLoaded: false });
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.props.match.params.id,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
params: {
'part': 'snippet',
'videoId': this.props.match.params.id,
'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
});
});
}
}
// shouldComponentUpdate(nextProps, nextState){
// console.log('shouldup', nextProps, nextState)
// if(nextProps.match.params.id)
// return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
// else if(!(nextState.videoId === this.state.videoId))
// return console.log('b') && true;
// else if(nextState.isLoaded)
// return console.log('d') && true;
// else
// return console.log('c') && false;
// }
// componentWillReceiveProps(nextProps){
// if (nextProps.match.params.id === this.state.videoId) { console.log('1',nextProps)}
// else if (nextProps.match.params.id) {
// console.log('2',nextProps)
// this.setState({ videoId: nextProps.match.params.id });
// 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': nextProps.match.params.id,
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
// }
// }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
// params: {
// 'part': 'snippet',
// 'videoId': nextProps.match.params.id,
// '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
// });
// });
// }
// else{
// console.log('3',nextProps)
// }
// }
render() {
const { error, isLoaded, VideoDetails, comments } = this.state;
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
@@ -85,15 +167,15 @@ class VideoInfo extends Component {
} else {
return (
<React.Fragment>
<Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
<Col >
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}>
<Tab eventKey={1} title="Video">
<div style={{color : 'white'}}>
{this.state.VideoDetails.map(function(item,index){
return(
<div key={index}>
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<h5>{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);
@@ -132,14 +214,16 @@ class VideoInfo extends Component {
})}
</div>
</Tab>
<Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
<Tab eventKey={3} title="Comment">
<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 style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
<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.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}