Archived
95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
import { Route, Switch, withRouter, matchPath } 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 VideoList from './VideoList';
|
|
import Suggestion from './areainfo/Suggestion';
|
|
import { ReactHeight } from 'react-height';
|
|
import './css/App.css';
|
|
|
|
|
|
class App extends React.Component {
|
|
state = {
|
|
playerHeight: null,
|
|
navHeight: null,
|
|
blackbgHeight: null,
|
|
isInfoToggled: false,
|
|
videoId: localStorage['lastId']?localStorage['lastId']:'0J2QdDbelmY'
|
|
};
|
|
|
|
// componentDidMount(){
|
|
|
|
// }
|
|
|
|
// 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 };
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
|
|
<TopBar />
|
|
</ReactHeight>
|
|
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
|
|
<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>
|
|
</Col>
|
|
<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="pt-1 "
|
|
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-1" id="infovideo-collapse">
|
|
<VideoInfo videoId={this.state.videoId} />
|
|
</div>
|
|
</Collapse>
|
|
</Col>
|
|
</ReactHeight>
|
|
<Row style={{ "max-height": `calc(98vh - ${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>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(App);
|