lbry-desktop/ui/component/channelSelector/view.jsx

140 lines
4.4 KiB
React
Raw Normal View History

2020-03-18 18:11:37 +01:00
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
2020-03-18 18:11:37 +01:00
import classnames from 'classnames';
import React from 'react';
import ChannelThumbnail from 'component/channelThumbnail';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
2020-03-18 22:14:11 +01:00
import ChannelTitle from 'component/channelTitle';
2020-03-18 18:11:37 +01:00
import Icon from 'component/common/icon';
import { useHistory } from 'react-router';
import useGetUserMemberships from 'effects/use-get-user-memberships';
import PremiumBadge from 'component/common/premium-badge';
2020-03-18 18:11:37 +01:00
type Props = {
selectedChannelUrl: string, // currently selected channel
channels: ?Array<ChannelClaim>,
onChannelSelect: (url: string) => void,
hideAnon?: boolean,
activeChannelClaim: ?ChannelClaim,
doSetActiveChannel: (string) => void,
incognito: boolean,
doSetIncognito: (boolean) => void,
claimsByUri: { [string]: any },
doFetchUserMemberships: (claimIdCsv: string) => void,
odyseeMembershipByUri: (uri: string) => string,
2020-03-18 18:11:37 +01:00
};
type ListItemProps = {
2020-03-18 22:14:11 +01:00
uri: string,
2020-03-18 18:11:37 +01:00
isSelected?: boolean,
claimsByUri: { [string]: any },
doFetchUserMemberships: (claimIdCsv: string) => void,
odyseeMembershipByUri: (uri: string) => string,
2020-03-18 18:11:37 +01:00
};
function ChannelListItem(props: ListItemProps) {
const { uri, isSelected = false, claimsByUri, doFetchUserMemberships, odyseeMembershipByUri } = props;
const membership = odyseeMembershipByUri(uri);
const shouldFetchUserMemberships = true;
useGetUserMemberships(shouldFetchUserMemberships, [uri], claimsByUri, doFetchUserMemberships, [uri]);
2020-03-18 18:11:37 +01:00
return (
<div className={classnames('channel__list-item', { 'channel__list-item--selected': isSelected })}>
ChannelThumbnail improvements - [x] (6332) The IntersectionObserver method of lazy-loading loads cached images visibly late on slower devices. Previously, it was also showing the "broken image" icon briefly, which we mended by placing a dummy transparent image as the initial src. - Reverted that ugly transparent image fix. - Use the browser's built-in `loading="lazy"` instead. Sorry, Safari. - [x] Size-optimization did not take "device pixel ratio" into account. - When resizing an image through the CDN, we can't just take the dimensions of the tag in pixels directly -- we need to take zooming into account, otherwise the image ends up blurry. - Previously, we quickly disabled optimization for the channel avatar in the Channel Page because of this. Now that we know the root-cause, the change was reverted and we now go through the CDN with appropriate sizes. This also improves our Web Vital scores. - [x] Size-optimization wasn't really implemented for all ChannelThumbnail instances. - The CDN-optimized size was hardcoded to the largest instance, so small images like sidebar thumbnails are still loading images that are unnecessarily larger. - There's a little-bit of hardcoding of values from CSS here, but I think it's a ok compromise (not something we change often). It also doesn't need to be exact -- the "device pixel ratio" calculate will ensure it's slightly larger than what we need. - [x] Set `width` and `height` of `<img>` to improve CLS. - Addresses Ligthhouse complaints, although technically the shifting was addressed at the `ClaimPreviewTile` level (sub-container dimensions are well defined). - Notes: the values don't need to be the final CSS-adjusted sizes. It just needs to be in the right aspect ratio to help the browser pre-allocate space to avoid shifts. - [x] Add option to disable lazy-load Channel Thumbnails - The guidelines mentioned that items that are already in the viewport should not enable `loading="lazy"`. - We have a few areas where it doesn't make sense to lazy-load (e.g. thumbnail in Header, channel selector dropdown, publish preview, etc.).
2021-07-05 07:20:40 +02:00
<ChannelThumbnail uri={uri} hideStakedIndicator xsmall noLazyLoad />
2020-03-18 22:14:11 +01:00
<ChannelTitle uri={uri} />
<PremiumBadge membership={membership} />
2020-03-18 18:11:37 +01:00
{isSelected && <Icon icon={ICONS.DOWN} />}
</div>
);
}
type IncognitoSelectorProps = {
isSelected?: boolean,
};
function IncognitoSelector(props: IncognitoSelectorProps) {
return (
<div className={classnames('channel__list-item', { 'channel__list-item--selected': props.isSelected })}>
<Icon sectionIcon icon={ICONS.ANONYMOUS} />
<h2 className="channel__list-text">{__('Anonymous')}</h2>
{props.isSelected && <Icon icon={ICONS.DOWN} />}
</div>
);
}
2020-03-18 18:11:37 +01:00
function ChannelSelector(props: Props) {
const {
channels,
activeChannelClaim,
doSetActiveChannel,
hideAnon = false,
incognito,
doSetIncognito,
odyseeMembershipByUri,
claimsByUri,
doFetchUserMemberships,
} = props;
const {
push,
location: { pathname },
} = useHistory();
const activeChannelUrl = activeChannelClaim && activeChannelClaim.permanent_url;
2020-03-18 18:11:37 +01:00
function handleChannelSelect(channelClaim) {
doSetIncognito(false);
doSetActiveChannel(channelClaim.claim_id);
2020-03-18 18:11:37 +01:00
}
return (
<div className="channel__selector">
<Menu>
<MenuButton>
{(incognito && !hideAnon) || !activeChannelUrl ? (
<IncognitoSelector isSelected />
) : (
<ChannelListItem
odyseeMembershipByUri={odyseeMembershipByUri}
uri={activeChannelUrl}
isSelected
claimsByUri={claimsByUri}
doFetchUserMemberships={doFetchUserMemberships}
/>
)}
</MenuButton>
<MenuList className="menu__list channel__list">
{channels &&
channels.map((channel) => (
<MenuItem key={channel.permanent_url} onSelect={() => handleChannelSelect(channel)}>
<ChannelListItem
odyseeMembershipByUri={odyseeMembershipByUri}
uri={channel.permanent_url}
claimsByUri={claimsByUri}
doFetchUserMemberships={doFetchUserMemberships}
/>
</MenuItem>
))}
{!hideAnon && (
<MenuItem onSelect={() => doSetIncognito(true)}>
<IncognitoSelector />
2020-05-08 03:53:00 +02:00
</MenuItem>
)}
<MenuItem onSelect={() => push(`/$/${PAGES.CHANNEL_NEW}?redirect=${pathname}`)}>
<div className="channel__list-item">
<Icon sectionIcon icon={ICONS.CHANNEL} />
<h2 className="channel__list-text">{__('Create a new channel')}</h2>
</div>
</MenuItem>
</MenuList>
</Menu>
</div>
2020-03-18 18:11:37 +01:00
);
}
export default ChannelSelector;