pjandro/OmniRoute
1
0
Fork 0
mirror of https://github.com/diegosouzapw/OmniRoute.git synced 2026-07-26 09:52:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): render country flags via flagcdn SVGs for Windows compatibility (#3814)

Browse Source 
Windows does not render regional-indicator flag emojis. The LanguageSelector now maps
a flag emoji's regional-indicator code points to an ISO country code and renders the
flag from flagcdn, falling back to the raw emoji span when the glyph is not a
two-letter regional pair or the image fails to load (onError).

Integrated into release/v3.8.25.

Co-authored-by: diegosouzapw <diegosouza.pw@gmail.com>
This commit is contained in:
Ramel Tecnologia - Rafa Martins
2026-06-14 09:44:34 -03:00
committed by GitHub
parent 5ace548bc5
commit ef07a19de6
1 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/shared/components/LanguageSelector.tsx
View File

@@ -16,6 +16,31 @@ function persistLocale(code: Locale) {
}
}
function CountryFlag({ emoji, alt }: { emoji: string; alt: string }) {
const [error, setError] = useState(false);
if (!emoji) return null;
const chars = [...emoji];
const codePoints = chars.map((c) => c.codePointAt(0) || 0);
const isRegional = codePoints.every((cp) => cp >= 127462 && cp <= 127487);
if (!isRegional || codePoints.length !== 2 || error) {
return <span className="text-base leading-none shrink-0">{emoji}</span>;
}
const countryCode = codePoints.map((cp) => String.fromCharCode(cp - 127462 + 97)).join("");
return (
<img
src={`https://flagcdn.com/w40/${countryCode}.png`}
className="w-4.5 h-3 object-cover rounded-2xs shrink-0 shadow-2xs border border-black/5 dark:border-white/5"
alt={alt}
onError={() => setError(true)}
/>
);
}
export default function LanguageSelector() {
const locale = useLocale();
const router = useRouter();
@@ -54,7 +79,7 @@ export default function LanguageSelector() {
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm font-medium text-text-main hover:bg-surface-hover transition-all border border-transparent hover:border-border"
title={currentLang.name}
>
<span className="text-base leading-none">{currentLang.flag}</span>
<CountryFlag emoji={currentLang.flag} alt={currentLang.name} />
<span className="text-xs font-semibold tracking-wide">{currentLang.label}</span>
<span
className={`material-symbols-outlined text-[14px] text-text-muted transition-transform ${open ? "rotate-180" : ""}`}
@@ -76,7 +101,7 @@ export default function LanguageSelector() {
: "text-text-main hover:bg-surface-hover"
}`}
>
<span className="text-base leading-none">{lang.flag}</span>
<CountryFlag emoji={lang.flag} alt={lang.name} />
<span className="flex-1 text-start">{lang.name}</span>
{lang.code === locale && (
<span className="material-symbols-outlined text-[16px] text-primary">check</span>