diff --git a/README.md b/README.md index f8b7728..7db7472 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/public/favicon.ico b/public/favicon.ico index a11777c..8a308dd 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/src/App.css b/src/App.css deleted file mode 100644 index b5c4552..0000000 --- a/src/App.css +++ /dev/null @@ -1,3 +0,0 @@ -.bg-black{ -background-color:#000000; -} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 105a125..1b83f76 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( + + - - + + {/* */} {/* */} - + - + +
URL not found
}/> diff --git a/src/App.test.js b/src/App.test.js index a754b20..739c131 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -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(, div); + ReactDOM.render(, div); ReactDOM.unmountComponentAtNode(div); }); diff --git a/src/TopBar.js b/src/TopBar.js index a7b74df..312bd70 100644 --- a/src/TopBar.js +++ b/src/TopBar.js @@ -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 ( - - + HazeTV @@ -43,9 +42,9 @@ class TopBar extends Component {
- + ); } } -export default TopBar; +export default withRouter(TopBar); diff --git a/src/VideoInfo.js b/src/VideoInfo.js index 13e4de8..d2434b7 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -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 ( - - Error: {error.message} -- Cannot get {error.config.url} - - ); - } else if (!isLoaded) { - return Loading...; - } else { - return ( - - - {/* codice per tabs reccomenders */} - - - - - -

B

- - -

C

- - - - -

2

- - - ); + return ( + + Error: {error.message} -- Cannot get {error.config.url} + + ); + } else if (!isLoaded) { + return Loading...; + } else { + return ( + + + {/* codice per tabs reccomenders */} + + + + + +

{}

+ + +

C

+ + + + +

2

+ + + ); + } + } } - } -} -VideoInfo.propTypes = { + VideoInfo.propTypes = { -}; + }; -export default VideoInfo; \ No newline at end of file + export default VideoInfo; \ No newline at end of file diff --git a/src/VideoList.js b/src/VideoList.js index 34e4b26..c098398 100644 --- a/src/VideoList.js +++ b/src/VideoList.js @@ -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 ( - - Error: {error.message} -- Cannot get {error.config.url} - - ); - } else if (!isLoaded) { - return Loading...; - } else { - return ( - - - - Url loaded: {headers.url} - -
- Total videos: {items.length} - - {items.map(item => ( - - - - - - {item.artist} - {item.title} - - - - {' '} - {item.videoID} - {' '} - {item.category} - - - - - - ))} - - ); - } - } - 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 ( + + Error: {error.message} -- Cannot get {error.config.url} + + ); + } else if (!isLoaded) { + return ( + + +

Loading...

+ + + ); + } else { + return ( + + {items.map(item => ( + + + + {/* {item.artist} - {item.title} {item.videoID} {item.category} */} + + + + {item.artist} - {item.title} + +

{item.category}

+ + + + + ))} + + ); + } } } -export default VideoList; +export default VideoList; \ No newline at end of file diff --git a/src/VideoPlayer.js b/src/VideoPlayer.js index f4d8f77..8c5eb00 100644 --- a/src/VideoPlayer.js +++ b/src/VideoPlayer.js @@ -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 ( @@ -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; diff --git a/src/Suggestion.js b/src/areainfo/Suggestion.js similarity index 100% rename from src/Suggestion.js rename to src/areainfo/Suggestion.js diff --git a/src/Wikipedia.js b/src/areainfo/Wikipedia.js similarity index 63% rename from src/Wikipedia.js rename to src/areainfo/Wikipedia.js index bd3fe5e..b0b47f6 100644 --- a/src/Wikipedia.js +++ b/src/areainfo/Wikipedia.js @@ -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 (
-

risultato ricerca wikipedia: { data.results[0] }

+ {/*

risultato ricerca wikipedia: { data.results[0] }

*/}
); } diff --git a/src/css/App.css b/src/css/App.css new file mode 100644 index 0000000..2890bb5 --- /dev/null +++ b/src/css/App.css @@ -0,0 +1,9 @@ +.bg-black{ +background-color:#000000; +} + +.scrollable{ + overflow: auto !important; + height: 40vh; + margin-top: 2vh; +} \ No newline at end of file diff --git a/src/TopBar.css b/src/css/TopBar.css similarity index 100% rename from src/TopBar.css rename to src/css/TopBar.css diff --git a/src/css/VideoList.css b/src/css/VideoList.css new file mode 100644 index 0000000..b506bf2 --- /dev/null +++ b/src/css/VideoList.css @@ -0,0 +1,2 @@ +.carta :hover{ +} \ No newline at end of file diff --git a/src/reccomenders/fvitali.js b/src/reccomenders/fvitali.js new file mode 100644 index 0000000..537b678 --- /dev/null +++ b/src/reccomenders/fvitali.js @@ -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; \ No newline at end of file