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:
Giampiero Galeazzi
2018-12-14 18:24:50 +01:00
parent ec86e9b706 46ea1fa2a4
commit d34f049d7f
5 changed files with 75 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+12 -10
View File
@@ -6,6 +6,7 @@ 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 VideoInfo from './VideoInfo';
import {ReactHeight} from 'react-height';
import './css/App.css';
import Related from './reccomenders/Related';
import Random from './reccomenders/Random';
@@ -14,6 +15,8 @@ class App extends React.Component {
constructor(props) {
super(props);
this.state = {
maxHeight: null,
navHeight: null,
isInfoToggled: true
};
}
@@ -21,14 +24,14 @@ class App extends React.Component {
render() {
return (
<React.Fragment>
<Row>
<TopBar />
</Row>
<Row className="upperSection px-2">
<Col xs="12" lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 6, offset: 0, order: 2 }} className="align-content-center pt-2 p-1 pr-2">
<ReactHeight className="row" onHeightReady={height => this.setState({navHeight: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} />
</Col>
<Col xs="12" lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }} style={{ overflow: "auto" }} className="w-75 h-100 py-2 p-0 p-sm-0">
<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 })}
@@ -47,11 +50,10 @@ class App extends React.Component {
</div>
</Collapse>
</Col>
</Row>
<Row className='downSection'>
</ReactHeight>
<Row style={{"max-height": 'calc(99vh - '+this.state.maxHeight+'px - '+this.state.navHeight+'px)'}} className='downSection'>
<Switch>
{/* */}
<Route exact path='/' component={Random} />
<Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>} />
</Switch>
</Row>