YT-Sync: Add field to select channel

## Issue
Closes 5537: Allow youtube sync new pass language to api

## Notes
- Default language for the selector comes from browser (`navigator.language`)
This commit is contained in:
infinite-persistence 2021-03-17 14:18:54 +08:00 committed by Sean Yesmunt
parent 611b07052c
commit 035f04fb3e
2 changed files with 19 additions and 1 deletions

View file

@ -1527,6 +1527,7 @@
"Pin": "Pin", "Pin": "Pin",
"Unpin": "Unpin", "Unpin": "Unpin",
"LBRY leveled up": "LBRY leveled up", "LBRY leveled up": "LBRY leveled up",
"Channel language": "Channel language",
"Primary Language": "Primary Language", "Primary Language": "Primary Language",
"Your main content language": "Your main content language", "Your main content language": "Your main content language",
"None selected": "None selected", "None selected": "None selected",

View file

@ -1,6 +1,7 @@
// @flow // @flow
import { SITE_NAME, DOMAIN } from 'config'; import { SITE_NAME, DOMAIN } from 'config';
import * as PAGES from 'constants/pages'; import * as PAGES from 'constants/pages';
import SUPPORTED_LANGUAGES from 'constants/supported_languages';
import React from 'react'; import React from 'react';
import Page from 'component/page'; import Page from 'component/page';
import Button from 'component/button'; import Button from 'component/button';
@ -13,6 +14,7 @@ import { Lbryio } from 'lbryinc';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
import YoutubeTransferStatus from 'component/youtubeTransferStatus'; import YoutubeTransferStatus from 'component/youtubeTransferStatus';
import Nag from 'component/common/nag'; import Nag from 'component/common/nag';
import { getDefaultLanguage } from 'util/default-languages';
const STATUS_TOKEN_PARAM = 'status_token'; const STATUS_TOKEN_PARAM = 'status_token';
const ERROR_MESSAGE_PARAM = 'error_message'; const ERROR_MESSAGE_PARAM = 'error_message';
@ -37,6 +39,7 @@ export default function YoutubeSync(props: Props) {
const errorMessage = urlParams.get(ERROR_MESSAGE_PARAM); const errorMessage = urlParams.get(ERROR_MESSAGE_PARAM);
const newChannelParam = urlParams.get(NEW_CHANNEL_PARAM); const newChannelParam = urlParams.get(NEW_CHANNEL_PARAM);
const [channel, setChannel] = React.useState(''); const [channel, setChannel] = React.useState('');
const [language, setLanguage] = React.useState(getDefaultLanguage());
const [nameError, setNameError] = React.useState(undefined); const [nameError, setNameError] = React.useState(undefined);
const [acknowledgedTerms, setAcknowledgedTerms] = React.useState(false); const [acknowledgedTerms, setAcknowledgedTerms] = React.useState(false);
const [addingNewChannel, setAddingNewChannel] = React.useState(newChannelParam); const [addingNewChannel, setAddingNewChannel] = React.useState(newChannelParam);
@ -69,7 +72,8 @@ export default function YoutubeSync(props: Props) {
immediate_sync: true, immediate_sync: true,
desired_lbry_channel_name: `@${channel}`, desired_lbry_channel_name: `@${channel}`,
return_url: `https://${DOMAIN}/$/${inSignUpFlow ? PAGES.AUTH : PAGES.YOUTUBE_SYNC}`, return_url: `https://${DOMAIN}/$/${inSignUpFlow ? PAGES.AUTH : PAGES.YOUTUBE_SYNC}`,
}).then(ytAuthUrl => { channel_language: language,
}).then((ytAuthUrl) => {
// react-router isn't needed since it's a different domain // react-router isn't needed since it's a different domain
window.location.href = ytAuthUrl; window.location.href = ytAuthUrl;
}); });
@ -136,6 +140,19 @@ export default function YoutubeSync(props: Props) {
onChange={handleChannelChange} onChange={handleChannelChange}
/> />
</fieldset-group> </fieldset-group>
<FormField
name="language_select"
type="select"
label={__('Channel language')}
onChange={(event) => setLanguage(event.target.value)}
value={language}
>
{Object.keys(SUPPORTED_LANGUAGES).map((language) => (
<option key={language} value={language}>
{SUPPORTED_LANGUAGES[language]}
</option>
))}
</FormField>
<FormField <FormField
type="checkbox" type="checkbox"
name="yt_sync_terms" name="yt_sync_terms"