From 36c9c26089128765cbf3aa9eb9009194c44bf787 Mon Sep 17 00:00:00 2001 From: matteo Date: Thu, 27 Dec 2018 19:26:46 +0100 Subject: [PATCH] buon natale --- src/App.js | 10 ++- src/VideoInfo.js | 161 +++++++++++++---------------------------------- 2 files changed, 48 insertions(+), 123 deletions(-) diff --git a/src/App.js b/src/App.js index d1a06a9..a718772 100644 --- a/src/App.js +++ b/src/App.js @@ -27,10 +27,10 @@ render() { { this.setState({ navHeight: height }); console.log('l', height) }}> - this.setState({ blackbgHeight: height })} className="row upperSection p-2" > + this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" > this.setState({ playerHeight: height })}> {/* change component to children */} @@ -45,19 +45,17 @@ render() { - -
+
- diff --git a/src/VideoInfo.js b/src/VideoInfo.js index d6f611d..3e470ac 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -29,15 +29,6 @@ class VideoInfo extends Component { return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); } - // 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() { console.log('didmount', this.state.videoId) axios.all([ @@ -71,92 +62,43 @@ class VideoInfo extends Component { } componentDidUpdate(prevProps, prevState, snapshot) { - console.info('didup', this.props.match.params.id) - // this.setState((state, props) => { return { }}); - if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) { - this.setState({ videoId: this.props.match.params.id, isLoaded: false }); - axios.all([ - axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video - params: { - 'part': 'snippet,contentDetails,statistics,topicDetails', - 'id': this.props.match.params.id, - 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - } - }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video - params: { - 'part': 'snippet', - 'videoId': this.props.match.params.id, - 'order': 'relevance', - 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - } - })]) - .then(axios.spread((videosResponse, commentThreadResponse) => { - this.setState({ - VideoDetails: videosResponse.data.items[0], - comments: commentThreadResponse.data.items, - isLoaded: true - }); - }), error => { - console.error(error); - this.setState({ - isLoaded: true, - error - }); + if(!(prevState.videoId === this.state.videoId)) + axios.all([ + 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': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video + params: { + 'part': 'snippet', + 'videoId': this.state.videoId, + 'order': 'relevance', + 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' + } + })]) + .then(axios.spread((videosResponse, commentThreadResponse) => { + this.setState({ + VideoDetails: videosResponse.data.items[0], + comments: commentThreadResponse.data.items, + isLoaded: true }); - } + }), error => { + console.error(error); + this.setState({ + isLoaded: true, + error + }); + }); } - // shouldComponentUpdate(nextProps, nextState){ - // console.log('shouldup', nextProps, nextState) - // if(nextProps.match.params.id) - // return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ; - // else if(!(nextState.videoId === this.state.videoId)) - // return console.log('b') && true; - // else if(nextState.isLoaded) - // return console.log('d') && true; - // else - // return console.log('c') && false; - - // } - - // componentWillReceiveProps(nextProps){ - // if (nextProps.match.params.id === this.state.videoId) { console.log('1',nextProps)} - // else if (nextProps.match.params.id) { - // console.log('2',nextProps) - // this.setState({ videoId: nextProps.match.params.id }); - // axios.all([ - // axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video - // params: { - // 'part': 'snippet,contentDetails,statistics,topicDetails', - // 'id': nextProps.match.params.id, - // 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - // } - // }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video - // params: { - // 'part': 'snippet', - // 'videoId': nextProps.match.params.id, - // 'order': 'relevance', - // 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' - // } - // })]) - // .then(axios.spread((videosResponse, commentThreadResponse) => { - // this.setState({ - // VideoDetails: videosResponse.data.items, - // comments: commentThreadResponse.data.items, - // isLoaded: true - // }); - // }), error => { - // console.error(error); - // this.setState({ - // isLoaded: true, - // error - // }); - // }); - // } - // else{ - // console.log('3',nextProps) - // } - // } + componentWillReceiveProps(nextProps){ + console.log(nextProps) + if(nextProps.match.params.id && !( nextProps.match.params.id === this.state.videoId )){ + this.setState({videoId: nextProps.match.params.id}) + } // mindfuck + } render() { const { error, isLoaded, VideoDetails, comments } = this.state; @@ -164,50 +106,35 @@ class VideoInfo extends Component { const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method if (error) { return ( - + Error: {error.message} -- Cannot get {error.config.url} - + ); } else if (!isLoaded) { - return Loading...; + return Loading...; } else { return ( {VideoDetails.snippet.title} - - {/* - - - - - - - - - -
ID Video:{VideoDetails.id}
Publish Time:{ISO_8601parse(VideoDetails.snippet.publishedAt)}
Channel Name:{VideoDetails.snippet.channelTitle}
Description: -

{VideoDetails.snippet.description}

Tags: -

{VideoDetails.snippet.tags.map(element => - ({element}) - )}

- */} +

ID Video: {VideoDetails.id}
Published: {ISO_8601parse(VideoDetails.snippet.publishedAt)}
Channel name: {VideoDetails.snippet.channelTitle}
- {/* Description: {VideoDetails.snippet.description}
*/} - Tags: { }
+ Description: {VideoDetails.snippet.description}
+ Tags: { VideoDetails.snippet.tags ? + VideoDetails.snippet.tags.map(tag => ({tag})): ""} + {/* tags should be links */}

-
{VideoDetails.snippet.title}

Duration: {momentDuration(VideoDetails.contentDetails.duration)}
Definition: {VideoDetails.contentDetails.definition}
Dimension: {VideoDetails.contentDetails.dimension}
Views: {VideoDetails.statistics.viewCount}
- Likes: {VideoDetails.statistics.likeCount}
- Dislikes: {VideoDetails.statistics.dislikeCount} + Likes: {VideoDetails.statistics.likeCount}{String.fromCodePoint(0x1F44D)}
+ Dislikes: {VideoDetails.statistics.dislikeCount}{String.fromCodePoint(0x1F44E)}