Archived
buon natale
This commit is contained in:
matteo
+3
-5
@@ -27,10 +27,10 @@ render() {
|
||||
<ReactHeight className="row" onHeightReady={height => { this.setState({ navHeight: height }); console.log('l', height) }}>
|
||||
<TopBar />
|
||||
</ReactHeight>
|
||||
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2" >
|
||||
<ReactHeight onHeightReady={height => this.setState({ blackbgHeight: height })} className="row upperSection p-2 px-5" >
|
||||
<Col
|
||||
xs="12"
|
||||
lg={this.state.isInfoToggled ? { span: 6, offset: 1, order: 2 } : { span: 7, offset: 1, order: 2 }}
|
||||
lg={this.state.isInfoToggled ? { span: 6, offset: 0, order: 2 } : { span: 7, offset: 1, order: 2 }}
|
||||
className="align-content-center pt-2 p-1 pr-2">
|
||||
<ReactHeight onHeightReady={height => this.setState({ playerHeight: height })}>
|
||||
<Route path={["/video/:id", "/*"]} component={VideoPlayer} /> {/* change component to children */}
|
||||
@@ -45,19 +45,17 @@ render() {
|
||||
<Button
|
||||
variant="outline-light"
|
||||
onClick={() => this.setState({ isInfoToggled: !this.state.isInfoToggled })}
|
||||
className="w-50 pt-1 "
|
||||
className="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'>
|
||||
|
||||
+19
-92
@@ -29,15 +29,6 @@ class VideoInfo extends Component {
|
||||
return moment(a, moment.ISO_8601).format('ddd, DD/MM/YYYY hh:mm:ss');
|
||||
}
|
||||
|
||||
// componentWillMount() {
|
||||
// if (this.props.match.params.id) {
|
||||
// if (this.props.match.params.id === this.state.videoId) { }
|
||||
// else {
|
||||
// this.setState({ videoId: this.props.match.params.id });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
componentDidMount() {
|
||||
console.log('didmount', this.state.videoId)
|
||||
axios.all([
|
||||
@@ -71,21 +62,18 @@ class VideoInfo extends Component {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
console.info('didup', this.props.match.params.id)
|
||||
// this.setState((state, props) => { return { }});
|
||||
if (this.props.match.params.id && !(prevProps.match.params.id === this.props.match.params.id)) {
|
||||
this.setState({ videoId: this.props.match.params.id, isLoaded: false });
|
||||
if(!(prevState.videoId === 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.props.match.params.id,
|
||||
'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.props.match.params.id,
|
||||
'videoId': this.state.videoId,
|
||||
'order': 'relevance',
|
||||
'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
}
|
||||
@@ -104,110 +92,49 @@ class VideoInfo extends Component {
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
console.log(nextProps)
|
||||
if(nextProps.match.params.id && !( nextProps.match.params.id === this.state.videoId )){
|
||||
this.setState({videoId: nextProps.match.params.id})
|
||||
} // mindfuck
|
||||
}
|
||||
|
||||
// shouldComponentUpdate(nextProps, nextState){
|
||||
// console.log('shouldup', nextProps, nextState)
|
||||
// if(nextProps.match.params.id)
|
||||
// return console.log('a',!(nextProps.match.params.id === this.state.videoId)) && !(nextProps.match.params.id === this.state.videoId) ;
|
||||
// else if(!(nextState.videoId === this.state.videoId))
|
||||
// return console.log('b') && true;
|
||||
// else if(nextState.isLoaded)
|
||||
// return console.log('d') && true;
|
||||
// else
|
||||
// return console.log('c') && false;
|
||||
|
||||
// }
|
||||
|
||||
// componentWillReceiveProps(nextProps){
|
||||
// if (nextProps.match.params.id === this.state.videoId) { console.log('1',nextProps)}
|
||||
// else if (nextProps.match.params.id) {
|
||||
// console.log('2',nextProps)
|
||||
// this.setState({ videoId: nextProps.match.params.id });
|
||||
// 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': nextProps.match.params.id,
|
||||
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
// }
|
||||
// }), axios.get('https://www.googleapis.com/youtube/v3/commentThreads', { //Richiesta per ottenere i commenti del video
|
||||
// params: {
|
||||
// 'part': 'snippet',
|
||||
// 'videoId': nextProps.match.params.id,
|
||||
// 'order': 'relevance',
|
||||
// 'key': 'AIzaSyA21Odw9UdfiOJnxvA_eDfOW0OxuUfHKig'
|
||||
// }
|
||||
// })])
|
||||
// .then(axios.spread((videosResponse, commentThreadResponse) => {
|
||||
// this.setState({
|
||||
// VideoDetails: videosResponse.data.items,
|
||||
// comments: commentThreadResponse.data.items,
|
||||
// isLoaded: true
|
||||
// });
|
||||
// }), error => {
|
||||
// console.error(error);
|
||||
// this.setState({
|
||||
// isLoaded: true,
|
||||
// error
|
||||
// });
|
||||
// });
|
||||
// }
|
||||
// else{
|
||||
// console.log('3',nextProps)
|
||||
// }
|
||||
// }
|
||||
|
||||
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
|
||||
if (error) {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<span className="text-white">
|
||||
Error: {error.message} -- Cannot get {error.config.url}
|
||||
</React.Fragment>
|
||||
</span>
|
||||
);
|
||||
} else if (!isLoaded) {
|
||||
return <React.Fragment>Loading...</React.Fragment>;
|
||||
return <span className="text-white">Loading...</span>;
|
||||
} else {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<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>
|
||||
*/}
|
||||
<Tab className="text-white" eventKey="video" title="Video">
|
||||
<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 />
|
||||
<b>Description: </b><Linkify>{VideoDetails.snippet.description}</Linkify><br />
|
||||
<b>Tags: </b>{ VideoDetails.snippet.tags ?
|
||||
VideoDetails.snippet.tags.map(tag => (<span>{tag}</span>)): ""}
|
||||
{/* tags should be links */}
|
||||
</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}
|
||||
<b>Likes: </b> {VideoDetails.statistics.likeCount}{String.fromCodePoint(0x1F44D)}<br />
|
||||
<b>Dislikes: </b> {VideoDetails.statistics.dislikeCount}{String.fromCodePoint(0x1F44E)}
|
||||
</p>
|
||||
</Tab>
|
||||
<Tab eventKey="comments" title="Comment">
|
||||
|
||||
Reference in New Issue
Block a user