Archived
merged
This commit is contained in:
+1
-2
@@ -37,8 +37,7 @@ class TopBar extends Component {
|
||||
<Navbar.Collapse id="basic-navbar-nav">
|
||||
<Nav className="mr-auto">
|
||||
<Link to="/" className="text-light nav-link">Home</Link>
|
||||
<Link to={{ pathname: `/video/${localStorage['lastId']}/vitali` }}
|
||||
className="text-light nav-link">Vitali</Link>
|
||||
<Link to={{ pathname: `/video/${localStorage['lastId']}/vitali` }} 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']}/random` }} className="text-light nav-link">Random</Link>
|
||||
<Link to={{ pathname: `/video/${localStorage['lastId']}/related` }} className="text-light nav-link">Related</Link>
|
||||
|
||||
@@ -91,11 +91,16 @@ class VideoPlayer extends React.Component {
|
||||
error => console.info(error, videoIdWatched.toString())
|
||||
);
|
||||
// local storage logic for recent reccomender
|
||||
// let temp=localStorage.getItem('lastWatched');
|
||||
// temp.push({id: videoIdWatched.toString(), date: new Date})
|
||||
|
||||
|
||||
//.finally(()=>{})
|
||||
clearInterval(timerId1);
|
||||
},
|
||||
error => console.error(error)
|
||||
)
|
||||
|
||||
.finally(() => this.setState({ promise1: null, outsideReject1: null }));
|
||||
break;
|
||||
case 5:
|
||||
|
||||
@@ -33,7 +33,7 @@ class Suggestion extends Component {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Col xs="10">
|
||||
<Row>
|
||||
<Switch>
|
||||
<Route path='/video/:id/vitali' component={fvitali} />
|
||||
<Route path='/search/:query' component={Search} />
|
||||
@@ -41,7 +41,7 @@ class Suggestion extends Component {
|
||||
{/* lasciare questo per ultimo */}
|
||||
<Route component={Related} />
|
||||
</Switch>
|
||||
</Col>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,5 +6,8 @@ import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
|
||||
|
||||
let lastWatchedList=[];
|
||||
localStorage.setItem('lastWatched', lastWatchedList)
|
||||
|
||||
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import axios from "axios";
|
||||
import createpageToken from 'youtube-page-token';
|
||||
import {Card} from "react-bootstrap";
|
||||
import {Card,Col} from "react-bootstrap";
|
||||
import {Link} from "react-router-dom";
|
||||
import moment from "moment";
|
||||
|
||||
@@ -48,11 +47,10 @@ class RecommenderRandom extends Component{
|
||||
|
||||
render(){
|
||||
const ISO_8601parse = this.ISO_8601parse;
|
||||
return (
|
||||
<div style={{width: '100rem',height:'100rem'}}>
|
||||
return (<React.Fragment>
|
||||
{this.state.items.map(function (item,index) {
|
||||
return(
|
||||
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
||||
<Col key={index} md='4'>
|
||||
<Card>
|
||||
<Link
|
||||
to={{
|
||||
@@ -62,7 +60,6 @@ class RecommenderRandom extends Component{
|
||||
<Card.Img
|
||||
src={item.snippet.thumbnails.high.url}
|
||||
alt={'Thumbnail of ' + item.title}
|
||||
style={{width:'30rem',height:'20rem'}}
|
||||
/>
|
||||
<Card.ImgOverlay>
|
||||
<Card.Title className="bg-dark d-inline text-white">
|
||||
@@ -72,11 +69,10 @@ class RecommenderRandom extends Component{
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
</React.Fragment> );
|
||||
}
|
||||
}
|
||||
export default RecommenderRandom;
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { Component } from 'react';
|
||||
import axios from 'axios';
|
||||
import {Link} from "react-router-dom";
|
||||
import {Card} from "react-bootstrap";
|
||||
import {Card,Col} from "react-bootstrap";
|
||||
import moment from "moment";
|
||||
|
||||
|
||||
@@ -58,10 +58,10 @@ class Related extends Component {
|
||||
render() {
|
||||
const ISO_8601parse = this.ISO_8601parse;
|
||||
return (
|
||||
<div style={{width: '100rem',height:'100rem'}}>
|
||||
<React.Fragment>
|
||||
{this.state.items.map(function (item,index) {
|
||||
return(
|
||||
<div key={index} style={{margin: '1rem',float: 'left'}}>
|
||||
<Col key={index} md="4">
|
||||
<Card>
|
||||
<Link
|
||||
to={{
|
||||
@@ -71,7 +71,6 @@ class Related extends Component {
|
||||
<Card.Img
|
||||
src={item.snippet.thumbnails.high.url}
|
||||
alt={'Thumbnail of ' + item.title}
|
||||
style={{width:'30rem',height:'20rem'}}
|
||||
/>
|
||||
<Card.ImgOverlay>
|
||||
<Card.Title className="bg-dark d-inline text-white">
|
||||
@@ -82,10 +81,10 @@ class Related extends Component {
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</div>
|
||||
</Col>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+55
-55
@@ -6,17 +6,18 @@ import { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disa
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
state = {
|
||||
error: null,
|
||||
isLoaded: false,
|
||||
items: [],
|
||||
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() {
|
||||
@@ -27,12 +28,14 @@ class fvitali extends React.Component {
|
||||
}).then(
|
||||
response => {
|
||||
//this.shuffleArray(response.data);
|
||||
//this.getThumbnails(response.data);
|
||||
console.info ('a',response.data);
|
||||
this.setState({
|
||||
isLoaded: true,
|
||||
items: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
|
||||
@@ -48,73 +51,51 @@ class fvitali extends React.Component {
|
||||
}
|
||||
|
||||
// METODI
|
||||
getThumbnails(videoItems) {
|
||||
let idToLookFor = videoItems.map(item => item.videoID);
|
||||
let finalChunk = (videoItems.length % 50) + 100;
|
||||
axios
|
||||
.all([
|
||||
// chain 3 parallel get
|
||||
getThumbnailsNames(reccomended) {
|
||||
let idToLookFor = reccomended.map(item => item.videoID);
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.slice(0, 50).toString(),
|
||||
id: idToLookFor.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(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)'
|
||||
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
|
||||
}
|
||||
})
|
||||
])
|
||||
|
||||
.then(
|
||||
axios.spread((res1, res2, res3) => {
|
||||
let allres = [].concat(
|
||||
res1.data.items,
|
||||
res2.data.items,
|
||||
res3.data.items
|
||||
);
|
||||
allres.map(resCurrentValue => {
|
||||
Object.defineProperty(
|
||||
videoItems.find(videoItem => {
|
||||
res1 => {
|
||||
res1.data.items.map(resCurrentValue => {
|
||||
Object.defineProperties(
|
||||
reccomended.find(videoItem => {
|
||||
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({
|
||||
isLoaded: true,
|
||||
items: videoItems
|
||||
items: reccomended
|
||||
});
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
shuffleArray(videoarray) {
|
||||
|
||||
|
||||
/*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 ISO_8601parse = this.ISO_8601parse;
|
||||
const { error, isLoaded, items, headers } = this.state;
|
||||
if (error) {
|
||||
return (
|
||||
@@ -133,8 +114,26 @@ class fvitali extends React.Component {
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{items.reccomender}{items.site}{items.lastWatched}
|
||||
{items.recommended.map(raccomandato=>(<li>{raccomandato.videoID.toString()}</li>))}
|
||||
{items.map(item=>( <Col md="4">
|
||||
<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>
|
||||
);
|
||||
@@ -142,5 +141,6 @@ class fvitali extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default fvitali;
|
||||
|
||||
|
||||
export default fvitali;
|
||||
Reference in New Issue
Block a user