From 035f04fb3eaaabca4f4b3e20b765d57933a8808e Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Wed, 17 Mar 2021 14:18:54 +0800
Subject: [PATCH] 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`)
---
 static/app-strings.json      |  1 +
 ui/page/youtubeSync/view.jsx | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/static/app-strings.json b/static/app-strings.json
index 09bc24d09..8abb10570 100644
--- a/static/app-strings.json
+++ b/static/app-strings.json
@@ -1527,6 +1527,7 @@
   "Pin": "Pin",
   "Unpin": "Unpin",
   "LBRY leveled up": "LBRY leveled up",
+  "Channel language": "Channel language",
   "Primary Language": "Primary Language",
   "Your main content language": "Your main content language",
   "None selected": "None selected",
diff --git a/ui/page/youtubeSync/view.jsx b/ui/page/youtubeSync/view.jsx
index c4ce907bf..e625bb436 100644
--- a/ui/page/youtubeSync/view.jsx
+++ b/ui/page/youtubeSync/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import { SITE_NAME, DOMAIN } from 'config';
 import * as PAGES from 'constants/pages';
+import SUPPORTED_LANGUAGES from 'constants/supported_languages';
 import React from 'react';
 import Page from 'component/page';
 import Button from 'component/button';
@@ -13,6 +14,7 @@ import { Lbryio } from 'lbryinc';
 import { useHistory } from 'react-router';
 import YoutubeTransferStatus from 'component/youtubeTransferStatus';
 import Nag from 'component/common/nag';
+import { getDefaultLanguage } from 'util/default-languages';
 
 const STATUS_TOKEN_PARAM = 'status_token';
 const ERROR_MESSAGE_PARAM = 'error_message';
@@ -37,6 +39,7 @@ export default function YoutubeSync(props: Props) {
   const errorMessage = urlParams.get(ERROR_MESSAGE_PARAM);
   const newChannelParam = urlParams.get(NEW_CHANNEL_PARAM);
   const [channel, setChannel] = React.useState('');
+  const [language, setLanguage] = React.useState(getDefaultLanguage());
   const [nameError, setNameError] = React.useState(undefined);
   const [acknowledgedTerms, setAcknowledgedTerms] = React.useState(false);
   const [addingNewChannel, setAddingNewChannel] = React.useState(newChannelParam);
@@ -69,7 +72,8 @@ export default function YoutubeSync(props: Props) {
       immediate_sync: true,
       desired_lbry_channel_name: `@${channel}`,
       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
       window.location.href = ytAuthUrl;
     });
@@ -136,6 +140,19 @@ export default function YoutubeSync(props: Props) {
                     onChange={handleChannelChange}
                   />
                 </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
                   type="checkbox"
                   name="yt_sync_terms"