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>
<Row className="show-Container text-center">
<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>
<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 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>
<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 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>
<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>
</Row>
</Container>
src/App.js
+17 -15
View File
@@ -34,19 +34,21 @@ class App extends React.Component {
exact: true,
strict: false
});
if (prevState.videoId !== null){
if (prevState.videoId !== null) {
if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('prevId', prevState.videoId)
localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id };
}
else{
if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id };
else {
if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('lastId', idMatch.params.id)
return { videoId: idMatch.params.id };
}
return null;
}
}
return null;
}}}
}
@@ -61,19 +63,19 @@ class App extends React.Component {
xs="12"
lg={this.state.isInfoToggled ? { span: 8, offset: 0, order: 2 } : { span: 9, offset: 0, order: 2 }}
className="blackBg align-content-center">
<Col xs="12" lg={this.state.isInfoToggled ? { span: 10, offset: 1} : { span: 10, offset: 1 }}>
<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
<VideoPlayer videoId={this.state.videoId} />
</ReactHeight>
<Col xs="12" lg={this.state.isInfoToggled ? { span: 10, offset: 1 } : { span: 10, offset: 1 }}>
<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
<VideoPlayer videoId={this.state.videoId} />
</ReactHeight>
</Col>
</Col>
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }}
className={this.state.isInfoToggled ? "": "blackBg"}
style={window.innerWidth < 992 ?
{ 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } :
{ 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>
className={this.state.isInfoToggled ? "" : "blackBg"}
style={window.innerWidth < 992 ?
{ 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } :
{ 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>
{/* true = style for xs ;; false = style for lg */}
<div className="d-flex justify-content-center">
<Button
src/Suggestion.js
+13 -14
View File
@@ -1,5 +1,4 @@
import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Switch, Route } from 'react-router';
import Random from './reccomenders/Random';
import Related from './reccomenders/Related';
@@ -39,19 +38,19 @@ class Suggestion extends Component {
render() {
return (
<React.Fragment>
<Switch>
<Route path='/video/:id/genreSimilarity' component={genreSimilarity} />
<Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} />
<Route path='/video/:id/random' component={Random} />
<Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
<Route path='/video/:id/popLocaleAss' component={popLocaleAss} />
<Route path='/video/:id/recent' component={Recent} />
<Route path='/video/:id/similarityArtist' component={similarityArtist} />
<Route path='/video/:id/popRelLoc' component={PopRelLoc} />
{/* lasciare questo per ultimo */}
<Route component={Related} />
</Switch>
<Switch>
<Route path='/video/:id/genreSimilarity' component={genreSimilarity} />
<Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} />
<Route path='/video/:id/random' component={Random} />
<Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
<Route path='/video/:id/popLocaleAss' component={popLocaleAss} />
<Route path='/video/:id/recent' component={Recent} />
<Route path='/video/:id/similarityArtist' component={similarityArtist} />
<Route path='/video/:id/popRelLoc' component={PopRelLoc} />
{/* lasciare questo per ultimo */}
<Route component={Related} />
</Switch>
</React.Fragment>
);
}
src/TopBar.js
+25 -25
View File
@@ -22,7 +22,7 @@ class TopBar extends Component {
}
handleSubmit = event => {
event.preventDefault();
// event.target.reset();
// event.target.reset();
this.props.history.push('/search/' + this.state.query);
}
render() {
@@ -41,40 +41,40 @@ class TopBar extends Component {
<Link to={{ pathname: `/video/${localStorage['lastId']}/random` }} className="text-light nav-link">Random</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
{<NavDropdown title="Similarity" id="basic-nav-dropdown" >
<Link to={{ pathname: `/video/${localStorage['lastId']}/similarityArtist` }} className="text-dark nav-link">
Artist
<Link to={{ pathname: `/video/${localStorage['lastId']}/similarityArtist` }} className="text-dark nav-link">
Artist
</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link">
Genre
<Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link">
Genre
</Link>
</NavDropdown>}
{<NavDropdown title="Popolarità locale" id="basic-nav-dropdown" >
<Link to={{ pathname: `/video/${localStorage['lastId']}/popLocaleAss` }} className="text-dark nav-link">
Assoluta
</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/popRelLoc` }} className="text-dark nav-link">
Relativa
<Link to={{ pathname: `/video/${localStorage['lastId']}/popLocaleAss` }} className="text-dark nav-link">
Assoluta
</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/popRelLoc` }} className="text-dark nav-link">
Relativa
</Link>
</NavDropdown>}
{<NavDropdown title="Popolarità globale" id="basic-nav-dropdown" >
<Link to={{ pathname: `/video/${localStorage['lastId']}/popGlobalAssoluta` }} className="text-dark nav-link">
Assoluta
<Link to={{ pathname: `/video/${localStorage['lastId']}/popGlobalAssoluta` }} className="text-dark nav-link">
Assoluta
</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
Relativa
<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
Relativa
</Link>
</NavDropdown>}
<Link to={{ pathname: `/video/${localStorage['lastId']}/progetti` }} className="text-light nav-link">Progetti</Link>
src/VideoInfo.js
+4 -4
View File
@@ -52,7 +52,7 @@ class VideoInfo extends React.Component {
});
let index = videosResponse.data.items[0].topicDetails.relevantTopicIds.indexOf('/m/04rlf');
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 => {
console.error(error);
this.setState({
@@ -71,13 +71,13 @@ class VideoInfo extends React.Component {
return (
<span className="text-white">
<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>
);
} else if (!isLoaded) {
return <div className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>;
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>;
} else {
return (
<React.Fragment>
src/VideoList.js
+43 -41
View File
@@ -6,43 +6,43 @@ import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
class VideoList extends React.Component {
state = {
error: null,
isLoaded: false,
items: [],
headers: null
};
error: null,
isLoaded: false,
items: [],
headers: null
};
componentDidMount() {
localStorage['fixedVideoList'] ?
this.setState({
items: this.shuffleArray(JSON.parse(localStorage.getItem('fixedVideoList'))),
isLoaded: true
}) :
axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
response => {
this.shuffleArray(response.data);
this.getThumbnails(response.data)
.then(videoList => localStorage.setItem('fixedVideoList',JSON.stringify(videoList)));
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
}
)
this.setState({
items: this.shuffleArray(JSON.parse(localStorage.getItem('fixedVideoList'))),
isLoaded: true
}) :
axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
response => {
this.shuffleArray(response.data);
this.getThumbnails(response.data)
.then(videoList => localStorage.setItem('fixedVideoList', JSON.stringify(videoList)));
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
// exceptions from actual bugs in components.
error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
}
)
}
// METODI
getThumbnails(videoItems) {
let idToLookFor = videoItems.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100;
return axios
return axios
.all([
// chain 3 parallel get
axios.get('https://www.googleapis.com/youtube/v3/videos', {
@@ -74,22 +74,24 @@ class VideoList extends React.Component {
])
.then(
axios.spread((res1, res2, res3) => {
[...res1.data.items,...res2.data.items,...res3.data.items]
.map(resCurrentValue =>
Object.defineProperty(
videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
}),
'thumbnail',
{ value: resCurrentValue.snippet.thumbnails.medium.url,
enumerable: true }
)
);
[...res1.data.items, ...res2.data.items, ...res3.data.items]
.map(resCurrentValue =>
Object.defineProperty(
videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
}),
'thumbnail',
{
value: resCurrentValue.snippet.thumbnails.medium.url,
enumerable: true
}
)
);
this.setState({
isLoaded: true,
items: videoItems
});
return new Promise((resolve, reject) => resolve(videoItems))
return new Promise((resolve, reject) => resolve(videoItems))
})
)
}
@@ -114,8 +116,8 @@ class VideoList extends React.Component {
);
} else if (!isLoaded) {
return <Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<React.Fragment>
src/VideoPlayer.js
+66 -66
View File
@@ -6,48 +6,48 @@ import { withRouter } from 'react-router-dom';
class VideoPlayer extends React.Component {
state = {
opt: {
// height: '390',
// width: '640',
playerVars: {
// https://developers.google.com/youtube/player_parameters
autoplay: 0,
modestbranding: 1,
fs: 0,
iv_load_policy:3,
rel: 0,
origin//: 'http://site1854.tw.cs.unibo.it'
}
},
promise1: Promise,
promise2: Promise,
outsideReject1: null,
outsideReject2: null
};
opt: {
// height: '390',
// width: '640',
playerVars: {
// https://developers.google.com/youtube/player_parameters
autoplay: 0,
modestbranding: 1,
fs: 0,
iv_load_policy: 3,
rel: 0,
origin//: 'http://site1854.tw.cs.unibo.it'
}
},
promise1: null,
promise2: Promise,
outsideReject1: null,
outsideReject2: null
};
render() {
return (
<YouTube
opts={this.state.opt}
videoId={this.props.videoId}
onReady={this._onReady}
onPlay={this._onPlay}
onError={this._onError}
onStateChange={this._onStateChange}
className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9"
/>
<YouTube
opts={this.state.opt}
videoId={this.props.videoId}
onReady={this._onReady}
onPlay={this._onPlay}
onError={this._onError}
onStateChange={this._onStateChange}
className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9"
/>
);
}
// access to player in all event handlers via event.target
_onError(event) {
console.error('Player error: ', event);
}
_onPlay(event) {}
_onPlay(event) { }
_onReady(event) {}
_onReady(event) { }
_onStateChange(event) {
let timerId1, timerId2;
@@ -94,67 +94,67 @@ class VideoPlayer extends React.Component {
})
.then(
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
let tmp = JSON.parse(localStorage.getItem('lastWatched'))
let j=tmp.findIndex(el=>el.id.toString()===videoIdWatched.toString())
if (j<0) {
let tmp = JSON.parse(localStorage.getItem('lastWatched'))
let j = tmp.findIndex(el => el.id.toString() === videoIdWatched.toString())
if (j < 0) {
if (localStorage['prevId']==='1')
{
if (localStorage['prevId'] === '1') {
//per primo video
tmp.push({
'id': videoIdWatched.toString(),
'lastWatched' : new Date(),
'timesWatched' : 1,
'lastWatched': new Date(),
'timesWatched': 1,
'prevVideos': []
})
}
})
}
else {
//Prima volta video generico
tmp.push({
'id': videoIdWatched.toString(),
'lastWatched' : new Date(),
'timesWatched' : 1,
'prevVideos' : [{id:[localStorage["prevId"]].toString()}]
})
}
}
//Prima volta video generico
tmp.push({
'id': videoIdWatched.toString(),
'lastWatched': new Date(),
'timesWatched': 1,
'prevVideos': [{ id: [localStorage["prevId"]].toString() }]
})
}
}
else {
//altre volte
tmp[j].timesWatched++;
tmp[j].lastWatched= new Date();
let z=tmp[j].prevVideos.findIndex(el=>el.id === localStorage["prevId"].toString())
if (z<0){
tmp[j].prevVideos.push({
'id': localStorage["prevId"].toString()
})}
}
//altre volte
tmp[j].timesWatched++;
tmp[j].lastWatched = new Date();
let z = tmp[j].prevVideos.findIndex(el => el.id === localStorage["prevId"].toString())
if (z < 0) {
tmp[j].prevVideos.push({
'id': localStorage["prevId"].toString()
})
}
}
tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
localStorage.setItem('lastWatched', JSON.stringify(tmp));
//.finally(()=>{})
clearInterval(timerId1);
},
error => console.error(error)
)
.finally(() => this.setState({ promise1: null, outsideReject1: null }));
break;
case 5:
if (this.state.promise1)
if (this.state.promise1)
this.state.outsideReject1('Video changed');
break;
default:
break;
}
})
.finally(()=>{this.setState({promise2: null, outsideReject2: null})});
.finally(() => { this.setState({ promise2: null, outsideReject2: null }) });
}
}
_onStateChange = this._onStateChange.bind(this);
src/Wikipedia.js
+18 -18
View File
@@ -74,7 +74,7 @@ class Wikipedia extends Component {
})
.then(resRecordingQuery => {
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))
@@ -83,28 +83,28 @@ class Wikipedia extends Component {
// axios
// .get(`${musicbrainzBaseUrl}/release-group/`)
// .then(res => { }, err => { })
axios
.get(`https://musicbrainz.org/ws/2/recording`, {
params: {
'query': `"${artist.trim()}" AND artistname:"${title.trim()}"`, //rgid:${res.data.}
'limit': 1,
'fmt': 'json'
}
})
.then(resP175EqTitle => {
axios
.get(`https://musicbrainz.org/ws/2/recording`, {
.get(`${musicbrainzBaseUrl}/recording/${resP175EqTitle.data.recordings[0].id}`, {
params: {
'query': `"${artist.trim()}" AND artistname:"${title.trim()}"`, //rgid:${res.data.}
'limit': 1,
'inc': 'work-rels+artists+releases',
'fmt': 'json'
}
})
.then(resP175EqTitle => {
axios
.get(`${musicbrainzBaseUrl}/recording/${resP175EqTitle.data.recordings[0].id}`, {
params: {
'inc': 'work-rels+artists+releases',
'fmt': 'json'
}
})
.then(resRecordingQuery => {
let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
console.log(x, 'resRecordingQuery.data false', resRecordingQuery.data)
}, err => { console.error(err) })
}
, err => console.error(err))
.then(resRecordingQuery => {
let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
console.log(x, 'resRecordingQuery.data false', resRecordingQuery.data)
}, 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 { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
localStorage['first'] ? function (){}() : localStorage.setItem('first', JSON.stringify([]))
localStorage['prevId'] ? function (){}() : localStorage.setItem('prevId','1')
localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
localStorage['currentVideoInfo']? function(){}() : localStorage.setItem('currentVideoInfo', JSON.stringify({
'id':'0J2QdDbelmY',
'artist':'Seven Nation Army',
'genre':'Rock'
localStorage['lastWatched'] ? function () { }() : localStorage.setItem('lastWatched', JSON.stringify([]))
localStorage['first'] ? function () { }() : localStorage.setItem('first', JSON.stringify([]))
localStorage['prevId'] ? function () { }() : localStorage.setItem('prevId', '1')
localStorage['lastId'] ? function () { }() : localStorage.setItem('lastId', '0J2QdDbelmY')
localStorage['currentVideoInfo'] ? function () { }() : localStorage.setItem('currentVideoInfo', JSON.stringify({
'id': '0J2QdDbelmY',
'artist': 'Seven Nation Army',
'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'));
registerServiceWorker();
src/reccomenders/Random.js
+38 -37
View File
@@ -1,20 +1,20 @@
import React, { Component } from 'react';
import axios from "axios";
import createpageToken from 'youtube-page-token';
import {Card,Col} from "react-bootstrap";
import {Link} from "react-router-dom";
import { Card, Col } from "react-bootstrap";
import { Link } from "react-router-dom";
import moment from "moment";
class RecommenderRandom extends Component{
state={
items : [],
}
class RecommenderRandom extends Component {
state = {
items: [],
}
ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
}
componentDidMount(){
componentDidMount() {
let pos = Math.floor(Math.random() * 500);
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
@@ -23,16 +23,16 @@ class RecommenderRandom extends Component{
axios.get("https://www.googleapis.com/youtube/v3/search", {
params: {
'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
'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': '21',
'pageToken' : pageToken,
'pageToken': pageToken,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
response => {
this.setState({
items : response.data.items,
items: response.data.items,
})
},
error => {
@@ -41,34 +41,35 @@ class RecommenderRandom extends Component{
)
}
render(){
render() {
const ISO_8601parse = this.ISO_8601parse;
return (<React.Fragment>
{this.state.items.map(function (item,index) {
return(
<Col key={index} md='4'>
<Card>
<Link
to={{
pathname: '/video/' + item.id.videoId,
}}
>
<Card.Img
src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br/>
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>
)
})}
</React.Fragment> );
{this.state.items.map(function (item, index) {
return (
<Col key={index} md='4'>
<Card>
<Link
to={{
pathname: '/video/' + item.id.videoId,
search: "?ref=Random"
}}
>
<Card.Img
src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.snippet.title}<br />
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>
)
})}
</React.Fragment>);
}
}
export default RecommenderRandom;
src/reccomenders/Recent.js
+23 -23
View File
@@ -56,7 +56,6 @@ class Recent extends React.Component {
render() {
const recentVideoList = JSON.parse(localStorage.getItem('lastWatched'))
const { error, isLoaded, items } = this.state;
if (error) {
return (
@@ -66,33 +65,34 @@ class Recent extends React.Component {
);
} else if (!isLoaded) {
return <Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>;
} else {
return (
<React.Fragment>
{items.map(item => (
<Col key={item.id} md="4">
<Card >
<Link
to={{
pathname: '/video/' + item.id,
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.name}<br />
{item.lastSelected}
</Card.Title>
</Card.ImgOverlay>
</Link>
<Col key={item.id} md="4">
<Card >
<Link
to={{
pathname: '/video/' + item.id,
search: "?ref=Recent"
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.name}<br />
{item.lastSelected}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>))}
</Col>))}
</React.Fragment>
);
}
src/reccomenders/Related.js
+22 -21
View File
@@ -1,15 +1,15 @@
import React, { Component } from 'react';
import axios from 'axios';
import {Link} from "react-router-dom";
import {Card,Col} from "react-bootstrap";
import { Link } from "react-router-dom";
import { Card, Col } from "react-bootstrap";
import moment from "moment";
class Related extends Component {
state={
videoId : localStorage['lastId'],
items : []
}
state = {
videoId: localStorage['lastId'],
items: []
}
ISO_8601parse(a) {
@@ -17,12 +17,12 @@ class Related extends Component {
}
componentDidMount() {
axios.get("https://www.googleapis.com/youtube/v3/search",{
params:{
axios.get("https://www.googleapis.com/youtube/v3/search", {
params: {
'part': 'snippet',
'relatedToVideoId' : this.props.match.params.id,
'type' : 'video',
'maxResults' : '22',
'relatedToVideoId': this.props.match.params.id,
'type': 'video',
'maxResults': '22',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
@@ -37,14 +37,14 @@ class Related extends Component {
)
}
componentDidUpdate(prevProps,prevState){
if (prevProps.match.params.id !== this.props.match.params.id){
axios.get("https://www.googleapis.com/youtube/v3/search",{
params:{
componentDidUpdate(prevProps, prevState) {
if (prevProps.match.params.id !== this.props.match.params.id) {
axios.get("https://www.googleapis.com/youtube/v3/search", {
params: {
'part': 'snippet',
'relatedToVideoId' : this.props.match.params.id,
'type' : 'video',
'maxResults' : '22',
'relatedToVideoId': this.props.match.params.id,
'type': 'video',
'maxResults': '22',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
@@ -64,13 +64,14 @@ class Related extends Component {
const ISO_8601parse = this.ISO_8601parse;
return (
<React.Fragment>
{this.state.items.map(function (item,index) {
return(
{this.state.items.map(function (item, index) {
return (
<Col key={index} md="4">
<Card>
<Link
to={{
pathname: '/video/' + item.id.videoId,
search: "?ref=Related"
}}
>
<Card.Img
@@ -79,7 +80,7 @@ class Related extends Component {
/>
<Card.ImgOverlay>
<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)}
</Card.Title>
</Card.ImgOverlay>
src/reccomenders/Search.js
+2 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
import { Card, Col, Media } from 'react-bootstrap';
import { Col, Media } from 'react-bootstrap';
class Search extends React.Component {
@@ -117,6 +117,7 @@ class Search extends React.Component {
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id.videoId,
search: "?ref=Search"
}}>
<img
width={240}
src/reccomenders/fvitali.js
+81 -79
View File
@@ -5,20 +5,20 @@ import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
class fvitali extends React.Component {
state = {
error: null,
isLoaded: false,
items: [],
};
state = {
error: null,
isLoaded: false,
items: [],
};
componentDidMount() {
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
'params':{
'id':this.props.match.params.id //se 'id'=>'Id', allora tutti video random, sennò anche per genere simile
'params': {
'id': this.props.match.params.id //se 'id'=>'Id', allora tutti video random, sennò anche per genere simile
}
}).then(
response => {
response => {
this.getThumbnailsNames(response.data.recommended);
},
error => {
@@ -31,33 +31,33 @@ class fvitali extends React.Component {
);
}
// METODI
getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.videoID);
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
}
})
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
}
})
.then(
res1 => {
res1.data.items.map(resCurrentValue =>
res1.data.items.map(resCurrentValue =>
Object.defineProperties(
reccomended.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
}),
{
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{value: resCurrentValue.snippet.title}
})
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{ value: resCurrentValue.snippet.title }
})
);
this.setState({
isLoaded: true,
@@ -78,64 +78,66 @@ class fvitali extends React.Component {
);
} else if (!isLoaded) {
return (
<Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>
<Col className="text-center">
<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</Col>
);
} else {
if(window.innerWidth < 992){
return(
<React.Fragment>
{items.map(item=>( <Col md="4">
<Card key={item.videoID}>
<Link
to={{
pathname: '/video/' + item.videoID,
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
<p>{item.name}</p>
if (window.innerWidth < 992) {
return (
<React.Fragment>
{items.map(item => (<Col md="4">
<Card key={item.videoID}>
<Link
to={{
pathname: '/video/' + item.videoID,
search: "?ref=fvitali"
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
<p>{item.name}</p>
<p className='small'>{item.lastSelected}</p>
<p className='small'>Reccomender: fvitali</p>
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>))}
</React.Fragment>
);
}else{
return(
<ul className="list-unstyled">{
items.map(item => (
<Link
key={item.videoID}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: `/video/${item.videoID}`,
search: '?ref=fvitali587'
}}>
<img
width={240}
height={120}
className="align-self-center mr-3 img-fluid"
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Media.Body>
<h5>{item.name}</h5>
<p>{item.lastSelected}</p>
<p>Reccomender: fvitali</p>
</Media.Body>
</Link>
))
}</ul>
);}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>))}
</React.Fragment>
);
} else {
return (
<ul className="list-unstyled">{
items.map(item => (
<Link
key={item.videoID}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: `/video/${item.videoID}`,
search: '?ref=fvitali'
}}>
<img
width={240}
height={120}
className="align-self-center mr-3 img-fluid"
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Media.Body>
<h5>{item.name}</h5>
<p>{item.lastSelected}</p>
<p>Reccomender: fvitali</p>
</Media.Body>
</Link>
))
}</ul>
);
}
}
}
}
src/reccomenders/genreSimilarity.js
+12 -11
View File
@@ -1,13 +1,13 @@
import React, { Component } from 'react';
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 {Link} from "react-router-dom";
import { Link } from "react-router-dom";
import moment from "moment";
class genreSimilarity extends Component {
state={
items : []
state = {
items: []
};
ISO_8601parse(a) {
@@ -24,8 +24,8 @@ class genreSimilarity extends Component {
'topicId': localStorage['lastTopic'],
'type': 'video',
'maxResults': '21',
'order' : 'viewCount',
'pageToken' : pageToken,
'order': 'viewCount',
'pageToken': pageToken,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(
@@ -40,16 +40,17 @@ class genreSimilarity extends Component {
)
}
render(){
render() {
const ISO_8601parse = this.ISO_8601parse;
return (<React.Fragment>
{this.state.items.map(function (item,index) {
return(
{this.state.items.map(function (item, index) {
return (
<Col key={index} md='4'>
<Card>
<Link
to={{
pathname: '/video/' + item.id.videoId,
search: "?ref=genreSimilarity"
}}
>
<Card.Img
@@ -58,7 +59,7 @@ class genreSimilarity extends Component {
/>
<Card.ImgOverlay>
<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)}
</Card.Title>
</Card.ImgOverlay>
@@ -67,7 +68,7 @@ class genreSimilarity extends Component {
</Col>
)
})}
</React.Fragment> );
</React.Fragment>);
}
}
src/reccomenders/popGlobaleAssoluta.js
+17 -16
View File
@@ -14,19 +14,19 @@ class popGlobaleAssoluta extends React.Component {
componentDidMount() {
// listSiti.map(
// sito =>
// axios.get(`http://site${sito}.tw.cs.unibo.it/globpop`, {
// 'params': {
// 'id': this.props.match.params.id
// }
// })
// )
// sito =>
// axios.get(`http://site${sito}.tw.cs.unibo.it/globpop`, {
// 'params': {
// 'id': this.props.match.params.id
// }
// })
// )
// 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 = [];
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`)
axiosReq.push(axios.get(`http://site${listSiti[i]}.tw.cs.unibo.it/globpop`, {
'params': {
@@ -34,12 +34,12 @@ class popGlobaleAssoluta extends React.Component {
}
}))
}
Promise.all(axiosReq)
.then(axios.spread((...res) => {
console.log(res.map(x=>x.data))
})
)
}
Promise.all(axiosReq)
.then(axios.spread((...res) => {
console.log(res.map(x => x.data))
})
)
}
// METODI
getThumbnailsNames(reccomended) {
@@ -76,7 +76,7 @@ class popGlobaleAssoluta extends React.Component {
render() {
const { error, isLoaded, items, headers } = this.state;
const { error, isLoaded, items } = this.state;
if (error) {
return (
<React.Fragment>
@@ -99,6 +99,7 @@ class popGlobaleAssoluta extends React.Component {
<Link
to={{
pathname: '/video/' + item.videoID,
search: "?ref=popGlobaleAssoluta"
}}
>
<Card.Img
src/reccomenders/popLocaleAss.js
+40 -39
View File
@@ -17,11 +17,11 @@ class popLocaleAss extends React.Component {
componentDidMount() {
axios
.get('http://site1854.tw.cs.unibo.it/videotrack')
.then(res=>{
this.getThumbnailsNames(res.data.sort((a, b) => a.timesWatched - b.timesWatched).reverse());
}
,error=>this.setState({error}))
.get('http://site1854.tw.cs.unibo.it/videotrack')
.then(res => {
this.getThumbnailsNames(res.data.sort((a, b) => a.timesWatched - b.timesWatched).reverse());
}
, error => this.setState({ error }))
}
// shouldComponentUpdate(nextProps, nextState) {
@@ -39,39 +39,39 @@ class popLocaleAss extends React.Component {
// }
getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.id);
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title,snippet/description)'
}
})
let idToLookFor = reccomended.map(item => item.id);
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
part: 'snippet',
id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title,snippet/description)'
}
})
.then(
res1 => {
res1.data.items.map(resCurrentValue =>
Object.defineProperties(
reccomended.find(videoItem => {
return videoItem.id === resCurrentValue.id;
}),
{
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{ value: resCurrentValue.snippet.title },
'description':
{ value: resCurrentValue.snippet.description }
})
);
this.setState({
isLoaded: true,
items: reccomended
});
})
}
.then(
res1 => {
res1.data.items.map(resCurrentValue =>
Object.defineProperties(
reccomended.find(videoItem => {
return videoItem.id === resCurrentValue.id;
}),
{
'thumbnail':
{ value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{value: resCurrentValue.snippet.title},
'description':
{value: resCurrentValue.snippet.description }
})
);
this.setState({
isLoaded: true,
items: reccomended
});
})
}
render() {
if (this.state.error) {
@@ -89,6 +89,7 @@ class popLocaleAss extends React.Component {
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id,
search: "?ref=popLocaleAss"
}}>
<img
width={240}
@@ -99,9 +100,9 @@ class popLocaleAss extends React.Component {
/>
<Media.Body>
<h5>{item.name}</h5>
<p>{item.description.substring(0,200)}</p>
<p>{item.description.substring(0, 200)}</p>
<p>Visto: {item.timesWatched} volte <br />
Reccomender: popLocaleAss</p>
Reccomender: popLocaleAss</p>
</Media.Body>
</Link>
))
src/reccomenders/popRelLoc.js
+27 -28
View File
@@ -18,16 +18,14 @@ class PopRelLoc extends React.Component {
}
componentDidMount() {
let tmp = JSON.parse(localStorage.getItem('lastWatched'));
let j=tmp.findIndex(el=>el.id === localStorage["lastId"]);
let tmp = JSON.parse(localStorage.getItem('lastWatched'));
let j = tmp.findIndex(el => el.id === localStorage["lastId"]);
//this.getThumbnailsNames(tmp[j].prevVideos);
if (tmp.length === 0 || localStorage["prevId"] === '1')
{this.getThumbnailsNames(JSON.parse(localStorage.getItem('first')))}
else
{this.getThumbnailsNames(tmp[j].prevVideos)}
if (tmp.length === 0 || localStorage["prevId"] === '1') { this.getThumbnailsNames(JSON.parse(localStorage.getItem('first'))) }
else { this.getThumbnailsNames(tmp[j].prevVideos) }
}
// METODI
getThumbnailsNames(listVideo) {
let idToLookFor = listVideo.map(item => item.id);
@@ -83,27 +81,28 @@ class PopRelLoc extends React.Component {
return (
<React.Fragment>
{items.map(item => (
<Col md="4">
<Card key={item.id}>
<Link
to={{
pathname: '/video/' + item.id,
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.name}<br />
{item.lastSelected}
</Card.Title>
</Card.ImgOverlay>
</Link>
<Col md="4">
<Card key={item.id}>
<Link
to={{
pathname: '/video/' + item.id,
search: "?ref=popRelLoc"
}}
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.name}<br />
{item.lastSelected}
</Card.Title>
</Card.ImgOverlay>
</Link>
</Card>
</Col>))}
</Col>))}
</React.Fragment>
);
}
src/reccomenders/similarityArtist.js
+40 -33
View File
@@ -17,15 +17,15 @@ class similarityArtist extends React.Component {
componentDidMount() {
let timerId1;
let promise = new Promise ((resolve,reject) => {
timerId1 = window.setInterval(()=>{
if(localStorage['lastId'] === JSON.parse(localStorage['currentVideoInfo']).id)
let promise = new Promise((resolve, reject) => {
timerId1 = window.setInterval(() => {
if (localStorage['lastId'] === JSON.parse(localStorage['currentVideoInfo']).id)
resolve(true)
},1000)
}, 1000)
})
promise.then(()=>{
promise.then(() => {
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', {
params: {
'part': 'snippet',
@@ -37,12 +37,19 @@ class similarityArtist extends React.Component {
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).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({
res: res.data,
isLoaded: true
})
console.log(res);
}
,
error => this.setState({
error
})
@@ -65,7 +72,7 @@ class similarityArtist extends React.Component {
// }
render() {
if (this.state.error) {
@@ -77,31 +84,31 @@ class similarityArtist extends React.Component {
} else {
return (
<>
<h4>Artist Similarity: {this.state.artist}</h4>
<ul className="list-unstyled">{
this.state.res.items.map(item => (
<Link
key={item.id.videoId}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id.videoId,
search:"?ref=similarityArtist"
}}>
<img
width={240}
height={120}
className="align-self-center mr-3"
src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Media.Body>
<h5>{item.snippet.title}</h5>
<p>{item.snippet.description}</p>
<p>Reccomender: similarityArtist</p>
</Media.Body>
</Link>
))
}</ul>
<h4>Artist Similarity: {this.state.artist}</h4>
<ul className="list-unstyled">{
this.state.res.items.map(item => (
<Link
key={item.id.videoId}
as="li" className="media mx-5 my-1 suggItem"
to={{
pathname: '/video/' + item.id.videoId,
search: "?ref=similarityArtist"
}}>
<img
width={240}
height={120}
className="align-self-center mr-3"
src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title}
/>
<Media.Body>
<h5>{item.snippet.title}</h5>
<p>{item.snippet.description}</p>
<p>Reccomender: similarityArtist</p>
</Media.Body>
</Link>
))
}</ul>
</>
);
}
src/registerServiceWorker.js
+8 -8
View File
@@ -10,12 +10,12 @@
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
@@ -30,7 +30,7 @@ export default function register() {
}
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) {
// This is running on localhost. Lets check if a service worker still exists or not.
@@ -41,7 +41,7 @@ export default function register() {
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
'worker. To learn more, visit https://goo.gl/SC7cgQ'
);
});
} else {