Modificato reccomender random

package-lock.json

@@ -15317,6 +15317,11 @@
         }
       }
     },
+    "youtube-page-token": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/youtube-page-token/-/youtube-page-token-1.0.1.tgz",
+      "integrity": "sha512-z4bGGXnv5OH/O7FGlHWObyPnM0vlJyiq5r2pwJShBwsAjUUz+qx/Q3Up4F5bthmjU1Ov4U4EpJl1tSE2DIKh/A=="
+    },
     "youtube-player": {
       "version": "5.5.1",
       "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.1.tgz",

package.json

@@ -19,7 +19,8 @@
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-youtube": "^7.8.0",
-    "wikijs": "^4.8.1"
+    "wikijs": "^4.8.1",
+    "youtube-page-token": "^1.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -8,6 +8,7 @@ import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
 import VideoInfo from './VideoInfo';
 import './css/App.css';
 import Related from './reccomenders/Related';
+import Random from './reccomenders/Random';
 
 class App extends React.Component {
 	constructor(props) {
@@ -16,9 +17,6 @@ class App extends React.Component {
 			isInfoToggled: true
 		};
 }
-    componentDidUpdate(prevProps,prevState,snapshot){
-	    document.location.reload(true);
-    }
 
 	render() {
 		return (
@@ -53,7 +51,7 @@ class App extends React.Component {
 				<Row className='downSection'>
 					<Switch>
 						{/*  */}
-						<Route exact path='/' component={VideoList} />
+						<Route exact path='/' component={Random} />
 						<Route render={() => <div>URL not found</div>} />
 					</Switch>
 				</Row>

src/reccomenders/Random.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import './App.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import axios from "axios";
 import createpageToken from 'youtube-page-token';
-import YouTube from "react-youtube";
+import {Card} from "react-bootstrap";
+import {Link} from "react-router-dom";
 
 class RecommenderRandom extends Component{
     constructor(props){
@@ -24,7 +24,7 @@ class RecommenderRandom extends Component{
                 'part': 'snippet',
                 'topicId' : '/m/04rlf', //Filtro per la musica.In questo caso il valore è quello della parent directory
                 'type' : 'video',       //che contiene tutti i generi di musica
-                'maxResults': '20',
+                'maxResults': '21',
                 'pageToken' : pageToken,
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
@@ -41,31 +41,33 @@ class RecommenderRandom extends Component{
     }
 
     render(){
-        const opts = {
-            height: '250',
-            width: '250',
-            playerVars: {
-                autoplay: 0
-            }
-        };
         return (
-            <div style={{overflow: 'auto',overflowY : 'scroll'}}>
+            <div style={{width: '100rem',height:'100rem'}}>
                 {this.state.items.map(function (item,index) {
                     return(
-                            <div key={index} style={{margin: '1rem',float: 'left',clear : 'left'}}>
-                                <YouTube
-                                    videoId={item.id.videoId}
-                                    opts={opts}
-                                />
-                                <div style={{marginLeft : '10rem',float : 'right',maxWidth:'40rem'}}>
-                                    <h3>{item.snippet.title}</h3>
-                                    <h4>{item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
-                                        return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
-                                    })}
-                                    </h4>
-                                    <p style={{fontSize: 'large'}}>{item.snippet.description}<br/>~Recommended as a Random Video~</p>
-                                </div>
-                            </div>
+                        <div key={index} style={{margin: '1rem',float: 'left'}}>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.title}
+                                        style={{width:'30rem',height:'20rem'}}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br/>
+                                            {item.snippet.channelTitle} - {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
+                                            return(p3+'/'+p2+'/'+p1+' at '+p4+':'+p5+':'+p6); //Funzione che trasforma la data e ora di pubblicazione dal formato ISO nel normale formato da cristiani
+                                        })}
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </div>
                     )
                 })}
             </div>