GeneralTab rimosso,codice spostato in VideoInfo

package-lock.json

@@ -5488,8 +5488,7 @@
         },
         "ansi-regex": {
           "version": "2.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5507,13 +5506,11 @@
         },
         "balanced-match": {
           "version": "1.0.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5526,18 +5523,15 @@
         },
         "code-point-at": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5640,8 +5634,7 @@
         },
         "inherits": {
           "version": "2.0.3",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5651,7 +5644,6 @@
         "is-fullwidth-code-point": {
           "version": "1.0.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5664,20 +5656,17 @@
         "minimatch": {
           "version": "3.0.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
         },
         "minimist": {
           "version": "0.0.8",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5694,7 +5683,6 @@
         "mkdirp": {
           "version": "0.5.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5767,8 +5755,7 @@
         },
         "number-is-nan": {
           "version": "1.0.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5778,7 +5765,6 @@
         "once": {
           "version": "1.4.0",
           "bundled": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5854,8 +5840,7 @@
         },
         "safe-buffer": {
           "version": "5.1.1",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5885,7 +5870,6 @@
         "string-width": {
           "version": "1.0.2",
           "bundled": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5903,7 +5887,6 @@
         "strip-ansi": {
           "version": "3.0.1",
           "bundled": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5942,13 +5925,11 @@
         },
         "wrappy": {
           "version": "1.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
-          "bundled": true,
+          "bundled": true
-          "optional": true
         }
       }
     },
@@ -8145,6 +8126,14 @@
         "type-check": "~0.3.2"
       }
     },
+    "linkify-it": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.1.0.tgz",
+      "integrity": "sha512-4REs8/062kV2DSHxNfq5183zrqXMl7WP0WzABH9IeJI+NLm429FgE1PDecltYfnOoFDFlZGh2T8PfZn0r+GTRg==",
+      "requires": {
+        "uc.micro": "^1.0.1"
+      }
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -11488,6 +11477,16 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-linkify": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/react-linkify/-/react-linkify-0.2.2.tgz",
+      "integrity": "sha512-0S8cvUNtEgfJpIGDPKklyrnrTffJ63WuJAc4KaYLBihl5TjgH5cHUmYD+AXLpsV+CVmfoo/56SUNfrZcY4zYMQ==",
+      "requires": {
+        "linkify-it": "^2.0.3",
+        "prop-types": "^15.5.8",
+        "tlds": "^1.57.0"
+      }
+    },
     "react-overlays": {
       "version": "1.0.0-beta.17",
       "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-1.0.0-beta.17.tgz",
@@ -13737,6 +13736,11 @@
       "resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
     },
+    "tlds": {
+      "version": "1.203.1",
+      "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.203.1.tgz",
+      "integrity": "sha512-7MUlYyGJ6rSitEZ3r1Q1QNV8uSIzapS8SmmhSusBuIc7uIxPPwsKllEP0GRp1NS6Ik6F+fRZvnjDWm3ecv2hDw=="
+    },
     "tmp": {
       "version": "0.0.33",
       "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -13895,6 +13899,11 @@
       "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
       "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
     },
+    "uc.micro": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+      "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg=="
+    },
     "uglify-js": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.9.tgz",

package.json

@@ -3,19 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "axios": "^0.18.0",
+    "axios": "latest",
     "bootstrap": "^4.1.3",
     "express": "^4.16.4",
     "react": "^16.6.1",
     "react-app-polyfill": "^0.1.3",
     "react-bootstrap": "^1.0.0-beta.2",
     "react-dom": "^16.6.1",
+    "react-linkify": "^0.2.2",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.1",
     "react-youtube": "^7.8.0",
-    "wikijs": "^4.8.1",
+    "wikijs": "^4.8.1"
-    "axios": "latest",
-    "axios": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

src/GeneralTab.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
-import './App.css';
+//import './App.css';
 import './GeneralTab.css';
 import 'bootstrap/dist/css/bootstrap.css';
 import {Tab,Tabs,ListGroup,ListGroupItem} from 'react-bootstrap';
 import axios from "axios";
 import Card from "react-bootstrap/lib/Card";
 import Linkify  from 'react-linkify';
+import VideoPlayer from './VideoPlayer';
 
 class GeneralTab extends Component {
     constructor() {
@@ -21,7 +22,7 @@ class GeneralTab extends Component {
         axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
             params: {
                 'part': 'snippet',
-                'videoId': 'qeMFqkcPYcg', //Da sostituire con variabile
+                'videoId': this.state.videoId, //Da sostituire con variabile
                 'order': 'relevance',
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
@@ -39,7 +40,7 @@ class GeneralTab extends Component {
         axios.get('https://www.googleapis.com/youtube/v3/videos', {
             params: {
                 'part' : 'snippet,contentDetails,statistics',
-                'id' : 'qeMFqkcPYcg', //Da sostituire con variabile
+                'id' : this.state.videoId, //Da sostituire con variabile
                 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
             }
         }).then(

src/VideoInfo.js

@@ -1,8 +1,10 @@
   import React, { Component } from 'react';
   // import PropTypes from 'prop-types';
   import Wikipedia from './areainfo/Wikipedia';
-  import { Col, Tabs, Tab } from 'react-bootstrap';
+  import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap';
   import axios from 'axios';
+  import Linkify from "react-linkify";
+  import Card from "react-bootstrap/lib/Card";
 
   class VideoInfo extends Component {
     constructor(props) {
@@ -11,7 +13,8 @@
         error: null,
         isLoaded: false,
         VideoDetails: {},
-        videoId: '0J2QdDbelmY'
+        videoId: '0J2QdDbelmY',
+        comments : []
       };
 
     }
@@ -34,7 +37,7 @@
         }
       }).then(response => {
         this.setState({
-          VideoDetails: response.data.items[0],
+          VideoDetails: response.data.items,
           isLoaded: true});
     }, error => {
         console.error(error);
@@ -43,6 +46,25 @@
           error
         });
       });
+
+        //Richiesta per ottenere i commenti del video
+        axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
+            params: {
+                'part': 'snippet',
+                'videoId': this.state.videoId, //Da sostituire con variabile
+                'order': 'relevance',
+                'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
+            }
+        }).then(
+            response => {
+                this.setState({
+                    comments: response.data.items,
+                });
+            },
+            error => {
+                console.error(error);
+            }
+        )
     }
 
     // componentWillReceiveProps(nextProps) {
@@ -84,19 +106,83 @@
       } else {
       return (
         <React.Fragment>
-          <Col className='border border-dark' lg={{span:7}}>
+          <Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
           {/* codice per tabs reccomenders */}
-          <Tabs defaultActiveKey="a" id="uncontrolled-tab-example">
+              <Tabs defaultActiveKey={1} id="tabs" animation={0}>
-    <Tab eventKey="a" title="A">
+                  <Tab eventKey={1} title="Video">
-      <Wikipedia query={ this.props.location.state ? this.props.location.state.title : VideoDetails.snippet.title } />
+                      <div>
-    </Tab>
+                          {this.state.VideoDetails.map(function(item,index){
-    <Tab eventKey="b" title="B">
+                                  return(
-      <p>{}</p>
+                                      <div key={index}>
-    </Tab>
+                                          <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
-    <Tab eventKey="c" title="C">
+                                          <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem',maxWidth: ' 50rem'}}>
-    <p>C</p>
+                                              <ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
-    </Tab>
+                                              <ListGroupItem><h5>Publish Time</h5>{item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
-  </Tabs>
+                                                  return(p3+'/'+p2+'/'+p1+' - '+p4+':'+p5+':'+p6);
+                                              })}
+                                              </ListGroupItem>
+                                              <ListGroupItem><h5>Channel Name</h5>{item.snippet.channelTitle}</ListGroupItem>
+                                              <ListGroupItem><h5>Description</h5><Linkify>{item.snippet.description}</Linkify></ListGroupItem>
+                                              <ListGroupItem><h5>Tags</h5>{item.snippet.tags.map(function(element,index){
+                                                  return(
+                                                      <span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
+                                                  )
+                                              })}</ListGroupItem>
+                                          </ListGroup>
+                                      </div>
+                                  )
+                              }
+                          )}
+                      </div>
+                  </Tab>
+                  <Tab eventKey={2} title="Tecnical Informations" >
+                      <div>
+                          {this.state.VideoDetails.map(function (item,index) {
+                              return(
+                                  <div key={index}>
+                                      <h1 style={{margin : '1rem'}}>{item.snippet.title}</h1>
+                                      <ListGroup style = {{display : 'inline-block',marginLeft : '2rem',marginTop : '1rem'}}>
+                                          <ListGroupItem><h5>Duration</h5>{item.contentDetails.duration.replace(/(PT(\d+)H(\d+)M(\d+)S)|(PT(\d+)M(\d+)S)/,function(match,p1,p2,p3,p4,p5,p6,p7){
+                                              if(p1) return(p2+':'+p3+':'+p4);
+                                              else return(p6+':'+p7);})}
+                                          </ListGroupItem>
+                                          <ListGroupItem><h5>Definition</h5>{item.contentDetails.definition}</ListGroupItem>
+                                          <ListGroupItem><h5>Dimension</h5>{item.contentDetails.dimension}</ListGroupItem>
+                                          <ListGroupItem><h5>Views</h5>{item.statistics.viewCount}</ListGroupItem>
+                                          <ListGroupItem><h5>Likes</h5>{item.statistics.likeCount}</ListGroupItem>
+                                          <ListGroupItem><h5>Dislikes</h5>{item.statistics.dislikeCount}</ListGroupItem>
+                                      </ListGroup>
+                                  </div>
+                              )
+                          })}
+                      </div>
+                  </Tab>
+                  <Tab eventKey={3} title="Comment">
+                      <ul>
+                          {this.state.comments.map(function (item,index) {
+                              return(
+                                  <div key={index}>
+                                      <Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
+                                          <Card.Body>
+                                              <Card.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '5rem', height : '5rem',padding : '1rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
+                                              <Card.Text>
+                                                  <Linkify>
+                                                      {item.snippet.topLevelComment.snippet.textDisplay}
+                                                  </Linkify>
+                                              </Card.Text>
+                                          </Card.Body>
+                                      </Card>
+                                  </div>
+                              )
+                          })}
+                      </ul>
+                  </Tab>
+                  <Tab eventKey={4} title="Wikipedia">
+                      <div>
+
+                      </div>
+                  </Tab>
+              </Tabs>
           </Col>
           <Col className='border border-dark'  lg={{span:4, offset:1}}>
           <p>2</p>