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

saturday work

Browse Source
This commit is contained in:
matteo
2018-12-16 02:16:01 +01:00
parent 6f8d7d506a
commit c1c69d0797
3 changed files with 90 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+5 -3
View File
@@ -38,24 +38,26 @@ render() {
</Col> </Col>
<Col <Col
xs="12" xs="12"
lg={this.state.isInfoToggled ? { span: 4, order: 1 } : { span: 3, order: 1 }} lg={this.state.isInfoToggled ? { span: 5, order: 1 } : { span: 3, order: 1 }}
className="ml-lg-5 p-0 p-sm-0" className="p-0 p-sm-0"
style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} > style={{ 'overflow': "auto", 'max-height': this.state.playerHeight }} >
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<Button <Button
variant="outline-light" variant="outline-light"
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })} 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-controls="infovideo-collapse"
aria-expanded={this.state.isInfoToggled}> aria-expanded={this.state.isInfoToggled}>
{this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"} {this.state.isInfoToggled ? "Nascondi informazioni" : "Mostra informazioni"}
</Button> </Button>
</div> </div>
<div class="d-flex justify-content-center">
<Collapse in={this.state.isInfoToggled}> <Collapse in={this.state.isInfoToggled}>
<div className="pt-1" id="infovideo-collapse"> <div className="pt-1" id="infovideo-collapse">
<Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} /> <Route path={["/video/:id", "/search/:query", "/"]} component={VideoInfo} />
</div> </div>
</Collapse> </Collapse>
</div>
</Col> </Col>
</ReactHeight> </ReactHeight>
<Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'> <Row style={{ "max-height": `calc(99vh - ${this.state.blackbgHeight}px - ${this.state.navHeight}px)` }} className='mt-1 downSection'>
src/VideoInfo.js
+85 -76
View File
@@ -1,6 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Wikipedia from './areainfo/Wikipedia'; import Wikipedia from './areainfo/Wikipedia';
import { Tabs, Tab} from 'react-bootstrap'; import { Tabs, Tab, Table } from 'react-bootstrap';
import axios from 'axios'; import axios from 'axios';
import Linkify from "react-linkify"; import Linkify from "react-linkify";
import Card from "react-bootstrap/lib/Card"; import Card from "react-bootstrap/lib/Card";
@@ -18,16 +18,16 @@ class VideoInfo extends Component {
videoId: '0J2QdDbelmY', videoId: '0J2QdDbelmY',
comments: [] comments: []
}; };
this.momentDuration = this.momentDuration.bind(this); this.momentDuration = this.momentDuration.bind(this);
this.ISO_8601parse = this.ISO_8601parse.bind(this); this.ISO_8601parse = this.ISO_8601parse.bind(this);
} }
momentDuration(duration){ momentDuration(duration) {
return moment.duration(duration).format('hh:mm:ss'); return moment.duration(duration).format('hh:mm:ss');
} }
ISO_8601parse(a) { ISO_8601parse(a) {
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss'); return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
} }
// componentWillMount() { // componentWillMount() {
// if (this.props.match.params.id) { // if (this.props.match.params.id) {
@@ -39,22 +39,22 @@ class VideoInfo extends Component {
// } // }
componentDidMount() { componentDidMount() {
console.log('didmount',this.state.videoId) console.log('didmount', this.state.videoId)
axios.all([ axios.all([
axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video axios.get('https://www.googleapis.com/youtube/v3/videos', { //Richiesta per tutte le info sul video
params: { params: {
'part': 'snippet,contentDetails,statistics,topicDetails', 'part': 'snippet,contentDetails,statistics,topicDetails',
'id': this.state.videoId, 'id': this.state.videoId,
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
}), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
params: { params: {
'part': 'snippet', 'part': 'snippet',
'videoId': this.state.videoId, 'videoId': this.state.videoId,
'order': 'relevance', 'order': 'relevance',
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig' 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
} }
})]) })])
.then(axios.spread((videosResponse, commentThreadResponse) => { .then(axios.spread((videosResponse, commentThreadResponse) => {
this.setState({ this.setState({
VideoDetails: videosResponse.data.items[0], VideoDetails: videosResponse.data.items[0],
@@ -160,8 +160,8 @@ class VideoInfo extends Component {
render() { render() {
const { error, isLoaded, VideoDetails, comments } = this.state; 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 const ISO_8601parse = this.ISO_8601parse; // bind momentDuration in render to the actual method
if (error) { if (error) {
return ( return (
<React.Fragment> <React.Fragment>
@@ -173,59 +173,68 @@ class VideoInfo extends Component {
} else { } else {
return ( return (
<React.Fragment> <React.Fragment>
<Tabs defaultActiveKey="video" id="tabs"> <span class="h5 text-white">{VideoDetails.snippet.title}</span>
<Tab className="text-white" eventKey="video" title="Video"> <Tabs defaultActiveKey="video" id="tabs">
<h5>{VideoDetails.snippet.title}</h5> <Tab eventKey="video" title="Video">
<p><b>ID Video: </b>{VideoDetails.id}<br/> {/*
<b>Publish Time: </b> {ISO_8601parse(VideoDetails.snippet.publishedAt)}<br/> <Table striped bordered hover size="sm" variant="dark">
<b>Channel Name:</b> {VideoDetails.snippet.channelTitle}<br/> <tbody>
<b>Description:</b><br/> <tr><td><b>ID Video:</b></td><td>{VideoDetails.id}</td></tr>
<Linkify>{VideoDetails.snippet.description}</Linkify><br/> <tr><td><b>Publish Time:</b></td><td>{ISO_8601parse(VideoDetails.snippet.publishedAt)}</td></tr>
<b>Tags: </b><br/> <tr><td><b>Channel Name:</b></td><td>{VideoDetails.snippet.channelTitle}</td></tr>
<p>{VideoDetails.snippet.tags.map(element => <tr><td><b>Description:</b></td><td>
(<span style={{margin : '0.5rem',textDecoration : 'underline'}}>{element}</span>) <p><Linkify>{VideoDetails.snippet.description}</Linkify></p></td></tr>
)}</p>
</p> <tr><td> <b>Tags: </b></td><td>
</Tab> <p>{VideoDetails.snippet.tags.map(element =>
<Tab className="text-white" eventKey="techinfo" title="Tecnical Informations"> (<span className="card-link">{element}</span>)
<h5 style={{marginTop : '1rem'}}>{VideoDetails.snippet.title}</h5> )}</p></td></tr>
<p><b>Duration: </b>{ momentDuration(VideoDetails.contentDetails.duration) }<br/> </tbody>
<b>Definition: </b> {VideoDetails.contentDetails.definition}<br/> </Table>
<b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br/> */}
<b>Views: </b> {VideoDetails.statistics.viewCount}<br/> <p>
<b>Likes: </b> {VideoDetails.statistics.likeCount}<br/> <b>ID Video: </b>{VideoDetails.id}<br />
<b>Dislikes: </b> {VideoDetails.statistics.dislikeCount} <b>Published: </b>{ISO_8601parse(VideoDetails.snippet.publishedAt)}<br />
</p> <b>Channel name: </b>{VideoDetails.snippet.channelTitle}<br />
</Tab> {/* <b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br /> */}
<Tab eventKey="comments" title="Comment"> <b>Tags: </b>{ }<br />
<div> </p>
{comments.map(function (comment,index) { </Tab>
return( <Tab className="text-white" eventKey="techinfo" title="Tecnical Informations">
<div key={index}> <h5 style={{ marginTop: '1rem' }}>{VideoDetails.snippet.title}</h5>
<Card style={{width: '30rem',fontSize : 'small',borderRadius : '1rem'}} className="my-1"> <p><b>Duration: </b>{momentDuration(VideoDetails.contentDetails.duration)}<br />
<Card.Body> <b>Definition: </b> {VideoDetails.contentDetails.definition}<br />
<Card.Title> <b>Dimension: </b> {VideoDetails.contentDetails.dimension}<br />
<Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{width : '3rem', height : '3rem'}} /> <b>Views: </b> {VideoDetails.statistics.viewCount}<br />
{comment.snippet.topLevelComment.snippet.authorDisplayName} <b>Likes: </b> {VideoDetails.statistics.likeCount}<br />
</Card.Title> <b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}
<Card.Text> </p>
<Linkify> </Tab>
{comment.snippet.topLevelComment.snippet.textOriginal} <Tab eventKey="comments" title="Comment">
</Linkify> {comments.map(function (comment, index) {
</Card.Text> return (
</Card.Body> <Card key={index} className="my-1">
</Card> <Card.Body>
</div> <Card.Title>
) <Card.Img src={comment.snippet.topLevelComment.snippet.authorProfileImageUrl} style={{ width: '3rem', height: '3rem' }} />
})} {comment.snippet.topLevelComment.snippet.authorDisplayName}
</div> </Card.Title>
</Tab> <Card.Text>
<Tab eventKey="wikipedia" title="Wikipedia"> <Linkify>
<div> {comment.snippet.topLevelComment.snippet.textOriginal}
</Linkify>
</Card.Text>
</Card.Body>
</Card>
)
})}
</Tab>
<Tab eventKey="wikipedia" title="Wikipedia">
<div>
</div> </div>
</Tab> </Tab>
</Tabs> </Tabs>
</React.Fragment> </React.Fragment>
); );
} }
src/css/App.css
-8
View File
@@ -2,15 +2,7 @@
background-color:#000000; background-color:#000000;
} }
/* .sticky{
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1040;
} */
.downSection{ .downSection{
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
/* margin-top: 1vh; */
} }