Category livestreams: re-implement using subSection + use horizontal scroll in mobile
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:
parent
5f92ccbf47
commit
d15a0308b2
4 changed files with 221 additions and 139 deletions
|
@ -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
159
ui/page/discover/livestreamSection.jsx
Normal 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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue