From 464eec96632c0196d8b7ee647538f122f397a502 Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 22 Sep 2021 19:02:59 +0300 Subject: [PATCH 1/7] fix issue where viewcounts were creating a new line --- ui/component/fileViewCountInline/view.jsx | 1 + ui/scss/component/_claim-list.scss | 20 ++++++++++++++++++-- 2 files changed, 19 insertions(+), 2 deletions(-) diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index 395195c3c..e579fdae5 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -15,6 +15,7 @@ export default function FileViewCountInline(props: Props) { let formattedViewCount; try { + // SI notation that changes 1234 to 1.2K, look up Intl.NumberFormat() for docs formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', { compactDisplay: 'short', notation: 'compact', diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index aece45bcb..173bf0a73 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -556,13 +556,23 @@ .claim-tile__info { display: flex; margin-top: var(--spacing-s); - padding: var(--spacing-s); border-top: 1px solid var(--color-border); color: var(--color-subtitle); + padding: var(--spacing-s); + + // accommodating for large view counts on channel overview + @media (min-width: $breakpoint-large) { + padding: var(--spacing-s) 4px; + } .channel-thumbnail { @include handleChannelGif(2.1rem); margin-right: var(--spacing-s); + + // accommodating for large view counts on channel overview + @media (min-width: $breakpoint-large) { + margin-right: 4px; + } } } @@ -608,7 +618,13 @@ .view_count { &::after { content: '•'; - margin: 0 var(--spacing-xxs); + margin: 0 4px; + } + + @media (min-width: $breakpoint-large) { + &::after { + margin: 0 2.5px; + } } } -- 2.45.3 From 225c572d5a32473e6b7b88f67d36d2c0a9f41f0c Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 24 Sep 2021 01:50:42 +0300 Subject: [PATCH 2/7] conditionally add large view css --- ui/component/dateTime/view.jsx | 4 +-- ui/component/fileViewCountInline/view.jsx | 5 ++- ui/scss/component/_claim-list.scss | 23 -------------- ui/scss/component/_view_count.scss | 38 +++++++++++++++++++++++ 4 files changed, 44 insertions(+), 26 deletions(-) create mode 100644 ui/scss/component/_view_count.scss diff --git a/ui/component/dateTime/view.jsx b/ui/component/dateTime/view.jsx index a372cbd74..b8e25210f 100644 --- a/ui/component/dateTime/view.jsx +++ b/ui/component/dateTime/view.jsx @@ -104,11 +104,11 @@ class DateTime extends React.Component { return null; } - return {DateTime.getTimeAgoStr(date)}; + return {DateTime.getTimeAgoStr(date)}; } return ( - + {date && show === DateTime.SHOW_DATE && moment(date).format('MMMM Do, YYYY')} {date && show === DateTime.SHOW_TIME && moment(date).format(clockFormat)} {!date && '...'} diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index e579fdae5..49057c7ca 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -1,5 +1,6 @@ // @flow import React from 'react'; +// import '../../scss/component/_view_count.scss'; type Props = { uri: string, @@ -21,7 +22,6 @@ export default function FileViewCountInline(props: Props) { notation: 'compact', }); } catch (err) { - // No soup for you! formattedViewCount = Number(viewCount).toLocaleString(); } @@ -30,6 +30,7 @@ export default function FileViewCountInline(props: Props) { // clean up (only one place edit/remove). const isChannelPage = window.location.pathname.startsWith('/@'); + // dont show if no view count, if it's a repost, a livestream or isn't a channel page if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) { // (1) Currently, makeSelectViewCountForUri doesn't differentiate between // un-fetched view-count vs zero view-count. But since it's probably not @@ -37,6 +38,8 @@ export default function FileViewCountInline(props: Props) { // (2) No idea how to get the repost source's claim ID from the repost claim, // so hiding it for now. return null; + } else { + require('../../scss/component/_view_count.scss'); } return ( diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index 173bf0a73..8aed6c484 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -560,19 +560,9 @@ color: var(--color-subtitle); padding: var(--spacing-s); - // accommodating for large view counts on channel overview - @media (min-width: $breakpoint-large) { - padding: var(--spacing-s) 4px; - } - .channel-thumbnail { @include handleChannelGif(2.1rem); margin-right: var(--spacing-s); - - // accommodating for large view counts on channel overview - @media (min-width: $breakpoint-large) { - margin-right: 4px; - } } } @@ -615,19 +605,6 @@ flex-wrap: wrap; } -.view_count { - &::after { - content: '•'; - margin: 0 4px; - } - - @media (min-width: $breakpoint-large) { - &::after { - margin: 0 2.5px; - } - } -} - .claim-preview__file-property-overlay { position: absolute; bottom: var(--spacing-xxs); diff --git a/ui/scss/component/_view_count.scss b/ui/scss/component/_view_count.scss new file mode 100644 index 000000000..c18ebfb10 --- /dev/null +++ b/ui/scss/component/_view_count.scss @@ -0,0 +1,38 @@ +@import '../init/vars'; + +.claim-tile__info { + // accommodating for large view counts on channel overview + @media (min-width: $breakpoint-large) { + padding: var(--spacing-s) 4px !important; + } + + .date_time { + font-size: 11px; + } + + .channel-thumbnail { + // accommodating for large view counts on channel overview + @media (min-width: $breakpoint-large) { + margin-right: 4px !important; + } + } +} + +.view_count { + &::after { + content: '•'; + margin: 0 4px; + } + + font-size: 11px; + + @media (min-width: $breakpoint-large) { + &::after { + margin: 0 2.5px; + } + } +} + +.claim-tile__about { + font-size: 11px; +} -- 2.45.3 From fce424387b26da24ff6b702bb16cd9fd9bb6c446 Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 24 Sep 2021 15:48:55 +0300 Subject: [PATCH 3/7] conditionally apply class based on if view count should be shown --- ui/component/claimPreviewSubtitle/view.jsx | 1 + ui/component/claimPreviewTile/index.js | 3 ++- ui/component/claimPreviewTile/view.jsx | 13 +++++++++++-- ui/scss/component/_view_count.scss | 10 +++------- 4 files changed, 17 insertions(+), 10 deletions(-) diff --git a/ui/component/claimPreviewSubtitle/view.jsx b/ui/component/claimPreviewSubtitle/view.jsx index 0b58adb04..f26e08498 100644 --- a/ui/component/claimPreviewSubtitle/view.jsx +++ b/ui/component/claimPreviewSubtitle/view.jsx @@ -16,6 +16,7 @@ type Props = { isLivestream: boolean, }; +// previews used in channel overview and homepage (and other places?) function ClaimPreviewSubtitle(props: Props) { const { pending, uri, claim, type, beginPublish, isLivestream } = props; const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0; diff --git a/ui/component/claimPreviewTile/index.js b/ui/component/claimPreviewTile/index.js index e9372e4eb..40b3355c0 100644 --- a/ui/component/claimPreviewTile/index.js +++ b/ui/component/claimPreviewTile/index.js @@ -12,7 +12,7 @@ import { makeSelectDateForUri, } from 'lbry-redux'; import { selectMutedChannels } from 'redux/selectors/blocked'; -import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc'; +import { makeSelectViewCountForUri, selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc'; import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream'; import { selectShowMatureContent } from 'redux/selectors/settings'; import ClaimPreviewTile from './view'; @@ -38,6 +38,7 @@ const select = (state, props) => { isMature: makeSelectClaimIsNsfw(props.uri)(state), isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state), isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state), + viewCount: makeSelectViewCountForUri(props.uri)(state), }; }; diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index 235b86e4b..71c968ee0 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -48,13 +48,15 @@ type Props = { showMature: boolean, showHiddenByUser?: boolean, properties?: (Claim) => void, + live?: boolean, collectionId?: string, showNoSourceClaims?: boolean, isLivestream: boolean, + viewCount: string, isLivestreamActive: boolean, }; -// preview image cards used in related video functionality +// preview image cards used in related video functionality, channel overview page and homepage function ClaimPreviewTile(props: Props) { const { history, @@ -80,6 +82,7 @@ function ClaimPreviewTile(props: Props) { isLivestreamActive, collectionId, mediaDuration, + viewCount, } = props; const isRepost = claim && claim.repost_channel_url; const isCollection = claim && claim.value_type === 'collection'; @@ -196,6 +199,10 @@ function ClaimPreviewTile(props: Props) { liveProperty = (claim) => <>LIVE; } + const isChannelPage = window.location.pathname.startsWith('/@'); + + const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage); + return (
  • -
    +
    {isChannel ? (
    diff --git a/ui/scss/component/_view_count.scss b/ui/scss/component/_view_count.scss index c18ebfb10..1e4c27180 100644 --- a/ui/scss/component/_view_count.scss +++ b/ui/scss/component/_view_count.scss @@ -1,19 +1,19 @@ @import '../init/vars'; -.claim-tile__info { +.contains_view_count { // accommodating for large view counts on channel overview @media (min-width: $breakpoint-large) { padding: var(--spacing-s) 4px !important; } .date_time { - font-size: 11px; + font-size: 11px !important; } .channel-thumbnail { // accommodating for large view counts on channel overview @media (min-width: $breakpoint-large) { - margin-right: 4px !important; + margin-right: 7px !important; } } } @@ -32,7 +32,3 @@ } } } - -.claim-tile__about { - font-size: 11px; -} -- 2.45.3 From faa30c405de66365411ee7fcf3dcb03e942706bc Mon Sep 17 00:00:00 2001 From: Anthony Date: Fri, 24 Sep 2021 17:55:17 +0300 Subject: [PATCH 4/7] last couple touchups --- ui/component/claimPreviewTile/view.jsx | 12 +++++++----- ui/component/fileViewCountInline/view.jsx | 4 +--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index 71c968ee0..60bef9d16 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -180,6 +180,10 @@ function ClaimPreviewTile(props: Props) { return null; } + const isChannelPage = window.location.pathname.startsWith('/@'); + + const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage); + if (placeholder || (!claim && isResolvingUri)) { return (
  • @@ -188,7 +192,9 @@ function ClaimPreviewTile(props: Props) {
    -
    +
    • ); @@ -199,10 +205,6 @@ function ClaimPreviewTile(props: Props) { liveProperty = (claim) => <>LIVE; } - const isChannelPage = window.location.pathname.startsWith('/@'); - - const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage); - return (
  • Date: Mon, 27 Sep 2021 17:32:34 +0300 Subject: [PATCH 5/7] clean up the css --- ui/component/claimPreviewTile/view.jsx | 1 - ui/scss/component/_view_count.scss | 14 +++++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index 60bef9d16..a5c515ffd 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -48,7 +48,6 @@ type Props = { showMature: boolean, showHiddenByUser?: boolean, properties?: (Claim) => void, - live?: boolean, collectionId?: string, showNoSourceClaims?: boolean, isLivestream: boolean, diff --git a/ui/scss/component/_view_count.scss b/ui/scss/component/_view_count.scss index 1e4c27180..842ed7bea 100644 --- a/ui/scss/component/_view_count.scss +++ b/ui/scss/component/_view_count.scss @@ -3,17 +3,17 @@ .contains_view_count { // accommodating for large view counts on channel overview @media (min-width: $breakpoint-large) { - padding: var(--spacing-s) 4px !important; - } + padding: var(--spacing-s) 4px; - .date_time { - font-size: 11px !important; + .date_time { + font-size: 11px; + } } .channel-thumbnail { // accommodating for large view counts on channel overview @media (min-width: $breakpoint-large) { - margin-right: 7px !important; + margin-right: 7px; } } } @@ -24,11 +24,11 @@ margin: 0 4px; } - font-size: 11px; - @media (min-width: $breakpoint-large) { &::after { margin: 0 2.5px; } + + font-size: 11px; } } -- 2.45.3 From 9b8a50f2fafef01d33201b890760ac1520abf428 Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 29 Sep 2021 19:30:48 +0300 Subject: [PATCH 6/7] add scss to flow config --- .flowconfig | 1 + package.json | 1 + ui/component/fileViewCountInline/view.jsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/.flowconfig b/.flowconfig index 9e73c0bd0..c5c2ab2ad 100644 --- a/.flowconfig +++ b/.flowconfig @@ -41,5 +41,6 @@ module.name_mapper='^web\/component\(.*\)$' -> '/web/component\1' module.name_mapper='^web\/effects\(.*\)$' -> '/web/effects\1' module.name_mapper='^web\/page\(.*\)$' -> '/web/page\1' module.name_mapper='^homepage\(.*\)$' -> '/ui/util/homepage\1' +module.name_mapper='^scss\(.*\)$' -> '/ui/scss\1' [strict] diff --git a/package.json b/package.json index 03ec42389..f1545afa3 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "build": "cross-env NODE_ENV=production yarn compile:electron && electron-builder build", "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null", "crossenv": "./node_modules/cross-env/dist/bin/cross-env", + "flow": "flow", "lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow", "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'", "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write", diff --git a/ui/component/fileViewCountInline/view.jsx b/ui/component/fileViewCountInline/view.jsx index 5bffc4c9b..640cababf 100644 --- a/ui/component/fileViewCountInline/view.jsx +++ b/ui/component/fileViewCountInline/view.jsx @@ -1,6 +1,6 @@ // @flow import React from 'react'; -import '../../scss/component/_view_count.scss'; +import 'scss/component/_view_count.scss'; type Props = { uri: string, -- 2.45.3 From cc920e916991bea457d6d0ea73a5f68d5795050b Mon Sep 17 00:00:00 2001 From: Anthony Date: Wed, 29 Sep 2021 21:26:35 +0300 Subject: [PATCH 7/7] add scss component to flow config --- .flowconfig | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/.flowconfig b/.flowconfig index c5c2ab2ad..2c6b8839f 100644 --- a/.flowconfig +++ b/.flowconfig @@ -41,6 +41,14 @@ module.name_mapper='^web\/component\(.*\)$' -> '/web/component\1' module.name_mapper='^web\/effects\(.*\)$' -> '/web/effects\1' module.name_mapper='^web\/page\(.*\)$' -> '/web/page\1' module.name_mapper='^homepage\(.*\)$' -> '/ui/util/homepage\1' -module.name_mapper='^scss\(.*\)$' -> '/ui/scss\1' +module.name_mapper='^scss\/component\(.*\)$' -> '/ui/scss/component/\1' + +; Extensions +module.file_ext=.js +module.file_ext=.jsx +module.file_ext=.json +module.file_ext=.css +module.file_ext=.scss + [strict] -- 2.45.3