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

merged

Browse Source
This commit is contained in:
matteo
2019-02-11 18:30:29 +01:00
parent aa575bc9cc d0ce052bc4
commit ccde79f4c4
8 changed files with 79 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/TopBar.js
+2 -3
View File
@@ -37,11 +37,10 @@ class TopBar extends Component {
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> <Nav className="mr-auto">
<Link to="/" className="text-light nav-link">Home</Link> <Link to="/" className="text-light nav-link">Home</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/vitali` }} <Link to={{ pathname: `/video/${localStorage['lastId']}/vitali` }} className="text-light nav-link">Vitali</Link>
className="text-light nav-link">Vitali</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/recent` }} className="text-light nav-link">Recent</Link> <Link to={{ pathname: `/video/${localStorage['lastId']}/recent` }} className="text-light nav-link">Recent</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/random` }} className="text-light nav-link">Random</Link> <Link to={{ pathname: `/video/${localStorage['lastId']}/random` }} className="text-light nav-link">Random</Link>
<Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link> <Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
{ <NavDropdown title="Similarity" id="basic-nav-dropdown" > { <NavDropdown title="Similarity" id="basic-nav-dropdown" >
<NavDropdown.Item href="#action/3.1"> <NavDropdown.Item href="#action/3.1">
Artist Artist
src/VideoPlayer.js
+5
View File
@@ -91,11 +91,16 @@ class VideoPlayer extends React.Component {
error => console.info(error, videoIdWatched.toString()) error => console.info(error, videoIdWatched.toString())
); );
// local storage logic for recent reccomender // local storage logic for recent reccomender
// let temp=localStorage.getItem('lastWatched');
// temp.push({id: videoIdWatched.toString(), date: new Date})
//.finally(()=>{}) //.finally(()=>{})
clearInterval(timerId1); clearInterval(timerId1);
}, },
error => console.error(error) error => console.error(error)
) )
.finally(() => this.setState({ promise1: null, outsideReject1: null })); .finally(() => this.setState({ promise1: null, outsideReject1: null }));
break; break;
case 5: case 5:
src/areainfo/Suggestion.js
+2 -2
View File
@@ -33,7 +33,7 @@ class Suggestion extends Component {
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<Col xs="10"> <Row>
<Switch> <Switch>
<Route path='/video/:id/vitali' component={fvitali} /> <Route path='/video/:id/vitali' component={fvitali} />
<Route path='/search/:query' component={Search} /> <Route path='/search/:query' component={Search} />
@@ -41,7 +41,7 @@ class Suggestion extends Component {
{/* lasciare questo per ultimo */} {/* lasciare questo per ultimo */}
<Route component={Related} /> <Route component={Related} />
</Switch> </Switch>
</Col> </Row>
</React.Fragment> </React.Fragment>
); );
} }
src/index.js
+3
View File
@@ -6,5 +6,8 @@ import App from './App';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
let lastWatchedList=[];
localStorage.setItem('lastWatched', lastWatchedList)
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root')); ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker(); registerServiceWorker();
src/reccomenders/Random.js
+5 -9
View File
@@ -1,8 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import axios from "axios"; import axios from "axios";
import createpageToken from 'youtube-page-token'; import createpageToken from 'youtube-page-token';
import {Card} from "react-bootstrap"; import {Card,Col} from "react-bootstrap";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import moment from "moment"; import moment from "moment";
@@ -48,11 +47,10 @@ class RecommenderRandom extends Component{
render(){ render(){
const ISO_8601parse = this.ISO_8601parse; const ISO_8601parse = this.ISO_8601parse;
return ( return (<React.Fragment>
<div style={{width: '100rem',height:'100rem'}}>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item,index) {
return( return(
<div key={index} style={{margin: '1rem',float: 'left'}}> <Col key={index} md='4'>
<Card> <Card>
<Link <Link
to={{ to={{
@@ -62,7 +60,6 @@ class RecommenderRandom extends Component{
<Card.Img <Card.Img
src={item.snippet.thumbnails.high.url} src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.title} alt={'Thumbnail of ' + item.title}
style={{width:'30rem',height:'20rem'}}
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
@@ -72,11 +69,10 @@ class RecommenderRandom extends Component{
</Card.ImgOverlay> </Card.ImgOverlay>
</Link> </Link>
</Card> </Card>
</div> </Col>
) )
})} })}
</div> </React.Fragment> );
);
} }
} }
export default RecommenderRandom; export default RecommenderRandom;
src/reccomenders/Recent.js
View File
src/reccomenders/Related.js
+5 -6
View File
@@ -1,7 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import axios from 'axios'; import axios from 'axios';
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import {Card} from "react-bootstrap"; import {Card,Col} from "react-bootstrap";
import moment from "moment"; import moment from "moment";
@@ -58,10 +58,10 @@ class Related extends Component {
render() { render() {
const ISO_8601parse = this.ISO_8601parse; const ISO_8601parse = this.ISO_8601parse;
return ( return (
<div style={{width: '100rem',height:'100rem'}}> <React.Fragment>
{this.state.items.map(function (item,index) { {this.state.items.map(function (item,index) {
return( return(
<div key={index} style={{margin: '1rem',float: 'left'}}> <Col key={index} md="4">
<Card> <Card>
<Link <Link
to={{ to={{
@@ -71,7 +71,6 @@ class Related extends Component {
<Card.Img <Card.Img
src={item.snippet.thumbnails.high.url} src={item.snippet.thumbnails.high.url}
alt={'Thumbnail of ' + item.title} alt={'Thumbnail of ' + item.title}
style={{width:'30rem',height:'20rem'}}
/> />
<Card.ImgOverlay> <Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white"> <Card.Title className="bg-dark d-inline text-white">
@@ -82,10 +81,10 @@ class Related extends Component {
</Card.ImgOverlay> </Card.ImgOverlay>
</Link> </Link>
</Card> </Card>
</div> </Col>
) )
})} })}
</div> </React.Fragment>
); );
} }
} }
src/reccomenders/fvitali.js
+56 -56
View File
@@ -6,18 +6,19 @@ import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disa
import axios from 'axios'; // 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 { Link } from 'react-router-dom'; // eslint-disable-line no-unused-vars
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */ /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
import moment from "moment";
class fvitali extends React.Component { class fvitali extends React.Component {
constructor(props) { state = {
super(props);
this.state = {
error: null, error: null,
isLoaded: false, isLoaded: false,
items: [], items: [],
headers: null headers: null
}; };
this.getThumbnails = this.getThumbnails.bind(this);
} ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
}
componentDidMount() { componentDidMount() {
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', { axios.get('http://site1825.tw.cs.unibo.it/TW/globpop', {
@@ -27,12 +28,14 @@ class fvitali extends React.Component {
}).then( }).then(
response => { response => {
//this.shuffleArray(response.data); //this.shuffleArray(response.data);
//this.getThumbnails(response.data);
console.info ('a',response.data); console.info ('a',response.data);
this.setState({ this.getThumbnailsNames(response.data.recommended);
isLoaded: true, console.info(response.data.recommended);
items:response.data, // this.setState({
}); // isLoaded: true,
// items:response.data.recommended,
// });
}, },
// Note: it's important to handle errors here // Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow // instead of a catch() block so that we don't swallow
@@ -48,73 +51,51 @@ class fvitali extends React.Component {
} }
// METODI // METODI
getThumbnails(videoItems) { getThumbnailsNames(reccomended) {
let idToLookFor = videoItems.map(item => item.videoID); let idToLookFor = reccomended.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100;
axios
.all([
// chain 3 parallel get
axios.get('https://www.googleapis.com/youtube/v3/videos', { axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: { params: {
part: 'snippet', part: 'snippet',
id: idToLookFor.slice(0, 50).toString(), id: idToLookFor.toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium)' fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
}
}),
axios.get('https://www.googleapis.com/youtube/v3/videos', {
//chain multiple get into promises
params: {
part: 'snippet',
id: idToLookFor.slice(50, 100).toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium)'
}
}),
axios.get('https://www.googleapis.com/youtube/v3/videos', {
//chain multiple get into promises
params: {
part: 'snippet',
id: idToLookFor.slice(100, finalChunk).toString(),
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
fields: 'items(id,snippet/thumbnails/medium)'
} }
}) })
])
.then( .then(
axios.spread((res1, res2, res3) => { res1 => {
let allres = [].concat( res1.data.items.map(resCurrentValue => {
res1.data.items, Object.defineProperties(
res2.data.items, reccomended.find(videoItem => {
res3.data.items
);
allres.map(resCurrentValue => {
Object.defineProperty(
videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id; return videoItem.videoID === resCurrentValue.id;
}), }),
'thumbnail', {
{ value: resCurrentValue.snippet.thumbnails.medium.url } 'thumbnail':
); { value: resCurrentValue.snippet.thumbnails.medium.url },
'name':
{value: resCurrentValue.snippet.title}
});
}); });
this.setState({ this.setState({
isLoaded: true, isLoaded: true,
items: videoItems items: reccomended
}); });
}) })
);
} }
shuffleArray(videoarray) {
/*shuffleArray(videoarray) {
for (let i = videoarray.length - 1; i > 0; i--) { for (let i = videoarray.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); const j = Math.floor(Math.random() * (i + 1));
[videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign [videoarray[i], videoarray[j]] = [videoarray[j], videoarray[i]]; // eslint-disable-line no-param-reassign
} }
// Durstenfeld shuffle. // Durstenfeld shuffle.
// https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm // https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm
} }*/
render() { render() {
const ISO_8601parse = this.ISO_8601parse;
const { error, isLoaded, items, headers } = this.state; const { error, isLoaded, items, headers } = this.state;
if (error) { if (error) {
return ( return (
@@ -133,8 +114,26 @@ class fvitali extends React.Component {
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
{items.reccomender}{items.site}{items.lastWatched} {items.map(item=>( <Col md="4">
{items.recommended.map(raccomandato=>(<li>{raccomandato.videoID.toString()}</li>))} <Card>
<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> </React.Fragment>
); );
@@ -142,5 +141,6 @@ class fvitali extends React.Component {
} }
} }
export default fvitali;
export default fvitali;