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

white tabs and other fix

Browse Source
This commit is contained in:
matteo
2018-12-15 22:23:43 +01:00
parent 3c480c32dd
commit 6f8d7d506a
6 changed files with 52 additions and 15379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/VideoInfo.js
+38 -55
View File
@@ -1,11 +1,12 @@
import React, { Component } from 'react';
import Wikipedia from './areainfo/Wikipedia';
import { Col, Tabs, Tab,} from 'react-bootstrap';
import { Tabs, Tab} from 'react-bootstrap';
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';
import './css/VideoInfo.scss';
class VideoInfo extends Component {
constructor(props) {
@@ -17,12 +18,16 @@ class VideoInfo extends Component {
videoId: '0J2QdDbelmY',
comments: []
};
this.momentDuration = this.momentDuration.bind(this);
this.momentDuration = this.momentDuration.bind(this);
this.ISO_8601parse = this.ISO_8601parse.bind(this);
}
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');
}
// componentWillMount() {
// if (this.props.match.params.id) {
@@ -52,7 +57,7 @@ class VideoInfo extends Component {
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({
VideoDetails: videosResponse.data.items,
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
isLoaded: true
});
@@ -87,7 +92,7 @@ class VideoInfo extends Component {
})])
.then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({
VideoDetails: videosResponse.data.items,
VideoDetails: videosResponse.data.items[0],
comments: commentThreadResponse.data.items,
isLoaded: true
});
@@ -155,7 +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 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 (
<React.Fragment>
@@ -167,66 +173,44 @@ class VideoInfo extends Component {
} else {
return (
<React.Fragment>
<Col >
{/* codice per tabs reccomenders */}
<Tabs defaultActiveKey={1} id="tabs" animation={0}>
<Tab eventKey={1} title="Video">
<div style={{color : 'white'}}>
{this.state.VideoDetails.map(function(item,index){
return(
<div key={index}>
<h5>{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);
})}<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>
)
})}
<Tabs defaultActiveKey="video" id="tabs">
<Tab className="text-white" eventKey="video" title="Video">
<h5>{VideoDetails.snippet.title}</h5>
<p><b>ID Video: </b>{VideoDetails.id}<br/>
<b>Publish Time: </b> {ISO_8601parse(VideoDetails.snippet.publishedAt)}<br/>
<b>Channel Name:</b> {VideoDetails.snippet.channelTitle}<br/>
<b>Description:</b><br/>
<Linkify>{VideoDetails.snippet.description}</Linkify><br/>
<b>Tags: </b><br/>
<p>{VideoDetails.snippet.tags.map(element =>
(<span style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>)
)}</p>
</p>
</div>
)
}
)}
</div>
</Tab>
<Tab eventKey={2} title="Tecnical Informations">
<div style={{color:'white'}}>
{this.state.VideoDetails.map(function (item,index) {
return(
<div key={index}>
<h5 style={{marginTop : '1rem'}}>{item.snippet.title}</h5>
<p><b>Duration :</b>{ momentDuration(item.contentDetails.duration) }<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}
<Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
<h5 style={{marginTop : '1rem'}}>{VideoDetails.snippet.title}</h5>
<p><b>Duration: </b>{ momentDuration(VideoDetails.contentDetails.duration) }<br/>
<b>Definition: </b> {VideoDetails.contentDetails.definition}<br/>
<b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br/>
<b>Views: </b> {VideoDetails.statistics.viewCount}<br/>
<b>Likes: </b> {VideoDetails.statistics.likeCount}<br/>
<b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}
</p>
</div>
)
})}
</div>
</Tab>
<Tab eventKey={3} title="Comment">
<Tab eventKey="comments" title="Comment">
<div>
{this.state.comments.map(function (item,index) {
{comments.map(function (comment,index) {
return(
<div key={index}>
<Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1">
<Card.Body>
<Card.Title>
<Card.Img src={item.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />{item.snippet.topLevelComment.snippet.authorDisplayName}
<Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />
{comment.snippet.topLevelComment.snippet.authorDisplayName}
</Card.Title>
<Card.Text>
<Linkify>
{item.snippet.topLevelComment.snippet.textDisplay}
{comment.snippet.topLevelComment.snippet.textOriginal}
</Linkify>
</Card.Text>
</Card.Body>
@@ -236,13 +220,12 @@ class VideoInfo extends Component {
})}
</div>
</Tab>
<Tab eventKey={4} title="Wikipedia">
<Tab eventKey="wikipedia" title="Wikipedia">
<div>
</div>
</Tab>
</Tabs>
</Col>
</React.Fragment>
);
}