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

extra collection publish buttons, styling

Browse source
This commit is contained in:
zeppi 2021-06-15 16:06:57 -04:00 committed by jessopb
parent c92bcc945f
commit 761974ca6f
11 changed files with 164 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
ui/component/channelContent/view.jsx
View file

@ -26,7 +26,7 @@ type Props = {
channelIsBlackListed: boolean,
defaultPageSize?: number,
defaultInfiniteScroll?: Boolean,
claim: ?Claim,
claim: Claim,
isAuthenticated: boolean,
showMature: boolean,
tileLayout: boolean,
@ -135,43 +135,39 @@ function ChannelContent(props: Props) {
{!channelIsMine && claimsInChannel > 0 && <HiddenNsfwClaims uri={uri} />}
{claim && claimsInChannel > 0 ? (
<ClaimListDiscover
defaultFreshness={CS.FRESH_ALL}
showHiddenByUser={viewHiddenChannels}
forceShowReposts
hideFilters={!showFilters}
hideAdvancedFilter={!showFilters}
tileLayout={tileLayout}
uris={searchResults}
channelIds={[claim.claim_id]}
claimType={claimType}
feeAmount={CS.FEE_AMOUNT_ANY}
defaultOrderBy={CS.ORDER_BY_NEW}
pageSize={defaultPageSize}
infiniteScroll={defaultInfiniteScroll}
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" />}
meta={
showFilters && (
<Form onSubmit={() => {}} className="wunderbar--inline">
<Icon icon={ICONS.SEARCH} />
<FormField
className="wunderbar__input--inline"
value={searchQuery}
onChange={handleInputChange}
type="text"
placeholder={__('Search')}
/>
</Form>
)
}
isChannel
channelIsMine={channelIsMine}
empty={empty}
/>
) : (
<section className="main--empty">{__("This channel hasn't published anything yet")}</section>
)}
<ClaimListDiscover
defaultFreshness={CS.FRESH_ALL}
showHiddenByUser={viewHiddenChannels}
forceShowReposts
hideFilters={!showFilters}
hideAdvancedFilter={!showFilters}
tileLayout={tileLayout}
uris={searchResults}
channelIds={[claim.claim_id]}
claimType={claimType}
feeAmount={CS.FEE_AMOUNT_ANY}
defaultOrderBy={CS.ORDER_BY_NEW}
pageSize={defaultPageSize}
infiniteScroll={defaultInfiniteScroll}
injectedItem={SHOW_ADS && !isAuthenticated && IS_WEB && <Ads type="video" />}
meta={
showFilters && (
<Form onSubmit={() => {}} className="wunderbar--inline">
<Icon icon={ICONS.SEARCH} />
<FormField
className="wunderbar__input--inline"
value={searchQuery}
onChange={handleInputChange}
type="text"
placeholder={__('Search')}
/>
</Form>
)
}
isChannel
channelIsMine={channelIsMine}
empty={empty}
/>
</Fragment>
);
}

1
ui/component/claimListDiscover/view.jsx
View file

@ -512,6 +512,7 @@ function ClaimListDiscover(props: Props) {
liveLivestreamsFirst={liveLivestreamsFirst}
livestreamMap={livestreamMap}
searchOptions={options}
empty={empty}
/>
{loading && (
<div className="claim-grid">

2
ui/component/claimMenuList/index.js
View file

@ -8,6 +8,7 @@ import {
makeSelectNameForCollectionId,
makeSelectCollectionIsMine,
COLLECTIONS_CONSTS,
makeSelectEditedCollectionForId,
} from 'lbry-redux';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { doChannelMute, doChannelUnmute } from 'redux/actions/blocked';
@ -38,6 +39,7 @@ const select = (state, props) => {
collectionName: makeSelectNameForCollectionId(props.collectionId)(state),
isMyCollection: makeSelectCollectionIsMine(props.collectionId)(state),
hasExperimentalUi: makeSelectUserPropForProp(USER.EXPERIMENTAL_UI)(state),
editedCollection: makeSelectEditedCollectionForId(props.collectionId)(state),
};
};

53
ui/component/claimMenuList/view.jsx
View file

@ -49,6 +49,7 @@ type Props = {
doChannelSubscribe: (SubscriptionArgs) => void,
doChannelUnsubscribe: (SubscriptionArgs) => void,
isChannelPage: boolean,
editedCollection: Collection,
};
function ClaimMenuList(props: Props) {
@ -79,10 +80,11 @@ function ClaimMenuList(props: Props) {
doChannelSubscribe,
doChannelUnsubscribe,
isChannelPage = false,
editedCollection,
} = props;
const repostedContent = claim && claim.reposted_claim;
const contentClaim = repostedContent || claim;
const incognito = channelUri && !(channelUri.includes('@'));
const incognito = channelUri && !channelUri.includes('@');
const signingChannel = claim && (claim.signing_channel || claim);
const permanentUrl = String(channelUri);
const isChannel = !incognito && signingChannel === claim;
@ -226,6 +228,17 @@ function ClaimMenuList(props: Props) {
{/* COLLECTION OPERATIONS */}
{collectionId && collectionName && isCollectionClaim && (
<>
{Boolean(editedCollection) && (
<MenuItem
className="comment__menu-option"
onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}?view=edit`)}
>
<div className="menu__link">
<Icon aria-hidden iconColor={'red'} icon={ICONS.PUBLISH} />
{__('Publish')}
</div>
</MenuItem>
)}
<MenuItem className="comment__menu-option" onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}`)}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.VIEW} />
@ -272,23 +285,25 @@ function ClaimMenuList(props: Props) {
{!isMyCollection && (
<>
{(!claimIsMine || channelIsBlocked) && channelUri
? !incognito && !isRepost && (
<>
<MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
</div>
</MenuItem>
{(!claimIsMine || channelIsBlocked) && channelUri ? (
!incognito &&
!isRepost && (
<>
<MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
</div>
</MenuItem>
<MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
</div>
</MenuItem>
</>
<MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
</div>
</MenuItem>
</>
)
) : (
<>
{!isChannelPage && !isRepost && (
@ -310,9 +325,7 @@ function ClaimMenuList(props: Props) {
)}
</>
)}
{!isRepost && (
<hr className="menu__separator" />
)}
{!isRepost && <hr className="menu__separator" />}
</>
)}

2
ui/component/collectionEdit/view.jsx
View file

@ -235,7 +235,7 @@ function CollectionForm(props: Props) {
<>
<div className={classnames('main--contained', { 'card--disabled': disabled })}>
<Tabs>
<TabList className="tabs__list--channel-page">
<TabList className="tabs__list--collection-edit-page">
<Tab>{__('General')}</Tab>
<Tab>{__('Items')}</Tab>
<Tab>{__('Credits')}</Tab>

11
ui/component/collectionMenuList/view.jsx
View file

@ -37,7 +37,16 @@ function ClaimMenuList(props: Props) {
<MenuItem className="comment__menu-option" onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}`)}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.VIEW} />
{__('Edit List')}
{__('View List')}
</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => push(`/$/${PAGES.LIST}/${collectionId}?view=edit`)}
>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publish List')}
</div>
</MenuItem>
<MenuItem

37
ui/component/collectionsListMine/view.jsx
View file

@ -7,7 +7,9 @@ import { COLLECTIONS_CONSTS } from 'lbry-redux';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import Yrbl from '../yrbl';
import Yrbl from 'component/yrbl';
import usePersistedState from 'effects/use-persisted-state';
import Card from 'component/common/card';
type Props = {
builtinCollections: CollectionGroup,
@ -33,6 +35,17 @@ export default function CollectionsListMine(props: Props) {
const watchLater = builtinCollectionsList.find((list) => list.id === COLLECTIONS_CONSTS.WATCH_LATER_ID);
const favorites = builtinCollectionsList.find((list) => list.id === COLLECTIONS_CONSTS.FAVORITES_ID);
const builtin = [watchLater, favorites];
const [showHelp, setShowHelp] = usePersistedState('livestream-help-seen', true);
const helpText = (
<div className="section__subtitle">
<p>{__(`Find some content you want to add to a list`)}</p>
<p>{__(`Use the menu to add it to a list`)}</p>
<p>{__(`Create as many lists as you wish`)}</p>
<p>{__(`Keep the list private, or publish it (transaction fees apply).`)}</p>
</div>
);
return (
<>
{builtin.map((list: Collection) => {
@ -72,12 +85,22 @@ export default function CollectionsListMine(props: Props) {
);
})}
<div className="claim-grid__wrapper">
<h1 className="claim-grid__header claim-grid__title">
{__('Playlists')}
<div className="claim-grid__title--empty">(Empty)</div>
</h1>
<div className="claim-grid__header claim-grid__header--between section">
<h1 className="claim-grid__title">
{__('Playlists')}
{!hasCollections && <div className="claim-grid__title--empty">(Empty)</div>}
</h1>
<Button button="link" onClick={() => setShowHelp(!showHelp)} label={__('How does this work?')} />
</div>
{showHelp && (
<Card
titleActions={<Button button="close" icon={ICONS.REMOVE} onClick={() => setShowHelp(false)} />}
title={__('Introducing Lists')}
actions={helpText}
/>
)}
{Boolean(hasCollections) && (
<>
<div className="section">
<div className="claim-grid">
{unpublishedCollectionsList &&
unpublishedCollectionsList.length > 0 &&
@ -88,7 +111,7 @@ export default function CollectionsListMine(props: Props) {
publishedList.length > 0 &&
publishedList.map((key) => <CollectionPreviewTile tileLayout collectionId={key} key={key} />)}
</div>
</>
</div>
)}
{!hasCollections && (
<div className="main--empty">

2
ui/page/channel/index.js
View file

@ -7,6 +7,7 @@ import {
selectCurrentChannelPage,
makeSelectClaimForUri,
makeSelectClaimIsPending,
selectMyUnpublishedCollections,
} from 'lbry-redux';
import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
import { selectYoutubeChannels } from 'redux/selectors/user';
@ -30,6 +31,7 @@ const select = (state, props) => ({
youtubeChannels: selectYoutubeChannels(state),
blockedChannels: selectModerationBlockList(state),
mutedChannels: selectMutedChannels(state),
unpublishedCollections: selectMyUnpublishedCollections(state),
});
const perform = (dispatch) => ({

34
ui/page/channel/view.jsx
View file

@ -22,6 +22,7 @@ import ClaimSupportButton from 'component/claimSupportButton';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import ClaimMenuList from 'component/claimMenuList';
import Yrbl from 'component/yrbl';
import I18nMessage from '../../component/i18nMessage';
export const PAGE_VIEW_QUERY = `view`;
const CONTENT_PAGE = 'content';
@ -52,6 +53,7 @@ type Props = {
youtubeChannels: ?Array<{ channel_claim_id: string, sync_status: string, transfer_state: string }>,
blockedChannels: Array<string>,
mutedChannels: Array<string>,
unpublishedCollections: CollectionGroup,
};
function ChannelPage(props: Props) {
@ -70,6 +72,7 @@ function ChannelPage(props: Props) {
youtubeChannels,
blockedChannels,
mutedChannels,
unpublishedCollections,
} = props;
const {
push,
@ -99,6 +102,31 @@ function ChannelPage(props: Props) {
return true;
}
});
const hasUnpublishedCollections = unpublishedCollections && Object.keys(unpublishedCollections).length;
let collectionEmpty;
if (channelIsMine) {
collectionEmpty = hasUnpublishedCollections ? (
<section className="main--empty">
{
<p>
<I18nMessage
tokens={{
pick: <Button button="link" navigate={`/$/${PAGES.LISTS}`} label={__('Pick')} />,
}}
>
You have unpublished lists! %pick% one and publish it!
</I18nMessage>
</p>
}
</section>
) : (
<section className="main--empty">{__('You have no lists! Create one from any playable content.')}</section>
);
} else {
collectionEmpty = <section className="main--empty">{__('You have unpublished lists')}</section>;
}
let channelIsBlackListed = false;
if (claim && blackListedOutpoints) {
@ -269,7 +297,7 @@ function ChannelPage(props: Props) {
uri={uri}
channelIsBlackListed={channelIsBlackListed}
viewHiddenChannels
empty={__('No Content Found')}
empty={<section className="main--empty">{__('No Content Found')}</section>}
/>
</TabPanel>
<TabPanel>
@ -278,7 +306,7 @@ function ChannelPage(props: Props) {
uri={uri}
channelIsBlackListed={channelIsBlackListed}
viewHiddenChannels
empty={__('No Lists Found')}
empty={collectionEmpty}
/>
</TabPanel>
<TabPanel>
@ -287,7 +315,7 @@ function ChannelPage(props: Props) {
uri={uri}
channelIsBlackListed={channelIsBlackListed}
viewHiddenChannels
empty={__('No Reposts Found')}
empty={<section className="main--empty">{__('No Reposts Found')}</section>}
/>
</TabPanel>
<TabPanel>

5
ui/scss/component/_claim-list.scss
View file

@ -408,10 +408,15 @@
}
}
.claim-grid__header--between {
justify-content: space-between;
}
.claim-grid__title {
font-weight: 300;
font-size: var(--font-large);
margin-right: var(--spacing-m);
display: flex;
}
.claim-grid__title-span {

15
ui/scss/component/tabs.scss
View file

@ -29,6 +29,21 @@
}
}
.tabs__list--collection-edit-page {
padding-right: var(--spacing-m);
margin-bottom: var(--spacing-l);
height: 4rem;
border-bottom-left-radius: var(--card-radius);
border-bottom-right-radius: var(--card-radius);
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
border: 1px solid var(--color-border);
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m);
}
}
.tab {
@extend .button--link;
margin-right: var(--spacing-l);