diff --git a/editor-settings.toml b/editor-settings.toml index 769bae6b1..7f9bc0c8e 100644 --- a/editor-settings.toml +++ b/editor-settings.toml @@ -81,6 +81,14 @@ "captions/source+en" = "English" "captions/source+es" = "Spanish" +[subtitles.icons] +# A list of icons to be displayed for languages defined above. +# Values are strings but should preferably be Unicode icons. +# These are optional and you can also choose to have no icons. +"captions/source+de" = "πŸ‡©πŸ‡ͺ" +"captions/source+en" = "πŸ‡ΊπŸ‡Έ" +"captions/source+es" = "πŸ‡ͺπŸ‡Έ" + [subtitles.defaultVideoFlavor] # Specify the default video in the subtitle video player by flavor # If not specified, the editor will decide on a default by itself diff --git a/public/editor-settings.toml b/public/editor-settings.toml index 9b3fb2847..1aa2c0ae0 100644 --- a/public/editor-settings.toml +++ b/public/editor-settings.toml @@ -32,6 +32,12 @@ mainFlavor = "captions" "captions/source+de" = "Deutsch" "captions/source+en" = "English" "captions/source+es" = "Spanish" +"captions/source" = "Generic" + +[subtitles.icons] +"captions/source+de" = "πŸ‡©πŸ‡ͺ" +"captions/source+en" = "πŸ‡ΊπŸ‡Έ" +"captions/source+es" = "πŸ‡ͺπŸ‡Έ" [thumbnail] show = true diff --git a/src/config.ts b/src/config.ts index 6303cd79c..0b83bef2e 100644 --- a/src/config.ts +++ b/src/config.ts @@ -54,6 +54,7 @@ interface iSettings { show: boolean, mainFlavor: string, languages: { [key: string]: string } | undefined, + icons: { [key: string]: string } | undefined, defaultVideoFlavor: Flavor | undefined, } } @@ -86,7 +87,8 @@ var defaultSettings: iSettings = { subtitles: { show: false, mainFlavor: "captions", - languages: undefined, + languages: {}, + icons: undefined, defaultVideoFlavor: undefined, } } @@ -360,6 +362,7 @@ const SCHEMA = { show: types.boolean, mainFlavor: types.string, languages: types.map, + icons: types.map, defaultVideoFlavor: types.map, }, thumbnail: { diff --git a/src/main/SubtitleSelect.tsx b/src/main/SubtitleSelect.tsx index 6c0a380c8..78f7aaccb 100644 --- a/src/main/SubtitleSelect.tsx +++ b/src/main/SubtitleSelect.tsx @@ -62,11 +62,6 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; setCanBeAddedFlavors(tempCanBeAddedFlavors) }, [captionTracks, subtitles]) - // TODO: Make this function more robust - const parseCountryCode = (parseString: string) => { - return parseString.split("+").pop()?.slice(0, 2); - } - const subtitleSelectStyle = css({ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(20em, 1fr))', @@ -80,10 +75,11 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; } for (let subFlavor of displayFlavors) { + const icon = ((settings.subtitles || {}).icons || {})[subFlavor.subFlavor]; buttons.push( @@ -106,34 +102,20 @@ import { createTheme, ThemeProvider } from '@mui/material/styles'; */ const SubtitleSelectButton: React.FC<{ title: string, - iconIdentifier: string | undefined, + icon: string | undefined, flavor: string, }> = ({ title, - iconIdentifier, + icon, flavor }) => { const { t } = useTranslation(); const theme = useSelector(selectTheme) const dispatch = useDispatch() - /** - * Quick and dirty function to get a flag unicode character by country code - * @param countryCode - * @returns - */ - function getFlagEmoji(countryCode: string) { - var flag = countryCode.toUpperCase().replace(/./g, char => - String.fromCodePoint(127397 + char.charCodeAt(0)) - ); - const regexEscape = /[\u{1F1E6}-\u{1F1FF}]/u; - if (regexEscape.test(flag)) { - return flag - } - } - const flagStyle = css({ fontSize: '2em', + overflow: 'hidden' }); const titleStyle = css({ @@ -156,7 +138,7 @@ const SubtitleSelectButton: React.FC<{ dispatch(setIsDisplayEditView(true)) dispatch(setSelectedSubtitleFlavor(flavor)) }}}> - {iconIdentifier && getFlagEmoji(iconIdentifier) &&
{getFlagEmoji(iconIdentifier)}
} + {icon &&
{icon}
}
{title}
);