From bb71bf270cb6a500bf7b13d033658f46e70a37f0 Mon Sep 17 00:00:00 2001
From: matteo <matteoscorzafava@gmail.com>
Date: Sat, 24 Nov 2018 01:41:45 +0100
Subject: [PATCH] riorganizzazione files, gestione id videoplayer e videoinfo

---
 public/favicon.ico               | Bin 3870 -> 32988 bytes
 src/App.js                       |   9 +--
 src/App.test.js                  |   3 +-
 src/TopBar.js                    |   2 +-
 src/VideoInfo.js                 |  37 ++++++----
 src/VideoList.js                 | 113 ++++++++++++++++---------------
 src/VideoPlayer.js               |  36 ++++++++--
 src/{ => areainfo}/Suggestion.js |   0
 src/{ => areainfo}/Wikipedia.js  |   0
 src/{ => css}/App.css            |   0
 src/{ => css}/TopBar.css         |   0
 src/css/VideoList.css            |   2 +
 12 files changed, 122 insertions(+), 80 deletions(-)
 rename src/{ => areainfo}/Suggestion.js (100%)
 rename src/{ => areainfo}/Wikipedia.js (100%)
 rename src/{ => css}/App.css (100%)
 rename src/{ => css}/TopBar.css (100%)
 create mode 100644 src/css/VideoList.css

diff --git a/public/favicon.ico b/public/favicon.ico
index a11777cc471a4344702741ab1c8a588998b1311a..8a308dda7d32e25b1ae5f93ee99b09c1cacb51ae 100644
GIT binary patch
literal 32988
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

literal 3870
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
baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@

diff --git a/src/App.js b/src/App.js
index 52fd9ca..1b83f76 100644
--- a/src/App.js
+++ b/src/App.js
@@ -6,7 +6,7 @@ import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
 import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
 import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
 import VideoInfo from './VideoInfo';
-import './App.css';
+import './css/App.css';
 
 class App extends React.Component {
 	render() {
@@ -18,16 +18,17 @@ class App extends React.Component {
 				<Row className="justify-content-center bg-black">
 					<Col xs="12" sm="6">
 						<Switch>
-							<Route path="/video/:id" component={VideoPlayer} />
-							<Route component={VideoPlayer} />
+							<Route path={["/video/:id",'']} component={VideoPlayer} />
+							{/* <Route component={VideoPlayer} /> */}
 							{/* <Route path='/search/:q/:token?' component={Search} />  */}
 						</Switch>
 					</Col>
 				</Row>
 				<Row className='scrollable'>
 					<Switch>				
-					<Route path="/video/:id" component={VideoInfo} />
+					<Route path={["/video/:id","/search/:query"]} component={VideoInfo} />
 					<Route exact path='/' component={VideoList} />
+					<Route render={() => <div>URL not found</div>}/>
 					</Switch>
 				</Row>
 			</React.Fragment>
diff --git a/src/App.test.js b/src/App.test.js
index a754b20..739c131 100644
--- a/src/App.test.js
+++ b/src/App.test.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
+import { HashRouter } from 'react-router-dom';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<App />, div);
+  ReactDOM.render(<HashRouter><App /></HashRouter>, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/TopBar.js b/src/TopBar.js
index 477d61a..e0b9372 100644
--- a/src/TopBar.js
+++ b/src/TopBar.js
@@ -8,7 +8,7 @@ import {
 	Button
 } from 'react-bootstrap'; //eslint-disable-next-line
 import { Link, withRouter } from 'react-router-dom';
-import './TopBar.css';
+import './css/TopBar.css';
 // import PropTypes from "prop-types";
 
 class TopBar extends Component {
diff --git a/src/VideoInfo.js b/src/VideoInfo.js
index 13e4de8..0d71881 100644
--- a/src/VideoInfo.js
+++ b/src/VideoInfo.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 // import PropTypes from 'prop-types';
-import Wikipedia from './Wikipedia';
+import Wikipedia from './areainfo/Wikipedia';
 import { Col, Tabs, Tab } from 'react-bootstrap';
 import axios from 'axios';
 
@@ -10,20 +10,26 @@ class VideoInfo extends Component {
     this.state={	
       error: null,
 			isLoaded: false,
-      VideoDetails: {}
+      VideoDetails: {},
+      videoId: '0J2QdDbelmY'
     };
 
   }
 
-  // componentWillMount() {
-
-  // }
+  componentWillMount() {
+    if(this.props.match.params.id){
+    if(this.props.match.params.id === this.state.videoId){}
+    else{
+      this.setState({videoId: this.props.match.params.id});
+    }
+  }
+  }
 
   componentDidMount() {
     axios.get('https://www.googleapis.com/youtube/v3/videos', {
       params: {
         'part': 'snippet,contentDetails,statistics,topicDetails',
-        'id': this.props.match.params.id,
+        'id': this.state.videoId,
         'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
       }
     }).then(response => {
@@ -47,13 +53,20 @@ class VideoInfo extends Component {
 
   // }
 
-  // componentWillUpdate(nextProps, nextState) {
+  componentWillUpdate(nextProps, nextState) {
+    // console.info('nextProps',nextProps);
+    // console.info('nextState',nextState);
+    if(nextProps.match.params.id === this.state.videoId){}
+    else{
+      this.setState({videoId: nextProps.match.params.id});
+      
+    }
+  }
 
-  // }
-
-  // componentDidUpdate(prevProps, prevState) {
-
-  // }
+  componentDidUpdate(prevProps, prevState) {
+		console.info('prevProps',prevProps);
+		console.info('prevState',prevState);
+  }
 
   // componentWillUnmount() {
 
diff --git a/src/VideoList.js b/src/VideoList.js
index af55136..eb285cf 100644
--- a/src/VideoList.js
+++ b/src/VideoList.js
@@ -2,6 +2,7 @@ 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
+import './css/VideoList.css';
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
 
 class VideoList extends React.Component {
@@ -13,16 +14,14 @@ class VideoList extends React.Component {
 			items: [],
 			headers: null
 		};
+		this.getThumbnails = this.getThumbnails.bind(this);
 	}
 
 	componentDidMount() {
 		axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
 			response => {
 				this.shuffleArray(response.data);
-				this.setState({
-					headers: response.config
-				});
-				return this.getThumbnails(response.data);
+				this.getThumbnails(response.data);
 			},
 			// Note: it's important to handle errors here
 			// instead of a catch() block so that we don't swallow
@@ -37,51 +36,7 @@ class VideoList extends React.Component {
 		);
 	}
 
-	render() {
-		const { error, isLoaded, items, headers } = this.state;
-		if (error) {
-			return (
-				<React.Fragment>
-					Error: {error.message} -- Cannot get {error.config.url}
-				</React.Fragment>
-			);
-		} else if (!isLoaded) {
-			return <React.Fragment>Loading...</React.Fragment>;
-		} else {
-			return (
-				<React.Fragment>
-					{items.map(item => (
-						<Col key={item.videoID} lg="4" md="6">
-							<Card className="my-1">
-								<Link to={{ pathname: '/video/' + item.videoID }}>
-									<ListGroup>
-										<ListGroup.Item className="bg-secondary text-white">
-											{item.artist} - {item.title}
-										</ListGroup.Item>
-										<ListGroup.Item>
-											<span className="bg-info text-white">
-												{' '}
-												{item.videoID}
-											</span>{' '}
-											{item.category}
-										</ListGroup.Item>
-									</ListGroup>
-								</Link>
-							</Card>
-						</Col>
-					))}
-				</React.Fragment>
-			);
-		}
-	}
-	shuffleArray(videoarray) {
-		for (let i = videoarray.length - 1; i > 0; i--) {
-			const j = Math.floor(Math.random() * (i + 1));
-			[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
-		}
-		// Durstenfeld shuffle.
-		// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
-	}
+// METODI
 	getThumbnails(videoItems) {
 		let idToLookFor = videoItems.map(item => item.videoID);
 		let finalChunk = (videoItems.length % 50) + 100;
@@ -122,7 +77,7 @@ class VideoList extends React.Component {
 						res2.data.items,
 						res3.data.items
 					);
-					allres.forEach(resCurrentValue => {
+					allres.map(resCurrentValue => {
 						Object.defineProperty(
 							videoItems.find(videoItem => {
 								return videoItem.videoID === resCurrentValue.id;
@@ -131,13 +86,61 @@ class VideoList extends React.Component {
 							{ value: resCurrentValue.snippet.thumbnails.medium.url }
 						);
 					});
+					this.setState({
+						isLoaded: true,
+						items: videoItems
+					});
 				})
 			);
-		return this.setState({
-			isLoaded: true,
-			items: videoItems
-		});
+	}
+
+	shuffleArray(videoarray) {
+		for (let i = videoarray.length - 1; i > 0; i--) {
+			const j = Math.floor(Math.random() * (i + 1));
+			[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
+		}
+		// Durstenfeld shuffle.
+		// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
+	}
+
+	render() {
+		const { error, isLoaded, items, headers } = 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 key={item.videoID} lg={{ span: 3 }} md="6">
+							<Card className="my-1 carta">
+								<Link to={{ pathname: '/video/' + item.videoID }}>
+									{/* {item.artist} - {item.title}		{item.videoID}					{item.category} */}
+									<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
+									<Card.ImgOverlay>
+										<Card.Title className="bg-dark d-inline text-white">
+											{item.artist} - {item.title}
+										</Card.Title>
+									</Card.ImgOverlay>
+								</Link>
+							</Card>
+						</Col>
+					))}
+				</React.Fragment>
+			);
+		}
 	}
 }
 
-export default VideoList;
+export default VideoList;
\ No newline at end of file
diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js
index f4d8f77..0601ce7 100644
--- a/src/VideoPlayer.js
+++ b/src/VideoPlayer.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
 import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
+import { stringify } from 'querystring';
 /* eslint no-console: ["error", { allow: ["info", "error"] }] */
 
 class VideoPlayer extends Component {
@@ -14,21 +15,35 @@ class VideoPlayer extends Component {
 					autoplay: 0,
 					modestbranding: 1
 				}
-			}
+			},
+			videoId: '0J2QdDbelmY'
 		};
 	}
+	componentWillUpdate(nextProps, nextState){
+		if(nextProps.match.params.id === this.props.match.params.id){}
+		else{
+			this.setState((state, props) => { return { videoId: props.match.params.id  }});
+		}
+
+	}
+
+	componentDidMount(){
+		if(this.props.match.params.id)
+			this.setState((state, props) => { return { videoId: props.match.params.id  }});
+			
+	}
 
 	render() {
 		return (
 			<React.Fragment>
 				<YouTube
 					opts={this.state.opt}
-					videoId={
-						this.props.match.params.id ? this.props.match.params.id : '3AVWJzHvhFE' // or null
-					}
+					// this.props.match.params.id 
+					videoId={this.state.videoId} 
 					onReady={this._onReady}
 					onPlay={this._onPlay}
 					onError={this._onError}
+					onStateChange={this._onStateChange}
 					className="embed-responsive-item"
 					containerClassName="embed-responsive embed-responsive-16by9"
 				/>
@@ -40,16 +55,23 @@ class VideoPlayer extends Component {
 		// console.error(event);
 	}
 	_onPlay(event) {
-		console.info('on play',event.target.getDuration(), event);
+		// console.info('on play',event.target.getCurrentTime(), event);
+		// console.info(event.target.getApiInterface());
 		// console.warn(event.target.getDuration());
+		// console.info('go');
+		// while(event.target.getCurrentTime() < 15){}
+		// console.info(event.target.getCurrentTime());
 	}
 	_onReady(event) {
 		// access to player in all event handlers via event.target
-		//event.target.pauseVideo();
-		console.info('on ready', event);
+		// event.target.pauseVideo();
+		// console.info('on ready', event);
 		// console.warn(event);
 		// console.warn(event.target.getDuration());
 	}
+	_onStateChange(event) {
+		// console.info('statechange: ', event)
+	}
 }
 
 export default VideoPlayer;
diff --git a/src/Suggestion.js b/src/areainfo/Suggestion.js
similarity index 100%
rename from src/Suggestion.js
rename to src/areainfo/Suggestion.js
diff --git a/src/Wikipedia.js b/src/areainfo/Wikipedia.js
similarity index 100%
rename from src/Wikipedia.js
rename to src/areainfo/Wikipedia.js
diff --git a/src/App.css b/src/css/App.css
similarity index 100%
rename from src/App.css
rename to src/css/App.css
diff --git a/src/TopBar.css b/src/css/TopBar.css
similarity index 100%
rename from src/TopBar.css
rename to src/css/TopBar.css
diff --git a/src/css/VideoList.css b/src/css/VideoList.css
new file mode 100644
index 0000000..b506bf2
--- /dev/null
+++ b/src/css/VideoList.css
@@ -0,0 +1,2 @@
+.carta :hover{
+}
\ No newline at end of file