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

Merge branch 'playeronside' of https://bitbucket.org/sco44/tecnologiabanana into playeronside

Browse Source
This commit is contained in:
matteo
2018-12-14 17:55:06 +01:00
parent 0bbb6d978e 32f81fda8d
commit 46ea1fa2a4
5 changed files with 146 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+12 -3
View File
@@ -1714,6 +1714,15 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
},
"axios": {
"version": "0.18.0",
"resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
"integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
"requires": {
"follow-redirects": "^1.3.0",
"is-buffer": "^1.1.5"
}
},
"axobject-query": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -8605,9 +8614,9 @@
}
},
"moment": {
"version": "2.22.2",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
"integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
"version": "2.23.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.23.0.tgz",
"integrity": "sha512-3IE39bHVqFbWWaPOMHZF98Q9c3LDKGTmypMiTM2QygGXXElkFWIH7GxfmlwmY2vwa+wmNsoYZmG2iusf1ZjJoA=="
},
"moment-duration-format": {
"version": "2.2.2",
package.json
+1 -1
View File
@@ -9,7 +9,7 @@
"express": "^4.16.4",
"lodash-id": "^0.14.0",
"lowdb": "^1.0.0",
"moment": "^2.22.2",
"moment": "^2.23.0",
"moment-duration-format": "^2.2.2",
"react": "^16.6.1",
"react-app-polyfill": "^0.1.3",
src/App.js
+9 -2
View File
@@ -8,16 +8,20 @@ import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo';
import {ReactHeight} from 'react-height';
import './css/App.css';
import Related from './reccomenders/Related';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isInfoToggled: false,
maxHeight: null,
navHeight: null
navHeight: null,
isInfoToggled: true
};
}
componentDidUpdate(prevProps,prevState,snapshot){
document.location.reload(true);
}
render() {
return (
@@ -41,7 +45,10 @@ class App extends React.Component {
</div>
<Collapse in={this.state.isInfoToggled}>
<div className="pt-2" id="infovideo-collapse">
<Switch>
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
<Route path={["/"]} component={VideoInfo}/>
</Switch>
</div>
</Collapse>
</Col>
src/VideoInfo.js
+46 -67
View File
@@ -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>
src/reccomenders/Related.js
+78 -37
View File
@@ -1,47 +1,88 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios';
import {Link} from "react-router-dom";
import {Card} from "react-bootstrap";
class Related extends Component {
constructor(props) {
super(props);
constructor(props) {
super(props);
this.state={
videoId : '0J2QdDbelmY',
items : []
}
}
}
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() {
componentDidMount() {
axios.get("https://www.googleapis.com/youtube/v3/search",{
params:{
'part': 'snippet',
'relatedToVideoId' : this.state.videoId,
'type' : 'video',
'maxResults' : '21',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
items: response.data.items,
})
console.log(response);
},
error => {
console.error(error);
}
)
}
}
componentWillUpdate(nextProps, nextState) {
if(nextProps.match.params.id === this.state.videoId){}
else if( nextProps.match.params.id){
this.setState({videoId: nextProps.match.params.id});
}
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
}
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) {
}
componentDidUpdate(prevProps, prevState) {
}
componentWillUnmount() {
}
render() {
return (
<div>
</div>
);
}
render() {
return (
<div style={{width: '100rem',height:'100rem'}}>
{this.state.items.map(function (item,index) {
return(
<div key={index} style={{margin: '1rem',float: 'left'}}>
<Card>
<Link
to={{
pathname: '/video/' + item.id.videoId,
}}
>
<Card.Img
src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.title}
style={{width:'30rem',height:'20rem'}}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/>
{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
})}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</div>
)
})}
</div>
);
}
}
Related.propTypes = {