aggiunto popRelLoc

src/App.js

@@ -34,12 +34,20 @@ class App extends React.Component {
 			exact: true,
 			strict: false
 		});
+		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 };
 		}
 		return null;
-	}
+	}}}
+
 
 
 	render() {

src/Suggestion.js

@@ -9,6 +9,7 @@ import popGlobaleAssoluta from './reccomenders/popGlobaleAssoluta';
 import Recent from './reccomenders/Recent';
 import similarityArtist from './reccomenders/similarityArtist';
 import popLocaleAss from './reccomenders/popLocaleAss';
+import PopRelLoc from './reccomenders/popRelLoc';
 
 // and so on..
 
@@ -45,7 +46,7 @@ class Suggestion extends Component {
               <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>

src/TopBar.js

@@ -59,7 +59,7 @@ class TopBar extends Component {
 									</Link>
 								
 
-									<Link to={{ pathname: `/video/${localStorage['lastId']}/...` }} className="text-dark nav-link">
+									<Link to={{ pathname: `/video/${localStorage['lastId']}/popRelLoc` }} className="text-dark nav-link">
 										Relativa
 									</Link>
 								

src/VideoPlayer.js

@@ -96,23 +96,48 @@ class VideoPlayer extends React.Component {
 											response => console.info(response.data),
 											error => this.setState({error})//console.error(error, videoIdWatched.toString())
 										);
-									// local storage logic for recent reccomender//tmp è il video che devo inserire sulla lista
+									// 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) {
-												tmp.push({
+
+										if (localStorage['prevId']==='1')
+											{
+											//per primo video
+											tmp.push({
 												'id': videoIdWatched.toString(),
 												'lastWatched' : new Date(),
-												'timesWatched' : 1
+												'timesWatched' : 1,
-											});}
+												'prevVideos': []
-											else {
+												})
-												tmp[j].timesWatched++;
-												tmp[j].lastWatched= new Date();	
 											}
-											tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
+										else {
-											
+												//Prima volta video generico
-											
+												tmp.push({
-											localStorage.setItem('lastWatched', JSON.stringify(tmp));
+													'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()
+													})}
+			
+								}
+
+									tmp.sort((a, b) => new Date(b.lastWatched).getTime() - new Date(a.lastWatched).getTime());
+
+									
+									
+									localStorage.setItem('lastWatched', JSON.stringify(tmp));
 									//.finally(()=>{})
 									clearInterval(timerId1);
 								},

src/index.js

@@ -10,6 +10,8 @@ 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',

src/reccomenders/popRelLoc.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import axios from 'axios'; // eslint-disable-line no-unused-vars
+import { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
+/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
+import moment from "moment";
+
+class PopRelLoc extends React.Component {
+	state = {
+		error: null,
+		isLoaded: false,
+		items: [],
+		headers: null
+	};
+
+	ISO_8601parse(a) {
+		return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
+	}
+
+	componentDidMount() {
+        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)}
+				
+	}
+	
+	// METODI
+	getThumbnailsNames(listVideo) {
+		let idToLookFor = listVideo.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)'
+			}
+		})
+
+			.then(
+				res1 => {
+					res1.data.items.map(resCurrentValue =>
+						Object.defineProperties(
+							listVideo.find(videoItem => {
+								return videoItem.id === resCurrentValue.id;
+							}),
+							{
+								'thumbnail':
+									{ value: resCurrentValue.snippet.thumbnails.medium.url },
+								'name':
+									{ value: resCurrentValue.snippet.title }
+							})
+					);
+					this.setState({
+						isLoaded: true,
+						items: listVideo
+					});
+				})
+	}
+
+
+
+	render() {
+		const { error, isLoaded, items } = this.state;
+		if (error) {
+			return (
+				<React.Fragment>
+					Error: {error.message} -- Cannot get {error.config.url}
+				</React.Fragment>
+			);
+		} else if (!isLoaded) {
+			return (
+				<React.Fragment>
+					<Col>
+						<p className="text-center">Loading...</p>
+					</Col>
+				</React.Fragment>
+			);
+		} else {
+			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>
+							</Card>
+						
+					</Col>))}
+				</React.Fragment>
+			);
+		}
+	}
+}
+
+
+
+export default PopRelLoc;