sistemata la visualizzazione video pc/cell

src/reccomenders/Random.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import axios from "axios";
 import createpageToken from 'youtube-page-token';
-import { Card, Col } from "react-bootstrap";
+import { Card, Col, Media } from "react-bootstrap";
 import { Link } from "react-router-dom";
 import moment from "moment";
 
@@ -43,6 +43,7 @@ class RecommenderRandom extends Component {
 
     render() {
         const ISO_8601parse = this.ISO_8601parse;
+        if (window.innerWidth < 992) {
         return (<React.Fragment>
             {this.state.items.map(function (item, index) {
                 return (
@@ -61,7 +62,8 @@ class RecommenderRandom extends Component {
                                 <Card.ImgOverlay>
                                     <Card.Title className="bg-dark d-inline text-white">
                                         {item.snippet.title}<br />
-                                        {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
+                                        {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}<br />
+                                        <span>Reccomender: Random</span>
                                     </Card.Title>
                                 </Card.ImgOverlay>
                             </Link>
@@ -70,6 +72,33 @@ class RecommenderRandom extends Component {
                 )
             })}
         </React.Fragment>);
-    }
+    }else{
+        return (
+            <ul className="list-unstyled">{
+                this.state.items.map(item => (
+                    <Link
+                        key={item.id.videoId}
+                        as="li" className="media mx-5 my-1 suggItem"
+                        to={{
+                            pathname: `/video/${item.id.videoId}`,
+                            search: '?ref=Random'
+                        }}>
+                        <img
+                            width={240}
+                            height={120}
+                            className="align-self-center mr-3 img-fluid"
+                            src={item.snippet.thumbnails.high.url}
+                            alt={'Thumbnail of ' + item.snippet.title}
+                        />
+                        <Media.Body>
+                            <h5>{item.snippet.title}</h5>
+                            <p> {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}</p>
+                            <p>Reccomender: Random</p>
+                        </Media.Body>
+                    </Link>
+                ))
+            }</ul>
+        );
+    }}
 }
 export default RecommenderRandom;

src/reccomenders/Recent.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Col, Card, Media } 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
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
@@ -68,6 +68,7 @@ class Recent extends React.Component {
 				<div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
 			</Col>;
 		} else {
+			if (window.innerWidth < 992) {
 			return (
 				<React.Fragment>
 					{items.map(item => (
@@ -86,7 +87,7 @@ class Recent extends React.Component {
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
 											{item.name}<br />
-											{item.lastSelected}
+											<span>Reccomender: Recent</span>
 										</Card.Title>
 									</Card.ImgOverlay>
 								</Link>
@@ -95,7 +96,33 @@ class Recent extends React.Component {
 						</Col>))}
 				</React.Fragment>
 			);
-		}
+		}else{
+			return (
+				<ul className="list-unstyled">{
+					this.state.items.map(item => (
+						<Link
+							key={item.name}
+							as="li" className="media mx-5 my-1 suggItem"
+							to={{
+								pathname: `/video/${item.name}`,
+								search: '?ref=Recent'
+							}}>
+							<img
+								width={240}
+								height={120}
+								className="align-self-center mr-3 img-fluid"
+								src={item.thumbnail}
+								alt={'Thumbnail of ' + item.name}
+							/>
+							<Media.Body>
+								<h5>{item.name}</h5><br />
+								<p>Reccomender: Recent</p>
+							</Media.Body>
+						</Link>
+					))
+				}</ul>
+			);
+		}}
 	}
 }
 

src/reccomenders/Related.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import axios from 'axios';
 import { Link } from "react-router-dom";
-import { Card, Col } from "react-bootstrap";
+import { Card, Col, Media } from "react-bootstrap";
 import moment from "moment";
 
 
@@ -62,6 +62,7 @@ class Related extends Component {
 
     render() {
         const ISO_8601parse = this.ISO_8601parse;
+        if (window.innerWidth < 992) {
         return (
             <React.Fragment>
                 {this.state.items.map(function (item, index) {
@@ -81,7 +82,8 @@ class Related extends Component {
                                     <Card.ImgOverlay>
                                         <Card.Title className="bg-dark d-inline text-white">
                                             {item.snippet.title}<br />
-                                            {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
+                                            {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}<br />
+                                            <span>Reccomender: Related</span>
                                         </Card.Title>
                                     </Card.ImgOverlay>
                                 </Link>
@@ -91,7 +93,34 @@ class Related extends Component {
                 })}
             </React.Fragment>
         );
-    }
+    }else{
+        return (
+            <ul className="list-unstyled">{
+                this.state.items.map(item => (
+                    <Link
+                        key={item.id.videoId}
+                        as="li" className="media mx-5 my-1 suggItem"
+                        to={{
+                            pathname: `/video/${item.id.videoId}`,
+                            search: '?ref=Related'
+                        }}>
+                        <img
+                            width={240}
+                            height={120}
+                            className="align-self-center mr-3 img-fluid"
+                            src={item.snippet.thumbnails.high.url}
+                            alt={'Thumbnail of ' + item.snippet.title}
+                        />
+                        <Media.Body>
+                            <h5>{item.snippet.title}</h5>
+                            <p> {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}</p>
+                            <p>Reccomender: Related</p>
+                        </Media.Body>
+                    </Link>
+                ))
+            }</ul>
+        );
+    }}
 }
 
 Related.propTypes = {

src/reccomenders/Search.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
-import { Col, Media } from 'react-bootstrap';
+import { Col, Media, Card } from 'react-bootstrap';
 
 class Search extends React.Component {
 
@@ -109,6 +109,7 @@ class Search extends React.Component {
                 <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
             </Col>;
         } else {
+            if (window.innerWidth > 992) {
             return (
                 <ul className="list-unstyled">{
                     this.state.res.items.map(item => (
@@ -135,7 +136,34 @@ class Search extends React.Component {
                     ))
                 }</ul>
             );
-        }
+        }else{
+            return (
+                <React.Fragment>
+                    {this.state.res.items.map(item => (<Col md="4">
+                        <Card key={item.id.videoId}>
+                            <Link
+                                to={{
+                                    pathname: '/video/' + item.id.videoId,
+                                    search: "?ref=Search"
+                                }}
+                            >
+                                <Card.Img
+                                    src={item.snippet.thumbnails.medium.url}
+                                    alt={'Thumbnail of ' + item.snippet.title}
+                                />
+                                <Card.ImgOverlay>
+                                    <Card.Title className="bg-dark d-inline text-white">
+                                        <p>{item.snippet.title}</p>
+                                        <p className='small'>{item.lastSelected}</p>
+                                        <p className='small'>Reccomender: Search</p>
+                                    </Card.Title>
+                                </Card.ImgOverlay>
+                            </Link>
+                        </Card>
+                    </Col>))}
+                </React.Fragment>
+            );
+        }}
     }
 }
 

src/reccomenders/fvitali.js

@@ -100,9 +100,9 @@ class fvitali extends React.Component {
 									/>
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
-											<p>{item.name}</p>
+											<span>{item.name}</span> <br/>
-											<p className='small'>{item.lastSelected}</p>
+											<span>{item.lastSelected}</span> <br/>
-											<p className='small'>Reccomender: fvitali</p>
+											<span>Reccomender: fvitali</span>
 										</Card.Title>
 									</Card.ImgOverlay>
 								</Link>

src/reccomenders/genreSimilarity.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import axios from 'axios';
-import { Card, Col } from "react-bootstrap";
+import { Card, Col, Media } from "react-bootstrap";
 import createpageToken from 'youtube-page-token';
 import { Link } from "react-router-dom";
 import moment from "moment";
@@ -42,6 +42,7 @@ class genreSimilarity extends Component {
 
     render() {
         const ISO_8601parse = this.ISO_8601parse;
+        if (window.innerWidth < 992){
         return (<React.Fragment>
             {this.state.items.map(function (item, index) {
                 return (
@@ -60,7 +61,8 @@ class genreSimilarity extends Component {
                                 <Card.ImgOverlay>
                                     <Card.Title className="bg-dark d-inline text-white">
                                         {item.snippet.title}<br />
-                                        {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
+                                        {item.snippet.channelTitle}<br />
+                                        <span>Reccomender: similarityArtist</span> 
                                     </Card.Title>
                                 </Card.ImgOverlay>
                             </Link>
@@ -69,7 +71,34 @@ class genreSimilarity extends Component {
                 )
             })}
         </React.Fragment>);
-    }
+    }else {
+        return (
+            <ul className="list-unstyled">{
+                this.state.items.map(item => (
+                    <Link
+                        key={item.id.videoId}
+                        as="li" className="media mx-5 my-1 suggItem"
+                        to={{
+                            pathname: `/video/${item.id.videoId}`,
+                            search: '?ref=genreSimilarity'
+                        }}>
+                        <img
+                            width={240}
+                            height={120}
+                            className="align-self-center mr-3 img-fluid"
+                            src={item.snippet.thumbnails.high.url}
+                            alt={'Thumbnail of ' + item.snippet.title}
+                        />
+                        <Media.Body>
+                            <h5>{item.snippet.title}</h5>
+                            <p> {item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}</p>
+                            <p>Reccomender: genreSimilarity</p>
+                        </Media.Body>
+                    </Link>
+                ))
+            }</ul>
+        );
+    }}
 }
 
 export default genreSimilarity;

src/reccomenders/popGlobaleAssoluta.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Col, Media, Card } 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 moment from "moment";
@@ -91,7 +91,7 @@ class popGlobaleAssoluta extends React.Component {
                     </Col>
                 </React.Fragment>
             );
-        } else {
+        } else { if (window.innerWidth < 992){
             return (
                 <React.Fragment>
                     {items.map(item => (<Col md="4">
@@ -109,7 +109,8 @@ class popGlobaleAssoluta extends React.Component {
                                 <Card.ImgOverlay>
                                     <Card.Title className="bg-dark d-inline text-white">
                                         {item.name}<br />
-                                        {item.lastSelected}
+                                        {item.lastSelected}<br />
+                                        <span>Reccomender: popGlobaleAssoluta</span>
                                     </Card.Title>
                                 </Card.ImgOverlay>
                             </Link>
@@ -118,7 +119,34 @@ class popGlobaleAssoluta extends React.Component {
 
                 </React.Fragment>
             );
-        }
+        }else {
+            return (
+                <ul className="list-unstyled">{
+                    this.state.items.map(item => (
+                        <Link
+                            key={item.videoID}
+                            as="li" className="media mx-5 my-1 suggItem"
+                            to={{
+                                pathname: `/video/${item.videoID}`,
+                                search: '?ref=popGlobaleAssoluta'
+                            }}>
+                            <img
+                                width={240}
+                                height={120}
+                                className="align-self-center mr-3 img-fluid"
+                                src={item.thumbnail}
+                                alt={'Thumbnail of ' + item.name}
+                            />
+                            <Media.Body>
+                                {item.name}<br />
+                                {item.lastSelected} <br />
+                                <p>Reccomender: popGlobaleAssoluta</p>
+                            </Media.Body>
+                        </Link>
+                    ))
+                }</ul>
+            );
+        }}
     }
 }
 

src/reccomenders/popLocaleAss.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
-import { Col, Media } from 'react-bootstrap';
+import { Col, Media, Card } from 'react-bootstrap';
 
 class popLocaleAss extends React.Component {
 
@@ -81,6 +81,7 @@ class popLocaleAss extends React.Component {
                 <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
             </Col>;
         } else {
+            if (window.innerWidth > 992){
             return (
                 <ul className="list-unstyled">{
                     this.state.items.map(item => (
@@ -101,14 +102,43 @@ class popLocaleAss extends React.Component {
                             <Media.Body>
                                 <h5>{item.name}</h5>
                                 <p>{item.description.substring(0, 200)}</p>
-                                <p>Visto: {item.timesWatched} volte <br />
+                                <p>Visto: {item.timesWatched} volt{item.timesWatched === 1 ?"a":"e"} </p>
-                                    Reccomender: popLocaleAss</p>
+                                <p> Reccomender: popLocaleAss </p>
                             </Media.Body>
                         </Link>
                     ))
                 }</ul>
             );
-        }
+        }else {return (<React.Fragment>
+            {this.state.items.map(function (item, index) {
+                return (
+                    <Col key={index} md='4'>
+                        <Card>
+                            <Link
+                                to={{
+                                    pathname: '/video/' + item.id,
+                                    search: "?ref=popLocaleAss"
+                                }}
+                            >
+                                <Card.Img
+                                    src={item.thumbnail}
+                                    alt={'Thumbnail of ' + item.name}
+                                />
+                                <Card.ImgOverlay>
+                                    <Card.Title className="bg-dark d-inline text-white">
+                                        {item.name}<br />
+                                        <span>Visto: {item.timesWatched} volt{item.timesWatched === 1 ?"a":"e"} </span><br />
+                                        <span> Reccomender: popLocaleAss </span>
+                                    </Card.Title>
+                                </Card.ImgOverlay>
+                            </Link>
+                        </Card>
+                    </Col>
+                )
+            })}
+        </React.Fragment>);
+
+        }}
     }
 }
 

src/reccomenders/popRelLoc.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
+import { Col, Card, Media } 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
 /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
@@ -84,6 +84,7 @@ class PopRelLoc extends React.Component {
 				</React.Fragment>
 			);
 		} else {
+			if (window.innerWidth < 992) {
 			return (
 				<React.Fragment>
 					{items.map(item => (
@@ -102,7 +103,8 @@ class PopRelLoc extends React.Component {
 									<Card.ImgOverlay>
 										<Card.Title className="bg-dark d-inline text-white">
 											{item.name}<br />
-											{item.lastSelected}
+											<span>Visto: {item.timesWatched} volt{item.timesWatched === 1 ?"a":"e"} </span><br />
+											<span> Reccomender: popRelLoc </span>
 										</Card.Title>
 									</Card.ImgOverlay>
 								</Link>
@@ -111,7 +113,34 @@ class PopRelLoc extends React.Component {
 						</Col>))}
 				</React.Fragment>
 			);
-		}
+		}else{
+			return (
+                <ul className="list-unstyled">{
+                    this.state.items.map(item => (
+                        <Link
+                            key={item.id.videoId}
+                            as="li" className="media mx-5 my-1 suggItem"
+                            to={{
+                                pathname: '/video/' + item.id,
+                                search: "?ref=popRelLoc"
+                            }}>
+                            <img
+                                width={240}
+                                height={120}
+                                className="align-self-center mr-3"
+                                src={item.thumbnail}
+                                alt={'Thumbnail of ' + item.name}
+                            />
+                            <Media.Body>
+                                <h5>{item.name}</h5>
+                                <p>Visto: {item.timesWatched} volt{item.timesWatched === 1 ?"a":"e"} </p>
+                                <p> Reccomender: popRelLoc </p>
+                            </Media.Body>
+                        </Link>
+                    ))
+                }</ul>
+            );
+		}}
 	}
 }
 

src/reccomenders/similarityArtist.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from 'axios';
 import { Link } from 'react-router-dom';
-import { Col, Media } from 'react-bootstrap';
+import { Col, Media, Card } from 'react-bootstrap';
 
 class similarityArtist extends React.Component {
 
@@ -82,6 +82,7 @@ class similarityArtist extends React.Component {
                 <div className="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
             </Col>;
         } else {
+            if (window.innerWidth > 992) {
             return (
                 <>
                     <h4>Artist Similarity: {this.state.artist}</h4>
@@ -111,7 +112,36 @@ class similarityArtist extends React.Component {
                     }</ul>
                 </>
             );
-        }
+        }else{
+            return (<React.Fragment>
+                {this.state.res.items.map(function (item, index) {
+                    return (
+                        <Col key={index} md='4'>
+                            <Card>
+                                <Link
+                                    to={{
+                                        pathname: '/video/' + item.id.videoId,
+                                        search: "?ref=similarityArtist"
+                                    }}
+                                >
+                                    <Card.Img
+                                        src={item.snippet.thumbnails.high.url}
+                                        alt={'Thumbnail of ' + item.snippet.title}
+                                    />
+                                    <Card.ImgOverlay>
+                                        <Card.Title className="bg-dark d-inline text-white">
+                                            {item.snippet.title}<br />
+                                            {item.snippet.channelTitle}<br />
+                                            <span>Reccomender: similarityArtist</span>
+                                        </Card.Title>
+                                    </Card.ImgOverlay>
+                                </Link>
+                            </Card>
+                        </Col>
+                    )
+                })}
+            </React.Fragment>);
+        }}
     }
 }