156 languages

frontend/next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
     images: {
-        domains: ['46.109.36.103'],
+        domains: ['46.109.36.103', 'www.worldometers.info'],
     },
 };

frontend/pages/gallery/[hash].tsx

@@ -3,6 +3,7 @@ import Head from 'next/head';
 import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import SingleFileContainer from '../../src/components/gallery/SingleFileContainer';
+import LanguageSelector from '../../src/components/language/LanguageSelector';
 import CheckAuth from '../../src/hooks/CheckAuth';
 import { FileInterface } from '../../src/interfaces/file';
 import { AppInfo, selectApp, setFiles } from '../../src/redux/slices/appSlice';
@@ -69,6 +70,8 @@ export default function Home(
             <SingleFileContainer />
 
             <CheckAuth />
+
+            <LanguageSelector />
         </div>
     );
 }

frontend/pages/gallery/index.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import GalleryContainer from '../../src/components/gallery/GalleryContainer';
+import LanguageSelector from '../../src/components/language/LanguageSelector';
 import CheckAuth from '../../src/hooks/CheckAuth';
 
 export default function Gallery() {
@@ -16,6 +17,8 @@ export default function Gallery() {
             <GalleryContainer />
 
             <CheckAuth />
+
+            <LanguageSelector />
         </div>
     );
 }

frontend/pages/index.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import HomePage from '../src/components/home/HomePage';
+import LanguageSelector from '../src/components/language/LanguageSelector';
 import CheckAuth from '../src/hooks/CheckAuth';
 
 export default function Home() {
@@ -30,6 +31,8 @@ export default function Home() {
             <HomePage />
 
             <CheckAuth />
+
+            <LanguageSelector />
         </div>
     );
 }

frontend/pages/my-files/[hash].tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import SingleFileContainer from '../../src/components/gallery/SingleFileContainer';
+import LanguageSelector from '../../src/components/language/LanguageSelector';
 import CheckAuth from '../../src/hooks/CheckAuth';
 
 export default function Home() {
@@ -20,6 +21,8 @@ export default function Home() {
             <SingleFileContainer />
 
             <CheckAuth />
+
+            <LanguageSelector />
         </div>
     );
 }

frontend/pages/my-files/index.tsx

@@ -1,5 +1,6 @@
 import Head from 'next/head';
 import GalleryContainer from '../../src/components/gallery/GalleryContainer';
+import LanguageSelector from '../../src/components/language/LanguageSelector';
 import CheckAuth from '../../src/hooks/CheckAuth';
 
 export default function Home() {
@@ -16,6 +17,8 @@ export default function Home() {
             <GalleryContainer />
 
             <CheckAuth />
+
+            <LanguageSelector />
         </div>
     );
 }

frontend/src/components/gallery/GalleryImages.tsx

@@ -6,6 +6,7 @@ import {
     selectApp,
     setSortOptions,
 } from '../../redux/slices/appSlice';
+import { LanguageInfo, selectLanguage } from '../../redux/slices/languageSlice';
 import { selectUser, UserInfo } from '../../redux/slices/userSlice';
 import { getAllFiles } from '../../requests/adminRequests';
 import GalleryImage from './GalleryImage';
@@ -16,6 +17,7 @@ function GalleryImages() {
 
     const appInfo: AppInfo = useSelector(selectApp);
     const userInfo: UserInfo = useSelector(selectUser);
+    const languageInfo: LanguageInfo = useSelector(selectLanguage);
 
     useEffect(() => {
         if (!appInfo.files) {
@@ -73,7 +75,7 @@ function GalleryImages() {
                         htmlFor="non_image_files"
                         className="text-white ml-1"
                     >
-                        Show non image files
+                        {languageInfo.text.gallery.showNonImageFiles}
                     </label>
                 </div>
             </div>
@@ -105,7 +107,7 @@ function GalleryImages() {
             appInfo.files &&
             appInfo.files.length !== appInfo.previewIdx + 1 ? (
                 <div className="flex w-full items-center justify-start py-2 border-b-2 border-dashed border-white">
-                    <strong className="text-white">Seen:</strong>
+                    <strong className="text-white">{languageInfo.text.gallery.seen}:</strong>
                 </div>
             ) : null}
 

frontend/src/components/gallery/SingleFileContainer.tsx

@@ -10,6 +10,7 @@ import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { FileInterface } from '../../interfaces/file';
 import { AppInfo, selectApp } from '../../redux/slices/appSlice';
+import { LanguageInfo, selectLanguage } from '../../redux/slices/languageSlice';
 import { BASE_URL } from '../../requests/routes';
 import { getFileFromHash } from '../../utils/getFileFromHash';
 import { AdIndicator } from '../ads/AdIndicator';
@@ -22,6 +23,7 @@ function SingleFileContainer() {
     const { hash } = router.query;
 
     const appInfo: AppInfo = useSelector(selectApp);
+    const languageInfo: LanguageInfo = useSelector(selectLanguage);
 
     const [file, setFile] = useState<FileInterface | undefined>(undefined);
     const [copied, setCopied] = useState(false);
@@ -103,7 +105,7 @@ function SingleFileContainer() {
                     {file.is_ad ? (
                         <div className="flex flex-col items-center justify-center">
                             <strong className="text-white mt-2 mb-1 text-lg text-center">
-                                Contact advertiser:
+                                {languageInfo.text.gallery.contact}
                             </strong>
 
                             <div className="flex flex-col sm:flex-row items-center justify-center w-full max-w-[800px]">
@@ -147,7 +149,9 @@ function SingleFileContainer() {
                         >
                             <DownloadIcon className="text-white h-4 mr-1" />
 
-                            <p className="text-white">Download</p>
+                            <p className="text-white">
+                                {languageInfo.text.gallery.download}
+                            </p>
                         </button>
 
                         <button
@@ -158,7 +162,9 @@ function SingleFileContainer() {
                         >
                             <LinkIcon className="text-white h-4 mr-1" />
 
-                            <p className="text-white">Copy link</p>
+                            <p className="text-white">
+                                {languageInfo.text.gallery.copyLink}
+                            </p>
                         </button>
                     </div>
                 </section>

frontend/src/components/home/upload/UploadForm.tsx

@@ -9,6 +9,10 @@ import {
     setNotification,
 } from '../../../redux/slices/notificationSlice';
 import Spinner from '../../notifications/Loading';
+import {
+    LanguageInfo,
+    selectLanguage,
+} from '../../../redux/slices/languageSlice';
 
 function isFileImage(file: File) {
     return file && file['type'].split('/')[0] === 'image';
@@ -18,6 +22,7 @@ function UploadForm() {
     const dispatch = useDispatch();
 
     const notificationInfo: NotificationInfo = useSelector(selectNotification);
+    const languageInfo: LanguageInfo = useSelector(selectLanguage);
 
     const [file, setFile] = useState<File | null>(null);
     const [filePreview, setFilePreview] = useState('');
@@ -145,21 +150,25 @@ function UploadForm() {
 
                 <label
                     htmlFor="selectFile"
-                    className="cursor-pointer w-32 h-10 flex items-center justify-center text-center bg-white text-black font-mono"
+                    className="cursor-pointer w-40 h-10 flex items-center justify-center text-center bg-white text-black font-mono"
                 >
-                    {file && !hash ? 'change' : 'select'} file
+                    {file && !hash
+                        ? languageInfo.text.home.changeFile
+                        : languageInfo.text.home.selectFile}
                 </label>
 
                 <button
                     type="submit"
                     onClick={handleUpload}
-                    className={`bg-gray-900 text-white px-10 h-10 ml-2 flex-1 font-mono flex items-center justify-center ${
+                    className={`bg-gray-900 text-white w-40 h-10 ml-2 flex-1 font-mono flex items-center justify-center ${
                         !file ? 'opacity-75' : ''
                     }`}
                     disabled={!file}
                 >
                     {!loading ? (
-                        <p className="text-white">upload</p>
+                        <p className="text-white">
+                            {languageInfo.text.home.upload}
+                        </p>
                     ) : (
                         <div className="w-8 h-8 flex items-center justify-center">
                             <Spinner />
@@ -181,7 +190,9 @@ function UploadForm() {
                     <div className="flex items-center justify-center">
                         <p className="text-white mr-1">{file.name}</p>
 
-                        <p className="text-white">is ready for upload</p>
+                        <p className="text-white">
+                            {languageInfo.text.home.ready}
+                        </p>
                     </div>
                 </div>
             ) : hash ? (
@@ -190,7 +201,7 @@ function UploadForm() {
                         className="w-[250px] h-12 mt-12 text-xl bg-white font-mono "
                         onClick={openUrl}
                     >
-                        open
+                        {languageInfo.text.global.open}
                     </button>
 
                     <button
@@ -208,13 +219,13 @@ function UploadForm() {
 
                     {savedToClipboard ? (
                         <small className="text-emerald-500 text-center mt-2 font-mono">
-                            copied to clipboard
+                            {languageInfo.text.home.copied}
                         </small>
                     ) : null}
                 </>
             ) : (
                 <small className="text-gray-100 mt-2">
-                    (max file size 1mb)
+                    {languageInfo.text.home.maxSize}
                 </small>
             )}
         </form>

frontend/src/components/language/LanguageSelector.tsx

@@ -0,0 +1,107 @@
+import { ChevronDownIcon } from '@heroicons/react/solid';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { SupportedLang, supportedLanguages } from '../../languages/text';
+import {
+    changeLanguage,
+    LanguageInfo,
+    selectLanguage,
+} from '../../redux/slices/languageSlice';
+
+function LanguageSelector() {
+    const dispatch = useDispatch();
+
+    const languageInfo: LanguageInfo = useSelector(selectLanguage);
+
+    const [activeLang, setActiveLang] = useState<SupportedLang | undefined>(
+        undefined
+    );
+    const [langsOpen, setLangsOpen] = useState<boolean>(false);
+
+    useEffect(() => {
+        let query: string = languageInfo.activeLang;
+
+        const selected_lang = localStorage.getItem('selected_lang');
+        if (selected_lang) {
+            query = selected_lang;
+
+            dispatch(changeLanguage(selected_lang));
+        }
+
+        const activeLanguage = supportedLanguages.find(
+            (lang) => lang.lang === query
+        );
+        if (activeLanguage) {
+            setActiveLang(activeLanguage);
+        }
+    }, []);
+
+    const handleChange = (lang: SupportedLang['lang']) => {
+        localStorage.setItem('selected_lang', lang);
+        dispatch(changeLanguage(lang));
+
+        const activeLanguage = supportedLanguages.find(
+            (la) => la.lang === lang
+        );
+        if (activeLanguage) {
+            setActiveLang(activeLanguage);
+        }
+        setLangsOpen(false);
+    };
+
+    if (!activeLang) {
+        return null;
+    }
+
+    return (
+        <div className="absolute top-4 right-4 flex flex-col items-start justify-start">
+            <button
+                className="w-20 h-8 flex items-center justify-center border-2 border-white rounded-md bg-transparent_dark"
+                onClick={() => setLangsOpen(!langsOpen)}
+            >
+                <div className="flex h-full items-center justify-center">
+                    <Image src={activeLang.flag} width={20} height={18} />
+
+                    <strong className="text-white ml-1">
+                        {activeLang.lang}
+                    </strong>
+                </div>
+
+                <ChevronDownIcon
+                    className={`text-white w-4 duration-300 ${
+                        langsOpen ? 'rotate-180' : '-rotate-0'
+                    }`}
+                />
+            </button>
+
+            <div
+                className={`w-full flex-col bg-transparent_dark ${
+                    langsOpen ? 'flex' : 'hidden'
+                }`}
+            >
+                {supportedLanguages.map((lang, i) => {
+                    if (lang.short === activeLang.short) {
+                        return null;
+                    }
+
+                    return (
+                        <button
+                            className="flex w-full items-center justify-center py-1"
+                            onClick={() => handleChange(lang.lang)}
+                            key={i}
+                        >
+                            <Image src={lang.flag} width={20} height={18} />
+
+                            <strong className="text-white ml-1">
+                                {lang.lang}
+                            </strong>
+                        </button>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+export default LanguageSelector;