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

Save thumbnail uploader

Browse source
This commit is contained in:
Raphael Wickihalder 2022-05-02 08:04:20 +02:00 committed by Thomas Zarebczan
parent a0097dc3ce
commit 4c1bf27dc1
6 changed files with 253 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/userFirstChannel/index.js
View file

@ -2,6 +2,7 @@ import { connect } from 'react-redux';
import { selectUser, selectEmailToVerify } from 'redux/selectors/user';
import { selectCreatingChannel, selectMyChannelClaims, selectCreateChannelError } from 'redux/selectors/claims';
import { doCreateChannel } from 'redux/actions/claims';
import { doOpenModal } from 'redux/actions/app';
import UserFirstChannel from './view';
const select = (state) => ({
@ -13,6 +14,7 @@ const select = (state) => ({
});
const perform = (dispatch) => ({
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)),
});

101
ui/component/userFirstChannel/view.jsx
View file

@ -1,4 +1,6 @@
// @flow
import * as MODALS from 'constants/modal_types';
import React, { useState } from 'react';
import { isNameValid } from 'util/lbryURI';
import Button from 'component/button';
@ -7,6 +9,11 @@ import { INVALID_NAME_ERROR } from 'constants/claim';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import analytics from 'analytics';
import { sortLanguageMap } from 'util/default-languages';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import Gerbil from 'component/channelThumbnail/gerbil.png';
import { THUMBNAIL_CDN_SIZE_LIMIT_BYTES } from 'config';
import * as ICONS from 'constants/icons';
export const DEFAULT_BID_FOR_FIRST_CHANNEL = 0.01;
@ -16,7 +23,12 @@ type Props = {
createChannelError: string,
claimingReward: boolean,
user: User,
languages: Array<string>,
doToggleInterestedInYoutubeSync: () => void,
openModal: (
id: string,
{ onUpdate: (string, boolean) => void, assetName: string, helpText: string, currentValue: string, title: string }
) => void,
};
function UserFirstChannel(props: Props) {
@ -25,14 +37,51 @@ function UserFirstChannel(props: Props) {
creatingChannel,
claimingReward,
user,
languages = [],
createChannelError,
doToggleInterestedInYoutubeSync,
openModal,
} = props;
const { primary_email: primaryEmail } = user;
const initialChannel = primaryEmail ? primaryEmail.split('@')[0] : '';
const [channel, setChannel] = useState(initialChannel);
const [title, setTitle] = useState(initialChannel);
const [isUpload, setIsUpload] = React.useState({ cover: false, thumbnail: false });
const [thumbError, setThumbError] = React.useState(false);
const [params, setParams]: [any, (any) => void] = React.useState(getChannelParams());
const LANG_NONE = 'none';
const languageParam = params.languages;
const primaryLanguage = Array.isArray(languageParam) && languageParam.length && languageParam[0];
const [nameError, setNameError] = useState(undefined);
function getChannelParams() {
// fill this in with sdk data
const channelParams: {
title: string,
languages: ?Array<string>,
} = {
title,
languages: languages || [],
};
return channelParams;
}
let thumbnailPreview;
if (!params.thumbnailUrl) {
thumbnailPreview = Gerbil;
} else if (thumbError) {
thumbnailPreview = ThumbnailBrokenImage;
} else {
thumbnailPreview = params.thumbnailUrl;
}
function handleThumbnailChange(thumbnailUrl: string, uploadSelected: boolean) {
setParams({ ...params, thumbnailUrl });
setIsUpload({ ...isUpload, thumbnail: uploadSelected });
setThumbError(false);
}
function handleCreateChannel() {
createChannel(`@${channel}`, DEFAULT_BID_FOR_FIRST_CHANNEL).then((channelClaim) => {
if (channelClaim) {
@ -80,11 +129,61 @@ function UserFirstChannel(props: Props) {
placeholder={__('channel')}
type="text"
name="auth_first_channel"
className="form-field--short"
className="form-field"
value={channel}
onChange={handleChannelChange}
/>
</fieldset-group>
<fieldset-section>
<FormField
type="text"
name="channel_title2"
label={__('Title')}
placeholder={__('My Awesome Channel')}
value={title}
onChange={handleChannelChange}
/>
</fieldset-section>
<fieldset-section>
<label>Avatar</label>
<img className="form-field__avatar" src={Gerbil} />
<Button
button="alt"
title={__('Edit')}
onClick={() =>
openModal(MODALS.IMAGE_UPLOAD, {
onUpdate: (thumbnailUrl, isUpload) => handleThumbnailChange(thumbnailUrl, isUpload),
title: __('Edit Thumbnail Image'),
helpText: __('(1:1 ratio, %max_size%MB max)', {
max_size: THUMBNAIL_CDN_SIZE_LIMIT_BYTES / (1024 * 1024),
}),
assetName: __('Thumbnail'),
currentValue: params.thumbnailUrl,
})
}
icon={ICONS.CAMERA}
iconSize={18}
/>
</fieldset-section>
<fieldset-section>
<FormField
name="language_select"
type="select"
label={__('Primary Language')}
onChange={(event) => handleLanguageChange(0, event.target.value)}
value={primaryLanguage}
helper={__('Your main content language')}
>
<option key={'pri-langNone'} value={LANG_NONE}>
{__('None selected')}
</option>
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
<option key={langKey} value={langKey}>
{langName}
</option>
))}
</FormField>
</fieldset-section>
<div className="section__actions">
<Button
button="primary"

19
ui/component/userFirstChannelDetails/index.js Normal file
View file

@ -0,0 +1,19 @@
import { connect } from 'react-redux';
import { selectUser, selectEmailToVerify } from 'redux/selectors/user';
import { selectCreatingChannel, selectMyChannelClaims, selectCreateChannelError } from 'redux/selectors/claims';
import { doCreateChannel } from 'redux/actions/claims';
import UserFirstChannelDetails from './view';
const select = (state) => ({
email: selectEmailToVerify(state),
user: selectUser(state),
channels: selectMyChannelClaims(state),
creatingChannel: selectCreatingChannel(state),
createChannelError: selectCreateChannelError(state),
});
const perform = (dispatch) => ({
createChannel: (name, amount) => dispatch(doCreateChannel(name, amount)),
});
export default connect(select, perform)(UserFirstChannelDetails);

118
ui/component/userFirstChannelDetails/view.jsx Normal file
View file

@ -0,0 +1,118 @@
// @flow
import React, { useState } from 'react';
import { isNameValid } from 'util/lbryURI';
import Button from 'component/button';
import { Form, FormField } from 'component/common/form';
import { INVALID_NAME_ERROR } from 'constants/claim';
import Card from 'component/common/card';
import I18nMessage from 'component/i18nMessage';
import analytics from 'analytics';
export const DEFAULT_BID_FOR_FIRST_CHANNEL = 0.01;
type Props = {
createChannel: (string, number) => Promise<ChannelClaim>,
creatingChannel: boolean,
createChannelError: string,
claimingReward: boolean,
user: User,
doToggleInterestedInYoutubeSync: () => void,
};
function UserFirstChannelDetails(props: Props) {
const {
createChannel,
creatingChannel,
claimingReward,
user,
createChannelError,
doToggleInterestedInYoutubeSync,
} = props;
const { primary_email: primaryEmail } = user;
const initialChannel = primaryEmail ? primaryEmail.split('@')[0] : '';
const [channel, setChannel] = useState(initialChannel);
const [nameError, setNameError] = useState(undefined);
function handleCreateChannel() {
createChannel(`@${channel}`, DEFAULT_BID_FOR_FIRST_CHANNEL).then((channelClaim) => {
if (channelClaim) {
analytics.apiLogPublish(channelClaim);
}
});
}
function handleChannelChange(e) {
const { value } = e.target;
setChannel(value);
if (!isNameValid(value)) {
setNameError(INVALID_NAME_ERROR);
} else {
setNameError();
}
}
return (
<div className="main__channel-creation">
<Card
title={__('Create a Channel')}
subtitle={
<React.Fragment>
<p>{__('Your channel will be used for publishing and commenting.')}</p>
<p>{__('You can have more than one or remove it later.')}</p>
</React.Fragment>
}
actions={
<Form onSubmit={handleCreateChannel}>
<fieldset-group class="fieldset-group--smushed fieldset-group--disabled-prefix">
<fieldset-section>
<label htmlFor="auth_first_channel">
{createChannelError || nameError ? (
<span className="error__text">{createChannelError || nameError}</span>
) : (
__('Your Channel')
)}
</label>
<div className="form-field__prefix">@</div>
</fieldset-section>
<FormField
autoFocus
placeholder={__('channel')}
type="text"
name="auth_first_channel"
className="form-field--short"
value={channel}
onChange={handleChannelChange}
/>
</fieldset-group>
<div className="section__actions">
<Button
button="primary"
type="submit"
disabled={nameError || !channel || creatingChannel || claimingReward}
label={creatingChannel || claimingReward ? __('Creating') : __('Create')}
/>
</div>
<div className="help--card-actions">
<I18nMessage
tokens={{
sync_channel: (
<Button
button="link"
label={__('Sync it and skip this step')}
onClick={() => doToggleInterestedInYoutubeSync()}
/>
),
}}
>
Have a YouTube channel? %sync_channel%.
</I18nMessage>
</div>
</Form>
}
/>
</div>
);
}
export default UserFirstChannelDetails;

5
ui/component/userSignUp/view.jsx
View file

@ -172,6 +172,11 @@ function UserSignUp(props: Props) {
}}
/>
),
/*
showChannelDetailsUpdate && (
<UserFirstChannelDetails />
),
*/
showChannelCreation &&
(interestedInYoutubeSync ? (
<YoutubeSync inSignUpFlow doToggleInterestedInYoutubeSync={doToggleInterestedInYoutubeSync} />

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

@ -457,6 +457,15 @@ fieldset-group {
}
}
.form-field__avatar {
width: 5rem;
height: 5rem;
border-radius: 50%;
background-color: var(--color-header-background);
padding: var(--spacing-xxs);
float: left;
}
.form-field--price-amount {
max-width: 6em;
}