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

santo stefano

Browse Source
This commit is contained in:
matteo
2018-12-27 19:33:50 +01:00
parent fcb54b629a 36c9c26089
commit ab13120448
11 changed files with 385 additions and 326 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -1
View File
@@ -26,4 +26,4 @@ yarn-error.log*
.vs/ .vs/
db.json db.json
package-lock.json package-lock.json
db.json
+44
View File
@@ -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.json
+5 -1
View File
@@ -12,21 +12,25 @@
"lowdb": "^1.0.0", "lowdb": "^1.0.0",
"moment": "^2.23.0", "moment": "^2.23.0",
"moment-duration-format": "^2.2.2", "moment-duration-format": "^2.2.2",
"node-sass": "^4.11.0",
"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",
"react-dom": "^16.6.1", "react-dom": "^16.6.1",
"react-height": "^3.0.0",
"react-linkify": "^0.2.2", "react-linkify": "^0.2.2",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"react-scripts": "2.1.1", "react-scripts": "2.1.1",
"react-youtube": "^7.8.0", "react-youtube": "^7.8.0",
"wikidata-sdk": "^5.15.9", "wikidata-sdk": "^5.15.9",
"wikijs": "^4.8.1" "wikijs": "^4.8.1",
"youtube-page-token": "^1.0.1"
}, },
"scripts": { "scripts": {
"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
+57 -19
View File
@@ -1,30 +1,68 @@
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 } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css'; // eslint-disable-line no-unused-vars import 'bootstrap/dist/css/bootstrap.css';
import { Row, Col } from 'react-bootstrap'; // eslint-disable-line no-unused-vars import { Row, Col, Button, Collapse } from 'react-bootstrap';
import VideoList from './VideoList'; // eslint-disable-line no-unused-vars import TopBar from './TopBar';
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars import VideoPlayer from './VideoPlayer';
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo'; import VideoInfo from './VideoInfo';
import VideoList from './VideoList';
import Suggestion from './areainfo/Suggestion';
import { ReactHeight } from 'react-height';
import './css/App.css'; import './css/App.css';
class App extends React.Component { class App extends React.Component {
render() { constructor(props) {
super(props);
this.state = {
playerHeight: null,
navHeight: null,
blackbgHeight: null,
isInfoToggled: false
};
}
render() {
return ( return (
<React.Fragment> <React.Fragment>
<Row> <ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
<TopBar /> <TopBar />
</Row> </ReactHeight>
<Row className="justify-content-center bg-black"> <ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
<Col xs="12" sm="6"> <Col
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> xs="12"
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
className="align-content-center pt-2 p-1 pr-2">
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
</ReactHeight>
</Col> </Col>
</Row> <Col
<Row className='scrollable'> xs="12"
<Switch> lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} /> className="p-0 p-sm-0"
<Route exact path='/' component={VideoList} /> style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
<Route render={() => <div>URL not found</div>}/> <div class="d-flex justify-content-center">
<Button
variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
className="pt-1 "
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-1" id="infovideo-collapse">
<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
</div>
</Collapse>
</Col>
</ReactHeight>
<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
<Switch>
<Route exact path='/' component={VideoList} />
<Route path={["/video/:id", "/search/:query"]} component={Suggestion} />
<Route render={() => <div>URL not found</div>} />
</Switch> </Switch>
</Row> </Row>
</React.Fragment> </React.Fragment>
src/VideoInfo.js
+151 -188
View File
@@ -1,213 +1,176 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// 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 { Tabs, Tab, Table } 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";
const ytclear = require('@c0b41/ytclear'); import moment from 'moment';
import momentDurationFormat from 'moment-duration-format';
import './css/VideoInfo.scss';
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);
} this.ISO_8601parse = this.ISO_8601parse.bind(this);
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});
} }
}
}
componentDidMount() { momentDuration(duration) {
axios.get('https://www.googleapis.com/youtube/v3/videos', { return moment.duration(duration).format('hh:mm:ss');
params: { }
'part': 'snippet,contentDetails,statistics,topicDetails', ISO_8601parse(a) {
'id': this.state.videoId, return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(response => {
this.setState({
VideoDetails: response.data.items,
others: {
artist: ytclear(response.data.items[0].snippet.title).split('-')[0],
title: ytclear(response.data.items[0].snippet.title).split('-')[1]
},
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 => {
this.setState({
comments: response.data.items,
});
},
error => {
console.error(error);
}
)
}
// componentWillReceiveProps(nextProps) {
// }
// shouldComponentUpdate(nextProps, nextState) {
// }
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});
} }
}
componentDidUpdate(prevProps, prevState) {
// console.info('prevProps',prevProps);
// console.info('prevState',prevState);
}
// componentWillUnmount() {
// } componentDidMount() {
console.log('didmount', this.state.videoId)
axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
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,
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
isLoaded: true
});
}), error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
});
}
render() { componentDidUpdate(prevProps, prevState, snapshot) {
const { error, isLoaded, VideoDetails } = this.state; if (!(prevState.videoId === this.state.videoId))
if (error) { axios.all([
return ( axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
<React.Fragment> params: {
Error: {error.message} -- Cannot get {error.config.url} 'part': 'snippet,contentDetails,statistics,topicDetails',
</React.Fragment> 'id': this.state.videoId,
); 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} else if (!isLoaded) { }
return <React.Fragment>Loading...</React.Fragment>; }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
} else { params: {
return ( 'part': 'snippet',
<React.Fragment> 'videoId': this.state.videoId,
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}> 'order': 'relevance',
{/* codice per tabs reccomenders */} 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
<Tabs defaultActiveKey={1} id="tabs" animation={0}> }
<Tab eventKey={1} title="Video"> })])
<div> .then(axios.spread((videosResponse, commentThreadResponse) => {
{this.state.VideoDetails.map(function(item,index){ this.setState({
return( VideoDetails: videosResponse.data.items[0],
<div key={index}> comments: commentThreadResponse.data.items,
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> isLoaded: true
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}> });
<ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem> }), error => {
<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){ console.error(error);
return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6); this.setState({
})} isLoaded: true,
</ListGroupItem> error
<ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem> });
<ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem> });
<ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){ }
return(
<span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
) componentWillReceiveProps(nextProps) {
})}</ListGroupItem> console.log(nextProps)
</ListGroup> if (nextProps.match.params.id && !(nextProps.match.params.id === this.state.videoId)) {
</div> this.setState({ videoId: nextProps.match.params.id })
) } // mindfuck
} }
)}
</div> render() {
</Tab> const { error, isLoaded, VideoDetails, comments } = this.state;
<Tab eventKey={2} title="Tecnical Informations" > const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
<div> const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method
{this.state.VideoDetails.map(function (item,index) { if (error) {
return( return (
<div key={index}> <span className="text-white">
<h1 style={{margin : '1rem'}}>{item.snippet.title}</h1> Error: {error.message} -- Cannot get {error.config.url}
<ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}> </span>
<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 if (!isLoaded) {
else return(p6+':'+p7);})} return <span className="text-white">Loading...</span>;
</ListGroupItem> } else {
<ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem> return (
<ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem> <React.Fragment>
<ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem> <span class="h5 text-white">{VideoDetails.snippet.title}</span>
<ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem> <Tabs defaultActiveKey="video" id="tabs">
<ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem> <Tab className="text-white" eventKey="video" title="Video">
</ListGroup> <p>
</div> <b>ID Video: </b>{VideoDetails.id}<br />
) <b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
})} <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
</div> <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
</Tab> <b>Tags: </b>{VideoDetails.snippet.tags ?
<Tab eventKey={3} title="Comment"> VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)) : ""}
<ul> {/* tags should be links */}
{this.state.comments.map(function (item,index) { </p>
return( </Tab>
<div key={index}> <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
<Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}> <p><b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
<b>Definition: </b> {VideoDetails.contentDetails.definition}<br />
<b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br />
<b>Views: </b> {VideoDetails.statistics.viewCount}<br />
<b>Likes: </b> {VideoDetails.statistics.likeCount}{String.fromCodePoint(0x1F44D)}<br />
<b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}{String.fromCodePoint(0x1F44E)}
</p>
</Tab>
<Tab eventKey="comments" title="Comment">
{comments.map(function (comment, index) {
return (
<Card key={index} className="my-1">
<Card.Body> <Card.Body>
<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.Title>
<Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{ width: '3rem', height: '3rem' }} />
{comment.snippet.topLevelComment.snippet.authorDisplayName}
</Card.Title>
<Card.Text> <Card.Text>
<Linkify> <Linkify>
{item.snippet.topLevelComment.snippet.textDisplay} {comment.snippet.topLevelComment.snippet.textOriginal}
</Linkify> </Linkify>
</Card.Text> </Card.Text>
</Card.Body> </Card.Body>
</Card> </Card>
</div> )
) })}
})} </Tab>
</ul> <Tab eventKey="wikipedia" title="Wikipedia">
</Tab> <div>
<Tab eventKey={4} title="Wikipedia">
<Wikipedia
title={
this.props.location.state
? this.props.location.state.title
: this.state.others.title
}
artist={
this.props.location.state
? this.props.location.state.artist
: this.state.others.artist
}
videoId={this.props.match.params.id}
/>
</Tab>
</Tabs>
</Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>
</Col>
</React.Fragment>
);
}
}
}
</div>
</Tab>
</Tabs>
</React.Fragment>
);
}
}
}
VideoInfo.propTypes = { VideoInfo.propTypes = {
}; };
src/VideoPlayer.js
+3 -3
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,
@@ -122,7 +122,7 @@ class VideoPlayer extends Component {
// local storage logic for recent reccomender // local storage logic for recent reccomender
clearInterval(timerId1); clearInterval(timerId1);
}, },
error => console.info(error) error => console.error(error)
) )
.finally(() => this.setState({ promise1: null })); .finally(() => this.setState({ promise1: null }));
break; break;
src/areainfo/Suggestion.js
+15 -5
View File
@@ -1,7 +1,8 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Random from './reccomenders/Random'; import { Row, Col, Button, Collapse } from 'react-bootstrap';
import Related from './reccomenders/Related'; // import Random from './reccomenders/Random';
// import Related from './reccomenders/Related';
// and so on.. // and so on..
class Suggestion extends Component { class Suggestion extends Component {
@@ -39,10 +40,19 @@ class Suggestion extends Component {
} }
render() { render() {
let a =['','','','','','','','','','',''];
return ( return (
<div> <React.Fragment>
<Col xs="10">
</div> <Row>
{a.map((x,i) => <Col xs={{'span': 10, 'offset': 1}} className="mt-1 border border-danger">- video {i}</Col>)}
</Row>
</Col>
<Col className="mt-1 mr-2 border border-danger">
{a.map((x,i) => i)}
?? box utile o superfluo?
</Col>
</React.Fragment>
); );
} }
} }
src/css/App.css
+5 -6
View File
@@ -1,9 +1,8 @@
.bg-black{ .upperSection{
background-color:#000000; background-color:#000000;
} }
.scrollable{ .downSection{
overflow: auto !important; overflow-y: auto;
height: 40vh; overflow-x: hidden;
margin-top: 2vh;
} }
src/css/VideoInfo.scss
+10
View File
@@ -0,0 +1,10 @@
// Required
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
// To extend
@import '~bootstrap/scss/utilities/text';
a[aria-selected=false]{
@extend .text-white;
}
src/reccomenders/Random.js
+27 -25
View File
@@ -1,9 +1,9 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import axios from "axios"; import axios from "axios";
import createpageToken from 'youtube-page-token'; import createpageToken from 'youtube-page-token';
import YouTube from "react-youtube"; import {Card} from "react-bootstrap";
import {Link} from "react-router-dom";
class RecommenderRandom extends Component{ class RecommenderRandom extends Component{
constructor(props){ constructor(props){
@@ -24,7 +24,7 @@ class RecommenderRandom extends Component{
'part': 'snippet', 'part': 'snippet',
'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory 'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory
'type' : 'video', //che contiene tutti i generi di musica 'type' : 'video', //che contiene tutti i generi di musica
'maxResults': '20', 'maxResults': '21',
'pageToken' : pageToken, 'pageToken' : pageToken,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
@@ -41,31 +41,33 @@ class RecommenderRandom extends Component{
} }
render(){ render(){
const opts = {
height: '250',
width: '250',
playerVars: {
autoplay: 0
}
};
return ( return (
<div style={{overflow: 'auto',overflowY : 'scroll'}}> <div style={{width: '100rem',height:'100rem'}}>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item,index) {
return( return(
<div key={index} style={{margin: '1rem',float: 'left',clear : 'left'}}> <div key={index} style={{margin: '1rem',float: 'left'}}>
<YouTube <Card>
videoId={item.id.videoId} <Link
opts={opts} to={{
/> pathname: '/video/' + item.id.videoId,
<div style={{marginLeft : '10rem',float : 'right',maxWidth:'40rem'}}> }}
<h3>{item.snippet.title}</h3> >
<h4>{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){ <Card.Img
return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani src={item.snippet.thumbnails.high.url}
})} alt={'Thumbnail of ' + item.title}
</h4> style={{width:'30rem',height:'20rem'}}
<p style={{fontSize: 'large'}}>{item.snippet.description}<br/>~Recommended as a Random Video~</p> />
</div> <Card.ImgOverlay>
</div> <Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/>
{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
})}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</div>
) )
})} })}
</div> </div>
src/reccomenders/Related.js
+67 -78
View File
@@ -1,99 +1,88 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import PropTypes from 'prop-types';
import axios from 'axios'; import axios from 'axios';
import YouTube from "react-youtube";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Card} from "react-bootstrap"; import {Card} from "react-bootstrap";
import CardGroup from "react-bootstrap/es/CardGroup";
class Related extends Component { class Related extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state={
videoId : '0J2QdDbelmY', videoId : '0J2QdDbelmY',
items : [] items : []
}
} }
}
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/search",{ axios.get("https://www.googleapis.com/youtube/v3/search",{
params:{ params:{
'part': 'snippet', 'part': 'snippet',
'relatedToVideoId' : this.state.videoId, 'relatedToVideoId' : this.state.videoId,
'type' : 'video', 'type' : 'video',
'maxResults' : '21', 'maxResults' : '21',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
response => { response => {
this.setState({ this.setState({
items: response.data.items, items: response.data.items,
}) })
console.log(response); console.log(response);
}, },
error => { error => {
console.error(error); console.error(error);
} }
) )
} }
//componentWillReceiveProps(nextProps) {} componentWillUpdate(nextProps, nextState) {
if(nextProps.match.params.id === this.state.videoId){}
else if( nextProps.match.params.id){
this.setState({videoId: nextProps.match.params.id});
}
}
//shouldComponentUpdate(nextProps, nextState) {} render() {
return (
componentWillUpdate(nextProps, nextState) { <div style={{width: '100rem',height:'100rem'}}>
if(nextProps.match.params.id === this.state.videoId){} {this.state.items.map(function (item,index) {
else if( nextProps.match.params.id){ return(
this.setState({videoId: nextProps.match.params.id}); <div key={index} style={{margin: '1rem',float: 'left'}}>
} <Card>
} <Link
to={{
//componentDidUpdate(prevProps, prevState) {} pathname: '/video/' + item.id.videoId,
}}
//componentWillUnmount() {} >
<Card.Img
render() { src={item.snippet.thumbnails.high.url}
return ( alt={'Thumbnail of ' + item.title}
<div style={{width: '100rem',height:'100rem'}}> style={{width:'30rem',height:'20rem'}}
{this.state.items.map(function (item,index) { />
return( <Card.ImgOverlay>
<div key={index} style={{margin: '1rem',float: 'left'}}> <Card.Title className="bg-dark d-inline text-white">
<Card> {item.snippet.title}<br/>
<Link {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
to={{
pathname: '/video/' + item.id.videoId,
}}
>
<Card.Img
src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.title}
style={{width:'30rem',height:'20rem'}}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/>
{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
})} })}
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
</Link> </Link>
</Card> </Card>
</div> </div>
) )
})} })}
</div> </div>
); );
} }
} }
Related.propTypes = { Related.propTypes = {