feat: translations support

frontend/src/static/js/utils/classes/UpNextLoaderView.js

@@ -1,4 +1,5 @@
 import { addClassname, removeClassname } from '../helpers/';
+import { translateString } from '../../utils/helpers/';
 
 export function UpNextLoaderView(nextItemData) {
   var timerTimeout;
@@ -39,7 +40,7 @@ export function UpNextLoaderView(nextItemData) {
   domElems.nextMediaTitle.setAttribute('class', 'next-media-title');
   domElems.nextMediaAuthor.setAttribute('class', 'next-media-author');
 
-  domElems.upNextLabel.innerHTML = 'Up Next';
+  domElems.upNextLabel.innerHTML = translateString('Up Next');
   domElems.nextMediaTitle.innerHTML = nextItemData.title;
   domElems.nextMediaAuthor.innerHTML = nextItemData.author_name;
 

frontend/src/static/js/utils/contexts/HeaderContext.js

@@ -1,5 +1,6 @@
 import React, { createContext } from 'react';
 import { config as mediacmsConfig } from '../settings/config.js';
+import { translateString } from '../../utils/helpers/';
 
 const config = mediacmsConfig(window.MediaCMS);
 
@@ -17,7 +18,7 @@ function popupTopNavItems() {
       items.push({
         link: links.user.addMedia,
         icon: 'video_call',
-        text: 'Upload media',
+        text: translateString('Upload media'),
         itemAttr: {
           className: 'visible-only-in-small',
         },
@@ -27,7 +28,7 @@ function popupTopNavItems() {
         items.push({
           link: user.pages.media,
           icon: 'video_library',
-          text: 'My media',
+          text: translateString('My media'),
         });
       }
     }
@@ -35,7 +36,7 @@ function popupTopNavItems() {
     items.push({
       link: links.signout,
       icon: 'exit_to_app',
-      text: 'Sign out',
+      text: translateString('Sign out'),
     });
   }
 
@@ -64,7 +65,7 @@ function popupMiddleNavItems() {
         itemType: 'link',
         icon: 'login',
         iconPos: 'left',
-        text: 'Sign in',
+        text: translateString('Sign in'),
         link: links.signin,
         linkAttr: {
           className: hasThemeSwitcher ? 'visible-only-in-small' : 'visible-only-in-extra-small',
@@ -77,7 +78,7 @@ function popupMiddleNavItems() {
         itemType: 'link',
         icon: 'person_add',
         iconPos: 'left',
-        text: 'Register',
+        text: translateString('Register'),
         link: links.register,
         linkAttr: {
           className: hasThemeSwitcher ? 'visible-only-in-small' : 'visible-only-in-extra-small',
@@ -88,14 +89,14 @@ function popupMiddleNavItems() {
     items.push({
       link: links.user.editProfile,
       icon: 'brush',
-      text: 'Edit profile',
+      text: translateString('Edit profile'),
     });
 
     if (user.can.changePassword) {
       items.push({
         link: links.changePassword,
         icon: 'lock',
-        text: 'Change password',
+        text: translateString('Change password'),
       });
     }
   }

frontend/src/static/js/utils/helpers/index.js

@@ -12,3 +12,5 @@ export * from './propTypeFilters';
 export { default as publishedOnDate } from './publishedOnDate';
 export * from './quickSort';
 export * from './requests';
+export { translateString } from './translate';
+export { replaceString } from './replacementStrings';

frontend/src/static/js/utils/helpers/replacementStrings.js

@@ -0,0 +1,8 @@
+// check templates/config/installation/translations.html for more
+
+export function replaceString(string) {
+    for (const key in window.REPLACEMENTS) {
+        string = string.replace(key, window.REPLACEMENTS[key]);
+    }
+    return string;
+}

frontend/src/static/js/utils/helpers/translate.js

@@ -0,0 +1,9 @@
+// check templates/config/installation/translations.html for more
+
+export function translateString(string) {
+    if (window.TRANSLATION && window.TRANSLATION[string]) {
+        return window.TRANSLATION[string];
+    } else {
+        return string;
+    }
+}

frontend/src/static/js/utils/hooks/useItemListSync.js

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import { useItemList } from './useItemList';
+import { translateString } from '../../utils/helpers/';
 
 export function useItemListSync(props) {
   const itemsListRef = useRef(null);
@@ -32,7 +33,7 @@ export function useItemListSync(props) {
 
     return 1 > listHandler.totalPages() || listHandler.loadedAllItems() ? null : (
       <button className="load-more" onClick={onClickLoadMore}>
-        SHOW MORE
+        {translateString("SHOW MORE")}
       </button>
     );
   }

frontend/src/static/js/utils/hooks/useMediaItem.js

@@ -10,6 +10,7 @@ import {
   MediaItemEditLink,
 } from '../../components/list-item/includes/items';
 import { useItem } from './useItem';
+import { replaceString } from '../../utils/helpers/';
 
 export function itemClassname(defaultClassname, inheritedClassname, isActiveInPlaylistPlayback) {
   let classname = defaultClassname;
@@ -56,7 +57,7 @@ export function useMediaItem(props) {
       return null;
     }
 
-    const publishDate = format(new Date(props.publish_date));
+    const publishDate = replaceString(format(new Date(props.publish_date)));
     const publishDateTime =
       'string' === typeof props.publish_date
         ? Date.parse(props.publish_date)