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

maledetto il signore

Browse Source
This commit is contained in:
matteo
2019-02-17 00:17:38 +01:00
parent c01fe3daf7
commit 1c3a5b3409
7 changed files with 52 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+19 -22
View File
@@ -1,6 +1,5 @@
import React from 'react';
import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
import { Row, Col, Button, Collapse } from 'react-bootstrap';
import TopBar from './TopBar';
import VideoPlayer from './VideoPlayer';
@@ -16,54 +15,52 @@ class App extends React.Component {
playerHeight: null,
navHeight: null,
blackbgHeight: null,
dirtyBg: true,
isInfoToggled: false,
videoId: localStorage['lastId']
};
// componentDidMount(){
// componentDidMount() {
// }
// }
// componentDidUpdate(prevProps, prevState) {
// componentDidUpdate(prevProps, prevState) {
// }
// }
static getDerivedStateFromProps(nextProps, prevState) {
static getDerivedStateFromProps(nextProps, prevState) {
let idMatch = matchPath(nextProps.location.pathname, {
path: "/video/:id",
exact: true,
strict: false
});
if(idMatch && idMatch.params.id !== prevState.videoId){
if (idMatch && idMatch.params.id !== prevState.videoId) {
localStorage.setItem('lastId', idMatch.params.id)
return {videoId: idMatch.params.id };
return { videoId: idMatch.params.id };
}
return null;
}
}
render() {
return (
<React.Fragment>
{/* <HashRouter/> */}
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
<Row id="top">
<TopBar />
</ReactHeight>
<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
</Row>
<Row className="upperSection">
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
className="align-content-center pt-2 p-1 pr-2">
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
<VideoPlayer videoId={this.state.videoId}/>
<ReactHeight onHeightReady={height => { this.setState({ playerHeight: height }) }}>
<VideoPlayer videoId={this.state.videoId} />
</ReactHeight>
</Col>
<Col
xs="12"
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
className="p-0 p-sm-0"
style={window.innerWidth < 992 ? { 'overflow': "auto", 'display':'fixed' , 'maxHeight':this.state.playerHeight*1.4+'px'} : { 'overflow': "auto" , 'maxHeight':`${this.state.playerHeight}px`}}>
className="p-0 p-xs-0"
style={window.innerWidth < 992 ? { 'overflow': "auto", 'display': 'fixed', 'maxHeight': this.state.playerHeight * 1.4 + 'px' } : { 'overflow': "auto", 'maxHeight': `${this.state.playerHeight}px` }}>
{/* true = style for xs ;; false = style for lg */}
<div className="d-flex justify-content-center">
<Button
@@ -77,12 +74,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
</div>
<Collapse in={this.state.isInfoToggled}>
<div className="pt-1" id="infovideo-collapse">
<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
<Route render={(props) => <VideoInfo {...props} key={this.state.videoId} videoId={this.state.videoId} />} />
</div>
</Collapse>
</Col>
</ReactHeight>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
</Row>
<Row style={{ "maxHeight": `calc(98vh - ${this.state.playerHeight}px - 46px)` }} className='mt-1 downSection'>
<Switch>
<Route exact path='/' component={VideoList} />
<Route path={"/video/:id"} component={Suggestion} />
src/VideoInfo.js
+12 -87
View File
@@ -1,7 +1,7 @@
import React from 'react';
import Wikipedia from './areainfo/Wikipedia';
import { Card, Tabs, Tab } from 'react-bootstrap';
import {Link, withRouter} from 'react-router-dom';
import {Link} from 'react-router-dom';
import axios from 'axios';
import Linkify from "react-linkify";
import moment from 'moment';
@@ -28,60 +28,6 @@ class VideoInfo extends React.Component {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
}
isArtistOrTitle(a){
// switch(parseInt(b)){
// case 1:
// break;
// case 2:
// break;
// default:
// break;
// }
axios.all([
axios.get("https://musicbrainz.org/ws/2/work", {
params: {
query: `work:${a[0]} AND artist:${a[1]}`,
//artist: a[1],
fmt: "json",
limit: 1,
inc: "aliases"
}}),
axios.get("https://musicbrainz.org/ws/2/work", {
params: {
query: `work:${a[1]} AND artist:${a[0]}`,
// artist: a[0],
fmt: "json",
limit: 1,
inc: "aliases"
}})
])
.then(axios.spread((response1, response2) => {
console.log(response1.data, response2.data);
axios.all([
axios.get(`https://musicbrainz.org/ws/2/work/${response1.data.works[0].id}`,{
params:{
fmt:'json',
limit:1,
inc: 'aliases'
}
}),
axios.get(`https://musicbrainz.org/ws/2/work/${response2.data.works[0].id}`,{
params:{
fmt:'json',
limit:1,
inc: 'recording-rels'
}
}),
]).then(axios.spread((responseA1,responseA2)=>{
console.log(responseA1.data, responseA2.data);
}))
}),
error => { }
);
}
getInfoComments() {
return axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
@@ -99,14 +45,9 @@ class VideoInfo extends React.Component {
}
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
// this.isArtistOrTitle(ytclear(videosResponse.data.items[0].snippet.title).split('-'));
this.setState({
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
others: {
title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1],
artist2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[0]
},
isLoaded: true
});
}), error => {
@@ -118,27 +59,16 @@ class VideoInfo extends React.Component {
});
}
static getDerivedStateFromProps(nextProps, prevState) {
// if(nextProps.videoId !== prevState.videoId)
// return { videoId: nextProps.videoId };
// else
if('undefined' === typeof nextProps.location.state)
return null;
else
return { others: {
artist: nextProps.location.state.artist,
title: nextProps.location.state.title
}}
// return null;
}
// static getDerivedStateFromProps(nextProps, prevState) {
// }
componentDidMount() {
this.getInfoComments();
}
componentDidUpdate(prevProps, prevState, snapshot) {
if(prevProps.videoId !== this.props.videoId)
this.getInfoComments();
}
// componentDidUpdate(prevProps, prevState, snapshot) {
// }
// shouldComponentUpdate(nextProps, nextState) {
// }
@@ -169,7 +99,7 @@ class VideoInfo extends React.Component {
<b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
<b>Tags: </b>{VideoDetails.snippet.tags ?
VideoDetails.snippet.tags.map((tag,i) =>
(<Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>))
( <span><Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>{" "}</span> ))
: ""}
</p>
</Tab>
@@ -207,10 +137,10 @@ class VideoInfo extends React.Component {
</Tab>
<Tab className="text-white" eventKey="wikipedia" title="Wikipedia">
<Wikipedia
title={this.state.others.title}
title2={this.state.others.title2}
artist={this.state.others.artist}
artist2={this.state.others.artist2}
title={'undefined' !== typeof this.props.location.state ? this.props.location.state.title: undefined}
title2={ytclear(this.state.VideoDetails.snippet.title).split('-')[1]}
artist={'undefined' !== typeof this.props.location.state ? this.props.location.state.artist: undefined}
artist2={ytclear(this.state.VideoDetails.snippet.title).split('-')[0]}
key={this.props.videoId}
videoId={this.props.videoId}
/>
@@ -220,11 +150,6 @@ class VideoInfo extends React.Component {
);
}
}
}
VideoInfo.propTypes = {
};
export default VideoInfo;
// export default withRouter(VideoInfo);
src/VideoList.js
-1
View File
@@ -2,7 +2,6 @@ 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 {
src/areainfo/Wikipedia.js
+3 -24
View File
@@ -164,29 +164,9 @@ class Wikipedia extends Component {
});
}
static getDerivedStateFromProps(nextProps, prevState) {
// if (prevState.props.videoId !== nextProps.videoId)
// return {
// musicbrainz:null,
// wikidata: null,
// wikipedia: null,
// props: {
// videoId: nextProps.videoId,
// },
// isWikiLoaded: false,
// isWDataLoaded: false,
// isMBLoaded: false,
// isLoaded: false,
// wikidatakeys: null,
// wikipediakeys: null
// };
return null
}
componentDidMount() {
this.wrapper().then((a) => this.setState({ isLoaded: true, a }));
this.wrapper().then(() => this.setState({ isLoaded: true }));
}
@@ -195,8 +175,7 @@ class Wikipedia extends Component {
// }
// componentDidUpdate(prevProps, prevState) {
// if (prevProps.videoId !== this.props.videoId)
// this.wrapper().then((a) => this.setState({ isLoaded: true, a:a.toUpperCase() }));
// }
// componentWillUnmount() {
@@ -212,7 +191,7 @@ class Wikipedia extends Component {
return <React.Fragment>Loading...</React.Fragment>;
} else {
return (
<Table striped bordered hover size="sm">
<Table bordered variant="dark" hover size="sm">
<tbody>
{isWikiLoaded &&
this.state.wikipediakeys.map(key => (
src/css/App.css
+1
View File
@@ -1,5 +1,6 @@
.upperSection{
background-color:#000000;
display: fixed;
}
.downSection{
src/index.js
+3 -1
View File
@@ -1,10 +1,12 @@
import 'bootstrap/dist/css/bootstrap.css';
import 'react-app-polyfill/ie9';
//import '@babel/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { HashRouter , BrowserRouter, Route } from 'react-router-dom'; // eslint-disable-line
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
src/reccomenders/Recent.js
+6 -3
View File
@@ -114,12 +114,14 @@ class Recent extends React.Component {
} else {
return (
<React.Fragment>
{items.map(item => (<Col md="4">
{items.map(item => (
<Col md="4">
<Card key={item.id}>
<Link
to={{
pathname: '/video/' + item.id,
}}
><Card key={item.id}>
>
<Card.Img
src={item.thumbnail}
alt={'Thumbnail of ' + item.name}
@@ -130,8 +132,9 @@ class Recent extends React.Component {
{item.lastSelected}
</Card.Title>
</Card.ImgOverlay>
</Card>
</Link>
</Card>
</Col>))}
</React.Fragment>
);