Archived
78 lines
3.0 KiB
JavaScript
78 lines
3.0 KiB
JavaScript
import React, { Component } from 'react';
|
|
import axios from "axios";
|
|
import createpageToken from 'youtube-page-token';
|
|
import {Card,Col} from "react-bootstrap";
|
|
import {Link} from "react-router-dom";
|
|
import moment from "moment";
|
|
|
|
class RecommenderRandom extends Component{
|
|
constructor(props){
|
|
super(props);
|
|
this.state={
|
|
items : [],
|
|
};
|
|
}
|
|
|
|
|
|
ISO_8601parse(a) {
|
|
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
|
|
}
|
|
|
|
componentDidMount(){
|
|
let pos = Math.floor(Math.random() * 500);
|
|
let pageToken = createpageToken(pos); /* createPageToken(pos) restituisce il pageToken relativo al numero
|
|
di pagina che gli viene passato(in questo caso pos) che verrai poi usato
|
|
come paramentro da axios per ottenere una determinata pagina di risultati */
|
|
|
|
axios.get("https://www.googleapis.com/youtube/v3/search", {
|
|
params: {
|
|
'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': '21',
|
|
'pageToken' : pageToken,
|
|
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // process.env.APIKEY in production
|
|
}
|
|
}).then(
|
|
response => {
|
|
this.setState({
|
|
items : response.data.items,
|
|
})
|
|
},
|
|
error => {
|
|
console.error(error);
|
|
}
|
|
)
|
|
}
|
|
|
|
render(){
|
|
const ISO_8601parse = this.ISO_8601parse;
|
|
return (<React.Fragment>
|
|
{this.state.items.map(function (item,index) {
|
|
return(
|
|
<Col key={index} md='4'>
|
|
<Card>
|
|
<Link
|
|
to={{
|
|
pathname: '/video/' + item.id.videoId,
|
|
}}
|
|
>
|
|
<Card.Img
|
|
src={item.snippet.thumbnails.high.url}
|
|
alt={'Thumbnail of ' + item.title}
|
|
/>
|
|
<Card.ImgOverlay>
|
|
<Card.Title className="bg-dark d-inline text-white">
|
|
{item.snippet.title}<br/>
|
|
{item.snippet.channelTitle} - {ISO_8601parse(item.snippet.publishedAt)}
|
|
</Card.Title>
|
|
</Card.ImgOverlay>
|
|
</Link>
|
|
</Card>
|
|
</Col>
|
|
)
|
|
})}
|
|
</React.Fragment> );
|
|
}
|
|
}
|
|
export default RecommenderRandom; |