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

riorganizzazione files, gestione id videoplayer e videoinfo

Browse Source
This commit is contained in:
matteo
2018-11-24 01:41:45 +01:00
parent d33876d1e7
commit bb71bf270c
12 changed files with 122 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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.js
+5 -4
View File
@@ -6,7 +6,7 @@ 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() {
@@ -18,16 +18,17 @@ class App extends React.Component {
<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 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
+1 -1
View File
@@ -8,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 {
src/VideoInfo.js
+25 -12
View File
@@ -1,6 +1,6 @@
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Wikipedia from './Wikipedia';
import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab } from 'react-bootstrap';
import axios from 'axios';
@@ -10,20 +10,26 @@ class VideoInfo extends Component {
this.state={
error: null,
isLoaded: false,
VideoDetails: {}
VideoDetails: {},
videoId: '0J2QdDbelmY'
};
}
// componentWillMount() {
// }
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});
}
}
}
componentDidMount() {
axios.get('https://www.googleapis.com/youtube/v3/videos', {
params: {
'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.props.match.params.id,
'id': this.state.videoId,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
}).then(response => {
@@ -47,13 +53,20 @@ class VideoInfo extends Component {
// }
// 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() {
src/VideoList.js
+58 -55
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,51 +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>
{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;
@@ -122,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;
@@ -131,13 +86,61 @@ 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 }}>
{/* {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>
</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 }});
}
}
componentDidMount(){
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)
}
}
export default VideoPlayer;
src/Suggestion.js → src/areainfo/Suggestion.js
View File
src/Wikipedia.js → src/areainfo/Wikipedia.js
View File
src/App.css → src/css/App.css
View File
src/TopBar.css → src/css/TopBar.css
View File
src/css/VideoList.css
+2
View File
@@ -0,0 +1,2 @@
.carta :hover{
}