added language switch

web/src/App/Sidebar.jsx

@@ -8,22 +8,26 @@ import RemoveAll from 'components/RemoveAll'
 import SettingsDialog from 'components/Settings'
 import AboutDialog from 'components/About'
 import UploadDialog from 'components/Upload'
-import { CreditCard as CreditCardIcon, List as ListIcon } from '@material-ui/icons'
+import { CreditCard as CreditCardIcon, List as ListIcon, Language as LanguageIcon } from '@material-ui/icons'
 import List from '@material-ui/core/List'
 import CloseServer from 'components/CloseServer'
 import { useTranslation } from 'react-i18next'
+import useChangeLanguage from 'utils/useChangeLanguage'
 
 import { AppSidebarStyle } from './style'
 
 export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
+  const [currentLang, changeLang] = useChangeLanguage()
+
   const { t } = useTranslation()
+
   return (
     <AppSidebarStyle isDrawerOpen={isDrawerOpen}>
       <List>
         <AddDialogButton />
         <UploadDialog />
         <RemoveAll />
-        <ListItem button component='a' key={t('PlaylistAll')} target='_blank' href={playlistAllHost()}>
+        <ListItem button component='a' target='_blank' href={playlistAllHost()}>
           <ListItemIcon>
             <ListIcon />
           </ListItemIcon>
@@ -35,6 +39,14 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
 
       <List>
         <SettingsDialog />
+
+        <ListItem button onClick={() => (currentLang === 'en' ? changeLang('ru') : changeLang('en'))}>
+          <ListItemIcon>
+            <LanguageIcon />
+          </ListItemIcon>
+          <ListItemText primary={t('ChooseLanguage')} />
+        </ListItem>
+
         <AboutDialog />
         <CloseServer />
       </List>
@@ -42,7 +54,7 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
       <Divider />
 
       <List>
-        <ListItem button key='Donation' onClick={() => setIsDonationDialogOpen(true)}>
+        <ListItem button onClick={() => setIsDonationDialogOpen(true)}>
           <ListItemIcon>
             <CreditCardIcon />
           </ListItemIcon>

web/src/locales/en/translation.json

@@ -85,5 +85,6 @@
   "UPNP": "UPnP (Universal Plug and Play)",
   "UseDisk": "Use Disk",
   "UTP": "μTP (Micro Transport Protocol)",
-  "Viewed": "Viewed"
+  "Viewed": "Viewed",
+  "ChooseLanguage": "Russian"
 }

web/src/locales/ru/translation.json

@@ -85,5 +85,6 @@
   "UPNP": "UPnP (Universal Plug and Play)",
   "UseDisk": "Использовать кеш на диске",
   "UTP": "μTP (Micro Transport Protocol)",
-  "Viewed": "Просм."
+  "Viewed": "Просм.",
+  "ChooseLanguage": "Английский"
 }

web/src/utils/useChangeLanguage.js

@@ -0,0 +1,6 @@
+import { useTranslation } from 'react-i18next'
+
+export default () => {
+  const { i18n } = useTranslation()
+  return [i18n.language, lang => i18n.changeLanguage(lang)]
+}