lbry-desktop/ui/component/publishAdditionalOptions/view.jsx
2021-06-14 14:53:14 -04:00

208 lines
7 KiB
JavaScript

// @flow
import React from 'react';
import classnames from 'classnames';
import usePersistedState from 'effects/use-persisted-state';
import { FormField } from 'component/common/form';
import Button from 'component/button';
import PublishReleaseDate from 'component/publishReleaseDate';
import LicenseType from './license-type';
import Card from 'component/common/card';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import { sortLanguageMap } from 'util/default-languages';
// @if TARGET='app'
// import ErrorText from 'component/common/error-text';
// import { LbryFirst } from 'lbry-redux';
// import { ipcRenderer } from 'electron';
// @endif
type Props = {
user: ?User,
language: ?string,
name: ?string,
licenseType: ?string,
otherLicenseDescription: ?string,
licenseUrl: ?string,
disabled: boolean,
updatePublishForm: ({}) => void,
useLBRYUploader: boolean,
needsYTAuth: boolean,
fetchAccessToken: () => void,
accessToken: string,
};
function PublishAdditionalOptions(props: Props) {
const {
language,
name,
licenseType,
otherLicenseDescription,
licenseUrl,
updatePublishForm,
// user,
// useLBRYUploader,
// needsYTAuth,
// accessToken,
// fetchAccessToken,
} = props;
const [hideSection, setHideSection] = usePersistedState('publish-advanced-options', true);
// const [hasLaunchedLbryFirst, setHasLaunchedLbryFirst] = React.useState(false);
// const [ytError, setYtError] = React.useState(false);
// const isLBRYFirstUser = user && user.lbry_first_approved;
// const showLbryFirstCheckbox = !IS_WEB && isLBRYFirstUser && hasLaunchedLbryFirst;
function toggleHideSection() {
setHideSection(!hideSection);
}
// @if TARGET='app'
// function signup() {
// updatePublishForm({ ytSignupPending: true });
// LbryFirst.ytSignup()
// .then(response => {
// updatePublishForm({ needsYTAuth: false, ytSignupPending: false });
// })
// .catch(error => {
// updatePublishForm({ ytSignupPending: false });
// setYtError(true);
// console.error(error); // eslint-disable-line
// });
// }
// function unlink() {
// setYtError(false);
// LbryFirst.remove()
// .then(response => {
// updatePublishForm({ needsYTAuth: true });
// })
// .catch(error => {
// setYtError(true);
// console.error(error); // eslint-disable-line
// });
// }
// React.useEffect(() => {
// if (!accessToken) {
// fetchAccessToken();
// }
// }, [accessToken, fetchAccessToken]);
// React.useEffect(() => {
// if (isLBRYFirstUser && !hasLaunchedLbryFirst) {
// ipcRenderer.send('launch-lbry-first');
// ipcRenderer.on('lbry-first-launched', () => {
// setHasLaunchedLbryFirst(true);
// });
// }
// }, [isLBRYFirstUser, hasLaunchedLbryFirst, setHasLaunchedLbryFirst]);
// React.useEffect(() => {
// if (useLBRYUploader && isLBRYFirstUser && hasLaunchedLbryFirst && accessToken) {
// LbryFirst.hasYTAuth(accessToken)
// .then(response => {
// updatePublishForm({ needsYTAuth: !response.HasAuth });
// })
// .catch(error => {
// setYtError(true);
// console.error(error); // eslint-disable-line
// });
// }
// }, [updatePublishForm, useLBRYUploader, isLBRYFirstUser, hasLaunchedLbryFirst, accessToken]);
// @endif
return (
<Card
className="card--enable-overflow"
actions={
<React.Fragment>
{!hideSection && (
<div className={classnames({ 'card--disabled': !name })}>
{/* @if TARGET='app' */}
{/* {showLbryFirstCheckbox && (
<div className="section">
<>
<FormField
checked={useLBRYUploader}
type="checkbox"
name="use_lbry_uploader_checkbox"
onChange={event => updatePublishForm({ useLBRYUploader: !useLBRYUploader })}
label={
<React.Fragment>
{__('Automagically upload to your youtube channel.')}{' '}
<Button button="link" href="https://lbry.com/faq/lbry-uploader" label={__('Learn More')} />
</React.Fragment>
}
/>
{useLBRYUploader && (
<div className="section__actions">
{needsYTAuth ? (
<Button
button="primary"
onClick={signup}
label={__('Log In With YouTube')}
disabled={false}
/>
) : (
<Button button="alt" onClick={unlink} label={__('Unlink YouTube Channel')} disabled={false} />
)}
{ytError && <ErrorText>{__('There was an error with LBRY first publishing.')}</ErrorText>}
</div>
)}
</>
</div>
)} */}
{/* @endif */}
<div className="section">
<PublishReleaseDate />
<FormField
label={__('Language')}
type="select"
name="content_language"
value={language}
onChange={(event) => updatePublishForm({ languages: [event.target.value] })}
>
{sortLanguageMap(SUPPORTED_LANGUAGES).map(([langKey, langName]) => (
<option key={langKey} value={langKey}>
{langName}
</option>
))}
</FormField>
<LicenseType
licenseType={licenseType}
otherLicenseDescription={otherLicenseDescription}
licenseUrl={licenseUrl}
handleLicenseChange={(newLicenseType, newLicenseUrl) =>
updatePublishForm({
licenseType: newLicenseType,
licenseUrl: newLicenseUrl,
})
}
handleLicenseDescriptionChange={(event) =>
updatePublishForm({
otherLicenseDescription: event.target.value,
})
}
handleLicenseUrlChange={(event) => updatePublishForm({ licenseUrl: event.target.value })}
/>
</div>
</div>
)}
<div className="section__actions">
<Button
label={hideSection ? __('Additional Options') : __('Hide')}
button="link"
onClick={toggleHideSection}
/>
</div>
</React.Fragment>
}
/>
);
}
export default PublishAdditionalOptions;