Skip to content

Commit 53e9be1

Browse files
Mitix-EPIMitix-EPI
authored
Creating of Subtitles page (#9)
* feat(): add all languages used in google translate api * feat(subtitles): add subtitles page * fix(test): remove old & useless subtitles test
1 parent cee0f87 commit 53e9be1

File tree

3 files changed

+232
-30
lines changed

3 files changed

+232
-30
lines changed

‎src/Components/Language/LanguageData.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
export const languages = [
2+
{language: "Afrikaans" ,key: "af"},
3+
{language: "Albanian" ,key: "sq"},
4+
{language: "Amharic" ,key: "am"},
5+
{language: "Arabic" ,key: "ar"},
6+
{language: "Armenian" ,key: "hy"},
7+
{language: "Assamese" ,key: "as"},
8+
{language: "Aymara" ,key: "ay"},
9+
{language: "Azerbaijani" ,key: "az"},
10+
{language: "Bambara" ,key: "bm"},
11+
{language: "Basque" ,key: "eu"},
12+
{language: "Belarusian" ,key: "be"},
13+
{language: "Bengali" ,key: "bn"},
14+
{language: "Bhojpuri" ,key: "bho"},
15+
{language: "Bosnian" ,key: "bs"},
16+
{language: "Bulgarian" ,key: "bg"},
17+
{language: "Catalan" ,key: "ca"},
18+
{language: "Cebuano" ,key: "ceb"},
19+
{language: "Chinese (Simplified)" ,key: "zh-CN"},
20+
{language: "Chinese (Traditional)" ,key: "zh-TW"},
21+
{language: "Corsican" ,key: "co"},
22+
{language: "Croatian" ,key: "hr"},
23+
{language: "Czech" ,key: "cs"},
24+
{language: "Danish" ,key: "da"},
25+
{language: "Dhivehi" ,key: "dv"},
26+
{language: "Dogri" ,key: "doi"},
27+
{language: "Dutch" ,key: "nl"},
28+
{language: "English" ,key: "en"},
29+
{language: "Esperanto" ,key: "eo"},
30+
{language: "Estonian" ,key: "et"},
31+
{language: "Ewe" ,key: "ee"},
32+
{language: "Filipino (Tagalog)" ,key: "fil"},
33+
{language: "Finnish" ,key: "fi"},
34+
{language: "French" ,key: "fr"},
35+
{language: "Frisian" ,key: "fy"},
36+
{language: "Galician" ,key: "gl"},
37+
{language: "Georgian" ,key: "ka"},
38+
{language: "German" ,key: "de"},
39+
{language: "Greek" ,key: "el"},
40+
{language: "Guarani" ,key: "gn"},
41+
{language: "Gujarati" ,key: "gu"},
42+
{language: "Haitian Creole" ,key: "ht"},
43+
{language: "Hausa" ,key: "ha"},
44+
{language: "Hawaiian" ,key: "haw"},
45+
{language: "Hebrew" ,key: "he"},
46+
{language: "Hindi" ,key: "hi"},
47+
{language: "Hmong" ,key: "hmn"},
48+
{language: "Hungarian" ,key: "hu"},
49+
{language: "Icelandic" ,key: "is"},
50+
{language: "Igbo" ,key: "ig"},
51+
{language: "Ilocano" ,key: "ilo"},
52+
{language: "Indonesian" ,key: "id"},
53+
{language: "Irish" ,key: "ga"},
54+
{language: "Italian" ,key: "it"},
55+
{language: "Japanese" ,key: "ja"},
56+
{language: "Javanese" ,key: "jv"},
57+
{language: "Kannada" ,key: "kn"},
58+
{language: "Kazakh" ,key: "kk"},
59+
{language: "Khmer" ,key: "km"},
60+
{language: "Kinyarwanda" ,key: "rw"},
61+
{language: "Konkani" ,key: "gom"},
62+
{language: "Korean" ,key: "ko"},
63+
{language: "Krio" ,key: "kri"},
64+
{language: "Kurdish" ,key: "ku"},
65+
{language: "Kurdish (Sorani)" ,key: "ckb"},
66+
{language: "Kyrgyz" ,key: "ky"},
67+
{language: "Lao" ,key: "lo"},
68+
{language: "Latin" ,key: "la"},
69+
{language: "Latvian" ,key: "lv"},
70+
{language: "Lingala" ,key: "ln"},
71+
{language: "Lithuanian" ,key: "lt"},
72+
{language: "Luganda" ,key: "lg"},
73+
{language: "Luxembourgish" ,key: "lb"},
74+
{language: "Macedonian" ,key: "mk"},
75+
{language: "Maithili" ,key: "mai"},
76+
{language: "Malagasy" ,key: "mg"},
77+
{language: "Malay" ,key: "ms"},
78+
{language: "Malayalam" ,key: "ml"},
79+
{language: "Maltese" ,key: "mt"},
80+
{language: "Maori" ,key: "mi"},
81+
{language: "Marathi" ,key: "mr"},
82+
{language: "Meiteilon (Manipuri)" ,key: "mni-Mtei"},
83+
{language: "Mizo" ,key: "lus"},
84+
{language: "Mongolian" ,key: "mn"},
85+
{language: "Myanmar (Burmese)" ,key: "my"},
86+
{language: "Nepali" ,key: "ne"},
87+
{language: "Norwegian" ,key: "no"},
88+
{language: "Nyanja (Chichewa)" ,key: "ny"},
89+
{language: "Odia (Oriya)" ,key: "or"},
90+
{language: "Oromo" ,key: "om"},
91+
{language: "Pashto" ,key: "ps"},
92+
{language: "Persian" ,key: "fa"},
93+
{language: "Polish" ,key: "pl"},
94+
{language: "Portuguese (Portugal, Brazil)" ,key: "pt"},
95+
{language: "Punjabi" ,key: "pa"},
96+
{language: "Quechua" ,key: "qu"},
97+
{language: "Romanian" ,key: "ro"},
98+
{language: "Russian" ,key: "ru"},
99+
{language: "Samoan" ,key: "sm"},
100+
{language: "Sanskrit" ,key: "sa"},
101+
{language: "Scots Gaelic" ,key: "gd"},
102+
{language: "Sepedi" ,key: "nso"},
103+
{language: "Serbian" ,key: "sr"},
104+
{language: "Sesotho" ,key: "st"},
105+
{language: "Shona" ,key: "sn"},
106+
{language: "Sindhi" ,key: "sd"},
107+
{language: "Sinhala (Sinhalese)" ,key: "si"},
108+
{language: "Slovak" ,key: "sk"},
109+
{language: "Slovenian" ,key: "sl"},
110+
{language: "Somali" ,key: "so"},
111+
{language: "Spanish" ,key: "es"},
112+
{language: "Sundanese" ,key: "su"},
113+
{language: "Swahili" ,key: "sw"},
114+
{language: "Swedish" ,key: "sv"},
115+
{language: "Tagalog (Filipino)" ,key: "tl"},
116+
{language: "Tajik" ,key: "tg"},
117+
{language: "Tamil" ,key: "ta"},
118+
{language: "Tatar" ,key: "tt"},
119+
{language: "Telugu" ,key: "te"},
120+
{language: "Thai" ,key: "th"},
121+
{language: "Tigrinya" ,key: "ti"},
122+
{language: "Tsonga" ,key: "ts"},
123+
{language: "Turkish" ,key: "tr"},
124+
{language: "Turkmen" ,key: "tk"},
125+
{language: "Twi (Akan)" ,key: "ak"},
126+
{language: "Ukrainian" ,key: "uk"},
127+
{language: "Urdu" ,key: "ur"},
128+
{language: "Uyghur" ,key: "ug"},
129+
{language: "Uzbek" ,key: "uz"},
130+
{language: "Vietnamese" ,key: "vi"},
131+
{language: "Welsh" ,key: "cy"},
132+
{language: "Xhosa" ,key: "xh"},
133+
{language: "Yiddish" ,key: "yi"},
134+
{language: "Yoruba" ,key: "yo"},
135+
{language: "Zulu" ,key: "zu"},
136+
]

‎src/Components/Subtitles/Subtitles.tsx‎

Lines changed: 96 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,101 @@
1-
import React from 'react';
1+
import { Switch } from "@mui/material";
2+
import { Box } from "@mui/system";
3+
import React from "react";
4+
import CSS from 'csstype';
5+
import InputLabel from '@mui/material/InputLabel';
6+
import MenuItem from '@mui/material/MenuItem';
7+
import FormHelperText from '@mui/material/FormHelperText';
8+
import FormControl from '@mui/material/FormControl';
9+
import Select, { SelectChangeEvent } from '@mui/material/Select';
10+
import { languages } from "../Language/LanguageData";
11+
import Grid from '@mui/material/Grid';
12+
import { LocalStorage } from "../../LocalStorage/LocalStorage";
213

314
export const Subtitles = () => {
4-
return (
5-
<>
6-
<h1> Subtitles</h1>
7-
</>
8-
);
15+
16+
const boxStyles: CSS.Properties = {
17+
border: "solid",
18+
borderColor: "#FD7014",
19+
borderWidth: "4",
20+
paddingLeft: "3vw",
21+
paddingRight: "3vw",
22+
paddingTop: "2vh",
23+
paddingBottom: "2vh",
24+
backgroundColor: "#222831",
25+
borderRadius: "15px",
26+
alignItems: "center",
27+
cursor: "pointer",
28+
borderCollapse: "separate",
29+
borderSpacing: "0 0vh",
30+
marginBottom: "1vh",
31+
position: "relative",
32+
minWidth: "calc(40vw + 231px)",
33+
maxWidth: "calc(40vw + 231px)",
34+
lineHeight: 1.6,
35+
justifyContent: "center",
36+
};
37+
38+
const itemStyles: CSS.Properties = {
39+
padding: "25px !important",
40+
justifyContent: "center",
41+
alignItems: "center"
42+
};
43+
44+
const [subtitlesActivated, setSubtitlesActivated] = React.useState(LocalStorage.getItemObject("subtitlesActivated") || false);
45+
const [languageSelected, setLanguageSelected] = React.useState(LocalStorage.getItemObject("languageSelected") || "en");
46+
47+
const handleToggleChange = (event: SelectChangeEvent) => {
48+
LocalStorage.setItemObject("subtitlesActivated", !subtitlesActivated)
49+
setSubtitlesActivated(!subtitlesActivated);
50+
};
51+
52+
const handleSelectChange = (event: any) => {
53+
LocalStorage.setItemObject("languageSelected", event.target.value)
54+
setLanguageSelected(event.target.value);
55+
};
56+
57+
return (
58+
<>
59+
<Box style={boxStyles}>
60+
<Grid container spacing={1}>
61+
<Grid container item style={itemStyles}>
62+
<h1>Enable subtitles during the stream:</h1>
63+
<Switch
64+
checked={subtitlesActivated}
65+
color="warning"
66+
onChange={handleToggleChange}
67+
/>
68+
</Grid>
69+
70+
{
71+
subtitlesActivated === true ? (
72+
<Grid container item style={itemStyles}>
73+
74+
<FormControl sx={{ m: 1, minWidth: 120 }}>
75+
<InputLabel style={{ color: 'white' }} id="demo-simple-select-helper-label">Language</InputLabel>
76+
<Select
77+
style={{ color: 'white' }}
78+
labelId="demo-simple-select-helper-label"
79+
id="demo-simple-select-helper"
80+
value={languageSelected}
81+
label="Language"
82+
onChange={handleSelectChange}
83+
>
84+
{
85+
languages.map((l) => {
86+
return (<MenuItem key={l.key} value={l.key}>{l.language}- {l.key}</MenuItem>)
87+
})
88+
}
89+
</Select>
90+
<FormHelperText style={{ color: 'white' }}>Select language</FormHelperText>
91+
</FormControl>
92+
</Grid>
93+
) : (<></>)
94+
}
95+
</Grid>
96+
</Box>
97+
</>
98+
);
999
}
10100

11101
export default Subtitles;

‎src/Components/Testing/Subtitles.test.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

0 commit comments

Comments
 (0)