diff --git a/public/assets/person-1.jpg b/public/assets/person-1.jpg index 1105563..968ad00 100644 Binary files a/public/assets/person-1.jpg and b/public/assets/person-1.jpg differ diff --git a/public/assets/person-2.jpg b/public/assets/person-2.jpg index d61a1a7..900ee8f 100644 Binary files a/public/assets/person-2.jpg and b/public/assets/person-2.jpg differ diff --git a/public/assets/person-3.jpg b/public/assets/person-3.jpg index 761217e..139a840 100644 Binary files a/public/assets/person-3.jpg and b/public/assets/person-3.jpg differ diff --git a/src/AboutUs.js b/src/AboutUs.js index c01711b..018a938 100644 --- a/src/AboutUs.js +++ b/src/AboutUs.js @@ -8,19 +8,27 @@ export default class AboutUs extends Component { - +

Matteo Scorzafava

-

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.

+

- +

Simone Ferrari

-

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.

+

Recommender Random
+ Recommender Related
+ Recommender Similarity Genere
+ Box delle informazioni relative al video +

- +

Gregorio Giacchetti

-

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.

+

Recommender Recent
+ Recommender fvitali
+ Gestione della barra dei recommender
+ AboutUs +

diff --git a/src/App.js b/src/App.js index 95bf876..ec62078 100644 --- a/src/App.js +++ b/src/App.js @@ -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"> - - { this.setState({ playerHeight: height }) }}> - - + + { this.setState({ playerHeight: height }) }}> + + + 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 */}
; } else { return ( diff --git a/src/VideoList.js b/src/VideoList.js index 6141423..9b6f67d 100644 --- a/src/VideoList.js +++ b/src/VideoList.js @@ -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 -
- ; +
+ ; } else { return ( diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index f4077d9..d9b012e 100644 --- a/src/VideoPlayer.js +++ b/src/VideoPlayer.js @@ -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 ( - + ); } - + // 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); diff --git a/src/Wikipedia.js b/src/Wikipedia.js index 743e857..4322013 100644 --- a/src/Wikipedia.js +++ b/src/Wikipedia.js @@ -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)) } } diff --git a/src/index.js b/src/index.js index 45b6ce9..28770c1 100644 --- a/src/index.js +++ b/src/index.js @@ -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(, document.getElementById('root')); registerServiceWorker(); diff --git a/src/reccomenders/Random.js b/src/reccomenders/Random.js index c1e969b..cbfd33a 100644 --- a/src/reccomenders/Random.js +++ b/src/reccomenders/Random.js @@ -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 ( - {this.state.items.map(function (item,index) { - return( - - - - - - - {item.snippet.title}
- {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} - - - - - - ) - })} - ); + {this.state.items.map(function (item, index) { + return ( + + + + + + + {item.snippet.title}
+ {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} + + + + + + ) + })} + ); } } export default RecommenderRandom; \ No newline at end of file diff --git a/src/reccomenders/Recent.js b/src/reccomenders/Recent.js index 9181433..f23664f 100644 --- a/src/reccomenders/Recent.js +++ b/src/reccomenders/Recent.js @@ -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 -
- ; +
+ ; } else { return ( {items.map(item => ( - - - - - - - {item.name}
- {item.lastSelected} - - - + + + + + + + {item.name}
+ {item.lastSelected} + + + - - ))} + + ))} ); } diff --git a/src/reccomenders/Related.js b/src/reccomenders/Related.js index 6bd6127..058b400 100644 --- a/src/reccomenders/Related.js +++ b/src/reccomenders/Related.js @@ -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 ( - {this.state.items.map(function (item,index) { - return( + {this.state.items.map(function (item, index) { + return ( - {item.snippet.title}
+ {item.snippet.title}
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} diff --git a/src/reccomenders/Search.js b/src/reccomenders/Search.js index 6d0a48c..87c4827 100644 --- a/src/reccomenders/Search.js +++ b/src/reccomenders/Search.js @@ -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" }}> '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 ( - -
- + +
+ ); } else { - if(window.innerWidth < 992){ - return( - - {items.map(item=>( - - - - - -

{item.name}

+ if (window.innerWidth < 992) { + return ( + + {items.map(item => ( + + + + + +

{item.name}

{item.lastSelected}

Reccomender: fvitali

- - - - - ))} - - ); - }else{ - return( -
    { - items.map(item => ( - - {'Thumbnail - -
    {item.name}
    -

    {item.lastSelected}

    -

    Reccomender: fvitali

    -     - - )) - }
- );} + + + + + ))} + + ); + } else { + return ( +
    { + items.map(item => ( + + {'Thumbnail + +
    {item.name}
    +

    {item.lastSelected}

    +

    Reccomender: fvitali

    +     + + )) + }
+ ); + } } } } diff --git a/src/reccomenders/genreSimilarity.js b/src/reccomenders/genreSimilarity.js index b4f31f8..e6d695f 100644 --- a/src/reccomenders/genreSimilarity.js +++ b/src/reccomenders/genreSimilarity.js @@ -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 ( - {this.state.items.map(function (item,index) { - return( + {this.state.items.map(function (item, index) { + return ( - {item.snippet.title}
+ {item.snippet.title}
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)} @@ -67,7 +68,7 @@ class genreSimilarity extends Component { ) })} - ); + ); } } diff --git a/src/reccomenders/popGlobaleAssoluta.js b/src/reccomenders/popGlobaleAssoluta.js index cc9b921..97f2497 100644 --- a/src/reccomenders/popGlobaleAssoluta.js +++ b/src/reccomenders/popGlobaleAssoluta.js @@ -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 { - 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 ( @@ -99,6 +99,7 @@ class popGlobaleAssoluta extends React.Component { { - 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" }}>
{item.name}
-

{item.description.substring(0,200)}

+

{item.description.substring(0, 200)}

Visto: {item.timesWatched} volte
- Reccomender: popLocaleAss

+ Reccomender: popLocaleAss

 )) diff --git a/src/reccomenders/popRelLoc.js b/src/reccomenders/popRelLoc.js index 5bbe538..e5601f0 100644 --- a/src/reccomenders/popRelLoc.js +++ b/src/reccomenders/popRelLoc.js @@ -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 ( {items.map(item => ( - - - - - - - {item.name}
- {item.lastSelected} - - - + + + + + + + {item.name}
+ {item.lastSelected} + + + - - ))} + + ))} ); } diff --git a/src/reccomenders/similarityArtist.js b/src/reccomenders/similarityArtist.js index abc6ec0..89e2f7a 100644 --- a/src/reccomenders/similarityArtist.js +++ b/src/reccomenders/similarityArtist.js @@ -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 ( <> -

Artist Similarity: {this.state.artist}

-
    { - this.state.res.items.map(item => ( - - {'Thumbnail - -
    {item.snippet.title}
    -

    {item.snippet.description}

    -

    Reccomender: similarityArtist

    -     - - )) - }
+

Artist Similarity: {this.state.artist}

+
    { + this.state.res.items.map(item => ( + + {'Thumbnail + +
    {item.snippet.title}
    +

    {item.snippet.description}

    +

    Reccomender: similarityArtist

    +     + + )) + }
); } diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js index ba6defd..7429c3a 100644 --- a/src/registerServiceWorker.js +++ b/src/registerServiceWorker.js @@ -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 {