tornati alla vecchia key, migliorato codice

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
+import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
 import 'bootstrap/dist/css/bootstrap.css';
 import { Row, Col, Button, Collapse } from 'react-bootstrap';
 import TopBar from './TopBar';
@@ -16,6 +16,7 @@ class App extends React.Component {
 		playerHeight: null,
 		navHeight: null,
 		blackbgHeight: null,
+		dirtyBg: true,
 		isInfoToggled: false,
 		videoId: localStorage['lastId']
 	};
@@ -45,10 +46,11 @@ static getDerivedStateFromProps(nextProps, prevState) {
 	render() {
 		return (
 			<React.Fragment>
+				{/* <HashRouter/> */}
 				<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" >
+				<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} 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 }}
@@ -61,11 +63,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
 						xs="12"
 						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
 						className="p-0 p-sm-0"
-						style={{ 'overflow': "auto", 'maxHeight': this.state.playerHeight }} >
+						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 })}
+								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled, dirtyBg: true })}
 								className="pt-1 "
 								aria-controls="infovideo-collapse"
 								aria-expanded={this.state.isInfoToggled}>
@@ -74,7 +77,7 @@ static getDerivedStateFromProps(nextProps, prevState) {
 						</div>
 						<Collapse in={this.state.isInfoToggled}>
 							<div className="pt-1" id="infovideo-collapse">
-								<VideoInfo videoId={this.state.videoId} />
+								<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
 							</div>
 						</Collapse>
 					</Col>