Archived
white tabs and other fix
This commit is contained in:
matteo
@@ -23,3 +23,4 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
.idea/
|
||||
package-lock.json
|
||||
|
||||
Generated
-15322
File diff suppressed because it is too large
Load Diff
@@ -11,6 +11,7 @@
|
||||
"lowdb": "^1.0.0",
|
||||
"moment": "^2.23.0",
|
||||
"moment-duration-format": "^2.2.2",
|
||||
"node-sass": "^4.11.0",
|
||||
"react": "^16.6.1",
|
||||
"react-app-polyfill": "^0.1.3",
|
||||
"react-bootstrap": "^1.0.0-beta.2",
|
||||
|
||||
+2
-2
@@ -38,8 +38,8 @@ render() {
|
||||
</Col>
|
||||
<Col
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
|
||||
className="p-0 p-sm-0"
|
||||
lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }}
|
||||
className="ml-lg-5 p-0 p-sm-0"
|
||||
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
|
||||
<div class="d-flex justify-content-center">
|
||||
<Button
|
||||
|
||||
+38
-55
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
// Required
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
// To extend
|
||||
@import '~bootstrap/scss/utilities/text';
|
||||
|
||||
a[aria-selected=false]{
|
||||
@extend .text-white;
|
||||
}
|
||||
Reference in New Issue
Block a user