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

ci siamo quasi

Browse Source
This commit is contained in:
matteo
2018-12-15 00:24:41 +01:00
parent 46ea1fa2a4
commit 121a34f007
6 changed files with 1063 additions and 1001 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+893 -940
View File
File diff suppressed because it is too large Load Diff
src/App.js
+42 -35
View File
@@ -1,61 +1,68 @@
import React from 'react'; import React from 'react';
import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars import { Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap'; // eslint-disable-line no-unused-vars import { Row, Col, Button, Collapse } from 'react-bootstrap';
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars import TopBar from './TopBar';
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars import VideoPlayer from './VideoPlayer';
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo'; import VideoInfo from './VideoInfo';
import {ReactHeight} from 'react-height'; import VideoList from './VideoList';
import Suggestion from './areainfo/Suggestion';
import { ReactHeight } from 'react-height';
import './css/App.css'; import './css/App.css';
import Related from './reccomenders/Related';
class App extends React.Component { class App extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
maxHeight: null, playerHeight: null,
navHeight: null, navHeight: null,
isInfoToggled: true blackbgHeight: null,
isInfoToggled: false
}; };
} }
componentDidUpdate(prevProps,prevState,snapshot){
document.location.reload(true);
}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<ReactHeight className="row" onHeightReady={height => this.setState({navHeight:height})}> <ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
<TopBar /> <TopBar />
</ReactHeight> </ReactHeight>
<ReactHeight className="upperSection px-2 row" onHeightReady={height => this.setState({maxHeight:height})}> <ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }} className="align-content-center pt-2 p-1 pr-2"> <Col
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> xs="12"
lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }}
className="align-content-center pt-2 p-1 pr-2">
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
</ReactHeight>
</Col> </Col>
<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ 'overflow': "auto", 'max-height': this.state.maxHeight }} className="w-75 h-100 py-2 p-0 p-sm-0"> <Col
<div className='d-flex justify-content-center pt-2'> xs="12"
<Button variant="outline-light" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })} className="p-0 p-sm-0"
className="w-75 align-content-center" style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
aria-controls="infovideo-collapse" <div class="d-flex justify-content-center">
aria-expanded={this.state.isInfoToggled}> <Button
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"} variant="outline-light"
</Button> onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="w-50 pt-1 align-content-center"
aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button>
</div> </div>
<Collapse in={this.state.isInfoToggled}> <Collapse in={this.state.isInfoToggled}>
<div className="pt-2" id="infovideo-collapse"> <div className="pt-1" id="infovideo-collapse">
<Switch> <Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
<Route path={["/"]} component={VideoInfo}/>
</Switch>
</div> </div>
</Collapse> </Collapse>
</Col> </Col>
</ReactHeight> </ReactHeight>
<Row style={{"max-height": 'calc(99vh - '+this.state.maxHeight+'px - '+this.state.navHeight+'px)'}} className='downSection'> <Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
<Switch> <Switch>
<Route exact path='/' component={VideoList} /> <Route exact path='/' component={VideoList} />
<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
<Route render={() => <div>URL not found</div>} /> <Route render={() => <div>URL not found</div>} />
</Switch> </Switch>
</Row> </Row>
src/VideoInfo.js
+102 -18
View File
@@ -24,16 +24,17 @@ class VideoInfo extends Component {
return moment.duration(duration).format('hh:mm:ss'); return moment.duration(duration).format('hh:mm:ss');
} }
componentWillMount() { // componentWillMount() {
if (this.props.match.params.id) { // if (this.props.match.params.id) {
if (this.props.match.params.id === this.state.videoId) { } // if (this.props.match.params.id === this.state.videoId) { }
else { // else {
this.setState({ videoId: this.props.match.params.id }); // this.setState({ videoId: this.props.match.params.id });
} // }
} // }
} // }
componentDidMount() { componentDidMount() {
console.log('didmount',this.state.videoId)
axios.all([ axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: { params: {
@@ -64,13 +65,94 @@ class VideoInfo extends Component {
}); });
} }
componentWillUpdate(nextProps, nextState) { componentDidUpdate(prevProps, prevState, snapshot) {
if (nextProps.match.params.id === this.state.videoId) { } console.info('didup', this.props.match.params.id)
else if (nextProps.match.params.id) { // this.setState((state, props) => { return { }});
this.setState({ videoId: nextProps.match.params.id }); if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
this.setState({ videoId: this.props.match.params.id, isLoaded: false });
axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.props.match.params.id,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
params: {
'part': 'snippet',
'videoId': this.props.match.params.id,
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({
VideoDetails: videosResponse.data.items,
comments: commentThreadResponse.data.items,
isLoaded: true
});
}), error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
});
} }
} }
// shouldComponentUpdate(nextProps, nextState){
// console.log('shouldup', nextProps, nextState)
// if(nextProps.match.params.id)
// return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
// else if(!(nextState.videoId === this.state.videoId))
// return console.log('b') && true;
// else if(nextState.isLoaded)
// return console.log('d') && true;
// else
// return console.log('c') && false;
// }
// componentWillReceiveProps(nextProps){
// if (nextProps.match.params.id === this.state.videoId) { console.log('1',nextProps)}
// else if (nextProps.match.params.id) {
// console.log('2',nextProps)
// this.setState({ videoId: nextProps.match.params.id });
// axios.all([
// axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
// params: {
// 'part': 'snippet,contentDetails,statistics,topicDetails',
// 'id': nextProps.match.params.id,
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
// }
// }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
// params: {
// 'part': 'snippet',
// 'videoId': nextProps.match.params.id,
// 'order': 'relevance',
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
// }
// })])
// .then(axios.spread((videosResponse, commentThreadResponse) => {
// this.setState({
// VideoDetails: videosResponse.data.items,
// comments: commentThreadResponse.data.items,
// isLoaded: true
// });
// }), error => {
// console.error(error);
// this.setState({
// isLoaded: true,
// error
// });
// });
// }
// else{
// console.log('3',nextProps)
// }
// }
render() { render() {
const { error, isLoaded, VideoDetails, comments } = this.state; const { error, isLoaded, VideoDetails, comments } = this.state;
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
@@ -85,15 +167,15 @@ class VideoInfo extends Component {
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
<Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}> <Col >
{/* 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" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}> <Tab eventKey={1} title="Video">
<div style={{color : 'white'}}> <div style={{color : 'white'}}>
{this.state.VideoDetails.map(function(item,index){ {this.state.VideoDetails.map(function(item,index){
return( return(
<div key={index}> <div key={index}>
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5> <h5>{item.snippet.title}</h5>
<p><b>ID Video :</b> {item.id}<br/> <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){ <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); return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
@@ -132,14 +214,16 @@ class VideoInfo extends Component {
})} })}
</div> </div>
</Tab> </Tab>
<Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}> <Tab eventKey={3} title="Comment">
<div> <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: '30rem',fontSize : 'small',marginTop : '0.5rem',marginBottom:'0,5rem',borderRadius : '1rem'}}> <Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
<Card.Body> <Card.Body>
<Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{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}
src/VideoPlayer.js
+1 -1
View File
@@ -122,7 +122,7 @@ class VideoPlayer extends Component {
// local storage logic for recent reccomender // local storage logic for recent reccomender
clearInterval(timerId1); clearInterval(timerId1);
}, },
error => console.info(error) error => console.error(error)
) )
.finally(() => this.setState({ promise1: null })); .finally(() => this.setState({ promise1: null }));
break; break;
src/areainfo/Suggestion.js
+15 -5
View File
@@ -1,7 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Random from './reccomenders/Random'; import { Row, Col, Button, Collapse } from 'react-bootstrap';
import Related from './reccomenders/Related'; // import Random from './reccomenders/Random';
// import Related from './reccomenders/Related';
// and so on.. // and so on..
class Suggestion extends Component { class Suggestion extends Component {
@@ -39,10 +40,19 @@ class Suggestion extends Component {
} }
render() { render() {
let a =['','','','','','','','','','',''];
return ( return (
<div> <React.Fragment>
<Col xs="10">
</div> <Row>
{a.map((x,i) => <Col xs={{'span': 10, 'offset': 1}} className="mt-1 border border-danger">- video {i}</Col>)}
</Row>
</Col>
<Col className="mt-1 mr-2 border border-danger">
{a.map((x,i) => i)}
?? box utile o superfluo?
</Col>
</React.Fragment>
); );
} }
} }
src/css/App.css
+10 -2
View File
@@ -2,7 +2,15 @@
background-color:#000000; background-color:#000000;
} }
/* .sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1040;
} */
.downSection{ .downSection{
overflow: auto !important; overflow-y: auto;
margin-top: 1vh; overflow-x: hidden;
/* margin-top: 1vh; */
} }