diff --git a/package-lock.json b/package-lock.json index 2f16f45..364aeca 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index a36f4f7..872967f 100644 --- a/package.json +++ b/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": { diff --git a/src/App.js b/src/App.js index d3af10d..e5a5bd6 100644 --- a/src/App.js +++ b/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,29 +9,45 @@ import VideoInfo from './VideoInfo'; import './css/App.css'; class App extends React.Component { + constructor(props) { + super(props); + this.state = { + isInfoToggled: false + }; +} + render() { return ( - + - - - + + + - - -

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

+ +
+ +
+ +
+ +
+ - - - - -
URL not found
}/> + + + {/* */} + +
URL not found
} /> diff --git a/src/VideoInfo.js b/src/VideoInfo.js index 3ee805d..ed481eb 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -1,70 +1,68 @@ - import React, { Component } from 'react'; - // import PropTypes from 'prop-types'; - import Wikipedia from './areainfo/Wikipedia'; - import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap'; - import axios from 'axios'; - import Linkify from "react-linkify"; - import Card from "react-bootstrap/lib/Card"; +import React, { Component } from 'react'; +// import PropTypes from 'prop-types'; +import Wikipedia from './areainfo/Wikipedia'; +import { Col, Tabs, Tab, ListGroup, ListGroupItem } from 'react-bootstrap'; +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 { +class VideoInfo extends Component { constructor(props) { - super(props); - this.state={ - error: null, - isLoaded: false, - VideoDetails: {}, - videoId: '0J2QdDbelmY', - comments : [] - }; + super(props); + this.state = { + error: null, + isLoaded: false, + VideoDetails: {}, + videoId: '0J2QdDbelmY', + comments: [] + }; + this.momentDuration = this.momentDuration.bind(this); + } + momentDuration(duration){ + return moment.duration(duration).format('hh:mm:ss'); } componentWillMount() { - if(this.props.match.params.id){ - if(this.props.match.params.id === this.state.videoId){} - else{ - this.setState({videoId: this.props.match.params.id}); - } - } + if (this.props.match.params.id) { + if (this.props.match.params.id === this.state.videoId) { } + else { + this.setState({ videoId: this.props.match.params.id }); + } + } } componentDidMount() { - 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.all([ + axios.get('https://www.googleapis.com/youtube/v3/videos', { + params: { + 'part': 'snippet,contentDetails,statistics,topicDetails', + 'id': this.state.videoId, + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + }), 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) { @@ -76,17 +74,17 @@ // } componentWillUpdate(nextProps, nextState) { - // console.info('nextProps',nextProps); - // console.info('nextState',nextState); - if(nextProps.match.params.id === this.state.videoId){} - else if( nextProps.match.params.id){ - this.setState({videoId: nextProps.match.params.id}); - } + // console.info('nextProps',nextProps); + // console.info('nextState',nextState); + if (nextProps.match.params.id === this.state.videoId) { } + else if (nextProps.match.params.id) { + this.setState({ videoId: nextProps.match.params.id }); + } } componentDidUpdate(prevProps, prevState) { - // console.info('prevProps',prevProps); - // console.info('prevState',prevState); + // console.info('prevProps',prevProps); + // console.info('prevState',prevState); } // componentWillUnmount() { @@ -94,107 +92,102 @@ // } render() { - const { error, isLoaded, VideoDetails } = this.state; - if (error) { - return ( - - Error: {error.message} -- Cannot get {error.config.url} - - ); - } else if (!isLoaded) { - return Loading...; - } else { - return ( - - - {/* codice per tabs reccomenders */} - - -
- {this.state.VideoDetails.map(function(item,index){ - return( -
-

{item.snippet.title}

- -
ID Video
{item.id} -
Publish Time
{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ - return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6); - })} - -
Channel Name
{item.snippet.channelTitle} -
Description
{item.snippet.description} -
Tags
{item.snippet.tags.map(function(element,index){ - return( - {element} - ) - })} - -
- ) - } - )} -
- - -
- {this.state.VideoDetails.map(function (item,index) { - return( -
-

{item.snippet.title}

- -
Duration
{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);})} - -
Definition
{item.contentDetails.definition} -
Dimension
{item.contentDetails.dimension} -
Views
{item.statistics.viewCount} -
Likes
{item.statistics.likeCount} -
Dislikes
{item.statistics.dislikeCount} - -
- ) - })} -
- - -
    - {this.state.comments.map(function (item,index) { - return( -
    - - - {item.snippet.topLevelComment.snippet.authorDisplayName} - - - {item.snippet.topLevelComment.snippet.textDisplay} - - - - -
    - ) - })} -
- - -
+ const { error, isLoaded, VideoDetails, comments } = this.state; + const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method + if (error) { + return ( + + Error: {error.message} -- Cannot get {error.config.url} + + ); + } else if (!isLoaded) { + return Loading...; + } else { + return ( + + + {/* codice per tabs reccomenders */} + + +
+ {VideoDetails.map(function (item, index) { + return ( +
+ {/*

{item.snippet.title}

*/} + +
ID Video
{item.id} +
Publish Time
{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/, function (match, p1, p2, p3, p4, p5, p6) { + return (p3 + '/' + p2 + '/' + p1 + ' - ' + p4 + ':' + p5 + ':' + p6); + })} + +
Channel Name
{item.snippet.channelTitle} +
Description
{item.snippet.description} +
Tags
{item.snippet.tags.map(function (element, index) { + return ( + {element} + ) + })} + +
+ ) + } + )} +
+ + +
+ {VideoDetails.map(function (item, index) { + return ( +
+

{item.snippet.title}

+ +
Duration
{ momentDuration(item.contentDetails.duration) } +
Definition
{item.contentDetails.definition} +
Dimension
{item.contentDetails.dimension} +
Views
{item.statistics.viewCount}{"\uD83D\uDC40"} +
Likes
{item.statistics.likeCount}{"\uD83D\uDC4D"} +
Dislikes
{item.statistics.dislikeCount}{"\uD83D\uDC4E"} + +
+ ) + })} +
+ + +
    + { comments.map(function (item, index) { + return ( +
    + + + {item.snippet.topLevelComment.snippet.authorDisplayName} + + + {item.snippet.topLevelComment.snippet.textDisplay} + + + + +
    + ) + })} +
+ + +
-
- - - - -

2

- - - ); +
+ + + + + ); + } } - } - } +} - VideoInfo.propTypes = { +VideoInfo.propTypes = { - }; +}; - export default VideoInfo; \ No newline at end of file +export default VideoInfo; \ No newline at end of file diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index e27ab78..5c3460d 100644 --- a/src/VideoPlayer.js +++ b/src/VideoPlayer.js @@ -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, diff --git a/src/css/App.css b/src/css/App.css index 2890bb5..b009997 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -1,9 +1,16 @@ -.bg-black{ -background-color:#000000; +.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; } \ No newline at end of file