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

Merge pull request #4445 from lbryio/feat-newChannelCreate

Browse source 
new channel creating and editing
This commit is contained in:
jessopb 2020-07-03 11:09:25 -04:00 committed by GitHub
commit 70c6034662
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 1112 additions and 675 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -70,7 +70,7 @@
"@datapunt/matomo-tracker-js": "^0.1.4",
"@exponent/electron-cookies": "^2.0.0",
"@hot-loader/react-dom": "^16.8",
"@lbry/components": "^4.2.2",
"@lbry/components": "^4.2.5",
"@reach/menu-button": "0.7.4",
"@reach/rect": "^0.2.1",
"@reach/tabs": "^0.1.5",
@ -135,7 +135,7 @@
"imagesloaded": "^4.1.4",
"json-loader": "^0.5.4",
"lbry-format": "https://github.com/lbryio/lbry-format.git",
"lbry-redux": "lbryio/lbry-redux#eb47b7e5b6cc24db93b2b66cf1153b02858caf58",
"lbry-redux": "lbryio/lbry-redux#906199d866a187015668a27363f010828c15979a",
"lbryinc": "lbryio/lbryinc#72eee35f5181940eb4a468a27ddb2a2a4e362fb0",
"lint-staged": "^7.0.2",
"localforage": "^1.7.1",

31
static/app-strings.json
View file

@ -1260,5 +1260,34 @@
"Opt out of any topics you don't want to receive email about.": "Opt out of any topics you don't want to receive email about.",
"Uncheck your email below if you want to stop receiving messages.": "Uncheck your email below if you want to stop receiving messages.",
"Remove from Blocked List": "Remove from Blocked List",
"Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?"
"Are you sure you want to remove this from the list?": "Are you sure you want to remove this from the list?",
"Cover": "Cover",
"Url": "Url",
"New Channel Advanced": "New Channel Advanced",
"WTF": "WTF",
"required": "required",
"A name is required for your url": "A name is required for your url",
"Edit Channel": "Edit Channel",
"Create Channel": "Create Channel",
"This shoul de such a size": "This shoul de such a size",
"Thumbnail This shoul de such a size": "Thumbnail This shoul de such a size",
"Cover This shoul de such a size": "Cover This shoul de such a size",
"CableTube Escape Artists": "CableTube Escape Artists",
"General": "General",
"MyAwesomeChannel": "MyAwesomeChannel",
"My Awesome Channel": "My Awesome Channel",
"Increasing your deposit can help your channel be discovered more easily.": "Increasing your deposit can help your channel be discovered more easily.",
"Editing @%channel%": "Editing @%channel%",
"This field cannot be changed.": "This field cannot be changed.",
"Delete Channel": "Delete Channel",
"Edit Thumbnail Image": "Edit Thumbnail Image",
"(Y x Z)": "(Y x Z)",
"Choose Image": "Choose Image",
"File to upload": "File to upload",
"Use a URL instead": "Use a URL instead",
"Edit Cover Image": "Edit Cover Image",
"Cover Image": "Cover Image",
"You Followed Your First Channel!": "You Followed Your First Channel!",
"Awesome! You just followed your first first channel.": "Awesome! You just followed your first first channel.",
"After submitting, it will take a few minutes for your changes to be live for everyone.": "After submitting, it will take a few minutes for your changes to be live for everyone."
}

10
ui/component/channelAbout/view.jsx
View file

@ -31,11 +31,13 @@ function ChannelAbout(props: Props) {
<div className="card">
<section className="section card--section">
<Fragment>
<label>{__('Description')}</label>
{description && (
<div className="media__info-text media__info-text--constrained">
<MarkdownPreview content={description} />
</div>
<>
<label>{__('Description')}</label>
<div className="media__info-text media__info-text--constrained">
<MarkdownPreview content={description} />
</div>
</>
)}
{email && (
<Fragment>

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

@ -28,7 +28,7 @@ class ChannelCreate extends React.PureComponent<Props, State> {
this.state = {
newChannelName: '',
newChannelBid: 0.01,
newChannelBid: 0.001,
newChannelNameError: '',
newChannelBidError: '',
};

20
ui/component/channelEdit/index.js
View file

@ -3,21 +3,27 @@ import {
makeSelectTitleForUri,
makeSelectThumbnailForUri,
makeSelectCoverForUri,
selectCurrentChannelPage,
makeSelectMetadataItemForUri,
doUpdateChannel,
doCreateChannel,
makeSelectAmountForUri,
makeSelectClaimForUri,
selectUpdateChannelError,
selectUpdatingChannel,
selectCreateChannelError,
selectCreatingChannel,
selectBalance,
doClearChannelErrors,
} from 'lbry-redux';
import { doOpenModal } from 'redux/actions/app';
import ChannelPage from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
title: makeSelectTitleForUri(props.uri)(state),
thumbnailUrl: makeSelectThumbnailForUri(props.uri)(state),
coverUrl: makeSelectCoverForUri(props.uri)(state),
page: selectCurrentChannelPage(state),
description: makeSelectMetadataItemForUri(props.uri, 'description')(state),
website: makeSelectMetadataItemForUri(props.uri, 'website_url')(state),
email: makeSelectMetadataItemForUri(props.uri, 'email')(state),
@ -25,13 +31,21 @@ const select = (state, props) => ({
locations: makeSelectMetadataItemForUri(props.uri, 'locations')(state),
languages: makeSelectMetadataItemForUri(props.uri, 'languages')(state),
amount: makeSelectAmountForUri(props.uri)(state),
claim: makeSelectClaimForUri(props.uri)(state),
updateError: selectUpdateChannelError(state),
updatingChannel: selectUpdatingChannel(state),
createError: selectCreateChannelError(state),
creatingChannel: selectCreatingChannel(state),
balance: selectBalance(state),
});
const perform = dispatch => ({
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
updateChannel: params => dispatch(doUpdateChannel(params)),
createChannel: params => {
const { name, amount, ...optionalParams } = params;
return dispatch(doCreateChannel('@' + name, amount, optionalParams));
},
clearChannelErrors: () => dispatch(doClearChannelErrors()),
});
export default connect(select, perform)(ChannelPage);

500
ui/component/channelEdit/view.jsx
View file

@ -1,19 +1,29 @@
// @flow
import React, { useState } from 'react';
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React from 'react';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import SelectAsset from 'component/selectAsset';
import { MINIMUM_PUBLISH_BID } from 'constants/claim';
import TagsSearch from 'component/tagsSearch';
import { FF_MAX_CHARS_IN_DESCRIPTION } from 'constants/form-field';
import ErrorText from 'component/common/error-text';
import ChannelThumbnail from 'component/channelThumbnail';
import { isNameValid, parseURI } from 'lbry-redux';
import ClaimAbandonButton from 'component/claimAbandonButton';
import { useHistory } from 'react-router-dom';
import { MINIMUM_PUBLISH_BID, INVALID_NAME_ERROR, ESTIMATED_FEE } from 'constants/claim';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import Card from 'component/common/card';
import * as PAGES from 'constants/pages';
import analytics from 'analytics';
const MAX_TAG_SELECT = 5;
type Props = {
claim: ChannelClaim,
title: ?string,
amount: string,
coverUrl: ?string,
thumbnailUrl: ?string,
title: string,
amount: number,
coverUrl: string,
thumbnailUrl: string,
location: { search: string },
description: string,
website: string,
@ -23,205 +33,365 @@ type Props = {
locations: Array<string>,
languages: Array<string>,
updateChannel: any => Promise<any>,
updateThumb: string => void,
updateCover: string => void,
doneEditing: () => void,
updateError: string,
updatingChannel: boolean,
updateError: string,
createChannel: any => Promise<any>,
createError: string,
creatingChannel: boolean,
clearChannelErrors: () => void,
onDone: () => void,
openModal: (
id: string,
{ onUpdate: string => void, assetName: string, helpText: string, currentValue: string, title: string }
) => void,
uri: string,
};
function ChannelForm(props: Props) {
const {
uri,
claim,
amount,
title,
coverUrl,
description,
website,
email,
thumbnailUrl,
coverUrl,
tags,
locations,
languages,
amount,
doneEditing,
onDone,
updateChannel,
updateThumb,
updateCover,
updateError,
updatingChannel,
createChannel,
creatingChannel,
createError,
clearChannelErrors,
openModal,
} = props;
const { claim_id: claimId } = claim;
const [nameError, setNameError] = React.useState(undefined);
const [bidError, setBidError] = React.useState('');
const { claim_id: claimId } = claim || {};
const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
const { channelName } = parseURI(uri);
const name = params.name;
const isNewChannel = !uri;
const { replace } = useHistory();
// fill this in with sdk data
const channelParams = {
website,
email,
coverUrl,
thumbnailUrl,
description,
title,
amount,
claim_id: claimId,
languages: languages || [],
locations: locations || [],
tags: tags
? tags.map(tag => {
return { name: tag };
})
: [],
};
function getChannelParams() {
// fill this in with sdk data
const channelParams: {
website: string,
email: string,
coverUrl: string,
thumbnailUrl: string,
description: string,
title: string,
amount: number,
languages: ?Array<string>,
locations: ?Array<string>,
tags: ?Array<{ name: string }>,
claim_id?: string,
} = {
website,
email,
coverUrl,
thumbnailUrl,
description,
title,
amount: amount || 0.001,
languages: languages || [],
locations: locations || [],
tags: tags
? tags.map(tag => {
return { name: tag };
})
: [],
};
const [params, setParams] = useState(channelParams);
const [bidError, setBidError] = useState('');
if (claimId) {
channelParams['claim_id'] = claimId;
}
// If a user changes tabs, update the url so it stays on the same page if they refresh.
// We don't want to use links here because we can't animate the tab change and using links
// would alter the Tab label's role attribute, which should stay role="tab" to work with keyboards/screen readers.
return channelParams;
}
const handleBidChange = (bid: number) => {
function handleBidChange(bid: number) {
const { balance, amount } = props;
const totalAvailableBidAmount = parseFloat(amount) + parseFloat(balance);
const totalAvailableBidAmount = (parseFloat(amount) || 0.0) + (parseFloat(balance) || 0.0);
setParams({ ...params, amount: bid });
setBidError('');
if (bid <= 0.0 || isNaN(bid)) {
setBidError(__('Deposit cannot be 0'));
} else if (totalAvailableBidAmount === bid) {
setBidError(__('Please decrease your deposit to account for transaction fees'));
} else if (totalAvailableBidAmount < bid) {
setBidError(__('Deposit cannot be higher than your balance'));
} else if (totalAvailableBidAmount - bid < ESTIMATED_FEE) {
setBidError(__('Please decrease your deposit to account for transaction fees'));
} else if (bid < MINIMUM_PUBLISH_BID) {
setBidError(__('Your deposit must be higher'));
} else {
setBidError('');
}
};
}
const handleThumbnailChange = (thumbnailUrl: string) => {
function handleThumbnailChange(thumbnailUrl: string) {
setParams({ ...params, thumbnailUrl });
updateThumb(thumbnailUrl);
};
}
const handleCoverChange = (coverUrl: string) => {
function handleCoverChange(coverUrl: string) {
setParams({ ...params, coverUrl });
updateCover(coverUrl);
};
}
const handleSubmit = () => {
updateChannel(params).then(success => {
if (success) {
doneEditing();
}
});
};
function handleSubmit() {
if (uri) {
updateChannel(params).then(success => {
if (success) {
onDone();
}
});
} else {
createChannel(params).then(success => {
if (success) {
analytics.apiLogPublish(success);
onDone();
}
});
}
}
React.useEffect(() => {
let nameError;
if (!name && name !== undefined) {
nameError = __('A name is required for your url');
} else if (!isNameValid(name, false)) {
nameError = INVALID_NAME_ERROR;
}
setNameError(nameError);
}, [name]);
React.useEffect(() => {
clearChannelErrors();
}, [clearChannelErrors]);
// TODO clear and bail after submit
return (
<div className="card">
<section className={'section card--section'}>
<SelectAsset
onUpdate={v => handleThumbnailChange(v)}
currentValue={params.thumbnailUrl}
assetName={'Thumbnail'}
recommended={__('Recommended ratio is 1:1')}
/>
<SelectAsset
onUpdate={v => handleCoverChange(v)}
currentValue={params.coverUrl}
assetName={'Cover'}
recommended={__('Recommended ratio is 6.25:1')}
/>
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('Titular Title')}
disabled={false}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
label={__('Deposit (LBC)')}
postfix="LBC"
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
/>
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
<FormField
type="text"
name="content_email2"
label={__('Email')}
placeholder={__('yourstruly@example.com')}
disabled={false}
value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })}
/>
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
disabled={false}
onChange={text => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/>
<TagsSearch
suggestMature
disableAutoFocus
tagsPassedIn={params.tags || []}
label={__('Tags Selected')}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
onSelect={newTags => {
newTags.forEach(newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] });
} else {
// If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
<>
<div className="main--contained">
<header className="channel-cover">
<div className="channel__quick-actions">
<Button
button="alt"
title={__('Cover')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: coverUrl => handleCoverChange(coverUrl),
title: __('Edit Cover Image'),
helpText: __('(6.25:1)'),
assetName: __('Cover Image'),
currentValue: params.coverUrl,
})
}
});
}}
icon={ICONS.CAMERA}
iconSize={18}
/>
</div>
{params.coverUrl && <img className="channel-cover__custom" src={params.coverUrl} />}
<div className="channel__primary-info">
<div className="channel__edit-thumb">
<Button
button="alt"
title={__('Edit')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: v => handleThumbnailChange(v),
title: __('Edit Thumbnail Image'),
helpText: __('(1:1)'),
assetName: __('Thumbnail'),
currentValue: params.thumbnailUrl,
})
}
icon={ICONS.CAMERA}
iconSize={18}
/>
</div>
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
thumbnailPreview={params.thumbnailUrl}
allowGifs
/>
<h1 className="channel__title">
{params.title || (channelName && '@' + channelName) || (params.name && '@' + params.name)}
</h1>
</div>
<div className="channel-cover__gradient" />
</header>
<Tabs>
<TabList className="tabs__list--channel-page">
<Tab>{__('General')}</Tab>
<Tab>{__('LBC Details')}</Tab>
<Tab>{__('Tags')}</Tab>
<Tab>{__('Other')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Card
body={
<>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label htmlFor="channel_name">{__('Name')}</label>
<div className="form-field__prefix">@</div>
</fieldset-section>
<FormField
autoFocus={isNewChannel}
type="text"
name="channel_name"
placeholder={__('MyAwesomeChannel')}
value={params.name || channelName}
error={nameError}
disabled={!isNewChannel}
onChange={e => setParams({ ...params, name: e.target.value })}
/>
</fieldset-group>
{!isNewChannel && <span className="form-field__help">{__('This field cannot be changed.')}</span>}
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('My Awesome Channel')}
value={params.title}
onChange={e => setParams({ ...params, title: e.target.value })}
/>
<FormField
type="markdown"
name="content_description2"
label={__('Description')}
placeholder={__('Description of your content')}
value={params.description}
onChange={text => setParams({ ...params, description: text })}
textAreaMaxLength={FF_MAX_CHARS_IN_DESCRIPTION}
/>
</>
}
/>
</TabPanel>
<TabPanel>
<Card
body={
<FormField
className="form-field--price-amount"
type="number"
name="content_bid2"
step="any"
label={__('Deposit (LBC)')}
postfix="LBC"
value={params.amount}
error={bidError}
min="0.0"
disabled={false}
onChange={event => handleBidChange(parseFloat(event.target.value))}
placeholder={0.1}
helper={__('Increasing your deposit can help your channel be discovered more easily.')}
/>
}
/>
</TabPanel>
<TabPanel>
<Card
body={
<TagsSearch
suggestMature
disableAutoFocus
limitSelect={MAX_TAG_SELECT}
tagsPassedIn={params.tags || []}
label={__('Selected Tags')}
onRemove={clickedTag => {
const newTags = params.tags.slice().filter(tag => tag.name !== clickedTag.name);
setParams({ ...params, tags: newTags });
}}
onSelect={newTags => {
newTags.forEach(newTag => {
if (!params.tags.map(savedTag => savedTag.name).includes(newTag.name)) {
setParams({ ...params, tags: [...params.tags, newTag] });
} else {
// If it already exists and the user types it in, remove it
setParams({ ...params, tags: params.tags.filter(tag => tag.name !== newTag.name) });
}
});
}}
/>
}
/>
</TabPanel>
<TabPanel>
<Card
body={
<>
<FormField
type="text"
name="channel_website2"
label={__('Website')}
placeholder={__('aprettygoodsite.com')}
disabled={false}
value={params.website}
onChange={e => setParams({ ...params, website: e.target.value })}
/>
<FormField
type="text"
name="content_email2"
label={__('Email')}
placeholder={__('yourstruly@example.com')}
disabled={false}
value={params.email}
onChange={e => setParams({ ...params, email: e.target.value })}
/>
</>
}
/>
</TabPanel>
</TabPanels>
</Tabs>
<Card
className="card--after-tabs"
actions={
<>
<div className="section__actions">
<Button
button="primary"
disabled={
creatingChannel || updatingChannel || nameError || bidError || (isNewChannel && !params.name)
}
label={creatingChannel || updatingChannel ? __('Submitting') : __('Submit')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={onDone} />
</div>
{updateError || createError ? (
<ErrorText>{updateError || createError}</ErrorText>
) : (
<p className="help">
{__('After submitting, it will take a few minutes for your changes to be live for everyone.')}
</p>
)}
{!isNewChannel && (
<div className="section__actions">
<ClaimAbandonButton uri={uri} abandonActionCallback={() => replace(`/$/${PAGES.CHANNELS}`)} />
</div>
)}
</>
}
/>
<div className={'section__actions'}>
<Button
button="primary"
label={updatingChannel ? __('Submitting...') : __('Submit')}
onClick={handleSubmit}
/>
<Button button="link" label={__('Cancel')} onClick={doneEditing} />
</div>
{updateError && updateError.length ? (
<ErrorText>{updateError}</ErrorText>
) : (
<p className="help">
{__('After submitting, you will not see the changes immediately. Please check back in a few minutes.')}
</p>
)}
</section>
</div>
</div>
</>
);
}

16
ui/component/channelThumbnail/view.jsx
View file

@ -1,5 +1,5 @@
// @flow
import React, { useState } from 'react';
import React from 'react';
import { parseURI } from 'lbry-redux';
import classnames from 'classnames';
import Gerbil from './gerbil.png';
@ -25,20 +25,13 @@ function ChannelThumbnail(props: Props) {
small = false,
allowGifs = false,
} = props;
const [thumbError, setThumbError] = React.useState(false);
const thumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://');
const thumbnailPreview = rawThumbnailPreview && rawThumbnailPreview.trim().replace(/^http:\/\//i, 'https://');
const channelThumbnail = thumbnail || thumbnailPreview;
const [thumbError, setThumbError] = useState(false);
if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
}
const showThumb = (!obscure && !!thumbnail) || thumbnailPreview;
// Generate a random color class based on the first letter of the channel name
const { channelName } = parseURI(uri);
let initializer;
let colorClassName;
if (channelName) {
@ -47,6 +40,11 @@ function ChannelThumbnail(props: Props) {
} else {
colorClassName = `channel-thumbnail__default--4`;
}
if (channelThumbnail && channelThumbnail.endsWith('gif') && !allowGifs) {
return <FreezeframeWrapper src={channelThumbnail} className="channel-thumbnail" />;
}
return (
<div
className={classnames('channel-thumbnail', className, {

13
ui/component/claimAbandonButton/view.jsx
View file

@ -12,11 +12,20 @@ type Props = {
};
export default function ClaimAbandonButton(props: Props) {
const { doOpenModal, claim, abandonActionCallback, iconSize } = props;
const { doOpenModal, claim, abandonActionCallback } = props;
function abandonClaim() {
doOpenModal(MODALS.CONFIRM_CLAIM_REVOKE, { claim: claim, cb: abandonActionCallback });
}
return <Button disabled={!claim} button="alt" iconSize={iconSize} icon={ICONS.DELETE} onClick={abandonClaim} />;
return (
<Button
disabled={!claim}
label={__('Delete Channel')}
button="alt"
iconColor="red"
icon={ICONS.DELETE}
onClick={abandonClaim}
/>
);
}

26
ui/component/common/file-selector.jsx
View file

@ -15,9 +15,14 @@ type Props = {
accept?: string,
error?: string,
disabled?: boolean,
autoFocus?: boolean,
};
class FileSelector extends React.PureComponent<Props> {
static defaultProps = {
autoFocus: false,
};
componentDidUpdate(prevProps: Props) {
// If the form has just been cleared,
// clear the file input
@ -58,7 +63,18 @@ class FileSelector extends React.PureComponent<Props> {
input: ?HTMLInputElement;
render() {
const { type, currentPath, label, fileLabel, directoryLabel, placeholder, accept, error, disabled } = this.props;
const {
type,
currentPath,
label,
fileLabel,
directoryLabel,
placeholder,
accept,
error,
disabled,
autoFocus = false,
} = this.props;
const buttonLabel = type === 'file' ? fileLabel || __('Choose File') : directoryLabel || __('Choose Directory');
const placeHolder = currentPath || placeholder;
@ -74,7 +90,13 @@ class FileSelector extends React.PureComponent<Props> {
readOnly="readonly"
value={placeHolder || __('Choose a file')}
inputButton={
<Button button="secondary" disabled={disabled} onClick={this.fileInputButton} label={buttonLabel} />
<Button
autoFocus={autoFocus}
button="secondary"
disabled={disabled}
onClick={this.fileInputButton}
label={buttonLabel}
/>
}
/>
<input

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

@ -662,7 +662,9 @@ export const icons = {
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" />
</g>
),
[ICONS.OPEN_LOG_FOLDER]: buildIcon(<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />),
[ICONS.OPEN_LOG_FOLDER]: buildIcon(
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
),
[ICONS.OPEN_LOG]: buildIcon(
<g>
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
@ -671,4 +673,10 @@ export const icons = {
<line x1="9" y1="15" x2="15" y2="15" />
</g>
),
[ICONS.CAMERA]: buildIcon(
<g>
<path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
<circle cx="12" cy="13" r="4" />
</g>
),
};

406
ui/component/header/view.jsx
View file

@ -13,6 +13,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Tooltip from 'component/common/tooltip';
import NavigationButton from 'component/navigationButton';
import { LOGO_TITLE } from 'config';
import useIsMobile from 'effects/use-is-mobile';
// @if TARGET='app'
import { remote } from 'electron';
import { IS_MAC } from 'component/app/view';
@ -37,6 +38,11 @@ type Props = {
email: ?string,
authenticated: boolean,
authHeader: boolean,
backout: {
backFunction: () => void,
title: string,
simpleTitle: string, // Just use the same value as `title` if `title` is already short (~< 10 chars), unless you have a better idea for title overlfow on mobile
},
syncError: ?string,
emailToVerify?: string,
signOut: () => void,
@ -61,13 +67,13 @@ const Header = (props: Props) => {
signOut,
syncError,
openMobileNavigation,
openChannelCreate,
openSignOutModal,
clearEmailEntry,
clearPasswordEntry,
emailToVerify,
backout,
} = props;
const isMobile = useIsMobile();
// on the verify page don't let anyone escape other than by closing the tab to keep session data consistent
const isVerifyPage = history.location.pathname.includes(PAGES.AUTH_VERIFY);
const isSignUpPage = history.location.pathname.includes(PAGES.AUTH);
@ -135,201 +141,223 @@ const Header = (props: Props) => {
// @endif
>
<div className="header__contents">
<div className="header__navigation">
<Button
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
label={LOGO_TITLE}
icon={ICONS.LBRY}
onClick={() => {
if (history.location.pathname === '/') window.location.reload();
}}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
{...homeButtonNavigationProps}
/>
{/* @if TARGET='app' */}
{!authHeader && (
<div className="header__navigation-arrows">
<NavigationButton isBackward history={history} />
<NavigationButton isBackward={false} history={history} />
</div>
)}
{/* @endif */}
{!authHeader && <WunderBar />}
</div>
{!authHeader ? (
<div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
{(!IS_WEB || authenticated) && (
<Fragment>
<Button
aria-label={__('Your wallet')}
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
<Menu>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publish')}
</MenuItem>
<MenuItem className="menu__link" onSelect={openChannelCreate}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
</MenuList>
</Menu>
<Menu>
<MenuButton
aria-label={__('Your account')}
title={__('Your account')}
className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publishes')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
<Icon aria-hidden icon={ICONS.ANALYTICS} />
{__('Creator Analytics')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.REWARDS} />
{__('Rewards')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
<Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')}
</MenuItem>
{authenticated ? (
<MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
) : (
<React.Fragment>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
<Icon aria-hidden icon={ICONS.SIGN_UP} />
{__('Register')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
<Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')}
</MenuItem>
</React.Fragment>
)}
</MenuList>
</Menu>
</Fragment>
{!authHeader && backout ? (
<div className="card__actions--between">
<Button onClick={backout.backFunction} button="link" label={__('Cancel')} icon={ICONS.ARROW_LEFT} />
{backout.title && (
<h1 className={'card__title'}>{isMobile ? backout.simpleTitle || backout.title : backout.title}</h1>
)}
<Menu>
<MenuButton
aria-label={__('Settings')}
title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon"
<Button
aria-label={__('Your wallet')}
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</div>
) : (
<>
<div className="header__navigation">
<Button
className="header__navigation-item header__navigation-item--lbry header__navigation-item--button-mobile"
label={LOGO_TITLE}
icon={ICONS.LBRY}
onClick={() => {
if (history.location.pathname === '/') window.location.reload();
}}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP} />
{__('Help')}
</MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem>
</MenuList>
</Menu>
{IS_WEB && !authenticated && (
<div className="header__auth-buttons">
<Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Sign In')} />
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Register')} />
</div>
)}
</div>
) : (
!isVerifyPage && (
<div className="header__menu">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Tooltip label={__('Go Back')}>
<Button
button="alt"
// className="button--header-close"
icon={ICONS.REMOVE}
{...closeButtonNavigationProps}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</Tooltip>
{...homeButtonNavigationProps}
/>
{/* @if TARGET='app' */}
{!authHeader && (
<div className="header__navigation-arrows">
<NavigationButton isBackward history={history} />
<NavigationButton isBackward={false} history={history} />
</div>
)}
{/* @endif */}
{!authHeader && <WunderBar />}
</div>
)
{!authHeader ? (
<div className={classnames('header__menu', { 'header__menu--with-balance': !IS_WEB || authenticated })}>
{(!IS_WEB || authenticated) && (
<Fragment>
<Button
aria-label={__('Your wallet')}
navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
<Menu>
<MenuButton
aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISH}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publish')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNEL_NEW}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('New Channel')}
</MenuItem>
</MenuList>
</Menu>
<Menu>
<MenuButton
aria-label={__('Your account')}
title={__('Your account')}
className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.PUBLISHED}`)}>
<Icon aria-hidden icon={ICONS.PUBLISH} />
{__('Publishes')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CHANNELS}`)}>
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Channels')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.CREATOR_DASHBOARD}`)}>
<Icon aria-hidden icon={ICONS.ANALYTICS} />
{__('Creator Analytics')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.REWARDS}`)}>
<Icon aria-hidden icon={ICONS.REWARDS} />
{__('Rewards')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.INVITE}`)}>
<Icon aria-hidden icon={ICONS.INVITE} />
{__('Invites')}
</MenuItem>
{authenticated ? (
<MenuItem onSelect={IS_WEB ? signOut : openSignOutModal}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.SIGN_OUT} />
{__('Sign Out')}
</div>
<span className="menu__link-help">{email}</span>
</MenuItem>
) : (
<React.Fragment>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH}`)}>
<Icon aria-hidden icon={ICONS.SIGN_UP} />
{__('Register')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.AUTH_SIGNIN}`)}>
<Icon aria-hidden icon={ICONS.SIGN_IN} />
{__('Sign In')}
</MenuItem>
</React.Fragment>
)}
</MenuList>
</Menu>
</Fragment>
)}
<Menu>
<MenuButton
aria-label={__('Settings')}
title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton>
<MenuList className="menu__list--header">
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.SETTINGS}`)}>
<Icon aria-hidden tootlip icon={ICONS.SETTINGS} />
{__('Settings')}
</MenuItem>
<MenuItem className="menu__link" onSelect={() => history.push(`/$/${PAGES.HELP}`)}>
<Icon aria-hidden icon={ICONS.HELP} />
{__('Help')}
</MenuItem>
<MenuItem className="menu__link" onSelect={handleThemeToggle}>
<Icon icon={currentTheme === 'light' ? ICONS.DARK : ICONS.LIGHT} />
{currentTheme === 'light' ? __('Dark') : __('Light')}
</MenuItem>
</MenuList>
</Menu>
{IS_WEB && !authenticated && (
<div className="header__auth-buttons">
<Button navigate={`/$/${PAGES.AUTH_SIGNIN}`} button="link" label={__('Sign In')} />
<Button navigate={`/$/${PAGES.AUTH}`} button="primary" label={__('Register')} />
</div>
)}
</div>
) : (
!isVerifyPage && (
<div className="header__menu">
{/* Add an empty span here so we can use the same style as above */}
{/* This pushes the close button to the right side */}
<span />
<Tooltip label={__('Go Back')}>
<Button
button="alt"
// className="button--header-close"
icon={ICONS.REMOVE}
{...closeButtonNavigationProps}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</Tooltip>
</div>
)
)}
<Button
onClick={openMobileNavigation}
icon={ICONS.MENU}
iconSize={24}
className="header__menu--mobile"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</>
)}
<Button
onClick={openMobileNavigation}
icon={ICONS.MENU}
iconSize={24}
className="header__menu--mobile"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</div>
</header>
);

13
ui/component/page/view.jsx
View file

@ -19,14 +19,23 @@ type Props = {
noHeader: boolean,
noFooter: boolean,
noSideNavigation: boolean,
backout: { backFunction: () => void, backTitle: string },
};
function Page(props: Props) {
const { children, className, authPage = false, noHeader = false, noFooter = false, noSideNavigation = false } = props;
const {
children,
className,
authPage = false,
noHeader = false,
noFooter = false,
noSideNavigation = false,
backout,
} = props;
return (
<Fragment>
{!noHeader && <Header authHeader={authPage} />}
{!noHeader && <Header authHeader={authPage} backout={backout} />}
<div className={classnames('main-wrapper__inner')}>
<main className={classnames(MAIN_CLASS, className, { 'main--full-width': authPage })}>{children}</main>
{!authPage && !noSideNavigation && <SideNavigation />}

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

@ -40,6 +40,7 @@ import Welcome from 'page/welcome';
import CreatorDashboard from 'page/creatorDashboard';
import RewardsVerifyPage from 'page/rewardsVerify';
import CheckoutPage from 'page/checkoutPage';
import ChannelNew from 'page/channelNew';
import BuyPage from 'page/buy';
import { parseURI } from 'lbry-redux';
@ -188,6 +189,7 @@ function AppRouter(props: Props) {
<Route path={`/$/${PAGES.CHECKOUT}`} exact component={CheckoutPage} />
<PrivateRoute {...props} path={`/$/${PAGES.INVITE}`} component={InvitePage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNEL_NEW}`} component={ChannelNew} />
<PrivateRoute {...props} path={`/$/${PAGES.PUBLISHED}`} component={FileListPublished} />
<PrivateRoute {...props} path={`/$/${PAGES.CREATOR_DASHBOARD}`} component={CreatorDashboard} />
<PrivateRoute {...props} path={`/$/${PAGES.PUBLISH}`} component={PublishPage} />

170
ui/component/selectAsset/view.jsx
View file

@ -1,128 +1,126 @@
// @flow
import React, { useState } from 'react';
import { FormField } from 'component/common/form';
import React from 'react';
import FileSelector from 'component/common/file-selector';
import Button from 'component/button';
import { SPEECH_URLS } from 'lbry-redux';
import uuid from 'uuid/v4';
import { FormField, Form } from 'component/common/form';
import Button from 'component/button';
import Card from 'component/common/card';
import { generateThumbnailName } from 'util/generate-thumbnail-name';
import usePersistedState from 'effects/use-persisted-state';
const accept = '.png, .jpg, .jpeg, .gif';
const SOURCE_URL = 'url';
const SOURCE_UPLOAD = 'upload';
const SPEECH_READY = 'READY';
const SPEECH_UPLOADING = 'UPLOADING';
type Props = {
assetName: string,
currentValue: ?string,
onUpdate: string => void,
recommended: string,
title: string,
onDone?: () => void,
};
function SelectAsset(props: Props) {
const { onUpdate, assetName, currentValue, recommended } = props;
const [assetSource, setAssetSource] = useState(SOURCE_URL);
const [pathSelected, setPathSelected] = useState('');
const [fileSelected, setFileSelected] = useState<any>(null);
const [uploadStatus, setUploadStatus] = useState(SPEECH_READY);
const [error, setError] = useState();
const { onUpdate, onDone, assetName, recommended, title } = props;
const [pathSelected, setPathSelected] = React.useState('');
const [fileSelected, setFileSelected] = React.useState<any>(null);
const [uploadStatus, setUploadStatus] = React.useState(SPEECH_READY);
const [useUrl, setUseUrl] = usePersistedState('thumbnail-upload:mode', false);
const [url, setUrl] = React.useState('');
const [error, setError] = React.useState();
function doUploadAsset(file) {
React.useEffect(() => {
if (pathSelected && fileSelected) {
doUploadAsset();
}
}, [pathSelected, fileSelected]);
function doUploadAsset() {
const uploadError = (error = '') => {
setError(error);
};
const setUrl = path => {
const onSuccess = thumbnailUrl => {
setUploadStatus(SPEECH_READY);
onUpdate(path);
setAssetSource(SOURCE_URL);
onUpdate(thumbnailUrl);
if (onDone) {
onDone();
}
};
setUploadStatus(SPEECH_UPLOADING);
const data = new FormData();
const name = uuid();
const name = generateThumbnailName();
data.append('name', name);
data.append('file', file);
data.append('file', fileSelected);
return fetch(SPEECH_URLS.SPEECH_PUBLISH, {
method: 'POST',
body: data,
})
.then(response => response.json())
.then(json => (json.success ? setUrl(`${json.data.serveUrl}`) : uploadError(json.message)))
.catch(err => uploadError(err.message));
.then(json => (json.success ? onSuccess(`${json.data.serveUrl}`) : uploadError(json.message)))
.catch(err => {
uploadError(err.message);
});
}
return (
<fieldset-section>
<fieldset-group className="fieldset-group--smushed">
<FormField
type="select"
name={assetName}
value={assetSource}
onChange={e => setAssetSource(e.target.value)}
label={__(assetName + ' source')}
>
<option key={'lmmnop'} value={'url'}>
URL
</option>
<option key={'lmmnopq'} value={'upload'}>
UPLOAD
</option>
</FormField>
{assetSource === SOURCE_UPLOAD && (
<div>
{error && <div className="error__text">{error}</div>}
{!pathSelected && (
<FileSelector
label={'File to upload'}
name={'assetSelector'}
onFileChosen={file => {
if (file.name) {
setPathSelected(file.path || file.name);
setFileSelected(file);
}
}}
accept={accept}
/>
)}
{pathSelected && (
<div>
{`...${pathSelected.slice(-18)}`} {uploadStatus}{' '}
<Button button={'primary'} onClick={() => doUploadAsset(fileSelected)}>
Upload
</Button>{' '}
<Button
button={'secondary'}
onClick={() => {
setPathSelected('');
setFileSelected(null);
setError(null);
}}
>
Clear
</Button>
</div>
<Card
title={title || __('Choose Image')}
actions={
<Form onSubmit={onDone}>
{error && <div className="error__text">{error}</div>}
{useUrl ? (
<FormField
autoFocus
type={'text'}
name={'thumbnail'}
label={`${assetName} ${recommended}`}
placeholder={'https://example.com/image.png'}
value={url}
onChange={e => {
setUrl(e.target.value);
onUpdate(e.target.value);
}}
/>
) : (
<FileSelector
autoFocus
disabled={uploadStatus === SPEECH_UPLOADING}
label={uploadStatus === SPEECH_UPLOADING ? __('Uploading...') : __('File to upload')}
name="assetSelector"
currentPath={pathSelected}
onFileChosen={file => {
if (file.name) {
setFileSelected(file);
// file.path is undefined in web but available in electron
setPathSelected(file.name || file.path);
}
}}
accept={accept}
/>
)}
<div className="section__actions">
{onDone && (
<Button button="primary" type="submit" label={__('Done')} disabled={uploadStatus === SPEECH_UPLOADING} />
)}
<FormField
name="toggle-upload"
type="checkbox"
label={__('Use a URL')}
checked={useUrl}
onChange={() => setUseUrl(!useUrl)}
/>
</div>
)}
{assetSource === SOURCE_URL && (
<FormField
type={'text'}
name={'thumbnail'}
label={__(assetName + ' ' + recommended)}
placeholder={'https://example.com/image.png'}
disabled={false}
value={currentValue}
onChange={e => {
onUpdate(e.target.value);
}}
/>
)}
</fieldset-group>
</fieldset-section>
</Form>
}
/>
);
}

158
ui/component/youtubeTransferStatus/view.jsx
View file

@ -80,88 +80,82 @@ export default function YoutubeTransferStatus(props: Props) {
return (
hasChannels &&
!isYoutubeTransferComplete && (
<div>
<Card
title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
subtitle={
<span>
{hasPendingTransfers &&
__('Your videos are currently being transferred. There is nothing else for you to do.')}
{transferEnabled && !hasPendingTransfers && __('Your videos are ready to be transferred.')}
{!transferEnabled && !hasPendingTransfers && __('Please check back later.')}
</span>
}
body={
<section>
{youtubeChannels.map((channel, index) => {
const {
lbry_channel_name: channelName,
channel_claim_id: claimId,
status_token: statusToken,
} = channel;
const url = buildURI({ channelName, channelClaimId: claimId });
const transferState = getMessage(channel);
return (
<div key={url} className="card--inline">
{claimId ? (
<ClaimPreview
uri={url}
actions={<span className="help">{transferState}</span>}
properties={false}
/>
) : (
<div className="section--padded">
<p>
<I18nMessage
tokens={{
channelName,
}}
>
%channelName% is not yet ready to be transferred. Please allow up to one week, though it is
frequently faster.
</I18nMessage>
</p>
<p className="help">
<I18nMessage
tokens={{
statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
faqLink: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/youtube" />,
}}
>
You can check your status %statusLink%. This %faqLink% explains the program in more detail.
</I18nMessage>
</p>
</div>
)}
</div>
);
})}
{videosImported && (
<div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
)}
</section>
}
actions={
transferEnabled ? (
<div className="card__actions">
<Button
button="primary"
disabled={youtubeImportPending}
onClick={claimChannels}
label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
/>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
</div>
) : !hideChannelLink ? (
<div className="card__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
</div>
) : (
false
)
}
/>
</div>
<Card
title={youtubeChannels.length > 1 ? __('Your YouTube Channels') : __('Your YouTube Channel')}
subtitle={
<span>
{hasPendingTransfers &&
__('Your videos are currently being transferred. There is nothing else for you to do.')}
{transferEnabled && !hasPendingTransfers && __('Your videos are ready to be transferred.')}
{!transferEnabled && !hasPendingTransfers && __('Please check back later.')}
</span>
}
body={
<section>
{youtubeChannels.map((channel, index) => {
const { lbry_channel_name: channelName, channel_claim_id: claimId, status_token: statusToken } = channel;
const url = buildURI({ channelName, channelClaimId: claimId });
const transferState = getMessage(channel);
return (
<div key={url} className="card--inline">
{claimId ? (
<ClaimPreview
uri={url}
actions={<span className="help">{transferState}</span>}
properties={false}
/>
) : (
<div className="section--padded">
<p>
<I18nMessage
tokens={{
channelName,
}}
>
%channelName% is not yet ready to be transferred. Please allow up to one week, though it is
frequently faster.
</I18nMessage>
</p>
<p className="help">
<I18nMessage
tokens={{
statusLink: <Button button="link" href={STATUS_URL + statusToken} label={__('here')} />,
faqLink: <Button button="link" label={__('FAQ')} href="https://lbry.com/faq/youtube" />,
}}
>
You can check your status %statusLink%. This %faqLink% explains the program in more detail.
</I18nMessage>
</p>
</div>
)}
</div>
);
})}
{videosImported && (
<div className="section help">{__('%complete% / %total% videos transferred', { complete, total })}</div>
)}
</section>
}
actions={
transferEnabled ? (
<div className="card__actions">
<Button
button="primary"
disabled={youtubeImportPending}
onClick={claimChannels}
label={youtubeChannels.length > 1 ? __('Claim Channels') : __('Claim Channel')}
/>
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/youtube#transfer" />
</div>
) : !hideChannelLink ? (
<div className="card__actions">
<Button button="primary" navigate={`/$/${PAGES.CHANNELS}`} label={__('View Your Channels')} />
</div>
) : (
false
)
}
/>
)
);
}

1
ui/constants/claim.js
View file

@ -1,4 +1,5 @@
export const MINIMUM_PUBLISH_BID = 0.0001;
export const ESTIMATED_FEE = 0.048; // .001 + .001 | .048 + .048 = .1
export const CHANNEL_ANONYMOUS = 'anonymous';
export const CHANNEL_NEW = 'new';

1
ui/constants/icons.js
View file

@ -105,5 +105,6 @@ export const PINNED = 'Pinned';
export const BUY = 'Buy';
export const SEND = 'Send';
export const RECEIVE = 'Receive';
export const CAMERA = 'Camera';
export const OPEN_LOG = 'FilePlus';
export const OPEN_LOG_FOLDER = 'Folder';

1
ui/constants/modal_types.js
View file

@ -42,3 +42,4 @@ export const SIGN_OUT = 'sign_out';
export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
export const CONFIRM_AGE = 'confirm_age';
export const REMOVE_BLOCKED = 'remove_blocked';
export const IMAGE_UPLOAD = 'image_upload';

1
ui/constants/pages.js
View file

@ -39,3 +39,4 @@ exports.CREATOR_DASHBOARD = 'dashboard';
exports.CHECKOUT = 'checkout';
exports.CODE_2257 = '2257';
exports.BUY = 'buy';
exports.CHANNEL_NEW = 'channelnew';

11
ui/modal/modalImageUpload/index.js Normal file
View file

@ -0,0 +1,11 @@
import { connect } from 'react-redux';
import { doHideModal } from 'redux/actions/app';
import ModalImageUpload from './view';
const perform = dispatch => () => ({
closeModal: () => {
dispatch(doHideModal());
},
});
export default connect(null, perform)(ModalImageUpload);

31
ui/modal/modalImageUpload/view.jsx Normal file
View file

@ -0,0 +1,31 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import SelectAsset from 'component/selectAsset';
type Props = {
closeModal: () => void,
currentValue: string,
title: string,
helpText: string,
onUpdate: string => void,
assetName: string,
};
function ModalImageUpload(props: Props) {
const { closeModal, currentValue, title, assetName, helpText, onUpdate } = props;
return (
<Modal isOpen type="card" onAborted={closeModal} contentLabel={title}>
<SelectAsset
onUpdate={v => onUpdate(v)}
currentValue={currentValue}
assetName={assetName}
recommended={helpText}
onDone={closeModal}
/>
</Modal>
);
}
export default ModalImageUpload;

3
ui/modal/modalRouter/view.jsx
View file

@ -40,6 +40,7 @@ import ModalSignOut from 'modal/modalSignOut';
import ModalSupportsLiquidate from 'modal/modalSupportsLiquidate';
import ModalConfirmAge from 'modal/modalConfirmAge';
import ModalFileSelection from 'modal/modalFileSelection';
import ModalImageUpload from 'modal/modalImageUpload';
type Props = {
modal: { id: string, modalProps: {} },
@ -143,6 +144,8 @@ function ModalRouter(props: Props) {
return <ModalSupportsLiquidate {...modalProps} />;
case MODALS.REMOVE_BLOCKED:
return <ModalRemoveBlocked {...modalProps} />;
case MODALS.IMAGE_UPLOAD:
return <ModalImageUpload {...modalProps} />;
default:
return null;
}

2
ui/page/channel/index.js
View file

@ -11,6 +11,7 @@ import {
} from 'lbry-redux';
import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
import { doOpenModal } from 'redux/actions/app';
import ChannelPage from './view';
const select = (state, props) => ({
@ -28,6 +29,7 @@ const select = (state, props) => ({
});
const perform = dispatch => ({
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
});

160
ui/page/channel/view.jsx
View file

@ -1,6 +1,6 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { useState, useEffect } from 'react';
import React from 'react';
import { parseURI } from 'lbry-redux';
import { Lbryio } from 'lbryinc';
import Page from 'component/page';
@ -8,7 +8,7 @@ import SubscribeButton from 'component/subscribeButton';
import BlockButton from 'component/blockButton';
import ShareButton from 'component/shareButton';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { withRouter } from 'react-router';
import { useHistory } from 'react-router';
import Button from 'component/button';
import { formatLbryUrlForWeb } from 'util/url';
import ChannelContent from 'component/channelContent';
@ -26,6 +26,7 @@ import ClaimSupportButton from 'component/claimSupportButton';
const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
const DISCUSSION_PAGE = `discussion`;
const EDIT_PAGE = 'edit';
type Props = {
uri: string,
@ -34,8 +35,6 @@ type Props = {
cover: ?string,
thumbnail: ?string,
page: number,
location: { search: string },
history: { push: string => void },
match: { params: { attribute: ?string } },
channelIsMine: boolean,
isSubscribed: boolean,
@ -52,14 +51,11 @@ type Props = {
function ChannelPage(props: Props) {
const {
uri,
claim,
title,
cover,
history,
location,
page,
channelIsMine,
thumbnail,
claim,
isSubscribed,
channelIsBlocked,
blackListedOutpoints,
@ -67,19 +63,27 @@ function ChannelPage(props: Props) {
subCount,
pending,
} = props;
const { channelName } = parseURI(uri);
const { search } = location;
const {
push,
goBack,
location: { search },
} = useHistory();
const urlParams = new URLSearchParams(search);
const currentView = urlParams.get(PAGE_VIEW_QUERY) || undefined;
const [coverError, setCoverError] = useState(false);
const editInUrl = urlParams.get(PAGE_VIEW_QUERY) === EDIT_PAGE;
const [editing, setEditing] = React.useState(editInUrl);
const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
const { channelName } = parseURI(uri);
const { permanent_url: permanentUrl } = claim;
const [editing, setEditing] = useState(false);
const [thumbPreview, setThumbPreview] = useState(thumbnail);
const [coverPreview, setCoverPreview] = useState(cover);
const [lastYtSyncDate, setLastYtSyncDate] = useState();
const claimId = claim.claim_id;
const formattedSubCount = Number(subCount).toLocaleString();
let channelIsBlackListed = false;
if (claim && blackListedOutpoints) {
channelIsBlackListed = blackListedOutpoints.some(
outpoint => outpoint.txid === claim.txid && outpoint.nout === claim.nout
);
}
// If a user changes tabs, update the url so it stays on the same page if they refresh.
// We don't want to use links here because we can't animate the tab change and using links
@ -97,42 +101,60 @@ function ChannelPage(props: Props) {
} else {
search += `${PAGE_VIEW_QUERY}=${DISCUSSION_PAGE}`;
}
history.push(`${url}${search}`);
push(`${url}${search}`);
}
function doneEditing() {
function onDone() {
setEditing(false);
setThumbPreview(thumbnail);
setCoverPreview(cover);
goBack();
}
useEffect(() => {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
if (response.is_verified_youtuber) {
setLastYtSyncDate(response.last_synced);
} else {
setLastYtSyncDate(undefined);
}
});
}, [claimId]);
let channelIsBlackListed = false;
if (claim && blackListedOutpoints) {
channelIsBlackListed = blackListedOutpoints.some(
outpoint => outpoint.txid === claim.txid && outpoint.nout === claim.nout
);
}
React.useEffect(() => {
fetchSubCount(claimId);
}, [uri, fetchSubCount, claimId]);
React.useEffect(() => {
if (!channelIsMine && editing) {
setEditing(false);
}
}, [channelIsMine, editing]);
if (channelIsMine && editing) {
push(`?${PAGE_VIEW_QUERY}=${EDIT_PAGE}`);
}
}, [channelIsMine, editing, push]);
React.useEffect(() => {
if (currentView === EDIT_PAGE) {
setEditing(true);
} else {
setEditing(false);
}
}, [currentView, setEditing]);
React.useEffect(() => {
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: claimId }).then(response => {
if (response.is_verified_youtuber) {
setLastYtSyncDate(response.last_synced);
}
});
}, [claimId]);
React.useEffect(() => {
fetchSubCount(claimId);
}, [uri, fetchSubCount, claimId]);
if (editing) {
return (
<Page
noFooter
noSideNavigation={editing}
backout={{
backFunction: onDone,
title: __('Editing @%channel%', { channel: channelName }),
simpleTitle: __('Editing'),
}}
>
<ChannelEdit uri={uri} onDone={onDone} />
</Page>
);
}
return (
<Page noFooter>
@ -153,39 +175,26 @@ function ChannelPage(props: Props) {
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />}
</div>
{!editing && cover && !coverError && (
{cover && (
<img
className={classnames('channel-cover__custom', { 'channel__image--blurred': channelIsBlocked })}
src={cover}
onError={() => setCoverError(true)}
/>
)}
{editing && <img className="channel-cover__custom" src={coverPreview} />}
{/* component that offers select/upload */}
<div className="channel__primary-info">
{!editing && (
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
obscure={channelIsBlocked}
allowGifs
/>
)}
{editing && (
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
thumbnailPreview={thumbPreview}
allowGifs
/>
)}
<ChannelThumbnail
className="channel__thumbnail--channel-page"
uri={uri}
obscure={channelIsBlocked}
allowGifs
/>
<h1 className="channel__title">{title || '@' + channelName}</h1>
<div className="channel__meta">
<span>
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
<HelpLink href="https://lbry.com/faq/views" />
</span>
{channelIsMine && !editing && (
{channelIsMine && (
<>
{pending ? (
<span>{__('Your changes will be live in a few minutes')}</span>
@ -201,15 +210,6 @@ function ChannelPage(props: Props) {
)}
</>
)}
{channelIsMine && editing && (
<Button
button="alt"
title={__('Cancel')}
onClick={() => doneEditing()}
icon={ICONS.REMOVE}
iconSize={18}
/>
)}
</div>
</div>
<div className="channel-cover__gradient" />
@ -220,22 +220,12 @@ function ChannelPage(props: Props) {
<Tab>{editing ? __('Editing Your Channel') : __('About')}</Tab>
<Tab disabled={editing}>{__('Comments')}</Tab>
</TabList>
<TabPanels>
<TabPanel>
<ChannelContent uri={uri} channelIsBlackListed={channelIsBlackListed} />
</TabPanel>
<TabPanel>
{editing ? (
<ChannelEdit
uri={uri}
doneEditing={doneEditing}
updateThumb={v => setThumbPreview(v)}
updateCover={v => setCoverPreview(v)}
/>
) : (
<ChannelAbout uri={uri} />
)}
<ChannelAbout uri={uri} />
</TabPanel>
<TabPanel>
<ChannelDiscussion uri={uri} />
@ -246,4 +236,4 @@ function ChannelPage(props: Props) {
);
}
export default withRouter(ChannelPage);
export default ChannelPage;

7
ui/page/channelNew/index.js Normal file
View file

@ -0,0 +1,7 @@
import { connect } from 'react-redux';
import ChannelNew from './view';
const select = () => ({});
const perform = () => ({});
export default connect(select, perform)(ChannelNew);

25
ui/page/channelNew/view.jsx Normal file
View file

@ -0,0 +1,25 @@
// @flow
import React from 'react';
import ChannelEdit from 'component/channelEdit';
import Page from 'component/page';
import { withRouter } from 'react-router';
import * as PAGES from 'constants/pages';
type Props = {
history: { push: string => void, goBack: () => void },
};
function ChannelNew(props: Props) {
const { history } = props;
return (
<Page
noSideNavigation
backout={{ backFunction: () => history.goBack(), title: __('Create Channel') }}
className="main--auth-page"
>
<ChannelEdit onDone={() => history.push(`/$/${PAGES.CHANNELS}`)} />
</Page>
);
}
export default withRouter(ChannelNew);

2
ui/page/channels/index.js
View file

@ -6,7 +6,6 @@ import {
selectFetchingMyChannels,
} from 'lbry-redux';
import { selectYoutubeChannels } from 'redux/selectors/user';
import { doOpenModal } from 'redux/actions/app';
import ChannelsPage from './view';
const select = state => ({
@ -17,7 +16,6 @@ const select = state => ({
});
const perform = dispatch => ({
openModal: id => dispatch(doOpenModal(id)),
fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
});

44
ui/page/channels/view.jsx
View file

@ -1,5 +1,4 @@
// @flow
import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
import React, { useEffect } from 'react';
import ClaimList from 'component/claimList';
@ -8,6 +7,7 @@ import Button from 'component/button';
import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Spinner from 'component/spinner';
import Card from 'component/common/card';
import * as PAGES from 'constants/pages';
type Props = {
channels: Array<ChannelClaim>,
@ -15,11 +15,10 @@ type Props = {
fetchChannelListMine: () => void,
fetchingChannels: boolean,
youtubeChannels: ?Array<any>,
openModal: string => void,
};
export default function ChannelsPage(props: Props) {
const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels, openModal } = props;
const { channels, channelUrls, fetchChannelListMine, fetchingChannels, youtubeChannels } = props;
const hasYoutubeChannels = youtubeChannels && Boolean(youtubeChannels.length);
const hasPendingChannels = channels && channels.some(channel => channel.confirmations < 0);
@ -29,23 +28,28 @@ export default function ChannelsPage(props: Props) {
return (
<Page>
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
<div className="card-stack">
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
{channelUrls && Boolean(channelUrls.length) && (
<Card
title={__('Your Channels')}
titleActions={
<>
<Button
button="secondary"
icon={ICONS.CHANNEL}
label={__('New Channel')}
navigate={`/$/${PAGES.CHANNEL_NEW}`}
/>
</>
}
isBodyList
body={<ClaimList isCardBody loading={fetchingChannels} uris={channelUrls} />}
/>
)}
</div>
{channelUrls && Boolean(channelUrls.length) && (
<Card
title={__('Your Channels')}
titleActions={
<Button
button="secondary"
icon={ICONS.CHANNEL}
label={__('New Channel')}
onClick={() => openModal(MODALS.CREATE_CHANNEL)}
/>
}
isBodyList
body={<ClaimList isCardBody loading={fetchingChannels} uris={channelUrls} />}
/>
)}
{!(channelUrls && channelUrls.length) && (
<React.Fragment>
{!fetchingChannels ? (
@ -54,7 +58,7 @@ export default function ChannelsPage(props: Props) {
<h2 className="section__title--large">{__('No Channels Created Yet')}</h2>
<div className="section__actions">
<Button button="primary" label={__('New Channel')} onClick={() => openModal(MODALS.CREATE_CHANNEL)} />
<Button button="primary" label={__('New Channel')} navigate={`/$/${PAGES.CHANNEL_NEW}`} />
</div>
</div>
</section>

2
ui/page/show/index.js
View file

@ -8,6 +8,7 @@ import {
makeSelectTitleForUri,
normalizeURI,
makeSelectClaimIsMine,
makeSelectClaimIsPending,
} from 'lbry-redux';
import { makeSelectChannelInSubscriptions } from 'redux/selectors/subscriptions';
import { selectBlackListedOutpoints } from 'lbryinc';
@ -42,6 +43,7 @@ const select = (state, props) => {
uri,
title: makeSelectTitleForUri(uri)(state),
claimIsMine: makeSelectClaimIsMine(uri)(state),
claimIsPending: makeSelectClaimIsPending(uri)(state),
};
};

19
ui/page/show/view.jsx
View file

@ -22,11 +22,22 @@ type Props = {
nout: number,
}>,
title: string,
claimIsMine: Boolean,
claimIsMine: boolean,
claimIsPending: boolean,
};
function ShowPage(props: Props) {
const { isResolvingUri, resolveUri, uri, claim, blackListedOutpoints, location, claimIsMine, isSubscribed } = props;
const {
isResolvingUri,
resolveUri,
uri,
claim,
blackListedOutpoints,
location,
claimIsMine,
isSubscribed,
claimIsPending,
} = props;
const signingChannel = claim && claim.signing_channel;
const canonicalUrl = claim && claim.canonical_url;
const claimExists = claim !== null && claim !== undefined;
@ -45,11 +56,11 @@ function ShowPage(props: Props) {
if (
(resolveUri && !isResolvingUri && uri && haventFetchedYet) ||
(claimExists && (!canonicalUrl || isMine === undefined))
(claimExists && !claimIsPending && (!canonicalUrl || isMine === undefined))
) {
resolveUri(uri);
}
}, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, history, isMine]);
}, [resolveUri, isResolvingUri, canonicalUrl, uri, claimExists, haventFetchedYet, history, isMine, claimIsPending]);
// Don't navigate directly to repost urls
// Always redirect to the actual content

13
ui/scss/component/_card.scss
View file

@ -53,6 +53,11 @@
align-items: center;
}
.card--after-tabs {
@extend .card;
margin-top: var(--spacing-l);
}
.card__actions {
display: flex;
align-items: center;
@ -107,6 +112,8 @@
.card__actions--between {
@include between;
align-items: center;
width: 100%;
}
.card__actions--center {
@ -161,15 +168,21 @@
align-items: center;
font-size: var(--font-title);
font-weight: var(--font-weight-light);
& > *:not(:last-child) {
margin-right: var(--spacing-m);
}
/* .badge rule inherited from file page prices, should be refactored */
.badge {
float: right;
margin-left: var(--spacing-s);
margin-top: 8px; // should be flex'd, but don't blame me! I just moved it down 3px
}
@media (max-width: $breakpoint-small) {
font-size: var(--font-body);
}
}
.card__title-actions {

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

@ -20,9 +20,12 @@ $metadata-z-index: 1;
.channel-cover,
.channel-cover__custom {
min-height: var(--cover-photo-height);
height: 100%;
width: 100%;
border-top-left-radius: var(--card-radius);
border-top-right-radius: var(--card-radius);
border: 1px sold var(--color-border);
border-bottom: none;
@media (max-width: $breakpoint-small) {
// Yikes
@ -72,7 +75,8 @@ $metadata-z-index: 1;
box-shadow: var(--card-box-shadow);
@media (max-width: $breakpoint-small) {
display: none;
top: 0;
margin-top: var(--spacing-m);
}
}
@ -119,7 +123,7 @@ $metadata-z-index: 1;
z-index: $metadata-z-index;
// Jump over the thumbnail photo because it is absolutely positioned
// Then add normal page spacing, _then_ add the actual padding
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
padding-right: var(--spacing-m);
padding-bottom: var(--spacing-m);
margin-top: var(--spacing-xl);
@ -128,7 +132,7 @@ $metadata-z-index: 1;
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m);
margin-top: 0;
margin-top: calc(var(--channel-thumbnail-width) + var(--spacing-l));
}
}
@ -168,7 +172,6 @@ $metadata-z-index: 1;
.channel__quick-actions {
display: flex;
flex-direction: row;
margin-top: var(--spacing-s);
margin-left: var(--spacing-m);
position: absolute;
top: 0;
@ -187,8 +190,41 @@ $metadata-z-index: 1;
}
@media (max-width: $breakpoint-small) {
flex-direction: column;
> * {
margin-right: 0;
margin-bottom: var(--spacing-xs);
margin-left: auto;
// Needed for specificity above
&:not(:last-child) {
margin-right: 0;
}
}
}
}
.channel__edit-thumb {
position: absolute;
top: 0;
left: var(--spacing-l);
margin-top: calc(var(--spacing-m) * 7);
z-index: $metadata-z-index;
> * {
padding: 0 var(--spacing-xs);
&:not(:last-child) {
margin-right: var(--spacing-m);
}
}
@media (max-width: $breakpoint-small) {
margin-top: 0;
.button {
margin-top: var(--spacing-l);
}
}
}

4
ui/scss/component/_form-field.scss
View file

@ -87,7 +87,7 @@ fieldset-group {
border-color: var(--color-input-border);
color: var(--color-text-help);
background-color: var(--color-input-bg);
border-right: 1px solid var(--color-text-help);
border-right: 1px solid var(--border-color);
}
}
@ -133,8 +133,6 @@ fieldset-group {
.form-field__help {
@extend .help;
margin-top: var(--spacing-xxs);
margin-bottom: var(--spacing-s);
}
.form-field__help + .checkbox,

4
ui/scss/component/_main.scss
View file

@ -1,5 +1,7 @@
.main-wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
}
.main-wrapper--mac {
@ -25,6 +27,8 @@
.main {
position: relative;
width: calc(100% - var(--side-nav-width) - var(--spacing-l));
margin-right: auto;
margin-left: auto;
@media (max-width: $breakpoint-small) {
width: 100%;

4
ui/scss/component/section.scss
View file

@ -109,7 +109,9 @@
flex-wrap: wrap;
> * {
margin-bottom: var(--spacing-s);
&:not(:only-of-type) {
margin-bottom: var(--spacing-s);
}
}
}

8
ui/scss/component/tabs.scss
View file

@ -15,12 +15,14 @@
}
.tabs__list--channel-page {
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-l));
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-xl));
padding-right: var(--spacing-m);
margin-bottom: var(--spacing-l);
height: 4rem;
border-bottom-left-radius: var(--card-radius);
border-bottom-right-radius: var(--card-radius);
border: 1px solid var(--color-border);
border-top: none;
@media (max-width: $breakpoint-small) {
padding-left: var(--spacing-m);
@ -46,6 +48,10 @@
&:focus {
box-shadow: none;
}
@media (max-width: $breakpoint-xsmall) {
margin-right: var(--spacing-m);
}
}
.tab__divider {

7
ui/util/generate-thumbnail-name.js Normal file
View file

@ -0,0 +1,7 @@
// @flow
export const generateThumbnailName = (): string => {
let text = '';
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (let i = 0; i < 24; i += 1) text += possible.charAt(Math.floor(Math.random() * 62));
return text;
};

12
yarn.lock
View file

@ -957,10 +957,10 @@
prop-types "^15.6.2"
scheduler "^0.18.0"
"@lbry/components@^4.2.2":
version "4.2.2"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.2.2.tgz#023b8224e180b69cd8b5d77242441742bca26d0f"
integrity sha512-CziwuALDiv/DXT5zwkVK8cfF914WyOqKg8GkqIk/f9vc7VXZx9OlRfBadnpGDrezrjjHn7onwOreQrwzB5PcNA==
"@lbry/components@^4.2.5":
version "4.2.5"
resolved "https://registry.yarnpkg.com/@lbry/components/-/components-4.2.5.tgz#21d2cad296c015c6300727e706a1456e72aae600"
integrity sha512-UmE4nkvTQnZX4obOiR650apXarRmvXW+Ieezu/M4LZNKL/CRmHJIRrqcSMtPugDf/Ijukx/4oqrq2M8Ww0sgyw==
"@mapbox/hast-util-table-cell-style@^0.1.3":
version "0.1.3"
@ -6347,9 +6347,9 @@ lazy-val@^1.0.4:
yargs "^13.2.2"
zstd-codec "^0.1.1"
lbry-redux@lbryio/lbry-redux#eb47b7e5b6cc24db93b2b66cf1153b02858caf58:
lbry-redux@lbryio/lbry-redux#906199d866a187015668a27363f010828c15979a:
version "0.0.1"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/eb47b7e5b6cc24db93b2b66cf1153b02858caf58"
resolved "https://codeload.github.com/lbryio/lbry-redux/tar.gz/906199d866a187015668a27363f010828c15979a"
dependencies:
proxy-polyfill "0.1.6"
reselect "^3.0.0"