sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source
This commit is contained in:
matteo
2018-12-13 02:18:03 +01:00
parent 434d506271
commit 12afdad684
6 changed files with 207 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+10 -9
View File
@@ -1714,15 +1714,6 @@
"resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz",
"integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" "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": { "axobject-query": {
"version": "2.0.2", "version": "2.0.2",
"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz",
@@ -8613,6 +8604,16 @@
"minimist": "0.0.8" "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": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
package.json
+3
View File
@@ -9,6 +9,8 @@
"express": "^4.16.4", "express": "^4.16.4",
"lodash-id": "^0.14.0", "lodash-id": "^0.14.0",
"lowdb": "^1.0.0", "lowdb": "^1.0.0",
"moment": "^2.22.2",
"moment-duration-format": "^2.2.2",
"react": "^16.6.1", "react": "^16.6.1",
"react-app-polyfill": "^0.1.3", "react-app-polyfill": "^0.1.3",
"react-bootstrap": "^1.0.0-beta.2", "react-bootstrap": "^1.0.0-beta.2",
@@ -23,6 +25,7 @@
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"node": "npm run build && node ./node-entry.js",
"eject": "react-scripts eject" "eject": "react-scripts eject"
}, },
"eslintConfig": { "eslintConfig": {
src/App.js
+31 -15
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import { Route, Switch, Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars 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 '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 VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // 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 VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
@@ -9,29 +9,45 @@ import VideoInfo from './VideoInfo';
import './css/App.css'; import './css/App.css';
class App extends React.Component { class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isInfoToggled: false
};
}
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<Row> <Row>
<TopBar /> <TopBar />
</Row> </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} /> <Route path={["/video/:id", "/*"]} component={VideoPlayer} />
</Col> </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> </Col>
</Row> </Row>
<Row className='scrollable'> <Row className='downSection'>
<Switch> <Switch>
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} /> {/* */}
<Route exact path='/' component={VideoList} /> <Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>}/> <Route render={() => <div>URL not found</div>} />
</Switch> </Switch>
</Row> </Row>
</React.Fragment> </React.Fragment>
src/VideoInfo.js
+149 -156
View File
@@ -1,70 +1,68 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// import PropTypes from 'prop-types'; // import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia'; import Wikipedia from './areainfo/Wikipedia';
import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap'; import { Col, Tabs, Tab, ListGroup, ListGroupItem } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import Linkify from "react-linkify"; import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card"; 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) { constructor(props) {
super(props); super(props);
this.state={ this.state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
VideoDetails: {}, VideoDetails: {},
videoId: '0J2QdDbelmY', videoId: '0J2QdDbelmY',
comments : [] comments: []
}; };
this.momentDuration = this.momentDuration.bind(this);
}
momentDuration(duration){
return moment.duration(duration).format('hh:mm:ss');
} }
componentWillMount() { componentWillMount() {
if(this.props.match.params.id){ if (this.props.match.params.id) {
if(this.props.match.params.id === this.state.videoId){} if (this.props.match.params.id === this.state.videoId) { }
else{ else {
this.setState({videoId: this.props.match.params.id}); this.setState({ videoId: this.props.match.params.id });
} }
} }
} }
componentDidMount() { componentDidMount() {
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.all([
params: { axios.get('https://www.googleapis.com/youtube/v3/videos', {
'part': 'snippet,contentDetails,statistics,topicDetails', params: {
'id': this.state.videoId, 'part': 'snippet,contentDetails,statistics,topicDetails',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'id': this.state.videoId,
} 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}).then(response => { }
this.setState({ }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
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: { params: {
'part': 'snippet', 'part': 'snippet',
'videoId': this.state.videoId, //Da sostituire con variabile 'videoId': this.state.videoId, //Da sostituire con variabile
'order': 'relevance', 'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( })])
response => { .then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({ this.setState({
comments: response.data.items, VideoDetails: videosResponse.data.items,
comments: commentThreadResponse.data.items,
isLoaded: true
}); });
}, }), error => {
error => {
console.error(error); console.error(error);
} this.setState({
) isLoaded: true,
error
});
});
} }
// componentWillReceiveProps(nextProps) { // componentWillReceiveProps(nextProps) {
@@ -76,17 +74,17 @@
// } // }
componentWillUpdate(nextProps, nextState) { componentWillUpdate(nextProps, nextState) {
// console.info('nextProps',nextProps); // console.info('nextProps',nextProps);
// console.info('nextState',nextState); // console.info('nextState',nextState);
if(nextProps.match.params.id === this.state.videoId){} if (nextProps.match.params.id === this.state.videoId) { }
else if( nextProps.match.params.id){ else if (nextProps.match.params.id) {
this.setState({videoId: nextProps.match.params.id}); this.setState({ videoId: nextProps.match.params.id });
} }
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
// console.info('prevProps',prevProps); // console.info('prevProps',prevProps);
// console.info('prevState',prevState); // console.info('prevState',prevState);
} }
// componentWillUnmount() { // componentWillUnmount() {
@@ -94,107 +92,102 @@
// } // }
render() { render() {
const { error, isLoaded, VideoDetails } = this.state; const { error, isLoaded, VideoDetails, comments } = this.state;
if (error) { const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
return ( if (error) {
<React.Fragment> return (
Error: {error.message} -- Cannot get {error.config.url} <React.Fragment>
</React.Fragment> Error: {error.message} -- Cannot get {error.config.url}
); </React.Fragment>
} else if (!isLoaded) { );
return <React.Fragment>Loading...</React.Fragment>; } else if (!isLoaded) {
} else { return <React.Fragment>Loading...</React.Fragment>;
return ( } else {
<React.Fragment> return (
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}> <React.Fragment>
{/* codice per tabs reccomenders */} <Col className='border border-light' xs={{ span: 12 }} style={{ overflow: 'auto' }}>
<Tabs defaultActiveKey={1} id="tabs" animation={0}> {/* codice per tabs reccomenders */}
<Tab eventKey={1} title="Video"> <Tabs defaultActiveKey={1} id="tabs" animation={0}>
<div> <Tab eventKey={1} title="Video">
{this.state.VideoDetails.map(function(item,index){ <div>
return( {VideoDetails.map(function (item, index) {
<div key={index}> return (
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> <div key={index}>
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}> {/* <h1 style={{ margin: '1rem' }}>{item.snippet.title}</h1> */}
<ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem> <ListGroup style={{ display: 'inline-block', marginLeft: '2rem', marginTop: '1rem', maxWidth: ' 50rem' }}>
<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){ <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6); <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) {
})} return (p3 + '/' + p2 + '/' + p1 + ' - ' + p4 + ':' + p5 + ':' + p6);
</ListGroupItem> })}
<ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem> </ListGroupItem>
<ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem> <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
<ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){ <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
return( <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function (element, index) {
<span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span> return (
) <span key={index} style={{ margin: '0.5rem', textDecoration: 'underline' }}>{element}</span>
})}</ListGroupItem> )
</ListGroup> })}</ListGroupItem>
</div> </ListGroup>
) </div>
} )
)} }
</div> )}
</Tab> </div>
<Tab eventKey={2} title="Tecnical Informations" > </Tab>
<div> <Tab eventKey={2} title="Tecnical Informations" >
{this.state.VideoDetails.map(function (item,index) { <div>
return( {VideoDetails.map(function (item, index) {
<div key={index}> return (
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> <div key={index}>
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}> <h1 style={{ margin: '1rem' }}>{item.snippet.title}</h1>
<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){ <ListGroup style={{ display: 'inline-block', marginLeft: '2rem', marginTop: '1rem' }}>
if(p1) return(p2+':'+p3+':'+p4); <ListGroupItem><h5>Duration</h5>{ momentDuration(item.contentDetails.duration) }</ListGroupItem>
else return(p6+':'+p7);})} <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
</ListGroupItem> <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
<ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem> <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}{"\uD83D\uDC40"}</ListGroupItem>
<ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem> <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}{"\uD83D\uDC4D"}</ListGroupItem>
<ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem> <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}{"\uD83D\uDC4E"}</ListGroupItem>
<ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem> </ListGroup>
<ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem> </div>
</ListGroup> )
</div> })}
) </div>
})} </Tab>
</div> <Tab eventKey={3} title="Comment">
</Tab> <ul>
<Tab eventKey={3} title="Comment"> { comments.map(function (item, index) {
<ul> return (
{this.state.comments.map(function (item,index) { <div key={index}>
return( <Card style={{ width: '40rem', fontSize: 'medium', margin: '1em', borderRadius: '1rem' }}>
<div key={index}> <Card.Body>
<Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}> <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{ width: '5rem', height: '5rem', padding: '1rem' }} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
<Card.Body> <Card.Text>
<Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '5rem', height : '5rem',padding : '1rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title> <Linkify>
<Card.Text> {item.snippet.topLevelComment.snippet.textDisplay}
<Linkify> </Linkify>
{item.snippet.topLevelComment.snippet.textDisplay} </Card.Text>
</Linkify> </Card.Body>
</Card.Text> </Card>
</Card.Body> </div>
</Card> )
</div> })}
) </ul>
})} </Tab>
</ul> <Tab eventKey={4} title="Wikipedia">
</Tab> <div>
<Tab eventKey={4} title="Wikipedia">
<div>
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>
</Col> </Col>
<Col className='border border-dark' lg={{span:4, offset:1}}> </React.Fragment>
<p>2</p> );
</Col> }
</React.Fragment>
);
} }
} }
}
VideoInfo.propTypes = { VideoInfo.propTypes = {
}; };
export default VideoInfo; export default VideoInfo;
src/VideoPlayer.js
+2 -2
View File
@@ -8,8 +8,8 @@ class VideoPlayer extends Component {
super(props); super(props);
this.state = { this.state = {
opt: { opt: {
// height: '390', height: '390',
// width: '640', width: '640',
playerVars: { playerVars: {
// https://developers.google.com/youtube/player_parameters // https://developers.google.com/youtube/player_parameters
autoplay: 0, autoplay: 0,
src/css/App.css
+11 -4
View File
@@ -1,9 +1,16 @@
.bg-black{ .upperSection{
background-color:#000000; background-color:#000000;
} }
.scrollable{ @media (min-width: 992px) {
.upperSection{
background-color:#000000;
height: 55vh;
}
}
.downSection{
overflow: auto !important; overflow: auto !important;
height: 40vh; height: 40vh;
margin-top: 2vh; margin-top: 1vh;
} }