LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

adds playbutton overlay to videos #753

Merged
jessopb merged 1 commit from playover into master 2018-11-27 04:53:17 +01:00
Conversation 0 Commits 1 Files changed 2 +43 -11
2 changed files with 43 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
client/scss/_asset-preview.scss
View file

@ -1,16 +1,17 @@
.asset-preview-image { .asset-preview__image {
width : 100%; width : 100%;
padding: 0; padding: 0;
margin : 0; margin : 0;
} }
.asset-preview-video { .asset-preview__video {
cursor: pointer; cursor: pointer;
background-color: #ffffff; background-color: #ffffff;
width: 100%; width: 100%;
position: relative;
} }
h3.list-title { h3.asset-preview__title {
margin: 0; margin: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
word-wrap: break-word; word-wrap: break-word;
@ -18,3 +19,31 @@ h3.list-title {
line-height: 1em; line-height: 1em;
max-height: 2em; max-height: 2em;
} }
.asset-preview__play-wrapper {
border: 0px;
padding: 0px;
margin: auto;
position: relative;
}
.asset-preview__play-overlay {
padding: 0;
border: 0;
position: absolute;
opacity: .50;
height: 50%;
top: 25%;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
margin: 0 auto;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg stroke='lightgray' stroke-width='2' fill='white' fill-rule='evenodd' stroke-linejoin='round'%3E %3Cpolygon points='5 21 5 3 21 12'/%3E %3C/g%3E %3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
}
.asset-preview__play-wrapper:hover .asset-preview__play-overlay {
opacity: 1.0;
}

11
client/src/components/AssetPreview/index.jsx
View file

@ -15,11 +15,11 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
<Link to={showUrl} className='asset-preview'> <Link to={showUrl} className='asset-preview'>
<div> <div>
<img <img
className={'asset-preview-image'} className={'asset-preview__image'}
src={embedUrl} src={embedUrl}
alt={name} alt={name}
/> />
<h3 className='list-title'>{title}</h3> <h3 className='asset-preview__title'>{title}</h3>
</div> </div>
</Link> </Link>
); );
@ -27,12 +27,15 @@ const AssetPreview = ({ defaultThumbnail, claimData }) => {
return ( return (
<Link to={showUrl} className='asset-preview'> <Link to={showUrl} className='asset-preview'>
<div> <div>
<div className='asset-preview__play-wrapper'>
<img <img
className={'asset-preview-video'} className={'asset-preview__video'}
src={thumbnail || defaultThumbnail} src={thumbnail || defaultThumbnail}
alt={name} alt={name}
/> />
<h3 className='list-title'>{title}</h3> <div className='asset-preview__play-overlay'></div>
</div>
<h3 className='asset-preview__title'>{title}</h3>
</div> </div>
</Link> </Link>
); );