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

2018-12-13 02:18:03 +01:00
parent 434d506271
commit 12afdad684
6 changed files with 207 additions and 187 deletions
@@ -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",
@@ -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": {
@@ -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">
-					<Col xs="12" sm={{ span: 6, order: 6}} className="pt-2 p-0 p-sm-0">
+				<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">
 						<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
 					</Col>
-					<Col xs="12" sm="6" className="w-75 pt-2 p-0 p-sm-0">
-					<Button variant="outline-light" className="w-100 align-content-center d-sm-none">Info</Button>
-					<p className="text-white">Qui andrebbero le informazioni video, 
-					in modalità telefono questo spazio è sotto il video e si potrebbe
-					fare a scomparsa con un pulsante, lasciando un label cliccabile per aprire e chiudere
-					la scheda</p>
+					<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">
+						<div className='d-flex justify-content-center pt-2'>
+							<Button variant="outline-light"
+								onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
+								className="w-75 align-content-center"
+								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>
@@ -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 => {
-        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', {
+        }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
            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){
-                                              if(p1) return(p2+':'+p3+':'+p4);
-                                              else return(p6+':'+p7);})}
-                                          </ListGroupItem>
+                                                    <ListGroupItem><h5>Duration</h5>{ momentDuration(item.contentDetails.duration) }</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>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
-                                          <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
+                                                    <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}{"\uD83D\uDC40"}</ListGroupItem>
+                                                    <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}{"\uD83D\uDC4D"}</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>
            );
        }
@@ -8,8 +8,8 @@ class VideoPlayer extends Component {
 		super(props);
 		this.state = {
 			opt: {
-				// height: '390',
-				// width: '640',
+				height: '390',
+				width: '640',
 				playerVars: {
 					// https://developers.google.com/youtube/player_parameters
 					autoplay: 0,
@@ -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;
 }