Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Youtube in React: making VideoInfoBox dynamic
/* ... */
export class VideoInfoBox extends React.Component {
/* ... */
render() {
if (!this.props.video || !this.props.channel) {
return <div/>;
}
/* ... */
const {channel} = this.props;
const buttonText = this.getSubscriberButtonText();
const channelThumbnail = channel.snippet.thumbnails.medium.url;
const channelTitle = channel.snippet.title;
return (
<div>
<div className='video-info-box'>
<Image className='channel-image' src={channelThumbnail} circular/>
<div className="video-info">
<div className='channel-name'>{channelTitle}</div>
<div className='video-publication-date'>{publishedAtString}</div>
</div>
<Button color='youtube'>{buttonText}</Button>
<div className="video-description">
<div className={descriptionTextClass}>
{descriptionParagraphs}
</div>
<Button compact onClick={this.onToggleCollapseButtonClick}>{buttonTitle}</Button>
</div>
</div>
<Divider/>
</div>
);
}
/* ... */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.