LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Merge pull request #2022 from lbryio/placeholder

Browse source 
Add content placeholders and add time info to FileCard/FileTile
This commit is contained in:
Sean Yesmunt 2018-10-12 15:00:52 -04:00 • committed by GitHub
commit be7fb04c99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 207 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -9,6 +9,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
* Allow typing of encryption password without clicking entry box ([#1977](https://github.com/lbryio/lbry-desktop/pull/1977))
* Focus on search bar with {cmd,ctrl} + "l" ([#2003](https://github.com/lbryio/lbry-desktop/pull/2003))
* Add support for clickable channel names on explore page headings ([#2023](https://github.com/lbryio/lbry-desktop/pull/2023))
* Content loading placeholder styles on FileCard/FileTile ([#2022](https://github.com/lbryio/lbry-desktop/pull/2022))
### Changed
* Make tooltip smarter ([#1979](https://github.com/lbryio/lbry-desktop/pull/1979))
* Change channel pages to have 48 items instead of 10 ([#2002](https://github.com/lbryio/lbry-desktop/pull/2002))

9
src/renderer/component/common/tooltip.jsx
View file

@ -11,7 +11,11 @@ type Props = {
onComponent?: boolean, // extra padding to account for button/form field size
};
class ToolTip extends React.PureComponent<Props> {
type State = {
direction: string,
};
class ToolTip extends React.PureComponent<Props, State> {
static defaultProps = {
direction: 'bottom',
};
@ -34,6 +38,9 @@ class ToolTip extends React.PureComponent<Props> {
// Get parent-container
const viewport = document.getElementById('content');
if (!viewport) {
throw Error('Document must contain parent div with #content');
}
const visibility = {
top: rect.top >= 0,

25
src/renderer/component/dateTime/view.jsx
View file

@ -1,6 +1,15 @@
// @flow
import React from 'react';
import moment from 'moment';
class DateTime extends React.PureComponent {
type Props = {
date?: number,
timeAgo?: boolean,
formatOptions: {},
show?: string,
};
class DateTime extends React.PureComponent<Props> {
static SHOW_DATE = 'date';
static SHOW_TIME = 'time';
static SHOW_BOTH = 'both';
@ -29,18 +38,24 @@ class DateTime extends React.PureComponent {
}
render() {
const { date, formatOptions } = this.props;
const { date, formatOptions, timeAgo } = this.props;
const show = this.props.show || DateTime.SHOW_BOTH;
const locale = app.i18n.getLocale();
// If !date, it's currently being fetched
if (timeAgo) {
return date ? <span>{moment(date).from(moment())}</span> : <span />;
}
return (
<span>
{date &&
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
date.toLocaleDateString([locale, 'en-US'], formatOptions)}
{show == DateTime.SHOW_BOTH && ' '}
{show === DateTime.SHOW_BOTH && ' '}
{date &&
(show == DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
(show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
date.toLocaleTimeString()}
{!date && '...'}
</span>

3
src/renderer/component/fileCard/index.js
View file

@ -14,6 +14,8 @@ import {
} from 'redux/selectors/content';
import { selectShowNsfw } from 'redux/selectors/settings';
import { selectPendingPublish } from 'redux/selectors/publish';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
import { doClearContentHistoryUri } from 'redux/actions/content';
import FileCard from './view';
const select = (state, props) => {
@ -36,6 +38,7 @@ const select = (state, props) => {
...fileCardInfo,
pending: !!pendingPublish,
position: makeSelectContentPositionForUri(props.uri)(state),
isSubscribed: makeSelectIsSubscribed(props.uri)(state),
};
};

34
src/renderer/component/fileCard/view.jsx
View file

@ -10,6 +10,7 @@ import * as icons from 'constants/icons';
import classnames from 'classnames';
import FilePrice from 'component/filePrice';
import { openCopyLinkMenu } from 'util/contextMenu';
import DateTime from 'component/dateTime';
type Props = {
uri: string,
@ -24,15 +25,11 @@ type Props = {
/* eslint-disable react/no-unused-prop-types */
resolveUri: string => void,
isResolvingUri: boolean,
showPrice: boolean,
/* eslint-enable react/no-unused-prop-types */
isSubscribed: boolean,
};
class FileCard extends React.PureComponent<Props> {
static defaultProps = {
showPrice: true,
};
componentWillMount() {
this.resolve(this.props);
}
@ -59,9 +56,20 @@ class FileCard extends React.PureComponent<Props> {
obscureNsfw,
claimIsMine,
pending,
showPrice,
isSubscribed,
} = this.props;
if (!claim && !pending) {
return (
<div className="card card--small">
<div className="card--placeholder card__media" />
<div className="card--placeholder placeholder__title" />
<div className="card--placeholder placeholder__channel" />
<div className="card--placeholder placeholder__date" />
</div>
);
}
const shouldHide = !claimIsMine && !pending && obscureNsfw && metadata && metadata.nsfw;
if (shouldHide) {
return null;
@ -71,6 +79,7 @@ class FileCard extends React.PureComponent<Props> {
const title = metadata && metadata.title ? metadata.title : uri;
const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
const height = claim && claim.height;
const handleContextMenu = event => {
event.preventDefault();
event.stopPropagation();
@ -97,10 +106,15 @@ class FileCard extends React.PureComponent<Props> {
<div className="card__subtitle">
{pending ? <div>Pending...</div> : <UriIndicator uri={uri} link />}
</div>
<div className="card__file-properties">
{showPrice && <FilePrice hideFree uri={uri} />}
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{fileInfo && <Icon icon={icons.LOCAL} />}
<div className="card__subtitle card--space-between">
<DateTime timeAgo block={height} />
<div className="card__file-properties">
<FilePrice hideFree uri={uri} />
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{isSubscribed && <Icon icon={icons.HEART} />}
{fileInfo && <Icon icon={icons.LOCAL} />}
</div>
</div>
</section>
);

2
src/renderer/component/fileTile/index.js
View file

@ -11,6 +11,7 @@ import { selectShowNsfw } from 'redux/selectors/settings';
import { doNavigate } from 'redux/actions/navigation';
import { doClearPublish, doUpdatePublishForm } from 'redux/actions/publish';
import { selectRewardContentClaimIds } from 'redux/selectors/content';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
import FileTile from './view';
const select = (state, props) => ({
@ -21,6 +22,7 @@ const select = (state, props) => ({
rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
obscureNsfw: !selectShowNsfw(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
isSubscribed: makeSelectIsSubscribed(props.uri)(state),
});
const perform = dispatch => ({

117
src/renderer/component/fileTile/view.jsx
View file

@ -10,10 +10,9 @@ import Button from 'component/button';
import classnames from 'classnames';
import FilePrice from 'component/filePrice';
import UriIndicator from 'component/uriIndicator';
import DateTime from 'component/dateTime';
type Props = {
showUri: boolean,
showLocal: boolean,
obscureNsfw: boolean,
claimIsMine: boolean,
isDownloaded: boolean,
@ -30,12 +29,11 @@ type Props = {
displayHiddenMessage?: boolean,
displayDescription?: boolean,
size: string,
isSubscribed: boolean,
};
class FileTile extends React.PureComponent<Props> {
static defaultProps = {
showUri: false,
showLocal: false,
displayDescription: true,
size: 'regular',
};
@ -50,18 +48,28 @@ class FileTile extends React.PureComponent<Props> {
if (!isResolvingUri && claim === undefined && uri) resolveUri(uri);
}
renderFileProperties() {
const { isSubscribed, isDownloaded, claim, uri, rewardedContentClaimIds, size } = this.props;
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
return (
<div className={classnames('card__file-properties', { card__subtitle: size === 'large' })}>
<FilePrice hideFree uri={uri} />
{isSubscribed && <Icon icon={icons.HEART} />}
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{isDownloaded && <Icon icon={icons.LOCAL} />}
</div>
);
}
render() {
const {
claim,
metadata,
isResolvingUri,
navigate,
rewardedContentClaimIds,
showUri,
obscureNsfw,
claimIsMine,
showLocal,
isDownloaded,
clearPublish,
updatePublishForm,
hideNoResult,
@ -70,6 +78,24 @@ class FileTile extends React.PureComponent<Props> {
size,
} = this.props;
if (!claim && isResolvingUri) {
return (
<div
className={classnames('file-tile', {
'file-tile--small': size === 'small',
'file-tile--large': size === 'large',
})}
>
<div className="card--placeholder card__media" />
<div className="file-tile__info">
<div className="card--placeholder placeholder__title--tile" />
<div className="card--placeholder placeholder__channel" />
<div className="card--placeholder placeholder__date" />
</div>
</div>
);
}
const shouldHide = !claimIsMine && obscureNsfw && metadata && metadata.nsfw;
if (shouldHide) {
return displayHiddenMessage ? (
@ -87,12 +113,12 @@ class FileTile extends React.PureComponent<Props> {
const title =
isClaimed && metadata && metadata.title ? metadata.title : parseURI(uri).contentName;
const thumbnail = metadata && metadata.thumbnail ? metadata.thumbnail : null;
const isRewardContent = claim && rewardedContentClaimIds.includes(claim.claim_id);
const onClick = () => navigate('/show', { uri });
let height;
let name;
if (claim) {
({ name } = claim);
({ name, height } = claim);
}
return !name && hideNoResult ? null : (
@ -108,43 +134,42 @@ class FileTile extends React.PureComponent<Props> {
>
<CardMedia title={title || name} thumbnail={thumbnail} />
<div className="file-tile__info">
{isResolvingUri && <div className="file-tile__title">{__('Loading...')}</div>}
{!isResolvingUri && (
<div className="file-tile__title">
{(title || name) && (
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
)}
</div>
<div className="card__subtitle">
<UriIndicator uri={uri} link />
</div>
<div className="card__subtitle card--space-between">
<DateTime timeAgo block={height} />
{size !== 'large' && this.renderFileProperties()}
</div>
{displayDescription && (
<div className="card__subtext">
<TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
</div>
)}
{size === 'large' && this.renderFileProperties()}
{!name && (
<React.Fragment>
<div className="file-tile__title">
<TruncatedText text={title || name} lines={size === 'small' ? 2 : 3} />
</div>
<div className="card__subtitle">
{showUri ? uri : <UriIndicator uri={uri} link />}
</div>
<div className="card__file-properties">
<FilePrice hideFree uri={uri} />
{isRewardContent && <Icon iconColor="red" icon={icons.FEATURED} />}
{showLocal && isDownloaded && <Icon icon={icons.LOCAL} />}
</div>
{displayDescription && (
<div className="card__subtext">
<TruncatedText text={description} lines={size === 'large' ? 4 : 3} />
</div>
)}
{!name && (
<React.Fragment>
{__('This location is unused.')}{' '}
<Button
button="link"
label={__('Put something here!')}
onClick={e => {
// avoid navigating to /show from clicking on the section
e.stopPropagation();
// strip prefix from the Uri and use that as navigation parameter
const nameFromUri = uri.replace(/lbry:\/\//g, '').replace(/-/g, ' ');
clearPublish(); // to remove any existing publish data
updatePublishForm({ name: nameFromUri }); // to populate the name
navigate('/publish');
}}
/>
</React.Fragment>
)}
{__('This location is unused.')}{' '}
<Button
button="link"
label={__('Put something here!')}
onClick={e => {
// avoid navigating to /show from clicking on the section
e.stopPropagation();
// strip prefix from the Uri and use that as navigation parameter
const { claimName } = parseURI(uri);
clearPublish(); // to remove any existing publish data
updatePublishForm({ name: claimName }); // to populate the name
navigate('/publish');
}}
/>
</React.Fragment>
)}
</div>

2
src/renderer/component/recommendedContent/view.jsx
View file

@ -2,7 +2,6 @@
import React from 'react';
import FileTile from 'component/fileTile';
import type { Claim } from 'types/claim';
import Spinner from 'component/spinner';
type Props = {
uri: string,
@ -66,7 +65,6 @@ export default class RecommendedContent extends React.PureComponent<Props> {
{recommendedContent &&
!recommendedContent.length &&
!isSearching && <div className="card__subtitle">No related content found</div>}
{isSearching && <Spinner type="small" />}
</section>
);
}

1
src/renderer/component/userHistory/index.js
View file

@ -18,7 +18,6 @@ const select = state => {
const perform = dispatch => ({
navigate: (path, params) => dispatch(doNavigate(path, params)),
clearHistoryUri: uri => dispatch(doClearContentHistoryUri(uri)),
});
export default connect(

22
src/renderer/page/file/view.jsx
View file

@ -43,9 +43,13 @@ type Props = {
fetchFileInfo: string => void,
fetchCostInfo: string => void,
prepareEdit: ({}, string) => void,
setViewed: string => void,
autoplay: boolean,
setClientSetting: (string, string | boolean | number) => void,
/* eslint-disable react/no-unused-prop-types */
checkSubscription: (uri: string) => void,
subscriptions: Array<Subscription>,
setViewed: string => void,
/* eslint-enable react/no-unused-prop-types */
};
class FilePage extends React.Component<Props> {
@ -183,7 +187,7 @@ class FilePage extends React.Component<Props> {
))}
<div className="card__content">
<div className="card__title__space-between">
<div className="card--space-between">
<h1>{title}</h1>
<div className="card__title-identity-icons">
{isRewardContent && (
@ -220,14 +224,12 @@ class FilePage extends React.Component<Props> {
onClick={() => openModal({ id: MODALS.SEND_TIP }, { uri })}
/>
)}
{speechShareable && (
<Button
button="alt"
icon={icons.GLOBE}
label={__('Share')}
onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri })}
/>
)}
<Button
button="alt"
icon={icons.GLOBE}
label={__('Share')}
onClick={() => openModal({ id: MODALS.SOCIAL_SHARE }, { uri, speechShareable })}
/>
</div>
<div className="card__actions">

11
src/renderer/redux/selectors/subscriptions.js
View file

@ -3,6 +3,7 @@ import {
selectAllClaimsByChannel,
selectClaimsById,
selectAllFetchingChannelClaims,
makeSelectClaimForUri,
} from 'lbry-redux';
// get the entire subscriptions state
@ -71,3 +72,13 @@ export const selectSubscriptionsBeingFetched = createSelector(
return fetchingSubscriptionMap;
}
);
export const makeSelectIsSubscribed = uri =>
createSelector(selectSubscriptions, makeSelectClaimForUri(uri), (subscriptions, claim) => {
if (!claim || !claim.channel_name) {
return false;
}
const channelUri = `${claim.channel_name}#${claim.value.publisherSignature.certificateId}`;
return subscriptions.some(sub => sub.uri === channelUri);
});

1
src/renderer/scss/all.scss
View file

@ -32,3 +32,4 @@
@import 'component/_item-list.scss';
@import 'component/_time.scss';
@import 'component/_icon.scss';
@import 'component/_placeholder.scss';

17
src/renderer/scss/component/_card.scss
View file

@ -88,20 +88,16 @@
// FileCard is slightly different where the title is only slightly bigger than the subtitle
// Slightly bigger than 2 lines for consistent channel placement
font-size: 1.1em;
height: 4em;
height: 3.3em;
@media only screen and (min-width: $large-breakpoint) {
font-size: 1.3em;
}
}
.card__title__space-between {
.card--space-between {
display: flex;
justify-content: space-between;
.icon {
margin: 0 $spacing-vertical * 1/3;
}
}
.card__title-identity-icons {
@ -114,6 +110,7 @@
color: var(--card-text-color);
font-size: 1em;
line-height: 1em;
padding-top: $spacing-vertical * 1/3;
@media (min-width: $large-breakpoint) {
font-size: 1.2em;
@ -124,12 +121,13 @@
font-size: 1.1em;
&:not(:first-of-type) {
margin-top: $spacing-vertical * 3/2;
padding-top: $spacing-vertical * 3/2;
}
}
.card__subtext {
font-size: 0.85em;
padding-top: $spacing-vertical * 1/3;
}
.card__meta {
@ -142,8 +140,11 @@
.card__file-properties {
display: flex;
align-items: center;
padding-top: $spacing-vertical * 1/3;
color: var(--card-text-color);
.icon + .icon {
margin-left: $spacing-vertical * 1/3;
}
}
// .card-media__internal__links should always be inside a card

2
src/renderer/scss/component/_file-list.scss
View file

@ -45,6 +45,7 @@
}
.file-tile__title {
font-size: 1.1em;
}
.file-tile--small {
@ -65,6 +66,7 @@
.file-tile__info {
display: flex;
flex: 1;
flex-direction: column;
margin-left: $spacing-vertical * 2/3;
max-width: 500px;

40
src/renderer/scss/component/_placeholder.scss Normal file
View file

@ -0,0 +1,40 @@
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.7;
}
100% {
opacity: 1;
}
}
.card--placeholder {
animation: pulse 2s infinite ease-in-out;
background: var(--color-placeholder);
}
// Individual items we need a placeholder for
// FileCard
.placeholder__title {
margin-top: $spacing-vertical * 1/3;
height: 3em;
}
.placeholder__channel {
margin-top: $spacing-vertical * 1/3;
height: 1em;
width: 70%;
}
.placeholder__date {
height: 1em;
margin-top: $spacing-vertical * 1/3;
width: 50%;
}
// FileTile
.placeholder__title--tile {
height: 3em;
}

4
yarn.lock
View file

@ -5662,9 +5662,9 @@ lbry-redux@lbryio/lbry-redux:
proxy-polyfill "0.1.6"
reselect "^3.0.0"
lbry-redux@lbryio/lbry-redux#c079b108c3bc4ba2b4fb85fb112b52cfc040c301:
lbry-redux@lbryio/lbry-redux#4ee6c376e5f2c3e3e96d199a56970e2621a84af1:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/c079b108c3bc4ba2b4fb85fb112b52cfc040c301"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/4ee6c376e5f2c3e3e96d199a56970e2621a84af1"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"