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

-Aggiungo Reccomender Related.

Browse Source 
-Modificato App.js in modo che il player sia sulla sinistra e le informazioni sulla destra;inoltre le informazioni del video vengono visualizzate anche per il video iniziale quando si apre la pagina per la prima volta.
-Modificato render di VideoInfo.
This commit is contained in:
Giampiero Galeazzi
2018-12-13 19:47:34 +01:00
parent 3110e36b4f
commit a0f8689baa
4 changed files with 133 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+15 -6
View File
@@ -7,24 +7,33 @@ import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo'; import VideoInfo from './VideoInfo';
import './css/App.css'; import './css/App.css';
import Related from './reccomenders/Related.js';
class App extends React.Component { class App extends React.Component {
componentDidUpdate(prevProps,prevState,snapshot){
document.location.reload(true);
}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<Row> <Row>
<TopBar /> <TopBar />
</Row> </Row>
<Row className="justify-content-center bg-black"> <Row>
<Col xs="12" sm="6"> <Col>
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> <Route path={["/video/:id", "/*"]} component={VideoPlayer} />
</Col>
<Col>
<Switch>
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
<Route path={["/"]} component={VideoInfo}/>
</Switch>
</Col> </Col>
</Row> </Row>
<Row className='scrollable'> <Row className='scrollable'>
<Switch> <Switch>
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
<Route exact path='/' component={VideoList} /> <Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>}/> <Route path={["/video/:id","/search/:query"]} component={Related}/>
</Switch> </Switch>
</Row> </Row>
</React.Fragment> </React.Fragment>
src/VideoInfo.js
+30 -35
View File
@@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// import PropTypes from 'prop-types'; // import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia'; 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 axios from 'axios';
import Linkify from "react-linkify"; import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card"; import Card from "react-bootstrap/lib/Card";
@@ -51,7 +51,7 @@
axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
params: { params: {
'part': 'snippet', 'part': 'snippet',
'videoId': this.state.videoId, //Da sostituire con variabile 'videoId': this.state.videoId,
'order': 'relevance', 'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
@@ -106,65 +106,63 @@
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}> <Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
{/* codice per tabs reccomenders */} {/* codice per tabs reccomenders */}
<Tabs defaultActiveKey={1} id="tabs" animation={0}> <Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video"> <Tab eventKey={1} title="Video" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}>
<div> <div>
{this.state.VideoDetails.map(function(item,index){ {this.state.VideoDetails.map(function(item,index){
return( return(
<div key={index}> <div key={index}>
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}> <p><b>ID Video :</b> {item.id}<br/>
<ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem> <b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
<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); return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
})} })}<br/>
</ListGroupItem> <b>Channel Name :</b> {item.snippet.channelTitle}<br/>
<ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem> <b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
<ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem> <b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
<ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){ if(index===4)
return (<br/>);
return( return(
<span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span> <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
) )
})}</ListGroupItem> })}
</ListGroup> </p>
</div> </div>
) )
} }
)} )}
</div> </div>
</Tab> </Tab>
<Tab eventKey={2} title="Tecnical Informations" > <Tab eventKey={2} title="Tecnical Informations">
<div> <div>
{this.state.VideoDetails.map(function (item,index) { {this.state.VideoDetails.map(function (item,index) {
return( return(
<div key={index}> <div key={index}>
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> <h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}> <p><b>Duration :</b> {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){
<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); if(p1) return(p2+':'+p3+':'+p4);
else return(p6+':'+p7);})} else return(p6+':'+p7);})}<br/>
</ListGroupItem> <b>Definition :</b> {item.contentDetails.definition}<br/>
<ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem> <b>Dimension :</b> {item.contentDetails.dimension}<br/>
<ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem> <b> Views :</b> {item.statistics.viewCount}<br/>
<ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem> <b>Likes :</b> {item.statistics.likeCount}<br/>
<ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem> <b>Dislikes :</b> {item.statistics.dislikeCount}
<ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem> </p>
</ListGroup>
</div> </div>
) )
})} })}
</div> </div>
</Tab> </Tab>
<Tab eventKey={3} title="Comment"> <Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
<ul> <div>
{this.state.comments.map(function (item,index) { {this.state.comments.map(function (item,index) {
return( return(
<div key={index}> <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.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> <Card.Text>
<Linkify> <Linkify>
{item.snippet.topLevelComment.snippet.textDisplay} {item.snippet.topLevelComment.snippet.textDisplay}
@@ -175,7 +173,7 @@
</div> </div>
) )
})} })}
</ul> </div>
</Tab> </Tab>
<Tab eventKey={4} title="Wikipedia"> <Tab eventKey={4} title="Wikipedia">
<div> <div>
@@ -184,9 +182,6 @@
</Tab> </Tab>
</Tabs> </Tabs>
</Col> </Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>
</Col>
</React.Fragment> </React.Fragment>
); );
} }
src/VideoPlayer.js
+17 -12
View File
@@ -7,15 +7,6 @@ class VideoPlayer extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
opt: {
// height: '390',
// width: '640',
playerVars: {
// https://developers.google.com/youtube/player_parameters
autoplay: 0,
modestbranding: 1
}
},
videoId: '0J2QdDbelmY', videoId: '0J2QdDbelmY',
promise1: null, promise1: null,
promise2: null, promise2: null,
@@ -33,6 +24,7 @@ class VideoPlayer extends Component {
return { videoId: props.match.params.id }; return { videoId: props.match.params.id };
}); });
} }
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
@@ -44,24 +36,36 @@ class VideoPlayer extends Component {
this.setState((state, props) => { this.setState((state, props) => {
return { videoId: props.match.params.id }; return { videoId: props.match.params.id };
}); });
} }
componentWillUnmount() {} componentWillUnmount() {}
render() { render() {
const opts= {
height: '520',
width: '900',
playerVars: {
// https://developers.google.com/youtube/player_parameters
autoplay: 0,
modestbranding: 1
}
};
return ( return (
<div style={{marginTop: '1rem',marginBottom: '1rem'}}>
<React.Fragment> <React.Fragment>
<YouTube <YouTube
opts={this.state.opt} opts={opts}
videoId={this.state.videoId} videoId={this.state.videoId}
onReady={this._onReady} onReady={this._onReady}
onPlay={this._onPlay} onPlay={this._onPlay}
onError={this._onError} onError={this._onError}
onStateChange={this._onStateChange} onStateChange={this._onStateChange}
className="embed-responsive-item" //className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9" //containerClassName="embed-responsive embed-responsive-16by9"
/> />
</React.Fragment> </React.Fragment>
</div>
); );
} }
@@ -74,6 +78,7 @@ class VideoPlayer extends Component {
_onReady(event) {} _onReady(event) {}
_onStateChange(event) { _onStateChange(event) {
let timerId1, timerId2; let timerId1, timerId2;
if (parseInt(event.data) === -1) { if (parseInt(event.data) === -1) {
src/reccomenders/Related.js
+71 -19
View File
@@ -1,45 +1,97 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import axios from 'axios';
import YouTube from "react-youtube";
import {Link} from "react-router-dom";
import {Card} from "react-bootstrap";
import CardGroup from "react-bootstrap/es/CardGroup";
class Related extends Component { class Related extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={
videoId : '0J2QdDbelmY',
items : []
}
} }
componentWillMount() { 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});
}
}
} }
componentDidMount() { 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);
}
)
} }
componentWillReceiveProps(nextProps) { //componentWillReceiveProps(nextProps) {}
} //shouldComponentUpdate(nextProps, nextState) {}
shouldComponentUpdate(nextProps, nextState) {
}
componentWillUpdate(nextProps, nextState) { componentWillUpdate(nextProps, 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) { //componentDidUpdate(prevProps, prevState) {}
} //componentWillUnmount() {}
componentWillUnmount() {
}
render() { render() {
return ( return (
<div> <div style={{width: '100rem',height:'100rem'}}>
{this.state.items.map(function (item,index) {
</div> 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>
); );
} }
} }