Gray out 'Upload' button when previewing.

I simply check if the Modal exists, instead of creating an ACTION state in redux.
This commit is contained in:
infiinte-persistence 2020-08-03 15:57:55 +08:00 committed by Sean Yesmunt
parent 48787a1feb
commit 3588111938
2 changed files with 21 additions and 1 deletions

View file

@ -14,6 +14,7 @@ import {
} from 'lbry-redux'; } from 'lbry-redux';
import { doPublishDesktop } from 'redux/actions/publish'; import { doPublishDesktop } from 'redux/actions/publish';
import { selectUnclaimedRewardValue } from 'redux/selectors/rewards'; import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
import { selectModal } from 'redux/selectors/app';
import PublishPage from './view'; import PublishPage from './view';
const select = state => ({ const select = state => ({
@ -27,6 +28,7 @@ const select = state => ({
isStillEditing: selectIsStillEditing(state), isStillEditing: selectIsStillEditing(state),
isResolvingUri: selectIsResolvingPublishUris(state), isResolvingUri: selectIsResolvingPublishUris(state),
totalRewardValue: selectUnclaimedRewardValue(state), totalRewardValue: selectUnclaimedRewardValue(state),
modal: selectModal(state),
}); });
const perform = dispatch => ({ const perform = dispatch => ({

View file

@ -78,6 +78,7 @@ type Props = {
updatePublishForm: any => void, updatePublishForm: any => void,
checkAvailability: string => void, checkAvailability: string => void,
ytSignupPending: boolean, ytSignupPending: boolean,
modal: { id: string, modalProps: {} },
}; };
function PublishForm(props: Props) { function PublishForm(props: Props) {
@ -114,6 +115,7 @@ function PublishForm(props: Props) {
disabled = false, disabled = false,
checkAvailability, checkAvailability,
ytSignupPending, ytSignupPending,
modal,
} = props; } = props;
// Used to check if name should be auto-populated from title // Used to check if name should be auto-populated from title
@ -148,9 +150,20 @@ function PublishForm(props: Props) {
? isStillEditing && formValidLessFile ? isStillEditing && formValidLessFile
: formValidLessFile; : formValidLessFile;
const [previewing, setPreviewing] = React.useState(false);
useEffect(() => {
if (!modal) {
setTimeout(() => {
setPreviewing(false);
}, 250);
}
}, [modal]);
let submitLabel; let submitLabel;
if (isStillEditing) { if (isStillEditing) {
submitLabel = !publishing ? __('Save') : __('Saving...'); submitLabel = !publishing ? __('Save') : __('Saving...');
} else if (previewing) {
submitLabel = __('Preparing...');
} else { } else {
submitLabel = !publishing ? __('Upload') : __('Uploading...'); submitLabel = !publishing ? __('Upload') : __('Uploading...');
} }
@ -277,6 +290,7 @@ function PublishForm(props: Props) {
if (isStillEditing) { if (isStillEditing) {
publish(filePath, false); publish(filePath, false);
} else { } else {
setPreviewing(true);
publish(filePath, true); publish(filePath, true);
} }
} }
@ -382,7 +396,11 @@ function PublishForm(props: Props) {
onClick={handlePublish} onClick={handlePublish}
label={submitLabel} label={submitLabel}
disabled={ disabled={
formDisabled || !formValid || uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS || ytSignupPending formDisabled ||
!formValid ||
uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS ||
ytSignupPending ||
previewing
} }
/> />
<Button button="link" onClick={clearPublish} label={__('Cancel')} /> <Button button="link" onClick={clearPublish} label={__('Cancel')} />