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

refactor collection thumbs and fix list channel updates (#7095)

Browse source 
* refactor collection thumbs

* collection update handle channels

* collection update handle channels more better

* bugfix
This commit is contained in:
jessopb 2021-09-15 10:11:01 -04:00 committed by GitHub
parent 65902f6d58
commit 21ba7840ca
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 82 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
ui/component/collectionEdit/index.js
View file

@ -20,6 +20,7 @@ import {
import CollectionForm from './view';
import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
@ -46,6 +47,8 @@ const perform = (dispatch) => ({
publishCollectionUpdate: (params) => dispatch(doCollectionPublishUpdate(params)),
publishCollection: (params, collectionId) => dispatch(doCollectionPublish(params, collectionId)),
clearCollectionErrors: () => dispatch({ type: LBRY_REDUX_ACTIONS.CLEAR_COLLECTION_ERRORS }),
setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
setIncognito: (incognito) => dispatch(doSetIncognito(incognito)),
});
export default connect(select, perform)(CollectionForm);

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

@ -52,6 +52,8 @@ type Props = {
publishCollection: (CollectionPublishParams, string) => Promise<any>,
clearCollectionErrors: () => void,
onDone: (string) => void,
setActiveChannel: (string) => void,
setIncognito: (boolean) => void,
};
function CollectionForm(props: Props) {
@ -82,6 +84,8 @@ function CollectionForm(props: Props) {
publishCollectionUpdate,
publishCollection,
clearCollectionErrors,
setActiveChannel,
setIncognito,
onDone,
} = props;
const activeChannelName = activeChannelClaim && activeChannelClaim.name;
@ -91,22 +95,26 @@ function CollectionForm(props: Props) {
}
const activeChannelId = activeChannelClaim && activeChannelClaim.claim_id;
const collectionName = (claim && claim.name) || (collection && collection.name);
const collectionChannel = claim && claim.signing_channel ? claim.signing_channel.claim_id : undefined;
const hasClaim = !!claim;
const [initialized, setInitialized] = React.useState(false);
const [nameError, setNameError] = React.useState(undefined);
const [bidError, setBidError] = React.useState('');
const [params, setParams]: [any, (any) => void] = React.useState(getCollectionParams());
const [thumbStatus, setThumbStatus] = React.useState('');
const [thumbError, setThumbError] = React.useState('');
const [params, setParams]: [any, (any) => void] = React.useState({});
const name = params.name;
const isNewCollection = !uri;
const { replace } = useHistory();
const languageParam = params.languages;
const languageParam = params.languages || [];
const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
const secondaryLanguage = Array.isArray(languageParam) && languageParam.length >= 2 && languageParam[1];
const hasClaims = params.claims && params.claims.length;
const collectionClaimIdsString = JSON.stringify(collectionClaimIds);
const itemError = !params.claims.length ? __('Cannot publish empty list') : '';
const itemError = !hasClaims ? __('Cannot publish empty list') : '';
const thumbnailError =
(params.thumbnail_error && params.thumbnail_status !== THUMBNAIL_STATUSES.COMPLETE && __('Invalid thumbnail')) ||
(params.thumbnail_status === THUMBNAIL_STATUSES.IN_PROGRESS && __('Please wait for thumbnail to finish uploading'));
(thumbError && thumbStatus !== THUMBNAIL_STATUSES.COMPLETE && __('Invalid thumbnail')) ||
(thumbStatus === THUMBNAIL_STATUSES.IN_PROGRESS && __('Please wait for thumbnail to finish uploading'));
const submitError = nameError || bidError || itemError || updateError || createError || thumbnailError;
function parseName(newName) {
@ -118,6 +126,10 @@ function CollectionForm(props: Props) {
setParams({ ...params, ...paramObj });
}
function updateParams(paramsObj) {
setParams({ ...params, ...paramsObj });
}
// TODO remove this or better decide whether app should delete languages[2+]
// This was added because a previous update setting was duplicating language codes
function dedupeLanguages(languages) {
@ -140,11 +152,19 @@ function CollectionForm(props: Props) {
}
}
function handleUpdateThumbnail(update: { [string]: string }) {
if (update.thumbnail_url) {
setParam(update);
} else if (update.thumbnail_status) {
setThumbStatus(update.thumbnail_status);
} else {
setThumbError(update.thumbnail_error);
}
}
function getCollectionParams() {
const collectionParams: {
thumbnail_url?: string,
thumbnail_error?: boolean,
thumbnail_status?: string,
name?: string,
description?: string,
title?: string,
@ -168,8 +188,8 @@ function CollectionForm(props: Props) {
return { name: tag };
})
: [],
claim_id: String(claim && claim.claim_id),
channel_id: String(activeChannelId && parseName(collectionName)),
claim_id: claim ? claim.claim_id : undefined,
channel_id: claim ? collectionChannel : activeChannelId || undefined,
claims: collectionClaimIds,
};
@ -235,16 +255,38 @@ function CollectionForm(props: Props) {
setNameError(nameError);
}, [name]);
// on mount, if we get a collectionChannel, set it.
React.useEffect(() => {
if (incognito && params.channel_id) {
const newParams = Object.assign({}, params);
delete newParams.channel_id;
setParams(newParams);
} else if (activeChannelId && params.channel_id !== activeChannelId) {
setParams({ ...params, channel_id: activeChannelId });
if (hasClaim && !initialized) {
if (collectionChannel) {
setActiveChannel(collectionChannel);
setIncognito(false);
} else if (!collectionChannel && hasClaim) {
setIncognito(true);
}
setInitialized(true);
}
}, [activeChannelId, incognito, params, setParams]);
}, [setInitialized, setActiveChannel, collectionChannel, setIncognito, hasClaim, incognito, initialized]);
// every time activechannel or incognito changes, set it.
React.useEffect(() => {
if (initialized) {
if (activeChannelId) {
setParam({ channel_id: activeChannelId });
} else if (incognito) {
setParam({ channel_id: undefined });
}
}
}, [activeChannelId, incognito, initialized]);
// setup initial params after we're sure if it's published or not
React.useEffect(() => {
if (!uri || (uri && hasClaim)) {
updateParams(getCollectionParams());
}
}, [uri, hasClaim]);
console.log('params', params);
return (
<>
<div className={classnames('main--contained', { 'card--disabled': disabled })}>
@ -295,10 +337,9 @@ function CollectionForm(props: Props) {
<fieldset-section>
<SelectThumbnail
thumbnailParam={params.thumbnail_url}
thumbnailParamError={params.thumbnail_error}
thumbnailParamStatus={params.thumbnail_status}
updateThumbnailParams={setParam}
publishForm={false}
thumbnailParamError={thumbError}
thumbnailParamStatus={thumbStatus}
updateThumbnailParams={handleUpdateThumbnail}
/>
</fieldset-section>
<FormField
@ -422,12 +463,7 @@ function CollectionForm(props: Props) {
<Button
button="primary"
disabled={
creatingCollection ||
updatingCollection ||
nameError ||
bidError ||
thumbnailError ||
!params.claims.length
creatingCollection || updatingCollection || nameError || bidError || thumbnailError || !hasClaims
}
label={creatingCollection || updatingCollection ? __('Submitting') : __('Submit')}
onClick={handleSubmit}

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

@ -4,6 +4,7 @@ import {
selectMyPublishedPlaylistCollections,
selectMyUnpublishedCollections, // should probably distinguish types
// selectSavedCollections,
selectFetchingMyCollections,
} from 'lbry-redux';
import CollectionsListMine from './view';
@ -12,6 +13,7 @@ const select = (state) => ({
publishedCollections: selectMyPublishedPlaylistCollections(state),
unpublishedCollections: selectMyUnpublishedCollections(state),
// savedCollections: selectSavedCollections(state),
fetchingCollections: selectFetchingMyCollections(state),
});
export default connect(select)(CollectionsListMine);

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

@ -18,6 +18,7 @@ type Props = {
publishedCollections: CollectionGroup,
unpublishedCollections: CollectionGroup,
// savedCollections: CollectionGroup,
fetchingCollections: boolean,
};
const ALL = 'All';
@ -31,6 +32,7 @@ export default function CollectionsListMine(props: Props) {
publishedCollections,
unpublishedCollections,
// savedCollections, these are resolved on startup from sync'd claimIds or urls
fetchingCollections,
} = props;
const builtinCollectionsList = (Object.values(builtinCollections || {}): any);
@ -129,7 +131,10 @@ export default function CollectionsListMine(props: Props) {
<div className="claim-grid__header section">
<h1 className="claim-grid__title">
{__('Playlists')}
{!hasCollections && (
{!hasCollections && !fetchingCollections && (
<div className="claim-grid__title--empty">{__('(Empty) --[indicates empty playlist]--')}</div>
)}
{!hasCollections && fetchingCollections && (
<div className="claim-grid__title--empty">{__('(Empty) --[indicates empty playlist]--')}</div>
)}
</h1>
@ -174,11 +179,16 @@ export default function CollectionsListMine(props: Props) {
</div>
</div>
)}
{!hasCollections && (
{!hasCollections && !fetchingCollections && (
<div className="main--empty">
<Yrbl type={'sad'} title={__('You have no lists yet. Better start hoarding!')} />
</div>
)}
{!hasCollections && fetchingCollections && (
<div className="main--empty">
<h2 className="main--empty empty">{__('Loading...')}</h2>
</div>
)}
</div>
</>
);

3
ui/component/selectThumbnail/view.jsx
View file

@ -16,7 +16,6 @@ type Props = {
thumbnail: ?string,
formDisabled: boolean,
uploadThumbnailStatus: string,
publishForm: boolean,
thumbnailPath: ?string,
thumbnailError: ?string,
thumbnailParam: ?string,
@ -34,7 +33,6 @@ function SelectThumbnail(props: Props) {
fileInfos,
myClaimForUri,
formDisabled,
publishForm = true,
uploadThumbnailStatus: status,
openModal,
updatePublishForm,
@ -45,6 +43,7 @@ function SelectThumbnail(props: Props) {
resetThumbnailStatus,
} = props;
const publishForm = !updateThumbnailParams;
const thumbnail = publishForm ? props.thumbnail : thumbnailParam;
const thumbnailError = publishForm ? props.thumbnailError : props.thumbnailParamError;