aggiunto popRelLoc

src/App.js

@@ -34,12 +34,19 @@ 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

@@ -7,6 +7,7 @@ import Search from './reccomenders/Search';
 import fvitali from './reccomenders/fvitali';
 import popGlobaleAssoluta from './reccomenders/popGlobaleAssoluta';
 import Recent from './reccomenders/Recent';
+import PopRelLoc from './reccomenders/popRelLoc';
 
 // and so on..
 
@@ -42,7 +43,7 @@ class Suggestion extends Component {
         <Route path='/video/:id/random' component={Random} />
         <Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
         <Route path='/video/:id/recent' component={Recent} />
-
+        <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

@@ -77,7 +77,7 @@ class VideoPlayer extends React.Component {
 							promise1: new Promise((resolve, reject) => {
 								timerId1 = window.setInterval(() => {
 									if (event.target.getCurrentTime() > 15)
-										resolve(event.target.j.videoData.video_id);
+										resolve(event.target.getVideoData().video_id);
 								}, 1000);
 								this.setState({ outsideReject1: reject });
 							})
@@ -97,15 +97,48 @@ class VideoPlayer extends React.Component {
 									// local storage logic for recent reccomender//tmp è il video che devo inserire sulla lista
 											let tmp = JSON.parse(localStorage.getItem('lastWatched')) 
 											let j=tmp.findIndex(el=>el.id.toString()===videoIdWatched.toString())
-											if (j<0){
+											if (j<0) {
+
+												if (localStorage['prevId']==='1')
+													{
+													//per primo video
 													tmp.push({
 														'id': videoIdWatched.toString(),
 														'lastWatched' : new Date(),
-												'timesWatched' : 1
-											});}
+														'timesWatched' : 1,
+														'prevVideos': []
+														})
+													}
 												else {
+														//Prima volta video generico
+														tmp.push({
+															'id': videoIdWatched.toString(),
+															'lastWatched' : new Date(),
+															'timesWatched' : 1,
+															'prevVideos' : [{id:[localStorage["prevId"]].toString()}]
+														 })
+													}
+												} 
+											else {
+												//  if (tmp[j].id=='0J2QdDbelmY'){
+												// 		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()
+												// 			})}
+												// 	 } 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());

src/index.js

@@ -8,7 +8,9 @@ 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['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
+localStorage['prevId'] ? function (){}() : localStorage.setItem('prevId','1')
 localStorage['currentVideoInfo']? function(){}() : localStorage.setItem('currentVideoInfo', JSON.stringify({
     'id':'0J2QdDbelmY',
     'artist':'Seven Nation Army',

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;