Localization: Support custom languages (#7425)

Author: zubiden

src/api/gramjs/apiBuilders/misc.ts

@@ -321,12 +321,14 @@ export function buildLangStrings(strings: GramJs.TypeLangPackString[]) {
 
 export function buildApiLanguage(lang: GramJs.TypeLangPackLanguage): ApiLanguage {
   const {
-    name, nativeName, langCode, pluralCode, rtl, stringsCount, translatedCount, translationsUrl, beta, official,
+    name, nativeName, langCode, baseLangCode, pluralCode, rtl, stringsCount, translatedCount,
+    translationsUrl, beta, official,
   } = lang;
   return {
     name,
     nativeName,
     langCode,
+    baseLangCode,
     pluralCode,
     isRtl: rtl,
     isBeta: beta,

src/api/gramjs/methods/client.ts

@@ -89,6 +89,10 @@ const ABORT_CONTROLLERS = new Map<string, AbortController>();
 let client: TelegramClient;
 let currentUserId: string | undefined;
 
+export function setLanguageCode({ langCode }: { langCode: string }) {
+  return client.setLanguageCode(langCode);
+}
+
 export async function init(initialArgs: ApiInitialArgs, onConnected?: NoneToVoidFunction) {
   if (DEBUG) {
     // eslint-disable-next-line no-console

src/api/gramjs/methods/index.ts

@@ -2,7 +2,7 @@ export {
   cancelWebTokenAuthorization, destroy, disconnect, downloadMedia, fetchCurrentUser, repairFileReference,
   abortChatRequests, abortRequestGroup,
   setForceHttpTransport, setShouldDebugExportedSenders, setAllowHttpTransport, requestChannelDifference,
-  setOpenedChannelIds,
+  setOpenedChannelIds, setLanguageCode,
 } from './client';
 
 export {

src/api/gramjs/methods/settings.ts

@@ -502,7 +502,7 @@ export async function fetchLanguage({
   const result = await invokeRequest(new GramJs.langpack.GetLanguage({
     langPack,
     langCode,
-  }));
+  }), { shouldThrow: true });
   if (!result) {
     return undefined;
   }

src/api/types/settings.ts

@@ -51,6 +51,7 @@ export type LangPack = {
 
 export type CachedLangData = {
   langPack: LangPack;
+  baseLangPack?: LangPack;
   language: ApiLanguage;
 };
 

src/assets/localization/fallback.strings

@@ -539,6 +539,15 @@
 "DataSettings" = "Data and Storage";
 "PrivacySettings" = "Privacy and Security";
 "Language" = "Language";
+"LanguageTitle" = "Change language?";
+"LanguageAlert" = "You are about to apply a language pack ({language}) that is {percent}% complete.\n\nThis will translate the entire interface. You can suggest corrections via the {link}.\n\nYou can change your language back at any time in {settings}.";
+"LanguageCustomAlert" = "You are about to apply a custom language pack ({language}) that is {percent}% complete.\n\nThis will translate the entire interface. You can suggest corrections via the {link}.\n\nYou can change your language back at any time in {settings}.";
+"LanguageUnknownCustomAlert" = "Unfortunately, this language pack ({language}) doesn't contain data for Telegram Web A. You can contribute to this language pack using the {link}.";
+"LanguageAlready" = "You're already using this language pack. You can change your language back at any time in {settings}.";
+"LanguageNotFound" = "Sorry, this language pack doesn't exist.";
+"LanguageLoadFailed" = "Couldn't load this language pack. Please try again.";
+"LanguageApply" = "Apply Language";
+"LanguageTranslateLink" = "translation platform";
 "SettingsExperimental" = "Experimental settings";
 "PrivacyPhone" = "Phone Number";
 "PrivacyLastSeen" = "Last Seen & Online";

src/bundles/extra.ts

@@ -78,6 +78,7 @@ export { default as AiToneEmojiPickerModal }
   from '../components/middle/composer/AiMessageEditorModal/AiToneEmojiPickerModal';
 export { default as AiTonePreviewModal }
   from '../components/modals/aiTonePreview/AiTonePreviewModal';
+export { default as LanguageModal } from '../components/modals/language/LanguageModal';
 
 export { default as AttachmentModal } from '../components/middle/composer/AttachmentModal';
 export { default as MediaEditor } from '../components/ui/mediaEditor/MediaEditor';

src/components/auth/AuthPhoneNumber.tsx

@@ -111,9 +111,9 @@ const AuthPhoneNumber = ({
 
   useEffect(() => {
     if (isConnected) {
-      loadCountryList({ langCode: language });
+      loadCountryList({ langCode: lang.code });
     }
-  }, [isConnected, language]);
+  }, [isConnected, lang.code]);
 
   useEffect(() => {
     if (nearestCountry && phoneCodeList && !country && !isTouched) {

src/components/common/Composer.tsx

@@ -104,6 +104,7 @@ import {
   selectIsPremiumPurchaseBlocked,
   selectIsReactionPickerOpen,
   selectIsRightColumnShown,
+  selectLanguageCode,
   selectNewestMessageWithBotKeyboardButtons,
   selectNotifyDefaults,
   selectNotifyException,
@@ -3362,7 +3363,8 @@ export default memo(withGlobal<OwnProps>(
       shouldSuggestStickers, shouldSuggestCustomEmoji, shouldUpdateStickerSetOrder, shouldPaidMessageAutoApprove,
       lastRecordMessageMode,
     } = global.settings.byKey;
-    const { language, shouldCollectDebugLogs } = selectSharedSettings(global);
+    const { shouldCollectDebugLogs } = selectSharedSettings(global);
+    const language = selectLanguageCode(global);
     const {
       forwardMessages: { messageIds: forwardMessageIds },
       messageMediaEditorRequest,

src/components/common/CustomEmojiPicker.tsx

@@ -27,7 +27,7 @@ import {
   selectIsChatWithSelf,
   selectIsCurrentUserPremium,
 } from '../../global/selectors';
-import { selectSharedSettings } from '../../global/selectors/sharedState';
+import { selectLanguageCode } from '../../global/selectors/settings';
 import animateHorizontalScroll from '../../util/animateHorizontalScroll';
 import { IS_TOUCH_ENV } from '../../util/browser/windowEnvironment';
 import buildClassName from '../../util/buildClassName';
@@ -639,7 +639,7 @@ export default memo(withGlobal<OwnProps>(
     const isSavedMessages = Boolean(chatId && selectIsChatWithSelf(global, chatId));
     const chatFullInfo = chatId ? selectChatFullInfo(global, chatId) : undefined;
     const collectibleStatuses = global.collectibleEmojiStatuses?.statuses;
-    const { language } = selectSharedSettings(global);
+    const language = selectLanguageCode(global);
     const baseEmojiKeywords = global.emojiKeywords[BASE_EMOJI_KEYWORD_LANG];
     const emojiKeywords = language !== BASE_EMOJI_KEYWORD_LANG ? global.emojiKeywords[language] : undefined;