sco/tecnologiabanana
Archived
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

sistemata la visualizzazione video pc/cell

Browse Source
This commit is contained in:
Gregorio
2019-03-03 22:38:22 +01:00
parent 0d28e4f5a6
commit a06540c03b
10 changed files with 289 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/reccomenders/Random.js
+32 -3
View File
@@ -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
+30 -3
View File
@@ -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
+32 -3
View File
@@ -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
+30 -2
View File
@@ -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
+3 -3
View File
@@ -100,9 +100,9 @@ class fvitali extends React.Component {
/>
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
<p>{item.name}</p>
<p className='small'>{item.lastSelected}</p>
<p className='small'>Reccomender: fvitali</p>
<span>{item.name}</span> <br/>
<span>{item.lastSelected}</span> <br/>
<span>Reccomender: fvitali</span>
</Card.Title>
</Card.ImgOverlay>
</Link>
src/reccomenders/genreSimilarity.js
+32 -3
View File
@@ -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
+32 -4
View File
@@ -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
+34 -4
View File
@@ -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 />
Reccomender: popLocaleAss</p>
<p>Visto: {item.timesWatched} volt{item.timesWatched === 1 ?"a":"e"} </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
+32 -3
View File
@@ -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
+32 -2
View File
@@ -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>);
}}
}
}