Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VideoPreview component in Youtube app
/* ... */
$text-color-dark: #111111;
import React from 'react';
import {Image} from 'semantic-ui-react';
import './VideoPreview.scss';
export class VideoPreview extends React.Component {
render() {
return (
<div className='video-preview'>
<div className='image-container'>
<Image src='http://via.placeholder.com/210x118'/>
<div className='time-label'>
<span>05:22</span>
</div>
</div>
<div className='video-info'>
<div className='semi-bold show-max-two-lines'>Video title</div>
<div className='video-preview-metadata-container'>
<div className='channel-title'>Channel title</div>
<div><span>2.1M views • 2 days ago</span></div>
</div>
</div>
</div>
);
}
}
@import '../../styles/shared.scss';
.video-preview {
display: grid;
grid: 118px auto / 210px;
}
.video-info {
grid-row: 2 / 3;
grid-column: 1 / 2;
color: $text-color-dark;
.video-preview-metadata-container {
padding-top: 5px;
font-size: 13px;
color: #6E6E6E;
.channel-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.show-max-two-lines {
overflow: hidden;
line-height: 1.4em;
max-height: 2.8em;
}
.semi-bold {
font-weight: 600;
}
}
.image-container {
position: relative;
grid-row: 1 / 2;
grid-column: 1 / 2;
/* Video duration label at bottom right */
.time-label {
position: absolute;
background: $text-color-dark;
bottom: 0;
right: 0;
opacity: 0.8;
border-radius: 2px;
font-weight: 500;
color: white;
margin: 4px;
padding: 2px 4px;
line-height: 12px;
}
}
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.