LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-08-30 08:51:24 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

basic video length on file tiles

Browse source
This commit is contained in:
Sean Yesmunt 2020-01-28 13:36:58 -05:00
parent 8c9fe047aa
commit dfde740ecb
4 changed files with 25 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
ui/component/claimPreviewTile/view.jsx
View file

@ -11,6 +11,7 @@ import SubscribeButton from 'component/subscribeButton';
import useGetThumbnail from 'effects/use-get-thumbnail'; import useGetThumbnail from 'effects/use-get-thumbnail';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { parseURI } from 'lbry-redux'; import { parseURI } from 'lbry-redux';
import VideoDuration from 'component/videoDuration';
type Props = { type Props = {
uri: string, uri: string,
@ -147,7 +148,9 @@ function ClaimPreviewTile(props: Props) {
})} })}
> >
<NavLink {...navLinkProps}> <NavLink {...navLinkProps}>
<FileThumbnail thumbnail={thumbnailUrl} /> <FileThumbnail thumbnail={thumbnailUrl}>
<VideoDuration uri={uri} className="claim-tile__video-length" />
</FileThumbnail>
</NavLink> </NavLink>
<NavLink {...navLinkProps}> <NavLink {...navLinkProps}>
<h2 className="claim-tile__title"> <h2 className="claim-tile__title">

10
ui/component/fileThumbnail/view.jsx
View file

@ -1,17 +1,19 @@
// @flow // @flow
import type { Node } from 'react';
import React from 'react'; import React from 'react';
// import FreezeframeWrapper from './FreezeframeWrapper'; // import FreezeframeWrapper from './FreezeframeWrapper';
import Placeholder from './placeholder.png'; import Placeholder from './placeholder.png';
type Props = { type Props = {
thumbnail: ?string, // externally sourced image thumbnail: ?string, // externally sourced image
children?: Node,
}; };
const className = 'media__thumb'; const className = 'media__thumb';
class CardMedia extends React.PureComponent<Props> { class CardMedia extends React.PureComponent<Props> {
render() { render() {
const { thumbnail } = this.props; const { thumbnail, children } = this.props;
// Disabling temporarily to see if people complain // Disabling temporarily to see if people complain
// if (thumbnail && thumbnail.endsWith('gif')) { // if (thumbnail && thumbnail.endsWith('gif')) {
@ -32,7 +34,11 @@ class CardMedia extends React.PureComponent<Props> {
url = thumbnail || Placeholder; url = thumbnail || Placeholder;
// @endif // @endif
return <div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className} />; return (
<div style={{ backgroundImage: `url('${url.replace(/'/g, "\\'")}')` }} className={className}>
{children}
</div>
);
} }
} }

12
ui/scss/component/_claim-list.scss
View file

@ -369,3 +369,15 @@
height: 2.1rem; height: 2.1rem;
font-size: var(--font-body); font-size: var(--font-body);
} }
.claim-tile__video-length {
position: absolute;
bottom: var(--spacing-small);
right: var(--spacing-small);
font-size: var(--font-small);
padding: 0.1rem;
border-radius: var(--border-radius);
font-weight: bold;
background-color: black;
color: white;
}

1
ui/scss/component/_media.scss
View file

@ -3,6 +3,7 @@
.media__thumb { .media__thumb {
@include thumbnail; @include thumbnail;
position: relative;
border-radius: var(--card-radius); border-radius: var(--card-radius);
object-fit: cover; object-fit: cover;
background-color: var(--color-placeholder-background); background-color: var(--color-placeholder-background);