altezze dinamiche in base al dispositivo

db.json

@@ -0,0 +1,44 @@
+{
+  "videos": [
+    {
+      "id": "cu3K1njbYqs",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:18.202Z"
+    },
+    {
+      "id": "PoSbnAFvqfA",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:43:24.851Z"
+    },
+    {
+      "id": "rzeLynj1GYM",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:43:45.916Z"
+    },
+    {
+      "id": "0J2QdDbelmY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:49:32.498Z"
+    },
+    {
+      "id": "unRjK82bDLw",
+      "timesWatched": 2,
+      "lastWatched": "2018-12-02T20:49:50.769Z"
+    },
+    {
+      "id": "g2N0TkfrQhY",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:07.780Z"
+    },
+    {
+      "id": "EM4vblG6BVQ",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:52:43.282Z"
+    },
+    {
+      "id": "tPwqOWK6EFw",
+      "timesWatched": 1,
+      "lastWatched": "2018-12-02T20:53:26.049Z"
+    }
+  ]
+}

package-lock.json

@@ -11492,6 +11492,24 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.0.tgz",
       "integrity": "sha512-akMy/BQT5m1J3iJIHkSb4qycq2wzllWsmmolaaFVnb+LPV9cIJ/nTud40ZsiiT0H3P+/wXIdbjx2fzF61OaeOQ=="
     },
+    "react-height": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/react-height/-/react-height-3.0.0.tgz",
+      "integrity": "sha1-+uMi+dpk0+niVTbya3fHOVQmFSQ=",
+      "requires": {
+        "prop-types": "15.5.8"
+      },
+      "dependencies": {
+        "prop-types": {
+          "version": "15.5.8",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.5.8.tgz",
+          "integrity": "sha1-a3suFBCDvjjIWVqlH8VXdccZk5Q=",
+          "requires": {
+            "fbjs": "^0.8.9"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "16.6.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",
     "react-dom": "^16.6.1",
+    "react-height": "^3.0.0",
     "react-linkify": "^0.2.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",

src/App.js

@@ -6,27 +6,30 @@ 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';
 
 class App extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			isInfoToggled: false
+			isInfoToggled: false,
+			maxHeight: null,
+			navHeight: null
 		};
 }
 
 	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 })}
@@ -42,10 +45,9 @@ 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={VideoList} />
 						<Route render={() => <div>URL not found</div>} />
 					</Switch>

src/css/App.css

@@ -2,15 +2,7 @@
   background-color:#000000;
 }
 
-@media (min-width: 992px) { 
-  .upperSection{
-    background-color:#000000;
-    height: 55vh;
-  }
-}
-
 .downSection{
   overflow: auto !important;
-  height: 40vh;
   margin-top: 1vh;
 }