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

maledetto il signore

Browse Source
This commit is contained in:
matteo
2019-02-17 00:17:38 +01:00
parent c01fe3daf7
commit 1c3a5b3409
7 changed files with 52 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+27 -30
View File
@@ -1,6 +1,5 @@
import React from 'react';
import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
@@ -16,54 +15,52 @@ class App extends React.Component {
playerHeight: null,
navHeight: null,
blackbgHeight: null,
dirtyBg: true,
isInfoToggled: false,
videoId: localStorage['lastId']
};
// componentDidMount(){
// componentDidMount() {
// }
// }
// componentDidUpdate(prevProps, prevState) {
// }
// componentDidUpdate(prevProps, prevState) {
static getDerivedStateFromProps(nextProps, prevState) {
let idMatch = matchPath(nextProps.location.pathname, {
path: "/video/:id",
exact: true,
strict: false
});
if(idMatch && idMatch.params.id !== prevState.videoId){
localStorage.setItem('lastId', idMatch.params.id)
return {videoId: idMatch.params.id };
// }
static getDerivedStateFromProps(nextProps, prevState) {
let idMatch = matchPath(nextProps.location.pathname, {
path: "/video/:id",
exact: true,
strict: false
});
if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id };
}
return null;
}
return null;
}
render() {
return (
<React.Fragment>
{/* <HashRouter/> */}
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
<Row id="top">
<TopBar />
</ReactHeight>
<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
</Row>
<Row className="upperSection">
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 6, offset: 0, 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 })}>
<VideoPlayer videoId={this.state.videoId}/>
<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
<VideoPlayer videoId={this.state.videoId} />
</ReactHeight>
</Col>
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
className="p-0 p-sm-0"
style={window.innerWidth < 992 ? { 'overflow': "auto", 'display':'fixed' , 'maxHeight':this.state.playerHeight*1.4+'px'} : { 'overflow': "auto" , 'maxHeight':`${this.state.playerHeight}px`}}>
className="p-0 p-xs-0"
style={window.innerWidth < 992 ? { 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } : { 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>
{/* true = style for xs ;; false = style for lg */}
<div className="d-flex justify-content-center">
<Button
@@ -77,12 +74,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
</div>
<Collapse in={this.state.isInfoToggled}>
<div className="pt-1" id="infovideo-collapse">
<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
<Route render={(props) => <VideoInfo {...props} key={this.state.videoId} videoId={this.state.videoId} />} />
</div>
</Collapse>
</Col>
</ReactHeight>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
</Row>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 46px)` }} className='mt-1 downSection'>
<Switch>
<Route exact path='/' component={VideoList} />
<Route path={"/video/:id"} component={Suggestion} />