From da3e3c8404aeafda5acc2ca34284f877b8f467cf Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Thu, 11 Mar 2021 11:26:11 -0500 Subject: [PATCH] add new 'livestream' publish mode --- ui/component/channelSelector/view.jsx | 2 +- ui/component/common/icon-custom.jsx | 6 +++++ ui/component/livestreamComments/view.jsx | 3 ++- ui/component/publishFile/view.jsx | 11 ++++++++- ui/component/publishForm/view.jsx | 31 +++++++++++++++--------- ui/constants/icons.js | 1 + ui/constants/publish_types.js | 1 + ui/scss/component/_channel.scss | 3 +++ 8 files changed, 44 insertions(+), 14 deletions(-) diff --git a/ui/component/channelSelector/view.jsx b/ui/component/channelSelector/view.jsx index 9ceec76ee..9fd5558d8 100644 --- a/ui/component/channelSelector/view.jsx +++ b/ui/component/channelSelector/view.jsx @@ -30,7 +30,7 @@ function ChannelListItem(props: ListItemProps) { return (
- + {isSelected && }
diff --git a/ui/component/common/icon-custom.jsx b/ui/component/common/icon-custom.jsx index e1bdbf678..e754a71d2 100644 --- a/ui/component/common/icon-custom.jsx +++ b/ui/component/common/icon-custom.jsx @@ -1240,6 +1240,12 @@ export const icons = { ), + [ICONS.LIVESTREAM]: buildIcon( + + + + + ), [ICONS.CHANNEL_LEVEL_1]: (props: CustomProps) => ( - {isPublishFile && ( + {(isPublishFile || isPublishLivestream) && ( )} + + {isPublishLivestream && ( +
+ 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. +
+ )} + {isPublishPost && ( 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, - checkAvailability: string => void, + updatePublishForm: (any) => 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 => { - if (!tags.some(tag => tag.name === newTag.name)) { + 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); + onRemove={(clickedTag) => { + const newTags = tags.slice().filter((tag) => tag.name !== clickedTag.name); updatePublishForm({ tags: newTags }); }} tagsChosen={tags} diff --git a/ui/constants/icons.js b/ui/constants/icons.js index 2ba6c2524..6b43cb5c0 100644 --- a/ui/constants/icons.js +++ b/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'; diff --git a/ui/constants/publish_types.js b/ui/constants/publish_types.js index c438709a8..397bd6046 100644 --- a/ui/constants/publish_types.js +++ b/ui/constants/publish_types.js @@ -1,2 +1,3 @@ export const FILE = 'File'; export const POST = 'Post'; +export const LIVESTREAM = 'Livestream'; diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index e76e3e104..e9f0eb223 100644 --- a/ui/scss/component/_channel.scss +++ b/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 {