From c2a766a3e802f6f2cba2230d655aebfd31774fbb Mon Sep 17 00:00:00 2001 From: infinite-persistence Date: Thu, 29 Apr 2021 15:22:56 +0800 Subject: [PATCH] ClaimListDiscover: repeat livestream-sorting changes in ClaimTilesDiscover --- ui/component/claimList/index.js | 4 ++- ui/component/claimList/view.jsx | 39 ++++++++++++++++++++----- ui/component/claimListDiscover/view.jsx | 8 +++++ ui/component/claimPreview/view.jsx | 12 ++++++-- ui/page/channelsFollowing/view.jsx | 4 +++ ui/page/discover/view.jsx | 4 +++ 6 files changed, 61 insertions(+), 10 deletions(-) diff --git a/ui/component/claimList/index.js b/ui/component/claimList/index.js index dd35bb3ca..63cfae2c3 100644 --- a/ui/component/claimList/index.js +++ b/ui/component/claimList/index.js @@ -1,10 +1,12 @@ import { connect } from 'react-redux'; import ClaimList from './view'; -import { SETTINGS } from 'lbry-redux'; +import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } from 'lbry-redux'; import { makeSelectClientSetting } from 'redux/selectors/settings'; const select = (state) => ({ searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state), + claimSearchByQuery: selectClaimSearchByQuery(state), + claimsByUri: selectClaimsByUri(state), }); const perform = (dispatch) => ({}); diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx index 64a5d0281..1fa6baa2c 100644 --- a/ui/component/claimList/view.jsx +++ b/ui/component/claimList/view.jsx @@ -9,6 +9,7 @@ import { FormField } from 'component/common/form'; import usePersistedState from 'effects/use-persisted-state'; import debounce from 'util/debounce'; import ClaimPreviewTile from 'component/claimPreviewTile'; +import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view'; const DEBOUNCE_SCROLL_HANDLER_MS = 150; const SORT_NEW = 'new'; @@ -38,6 +39,10 @@ type Props = { tileLayout?: boolean, searchInLanguage: boolean, hideMenu?: boolean, + claimSearchByQuery: { [string]: Array }, + claimsByUri: { [string]: any }, + liveLivestreamsFirst?: boolean, + livestreamMap?: { [string]: any }, }; export default function ClaimList(props: Props) { @@ -63,16 +68,33 @@ export default function ClaimList(props: Props) { renderProperties, searchInLanguage, hideMenu, + claimSearchByQuery, + claimsByUri, + liveLivestreamsFirst, + livestreamMap, } = props; const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW); const timedOut = uris === null; const urisLength = (uris && uris.length) || 0; + + const liveUris = []; + if (liveLivestreamsFirst && livestreamMap) { + prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery); + } + const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || []; const noResultMsg = searchInLanguage ? __('No results. Contents may be hidden by the Language filter.') : __('No results'); + const resolveLive = (index) => { + if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) { + return true; + } + return undefined; + }; + function handleSortChange() { setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW); } @@ -101,8 +123,14 @@ export default function ClaimList(props: Props) { return tileLayout && !header ? (
{urisLength > 0 && - uris.map((uri) => ( - + uris.map((uri, index) => ( + ))} {!timedOut && urisLength === 0 && !loading &&
{empty || noResultMsg}
} {timedOut && timedOutMessage &&
{timedOutMessage}
} @@ -165,12 +193,9 @@ export default function ClaimList(props: Props) { // Hack to hide spee.ch thumbnail publishes // If it meets these requirements, it was probably uploaded here: // https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79 - if (claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch') { - return true; - } else { - return false; - } + return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch'; }} + live={resolveLive(index)} /> ))} diff --git a/ui/component/claimListDiscover/view.jsx b/ui/component/claimListDiscover/view.jsx index 04af8b7bf..1dabf5df6 100644 --- a/ui/component/claimListDiscover/view.jsx +++ b/ui/component/claimListDiscover/view.jsx @@ -68,6 +68,8 @@ type Props = { searchInLanguage: boolean, scrollAnchor?: string, showHiddenByUser?: boolean, + liveLivestreamsFirst?: boolean, + livestreamMap?: { [string]: any }, }; function ClaimListDiscover(props: Props) { @@ -119,6 +121,8 @@ function ClaimListDiscover(props: Props) { searchInLanguage, scrollAnchor, showHiddenByUser = false, + liveLivestreamsFirst, + livestreamMap, } = props; const didNavigateForward = history.action === 'PUSH'; const { search } = location; @@ -494,6 +498,8 @@ function ClaimListDiscover(props: Props) { includeSupportAction={includeSupportAction} injectedItem={injectedItem} showHiddenByUser={showHiddenByUser} + liveLivestreamsFirst={liveLivestreamsFirst} + livestreamMap={livestreamMap} /> {loading && (
@@ -524,6 +530,8 @@ function ClaimListDiscover(props: Props) { includeSupportAction={includeSupportAction} injectedItem={injectedItem} showHiddenByUser={showHiddenByUser} + liveLivestreamsFirst={liveLivestreamsFirst} + livestreamMap={livestreamMap} /> {loading && new Array(dynamicPageSize) diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 2a4c73930..5a555d8fd 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -70,6 +70,7 @@ type Props = { repostUrl?: string, hideMenu?: boolean, isLivestream?: boolean, + live?: boolean, }; const ClaimPreview = forwardRef((props: Props, ref: any) => { @@ -120,6 +121,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { hideMenu = false, // repostUrl, isLivestream, + live, } = props; const WrapperElement = wrapperElement || 'li'; const shouldFetch = @@ -237,6 +239,11 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { return null; } + let liveProperty = null; + if (live === true) { + liveProperty = (claim) => <>LIVE; + } + return ( ((props: Props, ref: any) => { 'claim-preview__wrapper--channel': isChannelUri && type !== 'inline', 'claim-preview__wrapper--inline': type === 'inline', 'claim-preview__wrapper--small': type === 'small', + 'claim-preview__live': live, })} > <> @@ -278,9 +286,9 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => {
)} {/* @endif */} - {!isRepost && !isChannelUri && !isLivestream && ( + {!isRepost && !isChannelUri && (
- +
)} diff --git a/ui/page/channelsFollowing/view.jsx b/ui/page/channelsFollowing/view.jsx index df9259f72..d941e51c8 100644 --- a/ui/page/channelsFollowing/view.jsx +++ b/ui/page/channelsFollowing/view.jsx @@ -9,6 +9,7 @@ import ClaimListDiscover from 'component/claimListDiscover'; import Page from 'component/page'; import Button from 'component/button'; import Icon from 'component/common/icon'; +import useGetLivestreams from 'effects/use-get-livestreams'; type Props = { subscribedChannels: Array, @@ -18,6 +19,7 @@ type Props = { function ChannelsFollowingPage(props: Props) { const { subscribedChannels, tileLayout } = props; const hasSubsribedChannels = subscribedChannels.length > 0; + const { livestreamMap } = useGetLivestreams(0); return !hasSubsribedChannels ? ( @@ -43,6 +45,8 @@ function ChannelsFollowingPage(props: Props) { navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`} /> } + liveLivestreamsFirst + livestreamMap={livestreamMap} /> ); diff --git a/ui/page/discover/view.jsx b/ui/page/discover/view.jsx index 34d52c82d..a390ad9ba 100644 --- a/ui/page/discover/view.jsx +++ b/ui/page/discover/view.jsx @@ -15,6 +15,7 @@ import * as CS from 'constants/claim_search'; import Ads from 'web/component/ads'; import LbcSymbol from 'component/common/lbc-symbol'; import I18nMessage from 'component/i18nMessage'; +import useGetLivestreams from 'effects/use-get-livestreams'; type Props = { location: { search: string }, @@ -43,6 +44,7 @@ function DiscoverPage(props: Props) { const buttonRef = useRef(); const isHovering = useHover(buttonRef); const isMobile = useIsMobile(); + const { livestreamMap } = useGetLivestreams(0); const urlParams = new URLSearchParams(search); const claimType = urlParams.get('claim_type'); @@ -148,6 +150,8 @@ function DiscoverPage(props: Props) { ) ) } + liveLivestreamsFirst + livestreamMap={livestreamMap} /> );