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

This reverts commit da06c14e60.

ui/component/publishAdditionalOptions/view.jsx

@@ -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')}

ui/component/publishFile/view.jsx

@@ -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 (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) => {
     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 && (
-              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)}
-                                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-group class="fieldset-group--smushed fieldgroup--paginate">
+                </fieldset-group>
-                    <fieldset-section>
+              </>
-                      <ReactPaginate
+            )}
-                        pageCount={totalPages}
+            {fileSelectSource === 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"
+            {fileSelectSource === 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">
                 <Spinner small />
               </div>

ui/component/publishForm/view.jsx

@@ -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 || PUBLISH_MODES.FILE);
-  const [mode, setMode] = React.useState(_uploadType || defaultPublishMode);
   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);
+    // Default to standard file publish
-  }, [_uploadType, enableLivestream, defaultPublishMode]);
+    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>

ui/component/publishReleaseDate/view.jsx

@@ -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>

ui/component/publishStreamReleaseDate/view.jsx

@@ -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"
+          type="checkbox"
-          name="anytime"
+          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"
+            type="checkbox"
-            name="scheduled_time"
+            name="rightNow"
             disabled={false}
             onChange={handleToggle}
             checked={publishLater}

ui/constants/publish_sources.js

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

ui/modal/modalPublishPreview/view.jsx

@@ -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>;
 

ui/redux/selectors/claims.js

@@ -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;
   });