From 777f406abe54d55989e6bee448228ab33837c0ac Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 30 Mar 2021 01:03:31 -0400
Subject: [PATCH 01/10] provide livestream replay publish via url

---
 flow-typed/livestream.js              |  22 ++
 flow-typed/subscription.js            |  11 -
 static/app-strings.json               |   5 +
 ui/component/fileActions/view.jsx     |  17 +-
 ui/component/publishFile/index.js     |  11 +-
 ui/component/publishFile/view.jsx     | 316 +++++++++++++++++++++++---
 ui/component/publishForm/index.js     |  48 ++--
 ui/component/publishForm/view.jsx     | 153 +++++++++++--
 ui/modal/modalPublishPreview/index.js |  27 ++-
 ui/modal/modalPublishPreview/view.jsx |  15 +-
 ui/scss/component/_livestream.scss    |  76 +++++++
 ui/scss/component/_table.scss         |  16 ++
 web/setup/publish.js                  |   2 +
 13 files changed, 599 insertions(+), 120 deletions(-)
 create mode 100644 flow-typed/livestream.js

diff --git a/flow-typed/livestream.js b/flow-typed/livestream.js
new file mode 100644
index 000000000..9b1b2d30a
--- /dev/null
+++ b/flow-typed/livestream.js
@@ -0,0 +1,22 @@
+// @flow
+
+declare type LivestreamReplayItem = {
+  data: {
+    claimId: string,
+    deleted: boolean,
+    deletedAt: ?string,
+    ffprobe: any,
+    fileDuration: number, // decimal? float? string?
+    fileType: string,
+    fileLocation: string,
+    fileSize: number,
+    key: string,
+    published: boolean,
+    publishedAt: ?string,
+    service: string,
+    thumbnails: Array<string>,
+    uploadedAt: string, // Date?
+  },
+  id: string,
+}
+declare type LivestreamReplayData = Array<LivestreamReplayItem>;
diff --git a/flow-typed/subscription.js b/flow-typed/subscription.js
index 53956b014..6f59206fc 100644
--- a/flow-typed/subscription.js
+++ b/flow-typed/subscription.js
@@ -1,15 +1,4 @@
 // @flow
-import * as ACTIONS from 'constants/action_types';
-import {
-  DOWNLOADED,
-  DOWNLOADING,
-  NOTIFY_ONLY,
-  VIEW_ALL,
-  VIEW_LATEST_FIRST,
-  SUGGESTED_TOP_BID,
-  SUGGESTED_TOP_SUBSCRIBED,
-  SUGGESTED_FEATURED,
-} from 'constants/subscriptions';
 
 declare type Subscription = {
   channelName: string, // @CryptoCandor,
diff --git a/static/app-strings.json b/static/app-strings.json
index 9b59ec2fc..1d6b125f0 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1777,6 +1777,11 @@
   "Learn more and sign petition": "Learn more and sign petition",
   "Publishing...": "Publishing...",
   "Collection": "Collection",
+  "Upload that unlabeled video you found behind the TV in 1991": "Upload that unlabeled video you found behind the TV in 1991",
+  "Select Replay": "Select Replay",
+  "Craft an epic post clearly explaining... whatever.": "Craft an epic post clearly explaining... whatever.",
+  "waiting": "waiting",
+  "%viewer_count% currently %viewer_state%": "%viewer_count% currently %viewer_state%",
   "More from %claim_name%": "More from %claim_name%",
   "--end--": "--end--"
 }
diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx
index a52970e3e..37acfbc85 100644
--- a/ui/component/fileActions/view.jsx
+++ b/ui/component/fileActions/view.jsx
@@ -3,7 +3,6 @@ import { SIMPLE_SITE, SITE_NAME, ENABLE_FILE_REACTIONS } from 'config';
 import * as PAGES from 'constants/pages';
 import * as MODALS from 'constants/modal_types';
 import * as ICONS from 'constants/icons';
-import * as PUBLISH_MODES from 'constants/publish_types';
 import React from 'react';
 import Button from 'component/button';
 import FileDownloadLink from 'component/fileDownloadLink';
@@ -114,25 +113,13 @@ function FileActions(props: Props) {
         <Button
           className="button--file-action"
           icon={ICONS.EDIT}
-          label={__('Edit')}
-          navigate={`/$/${PAGES.UPLOAD}${isLivestreamClaim ? `?type=${PUBLISH_MODES.LIVESTREAM}` : ''}`}
+          label={isLivestreamClaim ? __('Update') : __('Edit')}
+          navigate={`/$/${PAGES.UPLOAD}`}
           onClick={() => {
             prepareEdit(claim, editUri, fileInfo);
           }}
         />
       )}
-      {claimIsMine && isLivestreamClaim && (
-        <Button
-          className="button--file-action"
-          icon={ICONS.PUBLISH}
-          label={__('Publish Replay')}
-          navigate={`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.FILE}`}
-          onClick={() => {
-            prepareEdit(claim, editUri, fileInfo);
-          }}
-        />
-      )}
-
       {showDelete && (
         <Button
           title={__('Remove from your library')}
diff --git a/ui/component/publishFile/index.js b/ui/component/publishFile/index.js
index 83468df5e..26a73211f 100644
--- a/ui/component/publishFile/index.js
+++ b/ui/component/publishFile/index.js
@@ -5,15 +5,17 @@ import {
   makeSelectPublishFormValue,
   doUpdatePublishForm,
   doClearPublish,
+  makeSelectClaimIsStreamPlaceholder,
 } from 'lbry-redux';
 import { doToast } from 'redux/actions/notifications';
 import { selectFfmpegStatus } from 'redux/selectors/settings';
 import PublishPage from './view';
 
-const select = state => ({
+const select = (state, props) => ({
   name: makeSelectPublishFormValue('name')(state),
   title: makeSelectPublishFormValue('title')(state),
   filePath: makeSelectPublishFormValue('filePath')(state),
+  remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
   optimize: makeSelectPublishFormValue('optimize')(state),
   isStillEditing: selectIsStillEditing(state),
   balance: selectBalance(state),
@@ -22,12 +24,13 @@ const select = state => ({
   size: makeSelectPublishFormValue('fileSize')(state),
   duration: makeSelectPublishFormValue('fileDur')(state),
   isVid: makeSelectPublishFormValue('fileVid')(state),
+  isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
 });
 
-const perform = dispatch => ({
+const perform = (dispatch) => ({
   clearPublish: () => dispatch(doClearPublish()),
-  updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
-  showToast: message => dispatch(doToast({ message, isError: true })),
+  updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
+  showToast: (message) => dispatch(doToast({ message, isError: true })),
 });
 
 export default connect(select, perform)(PublishPage);
diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 1b55b999f..44b088b40 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -8,12 +8,16 @@ import PostEditor from 'component/postEditor';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
 import Card from 'component/common/card';
-import { FormField } from 'component/common/form';
+import { Form, FormField } from 'component/common/form';
 import Spinner from 'component/spinner';
 import I18nMessage from 'component/i18nMessage';
 import usePersistedState from 'effects/use-persisted-state';
 import * as PUBLISH_MODES from 'constants/publish_types';
 import PublishName from 'component/publishName';
+import CopyableText from 'component/copyableText';
+import moment from 'moment';
+import classnames from 'classnames';
+import ReactPaginate from 'react-paginate';
 
 type Props = {
   uri: ?string,
@@ -35,9 +39,15 @@ type Props = {
   size: number,
   duration: number,
   isVid: boolean,
+  subtitle: string,
   setPublishMode: (string) => void,
   setPrevFileText: (string) => void,
   header: Node,
+  livestreamData: LivestreamReplayData,
+  isLivestreamClaim: boolean,
+  remoteUrl?: string,
+  checkLivestreams: () => void,
+  isCheckingLivestreams: boolean,
 };
 
 function PublishFile(props: Props) {
@@ -63,29 +73,58 @@ function PublishFile(props: Props) {
     setPublishMode,
     setPrevFileText,
     header,
+    livestreamData,
+    isLivestreamClaim,
+    subtitle,
+    remoteUrl,
+    checkLivestreams,
+    isCheckingLivestreams,
   } = props;
 
+  const SOURCE_NONE = 'none';
+  const SOURCE_SELECT = 'select';
+  const SOURCE_UPLOAD = 'upload';
+
+  const RECOMMENDED_BITRATE = 6000000;
+  const TV_PUBLISH_SIZE_LIMIT: number = 4294967296;
+  const TV_PUBLISH_SIZE_LIMIT_STR_GB = '4';
+  const PAGE_SIZE = 4;
+
+  const PROCESSING_MB_PER_SECOND = 0.5;
+  const MINUTES_THRESHOLD = 30;
+  const HOURS_THRESHOLD = MINUTES_THRESHOLD * 60;
+  const MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown'];
+  const sizeInMB = Number(size) / 1000000;
+  const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
+
+  const fileSelectorModes = [
+    { label: __('Select Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
+    { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
+    { label: __('Not Yet'), actionName: SOURCE_NONE, icon: ICONS.REMOVE },
+  ];
+
+  const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
+  const showSourceSelector = isLivestreamClaim && hasLivestreamData;
+
   const ffmpegAvail = ffmpegStatus.available;
   const [oversized, setOversized] = useState(false);
   const [currentFile, setCurrentFile] = useState(null);
   const [currentFileType, setCurrentFileType] = useState(null);
   const [optimizeAvail, setOptimizeAvail] = useState(false);
   const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
+  const [fileSelectSource, setFileSelectSource] = useState(
+    IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
+  );
+  // const [showFileUpdate, setShowFileUpdate] = useState(false);
+  const [selectedFileIndex, setSelectedFileIndex] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages =
+    hasLivestreamData && livestreamData.length > PAGE_SIZE ? Math.ceil(livestreamData.length / PAGE_SIZE) : 1;
 
-  const RECOMMENDED_BITRATE = 6000000;
-  const TV_PUBLISH_SIZE_LIMIT: number = 4294967296;
-  const TV_PUBLISH_SIZE_LIMIT_STR_GB = '4';
   const UPLOAD_SIZE_MESSAGE = __(
     '%SITE_NAME% uploads are limited to %limit% GB. Download the app for unrestricted publishing.',
     { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_STR_GB }
   );
-  const PROCESSING_MB_PER_SECOND = 0.5;
-  const MINUTES_THRESHOLD = 30;
-  const HOURS_THRESHOLD = MINUTES_THRESHOLD * 60;
-  const MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown'];
-
-  const sizeInMB = Number(size) / 1000000;
-  const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
 
   // Reset filePath if publish mode changed
   useEffect(() => {
@@ -93,9 +132,40 @@ function PublishFile(props: Props) {
       if (currentFileType !== 'text/markdown' && !isStillEditing) {
         updatePublishForm({ filePath: '' });
       }
+    } else if (mode === PUBLISH_MODES.LIVESTREAM) {
+      updatePublishForm({ filePath: '' });
     }
   }, [currentFileType, mode, isStillEditing, updatePublishForm]);
 
+  // set default file source to select if necessary
+  useEffect(() => {
+    if (hasLivestreamData && isLivestreamClaim) {
+      setFileSelectSource(SOURCE_SELECT);
+    } else if (isLivestreamClaim) {
+      setFileSelectSource(SOURCE_NONE);
+    }
+  }, [hasLivestreamData, isLivestreamClaim, setFileSelectSource]);
+
+  const normalizeUrlForProtocol = (url) => {
+    if (url.startsWith('https://')) {
+      return url;
+    } else {
+      if (url.startsWith('http://')) {
+        return url;
+      } else {
+        return `https://${url}`;
+      }
+    }
+  };
+  // update remoteUrl when replay selected
+  useEffect(() => {
+    if (selectedFileIndex !== null) {
+      updatePublishForm({
+        remoteFileUrl: normalizeUrlForProtocol(livestreamData[selectedFileIndex].data.fileLocation),
+      });
+    }
+  }, [selectedFileIndex, updatePublishForm]);
+
   useEffect(() => {
     if (!filePath || filePath === '') {
       setCurrentFile('');
@@ -121,6 +191,10 @@ function PublishFile(props: Props) {
     updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
   }
 
+  function handlePaginateReplays(page) {
+    setCurrentPage(page);
+  }
+
   function getBitrate(size, duration) {
     const s = Number(size);
     const d = Number(duration);
@@ -154,7 +228,14 @@ function PublishFile(props: Props) {
     }
   }
 
-  function getMessage() {
+  function getSourceMessage() {
+    if (remoteUrl || filePath) {
+      return __('Replay selected for update');
+    } else {
+      return __('No replay selected');
+    }
+  }
+  function getUploadMessage() {
     // @if TARGET='web'
     if (oversized) {
       return (
@@ -186,6 +267,11 @@ function PublishFile(props: Props) {
     }
 
     if (!!isStillEditing && name) {
+      if (isLivestreamClaim) {
+        return (
+          <p className="help">{__('You can upload your own recording or select a replay when your stream is over')}</p>
+        );
+      }
       return (
         <p className="help">
           {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
@@ -225,6 +311,26 @@ function PublishFile(props: Props) {
     return newName.replace(INVALID_URI_CHARS, '-');
   }
 
+  function handleFileSource(source) {
+    if (source === SOURCE_NONE) {
+      // clear files and remotes...
+      // https://github.com/lbryio/lbry-desktop/issues/5855
+      // publish is trying to use one field to share html file blob and string and such
+      // $FlowFixMe
+      handleFileChange(false);
+      updatePublishForm({ remoteFileUrl: undefined });
+    } else if (source === SOURCE_UPLOAD) {
+      updatePublishForm({ remoteFileUrl: undefined });
+    } else if (source === SOURCE_SELECT) {
+      // $FlowFixMe
+      handleFileChange(false);
+      if (selectedFileIndex !== null) {
+        updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation });
+      }
+    }
+    setFileSelectSource(source);
+  }
+
   function handleTitleChange(event) {
     const title = event.target.value;
     // Update title
@@ -247,7 +353,11 @@ function PublishFile(props: Props) {
 
     // select file, start to select a new one, then cancel
     if (!file) {
-      updatePublishForm({ filePath: '', name: '' });
+      if (isStillEditing) {
+        updatePublishForm({ filePath: '' });
+      } else {
+        updatePublishForm({ filePath: '', name: '' });
+      }
       return;
     }
 
@@ -326,7 +436,7 @@ function PublishFile(props: Props) {
     updatePublishForm(publishFormParams);
   }
 
-  const isPublishFile = mode === PUBLISH_MODES.FILE;
+  const showFileUpload = mode === PUBLISH_MODES.FILE || (mode === PUBLISH_MODES.LIVESTREAM && hasLivestreamData);
   const isPublishPost = mode === PUBLISH_MODES.POST;
 
   return (
@@ -334,7 +444,7 @@ function PublishFile(props: Props) {
       className={disabled || balance === 0 ? 'card--disabled' : ''}
       title={
         <div>
-          {header}
+          {header} {/* display mode buttons from parent */}
           {publishing && <Spinner type={'small'} />}
           {inProgress && (
             <div>
@@ -343,10 +453,10 @@ function PublishFile(props: Props) {
           )}
         </div>
       }
-      subtitle={isStillEditing && __('You are currently editing your upload.')}
+      subtitle={subtitle || (isStillEditing && __('You are currently editing your upload.'))}
       actions={
         <React.Fragment>
-          <PublishName />
+          <PublishName uri={uri} />
           <FormField
             type="text"
             name="content_title"
@@ -356,28 +466,154 @@ function PublishFile(props: Props) {
             value={title}
             onChange={handleTitleChange}
           />
-          {isPublishFile && (
+          {/* Decide whether to show file upload or replay selector */}
+          {/* @if TARGET='web' */}
+          <>
+            {showSourceSelector && (
+              <fieldset-section>
+                <div className="section__actions--between">
+                  <div>
+                    <label>{__('Add replay video')}</label>
+                    <div>
+                      {fileSelectorModes.map((fmode) => (
+                        <Button
+                          key={fmode.label}
+                          icon={fmode.icon}
+                          iconSize={18}
+                          label={fmode.label}
+                          button="alt"
+                          onClick={() => {
+                            // $FlowFixMe
+                            handleFileSource(fmode.actionName);
+                          }}
+                          className={classnames('button-toggle', {
+                            'button-toggle--active': fileSelectSource === fmode.actionName,
+                          })}
+                        />
+                      ))}
+                    </div>
+                    <div className="help--inline">{getSourceMessage()}</div>
+                  </div>
+                  <Button
+                    button="secondary"
+                    label={__('Check for Replays')}
+                    disabled={isCheckingLivestreams}
+                    icon={ICONS.REFRESH}
+                    onClick={() => checkLivestreams()}
+                  />
+                </div>
+              </fieldset-section>
+            )}
+
+            {fileSelectSource === SOURCE_UPLOAD && showFileUpload && (
+              <>
+                <FileSelector
+                  label={__('Video file')}
+                  disabled={disabled}
+                  currentPath={currentFile}
+                  onFileChosen={handleFileChange}
+                  // https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
+                  accept="video/mp4,video/x-m4v,video/*"
+                  placeholder={__('Select video file to upload')}
+                />
+                {getUploadMessage()}
+              </>
+            )}
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && (
+              <>
+                <fieldset-section>
+                  <label>{__('Select Replay')}</label>
+                  <div className="table__wrapper">
+                    <table className="table table--livestream-data">
+                      <tbody>
+                        {livestreamData &&
+                          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)}
+                                    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>
+                <Form style={totalPages <= 1 ? { display: 'none' } : null} onSubmit={handlePaginateReplays}>
+                  <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>
+                </Form>
+              </>
+            )}
+          </>
+          {/* @endif */}
+          {/* @if TARGET='app' */}
+          {showFileUpload && (
             <FileSelector
-              label={__('File')}
+              label={__('Video file')}
               disabled={disabled}
               currentPath={currentFile}
               onFileChosen={handleFileChange}
+              // https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
+              accept="video/mp4,video/x-m4v,video/*"
+              placeholder={__('Select video file to upload')}
             />
           )}
-
-          {isPublishPost && (
-            <PostEditor
-              label={__('Post --[noun, markdown post tab button]--')}
-              uri={uri}
-              disabled={disabled}
-              fileMimeType={fileMimeType}
-              setPrevFileText={setPrevFileText}
-              setCurrentFileType={setCurrentFileType}
-            />
-          )}
-          {isPublishFile && getMessage()}
-          {/* @if TARGET='app' */}
-          {isPublishFile && (
+          {showFileUpload && (
             <FormField
               type="checkbox"
               checked={userOptimize}
@@ -387,7 +623,7 @@ function PublishFile(props: Props) {
               name="optimize"
             />
           )}
-          {isPublishFile && !ffmpegAvail && (
+          {showFileUpload && !ffmpegAvail && (
             <p className="help">
               <I18nMessage
                 tokens={{
@@ -398,7 +634,7 @@ function PublishFile(props: Props) {
               </I18nMessage>
             </p>
           )}
-          {isPublishFile && Boolean(size) && ffmpegAvail && optimize && isVid && (
+          {showFileUpload && Boolean(size) && ffmpegAvail && optimize && isVid && (
             <p className="help">
               <I18nMessage
                 tokens={{
@@ -412,6 +648,16 @@ function PublishFile(props: Props) {
             </p>
           )}
           {/* @endif */}
+          {isPublishPost && (
+            <PostEditor
+              label={__('Post --[noun, markdown post tab button]--')}
+              uri={uri}
+              disabled={disabled}
+              fileMimeType={fileMimeType}
+              setPrevFileText={setPrevFileText}
+              setCurrentFileType={setCurrentFileType}
+            />
+          )}
         </React.Fragment>
       }
     />
diff --git a/ui/component/publishForm/index.js b/ui/component/publishForm/index.js
index e822f68b1..102738c87 100644
--- a/ui/component/publishForm/index.js
+++ b/ui/component/publishForm/index.js
@@ -12,7 +12,10 @@ import {
   doPrepareEdit,
   doCheckPublishNameAvailability,
   SETTINGS,
+  selectMyChannelClaims,
+  makeSelectClaimIsStreamPlaceholder,
 } from 'lbry-redux';
+import * as RENDER_MODES from 'constants/file_render_modes';
 import { doPublishDesktop } from 'redux/actions/publish';
 import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
 import {
@@ -22,27 +25,36 @@ import {
   selectActiveChannelStakedLevel,
 } from 'redux/selectors/app';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
+import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import PublishPage from './view';
 import { selectUser } from 'redux/selectors/user';
 
-const select = (state) => ({
-  ...selectPublishFormValues(state),
-  user: selectUser(state),
-  // The winning claim for a short lbry uri
-  amountNeededForTakeover: selectTakeOverAmount(state),
-  // My previously published claims under this short lbry uri
-  myClaimForUri: selectMyClaimForUri(state),
-  // If I clicked the "edit" button, have I changed the uri?
-  // Need this to make it easier to find the source on previously published content
-  isStillEditing: selectIsStillEditing(state),
-  isResolvingUri: selectIsResolvingPublishUris(state),
-  totalRewardValue: selectUnclaimedRewardValue(state),
-  modal: selectModal(state),
-  enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
-  activeChannelClaim: selectActiveChannelClaim(state),
-  incognito: selectIncognito(state),
-  activeChannelStakedLevel: selectActiveChannelStakedLevel(state),
-});
+const select = (state) => {
+  const myClaimForUri = selectMyClaimForUri(state);
+  const permanentUrl = (myClaimForUri && myClaimForUri.permanent_url) || '';
+  const isPostClaim = makeSelectFileRenderModeForUri(permanentUrl)(state) === RENDER_MODES.MARKDOWN;
+  return {
+    ...selectPublishFormValues(state),
+    user: selectUser(state),
+    // The winning claim for a short lbry uri
+    amountNeededForTakeover: selectTakeOverAmount(state),
+    isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(permanentUrl)(state),
+    isPostClaim,
+    permanentUrl,
+    // My previously published claims under this short lbry uri
+    // If I clicked the "edit" button, have I changed the uri?
+    // Need this to make it easier to find the source on previously published content
+    myClaimForUri,
+    isStillEditing: selectIsStillEditing(state),
+    isResolvingUri: selectIsResolvingPublishUris(state),
+    totalRewardValue: selectUnclaimedRewardValue(state),
+    modal: selectModal(state),
+    enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
+    activeChannelClaim: selectActiveChannelClaim(state),
+    myChannels: selectMyChannelClaims(state),
+    incognito: selectIncognito(state),
+  };
+};
 
 const perform = (dispatch) => ({
   updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index ccce9df6d..6e4f3781b 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -10,7 +10,7 @@
 
 import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
 import React, { useEffect } from 'react';
-import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES } from 'lbry-redux';
+import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES, Lbry } from 'lbry-redux';
 import Button from 'component/button';
 import ChannelSelect from 'component/channelSelector';
 import classnames from 'classnames';
@@ -27,6 +27,7 @@ import I18nMessage from 'component/i18nMessage';
 import * as PUBLISH_MODES from 'constants/publish_types';
 import { useHistory } from 'react-router';
 import Spinner from 'component/spinner';
+import { toHex } from 'util/hex';
 
 // @if TARGET='app'
 import fs from 'fs';
@@ -82,6 +83,9 @@ type Props = {
   incognito: boolean,
   user: ?User,
   activeChannelStakedLevel: number,
+  isLivestreamClaim: boolean,
+  isPostClaim: boolean,
+  permanentUrl: ?string,
 };
 
 function PublishForm(props: Props) {
@@ -114,28 +118,67 @@ function PublishForm(props: Props) {
     incognito,
     user,
     activeChannelStakedLevel,
-  } = props;
+    isLivestreamClaim,
+    isPostClaim,
+    permanentUrl,
 
   const { replace, location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
-  const uploadType = urlParams.get('type');
-  const livestreamEnabled =
-    ENABLE_NO_SOURCE_CLAIMS &&
+  const TYPE_PARAM = 'type';
+  const uploadType = urlParams.get(TYPE_PARAM);
+  const enableLivestream = ENABLE_NO_SOURCE_CLAIMS  &&
     user &&
     !user.odysee_live_disabled &&
     (activeChannelStakedLevel >= CHANNEL_STAKED_LEVEL_LIVESTREAM || user.odysee_live_enabled);
   // $FlowFixMe
-  const MODES = livestreamEnabled
-    ? Object.values(PUBLISH_MODES)
-    : Object.values(PUBLISH_MODES).filter((mode) => mode !== PUBLISH_MODES.LIVESTREAM);
+  const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => {
+    if (editingURI) {
+      if (isPostClaim) {
+        return mode === PUBLISH_MODES.POST;
+      } else if (isLivestreamClaim) {
+        return mode === PUBLISH_MODES.LIVESTREAM && enableLivestream;
+      } else {
+        return mode === PUBLISH_MODES.FILE;
+      }
+    } else {
+      if (mode === PUBLISH_MODES.LIVESTREAM) {
+        return enableLivestream;
+      } else {
+        return true;
+      }
+    }
+  });
 
   const MODE_TO_I18N_STR = {
     [PUBLISH_MODES.FILE]: SIMPLE_SITE ? 'Video' : 'File',
     [PUBLISH_MODES.POST]: 'Post --[noun, markdown post tab button]--',
     [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
   };
-  // Component state
+
   const [mode, setMode] = React.useState(uploadType || PUBLISH_MODES.FILE);
+  const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
+
+  let customSubtitle;
+  if (mode === PUBLISH_MODES.LIVESTREAM || isLivestreamClaim) {
+    if (isLivestreamClaim) {
+      customSubtitle = __('Update your livestream');
+    } else {
+      customSubtitle = __('Prepare an upcoming livestream');
+    }
+  } else if (mode === PUBLISH_MODES.POST || isPostClaim) {
+    if (isPostClaim) {
+      customSubtitle = __('Edit your post');
+    } else {
+      customSubtitle = __('Craft an epic post clearly explaining... whatever.');
+    }
+  } else {
+    if (editingURI) {
+      customSubtitle = __('Update your video');
+    } else {
+      customSubtitle = __('Upload that unlabeled video you found behind the TV in 1991');
+    }
+  }
+
   const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
 
   // Used to check if the url name has changed:
@@ -145,18 +188,23 @@ function PublishForm(props: Props) {
   const [fileEdited, setFileEdited] = React.useState(false);
   const [prevFileText, setPrevFileText] = React.useState('');
 
+  const [livestreamData, setLivestreamData] = React.useState([]);
+  const [signedMessage, setSignedMessage] = React.useState({});
+  const signedMessageStr = JSON.stringify(signedMessage);
   const TAGS_LIMIT = 5;
   const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
   const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
   const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing;
   const isInProgress = filePath || editingURI || name || title;
   const activeChannelName = activeChannelClaim && activeChannelClaim.name;
+  const activeChannelClaimStr = JSON.stringify(activeChannelClaim);
   // Editing content info
-  const uri = myClaimForUri ? myClaimForUri.permanent_url : undefined;
   const fileMimeType =
     myClaimForUri && myClaimForUri.value && myClaimForUri.value.source
       ? myClaimForUri.value.source.media_type
       : undefined;
+  const claimChannelId = myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id;
+
   const nameEdited = isStillEditing && name !== prevName;
 
   // If they are editing, they don't need a new file chosen
@@ -178,6 +226,29 @@ function PublishForm(props: Props) {
     : formValidLessFile;
 
   const [previewing, setPreviewing] = React.useState(false);
+
+  React.useEffect(() => {
+    if (activeChannelClaimStr) {
+      const channelClaim = JSON.parse(activeChannelClaimStr);
+      const message = 'get-claim-id-replays';
+      setSignedMessage({ signature: null, signing_ts: null });
+      // ensure we have a channel
+      if (channelClaim.claim_id) {
+        Lbry.channel_sign({
+          channel_id: channelClaim.claim_id,
+          hexdata: toHex(message),
+        })
+          .then((data) => {
+            console.log('data', data);
+            setSignedMessage(data);
+          })
+          .catch((error) => {
+            setSignedMessage({ signature: null, signing_ts: null });
+          });
+      }
+    }
+  }, [activeChannelClaimStr, setSignedMessage]);
+
   useEffect(() => {
     if (!modal) {
       setTimeout(() => {
@@ -186,12 +257,38 @@ function PublishForm(props: Props) {
     }
   }, [modal]);
 
-  const isLivestream = mode === PUBLISH_MODES.LIVESTREAM;
+  // move this to lbryinc OR to a file under ui, and/or provide a standardized livestreaming config.
+  function checkLivestreams(channelId, signature, timestamp) {
+    // $FlowFixMe Bitwave's API can handle garbage
+    setCheckingLivestreams(true);
+    fetch(`https://api.bitwave.tv/v1/replays/odysee/${channelId}?signature=${signature}&signing_ts=${timestamp}`) // claimChannelId
+      .then((res) => res.json())
+      .then((res) => {
+        if (!res || !res.data) {
+          setLivestreamData([]);
+        }
+        setLivestreamData(res.data);
+        setCheckingLivestreams(false);
+      })
+      .catch((e) => {
+        setLivestreamData([]);
+        setCheckingLivestreams(false);
+      });
+  }
+
+  useEffect(() => {
+    const signedMessage = JSON.parse(signedMessageStr);
+    if (claimChannelId && isLivestreamClaim && signedMessage.signature) {
+      checkLivestreams(claimChannelId, signedMessage.signature, signedMessage.signing_ts);
+    }
+  }, [claimChannelId, isLivestreamClaim, signedMessageStr]);
+
+  const isLivestreamMode = mode === PUBLISH_MODES.LIVESTREAM;
   let submitLabel;
   if (publishing) {
     if (isStillEditing) {
       submitLabel = __('Saving...');
-    } else if (isLivestream) {
+    } else if (isLivestreamMode) {
       submitLabel = __('Creating...');
     } else {
       submitLabel = __('Uploading...');
@@ -201,7 +298,7 @@ function PublishForm(props: Props) {
   } else {
     if (isStillEditing) {
       submitLabel = __('Save');
-    } else if (isLivestream) {
+    } else if (isLivestreamMode) {
       submitLabel = __('Create');
     } else {
       submitLabel = __('Upload');
@@ -221,7 +318,7 @@ function PublishForm(props: Props) {
     }
   }, [thumbnail, resetThumbnailStatus]);
 
-  // Save current name of the editing claim
+  // Save previous name of the editing claim
   useEffect(() => {
     if (isStillEditing && (!prevName || !prevName.trim() === '')) {
       if (name !== prevName) {
@@ -263,17 +360,18 @@ function PublishForm(props: Props) {
     }
   }, [name, activeChannelName, resolveUri, updatePublishForm, checkAvailability]);
 
+  // because publish editingUri is channel_short/claim_long and we don't have that, resolve it.
   useEffect(() => {
-    // because editingURI is lbry://channel_short/claim_long and that particular shape won't map to the claimId yet
     if (editingURI) {
       resolveUri(editingURI);
     }
   }, [editingURI, resolveUri]);
 
+  // set isMarkdownPost in publish form if so, also update isLivestreamPublish
   useEffect(() => {
     updatePublishForm({
       isMarkdownPost: mode === PUBLISH_MODES.POST,
-      isLivestreamPublish: isLivestream,
+      isLivestreamPublish: isLivestreamMode,
     });
   }, [mode, updatePublishForm]);
 
@@ -282,14 +380,15 @@ function PublishForm(props: Props) {
       updatePublishForm({ channel: undefined });
 
       // Anonymous livestreams aren't supported
-      if (isLivestream) {
+      if (isLivestreamMode) {
         setMode(PUBLISH_MODES.FILE);
       }
     } else if (activeChannelName) {
       updatePublishForm({ channel: activeChannelName });
     }
-  }, [activeChannelName, incognito, updatePublishForm]);
+  }, [activeChannelName, incognito, updatePublishForm, isLivestreamMode]);
 
+  // set mode based on urlParams 'type'
   useEffect(() => {
     const _uploadType = uploadType && uploadType.toLowerCase();
 
@@ -322,7 +421,7 @@ function PublishForm(props: Props) {
   useEffect(() => {
     if (!uploadType) return;
     const newParams = new URLSearchParams();
-    newParams.set('type', mode.toLowerCase());
+    newParams.set(TYPE_PARAM, mode.toLowerCase());
     replace({ search: newParams.toString() });
   }, [mode, uploadType]);
 
@@ -391,7 +490,7 @@ function PublishForm(props: Props) {
       }
     }
     // Publish file
-    if (mode === PUBLISH_MODES.FILE || isLivestream) {
+    if (mode === PUBLISH_MODES.FILE || isLivestreamMode) {
       runPublish = true;
     }
 
@@ -428,19 +527,23 @@ function PublishForm(props: Props) {
   // Editing claim uri
   return (
     <div className="card-stack">
-      <ChannelSelect hideAnon={isLivestream} disabled={disabled} />
+      <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} />
 
       <PublishFile
-        uri={uri}
+        uri={permanentUrl}
         mode={mode}
         fileMimeType={fileMimeType}
         disabled={disabled || publishing}
         inProgress={isInProgress}
         setPublishMode={setMode}
         setPrevFileText={setPrevFileText}
+        livestreamData={livestreamData}
+        subtitle={customSubtitle}
+        isCheckingLivestreams={isCheckingLivestreams}
+        checkLivestreams={checkLivestreams}
         header={
           <>
-            {MODES.map((modeName) => (
+            {AVAILABLE_MODES.map((modeName) => (
               <Button
                 key={String(modeName)}
                 icon={modeName}
@@ -460,7 +563,7 @@ function PublishForm(props: Props) {
       {!publishing && (
         <div className={classnames({ 'card--disabled': formDisabled })}>
           {mode === PUBLISH_MODES.FILE && <PublishDescription disabled={formDisabled} />}
-          <Card actions={<SelectThumbnail />} />
+          <Card actions={<SelectThumbnail livestreamdData={livestreamData} />} />
           <TagsSelect
             suggestMature={!SIMPLE_SITE}
             disableAutoFocus
@@ -489,7 +592,7 @@ function PublishForm(props: Props) {
           />
 
           <PublishBid disabled={isStillEditing || formDisabled} />
-          {!isLivestream && <PublishPrice disabled={formDisabled} />}
+          {!isLivestreamMode && <PublishPrice disabled={formDisabled} />}
           <PublishAdditionalOptions disabled={formDisabled} />
         </div>
       )}
diff --git a/ui/modal/modalPublishPreview/index.js b/ui/modal/modalPublishPreview/index.js
index aa4c031df..f71878860 100644
--- a/ui/modal/modalPublishPreview/index.js
+++ b/ui/modal/modalPublishPreview/index.js
@@ -6,22 +6,29 @@ import {
   selectPublishFormValues,
   selectIsStillEditing,
   selectMyChannelClaims,
+  makeSelectClaimIsStreamPlaceholder,
   SETTINGS,
 } from 'lbry-redux';
 import { selectFfmpegStatus, makeSelectClientSetting } from 'redux/selectors/settings';
 import { doPublishDesktop } from 'redux/actions/publish';
 import { doSetClientSetting } from 'redux/actions/settings';
 
-const select = (state) => ({
-  ...selectPublishFormValues(state),
-  myChannels: selectMyChannelClaims(state),
-  isVid: makeSelectPublishFormValue('fileVid')(state),
-  publishSuccess: makeSelectPublishFormValue('publishSuccess')(state),
-  publishing: makeSelectPublishFormValue('publishing')(state),
-  isStillEditing: selectIsStillEditing(state),
-  ffmpegStatus: selectFfmpegStatus(state),
-  enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
-});
+const select = (state, props) => {
+  const editingUri = makeSelectPublishFormValue('editingURI')(state);
+
+  return {
+    ...selectPublishFormValues(state),
+    myChannels: selectMyChannelClaims(state),
+    isVid: makeSelectPublishFormValue('fileVid')(state),
+    publishSuccess: makeSelectPublishFormValue('publishSuccess')(state),
+    publishing: makeSelectPublishFormValue('publishing')(state),
+    remoteFile: makeSelectPublishFormValue('remoteFileUrl')(state),
+    isStillEditing: selectIsStillEditing(state),
+    ffmpegStatus: selectFfmpegStatus(state),
+    enablePublishPreview: makeSelectClientSetting(SETTINGS.ENABLE_PUBLISH_PREVIEW)(state),
+    isLivestreamClaim: makeSelectClaimIsStreamPlaceholder(editingUri)(state),
+  };
+};
 
 const perform = (dispatch) => ({
   publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
diff --git a/ui/modal/modalPublishPreview/view.jsx b/ui/modal/modalPublishPreview/view.jsx
index e79621a90..336e9a018 100644
--- a/ui/modal/modalPublishPreview/view.jsx
+++ b/ui/modal/modalPublishPreview/view.jsx
@@ -43,6 +43,8 @@ type Props = {
   myChannels: ?Array<ChannelClaim>,
   publishSuccess: boolean,
   publishing: boolean,
+  isLivestreamClaim: boolean,
+  remoteFile: string,
 };
 
 // class ModalPublishPreview extends React.PureComponent<Props> {
@@ -74,10 +76,14 @@ const ModalPublishPreview = (props: Props) => {
     publishing,
     publish,
     closeModal,
+    isLivestreamClaim,
+    remoteFile,
   } = props;
+
   const livestream =
+    (uri && isLivestreamClaim) ||
     //   $FlowFixMe
-    previewResponse.outputs[0] && previewResponse.outputs[0].value && !previewResponse.outputs[0].value.source;
+    (previewResponse.outputs[0] && previewResponse.outputs[0].value && !previewResponse.outputs[0].value.source);
   // leave the confirm modal up if we're not going straight to upload/reflecting
   // @if TARGET='web'
   React.useEffect(() => {
@@ -122,7 +128,11 @@ const ModalPublishPreview = (props: Props) => {
   const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
   let modalTitle;
   if (isStillEditing) {
-    modalTitle = __('Confirm Edit');
+    if (livestream) {
+      modalTitle = __('Confirm Update');
+    } else {
+      modalTitle = __('Confirm Edit');
+    }
   } else if (livestream) {
     modalTitle = __('Create Livestream');
   } else {
@@ -208,6 +218,7 @@ const ModalPublishPreview = (props: Props) => {
                 <table className="table table--condensed table--publish-preview">
                   <tbody>
                     {!livestream && !isMarkdownPost && createRow(__('File'), getFilePathName(filePath))}
+                    {livestream && remoteFile && createRow(__('Replay'), __('Remote File Selected'))}
                     {isOptimizeAvail && createRow(__('Transcode'), optimize ? __('Yes') : __('No'))}
                     {createRow(__('Title'), title)}
                     {createRow(__('Description'), descriptionValue)}
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index 60769c55d..d920c2fa2 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -205,3 +205,79 @@
 .livestream__publish-intro {
   margin-top: var(--spacing-l);
 }
+
+.table--livestream-data {
+  td:nth-of-type(1) {
+    width: 10%;
+  }
+  td:nth-of-type(2) {
+    width: 40%;
+  }
+  td:nth-of-type(3) {
+    width: 20%;
+  }
+  td:nth-of-type(4) {
+    width: 30%;
+  }
+  @media (max-width: $breakpoint-small) {
+    td:nth-of-type(1) {
+      max-width: 10%;
+    }
+    td:nth-of-type(2) {
+      width: 30%;
+    }
+    td:nth-of-type(3) {
+      width: 50%;
+    }
+    td:nth-of-type(4) {
+      display: none;
+    }
+  }
+}
+
+.livestream_thumb_container {
+  height: 4rem;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.livestream___thumb {
+  padding: var(--spacing-xxs);
+}
+
+.livestream__data-row {
+  cursor: pointer;
+  .radio {
+    cursor: pointer;
+  }
+  td {
+    padding-right: var(--spacing-m) !important;
+
+    @media (max-width: $breakpoint-small) {
+      padding: var(--spacing-xs) !important;
+    }
+  }
+  &:hover {
+    td {
+      .radio {
+        label::before {
+          cursor: pointer !important;
+          background-color: var(--color-input-toggle-bg-hover) !important;
+        }
+      }
+      label {
+        cursor: pointer !important;
+      }
+    }
+
+    input {
+      cursor: pointer;
+      background-color: var(--color-input-bg-selected);
+    }
+  }
+}
+
+.livestream__data-row--selected {
+  background-color: var(--color-input-bg-selected) !important;
+}
diff --git a/ui/scss/component/_table.scss b/ui/scss/component/_table.scss
index 3e6a19947..b102bc948 100644
--- a/ui/scss/component/_table.scss
+++ b/ui/scss/component/_table.scss
@@ -40,12 +40,28 @@
   td {
     padding: 0.5rem 1rem;
   }
+
+  th {
+    font-size: var(--font-xsmall);
+    color: var(--color-text-help);
+    padding-bottom: var(--spacing-xxxs);
+    @media (max-width: $breakpoint-small) {
+      padding-left: var(--spacing-xs) !important;
+      padding-right: var(--spacing-xs) !important;
+    }
+  }
 }
 
 th {
   text-align: left;
 }
 
+td {
+  @media (max-width: $breakpoint-small) {
+    font-size: var(--font-small);
+  }
+}
+
 .table--fixed {
   table-layout: fixed;
 }
diff --git a/web/setup/publish.js b/web/setup/publish.js
index 3f3fec2a9..1e191f035 100644
--- a/web/setup/publish.js
+++ b/web/setup/publish.js
@@ -42,8 +42,10 @@ export default function apiPublishCallViaWeb(
   if (fileField) {
     body.append('file', fileField);
     params.file_path = '__POST_FILE__';
+    delete params['remote_url'];
   } else if (remoteUrl) {
     body.append('remote_url', remoteUrl);
+    delete params['remote_url'];
   }
 
   const jsonPayload = JSON.stringify({
-- 
2.45.2


From 74ec7478401ac9b3e4b7842b9805db4418f5b5ba Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Sat, 10 Apr 2021 23:32:17 -0400
Subject: [PATCH 02/10] review changes

---
 ui/component/common/card.jsx         |  2 +-
 ui/component/livestreamLink/view.jsx |  4 +--
 ui/component/publishFile/view.jsx    | 48 +++++++++++++---------------
 ui/component/publishForm/view.jsx    |  4 +--
 ui/constants/livestream.js           |  3 +-
 ui/page/livestream/view.jsx          |  4 +--
 ui/scss/all.scss                     |  2 +-
 ui/scss/component/_livestream.scss   | 43 ++++++++++++++-----------
 8 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/ui/component/common/card.jsx b/ui/component/common/card.jsx
index 2e8e191a8..64ce71d81 100644
--- a/ui/component/common/card.jsx
+++ b/ui/component/common/card.jsx
@@ -21,7 +21,7 @@ type Props = {
   nag?: Node,
   smallTitle?: boolean,
   onClick?: () => void,
-  children?: any, // not sure how this works
+  children?: Node,
 };
 
 export default function Card(props: Props) {
diff --git a/ui/component/livestreamLink/view.jsx b/ui/component/livestreamLink/view.jsx
index 5515eb46c..134bc4c5f 100644
--- a/ui/component/livestreamLink/view.jsx
+++ b/ui/component/livestreamLink/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_API } from 'constants/livestream';
+import { BITWAVE_LIVE_API } from 'constants/livestream';
 import React from 'react';
 import Card from 'component/common/card';
 import ClaimPreview from 'component/claimPreview';
@@ -35,7 +35,7 @@ export default function LivestreamLink(props: Props) {
   React.useEffect(() => {
     function fetchIsStreaming() {
       // $FlowFixMe Bitwave's API can handle garbage
-      fetch(`${BITWAVE_API}/${livestreamChannelId}`)
+      fetch(`${BITWAVE_LIVE_API}/${livestreamChannelId}`)
         .then((res) => res.json())
         .then((res) => {
           if (res && res.success && res.data && res.data.live) {
diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 44b088b40..01e6c7c4e 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -8,7 +8,7 @@ import PostEditor from 'component/postEditor';
 import FileSelector from 'component/common/file-selector';
 import Button from 'component/button';
 import Card from 'component/common/card';
-import { Form, FormField } from 'component/common/form';
+import { FormField } from 'component/common/form';
 import Spinner from 'component/spinner';
 import I18nMessage from 'component/i18nMessage';
 import usePersistedState from 'effects/use-persisted-state';
@@ -98,9 +98,9 @@ function PublishFile(props: Props) {
   const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
 
   const fileSelectorModes = [
-    { label: __('Select Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
+    { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
     { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
-    { label: __('Not Yet'), actionName: SOURCE_NONE, icon: ICONS.REMOVE },
+    { label: __('None'), actionName: SOURCE_NONE, icon: ICONS.REMOVE },
   ];
 
   const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
@@ -575,28 +575,26 @@ function PublishFile(props: Props) {
                     </table>
                   </div>
                 </fieldset-section>
-                <Form style={totalPages <= 1 ? { display: 'none' } : null} onSubmit={handlePaginateReplays}>
-                  <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>
-                </Form>
+                <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>
               </>
             )}
           </>
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 6e4f3781b..2a82e3e1a 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -28,6 +28,7 @@ import * as PUBLISH_MODES from 'constants/publish_types';
 import { useHistory } from 'react-router';
 import Spinner from 'component/spinner';
 import { toHex } from 'util/hex';
+import { BITWAVE_REPLAY_API } from 'constants/livestream';
 
 // @if TARGET='app'
 import fs from 'fs';
@@ -239,7 +240,6 @@ function PublishForm(props: Props) {
           hexdata: toHex(message),
         })
           .then((data) => {
-            console.log('data', data);
             setSignedMessage(data);
           })
           .catch((error) => {
@@ -261,7 +261,7 @@ function PublishForm(props: Props) {
   function checkLivestreams(channelId, signature, timestamp) {
     // $FlowFixMe Bitwave's API can handle garbage
     setCheckingLivestreams(true);
-    fetch(`https://api.bitwave.tv/v1/replays/odysee/${channelId}?signature=${signature}&signing_ts=${timestamp}`) // claimChannelId
+    fetch(`${BITWAVE_REPLAY_API}/${channelId}?signature=${signature}&signing_ts=${timestamp}`) // claimChannelId
       .then((res) => res.json())
       .then((res) => {
         if (!res || !res.data) {
diff --git a/ui/constants/livestream.js b/ui/constants/livestream.js
index fd0aca3a4..749424df9 100644
--- a/ui/constants/livestream.js
+++ b/ui/constants/livestream.js
@@ -1,2 +1,3 @@
 export const BITWAVE_EMBED_URL = 'https://bitwave.tv/odysee';
-export const BITWAVE_API = 'https://api.bitwave.tv/v1/odysee/live';
+export const BITWAVE_LIVE_API = 'https://api.bitwave.tv/v1/odysee/live';
+export const BITWAVE_REPLAY_API = 'https://api.bitwave.tv/v1/replays/odysee';
diff --git a/ui/page/livestream/view.jsx b/ui/page/livestream/view.jsx
index 0f77f9d53..5b7a7157a 100644
--- a/ui/page/livestream/view.jsx
+++ b/ui/page/livestream/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import { BITWAVE_API } from 'constants/livestream';
+import { BITWAVE_LIVE_API } from 'constants/livestream';
 import React from 'react';
 import Page from 'component/page';
 import LivestreamLayout from 'component/livestreamLayout';
@@ -56,7 +56,7 @@ export default function LivestreamPage(props: Props) {
     let interval;
     function checkIsLive() {
       // $FlowFixMe Bitwave's API can handle garbage
-      fetch(`${BITWAVE_API}/${livestreamChannelId}`)
+      fetch(`${BITWAVE_LIVE_API}/${livestreamChannelId}`)
         .then((res) => res.json())
         .then((res) => {
           if (!res || !res.data) {
diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 2aa0b0360..ea4773be4 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -28,7 +28,6 @@
 @import 'component/form-field';
 @import 'component/header';
 @import 'component/icon';
-@import 'component/livestream';
 @import 'component/main';
 @import 'component/markdown-editor';
 @import 'component/markdown-preview';
@@ -54,6 +53,7 @@
 @import 'component/status-bar';
 @import 'component/syntax-highlighter';
 @import 'component/table';
+@import 'component/livestream';
 @import 'component/tabs';
 @import 'component/tooltip';
 @import 'component/txo-list';
diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss
index d920c2fa2..79e461e28 100644
--- a/ui/scss/component/_livestream.scss
+++ b/ui/scss/component/_livestream.scss
@@ -208,29 +208,31 @@
 
 .table--livestream-data {
   td:nth-of-type(1) {
-    width: 10%;
+    max-width: 4rem;
   }
   td:nth-of-type(2) {
-    width: 40%;
+    min-width: 8.5rem;
   }
   td:nth-of-type(3) {
-    width: 20%;
+    width: 4rem;
+    min-width: 9rem;
   }
   td:nth-of-type(4) {
-    width: 30%;
+    display: none;
   }
-  @media (max-width: $breakpoint-small) {
+  @media (min-width: $breakpoint-small) {
     td:nth-of-type(1) {
-      max-width: 10%;
+      max-width: 4rem;
     }
     td:nth-of-type(2) {
-      width: 30%;
+      width: 40%;
     }
     td:nth-of-type(3) {
-      width: 50%;
+      width: 5rem;
     }
     td:nth-of-type(4) {
-      display: none;
+      width: 100%;
+      display: table-cell;
     }
   }
 }
@@ -240,10 +242,12 @@
   width: 100%;
   display: flex;
   flex-direction: row;
+  overflow: hidden;
 }
 
 .livestream___thumb {
-  padding: var(--spacing-xxs);
+  padding: 0 var(--spacing-xxs);
+  object-fit: cover;
 }
 
 .livestream__data-row {
@@ -251,23 +255,28 @@
   .radio {
     cursor: pointer;
   }
+  &:nth-child(n) {
+    &.livestream__data-row--selected {
+      background-color: var(--color-input-toggle-bg-hover);
+    }
+  }
   td {
-    padding-right: var(--spacing-m) !important;
+    padding-right: var(--spacing-m);
 
     @media (max-width: $breakpoint-small) {
-      padding: var(--spacing-xs) !important;
+      padding: var(--spacing-xs);
     }
   }
   &:hover {
     td {
       .radio {
         label::before {
-          cursor: pointer !important;
-          background-color: var(--color-input-toggle-bg-hover) !important;
+          cursor: pointer;
+          background-color: var(--color-input-toggle-bg-hover);
         }
       }
       label {
-        cursor: pointer !important;
+        cursor: pointer;
       }
     }
 
@@ -277,7 +286,3 @@
     }
   }
 }
-
-.livestream__data-row--selected {
-  background-color: var(--color-input-bg-selected) !important;
-}
-- 
2.45.2


From 60ff45e2246a223b4a7a6d05851930eec6d5710c Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Mon, 12 Apr 2021 11:59:33 -0400
Subject: [PATCH 03/10] move file size limit to conig

---
 .env.defaults                     |  1 +
 config.js                         |  1 +
 ui/component/publishFile/view.jsx | 33 +++++++++++++++----------------
 ui/component/publishForm/view.jsx |  3 +--
 4 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/.env.defaults b/.env.defaults
index 556e4ca44..c6c322dcd 100644
--- a/.env.defaults
+++ b/.env.defaults
@@ -33,6 +33,7 @@ ENABLE_CREATOR_REACTIONS=false
 ENABLE_NO_SOURCE_CLAIMS=false
 ENABLE_PREROLL_ADS=false
 CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS=4
+WEB_PUBLISH_SIZE_LIMIT_GB=4
 CHANNEL_STAKED_LEVEL_LIVESTREAM=5
 
 # OG
diff --git a/config.js b/config.js
index 8203652d9..db8d01cbb 100644
--- a/config.js
+++ b/config.js
@@ -38,6 +38,7 @@ const config = {
   ENABLE_NO_SOURCE_CLAIMS: process.env.ENABLE_NO_SOURCE_CLAIMS === 'true',
   ENABLE_PREROLL_ADS: process.env.ENABLE_PREROLL_ADS === 'true',
   CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS: process.env.CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS,
+  WEB_PUBLISH_SIZE_LIMIT_GB: process.env.WEB_PUBLISH_SIZE_LIMIT_GB,
   CHANNEL_STAKED_LEVEL_LIVESTREAM: process.env.CHANNEL_STAKED_LEVEL_LIVESTREAM,
   SIMPLE_SITE: process.env.SIMPLE_SITE === 'true',
   SHOW_ADS: process.env.SHOW_ADS === 'true',
diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 01e6c7c4e..e0a1280ce 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -1,5 +1,5 @@
 // @flow
-import { SITE_NAME } from 'config';
+import { SITE_NAME, WEB_PUBLISH_SIZE_LIMIT_GB } from 'config';
 import type { Node } from 'react';
 import * as ICONS from 'constants/icons';
 import React, { useState, useEffect } from 'react';
@@ -86,9 +86,8 @@ function PublishFile(props: Props) {
   const SOURCE_UPLOAD = 'upload';
 
   const RECOMMENDED_BITRATE = 6000000;
-  const TV_PUBLISH_SIZE_LIMIT: number = 4294967296;
-  const TV_PUBLISH_SIZE_LIMIT_STR_GB = '4';
-  const PAGE_SIZE = 4;
+  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 PROCESSING_MB_PER_SECOND = 0.5;
   const MINUTES_THRESHOLD = 30;
@@ -96,6 +95,16 @@ function PublishFile(props: Props) {
   const MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown'];
   const sizeInMB = Number(size) / 1000000;
   const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
+  const ffmpegAvail = ffmpegStatus.available;
+  const [oversized, setOversized] = useState(false);
+  const [currentFile, setCurrentFile] = useState(null);
+  const [currentFileType, setCurrentFileType] = useState(null);
+  const [optimizeAvail, setOptimizeAvail] = useState(false);
+  const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
+  const UPLOAD_SIZE_MESSAGE = __(
+    '%SITE_NAME% uploads are limited to %limit% GB. Download the app for unrestricted publishing.',
+    { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_GB_STR }
+  );
 
   const fileSelectorModes = [
     { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
@@ -106,26 +115,16 @@ function PublishFile(props: Props) {
   const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
   const showSourceSelector = isLivestreamClaim && hasLivestreamData;
 
-  const ffmpegAvail = ffmpegStatus.available;
-  const [oversized, setOversized] = useState(false);
-  const [currentFile, setCurrentFile] = useState(null);
-  const [currentFileType, setCurrentFileType] = useState(null);
-  const [optimizeAvail, setOptimizeAvail] = useState(false);
-  const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
   const [fileSelectSource, setFileSelectSource] = useState(
     IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
   );
   // const [showFileUpdate, setShowFileUpdate] = useState(false);
   const [selectedFileIndex, setSelectedFileIndex] = useState(null);
+  const PAGE_SIZE = 4;
   const [currentPage, setCurrentPage] = useState(1);
   const totalPages =
     hasLivestreamData && livestreamData.length > PAGE_SIZE ? Math.ceil(livestreamData.length / PAGE_SIZE) : 1;
 
-  const UPLOAD_SIZE_MESSAGE = __(
-    '%SITE_NAME% uploads are limited to %limit% GB. Download the app for unrestricted publishing.',
-    { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_STR_GB }
-  );
-
   // Reset filePath if publish mode changed
   useEffect(() => {
     if (mode === PUBLISH_MODES.POST) {
@@ -284,7 +283,7 @@ function PublishFile(props: Props) {
         <p className="help">
           {__(
             'For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 Mbps) and resolution (720p) for more reliable streaming. %SITE_NAME% uploads are restricted to %limit% GB.',
-            { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_STR_GB }
+            { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_GB_STR }
           )}{' '}
           <Button button="link" label={__('Upload Guide')} href="https://lbry.com/faq/video-publishing-guide" />
         </p>
@@ -411,7 +410,7 @@ function PublishFile(props: Props) {
 
     // @if TARGET='web'
     // we only need to enforce file sizes on 'web'
-    if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
+    if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
       setOversized(true);
       showToast(__(UPLOAD_SIZE_MESSAGE));
       updatePublishForm({ filePath: '', name: '' });
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 2a82e3e1a..ef397be49 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -144,9 +144,8 @@ function PublishForm(props: Props) {
     } else {
       if (mode === PUBLISH_MODES.LIVESTREAM) {
         return enableLivestream;
-      } else {
-        return true;
       }
+      return false;
     }
   });
 
-- 
2.45.2


From 0e2a7e099792ba60377d23e70e4991c2c81d5f2a Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Mon, 12 Apr 2021 12:11:26 -0400
Subject: [PATCH 04/10] fix posts not showing up on desktop

---
 static/app-strings.json           | 1 +
 ui/component/publishForm/view.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 1d6b125f0..9c7d280bf 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1782,6 +1782,7 @@
   "Craft an epic post clearly explaining... whatever.": "Craft an epic post clearly explaining... whatever.",
   "waiting": "waiting",
   "%viewer_count% currently %viewer_state%": "%viewer_count% currently %viewer_state%",
+  "Choose Replay": "Choose Replay",
   "More from %claim_name%": "More from %claim_name%",
   "--end--": "--end--"
 }
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index ef397be49..965fd42af 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -145,7 +145,7 @@ function PublishForm(props: Props) {
       if (mode === PUBLISH_MODES.LIVESTREAM) {
         return enableLivestream;
       }
-      return false;
+      return true;
     }
   });
 
-- 
2.45.2


From 9b6ffa404b706be9c0e5e55eb91d38e4ffc9bc3c Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Mon, 12 Apr 2021 12:26:45 -0400
Subject: [PATCH 05/10] force type=file if livestream disabled

---
 ui/component/publishForm/view.jsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 965fd42af..b4eabe2b6 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -122,6 +122,7 @@ function PublishForm(props: Props) {
     isLivestreamClaim,
     isPostClaim,
     permanentUrl,
+  } = props;
 
   const { replace, location } = useHistory();
   const urlParams = new URLSearchParams(location.search);
@@ -370,7 +371,7 @@ function PublishForm(props: Props) {
   useEffect(() => {
     updatePublishForm({
       isMarkdownPost: mode === PUBLISH_MODES.POST,
-      isLivestreamPublish: isLivestreamMode,
+      isLivestreamPublish: mode === PUBLISH_MODES.LIVESTREAM,
     });
   }, [mode, updatePublishForm]);
 
@@ -409,14 +410,19 @@ function PublishForm(props: Props) {
     }
     // LiveStream publish
     if (_uploadType === PUBLISH_MODES.LIVESTREAM.toLowerCase() && livestreamEnabled) {
-      setMode(PUBLISH_MODES.LIVESTREAM);
+      if (enableLivestream) {
+        setMode(PUBLISH_MODES.LIVESTREAM);
+      } else {
+        setMode(PUBLISH_MODES.FILE);
+      }
       return;
     }
 
     // Default to standard file publish
     setMode(PUBLISH_MODES.FILE);
-  }, [uploadType, livestreamEnabled]);
+  }, [uploadType, enableLivestream]);
 
+  // if we have a type urlparam, update it? necessary?
   useEffect(() => {
     if (!uploadType) return;
     const newParams = new URLSearchParams();
-- 
2.45.2


From 39cc35f669e32ad505dea1aeba4072e219115572 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Mon, 12 Apr 2021 18:06:49 -0400
Subject: [PATCH 06/10] livestream replay upload styling

---
 ui/component/publishFile/view.jsx | 133 +++++++++++++++---------------
 ui/scss/component/section.scss    |   4 +
 2 files changed, 70 insertions(+), 67 deletions(-)

diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index e0a1280ce..1eed81911 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -15,6 +15,7 @@ import usePersistedState from 'effects/use-persisted-state';
 import * as PUBLISH_MODES from 'constants/publish_types';
 import PublishName from 'component/publishName';
 import CopyableText from 'component/copyableText';
+import Empty from 'component/common/empty';
 import moment from 'moment';
 import classnames from 'classnames';
 import ReactPaginate from 'react-paginate';
@@ -45,7 +46,6 @@ type Props = {
   header: Node,
   livestreamData: LivestreamReplayData,
   isLivestreamClaim: boolean,
-  remoteUrl?: string,
   checkLivestreams: () => void,
   isCheckingLivestreams: boolean,
 };
@@ -76,7 +76,6 @@ function PublishFile(props: Props) {
     livestreamData,
     isLivestreamClaim,
     subtitle,
-    remoteUrl,
     checkLivestreams,
     isCheckingLivestreams,
   } = props;
@@ -109,11 +108,11 @@ function PublishFile(props: Props) {
   const fileSelectorModes = [
     { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
     { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
-    { label: __('None'), actionName: SOURCE_NONE, icon: ICONS.REMOVE },
+    { label: __('None'), actionName: SOURCE_NONE },
   ];
 
   const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
-  const showSourceSelector = isLivestreamClaim && hasLivestreamData;
+  const showSourceSelector = isLivestreamClaim;
 
   const [fileSelectSource, setFileSelectSource] = useState(
     IS_WEB && showSourceSelector ? SOURCE_SELECT : SOURCE_UPLOAD
@@ -227,13 +226,6 @@ function PublishFile(props: Props) {
     }
   }
 
-  function getSourceMessage() {
-    if (remoteUrl || filePath) {
-      return __('Replay selected for update');
-    } else {
-      return __('No replay selected');
-    }
-  }
   function getUploadMessage() {
     // @if TARGET='web'
     if (oversized) {
@@ -470,14 +462,14 @@ function PublishFile(props: Props) {
           <>
             {showSourceSelector && (
               <fieldset-section>
-                <div className="section__actions--between">
+                <div className="section__actions--between section__actions--align-bottom">
                   <div>
                     <label>{__('Add replay video')}</label>
-                    <div>
+                    <div className="button-group">
                       {fileSelectorModes.map((fmode) => (
                         <Button
                           key={fmode.label}
-                          icon={fmode.icon}
+                          icon={fmode.icon || undefined}
                           iconSize={18}
                           label={fmode.label}
                           button="alt"
@@ -491,15 +483,16 @@ function PublishFile(props: Props) {
                         />
                       ))}
                     </div>
-                    <div className="help--inline">{getSourceMessage()}</div>
                   </div>
-                  <Button
-                    button="secondary"
-                    label={__('Check for Replays')}
-                    disabled={isCheckingLivestreams}
-                    icon={ICONS.REFRESH}
-                    onClick={() => checkLivestreams()}
-                  />
+                  {fileSelectSource === SOURCE_SELECT && (
+                    <Button
+                      button="secondary"
+                      label={__('Check for Replays')}
+                      disabled={isCheckingLivestreams}
+                      icon={ICONS.REFRESH}
+                      onClick={() => checkLivestreams()}
+                    />
+                  )}
                 </div>
               </fieldset-section>
             )}
@@ -518,58 +511,54 @@ function PublishFile(props: Props) {
                 {getUploadMessage()}
               </>
             )}
-            {fileSelectSource === SOURCE_SELECT && showFileUpload && (
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && (
               <>
                 <fieldset-section>
                   <label>{__('Select Replay')}</label>
                   <div className="table__wrapper">
                     <table className="table table--livestream-data">
                       <tbody>
-                        {livestreamData &&
-                          livestreamData
-                            .slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
-                            .map((item, i) => (
-                              <tr
+                        {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>
-                            ))}
+                                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>
@@ -596,6 +585,16 @@ function PublishFile(props: Props) {
                 </fieldset-group>
               </>
             )}
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
+              <div className="main--empty empty">
+                <Empty text={__('No replays found.')} />
+              </div>
+            )}
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && isCheckingLivestreams && (
+              <div className="main--empty empty">
+                <Spinner small />
+              </div>
+            )}
           </>
           {/* @endif */}
           {/* @if TARGET='app' */}
diff --git a/ui/scss/component/section.scss b/ui/scss/component/section.scss
index 2fce62c60..5596bf9be 100644
--- a/ui/scss/component/section.scss
+++ b/ui/scss/component/section.scss
@@ -172,6 +172,10 @@
   }
 }
 
+.section__actions--align-bottom {
+  align-items: flex-end;
+}
+
 .section__actions--no-margin {
   @extend .section__actions;
   margin-top: 0;
-- 
2.45.2


From 0b643028d7e9818a9d10faba7cefa02795767258 Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 13 Apr 2021 12:07:51 -0400
Subject: [PATCH 07/10] form error on no replay selected

---
 ui/component/publishFile/view.jsx       | 10 +++++++--
 ui/component/publishForm/index.js       |  3 +++
 ui/component/publishForm/view.jsx       | 27 ++++++++++++++++---------
 ui/component/publishFormErrors/view.jsx | 14 ++++++++++++-
 4 files changed, 41 insertions(+), 13 deletions(-)

diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 1eed81911..7417ffdb4 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -48,6 +48,7 @@ type Props = {
   isLivestreamClaim: boolean,
   checkLivestreams: () => void,
   isCheckingLivestreams: boolean,
+  setWaitForFile: (boolean) => void,
 };
 
 function PublishFile(props: Props) {
@@ -78,6 +79,7 @@ function PublishFile(props: Props) {
     subtitle,
     checkLivestreams,
     isCheckingLivestreams,
+    setWaitForFile,
   } = props;
 
   const SOURCE_NONE = 'none';
@@ -111,6 +113,7 @@ function PublishFile(props: Props) {
     { label: __('None'), actionName: SOURCE_NONE },
   ];
 
+  const livestreamDataStr = JSON.stringify(livestreamData);
   const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
   const showSourceSelector = isLivestreamClaim;
 
@@ -138,6 +141,7 @@ function PublishFile(props: Props) {
   // set default file source to select if necessary
   useEffect(() => {
     if (hasLivestreamData && isLivestreamClaim) {
+      setWaitForFile(true);
       setFileSelectSource(SOURCE_SELECT);
     } else if (isLivestreamClaim) {
       setFileSelectSource(SOURCE_NONE);
@@ -157,12 +161,13 @@ function PublishFile(props: Props) {
   };
   // update remoteUrl when replay selected
   useEffect(() => {
-    if (selectedFileIndex !== null) {
+    const livestreamData = JSON.parse(livestreamDataStr);
+    if (selectedFileIndex !== null && livestreamData && livestreamData.length) {
       updatePublishForm({
         remoteFileUrl: normalizeUrlForProtocol(livestreamData[selectedFileIndex].data.fileLocation),
       });
     }
-  }, [selectedFileIndex, updatePublishForm]);
+  }, [selectedFileIndex, updatePublishForm, livestreamDataStr]);
 
   useEffect(() => {
     if (!filePath || filePath === '') {
@@ -320,6 +325,7 @@ function PublishFile(props: Props) {
       }
     }
     setFileSelectSource(source);
+    setWaitForFile(source !== SOURCE_NONE);
   }
 
   function handleTitleChange(event) {
diff --git a/ui/component/publishForm/index.js b/ui/component/publishForm/index.js
index 102738c87..0f22b8381 100644
--- a/ui/component/publishForm/index.js
+++ b/ui/component/publishForm/index.js
@@ -14,6 +14,7 @@ import {
   SETTINGS,
   selectMyChannelClaims,
   makeSelectClaimIsStreamPlaceholder,
+  makeSelectPublishFormValue,
 } from 'lbry-redux';
 import * as RENDER_MODES from 'constants/file_render_modes';
 import { doPublishDesktop } from 'redux/actions/publish';
@@ -45,6 +46,8 @@ const select = (state) => {
     // If I clicked the "edit" button, have I changed the uri?
     // Need this to make it easier to find the source on previously published content
     myClaimForUri,
+    filePath: makeSelectPublishFormValue('filePath')(state),
+    remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
     isStillEditing: selectIsStillEditing(state),
     isResolvingUri: selectIsResolvingPublishUris(state),
     totalRewardValue: selectUnclaimedRewardValue(state),
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index b4eabe2b6..c4b69efa1 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -9,7 +9,8 @@
  */
 
 import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
-import React, { useEffect } from 'react';
+import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
+import React, { useEffect, useState } from 'react';
 import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES, Lbry } from 'lbry-redux';
 import Button from 'component/button';
 import ChannelSelect from 'component/channelSelector';
@@ -87,6 +88,7 @@ type Props = {
   isLivestreamClaim: boolean,
   isPostClaim: boolean,
   permanentUrl: ?string,
+  remoteUrl: ?string,
 };
 
 function PublishForm(props: Props) {
@@ -122,6 +124,7 @@ function PublishForm(props: Props) {
     isLivestreamClaim,
     isPostClaim,
     permanentUrl,
+    remoteUrl,
   } = props;
 
   const { replace, location } = useHistory();
@@ -189,8 +192,9 @@ function PublishForm(props: Props) {
   const [fileEdited, setFileEdited] = React.useState(false);
   const [prevFileText, setPrevFileText] = React.useState('');
 
+  const [waitForFile, setWaitForFile] = useState(false);
   const [livestreamData, setLivestreamData] = React.useState([]);
-  const [signedMessage, setSignedMessage] = React.useState({});
+  const [signedMessage, setSignedMessage] = React.useState({ signature: undefined, signing_ts: undefined });
   const signedMessageStr = JSON.stringify(signedMessage);
   const TAGS_LIMIT = 5;
   const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
@@ -208,6 +212,7 @@ function PublishForm(props: Props) {
 
   const nameEdited = isStillEditing && name !== prevName;
 
+  const waitingForFile = waitForFile && !remoteUrl && !filePath;
   // If they are editing, they don't need a new file chosen
   const formValidLessFile =
     name &&
@@ -222,8 +227,8 @@ function PublishForm(props: Props) {
 
   const formValid = isOverwritingExistingClaim
     ? false
-    : editingURI && !filePath
-    ? isStillEditing && formValidLessFile
+    : editingURI && !filePath // if we're editing we don't need a file
+    ? isStillEditing && formValidLessFile && !waitingForFile
     : formValidLessFile;
 
   const [previewing, setPreviewing] = React.useState(false);
@@ -258,10 +263,9 @@ function PublishForm(props: Props) {
   }, [modal]);
 
   // move this to lbryinc OR to a file under ui, and/or provide a standardized livestreaming config.
-  function checkLivestreams(channelId, signature, timestamp) {
-    // $FlowFixMe Bitwave's API can handle garbage
+  function fetchLivestreams(channelId, signature, timestamp) {
     setCheckingLivestreams(true);
-    fetch(`${BITWAVE_REPLAY_API}/${channelId}?signature=${signature}&signing_ts=${timestamp}`) // claimChannelId
+    fetch(`${BITWAVE_REPLAY_API}/${channelId}?signature=${signature || ''}&signing_ts=${timestamp || ''}`) // claimChannelId
       .then((res) => res.json())
       .then((res) => {
         if (!res || !res.data) {
@@ -279,7 +283,7 @@ function PublishForm(props: Props) {
   useEffect(() => {
     const signedMessage = JSON.parse(signedMessageStr);
     if (claimChannelId && isLivestreamClaim && signedMessage.signature) {
-      checkLivestreams(claimChannelId, signedMessage.signature, signedMessage.signing_ts);
+      fetchLivestreams(claimChannelId, signedMessage.signature, signedMessage.signing_ts);
     }
   }, [claimChannelId, isLivestreamClaim, signedMessageStr]);
 
@@ -544,8 +548,11 @@ function PublishForm(props: Props) {
         setPrevFileText={setPrevFileText}
         livestreamData={livestreamData}
         subtitle={customSubtitle}
+        setWaitForFile={setWaitForFile}
         isCheckingLivestreams={isCheckingLivestreams}
-        checkLivestreams={checkLivestreams}
+        checkLivestreams={(claimChannelId, signature = signedMessage.signature, ts = signedMessage.signing_ts) =>
+          fetchLivestreams(claimChannelId, signature, ts)
+        }
         header={
           <>
             {AVAILABLE_MODES.map((modeName) => (
@@ -619,7 +626,7 @@ function PublishForm(props: Props) {
         </div>
         <p className="help">
           {!formDisabled && !formValid ? (
-            <PublishFormErrors mode={mode} />
+            <PublishFormErrors mode={mode} waitForFile={waitingForFile} />
           ) : (
             <I18nMessage
               tokens={{
diff --git a/ui/component/publishFormErrors/view.jsx b/ui/component/publishFormErrors/view.jsx
index bce5c8a4f..9445b79eb 100644
--- a/ui/component/publishFormErrors/view.jsx
+++ b/ui/component/publishFormErrors/view.jsx
@@ -12,14 +12,26 @@ type Props = {
   filePath: ?string,
   isStillEditing: boolean,
   uploadThumbnailStatus: string,
+  waitForFile: boolean,
 };
 
 function PublishFormErrors(props: Props) {
-  const { name, title, bid, bidError, editingURI, filePath, isStillEditing, uploadThumbnailStatus } = props;
+  const {
+    name,
+    title,
+    bid,
+    bidError,
+    editingURI,
+    filePath,
+    isStillEditing,
+    uploadThumbnailStatus,
+    waitForFile,
+  } = props;
   // These are extra help
   // If there is an error it will be presented as an inline error as well
   return (
     <div className="error__text">
+      {waitForFile && <div>{__('Choose a replay file, or select None')}</div>}
       {!title && <div>{__('A title is required')}</div>}
       {!name && <div>{__('A URL is required')}</div>}
       {!isNameValid(name, false) && INVALID_NAME_ERROR}
-- 
2.45.2


From eb520c8b526d139b4f506ddee2528f1668246d1b Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 13 Apr 2021 14:56:44 -0400
Subject: [PATCH 08/10] fix check livestreams results

---
 ui/component/publishFile/view.jsx | 14 ++++++++++----
 ui/component/publishForm/view.jsx |  6 +++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx
index 7417ffdb4..f4c3c0b26 100644
--- a/ui/component/publishFile/view.jsx
+++ b/ui/component/publishFile/view.jsx
@@ -46,7 +46,9 @@ type Props = {
   header: Node,
   livestreamData: LivestreamReplayData,
   isLivestreamClaim: boolean,
-  checkLivestreams: () => void,
+  checkLivestreams: (string, ?string, ?string) => void,
+  channelId: string,
+  channelSignature: { signature?: string, signing_ts?: string },
   isCheckingLivestreams: boolean,
   setWaitForFile: (boolean) => void,
 };
@@ -78,6 +80,8 @@ function PublishFile(props: Props) {
     isLivestreamClaim,
     subtitle,
     checkLivestreams,
+    channelId,
+    channelSignature,
     isCheckingLivestreams,
     setWaitForFile,
   } = props;
@@ -496,7 +500,9 @@ function PublishFile(props: Props) {
                       label={__('Check for Replays')}
                       disabled={isCheckingLivestreams}
                       icon={ICONS.REFRESH}
-                      onClick={() => checkLivestreams()}
+                      onClick={() =>
+                        checkLivestreams(channelId, channelSignature.signature, channelSignature.signing_ts)
+                      }
                     />
                   )}
                 </div>
@@ -517,7 +523,7 @@ function PublishFile(props: Props) {
                 {getUploadMessage()}
               </>
             )}
-            {fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && (
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && !isCheckingLivestreams && (
               <>
                 <fieldset-section>
                   <label>{__('Select Replay')}</label>
@@ -596,7 +602,7 @@ function PublishFile(props: Props) {
                 <Empty text={__('No replays found.')} />
               </div>
             )}
-            {fileSelectSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && isCheckingLivestreams && (
+            {fileSelectSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
               <div className="main--empty empty">
                 <Spinner small />
               </div>
diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index c4b69efa1..537a30e0a 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -550,9 +550,9 @@ function PublishForm(props: Props) {
         subtitle={customSubtitle}
         setWaitForFile={setWaitForFile}
         isCheckingLivestreams={isCheckingLivestreams}
-        checkLivestreams={(claimChannelId, signature = signedMessage.signature, ts = signedMessage.signing_ts) =>
-          fetchLivestreams(claimChannelId, signature, ts)
-        }
+        checkLivestreams={fetchLivestreams}
+        channelId={claimChannelId}
+        channelSignature={signedMessage}
         header={
           <>
             {AVAILABLE_MODES.map((modeName) => (
-- 
2.45.2


From 0aba8cc362eaa7a560764bc6a9bd4a7a63e56b4d Mon Sep 17 00:00:00 2001
From: zeppi <jessopb@gmail.com>
Date: Tue, 13 Apr 2021 16:36:11 -0400
Subject: [PATCH 09/10] redirect?

---
 ui/redux/actions/publish.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/ui/redux/actions/publish.js b/ui/redux/actions/publish.js
index 1c79f84df..e74f5bd02 100644
--- a/ui/redux/actions/publish.js
+++ b/ui/redux/actions/publish.js
@@ -29,9 +29,10 @@ export const doPublishDesktop = (filePath: string, preview?: boolean) => (dispat
   const noFileParam = !filePath || filePath === NO_FILE;
   const state = getState();
   const editingUri = makeSelectPublishFormValue('editingURI')(state) || '';
+  const remoteUrl = makeSelectPublishFormValue('remoteFileUrl')(state);
   const claim = makeSelectClaimForUri(editingUri)(state) || {};
   const hasSourceFile = claim.value && claim.value.source;
-  const redirectToLivestream = noFileParam && !hasSourceFile;
+  const redirectToLivestream = noFileParam && !hasSourceFile && !remoteUrl;
 
   const publishSuccess = (successResponse, lbryFirstError) => {
     const state = getState();
-- 
2.45.2


From 846be1963ec07fc10bea5c87378cd152d30bc665 Mon Sep 17 00:00:00 2001
From: Thomas Zarebczan <thomas.zarebczan@gmail.com>
Date: Tue, 13 Apr 2021 23:37:58 -0400
Subject: [PATCH 10/10] Update live stream FAQ

fix
---
 ui/component/publishForm/view.jsx |  6 +++---
 ui/page/livestreamSetup/view.jsx  | 23 +++++++++--------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/ui/component/publishForm/view.jsx b/ui/component/publishForm/view.jsx
index 537a30e0a..67aadc6da 100644
--- a/ui/component/publishForm/view.jsx
+++ b/ui/component/publishForm/view.jsx
@@ -9,7 +9,6 @@
  */
 
 import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE, CHANNEL_STAKED_LEVEL_LIVESTREAM } from 'config';
-import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
 import React, { useEffect, useState } from 'react';
 import { buildURI, isURIValid, isNameValid, THUMBNAIL_STATUSES, Lbry } from 'lbry-redux';
 import Button from 'component/button';
@@ -131,7 +130,8 @@ function PublishForm(props: Props) {
   const urlParams = new URLSearchParams(location.search);
   const TYPE_PARAM = 'type';
   const uploadType = urlParams.get(TYPE_PARAM);
-  const enableLivestream = ENABLE_NO_SOURCE_CLAIMS  &&
+  const enableLivestream =
+    ENABLE_NO_SOURCE_CLAIMS &&
     user &&
     !user.odysee_live_disabled &&
     (activeChannelStakedLevel >= CHANNEL_STAKED_LEVEL_LIVESTREAM || user.odysee_live_enabled);
@@ -413,7 +413,7 @@ function PublishForm(props: Props) {
       return;
     }
     // LiveStream publish
-    if (_uploadType === PUBLISH_MODES.LIVESTREAM.toLowerCase() && livestreamEnabled) {
+    if (_uploadType === PUBLISH_MODES.LIVESTREAM.toLowerCase() && enableLivestream) {
       if (enableLivestream) {
         setMode(PUBLISH_MODES.LIVESTREAM);
       } else {
diff --git a/ui/page/livestreamSetup/view.jsx b/ui/page/livestreamSetup/view.jsx
index a4cad24a5..d08e7b9c4 100644
--- a/ui/page/livestreamSetup/view.jsx
+++ b/ui/page/livestreamSetup/view.jsx
@@ -55,9 +55,11 @@ export default function LivestreamSetupPage(props: Props) {
   const helpText = (
     <div className="section__subtitle">
       <p>
-        {__(`Create a Livestream by first submitting your Livestream details and waiting for approval confirmation.`)}{' '}
         {__(
-          `The livestream will not be visible on your channel until you are live, but you can share the URL in advance.`
+          `Create a Livestream by first submitting your livestream details and waiting for approval confirmation. This can be done well in advance and will take a few minutes.`
+        )}{' '}
+        {__(
+          `The livestream will not be visible on your channel page until you are live, but you can share the URL in advance.`
         )}{' '}
         {__(
           `Once the your livestream is confirmed, configure your streaming software (OBS, Restream, etc) and input the server URL along with the stream key in it.`
@@ -73,25 +75,18 @@ export default function LivestreamSetupPage(props: Props) {
         <li>{__(`Tune: Zerolatency`)}</li>
       </ul>
       <p>
-        {__(
-          `If using other livestreaming software, make sure the bitrate is below 5000 kbps or the stream will not work.`
-        )}
+        {__(`If using other streaming software, make sure the bitrate is below 4500 kbps or the stream will not work.`)}
       </p>
       <p>
-        {__(
-          `Please note: You'll need to record your own stream through your software if you plan to share it afterward. You can also delete it if you prefer not to upload the copy.`
-        )}
+        {__(`After your stream:
+      Click the Update button on the content page. This will allow you to select a replay or upload your own edited MP4. Replays are limited to 4 hours and may take a few minutes to show (use the Check For Replays button).`)}
       </p>
+      <p>{__(`Click Save, then confirm, and you are done!`)}</p>
       <p>
         {__(
-          `In the near future, this manual step will be removed and you will be able to share the stream right after its finished without needing to record it yourself.`
+          `Note: If you don't plan on publishing your replay, you'll want to delete your livestream and then start with a fresh one next time.`
         )}
       </p>
-      <p>
-        {__(`After your livestream:
-      Click the Publish Replay button. This will allow you to edit details before sharing on Odysee. Be sure to select the saved mp4 file you recorded.`)}
-      </p>
-      <p>{__(`Click Save and you are done!`)}</p>
     </div>
   );
 
-- 
2.45.2