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
+17 -15
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,19 +63,19 @@ 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>
</Col> </Col>
</Col> </Col>
<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` }}>
{/* true = style for xs ;; false = style for lg */} {/* true = style for xs ;; false = style for lg */}
<div className="d-flex justify-content-center"> <div className="d-flex justify-content-center">
<Button <Button
src/Suggestion.js
+13 -14
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';
@@ -39,19 +38,19 @@ class Suggestion extends Component {
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<Switch> <Switch>
<Route path='/video/:id/genreSimilarity' component={genreSimilarity} /> <Route path='/video/:id/genreSimilarity' component={genreSimilarity} />
<Route path='/video/:id/vitali' component={fvitali} /> <Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} /> <Route path='/search/:query' component={Search} />
<Route path='/video/:id/random' component={Random} /> <Route path='/video/:id/random' component={Random} />
<Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} /> <Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
<Route path='/video/:id/popLocaleAss' component={popLocaleAss} /> <Route path='/video/:id/popLocaleAss' component={popLocaleAss} />
<Route path='/video/:id/recent' component={Recent} /> <Route path='/video/:id/recent' component={Recent} />
<Route path='/video/:id/similarityArtist' component={similarityArtist} /> <Route path='/video/:id/similarityArtist' component={similarityArtist} />
<Route path='/video/:id/popRelLoc' component={PopRelLoc} /> <Route path='/video/:id/popRelLoc' component={PopRelLoc} />
{/* lasciare questo per ultimo */} {/* lasciare questo per ultimo */}
<Route component={Related} /> <Route component={Related} />
</Switch> </Switch>
</React.Fragment> </React.Fragment>
); );
} }
src/TopBar.js
+25 -25
View File
@@ -22,7 +22,7 @@ class TopBar extends Component {
} }
handleSubmit = event => { handleSubmit = event => {
event.preventDefault(); event.preventDefault();
// event.target.reset(); // event.target.reset();
this.props.history.push('/search/' + this.state.query); this.props.history.push('/search/' + this.state.query);
} }
render() { 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']}/random` }} className="text-light nav-link">Random</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link> <Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
{<NavDropdown title="Similarity" id="basic-nav-dropdown" > {<NavDropdown title="Similarity" id="basic-nav-dropdown" >
<Link to={{ pathname: `/video/${localStorage['lastId']}/similarityArtist` }} className="text-dark nav-link"> <Link to={{ pathname: `/video/${localStorage['lastId']}/similarityArtist` }} className="text-dark nav-link">
Artist Artist
</Link> </Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link"> <Link to={{ pathname: `/video/${localStorage['lastId']}/genreSimilarity` }} className="text-dark nav-link">
Genre Genre
</Link> </Link>
</NavDropdown>} </NavDropdown>}
{<NavDropdown title="Popolarità locale" id="basic-nav-dropdown" > {<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"> <Link to={{ pathname: `/video/${localStorage['lastId']}/popLocaleAss` }} className="text-dark nav-link">
Relativa Assoluta
</Link> </Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/popRelLoc` }} className="text-dark nav-link">
Relativa
</Link>
</NavDropdown>} </NavDropdown>}
{<NavDropdown title="Popolarità globale" id="basic-nav-dropdown" > {<NavDropdown title="Popolarità globale" id="basic-nav-dropdown" >
<Link to={{ pathname: `/video/${localStorage['lastId']}/popGlobalAssoluta` }} className="text-dark nav-link"> <Link to={{ pathname: `/video/${localStorage['lastId']}/popGlobalAssoluta` }} className="text-dark nav-link">
Assoluta Assoluta
</Link> </Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link"> <Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
Relativa Relativa
</Link> </Link>
</NavDropdown>} </NavDropdown>}
<Link to={{ pathname: `/video/${localStorage['lastId']}/progetti` }} className="text-light nav-link">Progetti</Link> <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'); 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,13 +71,13 @@ 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) {
return <div className="text-center"> return <div 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>
</div>; </div>;
} else { } else {
return ( return (
<React.Fragment> <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 { class VideoList extends React.Component {
state = { state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
items: [], items: [],
headers: null headers: null
}; };
componentDidMount() { componentDidMount() {
localStorage['fixedVideoList'] ? localStorage['fixedVideoList'] ?
this.setState({ this.setState({
items: this.shuffleArray(JSON.parse(localStorage.getItem('fixedVideoList'))), items: this.shuffleArray(JSON.parse(localStorage.getItem('fixedVideoList'))),
isLoaded: true isLoaded: true
}) : }) :
axios.get('http://site1825.tw.cs.unibo.it/video.json').then( axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
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
// exceptions from actual bugs in components. // exceptions from actual bugs in components.
error => { error => {
console.error(error); console.error(error);
this.setState({ this.setState({
isLoaded: true, isLoaded: true,
error error
}); });
} }
) )
} }
// METODI // METODI
getThumbnails(videoItems) { getThumbnails(videoItems) {
let idToLookFor = videoItems.map(item => item.videoID); let idToLookFor = videoItems.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100; let finalChunk = (videoItems.length % 50) + 100;
return axios return axios
.all([ .all([
// chain 3 parallel get // chain 3 parallel get
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
@@ -74,22 +74,24 @@ 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({
isLoaded: true, isLoaded: true,
items: videoItems 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) { } else if (!isLoaded) {
return <Col className="text-center"> return <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 {
return ( return (
<React.Fragment> <React.Fragment>
src/VideoPlayer.js
+66 -66
View File
@@ -6,48 +6,48 @@ import { withRouter } from 'react-router-dom';
class VideoPlayer extends React.Component { class VideoPlayer extends React.Component {
state = { state = {
opt: { opt: {
// height: '390', // height: '390',
// width: '640', // width: '640',
playerVars: { playerVars: {
// https://developers.google.com/youtube/player_parameters // https://developers.google.com/youtube/player_parameters
autoplay: 0, autoplay: 0,
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
}; };
render() { render() {
return ( return (
<YouTube <YouTube
opts={this.state.opt} opts={this.state.opt}
videoId={this.props.videoId} videoId={this.props.videoId}
onReady={this._onReady} onReady={this._onReady}
onPlay={this._onPlay} onPlay={this._onPlay}
onError={this._onError} onError={this._onError}
onStateChange={this._onStateChange} onStateChange={this._onStateChange}
className="embed-responsive-item" className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9" containerClassName="embed-responsive embed-responsive-16by9"
/> />
); );
} }
// access to player in all event handlers via event.target // access to player in all event handlers via event.target
_onError(event) { _onError(event) {
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,67 +94,67 @@ 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': []
}) })
} }
else { else {
//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()
})} })
}
}
}
tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime()); tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
localStorage.setItem('lastWatched', JSON.stringify(tmp)); localStorage.setItem('lastWatched', JSON.stringify(tmp));
//.finally(()=>{}) //.finally(()=>{})
clearInterval(timerId1); clearInterval(timerId1);
}, },
error => console.error(error) error => console.error(error)
) )
.finally(() => this.setState({ promise1: null, outsideReject1: null })); .finally(() => this.setState({ promise1: null, outsideReject1: null }));
break; break;
case 5: case 5:
if (this.state.promise1) if (this.state.promise1)
this.state.outsideReject1('Video changed'); this.state.outsideReject1('Video changed');
break; break;
default: default:
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
+18 -18
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))
@@ -83,28 +83,28 @@ class Wikipedia extends Component {
// axios // axios
// .get(`${musicbrainzBaseUrl}/release-group/`) // .get(`${musicbrainzBaseUrl}/release-group/`)
// .then(res => { }, err => { }) // .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 axios
.get(`https://musicbrainz.org/ws/2/recording`, { .get(`${musicbrainzBaseUrl}/recording/${resP175EqTitle.data.recordings[0].id}`, {
params: { params: {
'query': `"${artist.trim()}" AND artistname:"${title.trim()}"`, //rgid:${res.data.} 'inc': 'work-rels+artists+releases',
'limit': 1,
'fmt': 'json' 'fmt': 'json'
} }
}) })
.then(resP175EqTitle => { .then(resRecordingQuery => {
axios let x = resRecordingQuery.data.relations.map(x => x['target-type'] === 'work' ? x.work.id : "").toString();
.get(`${musicbrainzBaseUrl}/recording/${resP175EqTitle.data.recordings[0].id}`, { console.log(x, 'resRecordingQuery.data false', resRecordingQuery.data)
params: { }, err => { console.error(err) })
'inc': 'work-rels+artists+releases', }
'fmt': 'json' , 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 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
+38 -37
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,34 +41,35 @@ 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 >
src={item.snippet.thumbnails.high.url} <Card.Img
alt={'Thumbnail of ' + item.snippet.title} src={item.snippet.thumbnails.high.url}
/> alt={'Thumbnail of ' + item.snippet.title}
<Card.ImgOverlay> />
<Card.Title className="bg-dark d-inline text-white"> <Card.ImgOverlay>
{item.snippet.title}<br/> <Card.Title className="bg-dark d-inline text-white">
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} {item.snippet.title}<br />
</Card.Title> {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
</Card.ImgOverlay> </Card.Title>
</Link> </Card.ImgOverlay>
</Card> </Link>
</Col> </Card>
) </Col>
})} )
</React.Fragment> ); })}
</React.Fragment>);
} }
} }
export default RecommenderRandom; export default RecommenderRandom;
src/reccomenders/Recent.js
+23 -23
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 (
@@ -66,33 +65,34 @@ class Recent extends React.Component {
); );
} else if (!isLoaded) { } else if (!isLoaded) {
return <Col className="text-center"> return <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 {
return ( return (
<React.Fragment> <React.Fragment>
{items.map(item => ( {items.map(item => (
<Col key={item.id} md="4"> <Col key={item.id} md="4">
<Card > <Card >
<Link <Link
to={{ to={{
pathname: '/video/' + item.id, pathname: '/video/' + item.id,
}} search: "?ref=Recent"
> }}
<Card.Img >
src={item.thumbnail} <Card.Img
alt={'Thumbnail of ' + item.name} src={item.thumbnail}
/> alt={'Thumbnail of ' + item.name}
<Card.ImgOverlay> />
<Card.Title className="bg-dark d-inline text-white"> <Card.ImgOverlay>
{item.name}<br /> <Card.Title className="bg-dark d-inline text-white">
{item.lastSelected} {item.name}<br />
</Card.Title> {item.lastSelected}
</Card.ImgOverlay> </Card.Title>
</Link> </Card.ImgOverlay>
</Link>
</Card> </Card>
</Col>))} </Col>))}
</React.Fragment> </React.Fragment>
); );
} }
src/reccomenders/Related.js
+22 -21
View File
@@ -1,15 +1,15 @@
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: []
} }
ISO_8601parse(a) { ISO_8601parse(a) {
@@ -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
+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"] }] */ /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
class fvitali extends React.Component { class fvitali extends React.Component {
state = { state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
items: [], items: [],
}; };
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 => {
this.getThumbnailsNames(response.data.recommended); this.getThumbnailsNames(response.data.recommended);
}, },
error => { error => {
@@ -31,33 +31,33 @@ class fvitali extends React.Component {
); );
} }
// METODI // METODI
getThumbnailsNames(reccomended) { getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.videoID); let idToLookFor = reccomended.map(item => item.videoID);
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title)' fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
} }
}) })
.then( .then(
res1 => { res1 => {
res1.data.items.map(resCurrentValue => res1.data.items.map(resCurrentValue =>
Object.defineProperties( Object.defineProperties(
reccomended.find(videoItem => { reccomended.find(videoItem => {
return videoItem.videoID === resCurrentValue.id; return videoItem.videoID === resCurrentValue.id;
}), }),
{ {
'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({
isLoaded: true, isLoaded: true,
@@ -78,64 +78,66 @@ 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 >
src={item.thumbnail} <Card.Img
alt={'Thumbnail of ' + item.name} src={item.thumbnail}
/> alt={'Thumbnail of ' + item.name}
<Card.ImgOverlay> />
<Card.Title className="bg-dark d-inline text-white"> <Card.ImgOverlay>
<p>{item.name}</p> <Card.Title className="bg-dark d-inline text-white">
<p>{item.name}</p>
<p className='small'>{item.lastSelected}</p> <p className='small'>{item.lastSelected}</p>
<p className='small'>Reccomender: fvitali</p> <p className='small'>Reccomender: fvitali</p>
</Card.Title> </Card.Title>
</Card.ImgOverlay> </Card.ImgOverlay>
</Link> </Link>
</Card> </Card>
</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
key={item.videoID} key={item.videoID}
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}
height={120} height={120}
className="align-self-center mr-3 img-fluid" className="align-self-center mr-3 img-fluid"
src={item.thumbnail} src={item.thumbnail}
alt={'Thumbnail of ' + item.name} alt={'Thumbnail of ' + item.name}
/> />
<Media.Body> <Media.Body>
<h5>{item.name}</h5> <h5>{item.name}</h5>
<p>{item.lastSelected}</p> <p>{item.lastSelected}</p>
<p>Reccomender: fvitali</p> <p>Reccomender: fvitali</p>
</Media.Body> </Media.Body>
</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
+17 -16
View File
@@ -14,19 +14,19 @@ class popGlobaleAssoluta extends React.Component {
componentDidMount() { componentDidMount() {
// listSiti.map( // listSiti.map(
// sito => // sito =>
// axios.get(`http://site${sito}.tw.cs.unibo.it/globpop`, { // axios.get(`http://site${sito}.tw.cs.unibo.it/globpop`, {
// 'params': { // 'params': {
// 'id': this.props.match.params.id // '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', '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': {
@@ -34,12 +34,12 @@ 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))
}) })
) )
} }
// METODI // METODI
getThumbnailsNames(reccomended) { getThumbnailsNames(reccomended) {
@@ -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
+40 -39
View File
@@ -17,11 +17,11 @@ 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) {
@@ -39,39 +39,39 @@ class popLocaleAss extends React.Component {
// } // }
getThumbnailsNames(reccomended) { getThumbnailsNames(reccomended) {
let idToLookFor = reccomended.map(item => item.id); let idToLookFor = reccomended.map(item => item.id);
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.toString(), id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium,snippet/title,snippet/description)' 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() { render() {
if (this.state.error) { if (this.state.error) {
@@ -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,9 +100,9 @@ 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>
</Link> </Link>
)) ))
src/reccomenders/popRelLoc.js
+27 -28
View File
@@ -18,16 +18,14 @@ 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)}
} }
// METODI // METODI
getThumbnailsNames(listVideo) { getThumbnailsNames(listVideo) {
let idToLookFor = listVideo.map(item => item.id); let idToLookFor = listVideo.map(item => item.id);
@@ -83,27 +81,28 @@ class PopRelLoc extends React.Component {
return ( return (
<React.Fragment> <React.Fragment>
{items.map(item => ( {items.map(item => (
<Col md="4"> <Col md="4">
<Card key={item.id}> <Card key={item.id}>
<Link <Link
to={{ to={{
pathname: '/video/' + item.id, pathname: '/video/' + item.id,
}} search: "?ref=popRelLoc"
> }}
<Card.Img >
src={item.thumbnail} <Card.Img
alt={'Thumbnail of ' + item.name} src={item.thumbnail}
/> alt={'Thumbnail of ' + item.name}
<Card.ImgOverlay> />
<Card.Title className="bg-dark d-inline text-white"> <Card.ImgOverlay>
{item.name}<br /> <Card.Title className="bg-dark d-inline text-white">
{item.lastSelected} {item.name}<br />
</Card.Title> {item.lastSelected}
</Card.ImgOverlay> </Card.Title>
</Link> </Card.ImgOverlay>
</Link>
</Card> </Card>
</Col>))} </Col>))}
</React.Fragment> </React.Fragment>
); );
} }
src/reccomenders/similarityArtist.js
+40 -33
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
}) })
@@ -65,7 +72,7 @@ class similarityArtist extends React.Component {
// } // }
render() { render() {
if (this.state.error) { if (this.state.error) {
@@ -77,31 +84,31 @@ class similarityArtist extends React.Component {
} else { } else {
return ( return (
<> <>
<h4>Artist Similarity: {this.state.artist}</h4> <h4>Artist Similarity: {this.state.artist}</h4>
<ul className="list-unstyled">{ <ul className="list-unstyled">{
this.state.res.items.map(item => ( this.state.res.items.map(item => (
<Link <Link
key={item.id.videoId} key={item.id.videoId}
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}
height={120} height={120}
className="align-self-center mr-3" className="align-self-center mr-3"
src={item.snippet.thumbnails.medium.url} src={item.snippet.thumbnails.medium.url}
alt={'Thumbnail of ' + item.snippet.title} alt={'Thumbnail of ' + item.snippet.title}
/> />
<Media.Body> <Media.Body>
<h5>{item.snippet.title}</h5> <h5>{item.snippet.title}</h5>
<p>{item.snippet.description}</p> <p>{item.snippet.description}</p>
<p>Reccomender: similarityArtist</p> <p>Reccomender: similarityArtist</p>
</Media.Body> </Media.Body>
</Link> </Link>
)) ))
}</ul> }</ul>
</> </>
); );
} }
src/registerServiceWorker.js
+8 -8
View File
@@ -10,12 +10,12 @@
const isLocalhost = Boolean( const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
) )
); );
export default function register() { export default function register() {
@@ -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.
@@ -41,7 +41,7 @@ export default function register() {
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + '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 { } else {