Skip to content

Instantly share code, notes, and snippets.

Last active October 21, 2018 09:38
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Youtube VideoPreview format publication date with javascript-time-ago
import React from 'react';
import {Image} from 'semantic-ui-react';
import './VideoPreview.scss';
import TimeAgo from 'javascript-time-ago';
import en from 'javascript-time-ago/locale/en';
const timeAgo = new TimeAgo('en-US');
export class VideoPreview extends React.Component {
render() {
const {video} = this.props;
if (!video) {
return <div/>;
const viewAndTimeString = VideoPreview.getFormattedViewAndTime(video);
const horizontal = this.props.horizontal ? 'horizontal': null;
return (
{/* ... rest unchanged*/}
<div className='video-preview-metadata-container'>
<div className='channel-title'>{video.snippet.channelTitle}</div>
{/* ... rest unchanged*/}
static getFormattedViewAndTime(video) {
const publicationDate = new Date(video.snippet.publishedAt);
return `${video.statistics.viewCount} views • ${timeAgo.format(publicationDate)}`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment