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

Yojimbo

Browse Source
This commit is contained in:
Gregorio
2019-03-03 16:30:39 +01:00
parent cb35dfbe65
commit 668b259adb
23 changed files with 519 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/person-1.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 74 KiB

public/assets/person-2.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 36 KiB

After

Width:  |  Height:  |  Size: 66 KiB

public/assets/person-3.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 88 KiB

src/AboutUs.js
+14 -6
View File
@@ -8,19 +8,27 @@ export default class AboutUs extends Component {
<Container> <Container>
<Row className="show-Container text-center"> <Row className="show-Container text-center">
<Col xs={12} sm={4} className="person-wrapper"> <Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-1.jpg" roundedCircle className="profile-pic"/> <Image src="assets/person-1.jpg" roundedCircle className="profile-pic" />
<h3>Matteo Scorzafava</h3> <h3>Matteo Scorzafava</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p> <p></p>
</Col> </Col>
<Col xs={12} sm={4} className="person-wrapper"> <Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-2.jpg" roundedCircle className="profile-pic"/> <Image src="assets/person-2.jpg" roundedCircle className="profile-pic" />
<h3>Simone Ferrari</h3> <h3>Simone Ferrari</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p> <p>Recommender Random<br/>
Recommender Related<br/>
Recommender Similarity Genere<br/>
Box delle informazioni relative al video
</p>
</Col> </Col>
<Col xs={12} sm={4} className="person-wrapper"> <Col xs={12} sm={4} className="person-wrapper">
<Image src="assets/person-3.jpg" roundedCircle className="profile-pic"/> <Image src="assets/person-3.jpg" roundedCircle className="profile-pic" />
<h3>Gregorio Giacchetti</h3> <h3>Gregorio Giacchetti</h3>
<p>That's a crooked tree. We'll send him to Washington. These little son of a guns hide in your brush and you just have to push them out.</p> <p>Recommender Recent<br/>
Recommender fvitali<br/>
Gestione della barra dei recommender<br/>
AboutUs
</p>
</Col> </Col>
</Row> </Row>
</Container> </Container>
src/App.js
+7 -5
View File
@@ -34,19 +34,21 @@ class App extends React.Component {
exact: true, exact: true,
strict: false strict: false
}); });
if (prevState.videoId !== null){ if (prevState.videoId !== null) {
if (idMatch && idMatch.params.id !== prevState.videoId) { if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('prevId', prevState.videoId) localStorage.setItem('prevId', prevState.videoId)
localStorage.setItem('lastId', idMatch.params.id) localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id }; return { videoId: idMatch.params.id };
} }
else{ else {
if (idMatch && idMatch.params.id !== prevState.videoId) { if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('lastId', idMatch.params.id) localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id }; return { videoId: idMatch.params.id };
} }
return null; return null;
}}} }
}
}
@@ -61,7 +63,7 @@ class App extends React.Component {
xs="12" xs="12"
lg={this.state.isInfoToggled ? { span: 8, offset: 0, order: 2 } : { span: 9, offset: 0, order: 2 }} lg={this.state.isInfoToggled ? { span: 8, offset: 0, order: 2 } : { span: 9, offset: 0, order: 2 }}
className="blackBg align-content-center"> className="blackBg align-content-center">
<Col xs="12" lg={this.state.isInfoToggled ? { span: 10, offset: 1} : { span: 10, offset: 1 }}> <Col xs="12" lg={this.state.isInfoToggled ? { span: 10, offset: 1 } : { span: 10, offset: 1 }}>
<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}> <ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
<VideoPlayer videoId={this.state.videoId} /> <VideoPlayer videoId={this.state.videoId} />
</ReactHeight> </ReactHeight>
@@ -70,7 +72,7 @@ class App extends React.Component {
<Col <Col
xs="12" xs="12"
lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }} lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }}
className={this.state.isInfoToggled ? "": "blackBg"} className={this.state.isInfoToggled ? "" : "blackBg"}
style={window.innerWidth < 992 ? style={window.innerWidth < 992 ?
{ 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } : { 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } :
{ 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}> { 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>
src/Suggestion.js
-1
View File
@@ -1,5 +1,4 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Switch, Route } from 'react-router'; import { Switch, Route } from 'react-router';
import Random from './reccomenders/Random'; import Random from './reccomenders/Random';
import Related from './reccomenders/Related'; import Related from './reccomenders/Related';
src/VideoInfo.js
+2 -2
View File
@@ -52,7 +52,7 @@ class VideoInfo extends React.Component {
}); });
let index = videosResponse.data.items[0].topicDetails.relevantTopicIds.indexOf('/m/04rlf'); let index = videosResponse.data.items[0].topicDetails.relevantTopicIds.indexOf('/m/04rlf');
videosResponse.data.items[0].topicDetails.relevantTopicIds.splice(index, 1); videosResponse.data.items[0].topicDetails.relevantTopicIds.splice(index, 1);
localStorage.setItem('lastTopic',videosResponse.data.items[0].topicDetails.relevantTopicIds); localStorage.setItem('lastTopic', videosResponse.data.items[0].topicDetails.relevantTopicIds);
}), error => { }), error => {
console.error(error); console.error(error);
this.setState({ this.setState({
@@ -71,7 +71,7 @@ class VideoInfo extends React.Component {
return ( return (
<span className="text-white"> <span className="text-white">
<span>{}</span> <span>{}</span>
Error: {error.message} -- {error.response.data && error.response.data.error.message.replace(htmlRegEx,'')} Error: {error.message} -- {error.response.data && error.response.data.error.message.replace(htmlRegEx, '')}
</span> </span>
); );
} else if (!isLoaded) { } else if (!isLoaded) {
src/VideoList.js
+6 -4
View File
@@ -23,7 +23,7 @@ class VideoList extends React.Component {
response => { response => {
this.shuffleArray(response.data); this.shuffleArray(response.data);
this.getThumbnails(response.data) this.getThumbnails(response.data)
.then(videoList => localStorage.setItem('fixedVideoList',JSON.stringify(videoList))); .then(videoList => localStorage.setItem('fixedVideoList', JSON.stringify(videoList)));
}, },
// Note: it's important to handle errors here // Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow // instead of a catch() block so that we don't swallow
@@ -74,15 +74,17 @@ class VideoList extends React.Component {
]) ])
.then( .then(
axios.spread((res1, res2, res3) => { axios.spread((res1, res2, res3) => {
[...res1.data.items,...res2.data.items,...res3.data.items] [...res1.data.items, ...res2.data.items, ...res3.data.items]
.map(resCurrentValue => .map(resCurrentValue =>
Object.defineProperty( Object.defineProperty(
videoItems.find(videoItem => { videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id; return videoItem.videoID === resCurrentValue.id;
}), }),
'thumbnail', 'thumbnail',
{ value: resCurrentValue.snippet.thumbnails.medium.url, {
enumerable: true } value: resCurrentValue.snippet.thumbnails.medium.url,
enumerable: true
}
) )
); );
this.setState({ this.setState({
src/VideoPlayer.js
+19 -19
View File
@@ -14,12 +14,12 @@ class VideoPlayer extends React.Component {
autoplay: 0, autoplay: 0,
modestbranding: 1, modestbranding: 1,
fs: 0, fs: 0,
iv_load_policy:3, iv_load_policy: 3,
rel: 0, rel: 0,
origin//: 'http://site1854.tw.cs.unibo.it' origin//: 'http://site1854.tw.cs.unibo.it'
} }
}, },
promise1: Promise, promise1: null,
promise2: Promise, promise2: Promise,
outsideReject1: null, outsideReject1: null,
outsideReject2: null outsideReject2: null
@@ -45,9 +45,9 @@ class VideoPlayer extends React.Component {
console.error('Player error: ', event); console.error('Player error: ', event);
} }
_onPlay(event) {} _onPlay(event) { }
_onReady(event) {} _onReady(event) { }
_onStateChange(event) { _onStateChange(event) {
let timerId1, timerId2; let timerId1, timerId2;
@@ -94,20 +94,19 @@ class VideoPlayer extends React.Component {
}) })
.then( .then(
response => console.info(response.data), response => console.info(response.data),
error => this.setState({error})//console.error(error, videoIdWatched.toString()) error => this.setState({ error })//console.error(error, videoIdWatched.toString())
); );
// local storage logic for recent reccomender // local storage logic for recent reccomender
let tmp = JSON.parse(localStorage.getItem('lastWatched')) let tmp = JSON.parse(localStorage.getItem('lastWatched'))
let j=tmp.findIndex(el=>el.id.toString()===videoIdWatched.toString()) let j = tmp.findIndex(el => el.id.toString() === videoIdWatched.toString())
if (j<0) { if (j < 0) {
if (localStorage['prevId']==='1') if (localStorage['prevId'] === '1') {
{
//per primo video //per primo video
tmp.push({ tmp.push({
'id': videoIdWatched.toString(), 'id': videoIdWatched.toString(),
'lastWatched' : new Date(), 'lastWatched': new Date(),
'timesWatched' : 1, 'timesWatched': 1,
'prevVideos': [] 'prevVideos': []
}) })
} }
@@ -115,21 +114,22 @@ class VideoPlayer extends React.Component {
//Prima volta video generico //Prima volta video generico
tmp.push({ tmp.push({
'id': videoIdWatched.toString(), 'id': videoIdWatched.toString(),
'lastWatched' : new Date(), 'lastWatched': new Date(),
'timesWatched' : 1, 'timesWatched': 1,
'prevVideos' : [{id:[localStorage["prevId"]].toString()}] 'prevVideos': [{ id: [localStorage["prevId"]].toString() }]
}) })
} }
} }
else { else {
//altre volte //altre volte
tmp[j].timesWatched++; tmp[j].timesWatched++;
tmp[j].lastWatched= new Date(); tmp[j].lastWatched = new Date();
let z=tmp[j].prevVideos.findIndex(el=>el.id === localStorage["prevId"].toString()) let z = tmp[j].prevVideos.findIndex(el => el.id === localStorage["prevId"].toString())
if (z<0){ if (z < 0) {
tmp[j].prevVideos.push({ tmp[j].prevVideos.push({
'id': localStorage["prevId"].toString() 'id': localStorage["prevId"].toString()
})} })
}
} }
@@ -154,7 +154,7 @@ class VideoPlayer extends React.Component {
break; break;
} }
}) })
.finally(()=>{this.setState({promise2: null, outsideReject2: null})}); .finally(() => { this.setState({ promise2: null, outsideReject2: null }) });
} }
} }
_onStateChange = this._onStateChange.bind(this); _onStateChange = this._onStateChange.bind(this);
src/Wikipedia.js
+1 -1
View File
@@ -74,7 +74,7 @@ class Wikipedia extends Component {
}) })
.then(resRecordingQuery => { .then(resRecordingQuery => {
let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString(); let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
console.log(x,'resRecordingQuery.data true', resRecordingQuery.data) console.log(x, 'resRecordingQuery.data true', resRecordingQuery.data)
}, err => { console.error(err) }) }, err => { console.error(err) })
} }
, err => console.error(err)) , err => console.error(err))
src/index.js
+9 -9
View File
@@ -9,16 +9,16 @@ import App from './App';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([])) localStorage['lastWatched'] ? function () { }() : localStorage.setItem('lastWatched', JSON.stringify([]))
localStorage['first'] ? function (){}() : localStorage.setItem('first', JSON.stringify([])) localStorage['first'] ? function () { }() : localStorage.setItem('first', JSON.stringify([]))
localStorage['prevId'] ? function (){}() : localStorage.setItem('prevId','1') localStorage['prevId'] ? function () { }() : localStorage.setItem('prevId', '1')
localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY') localStorage['lastId'] ? function () { }() : localStorage.setItem('lastId', '0J2QdDbelmY')
localStorage['currentVideoInfo']? function(){}() : localStorage.setItem('currentVideoInfo', JSON.stringify({ localStorage['currentVideoInfo'] ? function () { }() : localStorage.setItem('currentVideoInfo', JSON.stringify({
'id':'0J2QdDbelmY', 'id': '0J2QdDbelmY',
'artist':'Seven Nation Army', 'artist': 'Seven Nation Army',
'genre':'Rock' 'genre': 'Rock'
})); }));
localStorage['lastTopic']? function(){}() : localStorage.setItem('lastTopic','/m/04rlf'); localStorage['lastTopic'] ? function () { }() : localStorage.setItem('lastTopic', '/m/04rlf');
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root')); ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();
src/reccomenders/Random.js
+16 -15
View File
@@ -1,20 +1,20 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from "axios"; import axios from "axios";
import createpageToken from 'youtube-page-token'; import createpageToken from 'youtube-page-token';
import {Card,Col} from "react-bootstrap"; import { Card, Col } from "react-bootstrap";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import moment from "moment"; import moment from "moment";
class RecommenderRandom extends Component{ class RecommenderRandom extends Component {
state={ state = {
items : [], items: [],
} }
ISO_8601parse(a) { ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
} }
componentDidMount(){ componentDidMount() {
let pos = Math.floor(Math.random() * 500); let pos = Math.floor(Math.random() * 500);
let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero
di pagina che gli viene passato(in questo caso pos) che verrai poi usato di pagina che gli viene passato(in questo caso pos) che verrai poi usato
@@ -23,16 +23,16 @@ class RecommenderRandom extends Component{
axios.get("https://www.googleapis.com/youtube/v3/search", { axios.get("https://www.googleapis.com/youtube/v3/search", {
params: { params: {
'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': '21', 'maxResults': '21',
'pageToken' : pageToken, 'pageToken': pageToken,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
response => { response => {
this.setState({ this.setState({
items : response.data.items, items: response.data.items,
}) })
}, },
error => { error => {
@@ -41,16 +41,17 @@ class RecommenderRandom extends Component{
) )
} }
render(){ render() {
const ISO_8601parse = this.ISO_8601parse; const ISO_8601parse = this.ISO_8601parse;
return (<React.Fragment> return (<React.Fragment>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item, index) {
return( return (
<Col key={index} md='4'> <Col key={index} md='4'>
<Card> <Card>
<Link <Link
to={{ to={{
pathname: '/video/' + item.id.videoId, pathname: '/video/' + item.id.videoId,
search: "?ref=Random"
}} }}
> >
<Card.Img <Card.Img
@@ -59,7 +60,7 @@ class RecommenderRandom extends Component{
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/> {item.snippet.title}<br />
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
@@ -68,7 +69,7 @@ class RecommenderRandom extends Component{
</Col> </Col>
) )
})} })}
</React.Fragment> ); </React.Fragment>);
} }
} }
export default RecommenderRandom; export default RecommenderRandom;
src/reccomenders/Recent.js
+1 -1
View File
@@ -56,7 +56,6 @@ class Recent extends React.Component {
render() { render() {
const recentVideoList = JSON.parse(localStorage.getItem('lastWatched'))
const { error, isLoaded, items } = this.state; const { error, isLoaded, items } = this.state;
if (error) { if (error) {
return ( return (
@@ -77,6 +76,7 @@ class Recent extends React.Component {
<Link <Link
to={{ to={{
pathname: '/video/' + item.id, pathname: '/video/' + item.id,
search: "?ref=Recent"
}} }}
> >
<Card.Img <Card.Img
src/reccomenders/Related.js
+21 -20
View File
@@ -1,14 +1,14 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from 'axios'; import axios from 'axios';
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import {Card,Col} from "react-bootstrap"; import { Card, Col } from "react-bootstrap";
import moment from "moment"; import moment from "moment";
class Related extends Component { class Related extends Component {
state={ state = {
videoId : localStorage['lastId'], videoId: localStorage['lastId'],
items : [] items: []
} }
@@ -17,12 +17,12 @@ class Related extends Component {
} }
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.props.match.params.id, 'relatedToVideoId': this.props.match.params.id,
'type' : 'video', 'type': 'video',
'maxResults' : '22', 'maxResults': '22',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
@@ -37,14 +37,14 @@ class Related extends Component {
) )
} }
componentDidUpdate(prevProps,prevState){ componentDidUpdate(prevProps, prevState) {
if (prevProps.match.params.id !== this.props.match.params.id){ if (prevProps.match.params.id !== this.props.match.params.id) {
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.props.match.params.id, 'relatedToVideoId': this.props.match.params.id,
'type' : 'video', 'type': 'video',
'maxResults' : '22', 'maxResults': '22',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
@@ -64,13 +64,14 @@ class Related extends Component {
const ISO_8601parse = this.ISO_8601parse; const ISO_8601parse = this.ISO_8601parse;
return ( return (
<React.Fragment> <React.Fragment>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item, index) {
return( return (
<Col key={index} md="4"> <Col key={index} md="4">
<Card> <Card>
<Link <Link
to={{ to={{
pathname: '/video/' + item.id.videoId, pathname: '/video/' + item.id.videoId,
search: "?ref=Related"
}} }}
> >
<Card.Img <Card.Img
@@ -79,7 +80,7 @@ class Related extends Component {
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/> {item.snippet.title}<br />
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
src/reccomenders/Search.js
+2 -1
View File
@@ -1,7 +1,7 @@
import React from 'react'; import React from 'react';
import axios from 'axios'; import axios from 'axios';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Card, Col, Media } from 'react-bootstrap'; import { Col, Media } from 'react-bootstrap';
class Search extends React.Component { class Search extends React.Component {
@@ -117,6 +117,7 @@ class Search extends React.Component {
as="li" className="media mx-5 my-1 suggItem" as="li" className="media mx-5 my-1 suggItem"
to={{ to={{
pathname: '/video/' + item.id.videoId, pathname: '/video/' + item.id.videoId,
search: "?ref=Search"
}}> }}>
<img <img
width={240} width={240}
src/reccomenders/fvitali.js
+13 -11
View File
@@ -14,8 +14,8 @@ class fvitali extends React.Component {
componentDidMount() { componentDidMount() {
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', { axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
'params':{ 'params': {
'id':this.props.match.params.id //se 'id'=>'Id', allora tutti video random, sennò anche per genere simile 'id': this.props.match.params.id //se 'id'=>'Id', allora tutti video random, sennò anche per genere simile
} }
}).then( }).then(
response => { response => {
@@ -56,7 +56,7 @@ class fvitali extends React.Component {
'thumbnail': 'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url }, { value: resCurrentValue.snippet.thumbnails.medium.url },
'name': 'name':
{value: resCurrentValue.snippet.title} { value: resCurrentValue.snippet.title }
}) })
); );
this.setState({ this.setState({
@@ -78,19 +78,20 @@ class fvitali extends React.Component {
); );
} else if (!isLoaded) { } else if (!isLoaded) {
return ( return (
<Col className="text-center"> <Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div> <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col> </Col>
); );
} else { } else {
if(window.innerWidth < 992){ if (window.innerWidth < 992) {
return( return (
<React.Fragment> <React.Fragment>
{items.map(item=>( <Col md="4"> {items.map(item => (<Col md="4">
<Card key={item.videoID}> <Card key={item.videoID}>
<Link <Link
to={{ to={{
pathname: '/video/' + item.videoID, pathname: '/video/' + item.videoID,
search: "?ref=fvitali"
}} }}
> >
<Card.Img <Card.Img
@@ -109,8 +110,8 @@ class fvitali extends React.Component {
</Col>))} </Col>))}
</React.Fragment> </React.Fragment>
); );
}else{ } else {
return( return (
<ul className="list-unstyled">{ <ul className="list-unstyled">{
items.map(item => ( items.map(item => (
<Link <Link
@@ -118,7 +119,7 @@ class fvitali extends React.Component {
as="li" className="media mx-5 my-1 suggItem" as="li" className="media mx-5 my-1 suggItem"
to={{ to={{
pathname: `/video/${item.videoID}`, pathname: `/video/${item.videoID}`,
search: '?ref=fvitali587' search: '?ref=fvitali'
}}> }}>
<img <img
width={240} width={240}
@@ -135,7 +136,8 @@ class fvitali extends React.Component {
</Link> </Link>
)) ))
}</ul> }</ul>
);} );
}
} }
} }
} }
src/reccomenders/genreSimilarity.js
+12 -11
View File
@@ -1,13 +1,13 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from 'axios'; import axios from 'axios';
import {Card, Col, Tab, Tabs} from "react-bootstrap"; import { Card, Col } from "react-bootstrap";
import createpageToken from 'youtube-page-token'; import createpageToken from 'youtube-page-token';
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import moment from "moment"; import moment from "moment";
class genreSimilarity extends Component { class genreSimilarity extends Component {
state={ state = {
items : [] items: []
}; };
ISO_8601parse(a) { ISO_8601parse(a) {
@@ -24,8 +24,8 @@ class genreSimilarity extends Component {
'topicId': localStorage['lastTopic'], 'topicId': localStorage['lastTopic'],
'type': 'video', 'type': 'video',
'maxResults': '21', 'maxResults': '21',
'order' : 'viewCount', 'order': 'viewCount',
'pageToken' : pageToken, 'pageToken': pageToken,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
@@ -40,16 +40,17 @@ class genreSimilarity extends Component {
) )
} }
render(){ render() {
const ISO_8601parse = this.ISO_8601parse; const ISO_8601parse = this.ISO_8601parse;
return (<React.Fragment> return (<React.Fragment>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item, index) {
return( return (
<Col key={index} md='4'> <Col key={index} md='4'>
<Card> <Card>
<Link <Link
to={{ to={{
pathname: '/video/' + item.id.videoId, pathname: '/video/' + item.id.videoId,
search: "?ref=genreSimilarity"
}} }}
> >
<Card.Img <Card.Img
@@ -58,7 +59,7 @@ class genreSimilarity extends Component {
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/> {item.snippet.title}<br />
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
@@ -67,7 +68,7 @@ class genreSimilarity extends Component {
</Col> </Col>
) )
})} })}
</React.Fragment> ); </React.Fragment>);
} }
} }
src/reccomenders/popGlobaleAssoluta.js
+4 -3
View File
@@ -26,7 +26,7 @@ class popGlobaleAssoluta extends React.Component {
// let listSiti = ['1828', '1829', '1838', '1839', '1846', '1822', '1847', '1831', '1827', '1848', '1824', '1830', '1836', '1850', '1849', '1851', '1861', '1823', '1863', '1834', '1904', '1906', '1901', '1862', '1859']; // let listSiti = ['1828', '1829', '1838', '1839', '1846', '1822', '1847', '1831', '1827', '1848', '1824', '1830', '1836', '1850', '1849', '1851', '1861', '1823', '1863', '1834', '1904', '1906', '1901', '1862', '1859'];
let listSiti = ['1828', '1838', '1839', '1846', '1847', '1831', '1827', '1849', '1823', '1863', '1834', '1901', '1859']; let listSiti = ['1828', '1838', '1839', '1846', '1847', '1831', '1827', '1849', '1823', '1863', '1834', '1901', '1859'];
let axiosReq = []; let axiosReq = [];
for(let i=0; i<listSiti.length; i++){ for (let i = 0; i < listSiti.length; i++) {
console.log(`http://site${listSiti[i]}.tw.cs.unibo.it/globpop`) console.log(`http://site${listSiti[i]}.tw.cs.unibo.it/globpop`)
axiosReq.push(axios.get(`http://site${listSiti[i]}.tw.cs.unibo.it/globpop`, { axiosReq.push(axios.get(`http://site${listSiti[i]}.tw.cs.unibo.it/globpop`, {
'params': { 'params': {
@@ -36,7 +36,7 @@ class popGlobaleAssoluta extends React.Component {
} }
Promise.all(axiosReq) Promise.all(axiosReq)
.then(axios.spread((...res) => { .then(axios.spread((...res) => {
console.log(res.map(x=>x.data)) console.log(res.map(x => x.data))
}) })
) )
} }
@@ -76,7 +76,7 @@ class popGlobaleAssoluta extends React.Component {
render() { render() {
const { error, isLoaded, items, headers } = this.state; const { error, isLoaded, items } = this.state;
if (error) { if (error) {
return ( return (
<React.Fragment> <React.Fragment>
@@ -99,6 +99,7 @@ class popGlobaleAssoluta extends React.Component {
<Link <Link
to={{ to={{
pathname: '/video/' + item.videoID, pathname: '/video/' + item.videoID,
search: "?ref=popGlobaleAssoluta"
}} }}
> >
<Card.Img <Card.Img
src/reccomenders/popLocaleAss.js
+6 -5
View File
@@ -18,10 +18,10 @@ class popLocaleAss extends React.Component {
componentDidMount() { componentDidMount() {
axios axios
.get('http://site1854.tw.cs.unibo.it/videotrack') .get('http://site1854.tw.cs.unibo.it/videotrack')
.then(res=>{ .then(res => {
this.getThumbnailsNames(res.data.sort((a, b) => a.timesWatched - b.timesWatched).reverse()); this.getThumbnailsNames(res.data.sort((a, b) => a.timesWatched - b.timesWatched).reverse());
} }
,error=>this.setState({error})) , error => this.setState({ error }))
} }
// shouldComponentUpdate(nextProps, nextState) { // shouldComponentUpdate(nextProps, nextState) {
@@ -60,9 +60,9 @@ class popLocaleAss extends React.Component {
'thumbnail': 'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url }, { value: resCurrentValue.snippet.thumbnails.medium.url },
'name': 'name':
{value: resCurrentValue.snippet.title}, { value: resCurrentValue.snippet.title },
'description': 'description':
{value: resCurrentValue.snippet.description } { value: resCurrentValue.snippet.description }
}) })
); );
this.setState({ this.setState({
@@ -89,6 +89,7 @@ class popLocaleAss extends React.Component {
as="li" className="media mx-5 my-1 suggItem" as="li" className="media mx-5 my-1 suggItem"
to={{ to={{
pathname: '/video/' + item.id, pathname: '/video/' + item.id,
search: "?ref=popLocaleAss"
}}> }}>
<img <img
width={240} width={240}
@@ -99,7 +100,7 @@ class popLocaleAss extends React.Component {
/> />
<Media.Body> <Media.Body>
<h5>{item.name}</h5> <h5>{item.name}</h5>
<p>{item.description.substring(0,200)}</p> <p>{item.description.substring(0, 200)}</p>
<p>Visto: {item.timesWatched} volte <br /> <p>Visto: {item.timesWatched} volte <br />
Reccomender: popLocaleAss</p> Reccomender: popLocaleAss</p>
</Media.Body> </Media.Body>
src/reccomenders/popRelLoc.js
+4 -5
View File
@@ -19,12 +19,10 @@ class PopRelLoc extends React.Component {
componentDidMount() { componentDidMount() {
let tmp = JSON.parse(localStorage.getItem('lastWatched')); let tmp = JSON.parse(localStorage.getItem('lastWatched'));
let j=tmp.findIndex(el=>el.id === localStorage["lastId"]); let j = tmp.findIndex(el => el.id === localStorage["lastId"]);
//this.getThumbnailsNames(tmp[j].prevVideos); //this.getThumbnailsNames(tmp[j].prevVideos);
if (tmp.length === 0 || localStorage["prevId"] === '1') if (tmp.length === 0 || localStorage["prevId"] === '1') { this.getThumbnailsNames(JSON.parse(localStorage.getItem('first'))) }
{this.getThumbnailsNames(JSON.parse(localStorage.getItem('first')))} else { this.getThumbnailsNames(tmp[j].prevVideos) }
else
{this.getThumbnailsNames(tmp[j].prevVideos)}
} }
@@ -88,6 +86,7 @@ class PopRelLoc extends React.Component {
<Link <Link
to={{ to={{
pathname: '/video/' + item.id, pathname: '/video/' + item.id,
search: "?ref=popRelLoc"
}} }}
> >
<Card.Img <Card.Img
src/reccomenders/similarityArtist.js
+15 -8
View File
@@ -17,15 +17,15 @@ class similarityArtist extends React.Component {
componentDidMount() { componentDidMount() {
let timerId1; let timerId1;
let promise = new Promise ((resolve,reject) => { let promise = new Promise((resolve, reject) => {
timerId1 = window.setInterval(()=>{ timerId1 = window.setInterval(() => {
if(localStorage['lastId'] === JSON.parse(localStorage['currentVideoInfo']).id) if (localStorage['lastId'] === JSON.parse(localStorage['currentVideoInfo']).id)
resolve(true) resolve(true)
},1000) }, 1000)
}) })
promise.then(()=>{ promise.then(() => {
window.clearInterval(timerId1); window.clearInterval(timerId1);
this.setState({artist: JSON.parse(localStorage['currentVideoInfo']).artist}) this.setState({ artist: JSON.parse(localStorage['currentVideoInfo']).artist })
axios.get('https://www.googleapis.com/youtube/v3/search', { axios.get('https://www.googleapis.com/youtube/v3/search', {
params: { params: {
'part': 'snippet', 'part': 'snippet',
@@ -37,12 +37,19 @@ class similarityArtist extends React.Component {
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then( }).then(
res => res => {
let j = res.data.items.findIndex(el => el.id.videoId === localStorage['lastId'])
if (j >= 0)
res.data.items.splice(j, 1);
this.setState({ this.setState({
res: res.data, res: res.data,
isLoaded: true isLoaded: true
}) })
console.log(res);
}
, ,
error => this.setState({ error => this.setState({
error error
}) })
@@ -85,7 +92,7 @@ class similarityArtist extends React.Component {
as="li" className="media mx-5 my-1 suggItem" as="li" className="media mx-5 my-1 suggItem"
to={{ to={{
pathname: '/video/' + item.id.videoId, pathname: '/video/' + item.id.videoId,
search:"?ref=similarityArtist" search: "?ref=similarityArtist"
}}> }}>
<img <img
width={240} width={240}
src/registerServiceWorker.js
+1 -1
View File
@@ -30,7 +30,7 @@ export default function register() {
} }
window.addEventListener('load', () => { window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL?process.env.PUBLIC_URL:'http://localhost:8000'}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL ? process.env.PUBLIC_URL : 'http://localhost:8000'}/service-worker.js`;
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not. // This is running on localhost. Lets check if a service worker still exists or not.