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

- fix issue where upload didn't show for users without replays

Browse source 
- better define if the form is in edit or create mode
- improve some naming conventions
This commit is contained in:
Dan Peterson 2021-12-31 14:48:07 -06:00 • committed by Thomas Zarebczan
parent 6b809e76c4
commit cb562ef27d
2 changed files with 120 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

221
ui/component/publishFile/view.jsx
View file

@ -52,8 +52,9 @@ type Props = {
channelSignature: { signature?: string, signing_ts?: string }, channelSignature: { signature?: string, signing_ts?: string },
isCheckingLivestreams: boolean, isCheckingLivestreams: boolean,
setWaitForFile: (boolean) => void, setWaitForFile: (boolean) => void,
fileSelectSource: string, fileSource: string,
changeFileSelectSource: (string) => void, changeFileSource: (string) => void,
inEditMode: boolean,
}; };
function PublishFile(props: Props) { function PublishFile(props: Props) {
@ -87,8 +88,9 @@ function PublishFile(props: Props) {
channelSignature, channelSignature,
isCheckingLivestreams, isCheckingLivestreams,
setWaitForFile, setWaitForFile,
fileSelectSource, fileSource,
changeFileSelectSource, changeFileSource,
inEditMode,
} = props; } = props;
const RECOMMENDED_BITRATE = 6000000; const RECOMMENDED_BITRATE = 6000000;
@ -120,8 +122,8 @@ function PublishFile(props: Props) {
const livestreamDataStr = JSON.stringify(livestreamData); const livestreamDataStr = JSON.stringify(livestreamData);
const hasLivestreamData = livestreamData && Boolean(livestreamData.length); const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
const showSourceSelector = isLivestreamClaim || (hasLivestreamData && mode === PUBLISH_MODES.FILE);
const [showSourceSelector, setShowSourceSelector] = useState(false);
// const [showFileUpdate, setShowFileUpdate] = useState(false); // const [showFileUpdate, setShowFileUpdate] = useState(false);
const [selectedFileIndex, setSelectedFileIndex] = useState(null); const [selectedFileIndex, setSelectedFileIndex] = useState(null);
const PAGE_SIZE = 4; const PAGE_SIZE = 4;
@ -140,21 +142,29 @@ function PublishFile(props: Props) {
} }
}, [currentFileType, mode, isStillEditing, updatePublishForm]); }, [currentFileType, mode, isStillEditing, updatePublishForm]);
// Initialize default file source state. // Initialize default file source state for each mode.
useEffect(() => { useEffect(() => {
// Editing a livestream setShowSourceSelector(false);
if (isLivestreamClaim) { switch (mode) {
changeFileSelectSource(SOURCE_SELECT); case PUBLISH_MODES.LIVESTREAM:
if (inEditMode) {
changeFileSource(SOURCE_SELECT);
setShowSourceSelector(true);
} else {
changeFileSource(SOURCE_NONE);
}
break;
case PUBLISH_MODES.POST:
changeFileSource(SOURCE_NONE);
break;
case PUBLISH_MODES.FILE:
if (hasLivestreamData) setShowSourceSelector(true);
changeFileSource(SOURCE_UPLOAD);
break;
default:
changeFileSource(SOURCE_UPLOAD);
} }
// Publishing a livestream }, [mode, hasLivestreamData]); // eslint-disable-line react-hooks/exhaustive-deps
else if (mode === PUBLISH_MODES.LIVESTREAM) {
changeFileSelectSource(SOURCE_NONE);
} else if (showSourceSelector && name) {
changeFileSelectSource(SOURCE_SELECT);
} else {
changeFileSelectSource(SOURCE_UPLOAD);
}
}, [mode]); // eslint-disable-line react-hooks/exhaustive-deps
const normalizeUrlForProtocol = (url) => { const normalizeUrlForProtocol = (url) => {
if (url.startsWith('https://')) { if (url.startsWith('https://')) {
@ -332,7 +342,7 @@ function PublishFile(props: Props) {
updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation }); updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation });
} }
} }
changeFileSelectSource(source); changeFileSource(source);
setWaitForFile(source !== SOURCE_NONE); setWaitForFile(source !== SOURCE_NONE);
} }
@ -497,13 +507,13 @@ function PublishFile(props: Props) {
handleFileSource(fmode.actionName); handleFileSource(fmode.actionName);
}} }}
className={classnames('button-toggle', { className={classnames('button-toggle', {
'button-toggle--active': fileSelectSource === fmode.actionName, 'button-toggle--active': fileSource === fmode.actionName,
})} })}
/> />
))} ))}
</div> </div>
</div> </div>
{fileSelectSource === SOURCE_SELECT && ( {fileSource === SOURCE_SELECT && (
<Button <Button
button="secondary" button="secondary"
label={__('Check for Replays')} label={__('Check for Replays')}
@ -518,7 +528,7 @@ function PublishFile(props: Props) {
</fieldset-section> </fieldset-section>
)} )}
{showSourceSelector && fileSelectSource === SOURCE_UPLOAD && showFileUpload && ( {fileSource === SOURCE_UPLOAD && showFileUpload && (
<> <>
<FileSelector <FileSelector
label={__('File')} label={__('File')}
@ -532,97 +542,86 @@ function PublishFile(props: Props) {
{getUploadMessage()} {getUploadMessage()}
</> </>
)} )}
{showSourceSelector && {fileSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && !isCheckingLivestreams && (
fileSelectSource === SOURCE_SELECT && <>
showFileUpload && <fieldset-section>
hasLivestreamData && <label>{__('Select Replay')}</label>
!isCheckingLivestreams && ( <div className="table__wrapper">
<> <table className="table table--livestream-data">
<fieldset-section> <tbody>
<label>{__('Select Replay')}</label> {livestreamData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).map((item, i) => (
<div className="table__wrapper"> <tr
<table className="table table--livestream-data"> onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
<tbody> key={item.id}
{livestreamData className={classnames('livestream__data-row', {
.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE) 'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
.map((item, i) => ( })}
<tr >
<td>
<FormField
type="radio"
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i}
label={null}
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
key={item.id} className="livestream__data-row-radio"
className={classnames('livestream__data-row', { />
'livestream__data-row--selected': </td>
selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i, <td>
})} <div className="livestream_thumb_container">
> {item.data.thumbnails.slice(0, 3).map((thumb) => (
<td> <img key={thumb} className="livestream___thumb" src={thumb} />
<FormField ))}
type="radio" </div>
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i} </td>
label={null} <td>
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} {`${Math.floor(item.data.fileDuration / 60)} ${
className="livestream__data-row-radio" Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute')
/> }`}
</td> <div className="table__item-label">
<td> {`${moment(item.data.uploadedAt).from(moment())}`}
<div className="livestream_thumb_container"> </div>
{item.data.thumbnails.slice(0, 3).map((thumb) => ( </td>
<img key={thumb} className="livestream___thumb" src={thumb} /> <td>
))} <CopyableText
</div> primaryButton
</td> copyable={normalizeUrlForProtocol(item.data.fileLocation)}
<td> snackMessage={__('Url copied.')}
{`${Math.floor(item.data.fileDuration / 60)} ${ />
Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute') </td>
}`} </tr>
<div className="table__item-label"> ))}
{`${moment(item.data.uploadedAt).from(moment())}`} </tbody>
</div> </table>
</td> </div>
<td> </fieldset-section>
<CopyableText <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
primaryButton <fieldset-section>
copyable={normalizeUrlForProtocol(item.data.fileLocation)} <ReactPaginate
snackMessage={__('Url copied.')} pageCount={totalPages}
/> pageRangeDisplayed={2}
</td> previousLabel="‹"
</tr> nextLabel="›"
))} activeClassName="pagination__item--selected"
</tbody> pageClassName="pagination__item"
</table> previousClassName="pagination__item pagination__item--previous"
</div> nextClassName="pagination__item pagination__item--next"
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={(e) => handlePaginateReplays(e.selected + 1)}
forcePage={currentPage - 1}
initialPage={currentPage - 1}
containerClassName="pagination"
/>
</fieldset-section> </fieldset-section>
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate"> </fieldset-group>
<fieldset-section> </>
<ReactPaginate )}
pageCount={totalPages} {fileSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
pageRangeDisplayed={2} <div className="main--empty empty">
previousLabel="‹" <Empty text={__('No replays found.')} />
nextLabel="›" </div>
activeClassName="pagination__item--selected" )}
pageClassName="pagination__item" {fileSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
previousClassName="pagination__item pagination__item--previous"
nextClassName="pagination__item pagination__item--next"
breakClassName="pagination__item pagination__item--break"
marginPagesDisplayed={2}
onPageChange={(e) => handlePaginateReplays(e.selected + 1)}
forcePage={currentPage - 1}
initialPage={currentPage - 1}
containerClassName="pagination"
/>
</fieldset-section>
</fieldset-group>
</>
)}
{showSourceSelector &&
fileSelectSource === SOURCE_SELECT &&
showFileUpload &&
!hasLivestreamData &&
!isCheckingLivestreams && (
<div className="main--empty empty">
<Empty text={__('No replays found.')} />
</div>
)}
{showSourceSelector && fileSelectSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
<div className="main--empty empty"> <div className="main--empty empty">
<Spinner small /> <Spinner small />
</div> </div>

18
ui/component/publishForm/view.jsx
View file

@ -140,6 +140,7 @@ function PublishForm(props: Props) {
hasClaimedInitialRewards, hasClaimedInitialRewards,
} = props; } = props;
const inEditMode = Boolean(editingURI);
const { replace, location } = useHistory(); const { replace, location } = useHistory();
const urlParams = new URLSearchParams(location.search); const urlParams = new URLSearchParams(location.search);
const TYPE_PARAM = 'type'; const TYPE_PARAM = 'type';
@ -153,7 +154,7 @@ function PublishForm(props: Props) {
// $FlowFixMe // $FlowFixMe
const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => { const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => {
// $FlowFixMe // $FlowFixMe
if (editingURI) { if (inEditMode) {
if (isPostClaim) { if (isPostClaim) {
return mode === PUBLISH_MODES.POST; return mode === PUBLISH_MODES.POST;
} else if (isLivestreamClaim) { } else if (isLivestreamClaim) {
@ -560,14 +561,14 @@ function PublishForm(props: Props) {
} }
}, [mode, updatePublishForm]); }, [mode, updatePublishForm]);
// Source Selector State. // FIle Source Selector State.
const [fileSelectSource, setFileSelectSource] = useState(); const [fileSource, setFileSource] = useState();
const changeFileSelectSource = (state) => setFileSelectSource(state); const changeFileSource = (state) => setFileSource(state);
const [showSchedulingOptions, setShowSchedulingOptions] = useState(false); const [showSchedulingOptions, setShowSchedulingOptions] = useState(false);
useEffect(() => { useEffect(() => {
setShowSchedulingOptions(isLivestreamMode && fileSelectSource === SOURCE_NONE); setShowSchedulingOptions(isLivestreamMode && fileSource === SOURCE_NONE);
}, [isLivestreamMode, fileSelectSource]); }, [isLivestreamMode, fileSource]);
if (publishing) { if (publishing) {
return ( return (
@ -584,8 +585,9 @@ function PublishForm(props: Props) {
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} /> <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
<PublishFile <PublishFile
fileSelectSource={fileSelectSource} inEditMode={inEditMode}
changeFileSelectSource={changeFileSelectSource} fileSource={fileSource}
changeFileSource={changeFileSource}
uri={permanentUrl} uri={permanentUrl}
mode={mode} mode={mode}
fileMimeType={fileMimeType} fileMimeType={fileMimeType}