Merge branch 'playeronside' of https://bitbucket.org/sco44/tecnologiabanana into playeronside

package-lock.json

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

@@ -20,7 +20,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

@@ -9,7 +9,12 @@ import VideoList from './VideoList';
 import Suggestion from './areainfo/Suggestion';
 import { ReactHeight } from 'react-height';
 import './css/App.css';
+<<<<<<< HEAD
 
+=======
+import Related from './reccomenders/Related';
+import Random from './reccomenders/Random';
+>>>>>>> d34f049d7f8903074356e8a32a57c34891df385e
 
 class App extends React.Component {
 	constructor(props) {

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,30 +41,32 @@ 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 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'}}
                                     />
-                                <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){
+                                    <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
                                         })}
-                                    </h4>
-                                    <p style={{fontSize: 'large'}}>{item.snippet.description}<br/>~Recommended as a Random Video~</p>
-                                </div>
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
                         </div>
                     )
                 })}