Revert "Fix publish form when editing livestream (#565)"
This reverts commit da06c14e60
.
This commit is contained in:
parent
da06c14e60
commit
ce37e06e10
8 changed files with 113 additions and 155 deletions
|
@ -29,7 +29,7 @@ type Props = {
|
|||
needsYTAuth: boolean,
|
||||
fetchAccessToken: () => void,
|
||||
accessToken: string,
|
||||
showSchedulingOptions: boolean,
|
||||
isLivestreamMode: boolean,
|
||||
};
|
||||
|
||||
function PublishAdditionalOptions(props: Props) {
|
||||
|
@ -40,7 +40,7 @@ function PublishAdditionalOptions(props: Props) {
|
|||
otherLicenseDescription,
|
||||
licenseUrl,
|
||||
updatePublishForm,
|
||||
showSchedulingOptions,
|
||||
isLivestreamMode,
|
||||
// user,
|
||||
// useLBRYUploader,
|
||||
// needsYTAuth,
|
||||
|
@ -156,7 +156,7 @@ function PublishAdditionalOptions(props: Props) {
|
|||
)} */}
|
||||
{/* @endif */}
|
||||
<div className="section">
|
||||
{!showSchedulingOptions && <PublishReleaseDate />}
|
||||
{!isLivestreamMode && <PublishReleaseDate />}
|
||||
|
||||
<FormField
|
||||
label={__('Language')}
|
||||
|
|
|
@ -19,7 +19,6 @@ import Empty from 'component/common/empty';
|
|||
import moment from 'moment';
|
||||
import classnames from 'classnames';
|
||||
import ReactPaginate from 'react-paginate';
|
||||
import { SOURCE_NONE, SOURCE_SELECT, SOURCE_UPLOAD } from 'constants/publish_sources';
|
||||
|
||||
type Props = {
|
||||
uri: ?string,
|
||||
|
@ -52,8 +51,6 @@ type Props = {
|
|||
channelSignature: { signature?: string, signing_ts?: string },
|
||||
isCheckingLivestreams: boolean,
|
||||
setWaitForFile: (boolean) => void,
|
||||
fileSelectSource: string,
|
||||
changeFileSelectSource: (string) => void,
|
||||
};
|
||||
|
||||
function PublishFile(props: Props) {
|
||||
|
@ -87,10 +84,12 @@ function PublishFile(props: Props) {
|
|||
channelSignature,
|
||||
isCheckingLivestreams,
|
||||
setWaitForFile,
|
||||
fileSelectSource,
|
||||
changeFileSelectSource,
|
||||
} = props;
|
||||
|
||||
const SOURCE_NONE = 'none';
|
||||
const SOURCE_SELECT = 'select';
|
||||
const SOURCE_UPLOAD = 'upload';
|
||||
|
||||
const RECOMMENDED_BITRATE = 6000000;
|
||||
const TV_PUBLISH_SIZE_LIMIT_BYTES = WEB_PUBLISH_SIZE_LIMIT_GB * 1073741824;
|
||||
const TV_PUBLISH_SIZE_LIMIT_GB_STR = String(WEB_PUBLISH_SIZE_LIMIT_GB);
|
||||
|
@ -115,13 +114,16 @@ function PublishFile(props: Props) {
|
|||
const fileSelectorModes = [
|
||||
{ label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
|
||||
{ label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
|
||||
{ label: isLivestreamClaim ? __('Edit / Update') : __('None'), actionName: SOURCE_NONE },
|
||||
{ label: __('None'), actionName: SOURCE_NONE },
|
||||
];
|
||||
|
||||
const livestreamDataStr = JSON.stringify(livestreamData);
|
||||
const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
|
||||
const showSourceSelector = isLivestreamClaim || (hasLivestreamData && mode === PUBLISH_MODES.FILE);
|
||||
|
||||
const [fileSelectSource, setFileSelectSource] = useState(
|
||||
IS_WEB && showSourceSelector && name ? SOURCE_SELECT : SOURCE_UPLOAD
|
||||
);
|
||||
// const [showFileUpdate, setShowFileUpdate] = useState(false);
|
||||
const [selectedFileIndex, setSelectedFileIndex] = useState(null);
|
||||
const PAGE_SIZE = 4;
|
||||
|
@ -140,21 +142,15 @@ function PublishFile(props: Props) {
|
|||
}
|
||||
}, [currentFileType, mode, isStillEditing, updatePublishForm]);
|
||||
|
||||
// Initialize default file source state.
|
||||
// set default file source to select if necessary
|
||||
useEffect(() => {
|
||||
// Editing a livestream
|
||||
if (isLivestreamClaim) {
|
||||
changeFileSelectSource(SOURCE_SELECT);
|
||||
if (hasLivestreamData && isLivestreamClaim) {
|
||||
setWaitForFile(true);
|
||||
setFileSelectSource(SOURCE_SELECT);
|
||||
} else if (isLivestreamClaim) {
|
||||
setFileSelectSource(SOURCE_NONE);
|
||||
}
|
||||
// Publishing a livestream
|
||||
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
|
||||
}, [hasLivestreamData, isLivestreamClaim, setFileSelectSource]);
|
||||
|
||||
const normalizeUrlForProtocol = (url) => {
|
||||
if (url.startsWith('https://')) {
|
||||
|
@ -332,7 +328,7 @@ function PublishFile(props: Props) {
|
|||
updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation });
|
||||
}
|
||||
}
|
||||
changeFileSelectSource(source);
|
||||
setFileSelectSource(source);
|
||||
setWaitForFile(source !== SOURCE_NONE);
|
||||
}
|
||||
|
||||
|
@ -441,7 +437,7 @@ function PublishFile(props: Props) {
|
|||
updatePublishForm(publishFormParams);
|
||||
}
|
||||
|
||||
const showFileUpload = mode === PUBLISH_MODES.FILE || PUBLISH_MODES.LIVESTREAM;
|
||||
const showFileUpload = mode === PUBLISH_MODES.FILE;
|
||||
const isPublishPost = mode === PUBLISH_MODES.POST;
|
||||
|
||||
return (
|
||||
|
@ -518,7 +514,7 @@ function PublishFile(props: Props) {
|
|||
</fieldset-section>
|
||||
)}
|
||||
|
||||
{showSourceSelector && fileSelectSource === SOURCE_UPLOAD && showFileUpload && (
|
||||
{fileSelectSource === SOURCE_UPLOAD && showFileUpload && (
|
||||
<>
|
||||
<FileSelector
|
||||
label={__('File')}
|
||||
|
@ -532,97 +528,86 @@ function PublishFile(props: Props) {
|
|||
{getUploadMessage()}
|
||||
</>
|
||||
)}
|
||||
{showSourceSelector &&
|
||||
fileSelectSource === SOURCE_SELECT &&
|
||||
showFileUpload &&
|
||||
hasLivestreamData &&
|
||||
!isCheckingLivestreams && (
|
||||
<>
|
||||
<fieldset-section>
|
||||
<label>{__('Select Replay')}</label>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--livestream-data">
|
||||
<tbody>
|
||||
{livestreamData
|
||||
.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
|
||||
.map((item, i) => (
|
||||
<tr
|
||||
{fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && !isCheckingLivestreams && (
|
||||
<>
|
||||
<fieldset-section>
|
||||
<label>{__('Select Replay')}</label>
|
||||
<div className="table__wrapper">
|
||||
<table className="table table--livestream-data">
|
||||
<tbody>
|
||||
{livestreamData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).map((item, i) => (
|
||||
<tr
|
||||
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
|
||||
key={item.id}
|
||||
className={classnames('livestream__data-row', {
|
||||
'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
|
||||
})}
|
||||
>
|
||||
<td>
|
||||
<FormField
|
||||
type="radio"
|
||||
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i}
|
||||
label={null}
|
||||
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
|
||||
key={item.id}
|
||||
className={classnames('livestream__data-row', {
|
||||
'livestream__data-row--selected':
|
||||
selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
|
||||
})}
|
||||
>
|
||||
<td>
|
||||
<FormField
|
||||
type="radio"
|
||||
checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i}
|
||||
label={null}
|
||||
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
|
||||
className="livestream__data-row-radio"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="livestream_thumb_container">
|
||||
{item.data.thumbnails.slice(0, 3).map((thumb) => (
|
||||
<img key={thumb} className="livestream___thumb" src={thumb} />
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{`${Math.floor(item.data.fileDuration / 60)} ${
|
||||
Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute')
|
||||
}`}
|
||||
<div className="table__item-label">
|
||||
{`${moment(item.data.uploadedAt).from(moment())}`}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<CopyableText
|
||||
primaryButton
|
||||
copyable={normalizeUrlForProtocol(item.data.fileLocation)}
|
||||
snackMessage={__('Url copied.')}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
className="livestream__data-row-radio"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<div className="livestream_thumb_container">
|
||||
{item.data.thumbnails.slice(0, 3).map((thumb) => (
|
||||
<img key={thumb} className="livestream___thumb" src={thumb} />
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
{`${Math.floor(item.data.fileDuration / 60)} ${
|
||||
Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute')
|
||||
}`}
|
||||
<div className="table__item-label">
|
||||
{`${moment(item.data.uploadedAt).from(moment())}`}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<CopyableText
|
||||
primaryButton
|
||||
copyable={normalizeUrlForProtocol(item.data.fileLocation)}
|
||||
snackMessage={__('Url copied.')}
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</fieldset-section>
|
||||
<fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
|
||||
<fieldset-section>
|
||||
<ReactPaginate
|
||||
pageCount={totalPages}
|
||||
pageRangeDisplayed={2}
|
||||
previousLabel="‹"
|
||||
nextLabel="›"
|
||||
activeClassName="pagination__item--selected"
|
||||
pageClassName="pagination__item"
|
||||
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 class="fieldset-group--smushed fieldgroup--paginate">
|
||||
<fieldset-section>
|
||||
<ReactPaginate
|
||||
pageCount={totalPages}
|
||||
pageRangeDisplayed={2}
|
||||
previousLabel="‹"
|
||||
nextLabel="›"
|
||||
activeClassName="pagination__item--selected"
|
||||
pageClassName="pagination__item"
|
||||
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 && (
|
||||
</fieldset-group>
|
||||
</>
|
||||
)}
|
||||
{fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
|
||||
<div className="main--empty empty">
|
||||
<Empty text={__('No replays found.')} />
|
||||
</div>
|
||||
)}
|
||||
{fileSelectSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
|
||||
<div className="main--empty empty">
|
||||
<Spinner small />
|
||||
</div>
|
||||
|
|
|
@ -32,7 +32,6 @@ import Spinner from 'component/spinner';
|
|||
import { toHex } from 'util/hex';
|
||||
import { LIVESTREAM_REPLAY_API } from 'constants/livestream';
|
||||
import PublishStreamReleaseDate from 'component/publishStreamReleaseDate';
|
||||
import { SOURCE_NONE } from 'constants/publish_sources';
|
||||
|
||||
// @if TARGET='app'
|
||||
import fs from 'fs';
|
||||
|
@ -174,8 +173,7 @@ function PublishForm(props: Props) {
|
|||
[PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
|
||||
};
|
||||
|
||||
const defaultPublishMode = isLivestreamClaim ? PUBLISH_MODES.LIVESTREAM : PUBLISH_MODES.FILE;
|
||||
const [mode, setMode] = React.useState(_uploadType || defaultPublishMode);
|
||||
const [mode, setMode] = React.useState(_uploadType || PUBLISH_MODES.FILE);
|
||||
const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
|
||||
|
||||
let customSubtitle;
|
||||
|
@ -424,8 +422,9 @@ function PublishForm(props: Props) {
|
|||
|
||||
// set mode based on urlParams 'type'
|
||||
useEffect(() => {
|
||||
// Default to standard file publish if none specified
|
||||
if (!_uploadType) {
|
||||
setMode(defaultPublishMode);
|
||||
setMode(PUBLISH_MODES.FILE);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -449,8 +448,9 @@ function PublishForm(props: Props) {
|
|||
return;
|
||||
}
|
||||
|
||||
setMode(defaultPublishMode);
|
||||
}, [_uploadType, enableLivestream, defaultPublishMode]);
|
||||
// Default to standard file publish
|
||||
setMode(PUBLISH_MODES.FILE);
|
||||
}, [_uploadType, enableLivestream]);
|
||||
|
||||
// if we have a type urlparam, update it? necessary?
|
||||
useEffect(() => {
|
||||
|
@ -560,15 +560,6 @@ function PublishForm(props: Props) {
|
|||
}
|
||||
}, [mode, updatePublishForm]);
|
||||
|
||||
// Source Selector State.
|
||||
const [fileSelectSource, setFileSelectSource] = useState();
|
||||
const changeFileSelectSource = (state) => setFileSelectSource(state);
|
||||
|
||||
const [showSchedulingOptions, setShowSchedulingOptions] = useState(false);
|
||||
useEffect(() => {
|
||||
setShowSchedulingOptions(isLivestreamMode && fileSelectSource === SOURCE_NONE);
|
||||
}, [isLivestreamMode, fileSelectSource]);
|
||||
|
||||
if (publishing) {
|
||||
return (
|
||||
<div className="main--empty">
|
||||
|
@ -577,15 +568,12 @@ function PublishForm(props: Props) {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Editing claim uri
|
||||
return (
|
||||
<div className="card-stack">
|
||||
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
|
||||
|
||||
<PublishFile
|
||||
fileSelectSource={fileSelectSource}
|
||||
changeFileSelectSource={changeFileSelectSource}
|
||||
uri={permanentUrl}
|
||||
mode={mode}
|
||||
fileMimeType={fileMimeType}
|
||||
|
@ -622,7 +610,7 @@ function PublishForm(props: Props) {
|
|||
|
||||
{!publishing && (
|
||||
<div className={classnames({ 'card--disabled': formDisabled })}>
|
||||
{showSchedulingOptions && <Card className={'card--enable-overflow'} body={<PublishStreamReleaseDate />} />}
|
||||
{isLivestreamMode && <Card className={'card--enable-overflow'} body={<PublishStreamReleaseDate />} />}
|
||||
|
||||
{mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
|
||||
|
||||
|
@ -658,7 +646,7 @@ function PublishForm(props: Props) {
|
|||
<PublishBid disabled={isStillEditing || formDisabled} />
|
||||
{!isLivestreamMode && <PublishPrice disabled={formDisabled} />}
|
||||
|
||||
<PublishAdditionalOptions disabled={formDisabled} showSchedulingOptions={showSchedulingOptions} />
|
||||
<PublishAdditionalOptions disabled={formDisabled} isLivestreamMode={isLivestreamMode} />
|
||||
</div>
|
||||
)}
|
||||
<section>
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
// @flow
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import Button from 'component/button';
|
||||
import DateTimePicker from 'react-datetime-picker';
|
||||
|
||||
|
@ -86,12 +86,6 @@ const PublishReleaseDate = (props: Props) => {
|
|||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
updatePublishForm({ releaseTimeEdited: undefined });
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="form-field-date-picker">
|
||||
<label>{__('Release date')}</label>
|
||||
|
|
|
@ -59,8 +59,8 @@ const PublishStreamReleaseDate = (props: Props) => {
|
|||
|
||||
<div className={'w-full flex flex-col mt-s md:mt-0 md:h-12 md:items-center md:flex-row'}>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="anytime"
|
||||
type="checkbox"
|
||||
name="rightNow"
|
||||
disabled={false}
|
||||
onChange={handleToggle}
|
||||
checked={!publishLater}
|
||||
|
@ -69,8 +69,8 @@ const PublishStreamReleaseDate = (props: Props) => {
|
|||
|
||||
<div className={'md:ml-m mt-s md:mt-0'}>
|
||||
<FormField
|
||||
type="radio"
|
||||
name="scheduled_time"
|
||||
type="checkbox"
|
||||
name="rightNow"
|
||||
disabled={false}
|
||||
onChange={handleToggle}
|
||||
checked={publishLater}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
export const SOURCE_NONE = 'none';
|
||||
export const SOURCE_SELECT = 'select';
|
||||
export const SOURCE_UPLOAD = 'upload';
|
|
@ -13,7 +13,6 @@ import ChannelThumbnail from 'component/channelThumbnail';
|
|||
import * as ICONS from 'constants/icons';
|
||||
import Icon from 'component/common/icon';
|
||||
import { NO_FILE } from 'redux/actions/publish';
|
||||
import { INTERNAL_TAGS } from 'constants/tags';
|
||||
|
||||
type Props = {
|
||||
filePath: string | WebFile,
|
||||
|
@ -201,11 +200,9 @@ const ModalPublishPreview = (props: Props) => {
|
|||
<p>{licenseType}</p>
|
||||
);
|
||||
|
||||
const visibleTags = tags.filter((tag) => !INTERNAL_TAGS.includes(tag.name));
|
||||
|
||||
const tagsValue =
|
||||
// Do nothing for onClick(). Setting to 'null' results in "View Tag" action -- we don't want to leave the modal.
|
||||
visibleTags.map((tag) => <Tag key={tag.name} title={tag.name} name={tag.name} type={'flow'} onClick={() => {}} />);
|
||||
tags.map((tag) => <Tag key={tag.name} title={tag.name} name={tag.name} type={'flow'} onClick={() => {}} />);
|
||||
|
||||
const depositValue = bid ? <LbcSymbol postfix={`${bid}`} size={14} /> : <p>---</p>;
|
||||
|
||||
|
|
|
@ -333,9 +333,6 @@ export const makeSelectMetadataForUri = (uri: string) =>
|
|||
|
||||
export const makeSelectMetadataItemForUri = (uri: string, key: string) =>
|
||||
createSelector(makeSelectMetadataForUri(uri), (metadata: ChannelMetadata | StreamMetadata) => {
|
||||
if (key === 'tags') {
|
||||
return metadata.tags ? metadata.tags.filter((tag) => !INTERNAL_TAGS.includes(tag)) : [];
|
||||
}
|
||||
return metadata ? metadata[key] : undefined;
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue