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

-Aggiungo Reccomender Related.

Browse Source 
-Modificato App.js in modo che il player sia sulla sinistra e le informazioni sulla destra;inoltre le informazioni del video vengono visualizzate anche per il video iniziale quando si apre la pagina per la prima volta.
-Modificato render di VideoInfo.
This commit is contained in:
Giampiero Galeazzi
2018-12-13 19:47:34 +01:00
parent 3110e36b4f
commit a0f8689baa
4 changed files with 133 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VideoInfo.js
+30 -35
View File
@@ -1,7 +1,7 @@
import React, { Component } from 'react';
// import PropTypes from 'prop-types';
import Wikipedia from './areainfo/Wikipedia';
import {Col, Tabs, Tab, ListGroup, ListGroupItem} from 'react-bootstrap';
import {Col, Tabs, Tab,} from 'react-bootstrap';
import axios from 'axios';
import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card";
@@ -51,7 +51,7 @@
axios.get('https://www.googleapis.com/youtube/v3/commentThreads', {
params: {
'part': 'snippet',
'videoId': this.state.videoId, //Da sostituire con variabile
'videoId': this.state.videoId,
'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
}
@@ -106,65 +106,63 @@
} else {
return (
<React.Fragment>
<Col className='border border-dark' lg={{span:7}} style={{overflow: 'auto',overflowY : 'scroll'}}>
<Col style={{width:'35rem',height:'35rem',marginTop:'1rem'}}>
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video">
<Tab eventKey={1} title="Video" style={{overflow:'auto',overflowY:'scroll',height:'30rem'}}>
<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',maxWidth: ' 50rem'}}>
<ListGroupItem><h5>ID Video</h5>{item.id}</ListGroupItem>
<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){
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<p><b>ID Video :</b> {item.id}<br/>
<b>Publish Time :</b> {item.snippet.publishedAt.replace(/(\d+)-(\d+)-(\d+)T(\d+):(\d+):(\d+).000Z/,function(match,p1,p2,p3,p4,p5,p6){
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){
})}<br/>
<b>Channel Name :</b> {item.snippet.channelTitle}<br/>
<b>Description :</b><br/><Linkify>{item.snippet.description}</Linkify><br/>
<b>Tags :</b><br/>{item.snippet.tags.map(function(element,index){
if(index===4)
return (<br/>);
return(
<span key={index} style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>
)
})}</ListGroupItem>
</ListGroup>
})}
</p>
</div>
)
}
)}
</div>
</Tab>
<Tab eventKey={2} title="Tecnical Informations" >
<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){
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<p><b>Duration :</b> {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>
else return(p6+':'+p7);})}<br/>
<b>Definition :</b> {item.contentDetails.definition}<br/>
<b>Dimension :</b> {item.contentDetails.dimension}<br/>
<b> Views :</b> {item.statistics.viewCount}<br/>
<b>Likes :</b> {item.statistics.likeCount}<br/>
<b>Dislikes :</b> {item.statistics.dislikeCount}
</p>
</div>
)
})}
</div>
</Tab>
<Tab eventKey={3} title="Comment">
<ul>
<Tab eventKey={3} title="Comment" style={{overflow:'auto',overflowY:'scroll',height: '30rem'}}>
<div>
{this.state.comments.map(function (item,index) {
return(
<div key={index}>
<Card style = {{width: '40rem',fontSize : 'medium',margin : '1em',borderRadius : '1rem'}}>
<Card style = {{width: '30rem',fontSize : 'small',marginTop : '0.5rem',marginBottom:'0,5rem',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.Title><Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}</Card.Title>
<Card.Text>
<Linkify>
{item.snippet.topLevelComment.snippet.textDisplay}
@@ -175,7 +173,7 @@
</div>
)
})}
</ul>
</div>
</Tab>
<Tab eventKey={4} title="Wikipedia">
<div>
@@ -184,9 +182,6 @@
</Tab>
</Tabs>
</Col>
<Col className='border border-dark' lg={{span:4, offset:1}}>
<p>2</p>
</Col>
</React.Fragment>
);
}