maledetto il signore

src/App.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
+import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
-import 'bootstrap/dist/css/bootstrap.css';
 import { Row, Col, Button, Collapse } from 'react-bootstrap';
 import TopBar from './TopBar';
 import VideoPlayer from './VideoPlayer';
@@ -16,54 +15,52 @@ class App extends React.Component {
 		playerHeight: null,
 		navHeight: null,
 		blackbgHeight: null,
-		dirtyBg: true,
 		isInfoToggled: false,
 		videoId: localStorage['lastId']
 	};
 
-// componentDidMount(){
+	// componentDidMount() {
 
-// }
+	// }
 
-// componentDidUpdate(prevProps, prevState) {
+	// componentDidUpdate(prevProps, prevState) {
-	
-// }
 
-static getDerivedStateFromProps(nextProps, prevState) {
+	// }
-	let idMatch = matchPath(nextProps.location.pathname, {
+
-		path: "/video/:id",
+	static getDerivedStateFromProps(nextProps, prevState) {
-		exact: true,
+		let idMatch = matchPath(nextProps.location.pathname, {
-		strict: false
+			path: "/video/:id",
-	});
+			exact: true,
-	if(idMatch && idMatch.params.id !== prevState.videoId){ 
+			strict: false
-		localStorage.setItem('lastId', idMatch.params.id)
+		});
-		return {videoId: idMatch.params.id }; 
+		if (idMatch && idMatch.params.id !== prevState.videoId) {
+			localStorage.setItem('lastId', idMatch.params.id)
+			return { videoId: idMatch.params.id };
 		}
-	return null;
+		return null;
-}
+	}
 
 
 	render() {
 		return (
 			<React.Fragment>
-				{/* <HashRouter/> */}
+				<Row id="top">
-				<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
 					<TopBar />
-				</ReactHeight>
+				</Row>
-				<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
+				<Row className="upperSection">
 					<Col
 						xs="12"
 						lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
 						className="align-content-center pt-2 p-1 pr-2">
-						<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
+						<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
-							<VideoPlayer videoId={this.state.videoId}/>
+							<VideoPlayer videoId={this.state.videoId} />
 						</ReactHeight>
 					</Col>
 					<Col
 						xs="12"
 						lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
-						className="p-0 p-sm-0"
+						className="p-0 p-xs-0"
-						style={window.innerWidth < 992 ? { 'overflow': "auto", 'display':'fixed' , 'maxHeight':this.state.playerHeight*1.4+'px'} : { 'overflow': "auto" , 'maxHeight':`${this.state.playerHeight}px`}}> 
+						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 */}
 						<div className="d-flex justify-content-center">
 							<Button
@@ -77,12 +74,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
 						</div>
 						<Collapse in={this.state.isInfoToggled}>
 							<div className="pt-1" id="infovideo-collapse">
-								<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
+								<Route render={(props) => <VideoInfo {...props} key={this.state.videoId} videoId={this.state.videoId} />} />
 							</div>
 						</Collapse>
 					</Col>
-				</ReactHeight>
+				</Row>
-				<Row style={{ "maxHeight": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
+				<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 46px)` }} className='mt-1 downSection'>
 					<Switch>
 						<Route exact path='/' component={VideoList} />
 						<Route path={"/video/:id"} component={Suggestion} />

src/VideoInfo.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Wikipedia from './areainfo/Wikipedia';
 import { Card, Tabs, Tab } from 'react-bootstrap';
-import {Link, withRouter} from 'react-router-dom';
+import {Link} from 'react-router-dom';
 import axios from 'axios';
 import Linkify from "react-linkify";
 import moment from 'moment';
@@ -28,60 +28,6 @@ class VideoInfo extends React.Component {
         return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
     }
 
-    isArtistOrTitle(a){
-        // switch(parseInt(b)){
-        //     case 1:
-            
-        //         break;
-        //     case 2:
-
-        //         break;
-        //     default: 
-        //         break;
-        // }
-        axios.all([
-            axios.get("https://musicbrainz.org/ws/2/work", {
-                params: {
-                    query: `work:${a[0]} AND artist:${a[1]}`,
-                    //artist: a[1],
-                    fmt: "json",
-                    limit: 1,
-                    inc: "aliases"
-                }}),
-                axios.get("https://musicbrainz.org/ws/2/work", {
-                    params: {
-                        query: `work:${a[1]} AND artist:${a[0]}`,
-                    //    artist: a[0],
-                        fmt: "json",
-                        limit: 1,
-                        inc: "aliases"
-                    }})
-            ])
-            .then(axios.spread((response1, response2) => { 
-                    console.log(response1.data, response2.data);
-                    axios.all([
-                        axios.get(`https://musicbrainz.org/ws/2/work/${response1.data.works[0].id}`,{
-                            params:{
-                                fmt:'json',
-                                limit:1,
-                                inc: 'aliases'
-                            }
-                        }),
-                        axios.get(`https://musicbrainz.org/ws/2/work/${response2.data.works[0].id}`,{
-                            params:{
-                                fmt:'json',
-                                limit:1,
-                                inc: 'recording-rels'
-                            }
-                        }),
-                    ]).then(axios.spread((responseA1,responseA2)=>{
-                        console.log(responseA1.data, responseA2.data);
-                    }))
-                }),
-                error => { }
-            );
-            }
-        
     getInfoComments() {
         return axios.all([
             axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
@@ -99,14 +45,9 @@ class VideoInfo extends React.Component {
                 }
             })])
             .then(axios.spread((videosResponse, commentThreadResponse) => {
-              //  this.isArtistOrTitle(ytclear(videosResponse.data.items[0].snippet.title).split('-'));
                 this.setState({
                     VideoDetails: videosResponse.data.items[0],
                     comments: commentThreadResponse.data.items,
-                    others: {
-                        title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1],
-                        artist2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[0]
-                    },
                     isLoaded: true
                 });
             }), error => {
@@ -118,27 +59,16 @@ class VideoInfo extends React.Component {
             });
     }
 
-    static getDerivedStateFromProps(nextProps, prevState) {
+    // static getDerivedStateFromProps(nextProps, prevState) {
-        // if(nextProps.videoId !== prevState.videoId)
+
-        //     return { videoId: nextProps.videoId };
+    // }
-        // else 
-        if('undefined' === typeof nextProps.location.state)
-           return null;
-        else
-            return { others: {
-                artist: nextProps.location.state.artist,
-                title: nextProps.location.state.title
-            }}
-       // return null;
-    }
     componentDidMount() {
         this.getInfoComments();
     }
 
-    componentDidUpdate(prevProps, prevState, snapshot) {
+    // componentDidUpdate(prevProps, prevState, snapshot) {
-        if(prevProps.videoId !== this.props.videoId)
+    
-            this.getInfoComments();
+    // }
-    }
 
     // shouldComponentUpdate(nextProps, nextState) {
     // }
@@ -169,7 +99,7 @@ class VideoInfo extends React.Component {
                                 <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
                                 <b>Tags: </b>{VideoDetails.snippet.tags ?
                                     VideoDetails.snippet.tags.map((tag,i) => 
-                                    (<Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>)) 
+                                    ( <span><Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>{" "}</span> )) 
                                     : ""}
                             </p>
                         </Tab>
@@ -207,10 +137,10 @@ class VideoInfo extends React.Component {
                         </Tab>
                         <Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
                             <Wikipedia 
-                            title={this.state.others.title}
+                            title={'undefined' !== typeof this.props.location.state ? this.props.location.state.title: undefined}
-                            title2={this.state.others.title2}
+                            title2={ytclear(this.state.VideoDetails.snippet.title).split('-')[1]}
-                            artist={this.state.others.artist}
+                            artist={'undefined' !== typeof this.props.location.state ? this.props.location.state.artist: undefined}
-                            artist2={this.state.others.artist2}
+                            artist2={ytclear(this.state.VideoDetails.snippet.title).split('-')[0]}
                             key={this.props.videoId}
                             videoId={this.props.videoId}
                             />
@@ -220,11 +150,6 @@ class VideoInfo extends React.Component {
             );
         }
     }
-
 }
-VideoInfo.propTypes = {
-
-};
 
 export default VideoInfo;
-// export default withRouter(VideoInfo);

src/VideoList.js

@@ -2,7 +2,6 @@ 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 {

src/areainfo/Wikipedia.js

@@ -164,29 +164,9 @@ class Wikipedia extends Component {
 			});
 	}
 
-	static getDerivedStateFromProps(nextProps, prevState) {
-		// if (prevState.props.videoId !== nextProps.videoId)
-		// 	return {
-		// 		musicbrainz:null,
-		// 		wikidata: null,
-		// 		wikipedia: null,
-		// 		props: {
-		// 			videoId: nextProps.videoId,
-		// 		},
-		// 		isWikiLoaded: false,
-		// 		isWDataLoaded: false,
-		// 		isMBLoaded: false,
-		// 		isLoaded: false,
-		// 		wikidatakeys: null,
-		// 		wikipediakeys: null
-		// 	};
-		return null
-	}
-
-
 
 	componentDidMount() {
-		this.wrapper().then((a) => this.setState({ isLoaded: true, a }));
+		this.wrapper().then(() => this.setState({ isLoaded: true }));
 	}
 
 
@@ -195,8 +175,7 @@ class Wikipedia extends Component {
 	// }
 
 	// componentDidUpdate(prevProps, prevState) {
-	// 	if (prevProps.videoId !== this.props.videoId)
+
-	// 		this.wrapper().then((a) => this.setState({ isLoaded: true, a:a.toUpperCase() }));
 	// }
 
 	// componentWillUnmount() {
@@ -212,7 +191,7 @@ class Wikipedia extends Component {
 			return <React.Fragment>Loading...</React.Fragment>;
 		} else {
 			return (
-				<Table striped bordered hover size="sm">
+				<Table bordered variant="dark" hover size="sm">
 					<tbody>
 						{isWikiLoaded &&
 							this.state.wikipediakeys.map(key => (

src/css/App.css

@@ -1,5 +1,6 @@
 .upperSection{
   background-color:#000000;
+  display: fixed;
 }
 
 .downSection{

src/index.js

@@ -1,10 +1,12 @@
+import 'bootstrap/dist/css/bootstrap.css';
 import 'react-app-polyfill/ie9';
 //import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
-import { HashRouter , BrowserRouter, Route } from 'react-router-dom'; // eslint-disable-line 
+import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line 
+
 localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
 localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
 

src/reccomenders/Recent.js

@@ -114,12 +114,14 @@ class Recent extends React.Component {
 		} else {
 			return (
 				<React.Fragment>
-					{items.map(item => (<Col md="4">
+					{items.map(item => (
+					<Col md="4">
+					<Card key={item.id}>
 						<Link
 							to={{
 								pathname: '/video/' + item.id,
 							}}
-						><Card key={item.id}>
+						>
 								<Card.Img
 									src={item.thumbnail}
 									alt={'Thumbnail of ' + item.name}
@@ -130,8 +132,9 @@ class Recent extends React.Component {
 										{item.lastSelected}
 									</Card.Title>
 								</Card.ImgOverlay>
+							</Link>
 							</Card>
-						</Link>
+						
 					</Col>))}
 				</React.Fragment>
 			);