Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Basic display of reposts #3593

Merged
merged 3 commits into from Jan 31, 2020
Merged

Basic display of reposts #3593

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c989709
basic display of reposts in app
Jan 31, 2020
447445a
fix app strings
Jan 31, 2020
4acdbf8
test to see if this script was causing windows builds to fail
Jan 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 1 addition & 2 deletions electron-builder.json
View file
Open in desktop
Expand Up @@ -97,6 +97,5 @@
]
},
"artifactName": "${productName}_${version}.${ext}",
"afterSign": "./build/afterSignHook.js",
"afterAllArtifactBuild": "./build/afterAllArtifactBuild.js"
"afterSign": "./build/afterSignHook.js"
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Expand Up @@ -130,7 +130,7 @@
"imagesloaded": "^4.1.4",
"json-loader": "^0.5.4",
"lbry-format": "https://github.com/lbryio/lbry-format.git",
"lbry-redux": "lbryio/lbry-redux#71e85536dbe397df98a47a3c4b4311760b2e7419",
"lbry-redux": "lbryio/lbry-redux#bfbaa0dbdd2c1b2b340c0760d0d97c99f3cefb02",
"lbryinc": "lbryio/lbryinc#6a59102c52673502569d2c43bd4ee58c315fb2e4",
"lint-staged": "^7.0.2",
"localforage": "^1.7.1",
Expand Down
2 changes: 1 addition & 1 deletion static/app-strings.json
View file
Open in desktop
Expand Up @@ -920,4 +920,4 @@
"Publish a file, or create a channel": "Publish a file, or create a channel",
"Your account": "Your account",
"Channel profile picture": "Channel profile picture"
}
}
112 changes: 66 additions & 46 deletions ui/component/claimPreview/view.jsx
View file
Open in desktop
Expand Up @@ -17,6 +17,7 @@ import BlockButton from 'component/blockButton';
import useGetThumbnail from 'effects/use-get-thumbnail';
import ClaimPreviewTitle from 'component/claimPreviewTitle';
import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
import ClaimRepostAuthor from 'component/claimRepostAuthor';

type Props = {
uri: string,
Expand Down Expand Up @@ -177,11 +178,19 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {

if (placeholder === 'loading' || (isResolvingUri && !claim)) {
return (
<li className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })} disabled>
<div className="placeholder media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview__title" />
<div className="placeholder media__subtitle" />
<li
disabled
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
})}
>
<div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
<div className="placeholder media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview__title" />
<div className="placeholder media__subtitle" />
</div>
</div>
</li>
);
Expand All @@ -197,50 +206,61 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
role="link"
onClick={pending || type === 'inline' ? undefined : handleOnClick}
onContextMenu={handleContextMenu}
className={classnames('claim-preview', {
'claim-preview--small': type === 'small' || type === 'tooltip',
'claim-preview--large': type === 'large',
'claim-preview--inline': type === 'inline',
'claim-preview--tooltip': type === 'tooltip',
'claim-preview--channel': isChannel,
'claim-preview--visited': !isChannel && !claimIsMine && hasVisitedUri,
'claim-preview--pending': pending,
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
'claim-preview__wrapper--small': type === 'small',
})}
>
{isChannel && claim ? (
<UriIndicator uri={uri} link>
<ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
</UriIndicator>
) : (
<FileThumbnail thumbnail={thumbnailUrl} />
)}
<div className="claim-preview__text">
<div className="claim-preview-metadata">
<div className="claim-preview-info">
<ClaimPreviewTitle uri={uri} />
{!isChannel && <FileProperties uri={uri} />}
</div>
{type !== 'large' && type !== 'inline' && <ClaimRepostAuthor uri={uri} />}

<ClaimPreviewSubtitle uri={uri} type={type} />
</div>
<div className="claim-preview__actions">
{!pending && (
<React.Fragment>
{hideActions ? null : actions !== undefined ? (
actions
) : (
<div className="card__actions--inline">
{isChannel && !channelIsBlocked && !claimIsMine && (
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
{!hideBlock && isChannel && !isSubscribed && !claimIsMine && (
<BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
</div>
)}
</React.Fragment>
)}
{properties !== undefined ? properties : <ClaimTags uri={uri} type={type} />}
<div
className={classnames('claim-preview', {
'claim-preview--small': type === 'small' || type === 'tooltip',
'claim-preview--large': type === 'large',
'claim-preview--inline': type === 'inline',
'claim-preview--tooltip': type === 'tooltip',
'claim-preview--channel': isChannel,
'claim-preview--visited': !isChannel && !claimIsMine && hasVisitedUri,
'claim-preview--pending': pending,
})}
>
{isChannel && claim ? (
<UriIndicator uri={uri} link>
<ChannelThumbnail uri={uri} obscure={channelIsBlocked} />
</UriIndicator>
) : (
<FileThumbnail thumbnail={thumbnailUrl} />
)}

<div className="claim-preview__text">
<div className="claim-preview-metadata">
<div className="claim-preview-info">
<ClaimPreviewTitle uri={uri} />
{!isChannel && <FileProperties uri={uri} />}
</div>

<ClaimPreviewSubtitle uri={uri} type={type} />
</div>
<div className="claim-preview__actions">
{!pending && (
<React.Fragment>
{hideActions ? null : actions !== undefined ? (
actions
) : (
<div className="card__actions--inline">
{isChannel && !channelIsBlocked && !claimIsMine && (
<SubscribeButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
{!hideBlock && isChannel && !isSubscribed && !claimIsMine && (
<BlockButton uri={uri.startsWith('lbry://') ? uri : `lbry://${uri}`} />
)}
</div>
)}
</React.Fragment>
)}
{properties !== undefined ? properties : <ClaimTags uri={uri} type={type} />}
</div>
</div>
</div>
</li>
Expand Down
52 changes: 30 additions & 22 deletions ui/component/claimPreviewTile/view.jsx
View file
Open in desktop
Expand Up @@ -12,8 +12,8 @@ import useGetThumbnail from 'effects/use-get-thumbnail';
import { formatLbryUrlForWeb } from 'util/url';
import { parseURI } from 'lbry-redux';
import FileProperties from 'component/fileProperties';

import FileDownloadLink from 'component/fileDownloadLink';
import ClaimRepostAuthor from 'component/claimRepostAuthor';

type Props = {
uri: string,
Expand Down Expand Up @@ -54,6 +54,7 @@ function ClaimPreviewTile(props: Props) {
streamingUrl,
blockedChannelUris,
} = props;
const isRepost = claim && claim.repost_channel_url;
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
Expand Down Expand Up @@ -146,7 +147,7 @@ function ClaimPreviewTile(props: Props) {
role="link"
onClick={handleClick}
className={classnames('card claim-preview--tile', {
'claim-preview--channel': isChannel,
'claim-preview__wrapper--channel': isChannel,
})}
>
<NavLink {...navLinkProps}>
Expand All @@ -170,27 +171,34 @@ function ClaimPreviewTile(props: Props) {
<TruncatedText text={title || (claim && claim.name)} lines={2} />
</h2>
</NavLink>
<div className="claim-tile__info">
{isChannel ? (
<div className="claim-tile__about--channel">
<SubscribeButton uri={uri} />
<span className="claim-tile__publishes">
{claimsInChannel === 1
? __('%claimsInChannel% publish', { claimsInChannel })
: __('%claimsInChannel% publishes', { claimsInChannel })}
</span>
</div>
) : (
<React.Fragment>
<UriIndicator uri={uri} link hideAnonymous>
<ChannelThumbnail thumbnailPreview={channelThumbnail} />
</UriIndicator>

<div className="claim-tile__about">
<UriIndicator uri={uri} link />
<DateTime timeAgo uri={uri} />
<div>
<div className="claim-tile__info">
{isChannel ? (
<div className="claim-tile__about--channel">
<SubscribeButton uri={uri} />
<span className="claim-tile__publishes">
{claimsInChannel === 1
? __('%claimsInChannel% publish', { claimsInChannel })
: __('%claimsInChannel% publishes', { claimsInChannel })}
</span>
</div>
</React.Fragment>
) : (
<React.Fragment>
<UriIndicator uri={uri} link hideAnonymous>
<ChannelThumbnail thumbnailPreview={channelThumbnail} />
</UriIndicator>

<div className="claim-tile__about">
<UriIndicator uri={uri} link />
<DateTime timeAgo uri={uri} />
</div>
</React.Fragment>
)}
</div>
{isRepost && (
<div className="claim-tile__repost-author">
<ClaimRepostAuthor uri={uri} />
</div>
)}
</div>
</li>
Expand Down
9 changes: 9 additions & 0 deletions ui/component/claimRepostAuthor/index.js
View file
Open in desktop
@@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { makeSelectClaimForUri } from 'lbry-redux';
import ClaimRepostAuthor from './view';

const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
});

export default connect(select)(ClaimRepostAuthor);
31 changes: 31 additions & 0 deletions ui/component/claimRepostAuthor/view.jsx
View file
Open in desktop
@@ -0,0 +1,31 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import I18nMessage from 'component/i18nMessage';
import UriIndicator from 'component/uriIndicator';
import Icon from 'component/common/icon';

type Props = {
uri: string,
claim: ?Claim,
};

function ClaimRepostAuthor(props: Props) {
const { claim } = props;
const repostChannelUrl = claim && claim.repost_channel_url;

if (!repostChannelUrl) {
return null;
}

return (
<div className="claim-preview__repost-author">
<Icon icon={ICONS.REPOST} size={10} />
<I18nMessage tokens={{ repost_channel_link: <UriIndicator link uri={repostChannelUrl} /> }}>
%repost_channel_link% reposted
</I18nMessage>
</div>
);
}

export default ClaimRepostAuthor;
8 changes: 8 additions & 0 deletions ui/component/common/icon-custom.jsx
View file
Open in desktop
Expand Up @@ -392,4 +392,12 @@ export const icons = {
<polyline points="7 3 7 8 15 8" />
</g>
),
[ICONS.REPOST]: buildIcon(
<g>
<polyline points="17 1 21 5 17 9" />
<path d="M3 11V9a4 4 0 0 1 4-4h14" />
<polyline points="7 23 3 19 7 15" />
<path d="M21 13v2a4 4 0 0 1-4 4H3" />
</g>
),
};
1 change: 1 addition & 0 deletions ui/constants/icons.js
View file
Open in desktop
Expand Up @@ -86,3 +86,4 @@ export const AUDIO = 'HeadPhones';
export const VIDEO = 'Video';
export const TEXT = 'FileText';
export const DOWNLOADABLE = 'Downloadable';
export const REPOST = 'Repeat';
46 changes: 35 additions & 11 deletions ui/scss/component/_claim-list.scss
View file
Open in desktop
@@ -1,5 +1,5 @@
.claim-list {
.claim-preview {
.claim-preview__wrapper {
border-bottom: 1px solid var(--color-border);
}
}
Expand Down Expand Up @@ -60,12 +60,28 @@
}
}

.claim-preview__wrapper {
padding: var(--spacing-medium);
list-style: none;
}

.claim-preview__wrapper--channel {
background-color: var(--color-card-background-highlighted);
}

.claim-preview__wrapper--inline {
padding: 0;
}

.claim-preview__wrapper--small {
padding: var(--spacing-small);
}

.claim-preview {
flex: 1;
display: flex;
position: relative;
overflow: visible;
padding: var(--spacing-medium);

&:not(.claim-preview--inline):not(.claim-preview--pending):not(.claim-preview--inactive) {
cursor: pointer;
Expand Down Expand Up @@ -112,8 +128,6 @@
}

.claim-preview--small {
padding: var(--spacing-small);

.media__thumb {
width: 8rem;
}
Expand All @@ -124,18 +138,11 @@
}
}

.claim-preview--channel:not(.claim-preview--inline) {
background-color: var(--color-card-background-highlighted);
}

.claim-preview--pending {
opacity: 0.6;
}

.claim-preview--inline {
padding: 0;
border-bottom: none;

.channel-thumbnail {
width: var(--channel-thumbnail-width--small);
height: var(--channel-thumbnail-width--small);
Expand Down Expand Up @@ -413,3 +420,20 @@
}
}
}

.claim-preview__repost-author {
transform: translateY(calc(var(--spacing-small) * -1));
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
line-height: 1;

.icon {
margin-right: var(--spacing-miniscule);
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
}
}

.claim-tile__repost-author {
margin: var(--spacing-small);
margin-bottom: 0;
}
1 change: 1 addition & 0 deletions ui/scss/component/_file-properties.scss
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@
.file-properties--large {
flex-wrap: wrap;
margin-bottom: var(--spacing-large);
margin-left: 0;

& > * {
margin-top: var(--spacing-small);
Expand Down