Archived
saturday work
This commit is contained in:
matteo
+5
-3
@@ -38,24 +38,26 @@ render() {
|
||||
</Col>
|
||||
<Col
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }}
|
||||
className="ml-lg-5 p-0 p-sm-0"
|
||||
lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
|
||||
className="p-0 p-sm-0"
|
||||
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
|
||||
<div class="d-flex justify-content-center">
|
||||
<Button
|
||||
variant="outline-light"
|
||||
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
|
||||
className="w-50 pt-1 align-content-center"
|
||||
className="w-50 pt-1 "
|
||||
aria-controls="infovideo-collapse"
|
||||
aria-expanded={this.state.isInfoToggled}>
|
||||
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center">
|
||||
<Collapse in={this.state.isInfoToggled}>
|
||||
<div className="pt-1" id="infovideo-collapse">
|
||||
<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
|
||||
</div>
|
||||
</Collapse>
|
||||
</div>
|
||||
</Col>
|
||||
</ReactHeight>
|
||||
<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
|
||||
|
||||
+85
-76
@@ -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 (
|
||||
<React.Fragment>
|
||||
@@ -173,59 +173,68 @@ class VideoInfo extends Component {
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<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>
|
||||
</Tab>
|
||||
<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>
|
||||
</Tab>
|
||||
<Tab eventKey="comments" title="Comment">
|
||||
<div>
|
||||
{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={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} />
|
||||
{comment.snippet.topLevelComment.snippet.authorDisplayName}
|
||||
</Card.Title>
|
||||
<Card.Text>
|
||||
<Linkify>
|
||||
{comment.snippet.topLevelComment.snippet.textOriginal}
|
||||
</Linkify>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Tab>
|
||||
<Tab eventKey="wikipedia" title="Wikipedia">
|
||||
<div>
|
||||
<span class="h5 text-white">{VideoDetails.snippet.title}</span>
|
||||
<Tabs defaultActiveKey="video" id="tabs">
|
||||
<Tab eventKey="video" title="Video">
|
||||
{/*
|
||||
<Table striped bordered hover size="sm" variant="dark">
|
||||
<tbody>
|
||||
<tr><td><b>ID Video:</b></td><td>{VideoDetails.id}</td></tr>
|
||||
<tr><td><b>Publish Time:</b></td><td>{ISO_8601parse(VideoDetails.snippet.publishedAt)}</td></tr>
|
||||
<tr><td><b>Channel Name:</b></td><td>{VideoDetails.snippet.channelTitle}</td></tr>
|
||||
<tr><td><b>Description:</b></td><td>
|
||||
<p><Linkify>{VideoDetails.snippet.description}</Linkify></p></td></tr>
|
||||
|
||||
<tr><td> <b>Tags: </b></td><td>
|
||||
<p>{VideoDetails.snippet.tags.map(element =>
|
||||
(<span className="card-link">{element}</span>)
|
||||
)}</p></td></tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
*/}
|
||||
<p>
|
||||
<b>ID Video: </b>{VideoDetails.id}<br />
|
||||
<b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
|
||||
<b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
|
||||
{/* <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br /> */}
|
||||
<b>Tags: </b>{ }<br />
|
||||
</p>
|
||||
</Tab>
|
||||
<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>
|
||||
</Tab>
|
||||
<Tab eventKey="comments" title="Comment">
|
||||
{comments.map(function (comment, index) {
|
||||
return (
|
||||
<Card key={index} className="my-1">
|
||||
<Card.Body>
|
||||
<Card.Title>
|
||||
<Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{ width: '3rem', height: '3rem' }} />
|
||||
{comment.snippet.topLevelComment.snippet.authorDisplayName}
|
||||
</Card.Title>
|
||||
<Card.Text>
|
||||
<Linkify>
|
||||
{comment.snippet.topLevelComment.snippet.textOriginal}
|
||||
</Linkify>
|
||||
</Card.Text>
|
||||
</Card.Body>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</Tab>
|
||||
<Tab eventKey="wikipedia" title="Wikipedia">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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; */
|
||||
}
|
||||
Reference in New Issue
Block a user