Publish revamp (Part 2) (#1781)

* Move menu entries & add publish buttons

* Save

* Separate publish forms

* Make new header dynamic for all screen sizes

* Save some livestream creation changes

* Save more livestream changes

* Save

* Change publish folder structure

* Update paths

* Change position of form elements. Again.

* Move, add & delete form fields

* Clean post form

* Clean post form even more

* Clean publish post component

* Save

* Add custom post form state

* Move price to additional options

* Adjust livestream form

* Adjust headers & titles

* Update key section

* Adjust active header icons

* Adjust toggle menu

* Save

* Adjust active button style

* Change active button selector in header

* Fix header menu links

* Move price section in post form

* Adjust instruction text color

* Adjust replay table

* Revert changes & adjust tag section

* Make more form elements dynamic

* Finalize additional options section

* Update post form

* Set mode in upload form

* Update livestream form

* Add clear button

* Make clear button dynamic

* Set upload mode

* Remove new button

* Clean upload form

* Show disabled key on livestream form

* Remove old key section

* Update channel selector for publish forms

* Add updated channel selector to publish forms

* Add mobile links

* Update mobile header

* Adjust channel selector on mobile

* Adjust livestream form on mobile

* Adjust edit links for livestreams

* Adjust edit links for posts

* Adjust more edit links

* Adjust channel selector

* Update disabled in livestream form

* Add missing change

* Fix sign out function

* Save

* Adjust livestream page on mobile

* Adjust tags section on upload page on mobile

* Adjust publish links in left navigation on mobile

* Add images to accepted filetypes on upload page

* Add autofocus to input fields

* Add autofocus to all publish forms

* Save

* Ignore thumbnail api status

* Put active thumbnail upload label in card

* Fix crashes

* Fix flow

* Fix licence fields

* Adjust wallet in header on smaller screens

* Fix channel selector line break on small screens

* Fix border radius for some buttons

* PublishReleaseDate: fix initial value to reflect what's actually in Redux

'undefined' is a valid value that means "use publish time", but the GUI incorrectly starts off by locking to the mounted timestamp.

* Add and hide channel selector on livestream publish page

* Fix channel selector on livestream setup page

* Fix gif aspect ratio in channel selector

* Make layout more dynamic

* Fix some edit redirects

* Save

* Clean publishFile

* Fix build errors

* Fix more build errors in profile menu button

* Remove console logs

* Remove post form reducer

* Limit publish title length to 200 characters

* Remove totalRewardValue from livestreamCreate index

* Remove console log

* Add tooltip to replay refresh button

* Remove scrollToTop function from publish forms

* Adjust emty wallet value trigger and add error to livestream publish page

* Disable some tabs in edit mode in livestream form

* Fix maxLength typo

* Remove 'as' label

* Remove selectPublishFormValues

* Reenable setup tab

* Remove inactive line

* Remove another inactive line

* Remove flow fix

* Update label switch logic in confirmation modal

Adjust gif margin

Adjust gif margin

Remove navigate from edit link

Remove manual updateLabels execution on init

Remove editLabel function

Fix labels in publish modal

Adjust post livestream setup redirect

Remove setOverMaxBitrate from livestream form

Clean livestream publish

More cleanup

Update post livestream creation redirect

Bring back edit tab for livestreams

Update edit tab

Reset form on livestream edit => clear

Update label switch logic

Readjust channel selector position on mobile

* Make some space adjustments for mobile

Update livestream edit page on mobile

Update action label on publish forms in edit mode

* Hide replay options in edit mode in livestream form

* Update label switch logic in confirmation modal

Adjust gif margin

Adjust gif margin

Remove navigate from edit link

Remove manual updateLabels execution on init

Remove editLabel function

Fix labels in publish modal

Adjust post livestream setup redirect

Remove setOverMaxBitrate from livestream form

Clean livestream publish

More cleanup

Update post livestream creation redirect

Bring back edit tab for livestreams

Update edit tab

Reset form on livestream edit => clear

Update label switch logic

Readjust channel selector position on mobile
Make some space adjustments for mobile

Update livestream edit page on mobile

Update action label on publish forms in edit mode
Hide replay options in edit mode in livestream form

* Make form titles dynamic

* Remove spinner on livestream form

* Remove console log

* Fix double history push

* Fix thumbnail status on post form

* Update error message style

* Handle publish error button behavior

* Clean code

* Fix scheduling & date picker

* Fix calendar overlap

* Add replay selector to livestream claim edit form

* Clean code

* Disable autocomplete

* Show replays in edit & replay tab

* Redesign replay picker

* Fix design details

* Save dynamic replay picker

* Fix autoComplete typo

* Change label text

* Add upload to livestream replay form

* Fix scss structure

* Add comunity guideline link to publish forms

* Fix error

* Fix selectThumbnail index

* Reset form values on replay source change

* Add replay redirect to upload page

* Fix publishError state change

* Remove label effect from publish confirmation modal

* Update labels in publish confirmation modal

* Add ? to chaptersButton

* Remove doPrepareEdit({ name })

* Bring upload redirect back

* Adjust redirects

* Save

* Update edit redirects

* Revert scheduling options

* Replace checkboxes for replays with radio

* Update form on source change

* Rearrange entries in mobile navigation

* Change key position on livestream setup page

* Change label for livestream update without replay change

* Adjust margin below label

Co-authored-by: infinite-persistence <inf.persistence@gmail.com>

ui/component/channelSelector/view.jsx

@@ -26,8 +26,11 @@ type Props = {
   storeSelection?: boolean,
   doSetDefaultChannel: (claimId: string) => void,
   isHeaderMenu?: boolean,
+  isPublishMenu?: boolean,
+  isTabHeader?: boolean,
   autoSet?: boolean,
   channelToSet?: string,
+  disabled?: boolean,
 };
 
 export default function ChannelSelector(props: Props) {
@@ -43,8 +46,11 @@ export default function ChannelSelector(props: Props) {
     storeSelection,
     doSetDefaultChannel,
     isHeaderMenu,
+    isPublishMenu,
+    isTabHeader,
     autoSet,
     channelToSet,
+    disabled,
   } = props;
 
   const hideAnon = Boolean(props.hideAnon || storeSelection);
@@ -80,7 +86,13 @@ export default function ChannelSelector(props: Props) {
   }, []);
 
   return (
-    <div className="channel__selector">
+    <div
+      className={classnames('channel__selector', {
+        'channel__selector--publish': isPublishMenu,
+        'channel__selector--tabHeader': isTabHeader,
+        disabled: disabled,
+      })}
+    >
       <Menu>
         {isHeaderMenu ? (
           <MenuButton className="menu__link">
@@ -99,12 +111,19 @@ export default function ChannelSelector(props: Props) {
                 isSelected
                 claimsByUri={claimsByUri}
                 doFetchUserMemberships={doFetchUserMemberships}
+                isPublishMenu={isPublishMenu}
+                isTabHeader={isTabHeader}
               />
             )}
           </MenuButton>
         )}
 
-        <MenuList className="menu__list channel__list">
+        <MenuList
+          className={classnames('menu__list channel__list', {
+            'channel__list--publish': isPublishMenu,
+            'channel__list--tabHeader': isTabHeader,
+          })}
+        >
           {channels &&
             channels.map((channel) => (
               <MenuItem key={channel.permanent_url} onSelect={() => handleChannelSelect(channel)}>
@@ -113,6 +132,8 @@ export default function ChannelSelector(props: Props) {
                   uri={channel.permanent_url}
                   claimsByUri={claimsByUri}
                   doFetchUserMemberships={doFetchUserMemberships}
+                  isPublishMenu={isPublishMenu}
+                  isTabHeader={isTabHeader}
                 />
               </MenuItem>
             ))}
@@ -138,6 +159,9 @@ type ListItemProps = {
   isSelected?: boolean,
   claimsByUri: { [string]: any },
   doFetchUserMemberships: (claimIdCsv: string) => void,
+  odyseeMembershipByUri: (uri: string) => string,
+  isPublishMenu?: boolean,
+  isTabHeader?: boolean,
 };
 
 function ChannelListItem(props: ListItemProps) {
@@ -147,7 +171,11 @@ function ChannelListItem(props: ListItemProps) {
   useGetUserMemberships(shouldFetchUserMemberships, [uri], claimsByUri, doFetchUserMemberships, [uri]);
 
   return (
-    <div className={classnames('channel__list-item', { 'channel__list-item--selected': isSelected })}>
+    <div
+      className={classnames('channel__list-item', {
+        'channel__list-item--selected': isSelected,
+      })}
+    >
       <ChannelThumbnail uri={uri} hideStakedIndicator xsmall noLazyLoad />
       <ChannelTitle uri={uri} />
       <PremiumBadge uri={uri} />

ui/component/claimMenuList/index.js

@@ -31,13 +31,15 @@ import { doToast } from 'redux/actions/notifications';
 import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
-import { selectListShuffle } from 'redux/selectors/content';
+import { selectListShuffle, makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import { doToggleLoopList, doToggleShuffleList } from 'redux/actions/content';
+import { isStreamPlaceholderClaim } from 'util/claim';
+import * as RENDER_MODES from 'constants/file_render_modes';
 import ClaimPreview from './view';
-import fs from 'fs';
 
 const select = (state, props) => {
-  const claim = selectClaimForUri(state, props.uri, false);
+  const { uri } = props;
+  const claim = selectClaimForUri(state, uri, false);
   const collectionId = props.collectionId;
   const repostedClaim = claim && claim.reposted_claim;
   const contentClaim = repostedClaim || claim;
@@ -49,6 +51,9 @@ const select = (state, props) => {
   const playNextUri = shuffle && shuffle[0];
   const lastUsedCollectionId = selectLastUsedCollection(state);
   const lastUsedCollection = makeSelectCollectionForId(lastUsedCollectionId)(state);
+  const isLivestreamClaim = isStreamPlaceholderClaim(claim);
+  const permanentUrl = (claim && claim.permanent_url) || '';
+  const isPostClaim = makeSelectFileRenderModeForUri(permanentUrl)(state) === RENDER_MODES.MARKDOWN;
 
   return {
     claim,
@@ -56,6 +61,8 @@ const select = (state, props) => {
     contentClaim,
     contentSigningChannel,
     contentChannelUri,
+    isLivestreamClaim,
+    isPostClaim,
     claimIsMine: selectClaimIsMine(state, claim),
     hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(
       COLLECTIONS_CONSTS.WATCH_LATER_ID,
@@ -89,7 +96,7 @@ const select = (state, props) => {
 };
 
 const perform = (dispatch) => ({
-  prepareEdit: (publishData, uri, fileInfo) => dispatch(doPrepareEdit(publishData, uri, fileInfo, fs)),
+  prepareEdit: (publishData, uri, claimType) => dispatch(doPrepareEdit(publishData, uri, claimType)),
   doToast: (props) => dispatch(doToast(props)),
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
   doChannelMute: (channelUri) => dispatch(doChannelMute(channelUri)),

ui/component/claimMenuList/view.jsx

@@ -53,11 +53,13 @@ type Props = {
   claimInCollection: boolean,
   collectionId: string,
   isMyCollection: boolean,
+  isLivestreamClaim?: boolean,
+  isPostClaim?: boolean,
   fypId?: string,
   doToast: ({ message: string, isError?: boolean }) => void,
   claimIsMine: boolean,
   fileInfo: FileListItem,
-  prepareEdit: ({}, string, {}) => void,
+  prepareEdit: ({}, string, string) => void,
   isSubscribed: boolean,
   doChannelSubscribe: (SubscriptionArgs) => void,
   doChannelUnsubscribe: (SubscriptionArgs) => void,
@@ -99,6 +101,8 @@ function ClaimMenuList(props: Props) {
     hasClaimInFavorites,
     collectionId,
     isMyCollection,
+    isLivestreamClaim,
+    isPostClaim,
     fypId,
     doToast,
     claimIsMine,
@@ -119,6 +123,7 @@ function ClaimMenuList(props: Props) {
     lastUsedCollectionIsNotBuiltin,
     doRemovePersonalRecommendation,
   } = props;
+
   const [doShuffle, setDoShuffle] = React.useState(false);
   const incognitoClaim = contentChannelUri && !contentChannelUri.includes('@');
   const isChannel = !incognitoClaim && !contentSigningChannel;
@@ -133,6 +138,7 @@ function ClaimMenuList(props: Props) {
     : __('Follow');
 
   const { push, replace } = useHistory();
+  const claimType = isLivestreamClaim ? 'livestream' : isPostClaim ? 'post' : 'upload';
 
   const fetchItems = React.useCallback(() => {
     if (collectionId) {
@@ -221,8 +227,7 @@ function ClaimMenuList(props: Props) {
       }
       const editUri = buildURI(uriObject);
 
-      push(`/$/${PAGES.UPLOAD}`);
-      prepareEdit(claim, editUri, fileInfo);
+      prepareEdit(claim, editUri, claimType);
     } else {
       const channelUrl = claim.name + ':' + claim.claim_id;
       push(`/${channelUrl}?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`);

ui/component/claimPreview/view.jsx

@@ -27,7 +27,7 @@ import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
 import ClaimRepostAuthor from 'component/claimRepostAuthor';
 import FileDownloadLink from 'component/fileDownloadLink';
 import FileWatchLaterLink from 'component/fileWatchLaterLink';
-import PublishPending from 'component/publishPending';
+import PublishPending from 'component/publish/shared/publishPending';
 import ClaimMenuList from 'component/claimMenuList';
 import ClaimPreviewReset from 'component/claimPreviewReset';
 import ClaimPreviewLoading from './claim-preview-loading';

ui/component/claimPreviewSubtitle/index.js

@@ -2,7 +2,8 @@ import * as PAGES from 'constants/pages';
 import { connect } from 'react-redux';
 import { selectClaimForUri, makeSelectClaimIsPending } from 'redux/selectors/claims';
 import { selectLanguage } from 'redux/selectors/settings';
-import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+// import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+import { doClearPublish } from 'redux/actions/publish';
 import { push } from 'connected-react-router';
 import ClaimPreviewSubtitle from './view';
 import { doFetchSubCount, selectSubCountForUri } from 'lbryinc';
@@ -24,7 +25,7 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
   beginPublish: (name) => {
     dispatch(doClearPublish());
-    dispatch(doPrepareEdit({ name }));
+    // dispatch(doPrepareEdit({ name }));
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
   fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),

ui/component/common/form-components/form-field.jsx

@@ -126,6 +126,7 @@ export class FormField extends React.PureComponent<Props, State> {
       render,
       handleTip,
       handleSubmit,
+      max,
       ...inputProps
     } = this.props;
 
@@ -368,12 +369,27 @@ export class FormField extends React.PureComponent<Props, State> {
           </FormFieldWrapper>
         );
       default:
-        const inputElementProps = { type, name, ref: this.input, ...inputProps };
+        const inputElementProps = { type, name, maxLength: max, ref: this.input, ...inputProps };
 
         return (
           <FormFieldWrapper {...wrapperProps}>
             <fieldset-section>
-              {(label || errorMessage) && <Label {...labelProps} errorMessage={errorMessage} />}
+              {(label || errorMessage) && (
+                <div>
+                  <Label {...labelProps} errorMessage={errorMessage} />
+                  {inputElementProps.maxLength && inputElementProps.value && (
+                    <label
+                      className={
+                        Number(inputElementProps.maxLength) - String(inputElementProps.value).length > 0
+                          ? 'input-max-counter'
+                          : 'input-max-counter-error'
+                      }
+                    >
+                      {Number(inputElementProps.maxLength) - String(inputElementProps.value).length}
+                    </label>
+                  )}
+                </div>
+              )}
 
               {prefix && <label htmlFor={name}>{prefix}</label>}
 
@@ -383,7 +399,9 @@ export class FormField extends React.PureComponent<Props, State> {
                   {inputButton}
                 </input-submit>
               ) : (
-                <input {...inputElementProps} />
+                <>
+                  <input {...inputElementProps} />
+                </>
               )}
             </fieldset-section>
           </FormFieldWrapper>

ui/component/fileActions/index.js

@@ -17,11 +17,14 @@ import FileActions from './view';
 import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import { DISABLE_DOWNLOAD_BUTTON_TAG } from 'constants/tags';
 import { isStreamPlaceholderClaim } from 'util/claim';
+import * as RENDER_MODES from 'constants/file_render_modes';
 
 const select = (state, props) => {
   const { uri } = props;
 
   const claim = selectClaimForUri(state, uri);
+  const permanentUrl = (claim && claim.permanent_url) || '';
+  const isPostClaim = makeSelectFileRenderModeForUri(permanentUrl)(state) === RENDER_MODES.MARKDOWN;
 
   return {
     claim,
@@ -30,6 +33,7 @@ const select = (state, props) => {
     costInfo: selectCostInfoForUri(state, uri),
     hasChannels: selectHasChannels(state),
     isLivestreamClaim: isStreamPlaceholderClaim(claim),
+    isPostClaim,
     streamingUrl: makeSelectStreamingUrlForUri(uri)(state),
     disableDownloadButton: makeSelectTagInClaimOrChannelForUri(uri, DISABLE_DOWNLOAD_BUTTON_TAG)(state),
     isMature: selectClaimIsNsfwForUri(state, uri),

ui/component/fileActions/view.jsx

@@ -28,10 +28,11 @@ type Props = {
   costInfo: ?{ cost: number },
   hasChannels: boolean,
   isLivestreamClaim: boolean,
+  isPostClaim?: boolean,
   streamingUrl: ?string,
   disableDownloadButton: boolean,
   doOpenModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void,
-  doPrepareEdit: (claim: Claim, uri: string) => void,
+  doPrepareEdit: (claim: Claim, uri: string, claimType: string) => void,
   doToast: (data: { message: string }) => void,
   doDownloadUri: (uri: string) => void,
   isMature: boolean,
@@ -48,6 +49,7 @@ export default function FileActions(props: Props) {
     hasChannels,
     hideRepost,
     isLivestreamClaim,
+    isPostClaim,
     streamingUrl,
     disableDownloadButton,
     doOpenModal,
@@ -64,12 +66,12 @@ export default function FileActions(props: Props) {
   } = useHistory();
 
   const isMobile = useIsMobile();
-
   const [downloadClicked, setDownloadClicked] = React.useState(false);
 
   const { claim_id: claimId, signing_channel: signingChannel, value, meta: claimMeta } = claim;
   const channelName = signingChannel && signingChannel.name;
   const fileName = value && value.source && value.source.name;
+  const claimType = isLivestreamClaim ? 'livestream' : isPostClaim ? 'post' : 'upload';
 
   const webShareable = costInfo && costInfo.cost === 0 && RENDER_MODES.WEB_SHAREABLE_MODES.includes(renderMode);
   const urlParams = new URLSearchParams(search);
@@ -153,8 +155,7 @@ export default function FileActions(props: Props) {
                 className="button--file-action"
                 icon={ICONS.EDIT}
                 label={isLivestreamClaim ? __('Update or Publish Replay') : __('Edit')}
-                navigate={`/$/${PAGES.UPLOAD}`}
-                onClick={() => doPrepareEdit(claim, editUri)}
+                onClick={() => doPrepareEdit(claim, editUri, claimType)}
               />
             </div>
           </Tooltip>
@@ -201,7 +202,7 @@ export default function FileActions(props: Props) {
                     <MenuItem
                       className="comment__menu-option"
                       onSelect={() => {
-                        doPrepareEdit(claim, editUri);
+                        doPrepareEdit(claim, editUri, claimType);
                         push(`/$/${PAGES.UPLOAD}`);
                       }}
                     >

ui/component/headerMenuButtons/index.js

@@ -1,23 +1,14 @@
 import { connect } from 'react-redux';
-import { doSetClientSetting } from 'redux/actions/settings';
-import { selectClientSetting } from 'redux/selectors/settings';
-import * as SETTINGS from 'constants/settings';
 import HeaderMenuButtons from './view';
 import { selectUserVerifiedEmail, selectUser } from 'redux/selectors/user';
 import { doOpenModal } from 'redux/actions/app';
 
 const select = (state) => ({
   authenticated: selectUserVerifiedEmail(state),
-  automaticDarkModeEnabled: selectClientSetting(state, SETTINGS.AUTOMATIC_DARK_MODE_ENABLED),
-  currentTheme: selectClientSetting(state, SETTINGS.THEME),
   user: selectUser(state),
 });
 
 const perform = (dispatch) => ({
-  handleThemeToggle: (automaticDarkModeEnabled, currentTheme) => {
-    if (automaticDarkModeEnabled) dispatch(doSetClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false));
-    dispatch(doSetClientSetting(SETTINGS.THEME, currentTheme === 'dark' ? 'light' : 'dark', true));
-  },
   doOpenModal: (id, params) => dispatch(doOpenModal(id, params)),
 });
 

ui/component/headerMenuButtons/view.jsx

@@ -1,90 +1,55 @@
 // @flow
 import 'scss/component/_header.scss';
 
-import { ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS } from 'config';
-import { Menu, MenuList, MenuButton } from '@reach/menu-button';
+import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
 import { useHistory } from 'react-router';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
 import Button from 'component/button';
-import HeaderMenuLink from 'component/common/header-menu-link';
 import Icon from 'component/common/icon';
-import NotificationHeaderButton from 'component/headerNotificationButton';
 import React from 'react';
 import Tooltip from 'component/common/tooltip';
 
 type HeaderMenuButtonProps = {
   activeChannelStakedLevel: number,
   authenticated: boolean,
-  automaticDarkModeEnabled: boolean,
-  currentTheme: string,
   user: ?User,
-  handleThemeToggle: (boolean, string) => void,
   doOpenModal: (string, {}) => void,
 };
 
 export default function HeaderMenuButtons(props: HeaderMenuButtonProps) {
-  const { authenticated, automaticDarkModeEnabled, currentTheme, user, handleThemeToggle } = props;
+  const { authenticated, user } = props;
 
-  const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
   const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !user.odysee_live_disabled);
 
   const uploadProps = { requiresAuth: !authenticated };
   const { push } = useHistory();
 
-  return (
+  return authenticated ? (
     <div className="header__buttons">
-      <Menu>
-        <Tooltip title={__('Publish a file, or create a channel')}>
-          <MenuButton className="header__navigationItem--icon">
-            <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
-          </MenuButton>
+      <Tooltip title={__('Upload a file')}>
+        <Button className="header__navigationItem--icon" navigate={`/$/${PAGES.UPLOAD}`}>
+          <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
+        </Button>
+      </Tooltip>
+      {livestreamEnabled && (
+        <Tooltip title={__('Go live')}>
+          <Button className="header__navigationItem--icon" {...uploadProps} navigate={`/$/${PAGES.LIVESTREAM}`}>
+            <Icon size={18} icon={ICONS.VIDEO} aria-hidden />
+          </Button>
         </Tooltip>
-
-        <MenuList className="menu__list--header">
-          <HeaderMenuLink {...uploadProps} page={PAGES.UPLOAD} icon={ICONS.PUBLISH} name={__('Upload')} />
-          <HeaderMenuLink {...uploadProps} page={PAGES.CHANNEL_NEW} icon={ICONS.CHANNEL} name={__('New Channel')} />
-          <HeaderMenuLink
-            {...uploadProps}
-            page={PAGES.YOUTUBE_SYNC}
-            icon={ICONS.YOUTUBE}
-            name={__('Sync YouTube Channel')}
-          />
-          {livestreamEnabled && (
-            <HeaderMenuLink {...uploadProps} page={PAGES.LIVESTREAM} icon={ICONS.VIDEO} name={__('Go Live')} />
-          )}
-        </MenuList>
-      </Menu>
-
-      {!authenticated && (
-        <>
-          <Tooltip title={__('Settings')}>
-            <Button className="header__navigationItem--icon" onClick={() => push(`/$/${PAGES.SETTINGS}`)}>
-              <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
-            </Button>
-          </Tooltip>
-          <Tooltip title={__('Help')}>
-            <Button className="header__navigationItem--icon" onClick={() => push(`/$/${PAGES.HELP}`)}>
-              <Icon size={18} icon={ICONS.HELP} aria-hidden />
-            </Button>
-          </Tooltip>
-        </>
-      )}
-
-      {notificationsEnabled && <NotificationHeaderButton />}
-
-      {authenticated && (
-        <Menu>
-          <Tooltip title={currentTheme === 'light' ? __('Dark') : __('Light')}>
-            <Button
-              className="header__navigationItem--icon"
-              onClick={() => handleThemeToggle(automaticDarkModeEnabled, currentTheme)}
-            >
-              <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
-            </Button>
-          </Tooltip>
-        </Menu>
       )}
+      <Tooltip title={__('Post an article')}>
+        <Button className="header__navigationItem--icon" navigate={`/$/${PAGES.POST}`}>
+          <Icon size={18} icon={ICONS.POST} aria-hidden />
+        </Button>
+      </Tooltip>
     </div>
+  ) : (
+    <Tooltip title={__('Settings')}>
+      <Button className="header__navigationItem--icon" onClick={() => push(`/$/${PAGES.SETTINGS}`)}>
+        <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
+      </Button>
+    </Tooltip>
   );
 }

ui/component/headerNotificationButton/view.jsx

@@ -208,7 +208,7 @@ export default function NotificationHeaderButton(props: Props) {
 
         <ClickAwayListener onClickAway={handleClickAway}>
           <MuiMenu {...menuProps}>
-            <div className="menu__list--notifications-header" />
+            {/* <div className="menu__list--notifications-header" /> */}
             <div className="menu__list--notifications-list">
               {list.map((notification) => {
                 return menuEntry(notification);

ui/component/headerProfileMenuButton/index.js

@@ -2,18 +2,30 @@ import { connect } from 'react-redux';
 import { doSignOut } from 'redux/actions/app';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectMyChannelClaimIds } from 'redux/selectors/claims';
-import { selectUserEmail, selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectUser, selectUserEmail, selectUserVerifiedEmail } from 'redux/selectors/user';
+import { selectClientSetting } from 'redux/selectors/settings';
+import { doSetClientSetting } from 'redux/actions/settings';
+import * as SETTINGS from 'constants/settings';
+
 import HeaderProfileMenuButton from './view';
 
 const select = (state) => ({
+  currentTheme: selectClientSetting(state, SETTINGS.THEME),
+  automaticDarkModeEnabled: selectClientSetting(state, SETTINGS.AUTOMATIC_DARK_MODE_ENABLED),
+
+  user: selectUser(state),
   myChannelClaimIds: selectMyChannelClaimIds(state),
   activeChannelClaim: selectActiveChannelClaim(state),
   authenticated: selectUserVerifiedEmail(state),
   email: selectUserEmail(state),
 });
 
-const perform = {
-  signOut: doSignOut,
-};
+const perform = (dispatch) => ({
+  handleThemeToggle: (automaticDarkModeEnabled, currentTheme) => {
+    if (automaticDarkModeEnabled) dispatch(doSetClientSetting(SETTINGS.AUTOMATIC_DARK_MODE_ENABLED, false));
+    dispatch(doSetClientSetting(SETTINGS.THEME, currentTheme === 'dark' ? 'light' : 'dark', true));
+  },
+  signOut: () => dispatch(doSignOut()),
+});
 
 export default connect(select, perform)(HeaderProfileMenuButton);

ui/component/headerProfileMenuButton/view.jsx

@@ -4,6 +4,7 @@ import 'scss/component/_header.scss';
 // $FlowFixMe
 import { Global } from '@emotion/react';
 
+import { Menu } from '@reach/menu-button';
 import { Menu as MuiMenu, MenuItem as MuiMenuItem } from '@mui/material';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
@@ -16,8 +17,17 @@ import Skeleton from '@mui/material/Skeleton';
 import ChannelSelector from 'component/channelSelector';
 import Button from 'component/button';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
+import Tooltip from 'component/common/tooltip';
+import NotificationHeaderButton from 'component/headerNotificationButton';
+import { ENABLE_UI_NOTIFICATIONS } from 'config';
+import { useIsMobile } from 'effects/use-screensize';
 
 type HeaderMenuButtonProps = {
+  currentTheme: string,
+  automaticDarkModeEnabled: boolean,
+  handleThemeToggle: (boolean, string) => void,
+
+  user: ?User,
   myChannelClaimIds: ?Array<string>,
   activeChannelClaim: ?ChannelClaim,
   authenticated: boolean,
@@ -26,7 +36,22 @@ type HeaderMenuButtonProps = {
 };
 
 export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
-  const { myChannelClaimIds, activeChannelClaim, authenticated, email, signOut } = props;
+  const {
+    // Theme
+    currentTheme,
+    automaticDarkModeEnabled,
+    handleThemeToggle,
+
+    // User
+    user,
+    myChannelClaimIds,
+    activeChannelClaim,
+    authenticated,
+    email,
+    signOut,
+  } = props;
+
+  const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
 
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [clicked, setClicked] = React.useState(false);
@@ -38,6 +63,9 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
   // activeChannel will be: undefined = fetching, null = nothing, or { channel claim }
   const noActiveChannel = activeChannelUrl === null;
   const pendingChannelFetch = !noActiveChannel && myChannelClaimIds === undefined;
+  const uploadProps = { requiresAuth: !authenticated };
+
+  const isMobile = useIsMobile();
 
   const handleClickAway = () => {
     if (!clicked) {
@@ -81,6 +109,20 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
       )}
 
       <div className="header__buttons">
+        {authenticated && !isMobile && (
+          <Menu>
+            <Tooltip title={currentTheme === 'light' ? __('Dark') : __('Light')}>
+              <Button
+                className="header__navigationItem--icon"
+                onClick={() => handleThemeToggle(automaticDarkModeEnabled, currentTheme)}
+              >
+                <Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
+              </Button>
+            </Tooltip>
+          </Menu>
+        )}
+        {notificationsEnabled && !isMobile && <NotificationHeaderButton />}
+
         {pendingChannelFetch ? (
           <Skeleton variant="circular" animation="wave" className="header__navigationItem--iconSkeleton" />
         ) : (
@@ -96,7 +138,7 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
             })}
           >
             {activeChannelUrl ? (
-              <ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad showMemberBadge />
+              <ChannelThumbnail uri={activeChannelUrl} hideTooltip small noLazyLoad />
             ) : (
               <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
             )}
@@ -116,6 +158,13 @@ export default function HeaderProfileMenuButton(props: HeaderMenuButtonProps) {
                 icon={ICONS.ANALYTICS}
                 name={__('Creator Analytics')}
               />
+              <HeaderMenuLink
+                useMui
+                {...uploadProps}
+                page={PAGES.YOUTUBE_SYNC}
+                icon={ICONS.YOUTUBE}
+                name={__('Sync YouTube Channel')}
+              />
 
               <hr className="menu__separator" />
               <HeaderMenuLink useMui page={PAGES.REWARDS} icon={ICONS.REWARDS} name={__('Rewards')} />

ui/component/postEditor/view.jsx

@@ -14,7 +14,7 @@ type Props = {
   fetchStreamingUrl: (string) => void,
   setPrevFileText: (string) => void,
   updatePublishForm: ({}) => void,
-  setCurrentFileType: (string) => void,
+  // setCurrentFileType: (string) => void,
 };
 
 function PostEditor(props: Props) {
@@ -30,7 +30,7 @@ function PostEditor(props: Props) {
     setPrevFileText,
     fetchStreamingUrl,
     updatePublishForm,
-    setCurrentFileType,
+    // setCurrentFileType,
   } = props;
 
   const editing = isStillEditing && uri;
@@ -82,7 +82,7 @@ function PostEditor(props: Props) {
       // Editing same file (previously published)
       // User can use a different file to replace the content
       if (!ready && !filePath && !fileText && streamingUrl && fileMimeType === 'text/markdown') {
-        setCurrentFileType(fileMimeType);
+        // setCurrentFileType(fileMimeType);
         updateEditorText(streamingUrl);
       }
     }
@@ -95,7 +95,7 @@ function PostEditor(props: Props) {
     streamingUrl,
     setPrevFileText,
     updatePublishForm,
-    setCurrentFileType,
+    // setCurrentFileType,
   ]);
 
   return (

ui/component/publish/livestream/livestreamForm/index.js

@@ -1,18 +1,10 @@
 import { connect } from 'react-redux';
-import {
-  doResetThumbnailStatus,
-  doClearPublish,
-  doUpdatePublishForm,
-  doPrepareEdit,
-  doPublishDesktop,
-} from 'redux/actions/publish';
+import { doResetThumbnailStatus, doClearPublish, doUpdatePublishForm, doPublishDesktop } from 'redux/actions/publish';
 import { doResolveUri, doCheckPublishNameAvailability } from 'redux/actions/claims';
 import {
-  selectTakeOverAmount,
   selectPublishFormValues,
   selectIsStillEditing,
   makeSelectPublishFormValue,
-  selectIsResolvingPublishUris,
   selectMyClaimForUri,
 } from 'redux/selectors/publish';
 import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
@@ -28,7 +20,8 @@ import { selectModal, selectActiveChannelClaim, selectIncognito } from 'redux/se
 import { selectClientSetting } from 'redux/selectors/settings';
 import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
 import { selectUser } from 'redux/selectors/user';
-import PublishForm from './view';
+import { selectBalance } from 'redux/selectors/wallet';
+import LivestreamForm from './view';
 
 const select = (state) => {
   const myClaimForUri = selectMyClaimForUri(state);
@@ -39,7 +32,6 @@ const select = (state) => {
     ...selectPublishFormValues(state),
     user: selectUser(state),
     // The winning claim for a short lbry uri
-    amountNeededForTakeover: selectTakeOverAmount(state),
     isLivestreamClaim: selectIsStreamPlaceholderForUri(state, permanentUrl),
     isPostClaim,
     permanentUrl,
@@ -51,7 +43,6 @@ const select = (state) => {
     filePath: makeSelectPublishFormValue('filePath')(state),
     remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
     publishSuccess: makeSelectPublishFormValue('publishSuccess')(state),
-    isResolvingUri: selectIsResolvingPublishUris(state),
     totalRewardValue: selectUnclaimedRewardValue(state),
     modal: selectModal(state),
     enablePublishPreview: selectClientSetting(state, SETTINGS.ENABLE_PUBLISH_PREVIEW),
@@ -59,6 +50,7 @@ const select = (state) => {
     incognito: selectIncognito(state),
     isClaimingInitialRewards: selectIsClaimingInitialRewards(state),
     hasClaimedInitialRewards: selectHasClaimedInitialRewards(state),
+    balance: selectBalance(state),
   };
 };
 
@@ -67,10 +59,9 @@ const perform = (dispatch) => ({
   clearPublish: () => dispatch(doClearPublish()),
   resolveUri: (uri) => dispatch(doResolveUri(uri)),
   publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
-  prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
   resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
   checkAvailability: (name) => dispatch(doCheckPublishNameAvailability(name)),
   claimInitialRewards: () => dispatch(doClaimInitialRewards()),
 });
 
-export default connect(select, perform)(PublishForm);
+export default connect(select, perform)(LivestreamForm);

ui/component/publish/livestream/livestreamForm/view.jsx

@@ -0,0 +1,612 @@
+// @flow
+
+/*
+  On submit, this component calls publish, which dispatches doPublishDesktop.
+  doPublishDesktop calls lbry-redux Lbry publish method using lbry-redux publish state as params.
+  Publish simply instructs the SDK to find the file path on disk and publish it with the provided metadata.
+  On web, the Lbry publish method call is overridden in platform/web/api-setup, using a function in platform/web/publish.
+  File upload is carried out in the background by that function.
+ */
+
+import { SITE_NAME, SIMPLE_SITE } from 'config';
+import * as ICONS from 'constants/icons';
+import React, { useEffect, useState } from 'react';
+import Lbry from 'lbry';
+import { buildURI, isURIValid, isNameValid } from 'util/lbryURI';
+import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
+import Button from 'component/button';
+import ChannelSelect from 'component/channelSelector';
+import classnames from 'classnames';
+import TagsSelect from 'component/tagsSelect';
+import PublishDescription from 'component/publish/shared/publishDescription';
+// import PublishPrice from 'component/publish/shared/publishPrice';
+import PublishAdditionalOptions from 'component/publish/shared/publishAdditionalOptions';
+import PublishFormErrors from 'component/publish/shared/publishFormErrors';
+import PublishStreamReleaseDate from 'component/publish/shared/publishStreamReleaseDate';
+import PublishLivestream from 'component/publish/livestream/publishLivestream';
+import SelectThumbnail from 'component/selectThumbnail';
+import Card from 'component/common/card';
+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';
+import { NEW_LIVESTREAM_REPLAY_API } from 'constants/livestream';
+import { SOURCE_SELECT } from 'constants/publish_sources';
+import { useIsMobile } from 'effects/use-screensize';
+import Tooltip from 'component/common/tooltip';
+
+type Props = {
+  tags: Array<Tag>,
+  publish: (source?: string | File, ?boolean) => void,
+  filePath: string | File,
+  fileText: string,
+  bid: ?number,
+  bidError: ?string,
+  editingURI: ?string,
+  title: ?string,
+  thumbnail: ?string,
+  thumbnailError: ?boolean,
+  uploadThumbnailStatus: ?string,
+  thumbnailPath: ?string,
+  description: ?string,
+  language: string,
+  nsfw: boolean,
+  contentIsFree: boolean,
+  fee: {
+    amount: string,
+    currency: string,
+  },
+  name: ?string,
+  nameError: ?string,
+  winningBidForClaimUri: number,
+  myClaimForUri: ?StreamClaim,
+  licenseType: string,
+  otherLicenseDescription: ?string,
+  licenseUrl: ?string,
+  // useLBRYUploader: ?boolean,
+  publishing: boolean,
+  publishSuccess: boolean,
+  publishError?: boolean,
+  balance: number,
+  isStillEditing: boolean,
+  clearPublish: () => void,
+  resolveUri: (string) => void,
+  resetThumbnailStatus: () => void,
+  // Add back type
+  updatePublishForm: (any) => void,
+  checkAvailability: (string) => void,
+  ytSignupPending: boolean,
+  modal: { id: string, modalProps: {} },
+  enablePublishPreview: boolean,
+  activeChannelClaim: ?ChannelClaim,
+  user: ?User,
+  isLivestreamClaim: boolean,
+  isPostClaim: boolean,
+  permanentUrl: ?string,
+  remoteUrl: ?string,
+  isClaimingInitialRewards: boolean,
+  claimInitialRewards: () => void,
+  hasClaimedInitialRewards: boolean,
+  setClearStatus: (boolean) => void,
+  // disabled?: boolean,
+  remoteFileUrl?: string,
+  urlSource?: string,
+};
+
+function LivestreamForm(props: Props) {
+  // Detect upload type from query in URL
+  const {
+    thumbnail,
+    thumbnailError,
+    name,
+    editingURI,
+    myClaimForUri,
+    resolveUri,
+    title,
+    bid,
+    bidError,
+    uploadThumbnailStatus,
+    resetThumbnailStatus,
+    updatePublishForm,
+    filePath,
+    fileText,
+    publishing,
+    publishSuccess,
+    publishError,
+    clearPublish,
+    isStillEditing,
+    tags,
+    publish,
+    checkAvailability,
+    ytSignupPending,
+    modal,
+    enablePublishPreview,
+    activeChannelClaim,
+    description,
+    // user,
+    balance,
+    permanentUrl,
+    remoteUrl,
+    isClaimingInitialRewards,
+    claimInitialRewards,
+    hasClaimedInitialRewards,
+    setClearStatus,
+    remoteFileUrl,
+    urlSource,
+  } = props;
+
+  const isMobile = useIsMobile();
+
+  const inEditMode = Boolean(editingURI);
+  const { replace, location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const TYPE_PARAM = 'type';
+  const uploadType = urlParams.get(TYPE_PARAM);
+  const _uploadType = uploadType && uploadType.toLowerCase();
+  const activeChannelName = activeChannelClaim && activeChannelClaim.name;
+
+  const mode = PUBLISH_MODES.LIVESTREAM;
+  const [publishMode, setPublishMode] = React.useState('New');
+  const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
+
+  // Used to check if the url name has changed:
+  // A new file needs to be provided
+  const [prevName, setPrevName] = React.useState(false);
+
+  const [waitForFile, setWaitForFile] = useState(false);
+  const [overMaxBitrate, setOverMaxBitrate] = useState(false);
+
+  const [livestreamData, setLivestreamData] = React.useState([]);
+  const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
+
+  const TAGS_LIMIT = 5;
+  const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath && !remoteUrl;
+  const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
+  const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing;
+  const isInProgress = filePath || editingURI || name || title;
+  // Editing content info
+  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) ||
+    (activeChannelClaim && activeChannelClaim.claim_id);
+
+  // const nameEdited = isStillEditing && name !== prevName;
+  const thumbnailUploaded = uploadThumbnailStatus === THUMBNAIL_STATUSES.COMPLETE && thumbnail;
+
+  const waitingForFile = waitForFile && !remoteUrl && !filePath;
+  // If they are editing, they don't need a new file chosen
+  const formValidLessFile =
+    name &&
+    isNameValid(name) &&
+    title &&
+    !overMaxBitrate &&
+    bid &&
+    thumbnail &&
+    !bidError &&
+    !emptyPostError &&
+    !(thumbnailError && !thumbnailUploaded) &&
+    !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
+
+  const isOverwritingExistingClaim = !editingURI && myClaimForUri;
+
+  const formValid = isOverwritingExistingClaim
+    ? false
+    : editingURI && !filePath // if we're editing we don't need a file
+    ? isStillEditing && formValidLessFile && !waitingForFile
+    : formValidLessFile;
+
+  const [previewing, setPreviewing] = React.useState(false);
+
+  const disabled = !title || !name || (publishMode === 'Replay' && !remoteFileUrl);
+  const isClear = !title && !name && !description && !thumbnail;
+
+  useEffect(() => {
+    setClearStatus(isClear);
+  }, [isClear]);
+
+  useEffect(() => {
+    if (activeChannelClaim && activeChannelClaim.claim_id && activeChannelName) {
+      fetchLivestreams(activeChannelClaim.claim_id, activeChannelName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [claimChannelId, activeChannelName]);
+
+  useEffect(() => {
+    if (!hasClaimedInitialRewards) {
+      claimInitialRewards();
+    }
+  }, [hasClaimedInitialRewards, claimInitialRewards]);
+
+  useEffect(() => {
+    if (!modal) {
+      const timer = setTimeout(() => {
+        setPreviewing(false);
+      }, 250);
+
+      return () => clearTimeout(timer);
+    }
+  }, [modal]);
+
+  useEffect(() => {
+    if (publishError) {
+      setPreviewing(false);
+      updatePublishForm({ publishError: undefined });
+    }
+  }, [publishError]);
+
+  // move this to lbryinc OR to a file under ui, and/or provide a standardized livestreaming config.
+  async function fetchLivestreams(channelId, channelName) {
+    setCheckingLivestreams(true);
+    let signedMessage;
+    try {
+      await Lbry.channel_sign({
+        channel_id: channelId,
+        hexdata: toHex(channelName || ''),
+      }).then((data) => {
+        signedMessage = data;
+      });
+    } catch (e) {
+      throw e;
+    }
+    if (signedMessage) {
+      const encodedChannelName = encodeURIComponent(channelName || '');
+      const newEndpointUrl =
+        `${NEW_LIVESTREAM_REPLAY_API}?channel_claim_id=${String(channelId)}` +
+        `&signature=${signedMessage.signature}&signature_ts=${signedMessage.signing_ts}&channel_name=${
+          encodedChannelName || ''
+        }`;
+
+      const responseFromNewApi = await fetch(newEndpointUrl);
+
+      const data = (await responseFromNewApi.json()).data;
+
+      let newData = [];
+      if (data && data.length > 0) {
+        for (const dataItem of data) {
+          if (dataItem.Status.toLowerCase() === 'inprogress' || dataItem.Status.toLowerCase() === 'ready') {
+            const objectToPush = {
+              data: {
+                fileLocation: dataItem.URL,
+                fileDuration:
+                  dataItem.Status.toLowerCase() === 'inprogress'
+                    ? __('Processing...(') + dataItem.PercentComplete + '%)'
+                    : (dataItem.Duration / 1000000000).toString(),
+                thumbnails: dataItem.ThumbnailURLs !== null ? dataItem.ThumbnailURLs : [],
+                uploadedAt: dataItem.Created,
+              },
+            };
+            newData.push(objectToPush);
+          }
+        }
+      }
+
+      setLivestreamData(newData);
+      setCheckingLivestreams(false);
+    }
+  }
+
+  const isLivestreamMode = mode === PUBLISH_MODES.LIVESTREAM;
+  let submitLabel;
+
+  if (isClaimingInitialRewards) {
+    submitLabel = __('Claiming credits...');
+  } else if (publishing) {
+    if (isStillEditing || inEditMode) {
+      submitLabel = __('Saving...');
+    } else {
+      submitLabel = __('Creating...');
+    }
+  } else if (previewing) {
+    submitLabel = <Spinner type="small" />;
+  } else {
+    if (isStillEditing || inEditMode) {
+      submitLabel = __('Save');
+    } else {
+      submitLabel = __('Create');
+    }
+  }
+
+  // if you enter the page and it is stuck in publishing, "stop it."
+  useEffect(() => {
+    if (publishing || publishSuccess) {
+      clearPublish();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clearPublish]);
+
+  useEffect(() => {
+    if (!thumbnail) {
+      resetThumbnailStatus();
+    }
+  }, [thumbnail, resetThumbnailStatus]);
+
+  // Save previous name of the editing claim
+  useEffect(() => {
+    if (isStillEditing && (!prevName || !prevName.trim() === '')) {
+      if (name !== prevName) {
+        setPrevName(name);
+      }
+    }
+  }, [name, prevName, setPrevName, isStillEditing]);
+
+  // Every time the channel or name changes, resolve the uris to find winning bid amounts
+  useEffect(() => {
+    // We are only going to store the full uri, but we need to resolve the uri with and without the channel name
+    let uri;
+    try {
+      uri = name && buildURI({ streamName: name, activeChannelName });
+    } catch (e) {}
+
+    if (activeChannelName && name) {
+      // resolve without the channel name so we know the winning bid for it
+      try {
+        const uriLessChannel = buildURI({ streamName: name });
+        resolveUri(uriLessChannel);
+      } catch (e) {}
+    }
+
+    const isValid = uri && isURIValid(uri);
+    if (uri && isValid && checkAvailability && name) {
+      resolveUri(uri);
+      checkAvailability(name);
+      updatePublishForm({ uri });
+    }
+  }, [name, activeChannelName, resolveUri, updatePublishForm, checkAvailability]);
+
+  // because publish editingUri is channel_short/claim_long and we don't have that, resolve it.
+  useEffect(() => {
+    if (editingURI) {
+      resolveUri(editingURI);
+      setPublishMode('Edit');
+    } else if (urlSource) {
+      setPublishMode(urlSource);
+    } else {
+      setPublishMode('New');
+      updatePublishForm({ isLivestreamPublish: true, remoteFileUrl: undefined });
+    }
+  }, [editingURI, resolveUri]);
+
+  useEffect(() => {
+    updatePublishForm({
+      isMarkdownPost: false,
+      isLivestreamPublish: true,
+    });
+  }, [mode, updatePublishForm]);
+
+  useEffect(() => {
+    if (publishMode === 'New') {
+      updatePublishForm({ isLivestreamPublish: true, remoteFileUrl: undefined });
+    }
+  }, [publishMode]);
+
+  useEffect(() => {
+    updatePublishForm({ channel: activeChannelName });
+  }, [activeChannelName, updatePublishForm, isLivestreamMode]);
+
+  // if we have a type urlparam, update it? necessary?
+  useEffect(() => {
+    if (!_uploadType) return;
+    const newParams = new URLSearchParams();
+    newParams.set(TYPE_PARAM, mode.toLowerCase());
+    replace({ search: newParams.toString() });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, _uploadType]);
+
+  async function handlePublish() {
+    let outputFile = filePath;
+    let runPublish = false;
+
+    // Publish file
+    if (mode === PUBLISH_MODES.FILE || isLivestreamMode) {
+      runPublish = true;
+    }
+
+    if (runPublish) {
+      if (enablePublishPreview) {
+        setPreviewing(true);
+        publish(outputFile, true);
+      } else {
+        publish(outputFile, false);
+      }
+    }
+  }
+
+  // When accessing to publishing, make sure to reset file input attributes
+  // since we can't restore from previous user selection (like we do
+  // with other properties such as name, title, etc.) for security reasons.
+  useEffect(() => {
+    if (mode === PUBLISH_MODES.FILE) {
+      updatePublishForm({ filePath: '', fileDur: 0, fileSize: 0 });
+    }
+  }, [mode, updatePublishForm]);
+
+  // File Source Selector State.
+  const [fileSource, setFileSource] = useState();
+  const changeFileSource = (state) => setFileSource(state);
+
+  if (publishing) {
+    return (
+      <div className="main--empty">
+        <h1 className="section__subtitle">{__('Publishing...')}</h1>
+        <Spinner delayed />
+      </div>
+    );
+  }
+
+  const isFormIncomplete =
+    isClaimingInitialRewards ||
+    formDisabled ||
+    !formValid ||
+    uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS ||
+    ytSignupPending ||
+    previewing;
+
+  // Editing claim uri
+  return (
+    <div className={balance < 0.01 ? 'disabled' : ''}>
+      <div className="card-stack">
+        <Card className="card--livestream">
+          <div>
+            <Button
+              key={'New'}
+              icon={ICONS.LIVESTREAM}
+              iconSize={18}
+              label={'New Livestream'}
+              button="alt"
+              onClick={() => {
+                setPublishMode('New');
+              }}
+              disabled={editingURI}
+              className={classnames('button-toggle', { 'button-toggle--active': publishMode === 'New' })}
+            />
+            {publishMode !== 'Edit' && (
+              <Button
+                key={'Replay'}
+                icon={ICONS.MENU}
+                iconSize={18}
+                label={'Choose Replay'}
+                button="alt"
+                onClick={() => {
+                  setPublishMode('Replay');
+                }}
+                disabled={!hasLivestreamData || publishMode === 'Edit'}
+                className={classnames('button-toggle', { 'button-toggle--active': publishMode === 'Replay' })}
+              />
+            )}
+            {publishMode === 'Edit' && (
+              <Button
+                key={'Edit'}
+                icon={ICONS.EDIT}
+                iconSize={18}
+                label={'Edit / Update'}
+                button="alt"
+                onClick={() => {
+                  setPublishMode('Edit');
+                }}
+                className="button-toggle button-toggle--active"
+              />
+            )}
+          </div>
+          {!isMobile && <ChannelSelect hideAnon autoSet channelToSet={claimChannelId} isTabHeader />}
+          <Tooltip title={__('Check for Replays')}>
+            <Button
+              button="secondary"
+              label={__('Check for Replays')}
+              disabled={isCheckingLivestreams}
+              icon={ICONS.REFRESH}
+              onClick={() => fetchLivestreams(claimChannelId, activeChannelName)}
+            />
+          </Tooltip>
+        </Card>
+
+        <PublishLivestream
+          inEditMode={inEditMode}
+          fileSource={publishMode === 'New' || publishMode === 'Edit' ? fileSource : SOURCE_SELECT}
+          changeFileSource={changeFileSource}
+          uri={permanentUrl}
+          mode={publishMode === 'New' ? PUBLISH_MODES.LIVESTREAM : PUBLISH_MODES.FILE}
+          fileMimeType={fileMimeType}
+          disabled={publishing}
+          inProgress={isInProgress}
+          livestreamData={livestreamData}
+          setWaitForFile={setWaitForFile}
+          setOverMaxBitrate={setOverMaxBitrate}
+          isCheckingLivestreams={isCheckingLivestreams}
+          checkLivestreams={fetchLivestreams}
+          channelId={claimChannelId}
+          channelName={activeChannelName}
+        />
+
+        <PublishDescription disabled={disabled} />
+
+        {!publishing && (
+          <div className={classnames({ 'card--disabled': disabled })}>
+            <Card body={<PublishStreamReleaseDate />} />
+
+            <Card actions={<SelectThumbnail livestreamData={livestreamData} />} />
+
+            <h2 className="card__title" style={{ marginTop: 'var(--spacing-l)' }}>
+              {__('Tags')}
+            </h2>
+            <TagsSelect
+              suggestMature={!SIMPLE_SITE}
+              disableAutoFocus
+              hideHeader
+              label={__('Selected Tags')}
+              empty={__('No tags added')}
+              limitSelect={TAGS_LIMIT}
+              help={__(
+                "Add tags that are relevant to your content so those who're looking for it can find it more easily. If your content is best suited for mature audiences, ensure it is tagged 'mature'."
+              )}
+              placeholder={__('gaming, crypto')}
+              onSelect={(newTags) => {
+                const validatedTags = [];
+                newTags.forEach((newTag) => {
+                  if (!tags.some((tag) => tag.name === newTag.name)) {
+                    validatedTags.push(newTag);
+                  }
+                });
+                updatePublishForm({ tags: [...tags, ...validatedTags] });
+              }}
+              onRemove={(clickedTag) => {
+                const newTags = tags.slice().filter((tag) => tag.name !== clickedTag.name);
+                updatePublishForm({ tags: newTags });
+              }}
+              tagsChosen={tags}
+            />
+
+            <PublishAdditionalOptions
+              isLivestream={isLivestreamMode}
+              disabled={disabled}
+              // showSchedulingOptions={publishMode === 'New'}
+              showSchedulingOptions
+            />
+          </div>
+        )}
+        <section>
+          <div className="section__actions">
+            <Button button="primary" onClick={handlePublish} label={submitLabel} disabled={isFormIncomplete} />
+            <ChannelSelect hideAnon disabled={isFormIncomplete} autoSet channelToSet={claimChannelId} isPublishMenu />
+          </div>
+          <p className="help">
+            {!formDisabled && !formValid ? (
+              <PublishFormErrors
+                title={title}
+                mode={mode}
+                waitForFile={waitingForFile}
+                overMaxBitrate={overMaxBitrate}
+              />
+            ) : (
+              <I18nMessage
+                tokens={{
+                  odysee_terms_of_service: (
+                    <Button
+                      button="link"
+                      href="https://odysee.com/$/tos"
+                      label={__('%site_name% Terms of Service', { site_name: SITE_NAME })}
+                    />
+                  ),
+                  odysee_community_guidelines: (
+                    <Button
+                      button="link"
+                      href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c"
+                      label={__('community guidelines', { site_name: SITE_NAME })}
+                    />
+                  ),
+                }}
+              >
+                By continuing, you accept the %odysee_terms_of_service% and %odysee_community_guidelines%.
+              </I18nMessage>
+            )}
+          </p>
+        </section>
+      </div>
+    </div>
+  );
+}
+
+export default LivestreamForm;

ui/component/publish/livestream/publishLivestream/index.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { selectBalance } from 'redux/selectors/wallet';
+import { selectIsStillEditing, makeSelectPublishFormValue } from 'redux/selectors/publish';
+import { doUpdatePublishForm, doClearPublish } from 'redux/actions/publish';
+import { doToast } from 'redux/actions/notifications';
+import LivestreamCreatePage from './view';
+
+const select = (state) => ({
+  name: makeSelectPublishFormValue('name')(state),
+  title: makeSelectPublishFormValue('title')(state),
+  filePath: makeSelectPublishFormValue('filePath')(state),
+  remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
+  isStillEditing: selectIsStillEditing(state),
+  balance: selectBalance(state),
+  publishing: makeSelectPublishFormValue('publishing')(state),
+  size: makeSelectPublishFormValue('fileSize')(state),
+  duration: makeSelectPublishFormValue('fileDur')(state),
+  isVid: makeSelectPublishFormValue('fileVid')(state),
+});
+
+const perform = {
+  doClearPublish,
+  doUpdatePublishForm,
+  doToast,
+};
+
+export default connect(select, perform)(LivestreamCreatePage);

ui/component/publish/livestream/publishLivestream/style.scss

@@ -0,0 +1,150 @@
+@import '../../../../scss/init/_breakpoints.scss';
+
+.uploadPage-wrapper {
+  .replay-picker--container {
+    border-radius: var(--border-radius);
+    border: 2px solid var(--color-border);
+    background-color: var(--color-input-bg);
+    overflow: hidden;
+    margin-bottom: var(--spacing-l);
+
+    .table__wrapper {
+      padding: var(--spacing-xxs);
+      padding-top: 0;
+    }
+
+    .fieldgroup--paginate {
+      background-color: var(--color-border);
+      padding: var(--spacing-xxs) !important;
+      margin-top: var(--spacing-xxs) !important;
+    }
+  }
+
+  .table--livestream-data {
+    border-collapse: separate;
+    border-spacing: 0;
+  }
+
+  .livestream__data-row {
+    border-radius: var(--border-radius);
+    background-color: rgba(var(--color-header-button-base), 0.4);
+    cursor: pointer;
+    .radio {
+      cursor: pointer;
+    }
+
+    &:nth-child(n) {
+      &.livestream__data-row--selected {
+        background-color: rgba(var(--color-header-button-base), 1);
+        td {
+          border-radius: unset !important;
+          border-top: 2px solid var(--color-border) !important;
+          border-bottom: 2px solid var(--color-border) !important;
+          &:first-child {
+            border-left: 2px solid var(--color-border) !important;
+            border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
+          }
+          &:last-child {
+            border-right: 2px solid var(--color-border) !important;
+            border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
+          }
+        }
+      }
+    }
+    td {
+      background-color: rgba(var(--color-header-background-base), 0.4);
+      padding-right: var(--spacing-m);
+      border-top: 2px solid transparent !important;
+      border-bottom: 2px solid transparent !important;
+
+      &:first-child {
+        padding-left: var(--spacing-s);
+        padding-right: 0;
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+        border-left: 2px solid transparent !important;
+      }
+      &:last-child {
+        border-radius: 0 var(--border-radius) var(--border-radius) 0;
+        border-right: 2px solid transparent !important;
+      }
+
+      @media (max-width: $breakpoint-small) {
+        padding: var(--spacing-xs);
+      }
+    }
+    .button--primary {
+      margin-bottom: -2px;
+    }
+    &:hover {
+      background-color: rgba(var(--color-header-button-base), 0.6);
+      td {
+        .radio {
+          label::before {
+            cursor: pointer;
+            background-color: var(--color-input-toggle-bg-hover);
+          }
+        }
+        label {
+          cursor: pointer;
+        }
+      }
+
+      input {
+        cursor: pointer;
+      }
+    }
+  }
+
+  .livestream__data-row-spacer {
+    height: var(--spacing-xxs);
+  }
+
+  .radio {
+    display: inline-block;
+    label {
+      margin-bottom: -5px;
+    }
+  }
+
+  .file-upload {
+    margin-top: var(--spacing-m);
+
+    .help {
+      margin-bottom: 0;
+    }
+  }
+
+  .disabled {
+    .table__wrapper {
+      height: 98px;
+      overflow: hidden;
+    }
+  }
+
+  .empty {
+    margin: 0;
+    display: unset;
+    .empty__wrap {
+      display: unset;
+      .empty__content {
+        border: 2px solid var(--color-border);
+        border-radius: var(--border-radius);
+        background-color: var(--color-input-bg);
+        padding: var(--spacing-xxxs);
+        width: 100%;
+        max-width: unset;
+      }
+    }
+
+    .spinner {
+      border: 2px solid var(--color-border);
+      border-radius: var(--border-radius);
+      background-color: var(--color-input-bg);
+      width: 100%;
+      max-width: unset;
+      margin: 0;
+      // padding: var(--spacing-m) 0;
+      height: var(--height-input);
+    }
+  }
+}

ui/component/publish/livestream/publishLivestream/view.jsx

@@ -0,0 +1,563 @@
+// @flow
+import { SITE_NAME, WEB_PUBLISH_SIZE_LIMIT_GB, SIMPLE_SITE } from 'config';
+import { SOURCE_NONE, SOURCE_SELECT, SOURCE_UPLOAD } from 'constants/publish_sources';
+import React, { useState, useEffect } from 'react';
+import Card from 'component/common/card';
+import { FormField } from 'component/common/form';
+import { regexInvalidURI } from 'util/lbryURI';
+import Spinner from 'component/spinner';
+import * as PUBLISH_MODES from 'constants/publish_types';
+import PublishName from '../../shared/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';
+import FileSelector from 'component/common/file-selector';
+import Button from 'component/button';
+import './style.scss';
+
+type Props = {
+  uri: ?string,
+  mode: ?string,
+  name: ?string,
+  title: ?string,
+  filePath: string | WebFile,
+  isStillEditing: boolean,
+  balance: number,
+  doUpdatePublishForm: ({}) => void,
+  disabled: boolean,
+  publishing: boolean,
+  doToast: ({ message: string, isError?: boolean }) => void,
+  size: number,
+  duration: number,
+  isVid: boolean,
+  inProgress: boolean,
+  optimize: boolean,
+  livestreamData: LivestreamReplayData,
+  checkLivestreams: (string, string) => void,
+  channelName: string,
+  channelId: string,
+  isCheckingLivestreams: boolean,
+  setWaitForFile: (boolean) => void,
+  setOverMaxBitrate: (boolean) => void,
+  fileSource: string,
+  changeFileSource: (string) => void,
+  inEditMode: boolean,
+};
+
+function PublishLivestream(props: Props) {
+  const {
+    uri,
+    mode,
+    name,
+    title,
+    balance,
+    filePath,
+    isStillEditing,
+    doUpdatePublishForm: updatePublishForm,
+    doToast,
+    size,
+    duration,
+    isVid,
+    disabled,
+    livestreamData,
+    isCheckingLivestreams,
+    setOverMaxBitrate,
+    fileSource,
+    changeFileSource,
+    inEditMode,
+  } = props;
+
+  const livestreamDataStr = JSON.stringify(livestreamData);
+  const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
+
+  const [selectedFileIndex, setSelectedFileIndex] = useState(null);
+  const PAGE_SIZE = 4;
+  const [currentPage, setCurrentPage] = useState(1);
+  const [replaySource, setReplaySource] = useState('keep');
+
+  const totalPages =
+    hasLivestreamData && livestreamData.length > PAGE_SIZE ? Math.ceil(livestreamData.length / PAGE_SIZE) : 1;
+
+  const replayTitleLabel = !inEditMode ? __('Select Replay') : __('Use Replay');
+
+  const RECOMMENDED_BITRATE = 8500000;
+  const MAX_BITRATE = 16500000;
+  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 bitRate = getBitrate(size, duration);
+  const bitRateIsOverMax = bitRate > MAX_BITRATE;
+  const [oversized, setOversized] = useState(false);
+  const [currentFile, setCurrentFile] = useState(null);
+
+  const UPLOAD_SIZE_MESSAGE = __('%SITE_NAME% uploads are limited to %limit% GB.', {
+    SITE_NAME,
+    limit: TV_PUBLISH_SIZE_LIMIT_GB_STR,
+  });
+
+  // Reset filePath if publish mode changed
+  useEffect(() => {
+    updatePublishForm({ filePath: '' });
+  }, [mode, isStillEditing, updatePublishForm]);
+
+  // Reset title when form gets cleared
+  useEffect(() => {
+    updatePublishForm({ title: title });
+  }, [filePath]);
+
+  // Initialize default file source state for each mode.
+  useEffect(() => {
+    switch (mode) {
+      case PUBLISH_MODES.LIVESTREAM:
+        if (inEditMode) {
+          changeFileSource(SOURCE_SELECT);
+        } else {
+          changeFileSource(SOURCE_NONE);
+        }
+        break;
+      case PUBLISH_MODES.FILE:
+        changeFileSource(SOURCE_UPLOAD);
+        break;
+    }
+  }, [mode, hasLivestreamData]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const normalizeUrlForProtocol = (url) => {
+    if (url.startsWith('https://')) {
+      return url;
+    } else {
+      if (url.startsWith('http://')) {
+        return url;
+      } else if (url) {
+        return `https://${url}`;
+      } else return __('Click Check for Replays to update...');
+    }
+  };
+
+  // update remoteUrl when replay selected
+  useEffect(() => {
+    const livestreamData = JSON.parse(livestreamDataStr);
+    if (selectedFileIndex !== null && livestreamData && livestreamData.length) {
+      if (replaySource !== 'upload') {
+        updatePublishForm({
+          remoteFileUrl: normalizeUrlForProtocol(livestreamData[selectedFileIndex].data.fileLocation),
+          isLivestreamPublish: true,
+        });
+      } else {
+        updatePublishForm({
+          remoteFileUrl: normalizeUrlForProtocol(livestreamData[selectedFileIndex].data.fileLocation),
+          isLivestreamPublish: false,
+        });
+      }
+    }
+  }, [replaySource, selectedFileIndex, updatePublishForm, livestreamDataStr]);
+
+  function handlePaginateReplays(page) {
+    setCurrentPage(page);
+  }
+
+  function handleTitleChange(event) {
+    updatePublishForm({ title: event.target.value });
+  }
+
+  function getBitrate(size, duration) {
+    const s = Number(size);
+    const d = Number(duration);
+    if (s && d) {
+      return (s * 8) / d;
+    } else {
+      return 0;
+    }
+  }
+
+  useEffect(() => {
+    if (!filePath || filePath === '') {
+      setCurrentFile('');
+      setOversized(false);
+      setOverMaxBitrate(false);
+      updateFileInfo(0, 0, false);
+    } else if (typeof filePath !== 'string') {
+      // Update currentFile file
+      if (filePath.name !== currentFile && filePath.path !== currentFile) {
+        handleFileChange(filePath);
+      }
+    }
+  }, [filePath, currentFile, doToast, updatePublishForm]);
+
+  useEffect(() => {
+    setOverMaxBitrate(bitRateIsOverMax);
+  }, [bitRateIsOverMax]);
+
+  function updateFileInfo(duration, size, isvid) {
+    updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
+  }
+
+  function parseName(newName) {
+    let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
+    return newName.replace(INVALID_URI_CHARS, '-');
+  }
+
+  /*
+  function autofillTitle(file) {
+    const newTitle = (file && file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || name || '';
+    if (!title) updatePublishForm({ title: newTitle });
+  }
+  */
+  function handleFileChange(file: WebFile, clearName = true) {
+    window.URL = window.URL || window.webkitURL;
+    setOversized(false);
+    setOverMaxBitrate(false);
+
+    // select file, start to select a new one, then cancel
+    if (!file) {
+      if (isStillEditing || !clearName) {
+        updatePublishForm({ filePath: '' });
+      } else {
+        updatePublishForm({ filePath: '', name: '' });
+      }
+      return;
+    }
+
+    // if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
+    const contentType = file.type && file.type.split('/');
+    const isVideo = contentType && contentType[0] === 'video';
+    const isMp4 = contentType && contentType[1] === 'mp4';
+
+    if (isVideo) {
+      if (isMp4) {
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.onloadedmetadata = () => {
+          updateFileInfo(video.duration, file.size, isVideo);
+          window.URL.revokeObjectURL(video.src);
+        };
+        video.onerror = () => {
+          updateFileInfo(0, file.size, isVideo);
+        };
+        video.src = window.URL.createObjectURL(file);
+      } else {
+        updateFileInfo(0, file.size, isVideo);
+      }
+    } else {
+      updateFileInfo(0, file.size, isVideo);
+    }
+    updatePublishForm({ isLivestreamPublish: false });
+
+    // Strip off extention and replace invalid characters
+    let fileName = name || (file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || '';
+
+    // @if TARGET='web'
+    // we only need to enforce file sizes on 'web'
+    if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
+      setOversized(true);
+      doToast({ message: __(UPLOAD_SIZE_MESSAGE), isError: true });
+      updatePublishForm({ filePath: '' });
+      return;
+    }
+    // @endif
+
+    const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
+      // if electron, we'll set filePath to the path string because SDK is handling publishing.
+      // File.path will be undefined from web due to browser security, so it will default to the File Object.
+      filePath: file.path || file,
+    };
+
+    if (!isStillEditing) {
+      publishFormParams.name = parseName(fileName);
+    }
+
+    // File path is not supported on web for security reasons so we use the name instead.
+    setCurrentFile(file.path || file.name);
+    console.log('publishFormParams: ', publishFormParams);
+    updatePublishForm(publishFormParams);
+  }
+
+  function getUploadMessage() {
+    // @if TARGET='web'
+    if (oversized) {
+      return (
+        <p className="help--error">
+          {UPLOAD_SIZE_MESSAGE}{' '}
+          <Button button="link" label={__('Upload Guide')} href="https://odysee.com/@OdyseeHelp:b/uploadguide:1" />
+        </p>
+      );
+    }
+    // @endif
+
+    if (isVid && duration && bitRate > RECOMMENDED_BITRATE) {
+      return (
+        <p className="help--warning">
+          {bitRateIsOverMax
+            ? __(
+                'Your video has a bitrate over ~16 Mbps and cannot be processed at this time. We suggest transcoding to provide viewers the best experience.'
+              )
+            : __(
+                'Your video has a bitrate over 8 Mbps. We suggest transcoding to provide viewers the best experience.'
+              )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+
+    if (isVid && !duration) {
+      return (
+        <p className="help--warning">
+          {__(
+            'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming.'
+          )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+
+    // @if TARGET='web'
+    if (!isStillEditing) {
+      return (
+        <p className="help">
+          {__(
+            'For video content, use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming. %SITE_NAME% uploads are restricted to %limit% GB.',
+            { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_GB_STR }
+          )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+    // @endif
+  }
+
+  function updateReplayOption(value) {
+    setReplaySource(value);
+    if (value !== 'choose') {
+      setSelectedFileIndex(null);
+    }
+    if (value !== 'upload') {
+      updatePublishForm({ filePath: '' });
+    }
+  }
+
+  return (
+    <Card
+      className={classnames({
+        'card--disabled': disabled || balance === 0,
+      })}
+      actions={
+        <>
+          <div className="card--file">
+            <React.Fragment>
+              {/* Decide whether to show file upload or replay selector */}
+              {/* @if TARGET='web' */}
+              <FormField
+                type="text"
+                name="content_title"
+                label={__('Title')}
+                placeholder={__('Descriptive titles work best')}
+                disabled={disabled}
+                value={title}
+                onChange={handleTitleChange}
+                className="fieldset-group"
+                max="200"
+                autoFocus
+                autoComplete="off"
+              />
+              <PublishName uri={uri} />
+              <>
+                <fieldset-section>
+                  <label style={{ marginBottom: 'var(--spacing-s)' }}>
+                    {inEditMode && (
+                      <FormField
+                        name="reuse-replay"
+                        key="reuse-replay"
+                        type="radio"
+                        checked={replaySource === 'keep'}
+                        onClick={() => updateReplayOption('keep')}
+                      />
+                    )}
+                    {__('Update only')}
+                  </label>
+                </fieldset-section>
+                {(fileSource === SOURCE_SELECT || inEditMode) && hasLivestreamData && !isCheckingLivestreams && (
+                  <>
+                    <label>
+                      {inEditMode && (
+                        <FormField
+                          name="show-replays"
+                          key="show-replays"
+                          type="radio"
+                          checked={replaySource === 'choose'}
+                          onClick={() => updateReplayOption('choose')}
+                        />
+                      )}
+                      {replayTitleLabel}
+                    </label>
+                    <div
+                      className={classnames('replay-picker--container', {
+                        disabled: inEditMode && replaySource !== 'choose',
+                      })}
+                    >
+                      <fieldset-section>
+                        <div className="table__wrapper">
+                          <table className="table table--livestream-data">
+                            <tbody>
+                              {livestreamData
+                                .slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
+                                .map((item, i) => (
+                                  <>
+                                    <tr className="livestream__data-row-spacer" key={item.id + '_spacer'} />
+                                    <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}
+                                          onChange={() => {}}
+                                          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>
+                                        {item.data.fileDuration && isNaN(item.data.fileDuration)
+                                          ? item.data.fileDuration
+                                          : `${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>
+                      {totalPages > 1 && (
+                        <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>
+                      )}
+                    </div>
+                  </>
+                )}
+                {(fileSource === SOURCE_SELECT || inEditMode) && !hasLivestreamData && !isCheckingLivestreams && (
+                  <>
+                    <label className="disabled">
+                      {inEditMode && (
+                        <FormField
+                          name="show-replays"
+                          key="show-replays"
+                          type="radio"
+                          checked={replaySource === 'choose'}
+                          onClick={() => updateReplayOption('choose')}
+                        />
+                      )}
+                      {replayTitleLabel}
+                    </label>
+                    <div className="main--empty empty disabled">
+                      <Empty text={__('No replays found.')} />
+                    </div>
+                  </>
+                )}
+                {(fileSource === SOURCE_SELECT || inEditMode) && isCheckingLivestreams && (
+                  <>
+                    <label className="disabled">
+                      {inEditMode && (
+                        <FormField
+                          name="replay-source"
+                          value="choose"
+                          key="show-replays-spin"
+                          type="radio"
+                          checked={replaySource === 'choose'}
+                          onClick={() => updateReplayOption('choose')}
+                        />
+                      )}
+                      {replayTitleLabel}
+                    </label>
+                    <div className="main--empty empty">
+                      <Spinner small />
+                    </div>
+                  </>
+                )}
+
+                {inEditMode && (
+                  <div className="file-upload">
+                    <label>
+                      <FormField
+                        name="replay-source"
+                        type="radio"
+                        checked={replaySource === 'upload'}
+                        onClick={() => updateReplayOption('upload')}
+                      />
+                      Upload Replay
+                    </label>
+                    <FileSelector
+                      disabled={replaySource !== 'upload'}
+                      currentPath={currentFile}
+                      onFileChosen={handleFileChange}
+                      accept={SIMPLE_SITE ? 'video/mp4,video/x-m4v,video/*' : undefined}
+                      placeholder={__('Select video replay file to upload')}
+                    />
+                    {getUploadMessage()}
+                  </div>
+                )}
+              </>
+              {/* @endif */}
+            </React.Fragment>
+          </div>
+        </>
+      }
+    />
+  );
+}
+
+export default PublishLivestream;

ui/component/publish/post/postForm/index.js

@@ -0,0 +1,65 @@
+import { connect } from 'react-redux';
+import { doResetThumbnailStatus, doClearPublish, doUpdatePublishForm, doPublishDesktop } from 'redux/actions/publish';
+import { doResolveUri, doCheckPublishNameAvailability } from 'redux/actions/claims';
+import {
+  selectPublishFormValues,
+  selectIsStillEditing,
+  makeSelectPublishFormValue,
+  selectMyClaimForUri,
+} from 'redux/selectors/publish';
+import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
+import * as RENDER_MODES from 'constants/file_render_modes';
+import * as SETTINGS from 'constants/settings';
+import { doClaimInitialRewards } from 'redux/actions/rewards';
+import {
+  selectUnclaimedRewardValue,
+  selectIsClaimingInitialRewards,
+  selectHasClaimedInitialRewards,
+} from 'redux/selectors/rewards';
+import { selectModal, selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
+import { selectClientSetting } from 'redux/selectors/settings';
+import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
+import { selectUser } from 'redux/selectors/user';
+import PostForm from './view';
+
+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
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, permanentUrl),
+    isPostClaim,
+    permanentUrl,
+    // My previously published claims under this short lbry uri
+    myClaimForUri,
+    // 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),
+    filePath: makeSelectPublishFormValue('filePath')(state),
+    remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
+    publishSuccess: makeSelectPublishFormValue('publishSuccess')(state),
+    totalRewardValue: selectUnclaimedRewardValue(state),
+    modal: selectModal(state),
+    enablePublishPreview: selectClientSetting(state, SETTINGS.ENABLE_PUBLISH_PREVIEW),
+    activeChannelClaim: selectActiveChannelClaim(state),
+    incognito: selectIncognito(state),
+    isClaimingInitialRewards: selectIsClaimingInitialRewards(state),
+    hasClaimedInitialRewards: selectHasClaimedInitialRewards(state),
+  };
+};
+
+const perform = (dispatch) => ({
+  updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
+  clearPublish: () => dispatch(doClearPublish()),
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
+  resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
+  checkAvailability: (name) => dispatch(doCheckPublishNameAvailability(name)),
+  claimInitialRewards: () => dispatch(doClaimInitialRewards()),
+});
+
+export default connect(select, perform)(PostForm);

ui/component/publish/post/postForm/view.jsx

@@ -0,0 +1,488 @@
+// @flow
+
+/*
+  On submit, this component calls publish, which dispatches doPublishDesktop.
+  doPublishDesktop calls lbry-redux Lbry publish method using lbry-redux publish state as params.
+  Publish simply instructs the SDK to find the file path on disk and publish it with the provided metadata.
+  On web, the Lbry publish method call is overridden in platform/web/api-setup, using a function in platform/web/publish.
+  File upload is carried out in the background by that function.
+ */
+
+import { SITE_NAME, SIMPLE_SITE } from 'config';
+import React, { useEffect } from 'react';
+import { buildURI, isURIValid, isNameValid } from 'util/lbryURI';
+import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
+import Button from 'component/button';
+import ChannelSelect from 'component/channelSelector';
+import classnames from 'classnames';
+import TagsSelect from 'component/tagsSelect';
+// import PublishPrice from 'component/publish/shared/publishPrice';
+import PublishAdditionalOptions from 'component/publish/shared/publishAdditionalOptions';
+import PublishFormErrors from 'component/publish/shared/publishFormErrors';
+import SelectThumbnail from 'component/selectThumbnail';
+import PublishPost from 'component/publish/post/publishPost';
+import Card from 'component/common/card';
+import I18nMessage from 'component/i18nMessage';
+import * as PUBLISH_MODES from 'constants/publish_types';
+import { useHistory } from 'react-router';
+import Spinner from 'component/spinner';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
+
+type Props = {
+  disabled: boolean,
+  tags: Array<Tag>,
+  publish: (source?: string | File, ?boolean) => void,
+  filePath: string | File,
+  fileText: string,
+  bid: ?number,
+  bidError: ?string,
+  editingURI: ?string,
+  title: ?string,
+  thumbnail: ?string,
+  thumbnailError: ?boolean,
+  uploadThumbnailStatus: ?string,
+  thumbnailPath: ?string,
+  description: ?string,
+  language: string,
+  nsfw: boolean,
+  contentIsFree: boolean,
+  fee: {
+    amount: string,
+    currency: string,
+  },
+  name: ?string,
+  nameError: ?string,
+  winningBidForClaimUri: number,
+  myClaimForUri: ?StreamClaim,
+  licenseType: string,
+  otherLicenseDescription: ?string,
+  licenseUrl: ?string,
+  useLBRYUploader: ?boolean,
+  publishing: boolean,
+  publishSuccess: boolean,
+  publishError: boolean,
+  balance: number,
+  releaseTimeError: ?string,
+  isStillEditing: boolean,
+  clearPublish: () => void,
+  resolveUri: (string) => void,
+  resetThumbnailStatus: () => void,
+  // Add back type
+  updatePublishForm: (any) => void,
+  checkAvailability: (string) => void,
+  ytSignupPending: boolean,
+  modal: { id: string, modalProps: {} },
+  enablePublishPreview: boolean,
+  activeChannelClaim: ?ChannelClaim,
+  incognito: boolean,
+  user: ?User,
+  permanentUrl: ?string,
+  remoteUrl: ?string,
+  isClaimingInitialRewards: boolean,
+  claimInitialRewards: () => void,
+  hasClaimedInitialRewards: boolean,
+};
+
+function PostForm(props: Props) {
+  // Detect upload type from query in URL
+  const {
+    thumbnail,
+    thumbnailError,
+    name,
+    editingURI,
+    myClaimForUri,
+    resolveUri,
+    title,
+    bid,
+    bidError,
+    releaseTimeError,
+    uploadThumbnailStatus,
+    resetThumbnailStatus,
+    updatePublishForm,
+    filePath,
+    fileText,
+    publishing,
+    publishSuccess,
+    publishError,
+    clearPublish,
+    isStillEditing,
+    tags,
+    publish,
+    disabled = false,
+    checkAvailability,
+    ytSignupPending,
+    modal,
+    enablePublishPreview,
+    activeChannelClaim,
+    incognito,
+    // user,
+    permanentUrl,
+    // remoteUrl,
+    isClaimingInitialRewards,
+    claimInitialRewards,
+    hasClaimedInitialRewards,
+  } = props;
+
+  const inEditMode = Boolean(editingURI);
+  const { replace, location } = useHistory();
+  const urlParams = new URLSearchParams(location.search);
+  const TYPE_PARAM = 'type';
+  const uploadType = urlParams.get(TYPE_PARAM);
+  const _uploadType = uploadType && uploadType.toLowerCase();
+
+  const mode = PUBLISH_MODES.POST;
+
+  const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
+
+  // Used to check if the url name has changed:
+  // A new file needs to be provided
+  const [prevName, setPrevName] = React.useState(false);
+  // Used to check if the file has been modified by user
+  const [fileEdited, setFileEdited] = React.useState(false);
+  const [prevFileText, setPrevFileText] = React.useState('');
+
+  const TAGS_LIMIT = 5;
+  const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
+  const formDisabled = emptyPostError || publishing;
+  const isInProgress = filePath || editingURI || name || title;
+  const activeChannelName = activeChannelClaim && activeChannelClaim.name;
+  // Editing content info
+  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) ||
+    (activeChannelClaim && activeChannelClaim.claim_id);
+
+  const nameEdited = isStillEditing && name !== prevName;
+  const thumbnailUploaded = uploadThumbnailStatus === THUMBNAIL_STATUSES.COMPLETE && thumbnail;
+
+  const formValidLessFile =
+    name &&
+    isNameValid(name) &&
+    title &&
+    bid &&
+    thumbnail &&
+    !bidError &&
+    !releaseTimeError &&
+    !emptyPostError &&
+    !(thumbnailError && !thumbnailUploaded) &&
+    !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
+
+  const isOverwritingExistingClaim = !editingURI && myClaimForUri;
+
+  const formValid = isOverwritingExistingClaim
+    ? false
+    : editingURI && !filePath
+    ? isStillEditing && formValidLessFile
+    : formValidLessFile;
+
+  const [previewing, setPreviewing] = React.useState(false);
+
+  const formTitle = !editingURI ? __('Post an Article') : __('Edit Post');
+  const isClear = !title && !name && !thumbnail;
+
+  useEffect(() => {
+    if (!hasClaimedInitialRewards) {
+      claimInitialRewards();
+    }
+  }, [hasClaimedInitialRewards, claimInitialRewards]);
+
+  useEffect(() => {
+    if (!modal) {
+      const timer = setTimeout(() => {
+        setPreviewing(false);
+      }, 250);
+
+      return () => clearTimeout(timer);
+    }
+  }, [modal]);
+
+  useEffect(() => {
+    if (publishError) {
+      setPreviewing(false);
+      updatePublishForm({ publishError: undefined });
+    }
+  }, [publishError]);
+
+  let submitLabel;
+
+  if (isClaimingInitialRewards) {
+    submitLabel = __('Claiming credits...');
+  } else if (publishing) {
+    if (isStillEditing || inEditMode) {
+      submitLabel = __('Saving...');
+    } else {
+      submitLabel = __('Posting...');
+    }
+  } else if (previewing && !publishError) {
+    submitLabel = <Spinner type="small" />;
+  } else {
+    if (isStillEditing || inEditMode) {
+      submitLabel = __('Save');
+    } else {
+      submitLabel = __('Post');
+    }
+  }
+
+  // if you enter the page and it is stuck in publishing, "stop it."
+  useEffect(() => {
+    if (publishing || publishSuccess) {
+      clearPublish();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [clearPublish]);
+
+  useEffect(() => {
+    if (!thumbnail) {
+      resetThumbnailStatus();
+    }
+  }, [thumbnail, resetThumbnailStatus]);
+
+  // Save previous name of the editing claim
+  useEffect(() => {
+    if (isStillEditing && (!prevName || !prevName.trim() === '')) {
+      if (name !== prevName) {
+        setPrevName(name);
+      }
+    }
+  }, [name, prevName, setPrevName, isStillEditing]);
+
+  // Check for content changes on the text editor
+  useEffect(() => {
+    if (!fileEdited && fileText !== prevFileText && fileText !== '') {
+      setFileEdited(true);
+    } else if (fileEdited && fileText === prevFileText) {
+      setFileEdited(false);
+    }
+  }, [fileText, prevFileText, fileEdited]);
+
+  // Every time the channel or name changes, resolve the uris to find winning bid amounts
+  useEffect(() => {
+    // We are only going to store the full uri, but we need to resolve the uri with and without the channel name
+    let uri;
+    try {
+      uri = name && buildURI({ streamName: name, activeChannelName });
+    } catch (e) {}
+
+    if (activeChannelName && name) {
+      // resolve without the channel name so we know the winning bid for it
+      try {
+        const uriLessChannel = buildURI({ streamName: name });
+        resolveUri(uriLessChannel);
+      } catch (e) {}
+    }
+
+    const isValid = uri && isURIValid(uri);
+    if (uri && isValid && checkAvailability && name) {
+      resolveUri(uri);
+      checkAvailability(name);
+      updatePublishForm({ uri });
+    }
+  }, [name, activeChannelName, resolveUri, updatePublishForm, checkAvailability]);
+
+  // because publish editingUri is channel_short/claim_long and we don't have that, resolve it.
+  useEffect(() => {
+    if (editingURI) {
+      resolveUri(editingURI);
+    }
+  }, [editingURI, resolveUri]);
+
+  // set isMarkdownPost in publish form if so, also update isLivestreamPublish
+  useEffect(() => {
+    updatePublishForm({
+      isMarkdownPost: true,
+      isLivestreamPublish: false,
+    });
+  }, [mode, updatePublishForm]);
+
+  useEffect(() => {
+    if (incognito) {
+      updatePublishForm({ channel: undefined });
+    } else if (activeChannelName) {
+      updatePublishForm({ channel: activeChannelName });
+    }
+  }, [activeChannelName, incognito, updatePublishForm]);
+
+  // if we have a type urlparam, update it? necessary?
+  useEffect(() => {
+    if (!_uploadType) return;
+    const newParams = new URLSearchParams();
+    newParams.set(TYPE_PARAM, mode.toLowerCase());
+    replace({ search: newParams.toString() });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, _uploadType]);
+
+  // @if TARGET='web'
+  function createWebFile() {
+    if (fileText) {
+      const fileName = name || title;
+      if (fileName) {
+        return new File([fileText], `${fileName}.md`, { type: 'text/markdown' });
+      }
+    }
+  }
+  // @endif
+
+  async function handlePublish() {
+    let outputFile = filePath;
+    let runPublish = false;
+
+    // Publish post:
+    // If here is no file selected yet on desktop, show file dialog and let the
+    // user choose a file path. On web a new File is created
+    if (mode === PUBLISH_MODES.POST && !emptyPostError) {
+      // If user modified content on the text editor or editing name has changed:
+      // Save changes and update file path
+      if (fileEdited || nameEdited) {
+        outputFile = createWebFile();
+
+        // New content stored locally and is not empty
+        if (outputFile) {
+          updatePublishForm({ filePath: outputFile });
+          runPublish = true;
+        }
+      } else {
+        // Only metadata has changed.
+        runPublish = true;
+      }
+    }
+
+    if (runPublish) {
+      if (enablePublishPreview) {
+        setPreviewing(true);
+        publish(outputFile, true);
+      } else {
+        publish(outputFile, false);
+      }
+    }
+  }
+
+  // Update mode on editing
+  useEffect(() => {
+    if (autoSwitchMode && editingURI && myClaimForUri) {
+      // Change publish mode to "post" if editing content type is markdown
+      if (fileMimeType === 'text/markdown' && mode !== PUBLISH_MODES.POST) {
+        // Prevent forced mode
+        setAutoSwitchMode(false);
+      }
+    }
+  }, [autoSwitchMode, editingURI, fileMimeType, myClaimForUri, mode, setAutoSwitchMode]);
+
+  if (publishing) {
+    return (
+      <div className="main--empty">
+        <h1 className="section__subtitle">{__('Publishing...')}</h1>
+        <Spinner delayed />
+      </div>
+    );
+  }
+
+  const isFormIncomplete =
+    isClaimingInitialRewards ||
+    formDisabled ||
+    uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS ||
+    !(uploadThumbnailStatus === THUMBNAIL_STATUSES.MANUAL || uploadThumbnailStatus === THUMBNAIL_STATUSES.COMPLETE) ||
+    thumbnailError ||
+    ytSignupPending ||
+    previewing;
+
+  // Editing claim uri
+  return (
+    <div className="card-stack">
+      <h1 className="page__title">
+        <Icon icon={ICONS.POST} />
+        <label>
+          {formTitle}
+          {!isClear && <Button onClick={() => clearPublish()} icon={ICONS.REFRESH} button="primary" label="Clear" />}
+        </label>
+      </h1>
+
+      <PublishPost
+        inEditMode={inEditMode}
+        uri={permanentUrl}
+        mode={mode}
+        fileMimeType={fileMimeType}
+        disabled={disabled || publishing}
+        inProgress={isInProgress}
+        setPrevFileText={setPrevFileText}
+        channelId={claimChannelId}
+        channelName={activeChannelName}
+      />
+
+      {!publishing && (
+        <div className={classnames({ 'card--disabled': formDisabled })}>
+          <Card actions={<SelectThumbnail />} />
+
+          <h2 className="card__title" style={{ marginTop: 'var(--spacing-l)' }}>
+            {__('Tags')}
+          </h2>
+          <TagsSelect
+            suggestMature={!SIMPLE_SITE}
+            disableAutoFocus
+            hideHeader
+            label={__('Selected Tags')}
+            empty={__('No tags added')}
+            limitSelect={TAGS_LIMIT}
+            help={__(
+              "Add tags that are relevant to your content so those who're looking for it can find it more easily. If your content is best suited for mature audiences, ensure it is tagged 'mature'."
+            )}
+            placeholder={__('gaming, crypto')}
+            onSelect={(newTags) => {
+              const validatedTags = [];
+              newTags.forEach((newTag) => {
+                if (!tags.some((tag) => tag.name === newTag.name)) {
+                  validatedTags.push(newTag);
+                }
+              });
+              updatePublishForm({ tags: [...tags, ...validatedTags] });
+            }}
+            onRemove={(clickedTag) => {
+              const newTags = tags.slice().filter((tag) => tag.name !== clickedTag.name);
+              updatePublishForm({ tags: newTags });
+            }}
+            tagsChosen={tags}
+          />
+
+          <PublishAdditionalOptions disabled={formDisabled} />
+        </div>
+      )}
+      <section>
+        <div className="section__actions">
+          <Button button="primary" onClick={handlePublish} label={submitLabel} disabled={isFormIncomplete} />
+          <ChannelSelect disabled={isFormIncomplete} autoSet channelToSet={claimChannelId} isPublishMenu />
+        </div>
+        <p className="help">
+          {!formDisabled && !formValid ? (
+            <PublishFormErrors title={title} mode={mode} />
+          ) : (
+            <I18nMessage
+              tokens={{
+                odysee_terms_of_service: (
+                  <Button
+                    button="link"
+                    href="https://odysee.com/$/tos"
+                    label={__('%site_name% Terms of Service', { site_name: SITE_NAME })}
+                  />
+                ),
+                odysee_community_guidelines: (
+                  <Button
+                    button="link"
+                    href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c"
+                    label={__('community guidelines', { site_name: SITE_NAME })}
+                  />
+                ),
+              }}
+            >
+              By continuing, you accept the %odysee_terms_of_service% and %odysee_community_guidelines%.
+            </I18nMessage>
+          )}
+        </p>
+      </section>
+    </div>
+  );
+}
+
+export default PostForm;

ui/component/publish/post/publishPost/index.js

@@ -5,7 +5,7 @@ import { doUpdatePublishForm, doClearPublish } from 'redux/actions/publish';
 import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
 import { doToast } from 'redux/actions/notifications';
 import { selectFfmpegStatus } from 'redux/selectors/settings';
-import PublishPage from './view';
+import PostPage from './view';
 
 const select = (state, props) => ({
   name: makeSelectPublishFormValue('name')(state),
@@ -29,4 +29,4 @@ const perform = {
   doToast,
 };
 
-export default connect(select, perform)(PublishPage);
+export default connect(select, perform)(PostPage);

ui/component/publish/post/publishPost/view.jsx

@@ -0,0 +1,70 @@
+// @flow
+import React from 'react';
+import PostEditor from 'component/postEditor';
+import Card from 'component/common/card';
+import { FormField } from 'component/common/form';
+import PublishName from 'component/publish/shared/publishName';
+import classnames from 'classnames';
+
+type Props = {
+  uri: ?string,
+  title: ?string,
+  balance: number,
+  fileMimeType: ?string,
+  doUpdatePublishForm: ({}) => void,
+  disabled: boolean,
+  setPrevFileText: (string) => void,
+};
+
+function PublishPost(props: Props) {
+  const {
+    uri,
+    title,
+    balance,
+    fileMimeType,
+    doUpdatePublishForm: updatePublishForm,
+    disabled,
+    setPrevFileText,
+  } = props;
+
+  function handleTitleChange(event) {
+    updatePublishForm({ title: event.target.value });
+  }
+
+  return (
+    <Card
+      className={classnames({
+        'card--disabled': disabled || balance === 0,
+      })}
+      actions={
+        <div className="card--file">
+          <React.Fragment>
+            <FormField
+              type="text"
+              name="content_title"
+              label={__('Title')}
+              placeholder={__('Descriptive titles work best')}
+              disabled={disabled}
+              value={title}
+              onChange={handleTitleChange}
+              className="fieldset-group"
+              max="200"
+              autoFocus
+              autoComplete="off"
+            />
+            <PublishName uri={uri} />
+            <PostEditor
+              label={__('Post --[noun, markdown post tab button]--')}
+              uri={uri}
+              disabled={disabled}
+              fileMimeType={fileMimeType}
+              setPrevFileText={setPrevFileText}
+            />
+          </React.Fragment>
+        </div>
+      }
+    />
+  );
+}
+
+export default PublishPost;

ui/component/publish/shared/publishAdditionalOptions/view.jsx

@@ -1,15 +1,16 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
-import usePersistedState from 'effects/use-persisted-state';
+// import usePersistedState from 'effects/use-persisted-state';
 import { FormField } from 'component/common/form';
 import Button from 'component/button';
-import PublishReleaseDate from 'component/publishReleaseDate';
+import PublishReleaseDate from '../publishReleaseDate';
 import LicenseType from './license-type';
 import Card from 'component/common/card';
 import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import { sortLanguageMap } from 'util/default-languages';
-import PublishBid from 'component/publishBid';
+import PublishBid from '../publishBid';
+import PublishPrice from 'component/publish/shared/publishPrice';
 
 // @if TARGET='app'
 // import ErrorText from 'component/common/error-text';
@@ -29,6 +30,7 @@ type Props = {
   useLBRYUploader: boolean,
   needsYTAuth: boolean,
   showSchedulingOptions: boolean,
+  isLivestream?: Boolean,
 };
 
 function PublishAdditionalOptions(props: Props) {
@@ -41,13 +43,15 @@ function PublishAdditionalOptions(props: Props) {
     updatePublishForm,
     showSchedulingOptions,
     disabled,
+    isLivestream,
     // user,
     // useLBRYUploader,
     // needsYTAuth,
     // accessToken,
     // fetchAccessToken,
   } = props;
-  const [hideSection, setHideSection] = usePersistedState('publish-advanced-options', true);
+  // const [hideSection, setHideSection] = usePersistedState('publish-advanced-options', true);
+  const [hideSection, setHideSection] = useState(disabled);
   //   const [hasLaunchedLbryFirst, setHasLaunchedLbryFirst] = React.useState(false);
   //   const [ytError, setYtError] = React.useState(false);
   //   const isLBRYFirstUser = user && user.lbry_first_approved;
@@ -120,47 +124,9 @@ function PublishAdditionalOptions(props: Props) {
         className="card--enable-overflow card--publish-section card--additional-options"
         actions={
           <React.Fragment>
-            {!hideSection && (
+            {!hideSection && !disabled && (
               <>
-                <div className="publish-row">
-                  <PublishBid disabled={disabled} />
-                </div>
                 <div className={classnames({ 'card--disabled': !name })}>
-                  {/* @if TARGET='app' */}
-                  {/* {showLbryFirstCheckbox && (
-                <div className="section">
-                  <>
-                    <FormField
-                      checked={useLBRYUploader}
-                      type="checkbox"
-                      name="use_lbry_uploader_checkbox"
-                      onChange={event => updatePublishForm({ useLBRYUploader: !useLBRYUploader })}
-                      label={
-                        <React.Fragment>
-                          {__('Automagically upload to your youtube channel.')}{' '}
-                          <Button button="link" href="https://lbry.com/faq/lbry-uploader" label={__('Learn More')} />
-                        </React.Fragment>
-                      }
-                    />
-                    {useLBRYUploader && (
-                      <div className="section__actions">
-                        {needsYTAuth ? (
-                          <Button
-                            button="primary"
-                            onClick={signup}
-                            label={__('Log In With YouTube')}
-                            disabled={false}
-                          />
-                        ) : (
-                          <Button button="alt" onClick={unlink} label={__('Unlink YouTube Channel')} disabled={false} />
-                        )}
-                        {ytError && <ErrorText>{__('There was an error with LBRY first publishing.')}</ErrorText>}
-                      </div>
-                    )}
-                  </>
-                </div>
-              )} */}
-                  {/* @endif */}
                   <div className="section">
                     <div className="publish-row">{!showSchedulingOptions && <PublishReleaseDate />}</div>
 
@@ -201,6 +167,14 @@ function PublishAdditionalOptions(props: Props) {
                     </div>
                   </div>
                 </div>
+                {!isLivestream && (
+                  <div className="publish-row">
+                    <PublishPrice disabled={!name} />
+                  </div>
+                )}
+                <div className="publish-row">
+                  <PublishBid />
+                </div>
               </>
             )}
 

ui/component/publish/shared/publishBid/index.js

@@ -7,7 +7,7 @@ import {
   selectTakeOverAmount,
 } from 'redux/selectors/publish';
 import { doUpdatePublishForm, doPrepareEdit } from 'redux/actions/publish';
-import PublishPage from './view';
+import UploadPage from './view';
 
 const select = (state) => ({
   name: makeSelectPublishFormValue('name')(state),
@@ -24,4 +24,4 @@ const perform = (dispatch) => ({
   prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
 });
 
-export default connect(select, perform)(PublishPage);
+export default connect(select, perform)(UploadPage);

ui/component/publish/shared/publishBid/view.jsx

@@ -44,6 +44,7 @@ function PublishName(props: Props) {
 
   return (
     <Card
+      className={!name ? 'disabled' : ''}
       actions={
         <FormField
           type="number"
@@ -52,10 +53,9 @@ function PublishName(props: Props) {
           step="any"
           placeholder="0.123"
           className="form-field--price-amount"
-          label={<LbcSymbol postfix={__('Deposit')} size={12} />}
+          label={<LbcSymbol disabled={!name} postfix={__('Deposit')} size={12} />}
           value={bid}
           error={bidError}
-          disabled={!name}
           onChange={(event) => updatePublishForm({ bid: parseFloat(event.target.value) })}
           onWheel={(e) => e.stopPropagation()}
           helper={

ui/component/publish/shared/publishFormErrors/index.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { makeSelectPublishFormValue, selectIsStillEditing } from 'redux/selectors/publish';
-import PublishPage from './view';
+import UploadPage from './view';
 
 const select = (state) => ({
   bid: makeSelectPublishFormValue('bid')(state),
@@ -14,4 +14,4 @@ const select = (state) => ({
   isStillEditing: selectIsStillEditing(state),
 });
 
-export default connect(select, null)(PublishPage);
+export default connect(select, null)(UploadPage);

ui/component/publish/shared/publishName/index.js

@@ -8,7 +8,7 @@ import {
   selectCurrentUploads,
 } from 'redux/selectors/publish';
 import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
-import PublishPage from './view';
+import UploadPage from './view';
 
 const select = (state) => ({
   name: makeSelectPublishFormValue('name')(state),
@@ -27,4 +27,4 @@ const perform = (dispatch) => ({
   prepareEdit: (claim, uri) => dispatch(doPrepareEdit(claim, uri)),
 });
 
-export default connect(select, perform)(PublishPage);
+export default connect(select, perform)(UploadPage);

ui/component/publish/shared/publishName/view.jsx

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from 'react';
 import { isNameValid } from 'util/lbryURI';
 import { FormField } from 'component/common/form';
 import NameHelpText from './name-help-text';
+import { useIsMobile } from 'effects/use-screensize';
 
 type Props = {
   name: string,
@@ -36,7 +37,9 @@ function PublishName(props: Props) {
   const [nameError, setNameError] = useState(undefined);
   const [blurred, setBlurred] = React.useState(false);
   const activeChannelName = activeChannelClaim && activeChannelClaim.name;
-  let prefix = IS_WEB ? `${DOMAIN}/` : 'lbry://';
+  const isMobile = useIsMobile();
+
+  let prefix = IS_WEB ? (isMobile ? '' : `${DOMAIN}/`) : 'lbry://';
   if (activeChannelName && !incognito) {
     prefix += `${activeChannelName}/`;
   }
@@ -81,6 +84,7 @@ function PublishName(props: Props) {
           disabled={isStillEditing}
           onChange={handleNameChange}
           onBlur={() => setBlurred(true)}
+          autoComplete="off"
         />
       </fieldset-group>
 

ui/component/publish/shared/publishPrice/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { makeSelectPublishFormValue } from 'redux/selectors/publish';
 import { doUpdatePublishForm } from 'redux/actions/publish';
-import PublishPage from './view';
+import UploadPage from './view';
 
 const select = (state) => ({
   contentIsFree: makeSelectPublishFormValue('contentIsFree')(state),
@@ -12,4 +12,4 @@ const perform = (dispatch) => ({
   updatePublishForm: (values) => dispatch(doUpdatePublishForm(values)),
 });
 
-export default connect(select, perform)(PublishPage);
+export default connect(select, perform)(UploadPage);

ui/component/publish/shared/publishPrice/view.jsx

@@ -0,0 +1,59 @@
+// @flow
+import React from 'react';
+import { FormField, FormFieldPrice } from 'component/common/form';
+// import Card from 'component/common/card';
+
+type Props = {
+  contentIsFree: boolean,
+  fee: Fee,
+  disabled: boolean,
+  updatePublishForm: ({}) => void,
+};
+
+function PublishPrice(props: Props) {
+  const { contentIsFree, fee, updatePublishForm, disabled } = props;
+
+  return (
+    <>
+      <fieldset-section>
+        <label className={disabled ? 'disabled' : ''}>{__('Price')}</label>
+        <React.Fragment>
+          <FormField
+            type="radio"
+            name="content_free"
+            label={__('Free')}
+            checked={contentIsFree}
+            disabled={disabled}
+            onChange={() => updatePublishForm({ contentIsFree: true })}
+          />
+
+          <FormField
+            type="radio"
+            name="content_cost"
+            label={__('Add a price to this file')}
+            checked={!contentIsFree}
+            disabled={disabled}
+            onChange={() => updatePublishForm({ contentIsFree: false })}
+          />
+          {!contentIsFree && (
+            <FormFieldPrice
+              name="content_cost_amount"
+              min={0}
+              price={fee}
+              onChange={(newFee) => updatePublishForm({ fee: newFee })}
+            />
+          )}
+          {fee && fee.currency !== 'LBC' && (
+            <p className="form-field__help">
+              {__(
+                'All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.'
+              )}
+            </p>
+          )}
+        </React.Fragment>
+      </fieldset-section>
+    </>
+  );
+}
+
+export default PublishPrice;

ui/component/publish/shared/publishReleaseDate/view.jsx

@@ -38,7 +38,7 @@ const PublishReleaseDate = (props: Props) => {
     useMaxDate = true,
   } = props;
   const maxDate = useMaxDate ? new Date() : undefined;
-  const [date, setDate] = React.useState(releaseTime ? linuxTimestampToDate(releaseTime) : new Date());
+  const [date, setDate] = React.useState(releaseTime ? linuxTimestampToDate(releaseTime) : undefined);
   const [error, setError] = React.useState([]);
 
   const isNew = releaseTime === undefined;

ui/component/publish/upload/publishFile/index.js

@@ -0,0 +1,35 @@
+import { connect } from 'react-redux';
+import { selectBalance } from 'redux/selectors/wallet';
+import { selectIsStillEditing, makeSelectPublishFormValue, selectMyClaimForUri } from 'redux/selectors/publish';
+import { doUpdatePublishForm, doClearPublish } from 'redux/actions/publish';
+// import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
+import { doToast } from 'redux/actions/notifications';
+import { selectFfmpegStatus } from 'redux/selectors/settings';
+import UploadPage from './view';
+
+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),
+  publishing: makeSelectPublishFormValue('publishing')(state),
+  ffmpegStatus: selectFfmpegStatus(state),
+  size: makeSelectPublishFormValue('fileSize')(state),
+  duration: makeSelectPublishFormValue('fileDur')(state),
+  isVid: makeSelectPublishFormValue('fileVid')(state),
+  myClaimForUri: selectMyClaimForUri(state),
+  activeChannelClaim: selectActiveChannelClaim(state),
+  // isLivestreamClaim: selectIsStreamPlaceholderForUri(state, props.uri),
+});
+
+const perform = {
+  doClearPublish,
+  doUpdatePublishForm,
+  doToast,
+};
+
+export default connect(select, perform)(UploadPage);

ui/component/publish/upload/publishFile/view.jsx

@@ -0,0 +1,468 @@
+// @flow
+import { SITE_NAME, WEB_PUBLISH_SIZE_LIMIT_GB, SIMPLE_SITE } from 'config';
+import React, { useState, useEffect } from 'react';
+import Lbry from 'lbry';
+import { toHex } from 'util/hex';
+import { regexInvalidURI } from 'util/lbryURI';
+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 Spinner from 'component/spinner';
+import * as PUBLISH_MODES from 'constants/publish_types';
+import PublishName from 'component/publish/shared/publishName';
+import classnames from 'classnames';
+import { SOURCE_SELECT } from 'constants/publish_sources';
+import { NEW_LIVESTREAM_REPLAY_API } from 'constants/livestream';
+
+type Props = {
+  uri: ?string,
+  mode: ?string,
+  name: ?string,
+  title: ?string,
+  filePath: string | WebFile,
+  isStillEditing: boolean,
+  balance: number,
+  doUpdatePublishForm: ({}) => void,
+  disabled: boolean,
+  doToast: ({ message: string, isError?: boolean }) => void,
+  size: number,
+  duration: number,
+  isVid: boolean,
+  setPublishMode: (string) => void,
+  setOverMaxBitrate: (boolean) => void,
+  fileSource: string,
+  myClaimForUri: ?StreamClaim,
+  activeChannelClaim: ?ChannelClaim,
+  // inEditMode: boolean,
+};
+
+function PublishFile(props: Props) {
+  const {
+    uri,
+    mode,
+    name,
+    title,
+    balance,
+    filePath,
+    isStillEditing,
+    doUpdatePublishForm: updatePublishForm,
+    doToast,
+    disabled,
+    size,
+    duration,
+    isVid,
+    setPublishMode,
+    // setPrevFileText,
+    // setWaitForFile,
+    setOverMaxBitrate,
+    fileSource,
+    myClaimForUri,
+    activeChannelClaim,
+    // inEditMode,
+  } = props;
+
+  const RECOMMENDED_BITRATE = 8500000;
+  const MAX_BITRATE = 16500000;
+  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 MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown'];
+  const [oversized, setOversized] = useState(false);
+  const [currentFile, setCurrentFile] = useState(null);
+  const [currentFileType, setCurrentFileType] = useState(null);
+  const UPLOAD_SIZE_MESSAGE = __('%SITE_NAME% uploads are limited to %limit% GB.', {
+    SITE_NAME,
+    limit: TV_PUBLISH_SIZE_LIMIT_GB_STR,
+  });
+
+  const bitRate = getBitrate(size, duration);
+  const bitRateIsOverMax = bitRate > MAX_BITRATE;
+
+  const [livestreamData, setLivestreamData] = React.useState([]);
+  const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
+
+  const claimChannelId =
+    (myClaimForUri && myClaimForUri.signing_channel && myClaimForUri.signing_channel.claim_id) ||
+    (activeChannelClaim && activeChannelClaim.claim_id);
+  const activeChannelName = activeChannelClaim && activeChannelClaim.name;
+  // const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
+
+  // Reset filePath if publish mode changed
+  useEffect(() => {
+    if (mode === PUBLISH_MODES.POST) {
+      if (currentFileType !== 'text/markdown' && !isStillEditing) {
+        updatePublishForm({ filePath: '' });
+      }
+    } else if (mode === PUBLISH_MODES.LIVESTREAM) {
+      updatePublishForm({ filePath: '' });
+    }
+  }, [currentFileType, mode, isStillEditing, updatePublishForm]);
+
+  useEffect(() => {
+    updatePublishForm({ title: title });
+  }, [filePath]);
+
+  /*
+  const normalizeUrlForProtocol = (url) => {
+    if (url.startsWith('https://')) {
+      return url;
+    } else {
+      if (url.startsWith('http://')) {
+        return url;
+      } else if (url) {
+        return `https://${url}`;
+      }
+    }
+  };
+  */
+
+  useEffect(() => {
+    if (!filePath || filePath === '') {
+      setCurrentFile('');
+      setOversized(false);
+      setOverMaxBitrate(false);
+      updateFileInfo(0, 0, false);
+    } else if (typeof filePath !== 'string') {
+      // Update currentFile file
+      if (filePath.name !== currentFile && filePath.path !== currentFile) {
+        handleFileChange(filePath);
+      }
+    }
+  }, [filePath, currentFile, doToast, updatePublishForm]);
+
+  useEffect(() => {
+    setOverMaxBitrate(bitRateIsOverMax);
+  }, [bitRateIsOverMax]);
+
+  async function fetchLivestreams(channelId, channelName) {
+    // setCheckingLivestreams(true);
+    let signedMessage;
+    try {
+      await Lbry.channel_sign({
+        channel_id: channelId,
+        hexdata: toHex(channelName || ''),
+      }).then((data) => {
+        signedMessage = data;
+      });
+    } catch (e) {
+      throw e;
+    }
+    if (signedMessage) {
+      const encodedChannelName = encodeURIComponent(channelName || '');
+      const newEndpointUrl =
+        `${NEW_LIVESTREAM_REPLAY_API}?channel_claim_id=${String(channelId)}` +
+        `&signature=${signedMessage.signature}&signature_ts=${signedMessage.signing_ts}&channel_name=${
+          encodedChannelName || ''
+        }`;
+
+      const responseFromNewApi = await fetch(newEndpointUrl);
+
+      const data = (await responseFromNewApi.json()).data;
+
+      let newData = [];
+      if (data && data.length > 0) {
+        for (const dataItem of data) {
+          if (dataItem.Status.toLowerCase() === 'inprogress' || dataItem.Status.toLowerCase() === 'ready') {
+            const objectToPush = {
+              data: {
+                fileLocation: dataItem.URL,
+                fileDuration:
+                  dataItem.Status.toLowerCase() === 'inprogress'
+                    ? __('Processing...(') + dataItem.PercentComplete + '%)'
+                    : (dataItem.Duration / 1000000000).toString(),
+                thumbnails: dataItem.ThumbnailURLs !== null ? dataItem.ThumbnailURLs : [],
+                uploadedAt: dataItem.Created,
+              },
+            };
+            newData.push(objectToPush);
+          }
+        }
+      }
+
+      setLivestreamData(newData);
+      // setCheckingLivestreams(false);
+    }
+  }
+
+  useEffect(() => {
+    if (activeChannelClaim && activeChannelClaim.claim_id && activeChannelName) {
+      fetchLivestreams(activeChannelClaim.claim_id, activeChannelName);
+    }
+  }, [claimChannelId, activeChannelName]);
+
+  useEffect(() => {
+    if (activeChannelClaim && activeChannelClaim.claim_id && activeChannelName) {
+      fetchLivestreams(activeChannelClaim.claim_id, activeChannelName);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [claimChannelId, activeChannelName]);
+
+  function updateFileInfo(duration, size, isvid) {
+    updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
+  }
+
+  function getBitrate(size, duration) {
+    const s = Number(size);
+    const d = Number(duration);
+    if (s && d) {
+      return (s * 8) / d;
+    } else {
+      return 0;
+    }
+  }
+
+  function linkReplays() {
+    return (
+      <p className="help--link">
+        {__('Would you like to publish a ')}
+        <Button button="link" label={__('Livestream Replay instead')} navigate="/$/livestream?s=Replay" />?
+      </p>
+    );
+  }
+
+  function getUploadMessage() {
+    // @if TARGET='web'
+    if (oversized) {
+      return (
+        <p className="help--error">
+          {UPLOAD_SIZE_MESSAGE}{' '}
+          <Button button="link" label={__('Upload Guide')} href="https://odysee.com/@OdyseeHelp:b/uploadguide:1" />
+        </p>
+      );
+    }
+    // @endif
+
+    if (isVid && duration && bitRate > RECOMMENDED_BITRATE) {
+      return (
+        <p className="help--warning">
+          {bitRateIsOverMax
+            ? __(
+                'Your video has a bitrate over ~16 Mbps and cannot be processed at this time. We suggest transcoding to provide viewers the best experience.'
+              )
+            : __(
+                'Your video has a bitrate over 8 Mbps. We suggest transcoding to provide viewers the best experience.'
+              )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+
+    if (isVid && !duration) {
+      return (
+        <p className="help--warning">
+          {__(
+            'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming.'
+          )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+
+    if (!!isStillEditing && name) {
+      return (
+        <p className="help">
+          {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
+        </p>
+      );
+    }
+    // @if TARGET='web'
+    if (!isStillEditing) {
+      return (
+        <p className="help">
+          {__(
+            'For video content, use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming. %SITE_NAME% uploads are restricted to %limit% GB.',
+            { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_GB_STR }
+          )}{' '}
+          <Button
+            button="link"
+            label={__('Upload Guide')}
+            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
+          />
+        </p>
+      );
+    }
+    // @endif
+  }
+
+  function parseName(newName) {
+    let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
+    return newName.replace(INVALID_URI_CHARS, '-');
+  }
+
+  function handleTitleChange(event) {
+    updatePublishForm({ title: event.target.value });
+  }
+
+  function handleFileReaderLoaded(event: ProgressEvent) {
+    // See: https://github.com/facebook/flow/issues/3470
+    if (event.target instanceof FileReader) {
+      const text = event.target.result;
+      updatePublishForm({ fileText: text });
+      setPublishMode(PUBLISH_MODES.POST);
+    }
+  }
+
+  function handleFileChange(file: WebFile, clearName = true) {
+    window.URL = window.URL || window.webkitURL;
+    setOversized(false);
+    setOverMaxBitrate(false);
+
+    // $FlowFixMe
+    titleInput.current.input.current.focus();
+
+    // select file, start to select a new one, then cancel
+    if (!file) {
+      if (isStillEditing || !clearName) {
+        updatePublishForm({ filePath: '' });
+      } else {
+        updatePublishForm({ filePath: '', name: '' });
+      }
+      return;
+    }
+
+    // if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
+    const contentType = file.type && file.type.split('/');
+    const isVideo = contentType && contentType[0] === 'video';
+    const isMp4 = contentType && contentType[1] === 'mp4';
+
+    let isTextPost = false;
+
+    if (contentType && contentType[0] === 'text') {
+      isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
+      setCurrentFileType(contentType);
+    } else if (file.name) {
+      // If user's machine is missign a valid content type registration
+      // for markdown content: text/markdown, file extension will be used instead
+      const extension = file.name.split('.').pop();
+      isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
+    }
+
+    if (isVideo) {
+      if (isMp4) {
+        const video = document.createElement('video');
+        video.preload = 'metadata';
+        video.onloadedmetadata = () => {
+          updateFileInfo(video.duration, file.size, isVideo);
+          window.URL.revokeObjectURL(video.src);
+        };
+        video.onerror = () => {
+          updateFileInfo(0, file.size, isVideo);
+        };
+        video.src = window.URL.createObjectURL(file);
+      } else {
+        updateFileInfo(0, file.size, isVideo);
+      }
+    } else {
+      updateFileInfo(0, file.size, isVideo);
+    }
+
+    // Strip off extention and replace invalid characters
+    let fileName = name || (file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || '';
+    autofillTitle(file);
+
+    if (isTextPost) {
+      // Create reader
+      const reader = new FileReader();
+      // Handler for file reader
+      reader.addEventListener('load', handleFileReaderLoaded);
+      // Read file contents
+      reader.readAsText(file);
+      setCurrentFileType('text/markdown');
+    } else {
+      // setPublishMode(PUBLISH_MODES.FILE);
+    }
+
+    // @if TARGET='web'
+    // we only need to enforce file sizes on 'web'
+    if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
+      setOversized(true);
+      doToast({ message: __(UPLOAD_SIZE_MESSAGE), isError: true });
+      updatePublishForm({ filePath: '' });
+      return;
+    }
+    // @endif
+
+    const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
+      // if electron, we'll set filePath to the path string because SDK is handling publishing.
+      // File.path will be undefined from web due to browser security, so it will default to the File Object.
+      filePath: file.path || file,
+    };
+
+    if (!isStillEditing) {
+      publishFormParams.name = parseName(fileName);
+    }
+
+    // File path is not supported on web for security reasons so we use the name instead.
+    setCurrentFile(file.path || file.name);
+    updatePublishForm(publishFormParams);
+  }
+
+  function autofillTitle(file) {
+    const newTitle = (file && file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || name || '';
+    if (!title) updatePublishForm({ title: newTitle });
+  }
+
+  const titleInput = React.createRef();
+
+  return (
+    <Card
+      className={classnames({
+        'card--disabled': disabled || balance === 0,
+      })}
+      actions={
+        <>
+          <div className="card--file">
+            <React.Fragment>
+              <>
+                <FileSelector
+                  disabled={disabled}
+                  currentPath={currentFile}
+                  onFileChosen={handleFileChange}
+                  accept={SIMPLE_SITE ? 'video/mp4,video/x-m4v,video/*,audio/*,image/*' : undefined}
+                  placeholder={
+                    SIMPLE_SITE ? __('Select video, audio or image file to upload') : __('Select a file to upload')
+                  }
+                  autoFocus
+                />
+                {getUploadMessage()}
+                {hasLivestreamData && linkReplays()}
+
+                {fileSource === SOURCE_SELECT && (
+                  <div className="main--empty empty">
+                    <Spinner small />
+                  </div>
+                )}
+              </>
+              <div className="form-spacer">
+                <FormField
+                  type="text"
+                  name="content_title"
+                  label={__('Title')}
+                  placeholder={__('Descriptive titles work best')}
+                  disabled={disabled}
+                  value={title}
+                  onChange={handleTitleChange}
+                  className="fieldset-group"
+                  max="200"
+                  ref={titleInput}
+                />
+              </div>
+              <PublishName uri={uri} />
+            </React.Fragment>
+          </div>
+        </>
+      }
+    />
+  );
+}
+
+export default PublishFile;

ui/component/publish/upload/uploadForm/index.js

@@ -0,0 +1,65 @@
+import { connect } from 'react-redux';
+import { doResetThumbnailStatus, doClearPublish, doUpdatePublishForm, doPublishDesktop } from 'redux/actions/publish';
+import { doResolveUri, doCheckPublishNameAvailability } from 'redux/actions/claims';
+import {
+  selectPublishFormValues,
+  selectIsStillEditing,
+  makeSelectPublishFormValue,
+  selectMyClaimForUri,
+} from 'redux/selectors/publish';
+import { selectIsStreamPlaceholderForUri } from 'redux/selectors/claims';
+import * as RENDER_MODES from 'constants/file_render_modes';
+import * as SETTINGS from 'constants/settings';
+import { doClaimInitialRewards } from 'redux/actions/rewards';
+import {
+  selectUnclaimedRewardValue,
+  selectIsClaimingInitialRewards,
+  selectHasClaimedInitialRewards,
+} from 'redux/selectors/rewards';
+import { selectModal, selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
+import { selectClientSetting } from 'redux/selectors/settings';
+import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
+import { selectUser } from 'redux/selectors/user';
+import UploadForm from './view';
+
+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
+    isLivestreamClaim: selectIsStreamPlaceholderForUri(state, permanentUrl),
+    isPostClaim,
+    permanentUrl,
+    // My previously published claims under this short lbry uri
+    myClaimForUri,
+    // 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),
+    filePath: makeSelectPublishFormValue('filePath')(state),
+    remoteUrl: makeSelectPublishFormValue('remoteFileUrl')(state),
+    publishSuccess: makeSelectPublishFormValue('publishSuccess')(state),
+    totalRewardValue: selectUnclaimedRewardValue(state),
+    modal: selectModal(state),
+    enablePublishPreview: selectClientSetting(state, SETTINGS.ENABLE_PUBLISH_PREVIEW),
+    activeChannelClaim: selectActiveChannelClaim(state),
+    incognito: selectIncognito(state),
+    isClaimingInitialRewards: selectIsClaimingInitialRewards(state),
+    hasClaimedInitialRewards: selectHasClaimedInitialRewards(state),
+  };
+};
+
+const perform = (dispatch) => ({
+  updatePublishForm: (value) => dispatch(doUpdatePublishForm(value)),
+  clearPublish: () => dispatch(doClearPublish()),
+  resolveUri: (uri) => dispatch(doResolveUri(uri)),
+  publish: (filePath, preview) => dispatch(doPublishDesktop(filePath, preview)),
+  resetThumbnailStatus: () => dispatch(doResetThumbnailStatus()),
+  checkAvailability: (name) => dispatch(doCheckPublishNameAvailability(name)),
+  claimInitialRewards: () => dispatch(doClaimInitialRewards()),
+});
+
+export default connect(select, perform)(UploadForm);

ui/component/publish/upload/uploadForm/view.jsx

@@ -10,33 +10,28 @@
 
 import { SITE_NAME, ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
 import React, { useEffect, useState } from 'react';
-import Lbry from 'lbry';
 import { buildURI, isURIValid, isNameValid } from 'util/lbryURI';
 import * as THUMBNAIL_STATUSES from 'constants/thumbnail_upload_statuses';
 import Button from 'component/button';
 import ChannelSelect from 'component/channelSelector';
 import classnames from 'classnames';
 import TagsSelect from 'component/tagsSelect';
-import PublishDescription from 'component/publishDescription';
-import PublishPrice from 'component/publishPrice';
-import PublishFile from 'component/publishFile';
-import PublishAdditionalOptions from 'component/publishAdditionalOptions';
-import PublishFormErrors from 'component/publishFormErrors';
+import PublishDescription from 'component/publish/shared/publishDescription';
+import PublishAdditionalOptions from 'component/publish/shared/publishAdditionalOptions';
+import PublishFormErrors from 'component/publish/shared/publishFormErrors';
+import PublishStreamReleaseDate from 'component/publish/shared/publishStreamReleaseDate';
+import PublishFile from 'component/publish/upload/publishFile';
+
 import SelectThumbnail from 'component/selectThumbnail';
 import Card from 'component/common/card';
 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';
-import { NEW_LIVESTREAM_REPLAY_API } from 'constants/livestream';
-import PublishStreamReleaseDate from 'component/publishStreamReleaseDate';
 import { SOURCE_NONE } from 'constants/publish_sources';
 
-// @if TARGET='app'
-import fs from 'fs';
-import tempy from 'tempy';
-// @endif
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
 
 type Props = {
   disabled: boolean,
@@ -63,7 +58,6 @@ type Props = {
   },
   name: ?string,
   nameError: ?string,
-  isResolvingUri: boolean,
   winningBidForClaimUri: number,
   myClaimForUri: ?StreamClaim,
   licenseType: string,
@@ -72,14 +66,12 @@ type Props = {
   useLBRYUploader: ?boolean,
   publishing: boolean,
   publishSuccess: boolean,
+  publishError?: boolean,
   balance: number,
   isStillEditing: boolean,
   clearPublish: () => void,
   resolveUri: (string) => void,
-  scrollToTop: () => void,
-  prepareEdit: (claim: any, uri: string) => void,
   resetThumbnailStatus: () => void,
-  amountNeededForTakeover: ?number,
   // Add back type
   updatePublishForm: (any) => void,
   checkAvailability: (string) => void,
@@ -89,8 +81,6 @@ type Props = {
   activeChannelClaim: ?ChannelClaim,
   incognito: boolean,
   user: ?User,
-  isLivestreamClaim: boolean,
-  isPostClaim: boolean,
   permanentUrl: ?string,
   remoteUrl: ?string,
   isClaimingInitialRewards: boolean,
@@ -98,7 +88,7 @@ type Props = {
   hasClaimedInitialRewards: boolean,
 };
 
-function PublishForm(props: Props) {
+function UploadForm(props: Props) {
   // Detect upload type from query in URL
   const {
     thumbnail,
@@ -110,7 +100,7 @@ function PublishForm(props: Props) {
     title,
     bid,
     bidError,
-    releaseTimeError,
+    description,
     uploadThumbnailStatus,
     resetThumbnailStatus,
     updatePublishForm,
@@ -118,6 +108,7 @@ function PublishForm(props: Props) {
     fileText,
     publishing,
     publishSuccess,
+    publishError,
     clearPublish,
     isStillEditing,
     tags,
@@ -130,8 +121,6 @@ function PublishForm(props: Props) {
     activeChannelClaim,
     incognito,
     user,
-    isLivestreamClaim,
-    isPostClaim,
     permanentUrl,
     remoteUrl,
     isClaimingInitialRewards,
@@ -152,52 +141,19 @@ function PublishForm(props: Props) {
   const AVAILABLE_MODES = Object.values(PUBLISH_MODES).filter((mode) => {
     // $FlowFixMe
     if (inEditMode) {
-      if (isPostClaim) {
-        return mode === PUBLISH_MODES.POST;
-      } else if (isLivestreamClaim) {
-        return mode === PUBLISH_MODES.LIVESTREAM && enableLivestream;
-      } else {
-        return mode === PUBLISH_MODES.FILE;
-      }
+      return mode === PUBLISH_MODES.FILE;
     } else if (_uploadType) {
       return mode === _uploadType && (mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream);
-    } else {
-      return mode !== PUBLISH_MODES.LIVESTREAM || enableLivestream;
     }
   });
 
   const MODE_TO_I18N_STR = {
     [PUBLISH_MODES.FILE]: SIMPLE_SITE ? 'Video/Audio' : 'File',
-    [PUBLISH_MODES.POST]: 'Post --[noun, markdown post tab button]--',
-    [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
   };
 
-  const defaultPublishMode = isLivestreamClaim ? PUBLISH_MODES.LIVESTREAM : PUBLISH_MODES.FILE;
-  const [mode, setMode] = React.useState(_uploadType || defaultPublishMode);
-  const [isCheckingLivestreams, setCheckingLivestreams] = React.useState(false);
+  const formTitle = !editingURI ? __('Upload a File') : __('Edit Upload');
 
-  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 content');
-    } else {
-      customSubtitle = __('Upload that unlabeled video or cassette you found behind the TV in 1991');
-    }
-  }
-
-  const [autoSwitchMode, setAutoSwitchMode] = React.useState(true);
+  const mode = PUBLISH_MODES.FILE;
 
   // Used to check if the url name has changed:
   // A new file needs to be provided
@@ -208,7 +164,6 @@ function PublishForm(props: Props) {
 
   const [waitForFile, setWaitForFile] = useState(false);
   const [overMaxBitrate, setOverMaxBitrate] = useState(false);
-  const [livestreamData, setLivestreamData] = React.useState([]);
 
   const TAGS_LIMIT = 5;
   const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath && !remoteUrl;
@@ -238,7 +193,6 @@ function PublishForm(props: Props) {
     bid &&
     thumbnail &&
     !bidError &&
-    !releaseTimeError &&
     !emptyPostError &&
     !(thumbnailError && !thumbnailUploaded) &&
     !(uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS);
@@ -253,12 +207,7 @@ function PublishForm(props: Props) {
 
   const [previewing, setPreviewing] = React.useState(false);
 
-  useEffect(() => {
-    if (claimChannelId) {
-      fetchLivestreams(claimChannelId, activeChannelName);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [claimChannelId]);
+  const isClear = !filePath && !title && !name && !description && !thumbnail;
 
   useEffect(() => {
     if (!hasClaimedInitialRewards) {
@@ -276,79 +225,30 @@ function PublishForm(props: Props) {
     }
   }, [modal]);
 
-  // move this to lbryinc OR to a file under ui, and/or provide a standardized livestreaming config.
-  async function fetchLivestreams(channelId, channelName) {
-    setCheckingLivestreams(true);
-    let signedMessage;
-    try {
-      await Lbry.channel_sign({
-        channel_id: channelId,
-        hexdata: toHex(channelName || ''),
-      }).then((data) => {
-        signedMessage = data;
-      });
-    } catch (e) {
-      throw e;
+  useEffect(() => {
+    if (publishError) {
+      setPreviewing(false);
+      updatePublishForm({ publishError: undefined });
     }
-    if (signedMessage) {
-      const encodedChannelName = encodeURIComponent(channelName || '');
-      const newEndpointUrl =
-        `${NEW_LIVESTREAM_REPLAY_API}?channel_claim_id=${channelId}` +
-        `&signature=${signedMessage.signature}&signature_ts=${signedMessage.signing_ts}&channel_name=${
-          encodedChannelName || ''
-        }`;
+  }, [publishError]);
 
-      const responseFromNewApi = await fetch(newEndpointUrl);
-
-      const data = (await responseFromNewApi.json()).data;
-
-      let newData = [];
-      if (data && data.length > 0) {
-        for (const dataItem of data) {
-          if (dataItem.Status.toLowerCase() === 'inprogress' || dataItem.Status.toLowerCase() === 'ready') {
-            const objectToPush = {
-              data: {
-                fileLocation: dataItem.URL,
-                fileDuration:
-                  dataItem.Status.toLowerCase() === 'inprogress'
-                    ? __('Processing...(') + dataItem.PercentComplete + '%)'
-                    : (dataItem.Duration / 1000000000).toString(),
-                thumbnails: dataItem.ThumbnailURLs !== null ? dataItem.ThumbnailURLs : [],
-                uploadedAt: dataItem.Created,
-              },
-            };
-            newData.push(objectToPush);
-          }
-        }
-      }
-
-      setLivestreamData(newData);
-      setCheckingLivestreams(false);
-    }
-  }
-
-  const isLivestreamMode = mode === PUBLISH_MODES.LIVESTREAM;
   let submitLabel;
 
   if (isClaimingInitialRewards) {
     submitLabel = __('Claiming credits...');
   } else if (publishing) {
-    if (isStillEditing) {
+    if (isStillEditing || inEditMode) {
       submitLabel = __('Saving...');
-    } else if (isLivestreamMode) {
-      submitLabel = __('Creating...');
     } else {
-      submitLabel = __('Uploading...');
+      submitLabel = __('Creating...');
     }
   } else if (previewing) {
     submitLabel = <Spinner type="small" />;
   } else {
-    if (isStillEditing) {
+    if (isStillEditing || inEditMode) {
       submitLabel = __('Save');
-    } else if (isLivestreamMode) {
-      submitLabel = __('Create');
     } else {
-      submitLabel = __('Upload');
+      submitLabel = __('Create');
     }
   }
 
@@ -418,7 +318,7 @@ function PublishForm(props: Props) {
   // set isMarkdownPost in publish form if so, also update isLivestreamPublish
   useEffect(() => {
     updatePublishForm({
-      isMarkdownPost: mode === PUBLISH_MODES.POST,
+      isMarkdownPost: false,
       isLivestreamPublish: mode === PUBLISH_MODES.LIVESTREAM,
     });
   }, [mode, updatePublishForm]);
@@ -426,45 +326,10 @@ function PublishForm(props: Props) {
   useEffect(() => {
     if (incognito) {
       updatePublishForm({ channel: undefined });
-
-      // Anonymous livestreams aren't supported
-      if (isLivestreamMode) {
-        setMode(PUBLISH_MODES.FILE);
-      }
     } else if (activeChannelName) {
       updatePublishForm({ channel: activeChannelName });
     }
-  }, [activeChannelName, incognito, updatePublishForm, isLivestreamMode]);
-
-  // set mode based on urlParams 'type'
-  useEffect(() => {
-    if (!_uploadType) {
-      setMode(defaultPublishMode);
-      return;
-    }
-
-    // File publish
-    if (_uploadType === PUBLISH_MODES.FILE.toLowerCase()) {
-      setMode(PUBLISH_MODES.FILE);
-      return;
-    }
-    // Post publish
-    if (_uploadType === PUBLISH_MODES.POST.toLowerCase()) {
-      setMode(PUBLISH_MODES.POST);
-      return;
-    }
-    // LiveStream publish
-    if (_uploadType === PUBLISH_MODES.LIVESTREAM.toLowerCase()) {
-      if (enableLivestream) {
-        setMode(PUBLISH_MODES.LIVESTREAM);
-      } else {
-        setMode(PUBLISH_MODES.FILE);
-      }
-      return;
-    }
-
-    setMode(defaultPublishMode);
-  }, [_uploadType, enableLivestream, defaultPublishMode]);
+  }, [activeChannelName, incognito, updatePublishForm]);
 
   // if we have a type urlparam, update it? necessary?
   useEffect(() => {
@@ -486,30 +351,6 @@ function PublishForm(props: Props) {
   }
   // @endif
 
-  // @if TARGET='app'
-  // Save file changes locally ( desktop )
-  function saveFileChanges() {
-    let output;
-    if (!output || output === '') {
-      // Generate a temporary file:
-      output = tempy.file({ name: 'post.md' });
-    } else if (typeof filePath === 'string') {
-      // Use current file
-      output = filePath;
-    }
-    // Create a temporary file and save file changes
-    if (output && output !== '') {
-      // Save file changes
-      return new Promise((resolve, reject) => {
-        fs.writeFile(output, fileText, (error, data) => {
-          // Handle error, cant save changes or create file
-          error ? reject(error) : resolve(output);
-        });
-      });
-    }
-  }
-  // @endif
-
   async function handlePublish() {
     let outputFile = filePath;
     let runPublish = false;
@@ -521,13 +362,7 @@ function PublishForm(props: Props) {
       // If user modified content on the text editor or editing name has changed:
       // Save changes and update file path
       if (fileEdited || nameEdited) {
-        // @if TARGET='app'
-        outputFile = await saveFileChanges();
-        // @endif
-
-        // @if TARGET='web'
         outputFile = createWebFile();
-        // @endif
 
         // New content stored locally and is not empty
         if (outputFile) {
@@ -540,7 +375,7 @@ function PublishForm(props: Props) {
       }
     }
     // Publish file
-    if (mode === PUBLISH_MODES.FILE || isLivestreamMode) {
+    if (mode === PUBLISH_MODES.FILE) {
       runPublish = true;
     }
 
@@ -554,18 +389,6 @@ function PublishForm(props: Props) {
     }
   }
 
-  // Update mode on editing
-  useEffect(() => {
-    if (autoSwitchMode && editingURI && myClaimForUri) {
-      // Change publish mode to "post" if editing content type is markdown
-      if (fileMimeType === 'text/markdown' && mode !== PUBLISH_MODES.POST) {
-        setMode(PUBLISH_MODES.POST);
-        // Prevent forced mode
-        setAutoSwitchMode(false);
-      }
-    }
-  }, [autoSwitchMode, editingURI, fileMimeType, myClaimForUri, mode, setMode, setAutoSwitchMode]);
-
   // When accessing to publishing, make sure to reset file input attributes
   // since we can't restore from previous user selection (like we do
   // with other properties such as name, title, etc.) for security reasons.
@@ -581,8 +404,8 @@ function PublishForm(props: Props) {
 
   const [showSchedulingOptions, setShowSchedulingOptions] = useState(false);
   useEffect(() => {
-    setShowSchedulingOptions(isLivestreamMode && fileSource === SOURCE_NONE);
-  }, [isLivestreamMode, fileSource]);
+    setShowSchedulingOptions(fileSource === SOURCE_NONE);
+  }, [fileSource]);
 
   if (publishing) {
     return (
@@ -593,10 +416,24 @@ function PublishForm(props: Props) {
     );
   }
 
+  const isFormIncomplete =
+    isClaimingInitialRewards ||
+    formDisabled ||
+    !formValid ||
+    uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS ||
+    ytSignupPending ||
+    previewing;
+
   // Editing claim uri
   return (
     <div className="card-stack">
-      <ChannelSelect hideAnon={isLivestreamMode} disabled={disabled} autoSet channelToSet={claimChannelId} />
+      <h1 className="page__title">
+        <Icon icon={ICONS.PUBLISH} />
+        <label>
+          {formTitle}
+          {!isClear && <Button onClick={() => clearPublish()} icon={ICONS.REFRESH} button="primary" label="Clear" />}
+        </label>
+      </h1>
 
       <PublishFile
         inEditMode={inEditMode}
@@ -607,14 +444,9 @@ function PublishForm(props: Props) {
         fileMimeType={fileMimeType}
         disabled={disabled || publishing}
         inProgress={isInProgress}
-        setPublishMode={setMode}
         setPrevFileText={setPrevFileText}
-        livestreamData={livestreamData}
-        subtitle={customSubtitle}
         setWaitForFile={setWaitForFile}
         setOverMaxBitrate={setOverMaxBitrate}
-        isCheckingLivestreams={isCheckingLivestreams}
-        checkLivestreams={fetchLivestreams}
         channelId={claimChannelId}
         channelName={activeChannelName}
         header={
@@ -628,7 +460,7 @@ function PublishForm(props: Props) {
                 button="alt"
                 onClick={() => {
                   // $FlowFixMe
-                  setMode(modeName);
+                  // setMode(modeName);
                 }}
                 className={classnames('button-toggle', { 'button-toggle--active': mode === modeName })}
               />
@@ -643,7 +475,7 @@ function PublishForm(props: Props) {
         <div className={classnames({ 'card--disabled': formDisabled })}>
           {showSchedulingOptions && <Card body={<PublishStreamReleaseDate />} />}
 
-          <Card actions={<SelectThumbnail livestreamData={livestreamData} />} />
+          <Card actions={<SelectThumbnail />} />
 
           <h2 className="card__title" style={{ marginTop: 'var(--spacing-l)' }}>
             {__('Tags')}
@@ -675,27 +507,13 @@ function PublishForm(props: Props) {
             tagsChosen={tags}
           />
 
-          {!isLivestreamMode && <PublishPrice disabled={formDisabled} />}
-
           <PublishAdditionalOptions disabled={formDisabled} showSchedulingOptions={showSchedulingOptions} />
         </div>
       )}
       <section>
         <div className="section__actions">
-          <Button
-            button="primary"
-            onClick={handlePublish}
-            label={submitLabel}
-            disabled={
-              isClaimingInitialRewards ||
-              formDisabled ||
-              !formValid ||
-              uploadThumbnailStatus === THUMBNAIL_STATUSES.IN_PROGRESS ||
-              ytSignupPending ||
-              previewing
-            }
-          />
-          <Button button="link" onClick={clearPublish} label={__('New --[clears Publish Form]--')} />
+          <Button button="primary" onClick={handlePublish} label={submitLabel} disabled={isFormIncomplete} />
+          <ChannelSelect disabled={isFormIncomplete} autoSet channelToSet={claimChannelId} isPublishMenu />
         </div>
         <p className="help">
           {!formDisabled && !formValid ? (
@@ -703,16 +521,23 @@ function PublishForm(props: Props) {
           ) : (
             <I18nMessage
               tokens={{
-                lbry_terms_of_service: (
+                odysee_terms_of_service: (
                   <Button
                     button="link"
                     href="https://odysee.com/$/tos"
                     label={__('%site_name% Terms of Service', { site_name: SITE_NAME })}
                   />
                 ),
+                odysee_community_guidelines: (
+                  <Button
+                    button="link"
+                    href="https://odysee.com/@OdyseeHelp:b/Community-Guidelines:c"
+                    label={__('community guidelines', { site_name: SITE_NAME })}
+                  />
+                ),
               }}
             >
-              By continuing, you accept the %lbry_terms_of_service%.
+              By continuing, you accept the %odysee_terms_of_service% and %odysee_community_guidelines%.
             </I18nMessage>
           )}
         </p>
@@ -721,4 +546,4 @@ function PublishForm(props: Props) {
   );
 }
 
-export default PublishForm;
+export default UploadForm;

ui/component/publishFile/view.jsx

@@ -1,735 +0,0 @@
-// @flow
-import { SITE_NAME, WEB_PUBLISH_SIZE_LIMIT_GB, SIMPLE_SITE } from 'config';
-import type { Node } from 'react';
-import * as ICONS from 'constants/icons';
-import React, { useState, useEffect } from 'react';
-import { regexInvalidURI } from 'util/lbryURI';
-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 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 Empty from 'component/common/empty';
-import moment from 'moment';
-import classnames from 'classnames';
-import ReactPaginate from 'react-paginate';
-import { SOURCE_NONE, SOURCE_SELECT, SOURCE_UPLOAD } from 'constants/publish_sources';
-
-type Props = {
-  uri: ?string,
-  mode: ?string,
-  name: ?string,
-  title: ?string,
-  filePath: string | WebFile,
-  fileMimeType: ?string,
-  isStillEditing: boolean,
-  balance: number,
-  doUpdatePublishForm: ({}) => void,
-  disabled: boolean,
-  publishing: boolean,
-  doToast: ({ message: string, isError?: boolean }) => void,
-  inProgress: boolean,
-  doClearPublish: () => void,
-  ffmpegStatus: any,
-  optimize: boolean,
-  size: number,
-  duration: number,
-  isVid: boolean,
-  subtitle: string,
-  setPublishMode: (string) => void,
-  setPrevFileText: (string) => void,
-  header: Node,
-  livestreamData: LivestreamReplayData,
-  isLivestreamClaim: boolean,
-  checkLivestreams: (string, string) => void,
-  channelName: string,
-  channelId: string,
-  isCheckingLivestreams: boolean,
-  setWaitForFile: (boolean) => void,
-  setOverMaxBitrate: (boolean) => void,
-  fileSource: string,
-  changeFileSource: (string) => void,
-  inEditMode: boolean,
-};
-
-function PublishFile(props: Props) {
-  const {
-    uri,
-    mode,
-    name,
-    title,
-    balance,
-    filePath,
-    fileMimeType,
-    isStillEditing,
-    doUpdatePublishForm: updatePublishForm,
-    doToast,
-    disabled,
-    publishing,
-    inProgress,
-    doClearPublish,
-    optimize,
-    ffmpegStatus = {},
-    size,
-    duration,
-    isVid,
-    setPublishMode,
-    setPrevFileText,
-    header,
-    livestreamData,
-    isLivestreamClaim,
-    subtitle,
-    checkLivestreams,
-    channelId,
-    channelName,
-    isCheckingLivestreams,
-    setWaitForFile,
-    setOverMaxBitrate,
-    fileSource,
-    changeFileSource,
-    inEditMode,
-  } = props;
-
-  const RECOMMENDED_BITRATE = 8500000;
-  const MAX_BITRATE = 16500000;
-  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;
-  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 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.', {
-    SITE_NAME,
-    limit: TV_PUBLISH_SIZE_LIMIT_GB_STR,
-  });
-
-  const bitRate = getBitrate(size, duration);
-  const bitRateIsOverMax = bitRate > MAX_BITRATE;
-
-  const fileSelectorModes = [
-    { label: __('Upload'), actionName: SOURCE_UPLOAD, icon: ICONS.PUBLISH },
-    { label: __('Choose Replay'), actionName: SOURCE_SELECT, icon: ICONS.MENU },
-    { label: isLivestreamClaim ? __('Edit / Update') : __('None'), actionName: SOURCE_NONE },
-  ];
-
-  const livestreamDataStr = JSON.stringify(livestreamData);
-  const hasLivestreamData = livestreamData && Boolean(livestreamData.length);
-
-  const [showSourceSelector, setShowSourceSelector] = useState(false);
-  // 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;
-
-  // Reset filePath if publish mode changed
-  useEffect(() => {
-    if (mode === PUBLISH_MODES.POST) {
-      if (currentFileType !== 'text/markdown' && !isStillEditing) {
-        updatePublishForm({ filePath: '' });
-      }
-    } else if (mode === PUBLISH_MODES.LIVESTREAM) {
-      updatePublishForm({ filePath: '' });
-    }
-  }, [currentFileType, mode, isStillEditing, updatePublishForm]);
-
-  // Reset title when form gets cleared
-
-  useEffect(() => {
-    updatePublishForm({ title: title });
-  }, [filePath]);
-
-  // Initialize default file source state for each mode.
-  useEffect(() => {
-    setShowSourceSelector(false);
-    switch (mode) {
-      case PUBLISH_MODES.LIVESTREAM:
-        if (inEditMode) {
-          changeFileSource(SOURCE_SELECT);
-          setShowSourceSelector(true);
-        } else {
-          changeFileSource(SOURCE_NONE);
-        }
-        break;
-      case PUBLISH_MODES.POST:
-        changeFileSource(SOURCE_NONE);
-        break;
-      case PUBLISH_MODES.FILE:
-        if (hasLivestreamData) setShowSourceSelector(true);
-        changeFileSource(SOURCE_UPLOAD);
-        break;
-      default:
-        changeFileSource(SOURCE_UPLOAD);
-    }
-  }, [mode, hasLivestreamData]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const normalizeUrlForProtocol = (url) => {
-    if (url.startsWith('https://')) {
-      return url;
-    } else {
-      if (url.startsWith('http://')) {
-        return url;
-      } else if (url) {
-        return `https://${url}`;
-      } else return __('Click Check for Replays to update...');
-    }
-  };
-  // update remoteUrl when replay selected
-  useEffect(() => {
-    const livestreamData = JSON.parse(livestreamDataStr);
-    if (selectedFileIndex !== null && livestreamData && livestreamData.length) {
-      updatePublishForm({
-        remoteFileUrl: normalizeUrlForProtocol(livestreamData[selectedFileIndex].data.fileLocation),
-      });
-    }
-  }, [selectedFileIndex, updatePublishForm, livestreamDataStr]);
-
-  useEffect(() => {
-    if (!filePath || filePath === '') {
-      setCurrentFile('');
-      setOversized(false);
-      setOverMaxBitrate(false);
-      updateFileInfo(0, 0, false);
-    } else if (typeof filePath !== 'string') {
-      // Update currentFile file
-      if (filePath.name !== currentFile && filePath.path !== currentFile) {
-        handleFileChange(filePath);
-      }
-    }
-  }, [filePath, currentFile, doToast, updatePublishForm]);
-
-  useEffect(() => {
-    const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
-    const finalOptimizeState = isOptimizeAvail && userOptimize;
-
-    setOptimizeAvail(isOptimizeAvail);
-    updatePublishForm({ optimize: finalOptimizeState });
-  }, [currentFile, filePath, isVid, ffmpegAvail, userOptimize, updatePublishForm]);
-
-  useEffect(() => {
-    setOverMaxBitrate(bitRateIsOverMax);
-  }, [bitRateIsOverMax]);
-
-  function updateFileInfo(duration, size, isvid) {
-    updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
-  }
-
-  function handlePaginateReplays(page) {
-    setCurrentPage(page);
-  }
-
-  function getBitrate(size, duration) {
-    const s = Number(size);
-    const d = Number(duration);
-    if (s && d) {
-      return (s * 8) / d;
-    } else {
-      return 0;
-    }
-  }
-
-  function getTimeForMB(s) {
-    if (s < MINUTES_THRESHOLD) {
-      return Math.floor(secondsToProcess);
-    } else if (s >= MINUTES_THRESHOLD && s < HOURS_THRESHOLD) {
-      return Math.floor(secondsToProcess / 60);
-    } else {
-      return Math.floor(secondsToProcess / 60 / 60);
-    }
-  }
-
-  function getUnitsForMB(s) {
-    if (s < MINUTES_THRESHOLD) {
-      if (secondsToProcess > 1) return __('seconds');
-      return __('second');
-    } else if (s >= MINUTES_THRESHOLD && s < HOURS_THRESHOLD) {
-      if (Math.floor(secondsToProcess / 60) > 1) return __('minutes');
-      return __('minute');
-    } else {
-      if (Math.floor(secondsToProcess / 3600) > 1) return __('hours');
-      return __('hour');
-    }
-  }
-
-  function getUploadMessage() {
-    // @if TARGET='web'
-    if (oversized) {
-      return (
-        <p className="help--error">
-          {UPLOAD_SIZE_MESSAGE}{' '}
-          <Button button="link" label={__('Upload Guide')} href="https://odysee.com/@OdyseeHelp:b/uploadguide:1" />
-        </p>
-      );
-    }
-    // @endif
-
-    if (isVid && duration && bitRate > RECOMMENDED_BITRATE) {
-      return (
-        <p className="help--warning">
-          {bitRateIsOverMax
-            ? __(
-                'Your video has a bitrate over ~16 Mbps and cannot be processed at this time. We suggest transcoding to provide viewers the best experience.'
-              )
-            : __(
-                'Your video has a bitrate over 8 Mbps. We suggest transcoding to provide viewers the best experience.'
-              )}{' '}
-          <Button
-            button="link"
-            label={__('Upload Guide')}
-            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
-          />
-        </p>
-      );
-    }
-
-    if (isVid && !duration) {
-      return (
-        <p className="help--warning">
-          {__(
-            'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming.'
-          )}{' '}
-          <Button
-            button="link"
-            label={__('Upload Guide')}
-            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
-          />
-        </p>
-      );
-    }
-
-    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 })}
-        </p>
-      );
-    }
-    // @if TARGET='web'
-    if (!isStillEditing) {
-      return (
-        <p className="help">
-          {__(
-            'For video content, use MP4s in H264/AAC format and a friendly bitrate (under 8 Mbps) for more reliable streaming. %SITE_NAME% uploads are restricted to %limit% GB.',
-            { SITE_NAME, limit: TV_PUBLISH_SIZE_LIMIT_GB_STR }
-          )}{' '}
-          <Button
-            button="link"
-            label={__('Upload Guide')}
-            href="https://odysee.com/@OdyseeHelp:b/uploadguide:1?lc=e280f6e6fdec3f5fd4043954c71add50b3fd2d6a9f3ddba979b459da6ae4a1f4"
-          />
-        </p>
-      );
-    }
-    // @endif
-  }
-
-  function parseName(newName) {
-    let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
-    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, false);
-      updatePublishForm({ remoteFileUrl: undefined });
-    } else if (source === SOURCE_UPLOAD) {
-      updatePublishForm({ remoteFileUrl: undefined });
-    } else if (source === SOURCE_SELECT) {
-      // $FlowFixMe
-      handleFileChange(false, false);
-      if (selectedFileIndex !== null) {
-        updatePublishForm({ remoteFileUrl: livestreamData[selectedFileIndex].data.fileLocation });
-      }
-    }
-    changeFileSource(source);
-    setWaitForFile(source !== SOURCE_NONE);
-  }
-
-  function handleTitleChange(event) {
-    updatePublishForm({ title: event.target.value });
-  }
-
-  function handleFileReaderLoaded(event: ProgressEvent) {
-    // See: https://github.com/facebook/flow/issues/3470
-    if (event.target instanceof FileReader) {
-      const text = event.target.result;
-      updatePublishForm({ fileText: text });
-      setPublishMode(PUBLISH_MODES.POST);
-    }
-  }
-
-  function handleFileChange(file: WebFile, clearName = true) {
-    window.URL = window.URL || window.webkitURL;
-    setOversized(false);
-    setOverMaxBitrate(false);
-
-    // select file, start to select a new one, then cancel
-    if (!file) {
-      if (isStillEditing || !clearName) {
-        updatePublishForm({ filePath: '' });
-      } else {
-        updatePublishForm({ filePath: '', name: '' });
-      }
-      return;
-    }
-
-    // if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
-    const contentType = file.type && file.type.split('/');
-    const isVideo = contentType && contentType[0] === 'video';
-    const isMp4 = contentType && contentType[1] === 'mp4';
-
-    let isTextPost = false;
-
-    if (contentType && contentType[0] === 'text') {
-      isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
-      setCurrentFileType(contentType);
-    } else if (file.name) {
-      // If user's machine is missign a valid content type registration
-      // for markdown content: text/markdown, file extension will be used instead
-      const extension = file.name.split('.').pop();
-      isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
-    }
-
-    if (isVideo) {
-      if (isMp4) {
-        const video = document.createElement('video');
-        video.preload = 'metadata';
-        video.onloadedmetadata = () => {
-          updateFileInfo(video.duration, file.size, isVideo);
-          window.URL.revokeObjectURL(video.src);
-        };
-        video.onerror = () => {
-          updateFileInfo(0, file.size, isVideo);
-        };
-        video.src = window.URL.createObjectURL(file);
-      } else {
-        updateFileInfo(0, file.size, isVideo);
-      }
-    } else {
-      updateFileInfo(0, file.size, isVideo);
-    }
-
-    // Strip off extention and replace invalid characters
-    let fileName = name || (file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || '';
-    autofillTitle(file);
-
-    if (isTextPost) {
-      // Create reader
-      const reader = new FileReader();
-      // Handler for file reader
-      reader.addEventListener('load', handleFileReaderLoaded);
-      // Read file contents
-      reader.readAsText(file);
-      setCurrentFileType('text/markdown');
-    } else {
-      setPublishMode(PUBLISH_MODES.FILE);
-    }
-
-    // @if TARGET='web'
-    // we only need to enforce file sizes on 'web'
-    if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
-      setOversized(true);
-      doToast({ message: __(UPLOAD_SIZE_MESSAGE), isError: true });
-      updatePublishForm({ filePath: '' });
-      return;
-    }
-    // @endif
-
-    const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
-      // if electron, we'll set filePath to the path string because SDK is handling publishing.
-      // File.path will be undefined from web due to browser security, so it will default to the File Object.
-      filePath: file.path || file,
-    };
-
-    if (!isStillEditing) {
-      publishFormParams.name = parseName(fileName);
-    }
-
-    // File path is not supported on web for security reasons so we use the name instead.
-    setCurrentFile(file.path || file.name);
-    updatePublishForm(publishFormParams);
-  }
-
-  function autofillTitle(file) {
-    const newTitle = (file && file.name && file.name.substr(0, file.name.lastIndexOf('.'))) || name || '';
-    if (!title) updatePublishForm({ title: newTitle });
-  }
-
-  const showFileUpload = mode === PUBLISH_MODES.FILE || PUBLISH_MODES.LIVESTREAM;
-  const isPublishPost = mode === PUBLISH_MODES.POST;
-
-  return (
-    <Card
-      className={classnames({
-        'card--disabled': disabled || balance === 0,
-      })}
-      title={
-        <div>
-          {header} {/* display mode buttons from parent */}
-          {publishing && <Spinner type={'small'} />}
-          {inProgress && (
-            <div>
-              <Button
-                button="alt"
-                label={__('Clear --[clears Publish Form]--')}
-                icon={ICONS.REFRESH}
-                onClick={doClearPublish}
-              />
-            </div>
-          )}
-        </div>
-      }
-      subtitle={subtitle || (isStillEditing && __('You are currently editing your upload.'))}
-      actions={
-        <>
-          {/* <h2 className="card__title">{__('File')}</h2> */}
-          <div className="card--file">
-            <React.Fragment>
-              {/* Decide whether to show file upload or replay selector */}
-              {/* @if TARGET='web' */}
-              <>
-                {showSourceSelector && (
-                  <fieldset-section>
-                    <div className="section__actions--between section__actions--align-bottom">
-                      <div>
-                        <label>{__('Replay video available')}</label>
-                        <div className="button-group">
-                          {fileSelectorModes.map((fmode) => (
-                            <Button
-                              key={fmode.label}
-                              icon={fmode.icon || undefined}
-                              iconSize={18}
-                              label={fmode.label}
-                              button="alt"
-                              onClick={() => {
-                                // $FlowFixMe
-                                handleFileSource(fmode.actionName);
-                              }}
-                              className={classnames('button-toggle', {
-                                'button-toggle--active': fileSource === fmode.actionName,
-                              })}
-                            />
-                          ))}
-                        </div>
-                      </div>
-                      {fileSource === SOURCE_SELECT && (
-                        <Button
-                          button="secondary"
-                          label={__('Check for Replays')}
-                          disabled={isCheckingLivestreams}
-                          icon={ICONS.REFRESH}
-                          onClick={() => checkLivestreams(channelId, channelName)}
-                        />
-                      )}
-                    </div>
-                  </fieldset-section>
-                )}
-
-                {fileSource === SOURCE_UPLOAD && showFileUpload && (
-                  <>
-                    <FileSelector
-                      disabled={disabled}
-                      currentPath={currentFile}
-                      onFileChosen={handleFileChange}
-                      // https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
-                      accept={SIMPLE_SITE ? 'video/mp4,video/x-m4v,video/*,audio/*' : undefined}
-                      placeholder={
-                        SIMPLE_SITE ? __('Select video or audio file to upload') : __('Select a file to upload')
-                      }
-                    />
-                    {getUploadMessage()}
-                  </>
-                )}
-                {fileSource === SOURCE_SELECT && showFileUpload && hasLivestreamData && !isCheckingLivestreams && (
-                  <>
-                    <fieldset-section>
-                      <label>{__('Select Replay')}</label>
-                      <div className="table__wrapper">
-                        <table className="table table--livestream-data">
-                          <tbody>
-                            {livestreamData
-                              .slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE)
-                              .map((item, i) => (
-                                <tr
-                                  onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
-                                  key={item.id}
-                                  className={classnames('livestream__data-row', {
-                                    'livestream__data-row--selected':
-                                      selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i,
-                                  })}
-                                >
-                                  <td>
-                                    <FormField
-                                      type="radio"
-                                      checked={selectedFileIndex === (currentPage - 1) * PAGE_SIZE + i}
-                                      label={null}
-                                      onClick={() => setSelectedFileIndex((currentPage - 1) * PAGE_SIZE + i)}
-                                      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>
-                                    {item.data.fileDuration && isNaN(item.data.fileDuration)
-                                      ? item.data.fileDuration
-                                      : `${Math.floor(item.data.fileDuration / 60)} ${
-                                          Math.floor(item.data.fileDuration / 60) > 1 ? __('minutes') : __('minute')
-                                        }`}
-                                    <div className="table__item-label">
-                                      {`${moment(item.data.uploadedAt).from(moment())}`}
-                                    </div>
-                                  </td>
-                                  <td>
-                                    <CopyableText
-                                      primaryButton
-                                      copyable={normalizeUrlForProtocol(item.data.fileLocation)}
-                                      snackMessage={__('Url copied.')}
-                                    />
-                                  </td>
-                                </tr>
-                              ))}
-                          </tbody>
-                        </table>
-                      </div>
-                    </fieldset-section>
-                    <fieldset-group class="fieldset-group--smushed fieldgroup--paginate">
-                      <fieldset-section>
-                        <ReactPaginate
-                          pageCount={totalPages}
-                          pageRangeDisplayed={2}
-                          previousLabel="‹"
-                          nextLabel="›"
-                          activeClassName="pagination__item--selected"
-                          pageClassName="pagination__item"
-                          previousClassName="pagination__item pagination__item--previous"
-                          nextClassName="pagination__item pagination__item--next"
-                          breakClassName="pagination__item pagination__item--break"
-                          marginPagesDisplayed={2}
-                          onPageChange={(e) => handlePaginateReplays(e.selected + 1)}
-                          forcePage={currentPage - 1}
-                          initialPage={currentPage - 1}
-                          containerClassName="pagination"
-                        />
-                      </fieldset-section>
-                    </fieldset-group>
-                  </>
-                )}
-                {fileSource === SOURCE_SELECT && showFileUpload && !hasLivestreamData && !isCheckingLivestreams && (
-                  <div className="main--empty empty">
-                    <Empty text={__('No replays found.')} />
-                  </div>
-                )}
-                {fileSource === SOURCE_SELECT && showFileUpload && isCheckingLivestreams && (
-                  <div className="main--empty empty">
-                    <Spinner small />
-                  </div>
-                )}
-              </>
-              <FormField
-                type="text"
-                name="content_title"
-                label={__('Title')}
-                placeholder={__('Descriptive titles work best')}
-                disabled={disabled}
-                value={title}
-                onChange={handleTitleChange}
-                className="fieldset-group"
-              />
-              <PublishName uri={uri} />
-
-              {/* @endif */}
-              {/* @if TARGET='app' */}
-              {showFileUpload && (
-                <FileSelector
-                  label={__('File')}
-                  disabled={disabled}
-                  currentPath={currentFile}
-                  onFileChosen={handleFileChange}
-                  // https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
-                  placeholder={__('Select file to upload')}
-                />
-              )}
-              {showFileUpload && (
-                <FormField
-                  type="checkbox"
-                  checked={userOptimize}
-                  disabled={!optimizeAvail}
-                  onChange={() => setUserOptimize(!userOptimize)}
-                  label={__('Optimize and transcode video')}
-                  name="optimize"
-                />
-              )}
-              {showFileUpload && !ffmpegAvail && (
-                <p className="help">
-                  <I18nMessage
-                    tokens={{
-                      settings_link: <Button button="link" navigate="/$/settings" label={__('Settings')} />,
-                    }}
-                  >
-                    FFmpeg not configured. More in %settings_link%.
-                  </I18nMessage>
-                </p>
-              )}
-              {showFileUpload && Boolean(size) && ffmpegAvail && optimize && isVid && (
-                <p className="help">
-                  <I18nMessage
-                    tokens={{
-                      size: Math.ceil(sizeInMB),
-                      processTime: getTimeForMB(sizeInMB),
-                      units: getUnitsForMB(sizeInMB),
-                    }}
-                  >
-                    Transcoding this %size% MB file should take under %processTime% %units%.
-                  </I18nMessage>
-                </p>
-              )}
-              {/* @endif */}
-              {isPublishPost && (
-                <PostEditor
-                  label={__('Post --[noun, markdown post tab button]--')}
-                  uri={uri}
-                  disabled={disabled}
-                  fileMimeType={fileMimeType}
-                  setPrevFileText={setPrevFileText}
-                  setCurrentFileType={setCurrentFileType}
-                />
-              )}
-            </React.Fragment>
-          </div>
-        </>
-      }
-    />
-  );
-}
-
-export default PublishFile;

ui/component/publishPrice/view.jsx

@@ -1,62 +0,0 @@
-// @flow
-import React from 'react';
-import { FormField, FormFieldPrice } from 'component/common/form';
-import Card from 'component/common/card';
-
-type Props = {
-  contentIsFree: boolean,
-  fee: Fee,
-  disabled: boolean,
-  updatePublishForm: ({}) => void,
-};
-
-function PublishPrice(props: Props) {
-  const { contentIsFree, fee, updatePublishForm, disabled } = props;
-
-  return (
-    <>
-      <h2 className="card__title">{__('Price')}</h2>
-      <Card
-        className="card--publish-section card--price"
-        actions={
-          <React.Fragment>
-            <FormField
-              type="radio"
-              name="content_free"
-              label={__('Free')}
-              checked={contentIsFree}
-              disabled={disabled}
-              onChange={() => updatePublishForm({ contentIsFree: true })}
-            />
-
-            <FormField
-              type="radio"
-              name="content_cost"
-              label={__('Add a price to this file')}
-              checked={!contentIsFree}
-              disabled={disabled}
-              onChange={() => updatePublishForm({ contentIsFree: false })}
-            />
-            {!contentIsFree && (
-              <FormFieldPrice
-                name="content_cost_amount"
-                min={0}
-                price={fee}
-                onChange={(newFee) => updatePublishForm({ fee: newFee })}
-              />
-            )}
-            {fee && fee.currency !== 'LBC' && (
-              <p className="form-field__help">
-                {__(
-                  'All content fees are charged in LBRY Credits. For alternative payment methods, the number of LBRY Credits charged will be adjusted based on the value of LBRY Credits at the time of purchase.'
-                )}
-              </p>
-            )}
-          </React.Fragment>
-        }
-      />
-    </>
-  );
-}
-
-export default PublishPrice;

ui/component/repostCreate/view.jsx

@@ -15,7 +15,7 @@ import ClaimPreview from 'component/claimPreview';
 import { URL as SITE_URL, URL_LOCAL, URL_DEV } from 'config';
 import HelpLink from 'component/common/help-link';
 import WalletSpendableBalanceHelp from 'component/walletSpendableBalanceHelp';
-import BidHelpText from 'component/publishBid/bid-help-text';
+import BidHelpText from 'component/publish/shared/publishBid/bid-help-text';
 import Spinner from 'component/spinner';
 import { REPOST_PARAMS } from 'page/repost/view';
 

ui/component/router/view.jsx

@@ -69,13 +69,17 @@ const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* we
 const LivestreamCurrentPage = lazyImport(() =>
   import('page/livestreamCurrent' /* webpackChunkName: "livestreamCurrent" */)
 );
+const LivestreamCreatePage = lazyImport(() =>
+  import('page/livestreamCreate' /* webpackChunkName: "livestreamCreate" */)
+);
 const OdyseeMembershipPage = lazyImport(() =>
   import('page/odyseeMembership' /* webpackChunkName: "odyseeMembership" */)
 );
 const OwnComments = lazyImport(() => import('page/ownComments' /* webpackChunkName: "ownComments" */));
 const PasswordResetPage = lazyImport(() => import('page/passwordReset' /* webpackChunkName: "passwordReset" */));
 const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChunkName: "passwordSet" */));
-const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "publish" */));
+const UploadPage = lazyImport(() => import('page/upload' /* webpackChunkName: "publish" */));
+const PostPage = lazyImport(() => import('page/post' /* webpackChunkName: "post" */));
 const ReportContentPage = lazyImport(() => import('page/reportContent' /* webpackChunkName: "reportContent" */));
 const ReportPage = lazyImport(() => import('page/report' /* webpackChunkName: "report" */));
 const RepostNew = lazyImport(() => import('page/repost' /* webpackChunkName: "repost" */));
@@ -373,7 +377,8 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.REPOST_NEW}`} component={RepostNew} />
         <PrivateRoute {...props} path={`/$/${PAGES.UPLOADS}`} component={FileListPublished} />
         <PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
-        <PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={PublishPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.UPLOAD}`} component={UploadPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.POST}`} component={PostPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.REPORT}`} component={ReportPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
@@ -386,6 +391,7 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_CREATOR}`} component={SettingsCreatorPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CREATE}`} component={LivestreamCreatePage} />
         <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM}`} component={LiveStreamSetupPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.LIVESTREAM_CURRENT}`} component={LivestreamCurrentPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />

ui/component/scheduledStreams/view.jsx

@@ -23,11 +23,9 @@ type Props = {
   doShowSnackBar: (string) => void,
 };
 
-/* NEKO MARK */
 const ScheduledStreams = (props: Props) => {
   const {
     channelIds,
-    // tileLayout,
     liveUris = [],
     limitClaimsPerChannel,
     setClientSetting,

ui/component/searchTopClaim/index.js

@@ -1,5 +1,6 @@
 import { connect } from 'react-redux';
-import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+// import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+import { doClearPublish } from 'redux/actions/publish';
 import { doResolveUris } from 'redux/actions/claims';
 import { doOpenModal } from 'redux/actions/app';
 import { selectPendingIds, makeSelectClaimForUri } from 'redux/selectors/claims';
@@ -22,7 +23,7 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
   beginPublish: (name) => {
     dispatch(doClearPublish());
-    dispatch(doPrepareEdit({ name }));
+    // dispatch(doPrepareEdit({ name }));
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
   doResolveUris: (uris) => dispatch(doResolveUris(uris)),

ui/component/selectThumbnail/index.js

@@ -3,7 +3,7 @@ import { selectPublishFormValues, selectMyClaimForUri } from 'redux/selectors/pu
 import { selectFileInfosByOutpoint } from 'redux/selectors/file_info';
 import { doUpdatePublishForm, doResetThumbnailStatus } from 'redux/actions/publish';
 import { doOpenModal } from 'redux/actions/app';
-import PublishPage from './view';
+import SelectThumbnail from './view';
 
 const select = (state) => ({
   ...selectPublishFormValues(state),
@@ -17,4 +17,4 @@ const perform = (dispatch) => ({
   openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
 });
 
-export default connect(select, perform)(PublishPage);
+export default connect(select, perform)(SelectThumbnail);

ui/component/selectThumbnail/view.jsx

@@ -49,7 +49,7 @@ function SelectThumbnail(props: Props) {
   const thumbnailError = publishForm ? props.thumbnailError : props.thumbnailParamError;
 
   const accept = '.png, .jpg, .jpeg, .gif';
-  const manualInput = status === THUMBNAIL_STATUSES.API_DOWN || status === THUMBNAIL_STATUSES.MANUAL;
+  const manualInput = status === THUMBNAIL_STATUSES.MANUAL;
   const thumbUploaded = status === THUMBNAIL_STATUSES.COMPLETE && thumbnail;
   const isUrlInput = thumbnail !== ThumbnailMissingImage && thumbnail !== ThumbnailBrokenImage;
 
@@ -195,7 +195,11 @@ function SelectThumbnail(props: Props) {
         </div>
       )}
 
-      {status === THUMBNAIL_STATUSES.IN_PROGRESS && <p>{__('Uploading thumbnail')}...</p>}
+      {status === THUMBNAIL_STATUSES.IN_PROGRESS && (
+        <div className="column card--thumbnail">
+          <p>{__('Uploading thumbnail')}...</p>
+        </div>
+      )}
     </>
   );
 }

ui/component/sideNavigation/view.jsx

@@ -16,7 +16,7 @@ import ChannelThumbnail from 'component/channelThumbnail';
 import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
 import { GetLinksData } from 'util/buildHomepage';
 import { platform } from 'util/platform';
-import { DOMAIN, ENABLE_UI_NOTIFICATIONS, ENABLE_NO_SOURCE_CLAIMS } from 'config';
+import { DOMAIN, ENABLE_UI_NOTIFICATIONS } from 'config';
 import PremiumBadge from 'component/premiumBadge';
 
 const touch = platform.isTouch();
@@ -32,12 +32,6 @@ type SideNavLink = {
   noI18n?: boolean,
 };
 
-const GO_LIVE: SideNavLink = {
-  title: 'Go Live',
-  link: `/$/${PAGES.LIVESTREAM}`,
-  icon: ICONS.VIDEO,
-};
-
 const getHomeButton = (additionalAction) => ({
   title: 'Home',
   link: `/`,
@@ -176,12 +170,27 @@ function SideNavigation(props: Props) {
     ({ pinnedUrls, pinnedClaimIds, hideByDefault, ...theRest }) => theRest
   );
 
-  const MOBILE_LINKS: Array<SideNavLink> = [
+  const MOBILE_PUBLISH: Array<SideNavLink> = [
+    {
+      title: 'Go Live',
+      link: `/$/${PAGES.LIVESTREAM}`,
+      icon: ICONS.VIDEO,
+      hideForUnauth: true,
+    },
     {
       title: 'Upload',
       link: `/$/${PAGES.UPLOAD}`,
       icon: ICONS.PUBLISH,
+      hideForUnauth: true,
     },
+    {
+      title: 'Post',
+      link: `/$/${PAGES.POST}`,
+      icon: ICONS.POST,
+      hideForUnauth: true,
+    },
+  ];
+  const MOBILE_LINKS: Array<SideNavLink> = [
     {
       title: 'New Channel',
       link: `/$/${PAGES.CHANNEL_NEW}`,
@@ -254,8 +263,6 @@ function SideNavigation(props: Props) {
   const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
   const isAuthenticated = Boolean(email);
 
-  const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !user.odysee_live_disabled);
-
   const [pulseLibrary, setPulseLibrary] = React.useState(false);
   const [expandTags, setExpandTags] = React.useState(false);
 
@@ -505,10 +512,7 @@ function SideNavigation(props: Props) {
       >
         {(!canDisposeMenu || sidebarOpen) && (
           <div className="navigation-inner-container">
-            <ul className="navigation-links--absolute mobile-only">
-              {notificationsEnabled && getLink(NOTIFICATIONS)}
-              {email && livestreamEnabled && getLink(GO_LIVE)}
-            </ul>
+            <ul className="navigation-links--absolute mobile-only">{notificationsEnabled && getLink(NOTIFICATIONS)}</ul>
 
             <ul
               className={classnames('navigation-links', {
@@ -547,6 +551,9 @@ function SideNavigation(props: Props) {
               )}
             </ul>
 
+            <ul className="navigation-links--absolute mobile-only">
+              {email && MOBILE_PUBLISH.map((linkProps) => getLink(linkProps))}
+            </ul>
             <ul className="navigation-links--absolute mobile-only">
               {email && MOBILE_LINKS.map((linkProps) => getLink(linkProps))}
               {!email && UNAUTH_LINKS.map((linkProps) => getLink(linkProps))}

ui/component/tagsSearch/view.jsx

@@ -28,6 +28,7 @@ type Props = {
   limitShow?: number,
   user: User,
   disableControlTags?: boolean,
+  help?: string,
 };
 
 const UNALLOWED_TAGS = ['lbry-first'];
@@ -62,6 +63,7 @@ export default function TagsSearch(props: Props) {
     limitShow = 5,
     user,
     disableControlTags,
+    help,
   } = props;
   const [newTag, setNewTag] = useState('');
   const doesTagMatch = (name) => {
@@ -226,6 +228,7 @@ export default function TagsSearch(props: Props) {
                   />
                 ))}
               </ul>
+              <div className="form-field__hint mt-m">{help}</div>
             </section>
           )}
         </fieldset-section>

ui/component/tagsSelect/view.jsx

@@ -80,7 +80,7 @@ export default function TagsSelect(props: Props) {
     ((showClose && !hasClosed) || !showClose) && (
       <Card
         className="card--tags"
-        icon={ICONS.TAG}
+        // icon={ICONS.TAG}
         title={
           hideHeader ? null : (
             <React.Fragment>
@@ -91,14 +91,6 @@ export default function TagsSelect(props: Props) {
             </React.Fragment>
           )
         }
-        subtitle={
-          help !== false && (
-            <span>
-              {help || __("The tags you follow will change what's trending for you.")}{' '}
-              <Button button="link" label={__('Learn more')} href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />.
-            </span>
-          )
-        }
         actions={
           <React.Fragment>
             <TagsSearch
@@ -111,6 +103,19 @@ export default function TagsSelect(props: Props) {
               placeholder={placeholder}
               limitShow={limitShow}
               limitSelect={limitSelect}
+              help={
+                help !== false && (
+                  <span>
+                    {help || __("The tags you follow will change what's trending for you.")}{' '}
+                    <Button
+                      button="link"
+                      label={__('Learn more')}
+                      href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c"
+                    />
+                    .
+                  </span>
+                )
+              }
             />
           </React.Fragment>
         }

ui/constants/pageTitles.js

@@ -27,6 +27,7 @@ export const PAGE_TITLE = {
   [PAGES.LIVESTREAM_CURRENT]: 'Live (Experimental)',
   [PAGES.NOTIFICATIONS]: 'Notifications',
   [PAGES.ODYSEE_MEMBERSHIP]: 'Odysee Premium',
+  [PAGES.POST]: 'Post an Article on Odysee',
   [PAGES.PRIVACY_POLICY]: 'Privacy Policy',
   [PAGES.RECEIVE]: 'Your address',
   [PAGES.REPORT]: 'Report an issue or request a feature',
@@ -49,7 +50,7 @@ export const PAGE_TITLE = {
   [PAGES.TAGS_FOLLOWING_MANAGE]: 'Manage tags',
   [PAGES.TOS]: 'Terms of Service',
   [PAGES.UPLOADS]: 'Your uploads',
-  [PAGES.UPLOAD]: 'Upload',
+  [PAGES.UPLOAD]: 'Upload a File to Odysee',
   [PAGES.WALLET]: 'Wallet',
   [PAGES.YOUTUBE_SYNC]: 'YouTube Sync',
   [PAGES.YOUTUBE_TOS]: 'YouTube Sync Terms of Service',

ui/constants/pages.js

@@ -40,6 +40,7 @@ exports.DEPRECATED__DOWNLOADED = 'downloaded';
 exports.DEPRECATED__PUBLISH = 'publish';
 exports.DEPRECATED__PUBLISHED = 'published';
 exports.UPLOAD = 'upload';
+exports.POST = 'post';
 exports.UPLOADS = 'uploads';
 exports.GET_CREDITS = 'getcredits';
 exports.REPORT = 'report';
@@ -88,6 +89,7 @@ exports.NOTIFICATIONS = 'notifications';
 exports.YOUTUBE_SYNC = 'youtube';
 exports.LIVESTREAM = 'livestream';
 exports.LIVESTREAM_CURRENT = 'live';
+exports.LIVESTREAM_CREATE = 'livestream/create';
 exports.GENERAL = 'general';
 exports.LIST = 'list';
 exports.ODYSEE_MEMBERSHIP = 'membership';

ui/modal/modalPublish/view.jsx

@@ -89,10 +89,10 @@ class ModalPublishSuccess extends React.PureComponent<Props> {
               {livestream && (
                 <Button
                   button="primary"
-                  label={__('View My Dashboard')}
+                  label={__('View Livestream Settings')}
                   onClick={() => {
                     clearPublish();
-                    navigate(`/$/${PAGES.LIVESTREAM}`);
+                    navigate(`/$/${PAGES.LIVESTREAM}?t=Setup`);
                     closeModal();
                   }}
                 />

ui/modal/modalPublishPreview/view.jsx

@@ -50,6 +50,7 @@ type Props = {
   isLivestreamClaim: boolean,
   remoteFile: string,
   appLanguage: string,
+  // isLivestreamPublish?: boolean,
 };
 
 // class ModalPublishPreview extends React.PureComponent<Props> {
@@ -85,6 +86,7 @@ const ModalPublishPreview = (props: Props) => {
     isLivestreamClaim,
     remoteFile,
     appLanguage,
+    // isLivestreamPublish,
   } = props;
 
   const maxCharsBeforeOverflow = 128;
@@ -117,6 +119,7 @@ const ModalPublishPreview = (props: Props) => {
     }
   }, [publishSuccess, publishing, livestream]);
   // @endif
+
   function onConfirmed() {
     // Publish for real:
     publish(getFilePathName(filePath), false);
@@ -151,32 +154,40 @@ const ModalPublishPreview = (props: Props) => {
   const txFee = previewResponse ? previewResponse['total_fee'] : null;
   //   $FlowFixMe add outputs[0] etc to PublishResponse type
   const isOptimizeAvail = filePath && filePath !== '' && isVid && ffmpegStatus.available;
-  let modalTitle;
+
+  var modalTitle = 'Upload';
+  var confirmBtnText = 'Save';
+
   if (isStillEditing) {
-    if (livestream) {
+    if (livestream || isLivestreamClaim) {
       modalTitle = __('Confirm Update');
     } else {
       modalTitle = __('Confirm Edit');
     }
-  } else if (livestream) {
-    modalTitle = releasesInFuture ? __('Schedule Livestream') : __('Create Livestream');
+  } else if (livestream || isLivestreamClaim || remoteFile) {
+    modalTitle = releasesInFuture
+      ? __('Schedule Livestream')
+      : (!livestream || !isLivestreamClaim) && remoteFile
+      ? __('Publish Replay')
+      : __('Create Livestream');
+  } else if (isMarkdownPost) {
+    modalTitle = __('Confirm Post');
   } else {
     modalTitle = __('Confirm Upload');
   }
 
-  let confirmBtnText;
   if (!publishing) {
-    if (isStillEditing) {
-      confirmBtnText = __('Save');
-    } else if (livestream) {
+    if (isMarkdownPost) {
+      confirmBtnText = __('Post');
+    } else if (livestream || isLivestreamClaim) {
       confirmBtnText = __('Create');
     } else {
       confirmBtnText = __('Upload');
     }
   } else {
-    if (isStillEditing) {
+    if (isMarkdownPost) {
       confirmBtnText = __('Saving');
-    } else if (livestream) {
+    } else if (livestream || isLivestreamClaim) {
       confirmBtnText = __('Creating');
     } else {
       confirmBtnText = __('Uploading');
@@ -260,6 +271,7 @@ const ModalPublishPreview = (props: Props) => {
                   <tbody>
                     {!livestream && !isMarkdownPost && createRow(__('File'), getFilePathName(filePath))}
                     {livestream && remoteFile && createRow(__('Replay'), __('Remote File Selected'))}
+                    {livestream && filePath && createRow(__('Replay'), __('Manual Upload'))}
                     {isOptimizeAvail && createRow(__('Transcode'), optimize ? __('Yes') : __('No'))}
                     {createRow(__('Title'), formattedTitle)}
                     {createRow(__('Description'), descriptionValue)}

ui/page/fileListPublished/view.jsx

@@ -116,13 +116,6 @@ function FileListPublished(props: Props) {
                       onClick={() => fetchClaimListMine(params.page, params.page_size, true, filterBy.split(','))}
                     />
                   )}
-                  <Button
-                    icon={ICONS.PUBLISH}
-                    button="primary"
-                    label={__('Upload')}
-                    navigate={`/$/${PAGES.UPLOAD}`}
-                    onClick={() => clearPublish()}
-                  />
                 </div>
               }
               persistedStorageKey="claim-list-published"

ui/page/livestreamCreate/index.js

@@ -0,0 +1,11 @@
+import { connect } from 'react-redux';
+import { selectFetchingMyChannels } from 'redux/selectors/claims';
+import { selectBalance } from 'redux/selectors/wallet';
+import LivestreamCreatePage from './view';
+
+const select = (state) => ({
+  balance: selectBalance(state),
+  fetchingChannels: selectFetchingMyChannels(state),
+});
+
+export default connect(select, null)(LivestreamCreatePage);

ui/page/livestreamCreate/view.jsx

@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import LivestreamForm from 'component/publish/livestream/livestreamForm';
+import Page from 'component/page';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import Spinner from 'component/spinner';
+
+type Props = {
+  balance: number,
+  fetchingChannels: boolean,
+};
+
+function LivestreamCreatePage(props: Props) {
+  const { balance, fetchingChannels } = props;
+
+  return (
+    <Page className="uploadPage-wrapper" noFooter>
+      {balance < 0.01 && <YrblWalletEmpty />}
+      {balance >= 0.01 && fetchingChannels ? (
+        <div className="main--empty">
+          <Spinner />
+        </div>
+      ) : (
+        <LivestreamForm disabled={balance < 0.01} />
+      )}
+    </Page>
+  );
+}
+
+export default LivestreamCreatePage;

ui/page/livestreamSetup/index.js

@@ -9,13 +9,15 @@ import {
   makeSelectLivestreamsForChannelId,
   makeSelectIsFetchingLivestreams,
 } from 'redux/selectors/livestream';
+import { selectBalance } from 'redux/selectors/wallet';
+import { selectPublishFormValues } from 'redux/selectors/publish';
 import LivestreamSetupPage from './view';
-import { push } from 'connected-react-router';
 
 const select = (state) => {
   const activeChannelClaim = selectActiveChannelClaim(state);
   const { claim_id: channelId, name: channelName } = activeChannelClaim || {};
   return {
+    ...selectPublishFormValues(state),
     channelName,
     channelId,
     hasChannels: selectHasChannels(state),
@@ -25,12 +27,13 @@ const select = (state) => {
     pendingClaims: makeSelectPendingLivestreamsForChannelId(channelId)(state),
     fetchingLivestreams: makeSelectIsFetchingLivestreams(channelId)(state),
     user: selectUser(state),
+    balance: selectBalance(state),
   };
 };
 const perform = (dispatch) => ({
+  clearPublish: () => dispatch(doClearPublish()),
   doNewLivestream: (path) => {
     dispatch(doClearPublish());
-    dispatch(push(path));
   },
   fetchNoSourceClaims: (id) => dispatch(doFetchNoSourceClaims(id)),
 });

ui/page/livestreamSetup/view.jsx

@@ -1,13 +1,11 @@
 // @flow
 import * as PAGES from 'constants/pages';
 import * as ICONS from 'constants/icons';
-import * as PUBLISH_MODES from 'constants/publish_types';
+import { useHistory } from 'react-router';
 import I18nMessage from 'component/i18nMessage';
 import React from 'react';
 import Page from 'component/page';
-import Spinner from 'component/spinner';
 import Button from 'component/button';
-import ChannelSelector from 'component/channelSelector';
 import Yrbl from 'component/yrbl';
 import Lbry from 'lbry';
 import { toHex } from 'util/hex';
@@ -15,9 +13,13 @@ import { FormField } from 'component/common/form';
 import CopyableText from 'component/copyableText';
 import Card from 'component/common/card';
 import ClaimList from 'component/claimList';
-import usePersistedState from 'effects/use-persisted-state';
 import { LIVESTREAM_RTMP_URL } from 'constants/livestream';
 import { ENABLE_NO_SOURCE_CLAIMS } from 'config';
+import classnames from 'classnames';
+import LivestreamForm from 'component/publish/livestream/livestreamForm';
+import Icon from 'component/common/icon';
+import { useIsMobile } from 'effects/use-screensize';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
 
 type Props = {
   hasChannels: boolean,
@@ -26,11 +28,13 @@ type Props = {
   pendingClaims: Array<Claim>,
   doNewLivestream: (string) => void,
   fetchNoSourceClaims: (string) => void,
+  clearPublish: () => void,
   myLivestreamClaims: Array<StreamClaim>,
-  fetchingLivestreams: boolean,
   channelId: ?string,
   channelName: ?string,
   user: ?User,
+  balance: number,
+  editingURI: ?string,
 };
 
 export default function LivestreamSetupPage(props: Props) {
@@ -42,28 +46,38 @@ export default function LivestreamSetupPage(props: Props) {
     pendingClaims,
     doNewLivestream,
     fetchNoSourceClaims,
+    clearPublish,
     myLivestreamClaims,
-    fetchingLivestreams,
     channelId,
     channelName,
     user,
+    balance,
+    editingURI,
   } = props;
 
-  const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
-  const [showHelp, setShowHelp] = usePersistedState('livestream-help-seen', true);
+  const isMobile = useIsMobile();
+  const {
+    location: { search },
+  } = useHistory();
+  const urlParams = new URLSearchParams(search);
+  const urlTab = urlParams.get('t');
+  const urlSource = urlParams.get('s');
+
+  const [sigData, setSigData] = React.useState({ signature: undefined, signing_ts: undefined });
 
-  const hasLivestreamClaims = Boolean(myLivestreamClaims.length || pendingClaims.length);
   const { odysee_live_disabled: liveDisabled } = user || {};
 
   const livestreamEnabled = Boolean(ENABLE_NO_SOURCE_CLAIMS && user && !liveDisabled);
 
+  const [isClear, setIsClear] = React.useState(false);
+
   function createStreamKey() {
     if (!channelId || !channelName || !sigData.signature || !sigData.signing_ts) return null;
     return `${channelId}?d=${toHex(channelName)}&s=${sigData.signature}&t=${sigData.signing_ts}`;
   }
 
+  const formTitle = !editingURI ? __('Go Live') : __('Edit Livestream');
   const streamKey = createStreamKey();
-
   const pendingLength = pendingClaims.length;
   const totalLivestreamClaims = pendingClaims.concat(myLivestreamClaims);
   const helpText = (
@@ -106,6 +120,11 @@ export default function LivestreamSetupPage(props: Props) {
     </div>
   );
 
+  function createNewLivestream() {
+    setTab('Publish');
+    doNewLivestream(`/$/${PAGES.UPLOAD}`);
+  }
+
   React.useEffect(() => {
     // ensure we have a channel
     if (channelId && channelName) {
@@ -161,11 +180,11 @@ export default function LivestreamSetupPage(props: Props) {
     return (
       <div className={'w-full flex items-center justify-between'}>
         <span>{title}</span>
-        {!hideBtn && (
+        {!hideBtn && !isMobile && (
           <Button
             button="primary"
             iconRight={ICONS.ADD}
-            onClick={() => doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)}
+            onClick={() => createNewLivestream()}
             label={__('Create or Schedule a New Stream')}
           />
         )}
@@ -173,225 +192,257 @@ export default function LivestreamSetupPage(props: Props) {
     );
   };
 
+  const [tab, setTab] = React.useState(urlTab || 'Publish');
+
+  React.useEffect(() => {
+    if (editingURI) {
+      setTab('Publish');
+    }
+  }, [editingURI]);
+
+  React.useEffect(() => {
+    if (urlTab) {
+      setTab(urlTab);
+    }
+  }, [urlTab]);
+
+  const HeaderMenu = (e) => {
+    return (
+      <>
+        <Button
+          key={'Publish'}
+          iconSize={18}
+          label={'Publish'}
+          button="alt"
+          onClick={() => {
+            setTab('Publish');
+          }}
+          disabled={e.disabled}
+          className={classnames('button-toggle', { 'button-toggle--active': tab === 'Publish' })}
+        />
+        <Button
+          key={'Setup'}
+          iconSize={18}
+          label={'Local Setup'}
+          button="alt"
+          onClick={() => {
+            setTab('Setup');
+          }}
+          disabled={e.disabled || e.isEditing}
+          className={classnames('button-toggle', { 'button-toggle--active': tab === 'Setup' })}
+        />
+      </>
+    );
+  };
+
+  function resetForm() {
+    clearPublish();
+    setTab('Publish');
+  }
+
   return (
-    <Page>
-      {/* channel selector */}
-      {!fetchingChannels && (
-        <>
-          <div className="section__actions--between">
-            <ChannelSelector hideAnon />
-          </div>
-        </>
-      )}
+    <Page className="uploadPage-wrapper">
+      {balance < 0.01 && <YrblWalletEmpty />}
+      <h1 className="page__title">
+        <Icon icon={ICONS.VIDEO} />
+        <label>
+          {formTitle}
+          {!isClear && <Button onClick={() => resetForm()} icon={ICONS.REFRESH} button="primary" label="Clear" />}
+        </label>
+      </h1>
+      <HeaderMenu disabled={balance < 0.01} isEditing={editingURI} />
 
-      {/* livestreaming disabled */}
-      {!livestreamEnabled && (
-        <div style={{ marginTop: '11px' }}>
-          <h2 style={{ marginBottom: '15px' }}>
-            {__('This account has livestreaming disabled, please reach out to hello@odysee.com for assistance.')}
-          </h2>
-        </div>
-      )}
-
-      {/* show livestreaming frontend */}
-      {livestreamEnabled && (
-        <div className="card-stack">
-          {/* getting channel data */}
-          {fetchingChannels && (
-            <div className="main--empty">
-              <Spinner delayed />
+      {tab === 'Setup' && (
+        <div className={editingURI ? 'disabled' : ''}>
+          {/* livestreaming disabled */}
+          {!livestreamEnabled && (
+            <div style={{ marginTop: '11px' }}>
+              <h2 style={{ marginBottom: '15px' }}>
+                {__('This account has livestreaming disabled, please reach out to hello@odysee.com for assistance.')}
+              </h2>
             </div>
           )}
 
-          {/* no channels yet */}
-          {!fetchingChannels && !hasChannels && (
-            <Yrbl
-              type="happy"
-              title={__("You haven't created a channel yet, let's fix that!")}
-              actions={
-                <div className="section__actions">
-                  <Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
-                </div>
-              }
-            />
-          )}
-
-          {/* getting livestreams */}
-          {fetchingLivestreams && !fetchingChannels && !hasLivestreamClaims && (
-            <div className="main--empty">
-              <Spinner delayed />
-            </div>
-          )}
-
-          {!fetchingChannels && channelId && (
-            <>
-              <Card
-                titleActions={
-                  <Button
-                    button="close"
-                    icon={showHelp ? ICONS.UP : ICONS.DOWN}
-                    onClick={() => setShowHelp(!showHelp)}
-                  />
-                }
-                title={__('Go Live on Odysee')}
-                subtitle={<>{__(`Expand to learn more about setting up a livestream.`)} </>}
-                actions={showHelp && helpText}
-              />
-              {streamKey && totalLivestreamClaims.length > 0 && (
-                <Card
-                  className="section"
-                  title={__('Your stream key')}
+          {/* show livestreaming frontend */}
+          {livestreamEnabled && (
+            <div className="card-stack">
+              {/* no channels yet */}
+              {!fetchingChannels && !hasChannels && (
+                <Yrbl
+                  type="happy"
+                  title={__("You haven't created a channel yet, let's fix that!")}
                   actions={
-                    <>
-                      <CopyableText
-                        primaryButton
-                        name="stream-server"
-                        label={__('Stream server')}
-                        copyable={LIVESTREAM_RTMP_URL}
-                        snackMessage={__('Copied stream server URL.')}
-                      />
-                      <CopyableText
-                        primaryButton
-                        enableInputMask
-                        name="livestream-key"
-                        label={__('Stream key (can be reused)')}
-                        copyable={streamKey}
-                        snackMessage={__('Copied stream key.')}
-                      />
-                    </>
+                    <div className="section__actions">
+                      <Button button="primary" navigate={`/$/${PAGES.CHANNEL_NEW}`} label={__('Create A Channel')} />
+                    </div>
                   }
                 />
               )}
 
-              {totalLivestreamClaims.length > 0 ? (
+              {!fetchingChannels && channelId && (
                 <>
-                  {Boolean(pendingClaims.length) && (
-                    <div className="section">
-                      <ClaimList
-                        header={__('Your pending livestreams uploads')}
-                        uris={pendingClaims.map((claim) => claim.permanent_url)}
-                      />
-                    </div>
-                  )}
-                  {Boolean(myLivestreamClaims.length) && (
+                  <Card
+                    className={classnames('section card--livestream-key', {
+                      disabled: !streamKey || totalLivestreamClaims.length === 0,
+                    })}
+                    actions={
+                      <>
+                        <CopyableText
+                          primaryButton
+                          enableInputMask={!streamKey || totalLivestreamClaims.length === 0}
+                          name="stream-server"
+                          label={__('Stream server')}
+                          copyable={LIVESTREAM_RTMP_URL}
+                          snackMessage={__('Copied stream server URL.')}
+                          disabled={!streamKey || totalLivestreamClaims.length === 0}
+                        />
+                        <CopyableText
+                          primaryButton
+                          enableInputMask
+                          name="livestream-key"
+                          label={__('Stream key (can be reused)')}
+                          copyable={!streamKey || totalLivestreamClaims.length === 0 ? LIVESTREAM_RTMP_URL : streamKey}
+                          snackMessage={__('Copied stream key.')}
+                        />
+                      </>
+                    }
+                  />
+                  {totalLivestreamClaims.length > 0 ? (
                     <>
-                      {Boolean(upcomingStreams.length) && (
-                        <div className="section">
+                      {Boolean(pendingClaims.length) && (
+                        <div className="section card--livestream-past">
                           <ClaimList
-                            header={<ListHeader title={__('Your Scheduled Livestreams')} />}
-                            uris={upcomingStreams.map((claim) => claim.permanent_url)}
+                            header={__('Your pending livestreams uploads')}
+                            uris={pendingClaims.map((claim) => claim.permanent_url)}
                           />
                         </div>
                       )}
-                      <div className="section">
-                        <ClaimList
-                          header={
-                            <ListHeader title={__('Your Past Livestreams')} hideBtn={Boolean(upcomingStreams.length)} />
-                          }
-                          empty={
-                            <I18nMessage
-                              tokens={{
-                                check_again: (
-                                  <Button
-                                    button="link"
-                                    onClick={() => fetchNoSourceClaims(channelId)}
-                                    label={__('Check again')}
-                                  />
-                                ),
-                              }}
-                            >
-                              Nothing here yet. %check_again%
-                            </I18nMessage>
-                          }
-                          uris={pastStreams.map((claim) => claim.permanent_url)}
-                        />
-                      </div>
+                      {Boolean(myLivestreamClaims.length) && (
+                        <>
+                          {Boolean(upcomingStreams.length) && (
+                            <div className="section">
+                              <ClaimList
+                                header={<ListHeader title={__('Your Scheduled Livestreams')} />}
+                                uris={upcomingStreams.map((claim) => claim.permanent_url)}
+                              />
+                            </div>
+                          )}
+                          <div className="section card--livestream-past">
+                            <ClaimList
+                              header={
+                                <ListHeader
+                                  title={__('Your Past Livestreams')}
+                                  hideBtn={Boolean(upcomingStreams.length)}
+                                />
+                              }
+                              empty={
+                                <I18nMessage
+                                  tokens={{
+                                    check_again: (
+                                      <Button
+                                        button="link"
+                                        onClick={() => fetchNoSourceClaims(channelId)}
+                                        label={__('Check again')}
+                                      />
+                                    ),
+                                  }}
+                                >
+                                  Nothing here yet. %check_again%
+                                </I18nMessage>
+                              }
+                              uris={pastStreams.map((claim) => claim.permanent_url)}
+                            />
+                          </div>
+                        </>
+                      )}
                     </>
+                  ) : (
+                    <Yrbl
+                      className="livestream__publish-intro"
+                      title={__('No livestream publishes found')}
+                      subtitle={__(
+                        'You need to upload your livestream details before you can go live. Please note: Replays must be published manually after your stream via the Update button on the livestream.'
+                      )}
+                      actions={
+                        <div className="section__actions">
+                          <Button
+                            button="primary"
+                            onClick={() => createNewLivestream()}
+                            label={__('Create A Livestream')}
+                          />
+                          <Button
+                            button="alt"
+                            onClick={() => {
+                              fetchNoSourceClaims(channelId);
+                            }}
+                            label={__('Check again...')}
+                          />
+                        </div>
+                      }
+                    />
                   )}
-                </>
-              ) : (
-                <Yrbl
-                  className="livestream__publish-intro"
-                  title={__('No livestream publishes found')}
-                  subtitle={__(
-                    'You need to upload your livestream details before you can go live. Please note: Replays must be published manually after your stream via the Update button on the livestream.'
-                  )}
-                  actions={
-                    <div className="section__actions">
-                      <Button
-                        button="primary"
-                        onClick={() =>
-                          doNewLivestream(`/$/${PAGES.UPLOAD}?type=${PUBLISH_MODES.LIVESTREAM.toLowerCase()}`)
-                        }
-                        label={__('Create A Livestream')}
+                  <Card className="card--livestream-instructions" title="Instructions" actions={helpText} />
+
+                  {/* Debug Stuff */}
+                  {streamKey && false && activeChannelClaim && (
+                    <div style={{ marginTop: 'var(--spacing-l)' }}>
+                      <h3>Debug Info</h3>
+
+                      {/* Channel ID */}
+                      <FormField
+                        name={'channelId'}
+                        label={'Channel ID'}
+                        type={'text'}
+                        defaultValue={activeChannelClaim.claim_id}
+                        readOnly
                       />
-                      <Button
-                        button="alt"
-                        onClick={() => {
-                          fetchNoSourceClaims(channelId);
-                        }}
-                        label={__('Check again...')}
+
+                      {/* Signature */}
+                      <FormField
+                        name={'signature'}
+                        label={'Signature'}
+                        type={'text'}
+                        defaultValue={sigData.signature}
+                        readOnly
+                      />
+
+                      {/* Signature TS */}
+                      <FormField
+                        name={'signaturets'}
+                        label={'Signature Timestamp'}
+                        type={'text'}
+                        defaultValue={sigData.signing_ts}
+                        readOnly
+                      />
+
+                      {/* Hex Data */}
+                      <FormField
+                        name={'datahex'}
+                        label={'Hex Data'}
+                        type={'text'}
+                        defaultValue={toHex(activeChannelClaim.name)}
+                        readOnly
+                      />
+
+                      {/* Channel Public Key */}
+                      <FormField
+                        name={'channelpublickey'}
+                        label={'Public Key'}
+                        type={'text'}
+                        defaultValue={activeChannelClaim.value.public_key}
+                        readOnly
                       />
                     </div>
-                  }
-                />
+                  )}
+                </>
               )}
-
-              {/* Debug Stuff */}
-              {streamKey && false && activeChannelClaim && (
-                <div style={{ marginTop: 'var(--spacing-l)' }}>
-                  <h3>Debug Info</h3>
-
-                  {/* Channel ID */}
-                  <FormField
-                    name={'channelId'}
-                    label={'Channel ID'}
-                    type={'text'}
-                    defaultValue={activeChannelClaim.claim_id}
-                    readOnly
-                  />
-
-                  {/* Signature */}
-                  <FormField
-                    name={'signature'}
-                    label={'Signature'}
-                    type={'text'}
-                    defaultValue={sigData.signature}
-                    readOnly
-                  />
-
-                  {/* Signature TS */}
-                  <FormField
-                    name={'signaturets'}
-                    label={'Signature Timestamp'}
-                    type={'text'}
-                    defaultValue={sigData.signing_ts}
-                    readOnly
-                  />
-
-                  {/* Hex Data */}
-                  <FormField
-                    name={'datahex'}
-                    label={'Hex Data'}
-                    type={'text'}
-                    defaultValue={toHex(activeChannelClaim.name)}
-                    readOnly
-                  />
-
-                  {/* Channel Public Key */}
-                  <FormField
-                    name={'channelpublickey'}
-                    label={'Public Key'}
-                    type={'text'}
-                    defaultValue={activeChannelClaim.value.public_key}
-                    readOnly
-                  />
-                </div>
-              )}
-            </>
+            </div>
           )}
         </div>
       )}
+      {tab === 'Publish' && (
+        <LivestreamForm setClearStatus={setIsClear} disabled={balance < 0.01} urlSource={urlSource} />
+      )}
     </Page>
   );
 }

ui/page/post/index.js

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { selectFetchingMyChannels } from 'redux/selectors/claims';
 import { selectBalance } from 'redux/selectors/wallet';
 import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
-import PublishPage from './view';
+import PostPage from './view';
 
 const select = (state) => ({
   balance: selectBalance(state),
@@ -10,4 +10,4 @@ const select = (state) => ({
   fetchingChannels: selectFetchingMyChannels(state),
 });
 
-export default connect(select, null)(PublishPage);
+export default connect(select, null)(PostPage);

ui/page/post/view.jsx

@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import PostForm from 'component/publish/post/postForm';
+import Page from 'component/page';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import Spinner from 'component/spinner';
+
+type Props = {
+  balance: number,
+  fetchingChannels: boolean,
+};
+
+function PostPage(props: Props) {
+  const { balance, fetchingChannels } = props;
+
+  return (
+    <Page className="uploadPage-wrapper" noFooter>
+      {balance < 0.01 && <YrblWalletEmpty />}
+      {balance >= 0.01 && fetchingChannels ? (
+        <div className="main--empty">
+          <Spinner />
+        </div>
+      ) : (
+        <PostForm disabled={balance < 0.01} />
+      )}
+    </Page>
+  );
+}
+
+export default PostPage;

ui/page/publish/view.jsx

@@ -1,41 +0,0 @@
-// @flow
-import React from 'react';
-import PublishForm from 'component/publishForm';
-import Page from 'component/page';
-import YrblWalletEmpty from 'component/yrblWalletEmpty';
-import Spinner from 'component/spinner';
-
-type Props = {
-  balance: number,
-  fetchingChannels: boolean,
-};
-
-function PublishPage(props: Props) {
-  const { balance, fetchingChannels } = props;
-
-  function scrollToTop() {
-    const mainContent = document.querySelector('main');
-    if (mainContent) {
-      // $FlowFixMe
-      mainContent.scrollTo({
-        top: 0,
-        behavior: 'smooth',
-      });
-    }
-  }
-
-  return (
-    <Page className="uploadPage-wrapper" noFooter>
-      {balance === 0 && <YrblWalletEmpty />}
-      {balance !== 0 && fetchingChannels ? (
-        <div className="main--empty">
-          <Spinner />
-        </div>
-      ) : (
-        <PublishForm scrollToTop={scrollToTop} disabled={balance === 0} />
-      )}
-    </Page>
-  );
-}
-
-export default PublishPage;

ui/page/top/index.js

@@ -1,6 +1,7 @@
 import { connect } from 'react-redux';
 import TopPage from './view';
-import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+// import { doClearPublish, doPrepareEdit } from 'redux/actions/publish';
+import { doClearPublish } from 'redux/actions/publish';
 import { doResolveUris } from 'redux/actions/claims';
 import { doOpenModal } from 'redux/actions/app';
 import { push } from 'connected-react-router';
@@ -19,7 +20,7 @@ const select = (state, props) => {
 const perform = (dispatch) => ({
   beginPublish: (name) => {
     dispatch(doClearPublish());
-    dispatch(doPrepareEdit({ name }));
+    // dispatch(doPrepareEdit({ name }));
     dispatch(push(`/$/${PAGES.UPLOAD}`));
   },
   doResolveUris: (uris) => dispatch(doResolveUris(uris)),

ui/page/upload/index.js

@@ -0,0 +1,13 @@
+import { connect } from 'react-redux';
+import { selectFetchingMyChannels } from 'redux/selectors/claims';
+import { selectBalance } from 'redux/selectors/wallet';
+import { selectUnclaimedRewardValue } from 'redux/selectors/rewards';
+import UploadPage from './view';
+
+const select = (state) => ({
+  balance: selectBalance(state),
+  totalRewardValue: selectUnclaimedRewardValue(state),
+  fetchingChannels: selectFetchingMyChannels(state),
+});
+
+export default connect(select, null)(UploadPage);

ui/page/upload/view.jsx

@@ -0,0 +1,30 @@
+// @flow
+import React from 'react';
+import UploadForm from 'component/publish/upload/uploadForm';
+import Page from 'component/page';
+import YrblWalletEmpty from 'component/yrblWalletEmpty';
+import Spinner from 'component/spinner';
+
+type Props = {
+  balance: number,
+  fetchingChannels: boolean,
+};
+
+function UploadPage(props: Props) {
+  const { balance, fetchingChannels } = props;
+
+  return (
+    <Page className="uploadPage-wrapper" noFooter>
+      {balance < 0.01 && <YrblWalletEmpty />}
+      {balance >= 0.01 && fetchingChannels ? (
+        <div className="main--empty">
+          <Spinner />
+        </div>
+      ) : (
+        <UploadForm disabled={balance < 0.01} />
+      )}
+    </Page>
+  );
+}
+
+export default UploadPage;

ui/redux/actions/publish.js

@@ -393,8 +393,8 @@ export const doResetThumbnailStatus = () => (dispatch: Dispatch) => {
 export const doBeginPublish = (name: string) => (dispatch: Dispatch) => {
   dispatch(doClearPublish());
   // $FlowFixMe
-  dispatch(doPrepareEdit({ name }));
-  dispatch(push(`/$/${PAGES.UPLOAD}`));
+  // dispatch(doPrepareEdit({ name }));
+  // dispatch(push(`/$/${PAGES.UPLOAD}`));
 };
 
 export const doClearPublish = () => (dispatch: Dispatch) => {
@@ -536,9 +536,7 @@ export const doUploadThumbnail = (
   }
 };
 
-export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileListItem, fs: any) => (
-  dispatch: Dispatch
-) => {
+export const doPrepareEdit = (claim: StreamClaim, uri: string, claimType: string) => (dispatch: Dispatch) => {
   const { name, amount, value = {} } = claim;
   const channelName = (claim && claim.signing_channel && claim.signing_channel.name) || null;
   const {
@@ -598,6 +596,18 @@ export const doPrepareEdit = (claim: StreamClaim, uri: string, fileInfo: FileLis
   }
 
   dispatch({ type: ACTIONS.DO_PREPARE_EDIT, data: publishData });
+
+  switch (claimType) {
+    case 'post':
+      dispatch(push(`/$/${PAGES.POST}`));
+      break;
+    case 'livestream':
+      dispatch(push(`/$/${PAGES.LIVESTREAM}`));
+      break;
+    default:
+      dispatch(push(`/$/${PAGES.UPLOAD}`));
+      break;
+  }
 };
 
 export const doPublish = (success: Function, fail: Function, preview: Function, payload: any) => (

ui/redux/reducers/publish.js

@@ -54,6 +54,7 @@ type PublishState = {
   currentUploads: { [key: string]: FileUploadItem },
   isMarkdownPost: boolean,
   isLivestreamPublish: boolean,
+  publishError?: boolean,
 };
 
 const defaultState: PublishState = {
@@ -185,7 +186,11 @@ export const publishReducer = handleActions(
       }
 
       if (!currentUploads[key]) {
-        return state;
+        if (status === 'error' || status === 'conflict') {
+          return { ...state, publishError: true };
+        } else {
+          return state;
+        }
       }
 
       if (progress) {

ui/scss/component/_channel.scss

@@ -627,6 +627,7 @@ $actions-z-index: 2;
   }
 
   .ff-container {
+    margin-right: var(--spacing-xs) !important;
     canvas {
       border-radius: 50%;
     }
@@ -673,6 +674,7 @@ $actions-z-index: 2;
   }
 
   .ff-container {
+    margin-right: var(--spacing-xs) !important;
     canvas {
       border-radius: 50%;
     }
@@ -684,6 +686,124 @@ $actions-z-index: 2;
   }
 }
 
+.channel__selector--publish {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-top: -2px;
+  width: unset !important;
+
+  .channel-thumbnail {
+    width: 1.4rem;
+    height: 1.4rem;
+    .channel-thumbnail__custom {
+      width: 1.4rem;
+      height: 1.4rem;
+    }
+  }
+  .ff-container {
+    margin-right: var(--spacing-xs) !important;
+    canvas {
+      width: 1.4rem !important;
+      height: 1.4rem !important;
+      border-radius: 50%;
+    }
+    .freezeframe-img {
+      width: 1.4rem !important;
+      height: 1.4rem !important;
+      border-radius: 50%;
+    }
+  }
+
+  .claim-preview__title {
+    margin-right: var(--spacing-xs);
+  }
+  .comment__badge {
+    svg {
+      width: 1.4rem;
+      height: 1.4rem;
+      margin-bottom: -2px;
+    }
+  }
+
+  .channel__list-item {
+    height: var(--height-button);
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
+
+  .icon--ChevronDown {
+    margin-left: var(--spacing-s);
+  }
+
+  @media (max-width: $breakpoint-small) {
+    margin-top: -2px !important;
+    margin-bottom: 0 !important;
+    width: unset !important;
+    button {
+      padding: 0 !important;
+    }
+  }
+}
+
+.channel__list--publish {
+  .channel__list-item {
+    height: var(--height-button);
+    .channel-thumbnail {
+      width: 1.4rem;
+      height: 1.4rem;
+      .channel-thumbnail__custom {
+        width: 1.4rem;
+        height: 1.4rem;
+      }
+    }
+    .ff-container {
+      margin-right: var(--spacing-xs) !important;
+      canvas {
+        width: 1.4rem !important;
+        height: 1.4rem !important;
+        border-radius: 50%;
+      }
+      .freezeframe-img {
+        width: 1.4rem !important;
+        height: 1.4rem !important;
+        border-radius: 50%;
+      }
+    }
+    .claim-preview__title {
+      margin-right: var(--spacing-xs);
+    }
+    .comment__badge {
+      svg {
+        width: 1.4rem;
+        height: 1.4rem;
+        margin-bottom: -2px;
+      }
+    }
+
+    .icon__wrapper {
+      width: 1.4rem;
+      height: 1.4rem;
+      margin-right: var(--spacing-xs);
+    }
+  }
+}
+
+.channel__selector--tabHeader {
+  @extend .channel__selector--publish;
+  float: right;
+  margin-left: var(--spacing-xxs);
+  margin-top: 0 !important;
+
+  .channel__list-item {
+    border-radius: var(--border-radius);
+    display: flex !important;
+    align-items: center;
+  }
+}
+
+.channel__list--tabHeader {
+  @extend .channel__list--publish;
+}
+
 .channel-staked__wrapper {
   display: flex;
   position: absolute;

ui/scss/component/_content.scss

@@ -402,7 +402,8 @@
   background-color: #000;
 
   &.content__loading--document {
-    background-color: var(--color-background);
+    // background-color: var(--color-background);
+    background-color: transparent;
     padding: calc(var(--spacing-xl) * 5) 0;
 
     .content__loading-text {

ui/scss/component/_form-field.scss

@@ -316,6 +316,18 @@ input-submit {
   @extend input-submit;
 }
 
+.input-max-counter {
+  display: inline;
+  font-size: var(--font-xsmall) !important;
+  float: right;
+  opacity: 0.6;
+}
+
+.input-max-counter-error {
+  @extend .input-max-counter;
+  color: var(--color-text-error);
+}
+
 input-submit {
   align-items: center;
 
@@ -513,6 +525,7 @@ fieldset-group {
 }
 
 .form-field__hint {
+  opacity: 0.8;
   font-size: var(--font-xsmall);
   color: var(--color-input-label);
 }

ui/scss/component/_header.scss

@@ -44,6 +44,15 @@
         }
       }
     }
+    .header__navigationItem--balance {
+      transition: border-radius 0.4s;
+      @media (max-width: $breakpoint-large) {
+        border-radius: 50%;
+        .button__label {
+          display: none;
+        }
+      }
+    }
   }
 
   .button--link {
@@ -242,8 +251,8 @@
   align-items: center;
 
   @media (min-width: $breakpoint-small) {
-    width: 15rem;
-    min-width: 15rem;
+    width: 16rem;
+    min-width: 16rem;
   }
 }
 
@@ -321,7 +330,7 @@
   }
 
   @media (max-width: $breakpoint-small) {
-    margin: 0;
+    // margin: 0;
     width: calc(var(--header-height-mobile) - var(--spacing-m));
     height: calc(var(--header-height-mobile) - var(--spacing-m));
   }
@@ -459,6 +468,13 @@
   display: flex;
   justify-content: center;
   width: 100%;
+
+  .button.active {
+    background-color: var(--color-primary);
+    svg {
+      stroke: var(--color-primary-contrast);
+    }
+  }
 }
 
 .header__authTitle {

ui/scss/component/_livestream.scss

@@ -132,43 +132,6 @@
   object-fit: cover;
 }
 
-.livestream__data-row {
-  cursor: pointer;
-  .radio {
-    cursor: pointer;
-  }
-  &:nth-child(n) {
-    &.livestream__data-row--selected {
-      background-color: var(--color-button-toggle-bg);
-    }
-  }
-  td {
-    padding-right: var(--spacing-m);
-
-    @media (max-width: $breakpoint-small) {
-      padding: var(--spacing-xs);
-    }
-  }
-  &:hover {
-    td {
-      .radio {
-        label::before {
-          cursor: pointer;
-          background-color: var(--color-input-toggle-bg-hover);
-        }
-      }
-      label {
-        cursor: pointer;
-      }
-    }
-
-    input {
-      cursor: pointer;
-      background-color: var(--color-header-bg-selected);
-    }
-  }
-}
-
 .livestream-list {
   margin-bottom: var(--spacing-l);
   border-bottom: 1px solid var(--color-border);

ui/scss/component/_modal.scss

@@ -304,10 +304,16 @@
   margin-top: var(--spacing-s);
   padding: var(--spacing-s);
 
-  background-color: var(--color-error);
-  border-left: 2px solid var(--color-text-error);
+  background-color: rgba(255, 0, 0, 0.02);
+  border-radius: var(--border-radius);
+  border: 1px solid var(--color-text-error);
+  border-left: 3px solid var(--color-text-error);
   color: var(--color-text-error);
   list-style: none;
   overflow-y: scroll;
   white-space: pre-wrap;
+
+  li {
+    margin-bottom: 0;
+  }
 }

ui/scss/component/_preorder-button.scss

@@ -13,7 +13,9 @@
 }
 
 section.preorder-content-modal {
-  h2.card__title, .section__subtitle, .handle-submit-area {
+  h2.card__title,
+  .section__subtitle,
+  .handle-submit-area {
     text-align: center;
   }
 
@@ -39,9 +41,9 @@ section.preorder-content-modal {
   }
 }
 
-
 section.preorder-content-modal-loading {
-  h2.card__title, .section__subtitle {
+  h2.card__title,
+  .section__subtitle {
     text-align: center;
   }
 

ui/scss/init/_gui.scss

@@ -765,6 +765,77 @@ img {
         }
       }
     }
+    .section__actions {
+      margin-bottom: 0;
+    }
+  }
+
+  .card-stack {
+    .section__actions:last-of-type {
+      .button--primary {
+        border-radius: var(--border-radius) 0 0 var(--border-radius);
+        margin-right: 2px;
+      }
+    }
+  }
+
+  .page__title {
+    display: flex;
+    margin-bottom: var(--spacing-l);
+
+    svg {
+      width: 3rem;
+      height: 3rem;
+      background-color: var(--color-header-background);
+      border-radius: 50%;
+      padding: var(--spacing-s);
+      // margin-bottom:calc(var(--spacing-s) * -1);
+    }
+    label {
+      font-size: var(--font-large);
+      font-weight: var(--font-weight-bold);
+      padding-left: 10px;
+      // width:auto;
+      margin-top: var(--spacing-s);
+      flex: 1;
+      border-bottom: 1px solid var(--color-header-background);
+    }
+
+    button {
+      height: 36px;
+      margin-top: -6px;
+      float: right;
+      padding-left: var(--spacing-xs);
+      padding-right: var(--spacing-s);
+      .button__content {
+        .button__label {
+          font-size: var(--font-body);
+          margin-left: 0;
+        }
+      }
+      .icon {
+        background-color: unset;
+        width: 2rem;
+        height: 2rem;
+        padding: 8px;
+        padding-left: 0;
+        padding-right: 0;
+        margin: 0;
+      }
+    }
+  }
+
+  .card {
+    margin-bottom: var(--spacing-xl) !important;
+    .card__body {
+      padding-top: 0;
+    }
+    .card__main-actions {
+      padding-top: 0;
+    }
+    .card__title-section {
+      padding-bottom: 0;
+    }
   }
 
   .card__title-section {
@@ -788,7 +859,7 @@ img {
     margin-bottom: 0;
     border-bottom: 1px solid var(--color-border);
     @media (max-width: $breakpoint-small) {
-      margin-bottom: var(--spacing-l);
+      // margin-bottom: var(--spacing-l);
     }
   }
 
@@ -877,6 +948,102 @@ img {
     color: var(--color-text);
   }
 
+  .card--livestream {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-s);
+    margin-top: var(--spacing-l);
+    margin-bottom: var(--spacing-m) !important;
+
+    .button-toggle {
+      background-color: var(--color-header-background) !important;
+      border: 2px solid var(--color-border);
+      &:hover:not(.button-toggle--active) {
+        background-color: rgba(var(--color-border-base), 0.1) !important;
+        //border: 2px solid transparent;
+      }
+    }
+
+    .button-toggle--active {
+      background-color: var(--color-border) !important;
+      border: 2px solid transparent;
+    }
+
+    .card__main-actions {
+      padding-top: 0;
+
+      div {
+        display: inline-block;
+      }
+
+      .button--secondary {
+        float: right;
+      }
+    }
+
+    @media (max-width: $breakpoint-medium) {
+      .card__main-actions {
+        margin-top: 0;
+        .button--secondary {
+          padding: 0 var(--spacing-xs);
+          top: 0;
+          .button__label {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  .card--livestream-instructions {
+    margin-top: var(--spacing-m);
+    .card__title-actions-container {
+      button {
+        background-color: var(--color-primary);
+        margin-right: calc(var(--spacing-xs) * -1);
+      }
+    }
+
+    .card__header--between {
+      border-bottom: 0;
+    }
+    .card__main-actions {
+      background: rgba(var(--color-header-background-base), 0.4);
+      border-radius: var(--border-radius);
+      padding: var(--spacing-s);
+      .section__subtitle {
+        color: rgba(var(--color-text-base), 0.8);
+      }
+    }
+  }
+
+  .card--livestream-past {
+    margin-top: var(--spacing-l);
+  }
+
+  .card--livestream-key {
+    background: rgba(var(--color-header-background-base), 0.4);
+    border-radius: var(--border-radius);
+    padding: var(--spacing-s);
+    margin-top: var(--spacing-l);
+    margin-bottom: var(--spacing-xl) !important;
+
+    input {
+      box-shadow: 0 0 0 2px var(--color-border) inset;
+    }
+
+    .button--primary {
+      border: unset;
+      margin-bottom: -2px;
+    }
+
+    @media (max-width: $breakpoint-small) {
+      .card__main-actions {
+        margin-top: var(--spacing-s);
+      }
+    }
+  }
+
   .card--file {
     background: rgba(var(--color-header-background-base), 0.4);
     border-radius: var(--border-radius);
@@ -902,6 +1069,26 @@ img {
     label {
       margin-left: 0 !important;
     }
+
+    .fieldgroup--paginate {
+      padding-bottom: 0;
+    }
+
+    .help {
+      // margin-bottom:0;
+    }
+
+    .form-spacer {
+      margin-top: var(--spacing-l);
+      margin-bottom: var(--spacing-l);
+    }
+
+    .help--link {
+      margin: 0;
+      margin-top: calc(var(--spacing-l) * -1);
+      font-size: var(--font-small);
+      opacity: 0.8;
+    }
   }
 
   .card__title-disabled {
@@ -948,6 +1135,7 @@ img {
     padding: var(--spacing-s);
     input {
       box-shadow: 0 0 0 2px var(--color-border) inset;
+      z-index: unset;
     }
     .button--secondary {
       border-width: 2px 2px 2px 0;
@@ -1002,21 +1190,6 @@ img {
       .card__subtitle {
         font-size: var(--font-small);
       }
-    }
-  }
-
-  .card--price {
-    .input--currency-select {
-      label {
-        margin-left: 0 !important;
-      }
-    }
-    .form-field--price-amount,
-    select {
-      box-shadow: 0 0 0 2px var(--color-border) inset;
-    }
-
-    @media (max-width: $breakpoint-small) {
       .card__main-actions {
         margin-top: 0;
       }
@@ -1026,6 +1199,7 @@ img {
   .card--additional-options {
     margin-bottom: var(--spacing-l) !important;
     .card {
+      margin-bottom: 0 !important;
       fieldset-section {
         padding-bottom: 0;
       }
@@ -1033,10 +1207,10 @@ img {
     .card__main-actions {
       //padding-top:var(--spacing-s);
       padding-top: 0;
+      margin-top: 0;
     }
     .section__actions {
       padding: var(--spacing-s);
-      margin-top: 0;
     }
     input,
     select {
@@ -1088,6 +1262,41 @@ img {
       }
       border-top: unset;
     }
+
+    .radio {
+      padding-left: 0;
+      .input--currency-select {
+        label {
+          margin-left: 0 !important;
+        }
+      }
+      .form-field--price-amount,
+      select {
+        box-shadow: 0 0 0 2px var(--color-border) inset;
+      }
+
+      @media (max-width: $breakpoint-small) {
+        .card__main-actions {
+          margin-top: 0;
+        }
+      }
+    }
+
+    .fieldset-group--smushed {
+      fieldset-section {
+        padding-left: 0;
+        padding-right: 0 !important;
+
+        .form-field--price-amount {
+          margin-right: 2px;
+        }
+      }
+      .input--currency-select {
+        label {
+          margin-left: 0;
+        }
+      }
+    }
   }
 
   .card--date {
@@ -1096,8 +1305,6 @@ img {
     padding: var(--spacing-s);
 
     .form-field__hint {
-      opacity: 0.8;
-      // margin-bottom: var(--spacing-l);
       color: var(--color-text);
     }
 
@@ -1153,6 +1360,19 @@ img {
       }
     }
   }
+
+  .yrbl__wrap {
+    .button--primary {
+      border-radius: var(--border-radius) !important;
+      margin-right: var(--spacing-xxs) !important;
+    }
+  }
+
+  .help {
+    .button--link {
+      margin-left: 0;
+    }
+  }
 }
 
 [data-reach-menu-popover] {

ui/scss/themes/dark.scss

@@ -21,7 +21,8 @@
   --color-background-base: 32, 32, 32;
   --color-background: rgba(var(--color-background-base), 1);
   --color-background-overlay: #0c0d0e95;
-  --color-border: rgba(68, 68, 68, 0.5);
+  --color-border-base: 68, 68, 68;
+  --color-border: rgba(var(--color-border-base), 0.5);
   --color-card-background: var(--color-header-background);
   --color-card-background-highlighted: #241c30;
 

ui/scss/themes/light.scss

@@ -24,7 +24,8 @@
   --color-secondary-alt-2: #fefcf6;
 
   // Structure
-  --color-border: rgba(0, 0, 0, 0.2);
+  --color-border-base: 0, 0, 0;
+  --color-border: rgba(var(--color-border-base), 0.2);
   --color-background-base: 231, 231, 231;
   --color-background: rgba(var(--color-background-base), 1);
   --color-background-overlay: rgba(18, 18, 18, 0.9);