LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

add new 'livestream' publish mode

Browse source
This commit is contained in:
Sean Yesmunt 2021-03-11 11:26:11 -05:00 committed by DispatchCommit
parent 40035ae4ad
commit da3e3c8404
8 changed files with 44 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/channelSelector/view.jsx
View file

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

6
ui/component/common/icon-custom.jsx
View file

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

3
ui/component/livestreamComments/view.jsx
View file

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

11
ui/component/publishFile/view.jsx
View file

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

31
ui/component/publishForm/view.jsx
View file

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

1
ui/constants/icons.js
View file

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

1
ui/constants/publish_types.js
View file

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

3
ui/scss/component/_channel.scss
View file

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