Archived
Recent Reccomender
This commit is contained in:
@@ -6,6 +6,7 @@ import Related from '../reccomenders/Related';
|
||||
import Search from '../reccomenders/Search';
|
||||
import fvitali from '../reccomenders/fvitali';
|
||||
import popGlobaleAssoluta from '../reccomenders/popGlobaleAssoluta';
|
||||
import Recent from '../reccomenders/Recent';
|
||||
|
||||
// and so on..
|
||||
|
||||
@@ -40,6 +41,8 @@ class Suggestion extends Component {
|
||||
<Route path='/search/:query' component={Search} />
|
||||
<Route path='/video/:id/random' component={Random} />
|
||||
<Route path='/video/:id/popGlobalAssoluta' component={popGlobaleAssoluta} />
|
||||
<Route path='/video/:id/recent' component={Recent} />
|
||||
|
||||
{/* lasciare questo per ultimo */}
|
||||
<Route component={Related} />
|
||||
</Switch>
|
||||
|
||||
@@ -0,0 +1,146 @@
|
||||
//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 Recent 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.id
|
||||
// }
|
||||
// }).then(
|
||||
// response => {
|
||||
// //this.shuffleArray(response.data);
|
||||
// console.info ('a',response.data);
|
||||
this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')) );
|
||||
// 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(recentVideoList) {
|
||||
let idToLookFor = recentVideoList.map(item => item.id);
|
||||
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(
|
||||
recentVideoList.find(videoItem => {
|
||||
return videoItem.id === resCurrentValue.id;
|
||||
}),
|
||||
{
|
||||
'thumbnail':
|
||||
{ value: resCurrentValue.snippet.thumbnails.medium.url },
|
||||
'name':
|
||||
{value: resCurrentValue.snippet.title}
|
||||
})
|
||||
);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
items: recentVideoList
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*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 recentVideoList = JSON.parse(localStorage.getItem('lastWatched'))
|
||||
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.id}>
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/video/' + item.id,
|
||||
}}
|
||||
>
|
||||
<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 Recent;
|
||||
@@ -64,7 +64,7 @@ class fvitali extends React.Component {
|
||||
|
||||
.then(
|
||||
res1 => {
|
||||
res1.data.items.map(resCurrentValue => {
|
||||
res1.data.items.map(resCurrentValue =>
|
||||
Object.defineProperties(
|
||||
reccomended.find(videoItem => {
|
||||
return videoItem.videoID === resCurrentValue.id;
|
||||
@@ -74,8 +74,8 @@ class fvitali extends React.Component {
|
||||
{ value: resCurrentValue.snippet.thumbnails.medium.url },
|
||||
'name':
|
||||
{value: resCurrentValue.snippet.title}
|
||||
});
|
||||
});
|
||||
})
|
||||
);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
items: reccomended
|
||||
@@ -95,8 +95,7 @@ class fvitali extends React.Component {
|
||||
}*/
|
||||
|
||||
render() {
|
||||
const ISO_8601parse = this.ISO_8601parse;
|
||||
const { error, isLoaded, items, headers } = this.state;
|
||||
const { error, isLoaded, items } = this.state;
|
||||
if (error) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
@@ -115,7 +114,7 @@ class fvitali extends React.Component {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{items.map(item=>( <Col md="4">
|
||||
<Card>
|
||||
<Card key={item.videoID}>
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/video/' + item.videoID,
|
||||
|
||||
Reference in New Issue
Block a user