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 { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
import { Row, Col, Button, Collapse } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import { Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
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 Related from './reccomenders/Related';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
maxHeight: null,
playerHeight: null,
navHeight: null,
isInfoToggled: true
blackbgHeight: null,
isInfoToggled: false
};
}
componentDidUpdate(prevProps,prevState,snapshot){
document.location.reload(true);
}
render() {
render() {
return (
<React.Fragment>
<ReactHeight className="row" onHeightReady={height => this.setState({navHeight:height})}>
<TopBar />
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
<TopBar />
</ReactHeight>
<ReactHeight className="upperSection px-2 row" onHeightReady={height => this.setState({maxHeight:height})}>
<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">
<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
<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">
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
</ReactHeight>
</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">
<div className='d-flex justify-content-center pt-2'>
<Button variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="w-75 align-content-center"
aria-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button>
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
className="p-0 p-sm-0"
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
<div class="d-flex justify-content-center">
<Button
variant="outline-light"
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>
<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 className="pt-1" id="infovideo-collapse">
<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
</div>
</Collapse>
</Col>
</ReactHeight>
<Row style={{"max-height": 'calc(99vh - '+this.state.maxHeight+'px - '+this.state.navHeight+'px)'}} className='downSection'>
</ReactHeight>
<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
<Switch>
<Route exact path='/' component={VideoList} />
<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
<Route render={() => <div>URL not found</div>} />
</Switch>
</Row>
src/VideoInfo.js
+102 -18
View File
@@ -24,16 +24,17 @@ class VideoInfo extends Component {
return moment.duration(duration).format('hh:mm:ss');
}
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() {
// 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() {
console.log('didmount',this.state.videoId)
axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: {
@@ -64,13 +65,94 @@ class VideoInfo extends Component {
});
}
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, snapshot) {
console.info('didup', this.props.match.params.id)
// this.setState((state, props) => { return { }});
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() {
const { error, isLoaded, VideoDetails, comments } = this.state;
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
@@ -85,15 +167,15 @@ class VideoInfo extends Component {
} else {
return (
<React.Fragment>
<Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
<Col >
{/* codice per tabs reccomenders */}
<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'}}>
{this.state.VideoDetails.map(function(item,index){
return(
<div key={index}>
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<h5>{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);
@@ -132,14 +214,16 @@ class VideoInfo extends Component {
})}
</div>
</Tab>
<Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
<Tab eventKey={3} title="Comment">
<div>
{this.state.comments.map(function (item,index) {
return(
<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.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>
<Linkify>
{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
clearInterval(timerId1);
},
error => console.info(error)
error => console.error(error)
)
.finally(() => this.setState({ promise1: null }));
break;
src/areainfo/Suggestion.js
+15 -5
View File
@@ -1,7 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Random from './reccomenders/Random';
import Related from './reccomenders/Related';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
// import Random from './reccomenders/Random';
// import Related from './reccomenders/Related';
// and so on..
class Suggestion extends Component {
@@ -39,10 +40,19 @@ class Suggestion extends Component {
}
render() {
let a =['','','','','','','','','','',''];
return (
<div>
</div>
<React.Fragment>
<Col xs="10">
<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;
}
/* .sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1040;
} */
.downSection{
overflow: auto !important;
margin-top: 1vh;
overflow-y: auto;
overflow-x: hidden;
/* margin-top: 1vh; */
}