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

GeneralTab rimosso,codice spostato in VideoInfo

Browse Source
This commit is contained in:
Giampiero Galeazzi
2018-12-12 19:07:10 +01:00
parent e16db0641a
commit e1d427ed45
4 changed files with 147 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VideoInfo.js
+101 -15
View File
@@ -1,8 +1,10 @@
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap';
import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap';
import axios from 'axios';
import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card";
class VideoInfo extends Component {
constructor(props) {
@@ -11,7 +13,8 @@
error: null,
isLoaded: false,
VideoDetails: {},
videoId: '0J2QdDbelmY'
videoId: '0J2QdDbelmY',
comments : []
};
}
@@ -34,7 +37,7 @@
}
}).then(response => {
this.setState({
VideoDetails: response.data.items[0],
VideoDetails: response.data.items,
isLoaded: true});
}, error => {
console.error(error);
@@ -43,6 +46,25 @@
error
});
});
//Richiesta per ottenere i commenti del video
axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
params: {
'part': 'snippet',
'videoId': this.state.videoId, //Da sostituire con variabile
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
comments: response.data.items,
});
},
error => {
console.error(error);
}
)
}
// componentWillReceiveProps(nextProps) {
@@ -84,19 +106,83 @@
} else {
return (
<React.Fragment>
<Col className='border border-dark' lg={{span:7}}>
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
<Tab eventKey="a" title="A">
<Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
</Tab>
<Tab eventKey="b" title="B">
<p>{}</p>
</Tab>
<Tab eventKey="c" title="C">
<p>C</p>
</Tab>
</Tabs>
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video">
<div>
{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',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>
)
}
)}
</div>
</Tab>
<Tab eventKey={2} title="Tecnical Informations" >
<div>
{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>{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){
if(p1) return(p2+':'+p3+':'+p4);
else return(p6+':'+p7);})}
</ListGroupItem>
<ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
<ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
<ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
<ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
<ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
</ListGroup>
</div>
)
})}
</div>
</Tab>
<Tab eventKey={3} title="Comment">
<ul>
{this.state.comments.map(function (item,index) {
return(
<div key={index}>
<Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',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.Text>
<Linkify>
{item.snippet.topLevelComment.snippet.textDisplay}
</Linkify>
</Card.Text>
</Card.Body>
</Card>
</div>
)
})}
</ul>
</Tab>
<Tab eventKey={4} title="Wikipedia">
<div>
</div>
</Tab>
</Tabs>
</Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>