Archived
santo stefano
This commit is contained in:
matteo
+1
-1
@@ -26,4 +26,4 @@ yarn-error.log*
|
||||
.vs/
|
||||
db.json
|
||||
|
||||
package-lock.json
|
||||
package-lock.json
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
+5
-1
@@ -12,21 +12,25 @@
|
||||
"lowdb": "^1.0.0",
|
||||
"moment": "^2.23.0",
|
||||
"moment-duration-format": "^2.2.2",
|
||||
"node-sass": "^4.11.0",
|
||||
"react": "^16.6.1",
|
||||
"react-app-polyfill": "^0.1.3",
|
||||
"react-bootstrap": "^1.0.0-beta.2",
|
||||
"react-dom": "^16.6.1",
|
||||
"react-height": "^3.0.0",
|
||||
"react-linkify": "^0.2.2",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "2.1.1",
|
||||
"react-youtube": "^7.8.0",
|
||||
"wikidata-sdk": "^5.15.9",
|
||||
"wikijs": "^4.8.1"
|
||||
"wikijs": "^4.8.1",
|
||||
"youtube-page-token": "^1.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"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": {
|
||||
|
||||
+57
-19
@@ -1,30 +1,68 @@
|
||||
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 } 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
|
||||
import { Route, Switch } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import { Row, Col, Button, Collapse } from 'react-bootstrap';
|
||||
import TopBar from './TopBar';
|
||||
import VideoPlayer from './VideoPlayer';
|
||||
import VideoInfo from './VideoInfo';
|
||||
import VideoList from './VideoList';
|
||||
import Suggestion from './areainfo/Suggestion';
|
||||
import { ReactHeight } from 'react-height';
|
||||
import './css/App.css';
|
||||
|
||||
class App extends React.Component {
|
||||
render() {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
playerHeight: null,
|
||||
navHeight: null,
|
||||
blackbgHeight: null,
|
||||
isInfoToggled: false
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Row>
|
||||
<TopBar />
|
||||
</Row>
|
||||
<Row className="justify-content-center bg-black">
|
||||
<Col xs="12" sm="6">
|
||||
<Route path={["/video/:id", "/*"]} component={VideoPlayer} />
|
||||
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
|
||||
<TopBar />
|
||||
</ReactHeight>
|
||||
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
|
||||
<Col
|
||||
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>
|
||||
</Row>
|
||||
<Row className='scrollable'>
|
||||
<Switch>
|
||||
<Route path={["/video/:id", "/search/:query"]} component={VideoInfo} />
|
||||
<Route exact path='/' component={VideoList} />
|
||||
<Route render={() => <div>URL not found</div>}/>
|
||||
<Col
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
|
||||
className="p-0 p-sm-0"
|
||||
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
|
||||
<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>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
|
||||
+151
-188
@@ -1,213 +1,176 @@
|
||||
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 { Tabs, Tab, Table } from 'react-bootstrap';
|
||||
import axios from 'axios';
|
||||
import Linkify from "react-linkify";
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
VideoDetails: {},
|
||||
videoId: '0J2QdDbelmY',
|
||||
comments : []
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
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});
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
VideoDetails: {},
|
||||
videoId: '0J2QdDbelmY',
|
||||
comments: []
|
||||
};
|
||||
this.momentDuration = this.momentDuration.bind(this);
|
||||
this.ISO_8601parse = this.ISO_8601parse.bind(this);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
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});
|
||||
momentDuration(duration) {
|
||||
return moment.duration(duration).format('hh:mm:ss');
|
||||
}
|
||||
ISO_8601parse(a) {
|
||||
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
const { error, isLoaded, VideoDetails } = this.state;
|
||||
if (error) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
Error: {error.message} -- Cannot get {error.config.url}
|
||||
</React.Fragment>
|
||||
);
|
||||
} else if (!isLoaded) {
|
||||
return <React.Fragment>Loading...</React.Fragment>;
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
|
||||
{/* codice per tabs reccomenders */}
|
||||
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
|
||||
<Tab eventKey={1} title="Video">
|
||||
<div>
|
||||
{this.state.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',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){
|
||||
return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
|
||||
})}
|
||||
</ListGroupItem>
|
||||
<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>
|
||||
)
|
||||
})}</ListGroupItem>
|
||||
</ListGroup>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey={2} title="Tecnical Informations" >
|
||||
<div>
|
||||
{this.state.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>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>
|
||||
</ListGroup>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey={3} title="Comment">
|
||||
<ul>
|
||||
{this.state.comments.map(function (item,index) {
|
||||
return(
|
||||
<div key={index}>
|
||||
<Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
if (!(prevState.videoId === 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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
console.log(nextProps)
|
||||
if (nextProps.match.params.id && !(nextProps.match.params.id === this.state.videoId)) {
|
||||
this.setState({ videoId: nextProps.match.params.id })
|
||||
} // mindfuck
|
||||
}
|
||||
|
||||
render() {
|
||||
const { error, isLoaded, VideoDetails, comments } = this.state;
|
||||
const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method
|
||||
const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method
|
||||
if (error) {
|
||||
return (
|
||||
<span className="text-white">
|
||||
Error: {error.message} -- Cannot get {error.config.url}
|
||||
</span>
|
||||
);
|
||||
} else if (!isLoaded) {
|
||||
return <span className="text-white">Loading...</span>;
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<span class="h5 text-white">{VideoDetails.snippet.title}</span>
|
||||
<Tabs defaultActiveKey="video" id="tabs">
|
||||
<Tab className="text-white" eventKey="video" title="Video">
|
||||
<p>
|
||||
<b>ID Video: </b>{VideoDetails.id}<br />
|
||||
<b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
|
||||
<b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
|
||||
<b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
|
||||
<b>Tags: </b>{VideoDetails.snippet.tags ?
|
||||
VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)) : ""}
|
||||
{/* tags should be links */}
|
||||
</p>
|
||||
</Tab>
|
||||
<Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
|
||||
<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.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>
|
||||
<Linkify>
|
||||
{item.snippet.topLevelComment.snippet.textDisplay}
|
||||
{comment.snippet.topLevelComment.snippet.textOriginal}
|
||||
</Linkify>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</Tab>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
})}
|
||||
</Tab>
|
||||
<Tab eventKey="wikipedia" title="Wikipedia">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
VideoInfo.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
+3
-3
@@ -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,
|
||||
@@ -122,7 +122,7 @@ class VideoPlayer extends Component {
|
||||
// local storage logic for recent reccomender
|
||||
clearInterval(timerId1);
|
||||
},
|
||||
error => console.info(error)
|
||||
error => console.error(error)
|
||||
)
|
||||
.finally(() => this.setState({ promise1: null }));
|
||||
break;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Random from './reccomenders/Random';
|
||||
import Related from './reccomenders/Related';
|
||||
import { Row, Col, Button, Collapse } from 'react-bootstrap';
|
||||
// import Random from './reccomenders/Random';
|
||||
// import Related from './reccomenders/Related';
|
||||
// and so on..
|
||||
|
||||
class Suggestion extends Component {
|
||||
@@ -39,10 +40,19 @@ class Suggestion extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
let a =['','','','','','','','','','',''];
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<React.Fragment>
|
||||
<Col xs="10">
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+5
-6
@@ -1,9 +1,8 @@
|
||||
.bg-black{
|
||||
background-color:#000000;
|
||||
.upperSection{
|
||||
background-color:#000000;
|
||||
}
|
||||
|
||||
.scrollable{
|
||||
overflow: auto !important;
|
||||
height: 40vh;
|
||||
margin-top: 2vh;
|
||||
.downSection{
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+27
-25
@@ -1,9 +1,9 @@
|
||||
import React, { Component } from 'react';
|
||||
import './App.css';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import axios from "axios";
|
||||
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{
|
||||
constructor(props){
|
||||
@@ -24,7 +24,7 @@ class RecommenderRandom extends Component{
|
||||
'part': 'snippet',
|
||||
'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
|
||||
'maxResults': '20',
|
||||
'maxResults': '21',
|
||||
'pageToken' : pageToken,
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
@@ -41,31 +41,33 @@ class RecommenderRandom extends Component{
|
||||
}
|
||||
|
||||
render(){
|
||||
const opts = {
|
||||
height: '250',
|
||||
width: '250',
|
||||
playerVars: {
|
||||
autoplay: 0
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div style={{overflow: 'auto',overflowY : 'scroll'}}>
|
||||
<div style={{width: '100rem',height:'100rem'}}>
|
||||
{this.state.items.map(function (item,index) {
|
||||
return(
|
||||
<div key={index} style={{margin: '1rem',float: 'left',clear : 'left'}}>
|
||||
<YouTube
|
||||
videoId={item.id.videoId}
|
||||
opts={opts}
|
||||
/>
|
||||
<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){
|
||||
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
|
||||
})}
|
||||
</h4>
|
||||
<p style={{fontSize: 'large'}}>{item.snippet.description}<br/>~Recommended as a Random Video~</p>
|
||||
</div>
|
||||
</div>
|
||||
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
||||
<Card>
|
||||
<Link
|
||||
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
|
||||
})}
|
||||
</Card.Title>
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
+67
-78
@@ -1,99 +1,88 @@
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import axios from 'axios';
|
||||
import YouTube from "react-youtube";
|
||||
import {Link} from "react-router-dom";
|
||||
import {Card} from "react-bootstrap";
|
||||
import CardGroup from "react-bootstrap/es/CardGroup";
|
||||
|
||||
class Related extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
videoId : '0J2QdDbelmY',
|
||||
items : []
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state={
|
||||
videoId : '0J2QdDbelmY',
|
||||
items : []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
}
|
||||
}
|
||||
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() {
|
||||
axios.get("https://www.googleapis.com/youtube/v3/search",{
|
||||
params:{
|
||||
'part': 'snippet',
|
||||
'relatedToVideoId' : this.state.videoId,
|
||||
'type' : 'video',
|
||||
'maxResults' : '21',
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
componentDidMount() {
|
||||
axios.get("https://www.googleapis.com/youtube/v3/search",{
|
||||
params:{
|
||||
'part': 'snippet',
|
||||
'relatedToVideoId' : this.state.videoId,
|
||||
'type' : 'video',
|
||||
'maxResults' : '21',
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
response => {
|
||||
this.setState({
|
||||
items: response.data.items,
|
||||
})
|
||||
console.log(response);
|
||||
this.setState({
|
||||
items: response.data.items,
|
||||
})
|
||||
console.log(response);
|
||||
},
|
||||
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) {}
|
||||
|
||||
componentWillUpdate(nextProps, 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) {}
|
||||
|
||||
//componentWillUnmount() {}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div style={{width: '100rem',height:'100rem'}}>
|
||||
{this.state.items.map(function (item,index) {
|
||||
return(
|
||||
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
||||
<Card>
|
||||
<Link
|
||||
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){
|
||||
render() {
|
||||
return (
|
||||
<div style={{width: '100rem',height:'100rem'}}>
|
||||
{this.state.items.map(function (item,index) {
|
||||
return(
|
||||
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
||||
<Card>
|
||||
<Link
|
||||
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
|
||||
})}
|
||||
</Card.Title>
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</Card.Title>
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Related.propTypes = {
|
||||
|
||||
Reference in New Issue
Block a user