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

Category livestreams: re-implement using subSection + use horizontal scroll in mobile

Browse source 
The `useDualLayout` junk is super confusing to maintain and no longer extensible.

At the expense of making the "livestream + regular" list no longer seamlessly continuous when expanded (or when there just a handful of livestreams), use the new `subSection` feature to inject the livestream tiles.  This is far easier to manage and tweak.
This commit is contained in:
infinite-persistence 2022-02-28 18:08:09 +08:00 committed by Thomas Zarebczan
parent 5f92ccbf47
commit d15a0308b2
4 changed files with 221 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app-strings.json
View file

@ -2170,6 +2170,7 @@
"Starting Soon": "Starting Soon",
"Streaming Now": "Streaming Now",
"Live": "Live",
"Livestreams": "Livestreams",
"Upcoming Livestreams": "Upcoming Livestreams",
"Show more upcoming livestreams": "Show more upcoming livestreams",
"Show less upcoming livestreams": "Show less upcoming livestreams",

159
ui/page/discover/livestreamSection.jsx Normal file
View file

@ -0,0 +1,159 @@
// @flow
import React from 'react';
import Button from 'component/button';
import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
import * as CS from 'constants/claim_search';
import * as ICONS from 'constants/icons';
import ClaimListDiscover from 'component/claimListDiscover';
import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
import usePersistedState from 'effects/use-persisted-state';
import { getLivestreamUris } from 'util/livestream';
import { resolveLangForClaimSearch } from '../../util/default-languages';
const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
const SECTION = Object.freeze({ COLLAPSED: 1, EXPANDED: 2 });
function getTileLimit(isLargeScreen, originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
}
// ****************************************************************************
// ****************************************************************************
type Props = {
tileLayout: boolean,
channelIds?: Array<string>,
activeLivestreams: ?LivestreamInfo,
doFetchActiveLivestreams: (orderBy: ?Array<string>, lang: ?Array<string>) => void,
languageSetting?: string,
searchInLanguage?: boolean,
langParam?: string | null,
};
export default function LivestreamSection(props: Props) {
const {
tileLayout,
channelIds,
activeLivestreams,
doFetchActiveLivestreams,
languageSetting,
searchInLanguage,
langParam,
} = props;
const [liveSectionStore, setLiveSectionStore] = usePersistedState('discover:lsSection', SECTION.COLLAPSED);
const [expandedYPos, setExpandedYPos] = React.useState(null);
const isMobile = useIsMobile();
const isLargeScreen = useIsLargeScreen();
const initialLiveTileLimit = getTileLimit(isLargeScreen, DEFAULT_LIVESTREAM_TILE_LIMIT);
const [liveSection, setLiveSection] = React.useState(liveSectionStore || SECTION.COLLAPSED);
const livestreamUris = getLivestreamUris(activeLivestreams, channelIds);
const liveTilesOverLimit = livestreamUris && livestreamUris.length > initialLiveTileLimit;
function collapseSection() {
window.scrollTo(0, 0);
setLiveSection(SECTION.COLLAPSED);
}
React.useEffect(() => {
// Sync liveSection --> liveSectionStore
if (liveSection !== liveSectionStore) {
setLiveSectionStore(liveSection);
}
}, [liveSection, setLiveSectionStore, liveSectionStore]);
React.useEffect(() => {
// Fetch active livestreams on mount
const langCsv = resolveLangForClaimSearch(languageSetting, searchInLanguage, langParam);
const lang = langCsv ? langCsv.split(',') : null;
doFetchActiveLivestreams(CS.ORDER_BY_NEW_VALUE, lang);
// eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only)
}, []);
React.useEffect(() => {
// Maintain y-position when expanding livestreams section:
if (liveSection === SECTION.EXPANDED && expandedYPos !== null) {
window.scrollTo(0, expandedYPos);
setExpandedYPos(null);
}
}, [liveSection, expandedYPos]);
if (!livestreamUris || livestreamUris.length === 0) {
return null;
}
if (isMobile) {
return (
<div className="livestream-list">
<ClaimListDiscover
uris={livestreamUris}
tileLayout={livestreamUris.length > 1 ? true : tileLayout}
swipeLayout={livestreamUris.length > 1}
headerLabel={<div className="section__title">{__('Livestreams')}</div>}
useSkeletonScreen={false}
showHeader={false}
hideFilters
infiniteScroll={false}
loading={false}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
/>
</div>
);
}
return (
<div className="livestream-list">
{liveTilesOverLimit && liveSection === SECTION.EXPANDED && (
<div className="livestream-list--view-more">
<Button
label={__('Show less livestreams')}
button="link"
iconRight={ICONS.UP}
className="claim-grid__title--secondary"
onClick={collapseSection}
/>
</div>
)}
<ClaimListDiscover
uris={liveSection === SECTION.COLLAPSED ? livestreamUris.slice(0, initialLiveTileLimit) : livestreamUris}
tileLayout={tileLayout}
showHeader={false}
hideFilters
infiniteScroll={false}
loading={false}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
/>
{liveTilesOverLimit && liveSection === SECTION.COLLAPSED && (
<div className="livestream-list--view-more">
<Button
label={__('Show more livestreams')}
button="link"
iconRight={ICONS.DOWN}
className="claim-grid__title--secondary"
onClick={() => {
doFetchActiveLivestreams();
setExpandedYPos(window.scrollY);
setLiveSection(SECTION.EXPANDED);
}}
/>
</div>
)}
{liveTilesOverLimit && liveSection === SECTION.EXPANDED && (
<div className="livestream-list--view-more">
<Button
label={__('Show less livestreams')}
button="link"
iconRight={ICONS.UP}
className="claim-grid__title--secondary"
onClick={collapseSection}
/>
</div>
)}
</div>
);
}

172
ui/page/discover/view.jsx
View file

@ -1,15 +1,14 @@
// @flow
import { SHOW_ADS, DOMAIN, SIMPLE_SITE, ENABLE_NO_SOURCE_CLAIMS } from 'config';
import { SHOW_ADS, DOMAIN, SIMPLE_SITE } from 'config';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import * as CS from 'constants/claim_search';
import React, { useState, useRef } from 'react';
import React, { useRef } from 'react';
import Page from 'component/page';
import ClaimListDiscover from 'component/claimListDiscover';
import Button from 'component/button';
import useHover from 'effects/use-hover';
import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
import usePersistedState from 'effects/use-persisted-state';
import { useIsMobile } from 'effects/use-screensize';
import analytics from 'analytics';
import HiddenNsfw from 'component/common/hidden-nsfw';
import Icon from 'component/common/icon';
@ -17,15 +16,10 @@ import Ads, { injectAd } from 'web/component/ads';
import LbcSymbol from 'component/common/lbc-symbol';
import I18nMessage from 'component/i18nMessage';
import moment from 'moment';
import { resolveLangForClaimSearch } from 'util/default-languages';
import { getLivestreamUris } from 'util/livestream';
const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
const SECTION = Object.freeze({ HIDDEN: 0, LESS: 1, MORE: 2 });
import LivestreamSection from './livestreamSection';
type Props = {
dynamicRouteProps: RowDataItem,
// --- redux ---
location: { search: string },
followedTags: Array<Tag>,
repostedUri: string,
@ -57,13 +51,9 @@ function DiscoverPage(props: Props) {
dynamicRouteProps,
} = props;
const [liveSectionStore, setLiveSectionStore] = usePersistedState('discover:liveSection', SECTION.LESS);
const [expandedYPos, setExpandedYPos] = useState(null);
const buttonRef = useRef();
const isHovering = useHover(buttonRef);
const isMobile = useIsMobile();
const isLargeScreen = useIsLargeScreen();
const urlParams = new URLSearchParams(search);
const langParam = urlParams.get(CS.LANGUAGE_KEY) || null;
@ -86,57 +76,53 @@ function DiscoverPage(props: Props) {
label = __('Unfollow');
}
const initialLiveTileLimit = getPageSize(DEFAULT_LIVESTREAM_TILE_LIMIT);
const includeLivestreams = !tagsQuery;
const [liveSection, setLiveSection] = useState(includeLivestreams ? liveSectionStore : SECTION.HIDDEN);
const livestreamUris = includeLivestreams && getLivestreamUris(activeLivestreams, channelIds);
const liveTilesOverLimit = livestreamUris && livestreamUris.length > initialLiveTileLimit;
const useDualList = liveSection === SECTION.LESS && liveTilesOverLimit;
function getMeta() {
return (
<>
{!dynamicRouteProps ? (
<a
className="help"
href="https://odysee.com/@OdyseeHelp:b/trending:50"
title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage>
</a>
) : (
tag &&
!isMobile && (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
)
)}
if (!dynamicRouteProps) {
return (
<a
className="help"
href="https://odysee.com/@OdyseeHelp:b/trending:50"
title={__('Learn more about Credits on %DOMAIN%', { DOMAIN })}
>
<I18nMessage tokens={{ lbc: <LbcSymbol /> }}>Results boosted by %lbc%</I18nMessage>
</a>
);
}
{liveSection === SECTION.MORE && liveTilesOverLimit && (
<div className="livestream-list--view-more">
<Button
label={__('Show less livestreams')}
button="link"
iconRight={ICONS.UP}
className="claim-grid__title--secondary"
onClick={() => setLiveSection(SECTION.LESS)}
/>
</div>
)}
</>
);
if (tag && !isMobile) {
return (
<Button
ref={buttonRef}
button="alt"
icon={ICONS.SUBSCRIBE}
iconColor="red"
onClick={handleFollowClick}
requiresAuth={IS_WEB}
label={label}
/>
);
}
return null;
}
function getPageSize(originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
function getSubSection() {
if (includeLivestreams) {
return (
<LivestreamSection
tileLayout={repostedUri ? false : tileLayout}
channelIds={channelIds}
activeLivestreams={activeLivestreams}
doFetchActiveLivestreams={doFetchActiveLivestreams}
languageSetting={languageSetting}
searchInLanguage={searchInLanguage}
langParam={langParam}
/>
);
}
return null;
}
function getPins(routeProps) {
@ -193,78 +179,21 @@ function DiscoverPage(props: Props) {
if (isAuthenticated || !SHOW_ADS || window.location.pathname === `/$/${PAGES.WILD_WEST}`) {
return;
}
// inject ad into last visible card
injectAd();
}, [isAuthenticated]);
// Sync liveSection --> liveSectionStore
React.useEffect(() => {
if (liveSection !== SECTION.HIDDEN && liveSection !== liveSectionStore) {
setLiveSectionStore(liveSection);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [liveSection]);
// Fetch active livestreams on mount
React.useEffect(() => {
const langCsv = resolveLangForClaimSearch(languageSetting, searchInLanguage, langParam);
const lang = langCsv ? langCsv.split(',') : null;
doFetchActiveLivestreams(CS.ORDER_BY_NEW_VALUE, lang);
// eslint-disable-next-line react-hooks/exhaustive-deps, (on mount only)
}, []);
// Maintain y-position when expanding livestreams section:
React.useEffect(() => {
if (liveSection === SECTION.MORE && expandedYPos !== null) {
window.scrollTo(0, expandedYPos);
setExpandedYPos(null);
}
}, [liveSection, expandedYPos]);
return (
<Page noFooter fullWidthPage={tileLayout}>
{useDualList && (
<>
<ClaimListDiscover
uris={livestreamUris && livestreamUris.slice(0, initialLiveTileLimit)}
headerLabel={headerLabel}
header={repostedUri ? <span /> : undefined}
tileLayout={repostedUri ? false : tileLayout}
hideFilters
infiniteScroll={false}
loading={false}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
meta={getMeta()}
/>
<div className="livestream-list--view-more">
<Button
label={__('Show more livestreams')}
button="link"
iconRight={ICONS.DOWN}
className="claim-grid__title--secondary"
onClick={() => {
doFetchActiveLivestreams();
setExpandedYPos(window.scrollY);
setLiveSection(SECTION.MORE);
}}
/>
</div>
</>
)}
<Ads type="homepage" />
<ClaimListDiscover
prefixUris={useDualList ? undefined : livestreamUris}
pins={useDualList ? undefined : getPins(dynamicRouteProps)}
pins={getPins(dynamicRouteProps)}
hideFilters={SIMPLE_SITE ? !(dynamicRouteProps || tags) : undefined}
showHeader={!useDualList}
header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
header={repostedUri ? <span /> : undefined}
subSection={getSubSection()}
tileLayout={repostedUri ? false : tileLayout}
defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}
claimType={claimType ? [claimType] : undefined}
headerLabel={!useDualList && headerLabel}
headerLabel={headerLabel}
tags={tags}
hiddenNsfwMessage={<HiddenNsfw type="page" />}
repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
@ -288,9 +217,8 @@ function DiscoverPage(props: Props) {
? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) || 3
: 3
}
meta={!useDualList && getMeta()}
meta={getMeta()}
hasSource
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
/>
</Page>
);

28
ui/scss/component/_livestream.scss
View file

@ -169,23 +169,17 @@
}
}
.livestream-list--view-more {
display: flex;
margin-left: var(--spacing-s);
margin-bottom: var(--spacing-xxxs);
.livestream-list {
margin-bottom: var(--spacing-l);
border-bottom: 1px solid var(--color-border);
@media (max-width: $breakpoint-small) {
button {
.button__content {
span {
// This is being set in '.section__actions' to '--font-xxsmall',
// causing the button to shrink in mobile.
// I think it is only needed for the mobile comments and shouldn't
// be applied globally?
// Anyway, reverting for this use-case only for now to reduce testing.
font-size: unset;
}
}
}
.claim-list__header-label {
margin-top: 0;
}
}
.livestream-list--view-more {
display: flex;
align-items: flex-end;
margin-bottom: var(--spacing-s);
}