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
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>