Archived
modificato videoinfo e app.js
This commit is contained in:
Giampiero Galeazzi
+46
-67
@@ -1,7 +1,6 @@
|
||||
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 { Col, Tabs, Tab,} from 'react-bootstrap';
|
||||
import axios from 'axios';
|
||||
import Linkify from "react-linkify";
|
||||
import Card from "react-bootstrap/lib/Card";
|
||||
@@ -36,7 +35,7 @@ class VideoInfo extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
axios.all([
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
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,
|
||||
@@ -45,7 +44,7 @@ class VideoInfo extends Component {
|
||||
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
||||
params: {
|
||||
'part': 'snippet',
|
||||
'videoId': this.state.videoId, //Da sostituire con variabile
|
||||
'videoId': this.state.videoId,
|
||||
'order': 'relevance',
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
@@ -65,32 +64,13 @@ class VideoInfo extends Component {
|
||||
});
|
||||
}
|
||||
|
||||
// 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, comments } = this.state;
|
||||
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
|
||||
@@ -105,62 +85,61 @@ class VideoInfo extends Component {
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Col className='border border-light' xs={{ span: 12 }} style={{ overflow: 'auto' }}>
|
||||
<Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
|
||||
{/* codice per tabs reccomenders */}
|
||||
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
|
||||
<Tab eventKey={1} title="Video">
|
||||
<div>
|
||||
{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>
|
||||
)
|
||||
}
|
||||
<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>
|
||||
{VideoDetails.map(function (item, index) {
|
||||
return (
|
||||
<Tab eventKey={2} title="Tecnical Informations">
|
||||
<div style={{color:'white'}}>
|
||||
{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>{ momentDuration(item.contentDetails.duration) }</ListGroupItem>
|
||||
<ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
|
||||
<ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
|
||||
<ListGroupItem><h5>Views</h5>{item.statistics.viewCount}{"\uD83D\uDC40"}</ListGroupItem>
|
||||
<ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}{"\uD83D\uDC4D"}</ListGroupItem>
|
||||
<ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}{"\uD83D\uDC4E"}</ListGroupItem>
|
||||
</ListGroup>
|
||||
<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">
|
||||
<ul>
|
||||
{ comments.map(function (item, index) {
|
||||
return (
|
||||
<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: '40rem', fontSize: 'medium', margin: '1em', borderRadius: '1rem' }}>
|
||||
<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: '5rem', height: '5rem', padding: '1rem' }} />{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}
|
||||
@@ -171,7 +150,7 @@ class VideoInfo extends Component {
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey={4} title="Wikipedia">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user