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

Merge branch 'master' of https://bitbucket.org/sco44/tecnologiabanana

Browse Source
This commit is contained in:
Giampiero Galeazzi
2018-11-28 14:31:34 +01:00
parent bdd6308d68 89fff07523
commit f2b9bd1bfb
15 changed files with 272 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+6
View File
@@ -234,6 +234,12 @@ Il css di bootstrap va importato una volta sola nel componente che racchiude tut
- [Bootstrap 4.1 css classes](https://hackerthemes.com/bootstrap-cheatsheet)
- [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1)
- [ReactBootstrap reference](https://react-bootstrap.netlify.com/getting-started/introduction/)
- [awesome-react-bootstrap](https://github.com/Hermanya/awesome-react-bootstrap-components/blob/master/readme.md)
## React stuff
[awesome-react](https://github.com/enaqx/awesome-react) --> lista di link su react.
## YouTube video player
public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 32 KiB

src/App.css
-3
View File
@@ -1,3 +0,0 @@
.bg-black{
background-color:#000000;
}
src/App.js
+8 -5
View File
@@ -6,26 +6,29 @@ import VideoList from './VideoList'; // eslint-disable-line no-unused-vars
import TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo';
import './App.css';
import './css/App.css';
class App extends React.Component {
render() {
return (
<React.Fragment>
<Row>
<TopBar />
</Row>
<Row className="justify-content-center bg-black">
<Col xs="12" sm="6">
<Switch>
<Route path="/video/:id" component={VideoPlayer} />
<Route component={VideoPlayer} />
<Route path={["/video/:id",'']} component={VideoPlayer} />
{/* <Route component={VideoPlayer} /> */}
{/* <Route path='/search/:q/:token?' component={Search} /> */}
</Switch>
</Col>
</Row>
<Row>
<Row className='scrollable'>
<Switch>
<Route path="/video/:id" component={VideoInfo} />
<Route path={["/video/:id","/search/:query"]} component={VideoInfo} />
<Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>}/>
</Switch>
</Row>
</React.Fragment>
src/App.test.js
+2 -1
View File
@@ -1,9 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { HashRouter } from 'react-router-dom';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.render(<HashRouter><App /></HashRouter>, div);
ReactDOM.unmountComponentAtNode(div);
});
src/TopBar.js
+10 -11
View File
@@ -1,6 +1,5 @@
import React, { Component } from 'react';
import {
Row,
Navbar,
Nav,
NavDropdown,
@@ -9,7 +8,7 @@ import {
Button
} from 'react-bootstrap'; //eslint-disable-next-line
import { Link, withRouter } from 'react-router-dom';
import './TopBar.css';
import './css/TopBar.css';
// import PropTypes from "prop-types";
class TopBar extends Component {
@@ -28,14 +27,14 @@ class TopBar extends Component {
});
}
handleSubmit(event) {
alert(this.state.query);
//alert(this.state.query);
event.preventDefault();
event.target.reset();
this.props.history.push('/search/'+this.state.query);
}
render() {
return (
<Row>
<React.Fragment>
<Navbar bg="dark" className="py-0 px-1 w-100" expand="md">
<Navbar.Brand>
<Link to="/">HazeTV</Link>
@@ -43,9 +42,9 @@ class TopBar extends Component {
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home" className="text-light">Home</Nav.Link>
<Nav.Link href="#link" className="text-light">Link</Nav.Link>
<NavDropdown title="arnaldo" id="basic-nav-dropdown" >
<Link to="/" className="text-light nav-link">Home</Link>
<Link to="/link" className="text-light nav-link">link</Link>
{/* <NavDropdown title="arnaldo" id="basic-nav-dropdown" >
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">
Another action
@@ -57,7 +56,7 @@ class TopBar extends Component {
<NavDropdown.Item href="#action/3.4">
Separated link
</NavDropdown.Item>
</NavDropdown>
</NavDropdown> */}
</Nav>
<form className="form-inline" onSubmit={this.handleSubmit}>
<FormControl
@@ -70,9 +69,9 @@ class TopBar extends Component {
</form>
</Navbar.Collapse>
</Navbar>
</Row>
</React.Fragment>
);
}
}
export default TopBar;
export default withRouter(TopBar);
src/VideoInfo.js
+96 -83
View File
@@ -1,102 +1,115 @@
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Wikipedia from './Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap';
import axios from 'axios';
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap';
import axios from 'axios';
class VideoInfo extends Component {
constructor(props) {
super(props);
this.state={
error: null,
isLoaded: false,
VideoDetails: {}
};
class VideoInfo extends Component {
constructor(props) {
super(props);
this.state={
error: null,
isLoaded: false,
VideoDetails: {},
videoId: '0J2QdDbelmY'
};
}
}
// componentWillMount() {
// }
componentDidMount() {
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.props.match.params.id,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
componentWillMount() {
if(this.props.match.params.id){
if(this.props.match.params.id === this.state.videoId){}
else{
this.setState({videoId: this.props.match.params.id});
}
}).then(response => {
this.setState({
VideoDetails: response.data.items[0],
isLoaded: true});
}, error => {
console.error(error);
this.setState({
isLoaded: true,
error
}
}
componentDidMount() {
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.state.videoId,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(response => {
this.setState({
VideoDetails: response.data.items[0],
isLoaded: true});
}, error => {
console.error(error);
this.setState({
isLoaded: true,
error
});
});
});
}
}
// componentWillReceiveProps(nextProps) {
// componentWillReceiveProps(nextProps) {
// }
// }
// shouldComponentUpdate(nextProps, nextState) {
// shouldComponentUpdate(nextProps, nextState) {
// }
// }
// componentWillUpdate(nextProps, nextState) {
componentWillUpdate(nextProps, nextState) {
// console.info('nextProps',nextProps);
// console.info('nextState',nextState);
if(nextProps.match.params.id === this.state.videoId){}
else{
this.setState({videoId: nextProps.match.params.id});
}
}
// }
componentDidUpdate(prevProps, prevState) {
console.info('prevProps',prevProps);
console.info('prevState',prevState);
}
// componentDidUpdate(prevProps, prevState) {
// componentWillUnmount() {
// }
// }
// componentWillUnmount() {
// }
render() {
const { error, isLoaded, VideoDetails } = this.state;
render() {
const { error, isLoaded, VideoDetails } = this.state;
if (error) {
return (
<React.Fragment>
Error: {error.message} -- Cannot get {error.config.url}
</React.Fragment>
);
} else if (!isLoaded) {
return <React.Fragment>Loading...</React.Fragment>;
} else {
return (
<React.Fragment>
<Col className='border border-dark' lg={{span:7}}>
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
<Tab eventKey="a" title="A">
<Wikipedia query={ VideoDetails.snippet.title } />
</Tab>
<Tab eventKey="b" title="B">
<p>B</p>
</Tab>
<Tab eventKey="c" title="C">
<p>C</p>
</Tab>
</Tabs>
</Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>
</Col>
</React.Fragment>
);
return (
<React.Fragment>
Error: {error.message} -- Cannot get {error.config.url}
</React.Fragment>
);
} else if (!isLoaded) {
return <React.Fragment>Loading...</React.Fragment>;
} else {
return (
<React.Fragment>
<Col className='border border-dark' lg={{span:7}}>
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
<Tab eventKey="a" title="A">
<Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
</Tab>
<Tab eventKey="b" title="B">
<p>{}</p>
</Tab>
<Tab eventKey="c" title="C">
<p>C</p>
</Tab>
</Tabs>
</Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>
</Col>
</React.Fragment>
);
}
}
}
}
}
VideoInfo.propTypes = {
VideoInfo.propTypes = {
};
};
export default VideoInfo;
export default VideoInfo;
src/VideoList.js
+65 -62
View File
@@ -2,6 +2,7 @@ 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
import './css/VideoList.css';
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
class VideoList extends React.Component {
@@ -13,16 +14,14 @@ class VideoList extends React.Component {
items: [],
headers: null
};
this.getThumbnails = this.getThumbnails.bind(this);
}
componentDidMount() {
axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
response => {
this.shuffleArray(response.data);
this.setState({
headers: response.config
});
return this.getThumbnails(response.data);
this.getThumbnails(response.data);
},
// Note: it's important to handle errors here
// instead of a catch() block so that we don't swallow
@@ -37,58 +36,7 @@ class VideoList extends React.Component {
);
}
render() {
const { error, isLoaded, items, headers } = this.state;
if (error) {
return (
<React.Fragment>
Error: {error.message} -- Cannot get {error.config.url}
</React.Fragment>
);
} else if (!isLoaded) {
return <React.Fragment>Loading...</React.Fragment>;
} else {
return (
<React.Fragment>
<Col className="my-2" xs="12" sm="12">
<code>
Url loaded: <span className="bg-dark">{headers.url}</span>
</code>
<br />
<code>Total videos: {items.length}</code>
</Col>
{items.map(item => (
<Col key={item.videoID} lg="4" md="6">
<Card className="my-1">
<Link to={{ pathname: '/video/' + item.videoID }}>
<ListGroup>
<ListGroup.Item className="bg-secondary text-white">
{item.artist} - {item.title}
</ListGroup.Item>
<ListGroup.Item>
<span className="bg-info text-white">
{' '}
{item.videoID}
</span>{' '}
{item.category}
</ListGroup.Item>
</ListGroup>
</Link>
</Card>
</Col>
))}
</React.Fragment>
);
}
}
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
}
// METODI
getThumbnails(videoItems) {
let idToLookFor = videoItems.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100;
@@ -129,7 +77,7 @@ class VideoList extends React.Component {
res2.data.items,
res3.data.items
);
allres.forEach(resCurrentValue => {
allres.map(resCurrentValue => {
Object.defineProperty(
videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id;
@@ -138,13 +86,68 @@ class VideoList extends React.Component {
{ value: resCurrentValue.snippet.thumbnails.medium.url }
);
});
this.setState({
isLoaded: true,
items: videoItems
});
})
);
return this.setState({
isLoaded: true,
items: videoItems
});
}
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, headers } = 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 key={item.videoID} lg={{ span: 3 }} md="6">
<Card className="my-1 carta">
<Link to={{
pathname: '/video/' + item.videoID,
state: {
artist: item.artist,
title: item.title +' '+ item.artist
}
}}>
{/* {item.artist} - {item.title} {item.videoID} {item.category} */}
<Card.Img src={item.thumbnail} alt={'Thumbnail of '+item.title } />
<Card.ImgOverlay>
<Card.Title className="bg-dark d-inline text-white">
{item.artist} - {item.title}
</Card.Title>
<p className='d-table d-lg-none card-text bg-dark text-white'>{item.category}</p>
</Card.ImgOverlay>
</Link>
</Card>
</Col>
))}
</React.Fragment>
);
}
}
}
export default VideoList;
export default VideoList;
src/VideoPlayer.js
+29 -7
View File
@@ -1,5 +1,6 @@
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import YouTube from 'react-youtube'; // eslint-disable-line no-unused-vars
import { stringify } from 'querystring';
/* eslint no-console: ["error", { allow: ["info", "error"] }] */
class VideoPlayer extends Component {
@@ -14,21 +15,35 @@ class VideoPlayer extends Component {
autoplay: 0,
modestbranding: 1
}
}
},
videoId: '0J2QdDbelmY'
};
}
componentWillUpdate(nextProps, nextState){
if(nextProps.match.params.id === this.props.match.params.id){}
else{
this.setState((state, props) => { return { videoId: props.match.params.id }});
}
}
componentWillMount(){
if(this.props.match.params.id)
this.setState((state, props) => { return { videoId: props.match.params.id }});
}
render() {
return (
<React.Fragment>
<YouTube
opts={this.state.opt}
videoId={
this.props.match.params.id ? this.props.match.params.id : '3AVWJzHvhFE' // or null
}
// this.props.match.params.id
videoId={this.state.videoId}
onReady={this._onReady}
onPlay={this._onPlay}
onError={this._onError}
onStateChange={this._onStateChange}
className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9"
/>
@@ -40,16 +55,23 @@ class VideoPlayer extends Component {
// console.error(event);
}
_onPlay(event) {
console.info('on play',event.target.getDuration(), event);
// console.info('on play',event.target.getCurrentTime(), event);
// console.info(event.target.getApiInterface());
// console.warn(event.target.getDuration());
// console.info('go');
// while(event.target.getCurrentTime() < 15){}
// console.info(event.target.getCurrentTime());
}
_onReady(event) {
// access to player in all event handlers via event.target
//event.target.pauseVideo();
console.info('on ready', event);
// event.target.pauseVideo();
// console.info('on ready', event);
// console.warn(event);
// console.warn(event.target.getDuration());
}
_onStateChange(event) {
// console.info('statechange: ', event.data)
}
}
export default VideoPlayer;
src/Suggestion.js → src/areainfo/Suggestion.js
View File
src/Wikipedia.js → src/areainfo/Wikipedia.js
+23 -6
View File
@@ -6,25 +6,42 @@ class Wikipedia extends Component {
constructor(props) {
super(props);
this.state = {
data : {},
data: {},
infobox: {},
error: null,
isLoaded: false
};
this.getWikiBox = this.getWikiBox.bind(this);
this.raffina = this.raffina.bind(this);
}
getWikiBox(name){
wikijs()
.page(name)
.then(page => page.fullInfo())
.then(infobox => console.log('infobox', infobox)
//this.setState({ infobox })
);
//console.log('infobox', this.state.infobox)
}
raffina(results){
console.log('raffina',results);
return results[0];
}
// componentWillMount() {
// }
componentDidMount() {
wikijs().search(this.props.query,1).then(data => {
componentWillMount() {
wikijs().find(this.props.query, this.raffina).then(data => {
this.setState({
data,
isLoaded: true
});
console.log(data);
console.log(data.html());
//this.getWikiBox(data.results[0]);
}, error => {
console.error(error);
this.setState({
@@ -67,7 +84,7 @@ class Wikipedia extends Component {
} else {
return (
<div>
<p>risultato ricerca wikipedia: { data.results[0] }</p>
{/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
</div>
);
}
src/css/App.css
+9
View File
@@ -0,0 +1,9 @@
.bg-black{
background-color:#000000;
}
.scrollable{
overflow: auto !important;
height: 40vh;
margin-top: 2vh;
}
src/TopBar.css → src/css/TopBar.css
View File
src/css/VideoList.css
+2
View File
@@ -0,0 +1,2 @@
.carta :hover{
}
src/reccomenders/fvitali.js
+22
View File
@@ -0,0 +1,22 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
axios.get('http://site1825.tw.cs.unibo.it/TW/globpop',
{
id: videoID // variabile con videoid
})
.then(
response => { // notazione moderna javascript per indicare function(response){}
// function(response){} == response => {}
console.log(response);
console.info(response.data);
},
// 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);
}
);
export default fvitali;