Archived
tornati alla vecchia key, migliorato codice
This commit is contained in:
@@ -1 +1 @@
|
||||
'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
|
||||
'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
+1
-1
@@ -1,5 +1,5 @@
|
||||
process.env['NODE_ENV'] = 'production';
|
||||
//'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' = 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg';
|
||||
//'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' = 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig';
|
||||
const express = require('express');
|
||||
const compression = require('compression')
|
||||
const bodyParser = require('body-parser');
|
||||
|
||||
Generated
+4025
-2374
File diff suppressed because it is too large
Load Diff
+1
-1
@@ -23,7 +23,7 @@
|
||||
"react-height": "^3.0.0",
|
||||
"react-linkify": "^0.2.2",
|
||||
"react-router-dom": "^4.3.1",
|
||||
"react-scripts": "^2.1.3",
|
||||
"react-scripts": "^2.1.5",
|
||||
"react-youtube": "^7.8.0",
|
||||
"wikidata-sdk": "^5.15.9",
|
||||
"wikijs": "^4.8.1",
|
||||
|
||||
+8
-5
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { Route, Switch, withRouter, matchPath } from 'react-router-dom';
|
||||
import { Route, Switch, withRouter, matchPath, HashRouter } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.css';
|
||||
import { Row, Col, Button, Collapse } from 'react-bootstrap';
|
||||
import TopBar from './TopBar';
|
||||
@@ -16,6 +16,7 @@ class App extends React.Component {
|
||||
playerHeight: null,
|
||||
navHeight: null,
|
||||
blackbgHeight: null,
|
||||
dirtyBg: true,
|
||||
isInfoToggled: false,
|
||||
videoId: localStorage['lastId']
|
||||
};
|
||||
@@ -45,10 +46,11 @@ static getDerivedStateFromProps(nextProps, prevState) {
|
||||
render() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{/* <HashRouter/> */}
|
||||
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); }}>
|
||||
<TopBar />
|
||||
</ReactHeight>
|
||||
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
|
||||
<ReactHeight dirty={this.state.dirtyBg} onHeightReady={height => this.setState({ blackbgHeight: height, dirtyBg: false })} className="row upperSection p-2 px-5" >
|
||||
<Col
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
|
||||
@@ -61,11 +63,12 @@ static getDerivedStateFromProps(nextProps, prevState) {
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
|
||||
className="p-0 p-sm-0"
|
||||
style={{ 'overflow': "auto", 'maxHeight': this.state.playerHeight }} >
|
||||
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
|
||||
variant="outline-light"
|
||||
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
|
||||
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled, dirtyBg: true })}
|
||||
className="pt-1 "
|
||||
aria-controls="infovideo-collapse"
|
||||
aria-expanded={this.state.isInfoToggled}>
|
||||
@@ -74,7 +77,7 @@ static getDerivedStateFromProps(nextProps, prevState) {
|
||||
</div>
|
||||
<Collapse in={this.state.isInfoToggled}>
|
||||
<div className="pt-1" id="infovideo-collapse">
|
||||
<VideoInfo videoId={this.state.videoId} />
|
||||
<Route render={(props)=> <VideoInfo {...props} videoId={this.state.videoId}/>} />
|
||||
</div>
|
||||
</Collapse>
|
||||
</Col>
|
||||
|
||||
+24
-20
@@ -1,10 +1,9 @@
|
||||
import React from 'react';
|
||||
import Wikipedia from './areainfo/Wikipedia';
|
||||
import { Tabs, Tab } from 'react-bootstrap';
|
||||
import { Card, Tabs, Tab } from 'react-bootstrap';
|
||||
import {Link, withRouter} from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import Linkify from "react-linkify";
|
||||
import Card from "react-bootstrap/lib/Card";
|
||||
import moment from 'moment';
|
||||
import momentDurationFormat from 'moment-duration-format'; //eslint-disable-line no-unused-vars
|
||||
import './css/VideoInfo.scss';
|
||||
@@ -88,15 +87,15 @@ class VideoInfo extends React.Component {
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
|
||||
params: {
|
||||
'part': 'snippet,contentDetails,statistics,topicDetails',
|
||||
'id': this.state.videoId,
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
|
||||
'id': this.props.videoId,
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
|
||||
}
|
||||
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
||||
params: {
|
||||
'part': 'snippet',
|
||||
'videoId': this.state.videoId,
|
||||
'videoId': this.props.videoId,
|
||||
'order': 'relevance',
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
|
||||
}
|
||||
})])
|
||||
.then(axios.spread((videosResponse, commentThreadResponse) => {
|
||||
@@ -105,7 +104,8 @@ class VideoInfo extends React.Component {
|
||||
VideoDetails: videosResponse.data.items[0],
|
||||
comments: commentThreadResponse.data.items,
|
||||
others: {
|
||||
title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1]
|
||||
title2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[1],
|
||||
artist2: ytclear(videosResponse.data.items[0].snippet.title).split('-')[0]
|
||||
},
|
||||
isLoaded: true
|
||||
});
|
||||
@@ -119,21 +119,24 @@ class VideoInfo extends React.Component {
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
if(nextProps.videoId !== prevState.videoId)
|
||||
return { videoId: nextProps.videoId };
|
||||
else if(nextProps.location.state)
|
||||
// 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;
|
||||
// return null;
|
||||
}
|
||||
componentDidMount() {
|
||||
this.getInfoComments();
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
if(prevState.videoId !== this.state.videoId)
|
||||
if(prevProps.videoId !== this.props.videoId)
|
||||
this.getInfoComments();
|
||||
}
|
||||
|
||||
@@ -165,11 +168,9 @@ class VideoInfo extends React.Component {
|
||||
<b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
|
||||
<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>)) : ""}
|
||||
VideoDetails.snippet.tags.map((tag,i) =>
|
||||
(<Link key={i} to={{pathname: '/search/' + tag}}>{tag}</Link>))
|
||||
: ""}
|
||||
</p>
|
||||
</Tab>
|
||||
<Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
|
||||
@@ -202,14 +203,16 @@ class VideoInfo extends React.Component {
|
||||
})}
|
||||
</Tab>
|
||||
<Tab className="text-white" eventKey="tweet" title="Tweet">
|
||||
/* Insert code here */
|
||||
{/* Insert code here */}
|
||||
</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}
|
||||
videoId={this.state.videoId}
|
||||
artist2={this.state.others.artist2}
|
||||
key={this.props.videoId}
|
||||
videoId={this.props.videoId}
|
||||
/>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -223,4 +226,5 @@ VideoInfo.propTypes = {
|
||||
|
||||
};
|
||||
|
||||
export default withRouter(VideoInfo);
|
||||
export default VideoInfo;
|
||||
// export default withRouter(VideoInfo);
|
||||
|
||||
+3
-3
@@ -50,7 +50,7 @@ class VideoList extends React.Component {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.slice(0, 50).toString(),
|
||||
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
|
||||
fields: 'items(id,snippet/thumbnails/medium)'
|
||||
}
|
||||
}),
|
||||
@@ -59,7 +59,7 @@ class VideoList extends React.Component {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.slice(50, 100).toString(),
|
||||
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
|
||||
fields: 'items(id,snippet/thumbnails/medium)'
|
||||
}
|
||||
}),
|
||||
@@ -68,7 +68,7 @@ class VideoList extends React.Component {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.slice(100, finalChunk).toString(),
|
||||
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg', // 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg' in production
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig', // 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' in production
|
||||
fields: 'items(id,snippet/thumbnails/medium)'
|
||||
}
|
||||
})
|
||||
|
||||
+56
-31
@@ -52,16 +52,34 @@ class Wikipedia extends Component {
|
||||
wikipediakeys: Object.keys(wikipediaRes[0].general),
|
||||
isWikiLoaded: true
|
||||
}))
|
||||
else{ console.info('called here')
|
||||
this.findWikiPage();}
|
||||
|
||||
}, error => console.error(error))
|
||||
// .then(() => {
|
||||
// console.log(this.state.wikidata)
|
||||
// .then(() => console.log(this.state.wikipedia));
|
||||
// });
|
||||
}
|
||||
|
||||
findWikiPage = () => {
|
||||
let wikiquery = `${'undefined' === typeof this.props.title ? this.props.title2.trim() : this.props.title.trim()} (${'undefined' === typeof this.props.artist ? this.props.artist2.trim() : this.props.artist.trim()} song)`;
|
||||
console.info(wikiquery)
|
||||
return wikijs()
|
||||
.find(wikiquery)
|
||||
.then(res => {
|
||||
console.info(res,'a');
|
||||
return Promise.all([res.fullInfo(), res.summary()]);
|
||||
}) // find by props.title (props.artist song)
|
||||
.then(wikipediaRes => this.setState({
|
||||
wikipedia: {
|
||||
"desc": wikipediaRes[1],
|
||||
"info": wikipediaRes[0].general
|
||||
},
|
||||
wikipediakeys: Object.keys(wikipediaRes[0].general),
|
||||
isWikiLoaded: true
|
||||
}))
|
||||
}
|
||||
|
||||
wrapper() {
|
||||
const musicbrainzBaseUrl = "https://musicbrainz.org/ws/2"; // more readable
|
||||
return axios.get(wdk.getReverseClaims('P1651', this.state.props.videoId)) // P1651 is youtube_video_id property
|
||||
return axios.get(wdk.getReverseClaims('P1651', this.props.videoId)) // P1651 is youtube_video_id property
|
||||
.then(wikidataP1651Res => {
|
||||
if (wikidataP1651Res.data.results.bindings.length) { // got a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP1651Res.data))// set in state wikidata
|
||||
@@ -107,7 +125,7 @@ class Wikipedia extends Component {
|
||||
else { //oof
|
||||
axios.get(`${musicbrainzBaseUrl}/work`, {
|
||||
params: {
|
||||
'query': 'undefined' === typeof this.state.props.title ? this.state.props.title2 : this.state.props.title,
|
||||
'query': 'undefined' === typeof this.props.title ? this.props.title2 : this.props.title,
|
||||
'limit': 1,
|
||||
'offset': 0,
|
||||
'fmt': 'json'
|
||||
@@ -124,44 +142,51 @@ class Wikipedia extends Component {
|
||||
})
|
||||
]).then(
|
||||
axios.spread((wikidataP435Res, musicbrainzWorkRes) => {
|
||||
this.setState({ musicbrainz: musicbrainzWorkRes.data, isMBLoaded: true });
|
||||
this.setState({
|
||||
musicbrainz: musicbrainzWorkRes.data,
|
||||
isMBLoaded: true
|
||||
});
|
||||
if (wikidataP435Res.data.results.bindings.length) // found a match
|
||||
this.getWikidataPage(wdk.simplify.sparqlResults(wikidataP435Res.data)); // set the result in the state
|
||||
else if (musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata")) { // found wikidata on music brainz
|
||||
let a = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
|
||||
let wikidataUrl = musicbrainzWorkRes.data.relations.find(currentRel => currentRel.type === "wikidata");
|
||||
let wikidataEntityRegEx = new RegExp("[^/]+$"); // match last part of url https://regex101.com/r/0wCQHY/1
|
||||
this.getWikidataPage(wikidataEntityRegEx.exec(a.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
|
||||
this.getWikidataPage(wikidataEntityRegEx.exec(wikidataUrl.url.resource)) //.then(() => this.setState({ isWikiLoaded: true }));
|
||||
}
|
||||
else { // oof
|
||||
wikijs().find('undefined' === typeof this.state.props.title? this.state.props.title2.trim(): this.state.props.title.trim()).then(data => console.log('asd', data)) // find by props.title
|
||||
this.findWikiPage()
|
||||
}
|
||||
})
|
||||
)
|
||||
})
|
||||
}
|
||||
return new Promise((resolve, reject) => resolve('ok'));
|
||||
});
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
if (prevState.props.videoId !== nextProps.videoId)
|
||||
return {
|
||||
props: {
|
||||
videoId: nextProps.videoId,
|
||||
},
|
||||
isWikiLoaded: false,
|
||||
isWDataLoaded: false,
|
||||
isMBLoaded: false,
|
||||
isLoaded: false,
|
||||
wikidatakeys: null,
|
||||
wikipediakeys: null
|
||||
};
|
||||
// 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().finally(()=>this.setState({isLoaded: true}));
|
||||
this.wrapper().then((a) => this.setState({ isLoaded: true, a }));
|
||||
}
|
||||
|
||||
|
||||
@@ -169,10 +194,10 @@ class Wikipedia extends Component {
|
||||
|
||||
// }
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevProps.videoId !== this.state.props.videoId)
|
||||
this.wrapper().finally(()=>this.setState({isLoaded: true}));
|
||||
}
|
||||
// componentDidUpdate(prevProps, prevState) {
|
||||
// if (prevProps.videoId !== this.props.videoId)
|
||||
// this.wrapper().then((a) => this.setState({ isLoaded: true, a:a.toUpperCase() }));
|
||||
// }
|
||||
|
||||
// componentWillUnmount() {
|
||||
|
||||
@@ -189,7 +214,7 @@ class Wikipedia extends Component {
|
||||
return (
|
||||
<Table striped bordered hover size="sm">
|
||||
<tbody>
|
||||
{ isWikiLoaded &&
|
||||
{isWikiLoaded &&
|
||||
this.state.wikipediakeys.map(key => (
|
||||
<tr key={key}>
|
||||
<td>{key}</td>
|
||||
@@ -197,7 +222,7 @@ class Wikipedia extends Component {
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
{ isWDataLoaded &&
|
||||
{isWDataLoaded &&
|
||||
this.state.wikidatakeys.map(key => (
|
||||
<tr key={key}>
|
||||
<td>{`${key} - ${wikidata.claims[key][0].mainsnak.datatype}`}</td>
|
||||
@@ -213,8 +238,8 @@ class Wikipedia extends Component {
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
{ isMBLoaded &&
|
||||
musicbrainz.relations.map((relation,i) => {
|
||||
{isMBLoaded &&
|
||||
musicbrainz.relations.map((relation, i) => {
|
||||
if (relation["target-type"] === "artist")
|
||||
return (<tr key={i}>
|
||||
<td>{relation.type}</td>
|
||||
|
||||
+2
-2
@@ -4,9 +4,9 @@ import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
import registerServiceWorker from './registerServiceWorker';
|
||||
import { HashRouter, BrowserRouter } from 'react-router-dom'; // eslint-disable-line
|
||||
import { HashRouter , BrowserRouter, Route } from 'react-router-dom'; // eslint-disable-line
|
||||
localStorage['lastWatched'] ? function (){}() : localStorage.setItem('lastWatched', JSON.stringify([]))
|
||||
localStorage['lastId'] ? function (){}() : localStorage.setItem('lastId','0J2QdDbelmY')
|
||||
|
||||
ReactDOM.render(<HashRouter><App /></HashRouter>, document.getElementById('root'));
|
||||
ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
|
||||
registerServiceWorker();
|
||||
|
||||
@@ -31,7 +31,7 @@ class RecommenderRandom extends Component{
|
||||
'type' : 'video', //che contiene tutti i generi di musica
|
||||
'maxResults': '21',
|
||||
'pageToken' : pageToken,
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
response => {
|
||||
|
||||
@@ -29,7 +29,7 @@ class Recent extends React.Component {
|
||||
// response => {
|
||||
// //this.shuffleArray(response.data);
|
||||
// console.info ('a',response.data);
|
||||
this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')) );
|
||||
this.getThumbnailsNames(JSON.parse(localStorage.getItem('lastWatched')));
|
||||
// console.info(response.data.recommended);
|
||||
// // this.setState({
|
||||
// // isLoaded: true,
|
||||
@@ -73,7 +73,7 @@ class Recent extends React.Component {
|
||||
'thumbnail':
|
||||
{ value: resCurrentValue.snippet.thumbnails.medium.url },
|
||||
'name':
|
||||
{value: resCurrentValue.snippet.title}
|
||||
{ value: resCurrentValue.snippet.title }
|
||||
})
|
||||
);
|
||||
this.setState({
|
||||
@@ -114,27 +114,25 @@ class Recent extends React.Component {
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
{items.map(item=>( <Col md="4">
|
||||
<Card key={item.id}>
|
||||
{items.map(item => (<Col md="4">
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/video/' + item.id,
|
||||
}}
|
||||
>
|
||||
><Card key={item.id}>
|
||||
<Card.Img
|
||||
src={item.thumbnail}
|
||||
alt={'Thumbnail of ' + item.name}
|
||||
/>
|
||||
<Card.ImgOverlay>
|
||||
<Card.Title className="bg-dark d-inline text-white">
|
||||
{item.name}<br/>
|
||||
{item.name}<br />
|
||||
{item.lastSelected}
|
||||
</Card.Title>
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</Link>
|
||||
</Col>))}
|
||||
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ class Related extends Component {
|
||||
'relatedToVideoId' : this.state.videoId,
|
||||
'type' : 'video',
|
||||
'maxResults' : '21',
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
response => {
|
||||
|
||||
+38
-20
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Card, Col } from 'react-bootstrap';
|
||||
|
||||
class Search extends React.Component {
|
||||
@@ -11,26 +12,26 @@ class Search extends React.Component {
|
||||
res: null
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps, prevState) {
|
||||
if (nextProps.match.params.query !== prevState.query)
|
||||
return { query: nextProps.match.params.query };
|
||||
return null;
|
||||
}
|
||||
// static getDerivedStateFromProps(nextProps, prevState) {
|
||||
// if (nextProps.match.params.query !== prevState.query)
|
||||
// return { query: nextProps.match.params.query };
|
||||
// return null;
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
console.log('called didmo');
|
||||
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString()))
|
||||
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
'part': 'id',
|
||||
'id': this.state.query,
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
|
||||
'id': this.props.match.params.query,
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
||||
'field': 'pageInfo/resultsPerPage'
|
||||
}
|
||||
}).then(
|
||||
res => {
|
||||
res.data.pageInfo.resultsPerPage ?
|
||||
this.props.history.push('/video/' + this.state.query) :
|
||||
this.props.history.push('/video/' + this.props.match.params.query) :
|
||||
this.youtubeSearch()
|
||||
},
|
||||
error => {
|
||||
@@ -47,19 +48,19 @@ class Search extends React.Component {
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
console.log('called didup');
|
||||
if (prevState.query !== this.props.match.params.query)
|
||||
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.state.query.toString()))
|
||||
if (prevProps.match.params.query !== this.props.match.params.query)
|
||||
if (new RegExp("[0-9A-Za-z_-]{10}[048AEIMQUYcgkosw]").test(this.props.match.params.query.toString()))
|
||||
axios.get('https://www.googleapis.com/youtube/v3/videos', {
|
||||
params: {
|
||||
'part': 'id',
|
||||
'id': this.state.query,
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
|
||||
'id': this.props.match.params.query,
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
||||
'field': 'pageInfo/resultsPerPage'
|
||||
}
|
||||
}).then(
|
||||
res => {
|
||||
res.data.pageInfo.resultsPerPage ?
|
||||
this.props.history.push('/video/' + this.state.query) :
|
||||
this.props.history.push('/video/' + this.props.match.params.query) :
|
||||
this.youtubeSearch()
|
||||
},
|
||||
error => {
|
||||
@@ -81,12 +82,12 @@ class Search extends React.Component {
|
||||
return axios.get('https://www.googleapis.com/youtube/v3/search', {
|
||||
params: {
|
||||
'part': 'snippet',
|
||||
'q': this.state.query,
|
||||
'q': this.props.match.params.query,
|
||||
'videoEmbeddable': 'true',
|
||||
'type': 'video',
|
||||
'maxResults': 30,
|
||||
'topicId': '/m/04rlf, /m/02jjt',
|
||||
'key': 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg'
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
}).then(
|
||||
res => {
|
||||
@@ -107,11 +108,28 @@ class Search extends React.Component {
|
||||
return <React.Fragment>Loading...</React.Fragment>;
|
||||
} else {
|
||||
return (
|
||||
<Col>
|
||||
{this.state.res.data.items.map(item => (<Card></Card>
|
||||
|
||||
))}
|
||||
<React.Fragment>
|
||||
{this.state.res.items.map(item => (<Col key={item.id.videoId} md="4">
|
||||
<Card>
|
||||
<Link
|
||||
to={{
|
||||
pathname: '/video/' + item.id.videoId,
|
||||
}}
|
||||
>
|
||||
<Card.Img
|
||||
src={item.snippet.thumbnails.medium.url}
|
||||
alt={'Thumbnail of ' + item.snippet.title}
|
||||
/>
|
||||
<Card.ImgOverlay>
|
||||
<Card.Title className="bg-dark d-inline text-white">
|
||||
{item.snippet.title}
|
||||
</Card.Title>
|
||||
</Card.ImgOverlay>
|
||||
</Link>
|
||||
</Card>
|
||||
</Col>
|
||||
))}
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,7 +57,7 @@ class fvitali extends React.Component {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.toString(),
|
||||
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
||||
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -48,7 +48,7 @@ class popGlobaleAssoluta extends React.Component {
|
||||
params: {
|
||||
part: 'snippet',
|
||||
id: idToLookFor.toString(),
|
||||
key: 'AIzaSyBYSHhu7AwZqT1JK3x4G8Yzs7iRqoS_QUg',
|
||||
key: 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig',
|
||||
fields: 'items(id,snippet/thumbnails/medium,snippet/title)'
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user