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

Tab del video

Browse Source
This commit is contained in:
Giampiero Galeazzi
2018-11-28 14:31:15 +01:00
parent 2b72053276
commit bdd6308d68
3 changed files with 148 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+4 -2
View File
@@ -5854,7 +5854,8 @@
},
"safe-buffer": {
"version": "5.1.1",
"bundled": true
"bundled": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@@ -5946,7 +5947,8 @@
},
"yallist": {
"version": "3.0.2",
"bundled": true
"bundled": true,
"optional": true
}
}
},
src/GeneralTab.css
+6
View File
@@ -0,0 +1,6 @@
.fade {
opacity: 200;
/* -webkit-transition: opacity .15s linear; */
-o-transition: opacity .15s linear;
/* transition: opacity .15s linear; */
}
src/GeneralTab.js
+138
View File
@@ -0,0 +1,138 @@
import React, { Component } from 'react';
import './App.css';
import './GeneralTab.css';
import 'bootstrap/dist/css/bootstrap.css';
import {Tab,Tabs,ListGroup,ListGroupItem} from 'react-bootstrap';
import axios from "axios";
import Card from "react-bootstrap/lib/Card";
import Linkify from 'react-linkify';
class GeneralTab extends Component {
constructor() {
super();
this.state = {
comments: [],
info : []
};
}
componentDidMount(){
//Richiesta per ottenere i commenti del video
axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
params: {
'part': 'snippet',
'videoId': 'qeMFqkcPYcg', //Da sostituire con variabile
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
comments: response.data.items,
});
},
error => {
console.error(error);
}
)
//Richiesta per ottenere le informazioni sul video(Descrizione,dati tecnici,ecc...)
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
'part' : 'snippet,contentDetails,statistics',
'id' : 'qeMFqkcPYcg', //Da sostituire con variabile
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
info : response.data.items,
});
},
error => {
console.error(error);
}
)
}
render() {
return (
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video">
<div>
{this.state.info.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.info.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>
);
}
}
export default GeneralTab;