From c1c69d079741a980efca1a19c11fb16a47e84ebc Mon Sep 17 00:00:00 2001 From: matteo Date: Sun, 16 Dec 2018 02:16:01 +0100 Subject: [PATCH] saturday work --- src/App.js | 8 ++- src/VideoInfo.js | 161 +++++++++++++++++++++++++---------------------- src/css/App.css | 8 --- 3 files changed, 90 insertions(+), 87 deletions(-) diff --git a/src/App.js b/src/App.js index 570019c..d1a06a9 100644 --- a/src/App.js +++ b/src/App.js @@ -38,24 +38,26 @@ render() {
+
+
diff --git a/src/VideoInfo.js b/src/VideoInfo.js index 330d0c6..d6f611d 100644 --- a/src/VideoInfo.js +++ b/src/VideoInfo.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import Wikipedia from './areainfo/Wikipedia'; -import { Tabs, Tab} from 'react-bootstrap'; +import { Tabs, Tab, Table } from 'react-bootstrap'; import axios from 'axios'; import Linkify from "react-linkify"; import Card from "react-bootstrap/lib/Card"; @@ -18,16 +18,16 @@ class VideoInfo extends Component { videoId: '0J2QdDbelmY', comments: [] }; - this.momentDuration = this.momentDuration.bind(this); - this.ISO_8601parse = this.ISO_8601parse.bind(this); + this.momentDuration = this.momentDuration.bind(this); + this.ISO_8601parse = this.ISO_8601parse.bind(this); } - momentDuration(duration){ + momentDuration(duration) { return moment.duration(duration).format('hh:mm:ss'); - } - ISO_8601parse(a) { - return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); - } + } + ISO_8601parse(a) { + return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); + } // componentWillMount() { // if (this.props.match.params.id) { @@ -39,22 +39,22 @@ class VideoInfo extends Component { // } componentDidMount() { - console.log('didmount',this.state.videoId) + console.log('didmount', 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' - } - })]) + 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], @@ -160,8 +160,8 @@ class VideoInfo extends Component { render() { const { error, isLoaded, VideoDetails, comments } = this.state; - const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method - const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method + const momentDuration = this.momentDuration; // bind momentDuration in render to the actual method + const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method if (error) { return ( @@ -173,59 +173,68 @@ class VideoInfo extends Component { } 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}) - )}

-

- - -
{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} -

- - -
- {comments.map(function (comment,index) { - return( -
- - - - - {comment.snippet.topLevelComment.snippet.authorDisplayName} - - - - {comment.snippet.topLevelComment.snippet.textOriginal} - - - - -
- ) - })} -
- - -
+ {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: { }
+

+ + +
{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} +

+ + + {comments.map(function (comment, index) { + return ( + + + + + {comment.snippet.topLevelComment.snippet.authorDisplayName} + + + + {comment.snippet.topLevelComment.snippet.textOriginal} + + + + + ) + })} + + +
-
- - +
+ + ); } diff --git a/src/css/App.css b/src/css/App.css index b22648b..34f1e8e 100644 --- a/src/css/App.css +++ b/src/css/App.css @@ -2,15 +2,7 @@ background-color:#000000; } -/* .sticky{ - position: -webkit-sticky; - position: sticky; - top: 0; - z-index: 1040; -} */ - .downSection{ overflow-y: auto; overflow-x: hidden; - /* margin-top: 1vh; */ } \ No newline at end of file