Archived
145 lines
4.1 KiB
JavaScript
145 lines
4.1 KiB
JavaScript
//http://site1825.tw.cs.unibo.it/TW/globpop fvitali
|
|
//http://site1825.tw.cs.unibo.it/video.json originale videolist
|
|
|
|
import React from 'react';
|
|
import { Col, ListGroup, Card, CardDeck } 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"] }] */
|
|
import moment from "moment";
|
|
|
|
class fvitali extends React.Component {
|
|
state = {
|
|
error: null,
|
|
isLoaded: false,
|
|
items: [],
|
|
headers: null
|
|
};
|
|
|
|
ISO_8601parse(a) {
|
|
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
|
|
}
|
|
|
|
componentDidMount() {
|
|
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
|
|
'params':{
|
|
'id':this.props.videoID
|
|
}
|
|
}).then(
|
|
response => {
|
|
//this.shuffleArray(response.data);
|
|
console.info ('a',response.data);
|
|
this.getThumbnailsNames(response.data.recommended);
|
|
console.info(response.data.recommended);
|
|
// this.setState({
|
|
// isLoaded: true,
|
|
// items:response.data.recommended,
|
|
// });
|
|
|
|
},
|
|
// Note: it's important to handle errors here
|
|
// instead of a catch() block so that we don't swallow
|
|
// exceptions from actual bugs in components.
|
|
error => {
|
|
console.error(error);
|
|
this.setState({
|
|
isLoaded: true,
|
|
error
|
|
});
|
|
}
|
|
);
|
|
}
|
|
|
|
// METODI
|
|
getThumbnailsNames(reccomended) {
|
|
let idToLookFor = reccomended.map(item => item.videoID);
|
|
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
|
params: {
|
|
part: 'snippet',
|
|
id: idToLookFor.toString(),
|
|
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
|
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
|
|
}
|
|
})
|
|
|
|
.then(
|
|
res1 => {
|
|
res1.data.items.map(resCurrentValue =>
|
|
Object.defineProperties(
|
|
reccomended.find(videoItem => {
|
|
return videoItem.videoID === resCurrentValue.id;
|
|
}),
|
|
{
|
|
'thumbnail':
|
|
{ value: resCurrentValue.snippet.thumbnails.medium.url },
|
|
'name':
|
|
{value: resCurrentValue.snippet.title}
|
|
})
|
|
);
|
|
this.setState({
|
|
isLoaded: true,
|
|
items: reccomended
|
|
});
|
|
})
|
|
}
|
|
|
|
|
|
|
|
/*shuffleArray(videoarray) {
|
|
for (let i = videoarray.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
|
|
}
|
|
// Durstenfeld shuffle.
|
|
// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
|
|
}*/
|
|
|
|
render() {
|
|
const { error, isLoaded, items } = this.state;
|
|
if (error) {
|
|
return (
|
|
<React.Fragment>
|
|
Error: {error.message} -- Cannot get {error.config.url}
|
|
</React.Fragment>
|
|
);
|
|
} else if (!isLoaded) {
|
|
return (
|
|
<React.Fragment>
|
|
<Col>
|
|
<p className="text-center">Loading...</p>
|
|
</Col>
|
|
</React.Fragment>
|
|
);
|
|
} else {
|
|
return (
|
|
<React.Fragment>
|
|
{items.map(item=>( <Col md="4">
|
|
<Card key={item.videoID}>
|
|
<Link
|
|
to={{
|
|
pathname: '/video/' + item.videoID,
|
|
}}
|
|
>
|
|
<Card.Img
|
|
src={item.thumbnail}
|
|
alt={'Thumbnail of ' + item.name}
|
|
/>
|
|
<Card.ImgOverlay>
|
|
<Card.Title className="bg-dark d-inline text-white">
|
|
{item.name}<br/>
|
|
{item.lastSelected}
|
|
</Card.Title>
|
|
</Card.ImgOverlay>
|
|
</Link>
|
|
</Card>
|
|
</Col>))}
|
|
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
export default fvitali; |