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 css classes](https://hackerthemes.com/bootstrap-cheatsheet)
- [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1) - [Bootstrap 4.1 site](https://getbootstrap.com/docs/4.1)
- [ReactBootstrap reference](https://react-bootstrap.netlify.com/getting-started/introduction/) - [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 ## 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 TopBar from './TopBar'; // eslint-disable-line no-unused-vars
import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars import VideoPlayer from './VideoPlayer'; // eslint-disable-line no-unused-vars
import VideoInfo from './VideoInfo'; import VideoInfo from './VideoInfo';
import './App.css'; import './css/App.css';
class App extends React.Component { class App extends React.Component {
render() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<Row>
<TopBar /> <TopBar />
</Row>
<Row className="justify-content-center bg-black"> <Row className="justify-content-center bg-black">
<Col xs="12" sm="6"> <Col xs="12" sm="6">
<Switch> <Switch>
<Route path="/video/:id" component={VideoPlayer} /> <Route path={["/video/:id",'']} component={VideoPlayer} />
<Route component={VideoPlayer} /> {/* <Route component={VideoPlayer} /> */}
{/* <Route path='/search/:q/:token?' component={Search} /> */} {/* <Route path='/search/:q/:token?' component={Search} /> */}
</Switch> </Switch>
</Col> </Col>
</Row> </Row>
<Row> <Row className='scrollable'>
<Switch> <Switch>
<Route path="/video/:id" component={VideoInfo} /> <Route path={["/video/:id","/search/:query"]} component={VideoInfo} />
<Route exact path='/' component={VideoList} /> <Route exact path='/' component={VideoList} />
<Route render={() => <div>URL not found</div>}/>
</Switch> </Switch>
</Row> </Row>
</React.Fragment> </React.Fragment>
src/App.test.js
+2 -1
View File
@@ -1,9 +1,10 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import App from './App'; import App from './App';
import { HashRouter } from 'react-router-dom';
it('renders without crashing', () => { it('renders without crashing', () => {
const div = document.createElement('div'); const div = document.createElement('div');
ReactDOM.render(<App />, div); ReactDOM.render(<HashRouter><App /></HashRouter>, div);
ReactDOM.unmountComponentAtNode(div); ReactDOM.unmountComponentAtNode(div);
}); });
src/TopBar.js
+10 -11
View File
@@ -1,6 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import {
Row,
Navbar, Navbar,
Nav, Nav,
NavDropdown, NavDropdown,
@@ -9,7 +8,7 @@ import {
Button Button
} from 'react-bootstrap'; //eslint-disable-next-line } from 'react-bootstrap'; //eslint-disable-next-line
import { Link, withRouter } from 'react-router-dom'; import { Link, withRouter } from 'react-router-dom';
import './TopBar.css'; import './css/TopBar.css';
// import PropTypes from "prop-types"; // import PropTypes from "prop-types";
class TopBar extends Component { class TopBar extends Component {
@@ -28,14 +27,14 @@ class TopBar extends Component {
}); });
} }
handleSubmit(event) { handleSubmit(event) {
alert(this.state.query); //alert(this.state.query);
event.preventDefault(); event.preventDefault();
event.target.reset(); event.target.reset();
this.props.history.push('/search/'+this.state.query);
} }
render() { render() {
return ( return (
<Row> <React.Fragment>
<Navbar bg="dark" className="py-0 px-1 w-100" expand="md"> <Navbar bg="dark" className="py-0 px-1 w-100" expand="md">
<Navbar.Brand> <Navbar.Brand>
<Link to="/">HazeTV</Link> <Link to="/">HazeTV</Link>
@@ -43,9 +42,9 @@ class TopBar extends Component {
<Navbar.Toggle aria-controls="basic-navbar-nav" /> <Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav"> <Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto"> <Nav className="mr-auto">
<Nav.Link href="#home" className="text-light">Home</Nav.Link> <Link to="/" className="text-light nav-link">Home</Link>
<Nav.Link href="#link" className="text-light">Link</Nav.Link> <Link to="/link" className="text-light nav-link">link</Link>
<NavDropdown title="arnaldo" id="basic-nav-dropdown" > {/* <NavDropdown title="arnaldo" id="basic-nav-dropdown" >
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item> <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2"> <NavDropdown.Item href="#action/3.2">
Another action Another action
@@ -57,7 +56,7 @@ class TopBar extends Component {
<NavDropdown.Item href="#action/3.4"> <NavDropdown.Item href="#action/3.4">
Separated link Separated link
</NavDropdown.Item> </NavDropdown.Item>
</NavDropdown> </NavDropdown> */}
</Nav> </Nav>
<form className="form-inline" onSubmit={this.handleSubmit}> <form className="form-inline" onSubmit={this.handleSubmit}>
<FormControl <FormControl
@@ -70,9 +69,9 @@ class TopBar extends Component {
</form> </form>
</Navbar.Collapse> </Navbar.Collapse>
</Navbar> </Navbar>
</Row> </React.Fragment>
); );
} }
} }
export default TopBar; export default withRouter(TopBar);
src/VideoInfo.js
+95 -82
View File
@@ -1,102 +1,115 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
// import PropTypes from 'prop-types'; // import PropTypes from 'prop-types';
import Wikipedia from './Wikipedia'; import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap'; import { Col, Tabs, Tab } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
class VideoInfo extends Component { class VideoInfo extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state={ this.state={
error: null, error: null,
isLoaded: false, isLoaded: false,
VideoDetails: {} VideoDetails: {},
}; videoId: '0J2QdDbelmY'
};
} }
// componentWillMount() { componentWillMount() {
if(this.props.match.params.id){
// } if(this.props.match.params.id === this.state.videoId){}
else{
componentDidMount() { this.setState({videoId: this.props.match.params.id});
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.props.match.params.id,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}).then(response => { }
this.setState({ }
VideoDetails: response.data.items[0],
isLoaded: true}); componentDidMount() {
}, error => { axios.get('https://www.googleapis.com/youtube/v3/videos', {
console.error(error); params: {
this.setState({ 'part': 'snippet,contentDetails,statistics,topicDetails',
isLoaded: true, 'id': this.state.videoId,
error '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) { componentDidUpdate(prevProps, prevState) {
console.info('prevProps',prevProps);
console.info('prevState',prevState);
}
// } // componentWillUnmount() {
// componentWillUnmount() { // }
// } render() {
const { error, isLoaded, VideoDetails } = this.state;
render() {
const { error, isLoaded, VideoDetails } = this.state;
if (error) { if (error) {
return ( return (
<React.Fragment> <React.Fragment>
Error: {error.message} -- Cannot get {error.config.url} Error: {error.message} -- Cannot get {error.config.url}
</React.Fragment> </React.Fragment>
); );
} else if (!isLoaded) { } else if (!isLoaded) {
return <React.Fragment>Loading...</React.Fragment>; return <React.Fragment>Loading...</React.Fragment>;
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
<Col className='border border-dark' lg={{span:7}}> <Col className='border border-dark' lg={{span:7}}>
{/* codice per tabs reccomenders */} {/* codice per tabs reccomenders */}
<Tabs defaultActiveKey="a" id="uncontrolled-tab-example"> <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
<Tab eventKey="a" title="A"> <Tab eventKey="a" title="A">
<Wikipedia query={ VideoDetails.snippet.title } /> <Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
</Tab> </Tab>
<Tab eventKey="b" title="B"> <Tab eventKey="b" title="B">
<p>B</p> <p>{}</p>
</Tab> </Tab>
<Tab eventKey="c" title="C"> <Tab eventKey="c" title="C">
<p>C</p> <p>C</p>
</Tab> </Tab>
</Tabs> </Tabs>
</Col> </Col>
<Col className='border border-dark' lg={{span:4, offset:1}}> <Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p> <p>2</p>
</Col> </Col>
</React.Fragment> </React.Fragment>
); );
}
}
} }
}
}
VideoInfo.propTypes = { VideoInfo.propTypes = {
}; };
export default VideoInfo; export default VideoInfo;
src/VideoList.js
+64 -61
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 { Col, ListGroup, Card, CardDeck } from 'react-bootstrap'; // eslint-disable-line no-unused-vars
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
import './css/VideoList.css';
/*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */ /*eslint no-console: ["error", { allow: ["warn", "error", "info"] }] */
class VideoList extends React.Component { class VideoList extends React.Component {
@@ -13,16 +14,14 @@ class VideoList extends React.Component {
items: [], items: [],
headers: null headers: null
}; };
this.getThumbnails = this.getThumbnails.bind(this);
} }
componentDidMount() { componentDidMount() {
axios.get('http://site1825.tw.cs.unibo.it/video.json').then( axios.get('http://site1825.tw.cs.unibo.it/video.json').then(
response => { response => {
this.shuffleArray(response.data); this.shuffleArray(response.data);
this.setState({ this.getThumbnails(response.data);
headers: response.config
});
return this.getThumbnails(response.data);
}, },
// 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
@@ -37,58 +36,7 @@ class VideoList extends React.Component {
); );
} }
render() { // METODI
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
}
getThumbnails(videoItems) { getThumbnails(videoItems) {
let idToLookFor = videoItems.map(item => item.videoID); let idToLookFor = videoItems.map(item => item.videoID);
let finalChunk = (videoItems.length % 50) + 100; let finalChunk = (videoItems.length % 50) + 100;
@@ -129,7 +77,7 @@ class VideoList extends React.Component {
res2.data.items, res2.data.items,
res3.data.items res3.data.items
); );
allres.forEach(resCurrentValue => { allres.map(resCurrentValue => {
Object.defineProperty( Object.defineProperty(
videoItems.find(videoItem => { videoItems.find(videoItem => {
return videoItem.videoID === resCurrentValue.id; return videoItem.videoID === resCurrentValue.id;
@@ -138,12 +86,67 @@ class VideoList extends React.Component {
{ value: resCurrentValue.snippet.thumbnails.medium.url } { 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>
);
}
} }
} }
src/VideoPlayer.js
+29 -7
View File
@@ -1,5 +1,6 @@
import React, { Component } from 'react'; // eslint-disable-line no-unused-vars import React, { Component } from 'react'; // eslint-disable-line no-unused-vars
import YouTube from 'react-youtube'; // 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"] }] */ /* eslint no-console: ["error", { allow: ["info", "error"] }] */
class VideoPlayer extends Component { class VideoPlayer extends Component {
@@ -14,21 +15,35 @@ class VideoPlayer extends Component {
autoplay: 0, autoplay: 0,
modestbranding: 1 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() { render() {
return ( return (
<React.Fragment> <React.Fragment>
<YouTube <YouTube
opts={this.state.opt} opts={this.state.opt}
videoId={ // this.props.match.params.id
this.props.match.params.id ? this.props.match.params.id : '3AVWJzHvhFE' // or null videoId={this.state.videoId}
}
onReady={this._onReady} onReady={this._onReady}
onPlay={this._onPlay} onPlay={this._onPlay}
onError={this._onError} onError={this._onError}
onStateChange={this._onStateChange}
className="embed-responsive-item" className="embed-responsive-item"
containerClassName="embed-responsive embed-responsive-16by9" containerClassName="embed-responsive embed-responsive-16by9"
/> />
@@ -40,16 +55,23 @@ class VideoPlayer extends Component {
// console.error(event); // console.error(event);
} }
_onPlay(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.warn(event.target.getDuration());
// console.info('go');
// while(event.target.getCurrentTime() < 15){}
// console.info(event.target.getCurrentTime());
} }
_onReady(event) { _onReady(event) {
// access to player in all event handlers via event.target // access to player in all event handlers via event.target
//event.target.pauseVideo(); // event.target.pauseVideo();
console.info('on ready', event); // console.info('on ready', event);
// console.warn(event); // console.warn(event);
// console.warn(event.target.getDuration()); // console.warn(event.target.getDuration());
} }
_onStateChange(event) {
// console.info('statechange: ', event.data)
}
} }
export default VideoPlayer; 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) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data : {}, data: {},
infobox: {},
error: null, error: null,
isLoaded: false 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() { // componentWillMount() {
// } // }
componentDidMount() { componentWillMount() {
wikijs().search(this.props.query,1).then(data => { wikijs().find(this.props.query, this.raffina).then(data => {
this.setState({ this.setState({
data, data,
isLoaded: true isLoaded: true
}); });
console.log(data); console.log(data.html());
//this.getWikiBox(data.results[0]);
}, error => { }, error => {
console.error(error); console.error(error);
this.setState({ this.setState({
@@ -67,7 +84,7 @@ class Wikipedia extends Component {
} else { } else {
return ( return (
<div> <div>
<p>risultato ricerca wikipedia: { data.results[0] }</p> {/* <p>risultato ricerca wikipedia: { data.results[0] }</p> */}
</div> </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;