add new 'livestream' publish mode

ui/component/channelSelector/view.jsx

@@ -30,7 +30,7 @@ function ChannelListItem(props: ListItemProps) {
 
   return (
     <div className={classnames('channel__list-item', { 'channel__list-item--selected': isSelected })}>
-      <ChannelThumbnail uri={uri} />
+      <ChannelThumbnail uri={uri} hideStakedIndicator />
       <ChannelTitle uri={uri} />
       {isSelected && <Icon icon={ICONS.DOWN} />}
     </div>

ui/component/common/icon-custom.jsx

@@ -1240,6 +1240,12 @@ export const icons = {
       <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
     </g>
   ),
+  [ICONS.LIVESTREAM]: buildIcon(
+    <g>
+      <polygon points="23 7 16 12 23 17 23 7" />
+      <rect x="1" y="5" width="15" height="14" rx="2" ry="2" />
+    </g>
+  ),
   [ICONS.CHANNEL_LEVEL_1]: (props: CustomProps) => (
     <svg
       {...props}

ui/component/livestreamComments/view.jsx

@@ -102,7 +102,8 @@ export default function LivestreamFeed(props: Props) {
                       <Button
                         target="_blank"
                         className={classnames('livestream__comment-author', {
-                          'livestream__comment-author--streamer': claim.signing_channel.claim_id === comment.channel_id,
+                          'livestream__comment-author--streamer':
+                            claim.signing_channel && claim.signing_channel.claim_id === comment.channel_id,
                         })}
                         navigate={comment.channel_url}
                         label={comment.channel_name}

ui/component/publishFile/view.jsx

@@ -328,6 +328,7 @@ function PublishFile(props: Props) {
 
   const isPublishFile = mode === PUBLISH_MODES.FILE;
   const isPublishPost = mode === PUBLISH_MODES.POST;
+  const isPublishLivestream = mode === PUBLISH_MODES.LIVESTREAM;
 
   return (
     <Card
@@ -356,7 +357,7 @@ function PublishFile(props: Props) {
             value={title}
             onChange={handleTitleChange}
           />
-          {isPublishFile && (
+          {(isPublishFile || isPublishLivestream) && (
             <FileSelector
               label={__('File')}
               disabled={disabled}
@@ -364,6 +365,14 @@ function PublishFile(props: Props) {
               onFileChosen={handleFileChange}
             />
           )}
+
+          {isPublishLivestream && (
+            <div className="help--warning">
+              While livestreaming is in beta, you still need to choose a file to upload. Please choose a small file. No
+              one will see this file.
+            </div>
+          )}
+
           {isPublishPost && (
             <PostEditor
               label={__('Post --[noun, markdown post tab button]--')}

ui/component/publishForm/view.jsx

@@ -36,6 +36,7 @@ const MODES = Object.values(PUBLISH_MODES);
 const MODE_TO_I18N_STR = {
   [PUBLISH_MODES.FILE]: 'File',
   [PUBLISH_MODES.POST]: 'Post --[noun, markdown post tab button]--',
+  [PUBLISH_MODES.LIVESTREAM]: 'Livestream --[noun, livestream tab button]--',
 };
 
 type Props = {
@@ -72,14 +73,14 @@ type Props = {
   balance: number,
   isStillEditing: boolean,
   clearPublish: () => void,
-  resolveUri: string => void,
+  resolveUri: (string) => void,
   scrollToTop: () => void,
   prepareEdit: (claim: any, uri: string) => void,
   resetThumbnailStatus: () => void,
   amountNeededForTakeover: ?number,
   // Add back type
-  updatePublishForm: any => void,
+  updatePublishForm: (any) => void,
-  checkAvailability: string => void,
+  checkAvailability: (string) => void,
   ytSignupPending: boolean,
   modal: { id: string, modalProps: {} },
   enablePublishPreview: boolean,
@@ -127,7 +128,7 @@ function PublishForm(props: Props) {
   } = props;
 
   const TAGS_LIMIT = 5;
-  const fileFormDisabled = mode === PUBLISH_MODES.FILE && !filePath;
+  const fileFormDisabled = (mode === PUBLISH_MODES.FILE || mode === PUBLISH_MODES.LIVESTREAM) && !filePath;
   const emptyPostError = mode === PUBLISH_MODES.POST && (!fileText || fileText.trim() === '');
   const formDisabled = (fileFormDisabled && !editingURI) || emptyPostError || publishing;
   const isInProgress = filePath || editingURI || name || title;
@@ -225,12 +226,20 @@ function PublishForm(props: Props) {
   }, [name, activeChannelName, resolveUri, updatePublishForm, checkAvailability]);
 
   useEffect(() => {
-    updatePublishForm({ isMarkdownPost: mode === PUBLISH_MODES.POST });
+    updatePublishForm({
+      isMarkdownPost: mode === PUBLISH_MODES.POST,
+      isLivestreamPublish: mode === PUBLISH_MODES.LIVESTREAM,
+    });
   }, [mode, updatePublishForm]);
 
   useEffect(() => {
     if (incognito) {
       updatePublishForm({ channel: undefined });
+
+      // Anonymous livestreams aren't supported
+      if (mode === PUBLISH_MODES.LIVESTREAM) {
+        setMode(PUBLISH_MODES.FILE);
+      }
     } else if (activeChannelName) {
       updatePublishForm({ channel: activeChannelName });
     }
@@ -301,7 +310,7 @@ function PublishForm(props: Props) {
       }
     }
     // Publish file
-    if (mode === PUBLISH_MODES.FILE) {
+    if (mode === PUBLISH_MODES.FILE || mode === PUBLISH_MODES.LIVESTREAM) {
       runPublish = true;
     }
 
@@ -373,17 +382,17 @@ function PublishForm(props: Props) {
               "Add tags that are relevant to your content so those who're looking for it can find it more easily. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated."
             )}
             placeholder={__('gaming, crypto')}
-            onSelect={newTags => {
+            onSelect={(newTags) => {
               const validatedTags = [];
-              newTags.forEach(newTag => {
+              newTags.forEach((newTag) => {
-                if (!tags.some(tag => tag.name === newTag.name)) {
+                if (!tags.some((tag) => tag.name === newTag.name)) {
                   validatedTags.push(newTag);
                 }
               });
               updatePublishForm({ tags: [...tags, ...validatedTags] });
             }}
-            onRemove={clickedTag => {
+            onRemove={(clickedTag) => {
-              const newTags = tags.slice().filter(tag => tag.name !== clickedTag.name);
+              const newTags = tags.slice().filter((tag) => tag.name !== clickedTag.name);
               updatePublishForm({ tags: newTags });
             }}
             tagsChosen={tags}

ui/constants/icons.js

@@ -97,6 +97,7 @@ export const MORE_VERTICAL = 'MoreVertical';
 export const IMAGE = 'Image';
 export const AUDIO = 'HeadPhones';
 export const VIDEO = 'Video';
+export const LIVESTREAM = 'Livestream';
 export const VOLUME_MUTED = 'VolumeX';
 export const TEXT = 'FileText';
 export const DOWNLOADABLE = 'Downloadable';

ui/constants/publish_types.js

@@ -1,2 +1,3 @@
 export const FILE = 'File';
 export const POST = 'Post';
+export const LIVESTREAM = 'Livestream';

ui/scss/component/_channel.scss

@@ -263,12 +263,15 @@ $metadata-z-index: 1;
 .menu__list.channel__list {
   margin-top: var(--spacing-xs);
   margin-left: 0;
+  padding: 0;
   border-radius: var(--border-radius);
   background: transparent;
   max-height: 15rem;
   overflow-y: scroll;
 
   [role='menuitem'] {
+    margin: 0;
+
     &[data-selected] {
       background: transparent;
       .channel__list-item {