Archived
GeneralTab rimosso,codice spostato in VideoInfo
This commit is contained in:
Giampiero Galeazzi
Generated
+39
-30
@@ -5488,8 +5488,7 @@
|
||||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
@@ -5507,13 +5506,11 @@
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@@ -5526,18 +5523,15 @@
|
||||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@@ -5640,8 +5634,7 @@
|
||||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
@@ -5651,7 +5644,6 @@
|
||||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
@@ -5664,20 +5656,17 @@
|
||||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
@@ -5694,7 +5683,6 @@
|
||||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
@@ -5767,8 +5755,7 @@
|
||||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
@@ -5778,7 +5765,6 @@
|
||||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
@@ -5854,8 +5840,7 @@
|
||||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
@@ -5885,7 +5870,6 @@
|
||||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
@@ -5903,7 +5887,6 @@
|
||||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
@@ -5942,13 +5925,11 @@
|
||||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -8145,6 +8126,14 @@
|
||||
"type-check": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
|
||||
"integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
|
||||
"requires": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"load-json-file": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
|
||||
@@ -11488,6 +11477,16 @@
|
||||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-linkify": {
|
||||
"version": "0.2.2",
|
||||
"resolved": "https://registry.npmjs.org/react-linkify/-/react-linkify-0.2.2.tgz",
|
||||
"integrity": "sha512-0S8cvUNtEgfJpIGDPKklyrnrTffJ63WuJAc4KaYLBihl5TjgH5cHUmYD+AXLpsV+CVmfoo/56SUNfrZcY4zYMQ==",
|
||||
"requires": {
|
||||
"linkify-it": "^2.0.3",
|
||||
"prop-types": "^15.5.8",
|
||||
"tlds": "^1.57.0"
|
||||
}
|
||||
},
|
||||
"react-overlays": {
|
||||
"version": "1.0.0-beta.17",
|
||||
"resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.0.0-beta.17.tgz",
|
||||
@@ -13737,6 +13736,11 @@
|
||||
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
|
||||
},
|
||||
"tlds": {
|
||||
"version": "1.203.1",
|
||||
"resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
|
||||
"integrity": "sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw=="
|
||||
},
|
||||
"tmp": {
|
||||
"version": "0.0.33",
|
||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||
@@ -13895,6 +13899,11 @@
|
||||
"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
|
||||
"integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
|
||||
},
|
||||
"uc.micro": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
|
||||
"integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.9",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",
|
||||
|
||||
+3
-4
@@ -3,19 +3,18 @@
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"axios": "^0.18.0",
|
||||
"axios": "latest",
|
||||
"bootstrap": "^4.1.3",
|
||||
"express": "^4.16.4",
|
||||
"react": "^16.6.1",
|
||||
"react-app-polyfill": "^0.1.3",
|
||||
"react-bootstrap": "^1.0.0-beta.2",
|
||||
"react-dom": "^16.6.1",
|
||||
"react-linkify": "^0.2.2",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "2.1.1",
|
||||
"react-youtube": "^7.8.0",
|
||||
"wikijs": "^4.8.1",
|
||||
"axios": "latest",
|
||||
"axios": "latest"
|
||||
"wikijs": "^4.8.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
|
||||
+4
-3
@@ -1,11 +1,12 @@
|
||||
import React, { Component } from 'react';
|
||||
import './App.css';
|
||||
//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';
|
||||
import VideoPlayer from './VideoPlayer';
|
||||
|
||||
class GeneralTab extends Component {
|
||||
constructor() {
|
||||
@@ -21,7 +22,7 @@ class GeneralTab extends Component {
|
||||
axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
|
||||
params: {
|
||||
'part': 'snippet',
|
||||
'videoId': 'qeMFqkcPYcg', //Da sostituire con variabile
|
||||
'videoId': this.state.videoId, //Da sostituire con variabile
|
||||
'order': 'relevance',
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
@@ -39,7 +40,7 @@ class GeneralTab extends Component {
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
'part' : 'snippet,contentDetails,statistics',
|
||||
'id' : 'qeMFqkcPYcg', //Da sostituire con variabile
|
||||
'id' : this.state.videoId, //Da sostituire con variabile
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
|
||||
+101
-15
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user