From 77e26eb4401892ca5d747f9749839d7253453679 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Fri, 31 Jan 2020 11:43:14 -0500 Subject: [PATCH] basic display of reposts in app --- package.json | 2 +- ui/component/claimPreview/view.jsx | 112 ++++++++++++++---------- ui/component/claimPreviewTile/view.jsx | 52 ++++++----- ui/component/claimRepostAuthor/index.js | 9 ++ ui/component/claimRepostAuthor/view.jsx | 31 +++++++ ui/component/common/icon-custom.jsx | 8 ++ ui/constants/icons.js | 1 + ui/scss/component/_claim-list.scss | 46 +++++++--- ui/scss/component/_file-properties.scss | 1 + yarn.lock | 20 ++--- 10 files changed, 192 insertions(+), 90 deletions(-) create mode 100644 ui/component/claimRepostAuthor/index.js create mode 100644 ui/component/claimRepostAuthor/view.jsx diff --git a/package.json b/package.json index b3aa6b0af..2c051d3bb 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index b5a7ed08b..57b0c293a 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -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, @@ -177,11 +178,19 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { if (placeholder === 'loading' || (isResolvingUri && !claim)) { return ( -
  • -
    -
    -
    -
    +
  • +
    +
    +
    +
    +
    +
    • ); @@ -197,50 +206,61 @@ const ClaimPreview = forwardRef((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 ? ( - - - - ) : ( - - )} -
    -
    -
    - - {!isChannel && } -
    + {type !== 'large' && type !== 'inline' && } - -
    -
    - {!pending && ( - - {hideActions ? null : actions !== undefined ? ( - actions - ) : ( -
    - {isChannel && !channelIsBlocked && !claimIsMine && ( - - )} - {!hideBlock && isChannel && !isSubscribed && !claimIsMine && ( - - )} -
    - )} -     - )} - {properties !== undefined ? properties : } +
    + {isChannel && claim ? ( + + + + ) : ( + + )} + +
    +
    +
    + + {!isChannel && } +
    + + +
    +
    + {!pending && ( + + {hideActions ? null : actions !== undefined ? ( + actions + ) : ( +
    + {isChannel && !channelIsBlocked && !claimIsMine && ( + + )} + {!hideBlock && isChannel && !isSubscribed && !claimIsMine && ( + + )} +
    + )} +     + )} + {properties !== undefined ? properties : } +
    diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index 001634e77..eb7391ca1 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -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, @@ -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; @@ -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, })} > @@ -170,27 +171,34 @@ function ClaimPreviewTile(props: Props) { -
    - {isChannel ? ( -
    - - - {claimsInChannel === 1 - ? __('%claimsInChannel% publish', { claimsInChannel }) - : __('%claimsInChannel% publishes', { claimsInChannel })} - -
    - ) : ( - - - - - -
    - - +
    +
    + {isChannel ? ( +
    + + + {claimsInChannel === 1 + ? __('%claimsInChannel% publish', { claimsInChannel }) + : __('%claimsInChannel% publishes', { claimsInChannel })} +
    - + ) : ( + + + + + +
    + + +
    +     + )} +
    + {isRepost && ( +
    + +
    )}
    diff --git a/ui/component/claimRepostAuthor/index.js b/ui/component/claimRepostAuthor/index.js new file mode 100644 index 000000000..2d5cf2a12 --- /dev/null +++ b/ui/component/claimRepostAuthor/index.js @@ -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); diff --git a/ui/component/claimRepostAuthor/view.jsx b/ui/component/claimRepostAuthor/view.jsx new file mode 100644 index 000000000..d1cda20d5 --- /dev/null +++ b/ui/component/claimRepostAuthor/view.jsx @@ -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 ( +
    + + }}> + %repost_channel_link% reposted + +
    + ); +} + +export default ClaimRepostAuthor; diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index b5b6618c6..e66a3edf6 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -392,4 +392,12 @@ export const icons = { ), + [ICONS.REPOST]: buildIcon( + + + + + + + ), }; diff --git a/ui/constants/icons.js b/ui/constants/icons.js index 1194c5463..c1af14f52 100644 --- a/ui/constants/icons.js +++ b/ui/constants/icons.js @@ -86,3 +86,4 @@ export const AUDIO = 'HeadPhones'; export const VIDEO = 'Video'; export const TEXT = 'FileText'; export const DOWNLOADABLE = 'Downloadable'; +export const REPOST = 'Repeat'; diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index af5d8dc75..ba0b38221 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -1,5 +1,5 @@ .claim-list { - .claim-preview { + .claim-preview__wrapper { border-bottom: 1px solid var(--color-border); } } @@ -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; @@ -112,8 +128,6 @@ } .claim-preview--small { - padding: var(--spacing-small); - .media__thumb { width: 8rem; } @@ -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); @@ -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; +} diff --git a/ui/scss/component/_file-properties.scss b/ui/scss/component/_file-properties.scss index b3e664689..25d35cdc4 100644 --- a/ui/scss/component/_file-properties.scss +++ b/ui/scss/component/_file-properties.scss @@ -28,6 +28,7 @@ .file-properties--large { flex-wrap: wrap; margin-bottom: var(--spacing-large); + margin-left: 0; & > * { margin-top: var(--spacing-small); diff --git a/yarn.lock b/yarn.lock index a752d328c..2ce345cf7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1073,10 +1073,10 @@ resolved "https://registry.yarnpkg.com/@octokit/plugin-request-log/-/plugin-request-log-1.0.0.tgz#eef87a431300f6148c39a7f75f8cfeb218b2547e" integrity sha512-ywoxP68aOT3zHCLgWZgwUJatiENeHE7xJzYjfz8WI0goynp96wETBF+d95b8g/uL4QmS6owPVlaxiz3wyMAzcw== -"@octokit/plugin-rest-endpoint-methods@2.1.3": - version "2.1.3" - resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.1.3.tgz#a316af20ac9465af3fcbd0da3e4b764d94703ed2" - integrity sha512-YtP757n6UIyVhd4YJ0aerx7CuO4+VJJ5BYlvD2aPnUPhCoNbINSxVS1p7UEBRzMOrPfEGDYEcs/tjADB1NOCyg== +"@octokit/plugin-rest-endpoint-methods@^2.1.0": + version "2.1.2" + resolved "https://registry.yarnpkg.com/@octokit/plugin-rest-endpoint-methods/-/plugin-rest-endpoint-methods-2.1.2.tgz#c9b72657a1dca049aa8f51cca7d12faa85ccefc1" + integrity sha512-PS77CqifhDqYONWAxLh+BKGlmuhdEX39JVEVQoWWDvkh5B+2bcg9eaxMEFUEJtfuqdAw33sdGrrlGtqtl+9lqg== dependencies: "@octokit/types" "^2.0.1" deprecation "^2.3.1" @@ -1120,14 +1120,14 @@ url-template "^2.0.8" "@octokit/rest@^16.40.0": - version "16.41.0" - resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.41.0.tgz#28950d7bb854da3bf36bd317c95526ffbcb7b982" - integrity sha512-qdXSdoI7RI+u04KR5FEv2UAo8kuCLH1l48mLCQu3gpMoCapmIXL0dGDjzhAbuQHRxkGz2zuvCKhskdMhy66Nww== + version "16.40.2" + resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.40.2.tgz#f32ecb96d4cfadd3ab8fbfeb91a6018368d03956" + integrity sha512-6JYp+VQOPGYBPbpVA+rat0VWMLACjbWz4iwpbpcTeXQj8SlxZRErUcRk7hvUNK5swyf2GHAwKG6Kpl3xdYxVrA== dependencies: "@octokit/auth-token" "^2.4.0" "@octokit/plugin-paginate-rest" "^1.1.1" "@octokit/plugin-request-log" "^1.0.0" - "@octokit/plugin-rest-endpoint-methods" "2.1.3" + "@octokit/plugin-rest-endpoint-methods" "^2.1.0" "@octokit/request" "^5.2.0" "@octokit/request-error" "^1.0.2" atob-lite "^2.0.0" @@ -7277,9 +7277,9 @@ lazy-val@^1.0.4: yargs "^13.2.2" zstd-codec "^0.1.1" -lbry-redux@lbryio/lbry-redux#71e85536dbe397df98a47a3c4b4311760b2e7419: +lbry-redux@lbryio/lbry-redux#bfbaa0dbdd2c1b2b340c0760d0d97c99f3cefb02: version "0.0.1" - resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/71e85536dbe397df98a47a3c4b4311760b2e7419" + resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/bfbaa0dbdd2c1b2b340c0760d0d97c99f3cefb02" dependencies: proxy-polyfill "0.1.6" reselect "^3.0.0"