Revert "Fix publish form when editing livestream (#565)"

This reverts commit da06c14e60.
This commit is contained in:
Thomas Zarebczan 2021-12-31 13:28:09 -05:00
parent da06c14e60
commit ce37e06e10
8 changed files with 113 additions and 155 deletions

View file

@ -29,7 +29,7 @@ type Props = {
needsYTAuth: boolean, needsYTAuth: boolean,
fetchAccessToken: () => void, fetchAccessToken: () => void,
accessToken: string, accessToken: string,
showSchedulingOptions: boolean, isLivestreamMode: boolean,
}; };
function PublishAdditionalOptions(props: Props) { function PublishAdditionalOptions(props: Props) {
@ -40,7 +40,7 @@ function PublishAdditionalOptions(props: Props) {
otherLicenseDescription, otherLicenseDescription,
licenseUrl, licenseUrl,
updatePublishForm, updatePublishForm,
showSchedulingOptions, isLivestreamMode,
// user, // user,
// useLBRYUploader, // useLBRYUploader,
// needsYTAuth, // needsYTAuth,
@ -156,7 +156,7 @@ function PublishAdditionalOptions(props: Props) {
)} */} )} */}
{/* @endif */} {/* @endif */}
<div className="section"> <div className="section">
{!showSchedulingOptions && <PublishReleaseDate />} {!isLivestreamMode && <PublishReleaseDate />}
<FormField <FormField
label={__('Language')} label={__('Language')}

View file

@ -19,7 +19,6 @@ import Empty from 'component/common/empty';
import moment from 'moment'; import moment from 'moment';
import classnames from 'classnames'; import classnames from 'classnames';
import ReactPaginate from 'react-paginate'; import ReactPaginate from 'react-paginate';
import { SOURCE_NONE, SOURCE_SELECT, SOURCE_UPLOAD } from 'constants/publish_sources';
type Props = { type Props = {
uri: ?string, uri: ?string,
@ -52,8 +51,6 @@ 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,
changeFileSelectSource: (string) => void,
}; };
function PublishFile(props: Props) { function PublishFile(props: Props) {
@ -87,10 +84,12 @@ function PublishFile(props: Props) {
channelSignature, channelSignature,
isCheckingLivestreams, isCheckingLivestreams,
setWaitForFile, setWaitForFile,
fileSelectSource,
changeFileSelectSource,
} = props; } = props;
const SOURCE_NONE = 'none';
const SOURCE_SELECT = 'select';
const SOURCE_UPLOAD = 'upload';
const RECOMMENDED_BITRATE = 6000000; const RECOMMENDED_BITRATE = 6000000;
const TV_PUBLISH_SIZE_LIMIT_BYTES = WEB_PUBLISH_SIZE_LIMIT_GB * 1073741824; 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); const TV_PUBLISH_SIZE_LIMIT_GB_STR = String(WEB_PUBLISH_SIZE_LIMIT_GB);
@ -115,13 +114,16 @@ function PublishFile(props: Props) {
const fileSelectorModes = [ const fileSelectorModes = [
{ label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH }, { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
{ label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU }, { 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 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 = isLivestreamClaim || (hasLivestreamData && mode === PUBLISH_MODES.FILE);
const [fileSelectSource, setFileSelectSource] = useState(
IS_WEB && showSourceSelector && name ? SOURCE_SELECT : SOURCE_UPLOAD
);
// 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,15 @@ function PublishFile(props: Props) {
} }
}, [currentFileType, mode, isStillEditing, updatePublishForm]); }, [currentFileType, mode, isStillEditing, updatePublishForm]);
// Initialize default file source state. // set default file source to select if necessary
useEffect(() => { useEffect(() => {
// Editing a livestream if (hasLivestreamData && isLivestreamClaim) {
if (isLivestreamClaim) { setWaitForFile(true);
changeFileSelectSource(SOURCE_SELECT); setFileSelectSource(SOURCE_SELECT);
} else if (isLivestreamClaim) {
setFileSelectSource(SOURCE_NONE);
} }
// Publishing a livestream }, [hasLivestreamData, isLivestreamClaim, setFileSelectSource]);
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 +328,7 @@ function PublishFile(props: Props) {
updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation }); updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation });
} }
} }
changeFileSelectSource(source); setFileSelectSource(source);
setWaitForFile(source !== SOURCE_NONE); setWaitForFile(source !== SOURCE_NONE);
} }
@ -441,7 +437,7 @@ function PublishFile(props: Props) {
updatePublishForm(publishFormParams); updatePublishForm(publishFormParams);
} }
const showFileUpload = mode === PUBLISH_MODES.FILE || PUBLISH_MODES.LIVESTREAM; const showFileUpload = mode === PUBLISH_MODES.FILE;
const isPublishPost = mode === PUBLISH_MODES.POST; const isPublishPost = mode === PUBLISH_MODES.POST;
return ( return (
@ -518,7 +514,7 @@ function PublishFile(props: Props) {
</fieldset-section> </fieldset-section>
)} )}
{showSourceSelector && fileSelectSource === SOURCE_UPLOAD && showFileUpload && ( {fileSelectSource === SOURCE_UPLOAD && showFileUpload && (
<> <>
<FileSelector <FileSelector
label={__('File')} label={__('File')}
@ -532,26 +528,19 @@ function PublishFile(props: Props) {
{getUploadMessage()} {getUploadMessage()}
</> </>
)} )}
{showSourceSelector && {fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && !isCheckingLivestreams && (
fileSelectSource === SOURCE_SELECT &&
showFileUpload &&
hasLivestreamData &&
!isCheckingLivestreams && (
<> <>
<fieldset-section> <fieldset-section>
<label>{__('Select Replay')}</label> <label>{__('Select Replay')}</label>
<div className="table__wrapper"> <div className="table__wrapper">
<table className="table table--livestream-data"> <table className="table table--livestream-data">
<tbody> <tbody>
{livestreamData {livestreamData.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE).map((item, i) => (
.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
.map((item, i) => (
<tr <tr
onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)} onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
key={item.id} key={item.id}
className={classnames('livestream__data-row', { className={classnames('livestream__data-row', {
'livestream__data-row--selected': 'livestream__data-row--selected': selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
})} })}
> >
<td> <td>
@ -613,16 +602,12 @@ function PublishFile(props: Props) {
</fieldset-group> </fieldset-group>
</> </>
)} )}
{showSourceSelector && {fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
fileSelectSource === SOURCE_SELECT &&
showFileUpload &&
!hasLivestreamData &&
!isCheckingLivestreams && (
<div className="main--empty empty"> <div className="main--empty empty">
<Empty text={__('No replays found.')} /> <Empty text={__('No replays found.')} />
</div> </div>
)} )}
{showSourceSelector && fileSelectSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && ( {fileSelectSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
<div className="main--empty empty"> <div className="main--empty empty">
<Spinner small /> <Spinner small />
</div> </div>

View file

@ -32,7 +32,6 @@ import Spinner from 'component/spinner';
import { toHex } from 'util/hex'; import { toHex } from 'util/hex';
import { LIVESTREAM_REPLAY_API } from 'constants/livestream'; import { LIVESTREAM_REPLAY_API } from 'constants/livestream';
import PublishStreamReleaseDate from 'component/publishStreamReleaseDate'; import PublishStreamReleaseDate from 'component/publishStreamReleaseDate';
import { SOURCE_NONE } from 'constants/publish_sources';
// @if TARGET='app' // @if TARGET='app'
import fs from 'fs'; import fs from 'fs';
@ -174,8 +173,7 @@ function PublishForm(props: Props) {
[PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--', [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
}; };
const defaultPublishMode = isLivestreamClaim ? PUBLISH_MODES.LIVESTREAM : PUBLISH_MODES.FILE; const [mode, setMode] = React.useState(_uploadType || PUBLISH_MODES.FILE);
const [mode, setMode] = React.useState(_uploadType || defaultPublishMode);
const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false); const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
let customSubtitle; let customSubtitle;
@ -424,8 +422,9 @@ function PublishForm(props: Props) {
// set mode based on urlParams 'type' // set mode based on urlParams 'type'
useEffect(() => { useEffect(() => {
// Default to standard file publish if none specified
if (!_uploadType) { if (!_uploadType) {
setMode(defaultPublishMode); setMode(PUBLISH_MODES.FILE);
return; return;
} }
@ -449,8 +448,9 @@ function PublishForm(props: Props) {
return; return;
} }
setMode(defaultPublishMode); // Default to standard file publish
}, [_uploadType, enableLivestream, defaultPublishMode]); setMode(PUBLISH_MODES.FILE);
}, [_uploadType, enableLivestream]);
// if we have a type urlparam, update it? necessary? // if we have a type urlparam, update it? necessary?
useEffect(() => { useEffect(() => {
@ -560,15 +560,6 @@ function PublishForm(props: Props) {
} }
}, [mode, updatePublishForm]); }, [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) { if (publishing) {
return ( return (
<div className="main--empty"> <div className="main--empty">
@ -577,15 +568,12 @@ function PublishForm(props: Props) {
</div> </div>
); );
} }
// Editing claim uri // Editing claim uri
return ( return (
<div className="card-stack"> <div className="card-stack">
<ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} /> <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
<PublishFile <PublishFile
fileSelectSource={fileSelectSource}
changeFileSelectSource={changeFileSelectSource}
uri={permanentUrl} uri={permanentUrl}
mode={mode} mode={mode}
fileMimeType={fileMimeType} fileMimeType={fileMimeType}
@ -622,7 +610,7 @@ function PublishForm(props: Props) {
{!publishing && ( {!publishing && (
<div className={classnames({ 'card--disabled': formDisabled })}> <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} />} {mode !== PUBLISH_MODES.POST && <PublishDescription disabled={formDisabled} />}
@ -658,7 +646,7 @@ function PublishForm(props: Props) {
<PublishBid disabled={isStillEditing || formDisabled} /> <PublishBid disabled={isStillEditing || formDisabled} />
{!isLivestreamMode && <PublishPrice disabled={formDisabled} />} {!isLivestreamMode && <PublishPrice disabled={formDisabled} />}
<PublishAdditionalOptions disabled={formDisabled} showSchedulingOptions={showSchedulingOptions} /> <PublishAdditionalOptions disabled={formDisabled} isLivestreamMode={isLivestreamMode} />
</div> </div>
)} )}
<section> <section>

View file

@ -1,5 +1,5 @@
// @flow // @flow
import React, { useEffect } from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import DateTimePicker from 'react-datetime-picker'; import DateTimePicker from 'react-datetime-picker';
@ -86,12 +86,6 @@ const PublishReleaseDate = (props: Props) => {
} }
} }
useEffect(() => {
return () => {
updatePublishForm({ releaseTimeEdited: undefined });
};
}, []);
return ( return (
<div className="form-field-date-picker"> <div className="form-field-date-picker">
<label>{__('Release date')}</label> <label>{__('Release date')}</label>

View file

@ -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'}> <div className={'w-full flex flex-col mt-s md:mt-0 md:h-12 md:items-center md:flex-row'}>
<FormField <FormField
type="radio" type="checkbox"
name="anytime" name="rightNow"
disabled={false} disabled={false}
onChange={handleToggle} onChange={handleToggle}
checked={!publishLater} checked={!publishLater}
@ -69,8 +69,8 @@ const PublishStreamReleaseDate = (props: Props) => {
<div className={'md:ml-m mt-s md:mt-0'}> <div className={'md:ml-m mt-s md:mt-0'}>
<FormField <FormField
type="radio" type="checkbox"
name="scheduled_time" name="rightNow"
disabled={false} disabled={false}
onChange={handleToggle} onChange={handleToggle}
checked={publishLater} checked={publishLater}

View file

@ -1,3 +0,0 @@
export const SOURCE_NONE = 'none';
export const SOURCE_SELECT = 'select';
export const SOURCE_UPLOAD = 'upload';

View file

@ -13,7 +13,6 @@ import ChannelThumbnail from 'component/channelThumbnail';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import Icon from 'component/common/icon'; import Icon from 'component/common/icon';
import { NO_FILE } from 'redux/actions/publish'; import { NO_FILE } from 'redux/actions/publish';
import { INTERNAL_TAGS } from 'constants/tags';
type Props = { type Props = {
filePath: string | WebFile, filePath: string | WebFile,
@ -201,11 +200,9 @@ const ModalPublishPreview = (props: Props) => {
<p>{licenseType}</p> <p>{licenseType}</p>
); );
const visibleTags = tags.filter((tag) => !INTERNAL_TAGS.includes(tag.name));
const tagsValue = const tagsValue =
// Do nothing for onClick(). Setting to 'null' results in "View Tag" action -- we don't want to leave the modal. // 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>; const depositValue = bid ? <LbcSymbol postfix={`${bid}`} size={14} /> : <p>---</p>;

View file

@ -333,9 +333,6 @@ export const makeSelectMetadataForUri = (uri: string) =>
export const makeSelectMetadataItemForUri = (uri: string, key: string) => export const makeSelectMetadataItemForUri = (uri: string, key: string) =>
createSelector(makeSelectMetadataForUri(uri), (metadata: ChannelMetadata | StreamMetadata) => { 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; return metadata ? metadata[key] : undefined;
}); });