Archived
98 lines
3.0 KiB
JavaScript
98 lines
3.0 KiB
JavaScript
import React from 'react';
|
|
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';
|
|
import VideoInfo from './VideoInfo';
|
|
import VideoList from './VideoList';
|
|
import Suggestion from './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']
|
|
};
|
|
|
|
// 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>
|
|
<Row id="top">
|
|
<TopBar />
|
|
</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>
|
|
</Col>
|
|
<Col
|
|
xs="12"
|
|
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
|
|
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
|
|
variant="outline-light"
|
|
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled, dirtyBg: true })}
|
|
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">
|
|
<Route render={(props) => <VideoInfo {...props} key={this.state.videoId} videoId={this.state.videoId} />} />
|
|
</div>
|
|
</Collapse>
|
|
</Col>
|
|
</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} />
|
|
<Route path={"/search/:query"} component={Suggestion} />
|
|
<Route render={() => <div>URL not found</div>} />
|
|
</Switch>
|
|
</Row>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(App);
|