show video info on left with scroll on > 992px width devices, without scroll otherwise

package-lock.json

@@ -1714,15 +1714,6 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
       "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ=="
     },
-    "axios": {
-      "version": "0.18.0",
-      "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
-      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
-      "requires": {
-        "follow-redirects": "^1.3.0",
-        "is-buffer": "^1.1.5"
-      }
-    },
     "axobject-query": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -8613,6 +8604,16 @@
         "minimist": "0.0.8"
       }
     },
+    "moment": {
+      "version": "2.22.2",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.2.tgz",
+      "integrity": "sha1-PCV/mDn8DpP/UxSWMiOeuQeD/2Y="
+    },
+    "moment-duration-format": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/moment-duration-format/-/moment-duration-format-2.2.2.tgz",
+      "integrity": "sha1-uVdhLeJgFsmtnrYIfAVFc+USd3k="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

package.json

@@ -9,6 +9,8 @@
     "express": "^4.16.4",
     "lodash-id": "^0.14.0",
     "lowdb": "^1.0.0",
+    "moment": "^2.22.2",
+    "moment-duration-format": "^2.2.2",
     "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",
@@ -23,6 +25,7 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
+    "node": "npm run build && node ./node-entry.js",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
 import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars
-import { Row, Col, Button } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Row, Col, Button, Collapse } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
 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
@@ -9,27 +9,43 @@ import VideoInfo from './VideoInfo';
 import './css/App.css';
 
 class App extends React.Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			isInfoToggled: false
+		};
+}
+
 	render() {
 		return (
 			<React.Fragment>
 				<Row>
 					<TopBar />
 				</Row>
-				<Row className="bg-black px-2">
+				<Row className="upperSection px-2">
-					<Col xs="12" sm={{ span: 6, order: 6}} className="pt-2 p-0 p-sm-0">
+					<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">
 						<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
 					</Col>
-					<Col xs="12" sm="6" className="w-75 pt-2 p-0 p-sm-0">
+					<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">
-					<Button variant="outline-light" className="w-100 align-content-center d-sm-none">Info</Button>
+						<div className='d-flex justify-content-center pt-2'>
-					<p className="text-white">Qui andrebbero le informazioni video, 
+							<Button variant="outline-light"
-					in modalità telefono questo spazio è sotto il video e si potrebbe
+								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
-					fare a scomparsa con un pulsante, lasciando un label cliccabile per aprire e chiudere
+								className="w-75 align-content-center"
-					la scheda</p>
+								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-2" id="infovideo-collapse">
+								<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
+							</div>
+						</Collapse>
 					</Col>
 				</Row>
-				<Row className='scrollable'>
+				<Row className='downSection'>
 					<Switch>
-					<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
+						{/*  */}
 						<Route exact path='/' component={VideoList} />
 						<Route render={() => <div>URL not found</div>} />
 					</Switch>

src/VideoInfo.js

@@ -5,6 +5,8 @@
 import axios from 'axios';
 import Linkify from "react-linkify";
 import Card from "react-bootstrap/lib/Card";
+import moment from 'moment';
+import momentDurationFormat from 'moment-duration-format';
 
 class VideoInfo extends Component {
     constructor(props) {
@@ -16,7 +18,11 @@
             videoId: '0J2QdDbelmY',
             comments: []
         };
+        this.momentDuration = this.momentDuration.bind(this);
+    }
 
+    momentDuration(duration){
+        return moment.duration(duration).format('hh:mm:ss');
     }
 
     componentWillMount() {
@@ -29,42 +35,34 @@
     }
 
     componentDidMount() {
+        axios.all([
             axios.get('https://www.googleapis.com/youtube/v3/videos', {
             params: {
                 'part': 'snippet,contentDetails,statistics,topicDetails',
                 'id': this.state.videoId,
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
-      }).then(response => {
+        }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
-        this.setState({
-          VideoDetails: response.data.items,
-          isLoaded: true});
-    }, error => {
-        console.error(error);
-        this.setState({
-          isLoaded: true,
-          error
-        });
-      });
-
-        //Richiesta per ottenere i commenti del video
-        axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
             params: {
                 'part': 'snippet',
                 'videoId': this.state.videoId, //Da sostituire con variabile
                 'order': 'relevance',
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
-        }).then(
+        })])
-            response => {
+            .then(axios.spread((videosResponse, commentThreadResponse) => {
                 this.setState({
-                    comments: response.data.items,
+                    VideoDetails: videosResponse.data.items,
+                    comments: commentThreadResponse.data.items,
+                    isLoaded: true
                 });
-            },
+            }), error => {
-            error => {
                 console.error(error);
-            }
+                this.setState({
-        )
+                    isLoaded: true,
+                    error
+                });
+            });
     }
 
     // componentWillReceiveProps(nextProps) {
@@ -94,7 +92,8 @@
     // }
 
     render() {
-      const { error, isLoaded, VideoDetails } = this.state;
+        const { error, isLoaded, VideoDetails, comments } = this.state;
+        const momentDuration  = this.momentDuration; // bind momentDuration in render to the actual method
         if (error) {
             return (
                 <React.Fragment>
@@ -106,15 +105,15 @@
         } else {
             return (
                 <React.Fragment>
-          <Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
+                    <Col className='border border-light' xs={{ span: 12 }} style={{ overflow: 'auto' }}>
                         {/* codice per tabs reccomenders */}
                         <Tabs defaultActiveKey={1} id="tabs" animation={0}>
                             <Tab eventKey={1} title="Video">
                                 <div>
-                          {this.state.VideoDetails.map(function(item,index){
+                                    {VideoDetails.map(function (item, index) {
                                         return (
                                             <div key={index}>
-                                          <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
+                                                {/* <h1 style={{ margin: '1rem' }}>{item.snippet.title}</h1> */}
                                                 <ListGroup style={{ display: 'inline-block', marginLeft: '2rem', marginTop: '1rem', maxWidth: ' 50rem' }}>
                                                     <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
                                                     <ListGroupItem><h5>Publish Time</h5>{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/, function (match, p1, p2, p3, p4, p5, p6) {
@@ -137,20 +136,17 @@
                             </Tab>
                             <Tab eventKey={2} title="Tecnical Informations" >
                                 <div>
-                          {this.state.VideoDetails.map(function (item,index) {
+                                    {VideoDetails.map(function (item, index) {
                                         return (
                                             <div key={index}>
                                                 <h1 style={{ margin: '1rem' }}>{item.snippet.title}</h1>
                                                 <ListGroup style={{ display: 'inline-block', marginLeft: '2rem', marginTop: '1rem' }}>
-                                          <ListGroupItem><h5>Duration</h5>{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){
+                                                    <ListGroupItem><h5>Duration</h5>{ momentDuration(item.contentDetails.duration) }</ListGroupItem>
-                                              if(p1) return(p2+':'+p3+':'+p4);
-                                              else return(p6+':'+p7);})}
-                                          </ListGroupItem>
                                                     <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
                                                     <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
-                                          <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
+                                                    <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}{"\uD83D\uDC40"}</ListGroupItem>
-                                          <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
+                                                    <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}{"\uD83D\uDC4D"}</ListGroupItem>
-                                          <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
+                                                    <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}{"\uD83D\uDC4E"}</ListGroupItem>
                                                 </ListGroup>
                                             </div>
                                         )
@@ -159,7 +155,7 @@
                             </Tab>
                             <Tab eventKey={3} title="Comment">
                                 <ul>
-                          {this.state.comments.map(function (item,index) {
+                                    { comments.map(function (item, index) {
                                         return (
                                             <div key={index}>
                                                 <Card style={{ width: '40rem', fontSize: 'medium', margin: '1em', borderRadius: '1rem' }}>
@@ -184,9 +180,6 @@
                             </Tab>
                         </Tabs>
                     </Col>
-          <Col className='border border-dark'  lg={{span:4, offset:1}}>
-          <p>2</p>
-          </Col>
                 </React.Fragment>
             );
         }

src/VideoPlayer.js

@@ -8,8 +8,8 @@ class VideoPlayer extends Component {
 		super(props);
 		this.state = {
 			opt: {
-				// height: '390',
+				height: '390',
-				// width: '640',
+				width: '640',
 				playerVars: {
 					// https://developers.google.com/youtube/player_parameters
 					autoplay: 0,

src/css/App.css

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