riorganizzazione files, gestione id videoplayer e videoinfo

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 path={["/video/:id",'']} component={VideoPlayer} />
-							<Route 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>

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);
 });

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 {

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() {
 

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({
+				this.getThumbnails(response.data);
-					headers: response.config
-				});
-				return 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() {
+// METODI
-		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
-	}
 	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,12 +86,60 @@ class VideoList extends React.Component {
 							{ value: resCurrentValue.snippet.thumbnails.medium.url }
 						);
 					});
-				})
+					this.setState({
-			);
-		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>
+			);
+		}
 	}
 }
 

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 ? this.props.match.params.id : '3AVWJzHvhFE' // or null
+					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);
+		// console.info('on ready', event);
 		// console.warn(event);
 		// console.warn(event.target.getDuration());
 	}
+	_onStateChange(event) {
+		// console.info('statechange: ', event)
+	}
 }
 
 export default VideoPlayer;

src/css/VideoList.css

@@ -0,0 +1,2 @@
+.carta :hover{
+}