@panoramax/web-viewer 3.1.0 → 3.1.1-develop-5214442e

package/docs/05_Compatibility.md

@@ -83,3 +83,17 @@ A supplementary layer _grid_ can be made available for low-zoom overview:
 
 - Available on zoom levels < 6
 - Available properties: `id` (grid cell ID), `nb_pictures` (amount of pictures), `coef` (value from 0 to 1, relative quantity of available pictures)
+
+### Labels translation
+
+If your vector tiles support multiple languages, you can set in your `style.json` the list of supported languages :
+
+```json
+{
+    "metadata": {
+        "panoramax:locales": ["fr", "en", "latin"]
+    }
+}
+```
+
+The viewer will try to find the best matching `name:LANG` property according to user browser settings.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panoramax/web-viewer",
-  "version": "3.1.0",
+  "version": "3.1.1-develop-5214442e",
   "description": "Panoramax web viewer for geolocated pictures",
   "main": "build/index.js",
   "author": "Panoramax team",
@@ -90,14 +90,14 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@photo-sphere-viewer/core": "5.10.1",
-    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.10.1",
-    "@photo-sphere-viewer/gallery-plugin": "5.10.1",
-    "@photo-sphere-viewer/markers-plugin": "5.10.1",
-    "@photo-sphere-viewer/virtual-tour-plugin": "5.10.1",
+    "@photo-sphere-viewer/core": "5.11.0-beta.1",
+    "@photo-sphere-viewer/equirectangular-tiles-adapter": "5.11.0-beta.1",
+    "@photo-sphere-viewer/gallery-plugin": "5.11.0-beta.1",
+    "@photo-sphere-viewer/markers-plugin": "5.11.0-beta.1",
+    "@photo-sphere-viewer/virtual-tour-plugin": "5.11.0-beta.1",
     "documentation": "^14.0.1",
-    "maplibre-gl": "^3.6.2",
-    "pmtiles": "^2.11.0"
+    "maplibre-gl": "^4.7.1",
+    "pmtiles": "^3.2.0"
   },
   "eslintConfig": {
     "env": {

package/src/components/Map.js

@@ -96,6 +96,13 @@ export default class Map extends maplibregl.Map {
 		// Parent selection
 		this._parent.addEventListener("select", this.reloadLayersStyles.bind(this));
 
+		// Timeout for initial loading
+		setTimeout(() => {
+			if(!this.loaded() && this._parent._loader.isVisible()) {
+				this._parent._loader.dismiss({}, this._parent._t.map.slow_loading, () => {});
+			}
+		}, 15000);
+
 		this.on("load", async () => {
 			await this.setVisibleUsers(this._parent._options.users);
 			this.reloadLayersStyles();
@@ -291,10 +298,10 @@ export default class Map extends maplibregl.Map {
 	filterUserLayersContent(dataType, filter) {
 		[...this._userLayers].forEach(l => {
 			this.setFilter(getUserLayerId(l, dataType), filter);
-			if(dataType === "sequences") {
+			if(dataType === "sequences" && this.getLayer(getUserLayerId(l, "sequences_plus"))) {
 				this.setFilter(getUserLayerId(l, "sequences_plus"), filter);
 			}
-			if(dataType === "pictures") {
+			if(dataType === "pictures" && this.getLayer(getUserLayerId(l, "pictures_symbols"))) {
 				this.setFilter(getUserLayerId(l, "pictures_symbols"), filter);
 			}
 		});
@@ -362,7 +369,7 @@ export default class Map extends maplibregl.Map {
 			Object.entries(style.sources).forEach(([sId, s]) => this.addSource(sId, s));
 			style.layers = style.layers || [];
 			const layers = style.layers.concat(getMissingLayerStyles(style.sources, style.layers));
-			layers.forEach(l => this.addLayer(l, firstLabelLayerId?.id));
+			layers.filter(l => Object.keys(l).length > 0).forEach(l => this.addLayer(l, firstLabelLayerId?.id));
 		}
 
 		// Map interaction events
@@ -609,7 +616,7 @@ export default class Map extends maplibregl.Map {
 				if(thumbUrl) {
 					let content = document.createElement("img");
 					content.classList.add("gvs-map-thumb");
-					content.alt = this._parent._t.thumbnail;
+					content.alt = this._parent._t.map.thumbnail;
 					let img = new Image();
 					img.src = thumbUrl;
 
@@ -634,7 +641,7 @@ export default class Map extends maplibregl.Map {
 					}
 				}
 				else {
-					this._picPopup.setHTML(`<i>${this._parent._t.no_thumbnail}</i>`);
+					this._picPopup.setHTML(`<i>${this._parent._t.map.no_thumbnail}</i>`);
 				}
 			}
 		};

package/src/components/Photo.js

@@ -194,7 +194,8 @@ export default class Photo extends PSViewer {
 						rotation: following && sameSequence && animated,
 						rotateTo: this.getPosition()
 					};
-					nodeTransition.rotateTo.yaw += fromNodeHeading - toNodeHeading;
+					// Constant direction related to North
+					// nodeTransition.rotateTo.yaw += fromNodeHeading - toNodeHeading;
 				}
 			}
 		}

package/src/translations/en.json

@@ -161,6 +161,7 @@
         "loading": "Loading…",
         "thumbnail": "Thumbnail of hovered picture",
         "no_thumbnail": "No thumbnail",
-        "not_public": "Not publicly visible"
+        "not_public": "Not publicly visible",
+        "slow_loading": "Map is slow to load and could appear broken"
     }
 }

package/src/translations/fr.json

@@ -161,6 +161,7 @@
         "loading": "Chargement…",
         "thumbnail": "Miniature de la photo survolée",
         "no_thumbnail": "Pas de miniature",
-        "not_public": "Masqué au public"
+        "not_public": "Masqué au public",
+        "slow_loading": "La carte est longue à charger et pourrait apparaître cassée"
     }
 }

package/src/translations/zh_Hant.json

@@ -120,7 +120,17 @@
         "show_psv": "顯示相片檢視器",
         "zoom": "縮放",
         "zoomIn": "拉近",
-        "zoomOut": "拉遠"
+        "zoomOut": "拉遠",
+        "report_submit": "送出",
+        "report_email": "您的 email",
+        "report_nature_label": "問題的類型",
+        "report_nature": {
+            "": "選擇問題的類型…"
+        },
+        "share_embed_docs": "深入了解嵌入設定值",
+        "error_retry": "請稍後再試",
+        "error_click": "點擊以繼續",
+        "legend_title": "顯示相片的詳細資料"
     },
     "map": {
         "loading": "正在載入…",
@@ -132,5 +142,9 @@
         "ctrlZoom": "使用 CTRL + 滑鼠滾輪縮放圖片",
         "loadError": "無法載入全景圖",
         "twoFingers": "使用雙指移動"
+    },
+    "maplibre": {
+        "GeolocateControl.FindMyLocation": "尋找我的位置",
+        "GeolocateControl.LocationNotAvailable": "無法使用位置資訊"
     }
 }

package/src/utils/API.js

@@ -285,7 +285,9 @@ export default class API {
 	 * @returns {object} The fetch options
 	 */
 	_getFetchOptions() {
-		return Object.assign({}, this._fetchOpts);
+		return Object.assign({
+			signal: AbortSignal.timeout(15000)
+		}, this._fetchOpts);
 	}
 
 	/**
@@ -295,8 +297,10 @@ export default class API {
 	 * @returns {function} The RequestTransformFunction
 	 */
 	_getMapRequestTransform() {
+		const fetchOpts = this._getFetchOptions();
+		delete fetchOpts.signal;
 		// Only if tiles endpoint is enabled and fetch options set
-		if(Object.keys(this._getFetchOptions()).length > 0) {
+		if(Object.keys(fetchOpts).length > 0) {
 			return (url) => {
 				// As MapLibre will use this function for all its calls
 				// We must make sure fetch options are sent only for
@@ -304,7 +308,7 @@ export default class API {
 				if(url.startsWith(this._endpoint)) {
 					return {
 						url,
-						...this._getFetchOptions()
+						...fetchOpts
 					};
 				}
 			};

package/src/utils/I18n.js

@@ -10,7 +10,13 @@ const TRANSLATIONS = {
 	"de": T_de, "en": T_en, "es": T_es, "fr": T_fr, "hu": T_hu, "zh_Hant": T_zh_Hant,
 };
 
-const autoDetectLocale = () => {
+/**
+ * Find best matching language regarding of list of supported languages and browser accepted languages
+ * @param {str[]} supportedTranslations List of supported languages
+ * @param {str} fallback The fallback language
+ * @returns The best matching language
+ */
+export function autoDetectLocale(supportedTranslations, fallback) { // eslint-ignore import/no-unused-modules
 	for (const navigatorLang of window.navigator.languages) {
 		let language = navigatorLang;
 		// Convert browser code to weblate code
@@ -30,13 +36,14 @@ const autoDetectLocale = () => {
 			}
 			break;
 		}
-		const pair = Object.entries(TRANSLATIONS).find((pair) => pair[0] === language);
+		const pair = supportedTranslations.find((pair) => pair === language);
 		if (pair) {
-			return pair[0];
+			return pair;
 		}
 	}
-	return FALLBACK_LOCALE;
-};
+	return fallback;
+}
+
 /**
  * Get text labels translations in given language
  *
@@ -50,7 +57,7 @@ export function getTranslations(lang = "") {
 	
 	// No specific lang set -> use browser lang
 	if(!lang) {
-		lang = autoDetectLocale();
+		lang = autoDetectLocale(Object.keys(TRANSLATIONS), FALLBACK_LOCALE);
 	}
 
 	// Lang exists -> send it

package/src/utils/Map.js

@@ -2,6 +2,7 @@
 import maplibregl from "!maplibre-gl";
 import LoaderImg from "../img/marker.svg";
 import { COLORS } from "./Utils";
+import { autoDetectLocale } from "./I18n";
 
 export const DEFAULT_TILES = "https://panoramax.openstreetmap.fr/pmtiles/basic.json";
 export const RASTER_LAYER_ID = "gvs-aerial";
@@ -152,7 +153,47 @@ export function combineStyles(parent, options) {
 			}
 		}
 	});
-	
+
+	// TODO : remove override once available in default Panoramax style
+	if(!style.metadata["panoramax:locales"]) {
+		style.metadata["panoramax:locales"] = ["fr", "en", "de", "es", "ru", "pt", "zh", "hi", "latin"];
+	}
+
+	// Override labels to use appropriate language
+	if(style.metadata["panoramax:locales"]) {
+		const prefLang = autoDetectLocale(style.metadata["panoramax:locales"], "latin");
+		style.layers.forEach(l => {
+			if(isLabelLayer(l) && l.layout["text-field"].includes("name:latin")) {
+				l.layout["text-field"] = [
+					"coalesce",
+					["get", `name:${prefLang}`],
+					["get", "name:latin"],
+					["get", "name"]
+				];
+			}
+		});
+	}
+
+	// Fix for capital cities
+	const citiesLayer = style.layers.find(l => l.id == "place_label_city");
+	let capitalLayer = style.layers.find(l => l.id == "place_label_capital");
+	if(citiesLayer && !capitalLayer) {
+		// Create capital layer from original city style
+		capitalLayer = JSON.parse(JSON.stringify(citiesLayer));
+		capitalLayer.id = "place_label_capital";
+		capitalLayer.filter.push(["<=", "capital", 2]);
+
+		// Edit original city to make it less import
+		citiesLayer.filter.push([">", "capital", 2]);
+		citiesLayer.paint = {
+			"text-color": "hsl(0,0%,15%)",
+			"text-halo-blur": 0.5,
+			"text-halo-color": "hsl(0,0%,100%)",
+			"text-halo-width": 0.8,
+		};
+		style.layers.push(capitalLayer);
+	}
+
 	return style;
 }
 

package/src/utils/Utils.js

@@ -338,7 +338,7 @@ export function apiFeatureToPSVNode(f, t, fastInternet=false, customLinkFilter=n
 	let panorama;
 
 	// Cropped panorama
-	if(Object.keys(croppedPanoData).length > 0) {
+	if(!tileUrl && Object.keys(croppedPanoData).length > 0) {
 		panorama = {
 			baseUrl: fastInternet ? hdUrl : baseUrl,
 			origBaseUrl: fastInternet ? hdUrl : baseUrl,

package/src/viewer/URLHash.js

@@ -57,11 +57,11 @@ export default class URLHash extends EventTarget {
 	}
 
 	/**
-	 * Get the hash string with current map/psv parameters
-	 * @return {string} The hash, starting with #
+	 * Compute next hash parts
+	 * @returns {object} Hash parameters
+	 * @private
 	 */
-	getHashString() {
-		let hash = "";
+	_getHashParts() {
 		let hashParts = {};
 
 		if(typeof this._viewer.psv.getTransitionDuration() == "number") {
@@ -103,8 +103,17 @@ export default class URLHash extends EventTarget {
 		else {
 			hashParts.map = "none";
 		}
+		return hashParts;
+	}
+
+	/**
+	 * Get the hash string with current map/psv parameters
+	 * @return {string} The hash, starting with #
+	 */
+	getHashString() {
+		let hash = "";
 
-		Object.entries(hashParts)
+		Object.entries(this._getHashParts())
 			.sort((a,b) => a[0].localeCompare(b[0]))
 			.forEach(entry => {
 				let [ hashName, value ] = entry;
@@ -144,6 +153,63 @@ export default class URLHash extends EventTarget {
 			.forEach(part => {
 				keyvals[part[0]] = part[1];
 			});
+		
+		// If hash is compressed
+		if(keyvals.s) {
+			const shortVals = Object.fromEntries(
+				keyvals.s
+					.split("|")
+					.map(kv => [kv[0], kv.substring(1)])
+			);
+
+			keyvals = {};
+
+			// Used letters: b c d e f k m n p s t u v
+			// Focus
+			if(shortVals.f === "m") { keyvals.focus = "map"; }
+			else if(shortVals.f === "p") { keyvals.focus = "pic"; }
+			else if(shortVals.f === "t") { keyvals.focus = "meta"; }
+
+			// Speed
+			if(shortVals.s !== "") { keyvals.speed = parseFloat(shortVals.s) * 100; }
+
+			// Nav
+			if(shortVals.n === "a") { keyvals.nav = "any"; }
+			else if(shortVals.n === "s") { keyvals.nav = "seq"; }
+			if(shortVals.n === "n") { keyvals.nav = "none"; }
+
+			// Pic
+			if(shortVals.p !== "") { keyvals.pic = shortVals.p; }
+
+			// XYZ
+			if(shortVals.c !== "") { keyvals.xyz = shortVals.c; }
+
+			// Map
+			if(shortVals.m !== "") { keyvals.map = shortVals.m; }
+
+			// Date
+			if(shortVals.d !== "") { keyvals.date_from = shortVals.d; }
+			if(shortVals.e !== "") { keyvals.date_to = shortVals.e; }
+
+			// Pic type
+			if(shortVals.t === "f") { keyvals.pic_type = "flat"; }
+			else if(shortVals.t === "e") { keyvals.pic_type = "equirectangular"; }
+
+			// Camera
+			if(shortVals.k !== "") { keyvals.camera = shortVals.k; }
+
+			// Theme
+			if(shortVals.v === "d") { keyvals.theme = "default"; }
+			else if(shortVals.v === "a") { keyvals.theme = "age"; }
+			else if(shortVals.v === "t") { keyvals.theme = "type"; }
+
+			// Background
+			if(shortVals.b === "s") { keyvals.background = "streets"; }
+			else if(shortVals.b === "a") { keyvals.background = "aerial"; }
+
+			// Users
+			if(shortVals.u !== "") { keyvals.users = shortVals.u; }
+		}
 
 		return keyvals;
 	}
@@ -189,7 +255,7 @@ export default class URLHash extends EventTarget {
 	 * @private
 	 */
 	_onHashChange() {
-		const vals = this._getCurrentHash();
+		let vals = this._getCurrentHash();
 
 		// Restore selected picture
 		if(vals.pic) {
@@ -245,6 +311,36 @@ export default class URLHash extends EventTarget {
 		}
 	}
 
+	/**
+	 * Get short link URL (hash replaced by Base64)
+	 * @returns {str} The short link URL
+	 */
+	getShortLink(baseUrl) {
+		const url = new URL(baseUrl);
+		const hashParts = this._getHashParts();
+		const shortVals = {
+			f: (hashParts.focus || "").substring(0, 1),
+			s: !isNaN(parseInt(hashParts.speed)) ? Math.floor(parseInt(hashParts.speed)/100) : undefined,
+			n: (hashParts.nav || "").substring(0, 1),
+			p: hashParts.pic,
+			c: hashParts.xyz,
+			m: hashParts.map,
+			d: hashParts.date_from,
+			e: hashParts.date_to,
+			t: (hashParts.pic_type || "").substring(0, 1),
+			k: hashParts.camera,
+			v: (hashParts.theme || "").substring(0, 1),
+			b: (hashParts.background || "").substring(0, 1),
+			u: hashParts.users,
+		};
+		const short = Object.entries(shortVals)
+			.filter(([,v]) => v != undefined && v != "")
+			.map(([k,v]) => `${k}${v}`)
+			.join("|");
+		url.hash = `s=${short}`;
+		return url;
+	}
+
 	/**
 	 * Extracts from hash parsed keys all map filters values
 	 * @param {*} vals Hash keys

package/src/viewer/Widgets.js

@@ -723,6 +723,8 @@ export default class Widgets {
 		const overridenGeocoder = query => {
 			const rgxCoords = /([-+]?\d{1,2}\.\d+),\s*([-+]?\d{1,3}\.\d+)/;
 			const coordsMatch = query.match(rgxCoords);
+			const rgxUuid = /^[0-9a-fA-F]{8}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{4}\b-[0-9a-fA-F]{12}$/;
+			const uuidMatch = query.match(rgxUuid);
 		
 			if(coordsMatch) {
 				const lat = parseFloat(coordsMatch[1]);
@@ -732,7 +734,12 @@ export default class Widgets {
 					zoom: 16,
 				});
 				return Promise.resolve(true);
-			} else {
+			}
+			else if(uuidMatch) {
+				this._viewer.select(null, query);
+				return Promise.resolve(true);
+			}
+			else {
 				return this._viewer.map.geocoder({
 					query,
 					limit: 3,
@@ -1172,7 +1179,7 @@ export default class Widgets {
 			const btnId = pnlShare.querySelector("#gvs-edit-id");
 			const btnRss = pnlShare.querySelector("#gvs-share-rss");
 
-			fUrl.setAttribute("data-copy", baseUrl);
+			fUrl.setAttribute("data-copy", this._viewer?._hash?.getShortLink(baseUrl) || baseUrl);
 			fIframe.innerText = `<iframe src="${iframeBaseUrl}" style="border: none; width: 500px; height: 300px"></iframe>`;
 
 			const meta = this._viewer.psv.getPictureMetadata();
@@ -1192,6 +1199,7 @@ export default class Widgets {
 		};
 		
 		updateLinks();
+		this._viewer.addEventListener("ready", updateLinks, { once: true });
 		this._viewer?._hash?.addEventListener("url-changed", updateLinks);
 
 		// Copy to clipboard on button click

package/tests/Editor.test.js

@@ -18,6 +18,7 @@ jest.mock("../src/components/Photo", () => class {
 });
 
 jest.mock("../src/components/Map", () => class {});
+global.AbortSignal = { timeout: jest.fn() };
 
 const API_URL = "http://localhost:5000/api/search";
 

package/tests/StandaloneMap.test.js

@@ -5,6 +5,7 @@ jest.mock("maplibre-gl", () => ({
 }));
 
 jest.mock("../src/components/Map", () => class {});
+global.AbortSignal = { timeout: jest.fn() };
 
 const API_URL = "http://localhost:5000/api/search";
 

package/tests/Viewer.test.js

@@ -19,6 +19,8 @@ jest.mock("maplibre-gl", () => ({
 	Map: class {},
 }));
 
+global.AbortSignal = { timeout: jest.fn() };
+
 const API_URL = "http://localhost:5000/api/search";
 
 

package/tests/components/CoreView.test.js

@@ -7,6 +7,7 @@ jest.mock("maplibre-gl", () => ({
 }));
 
 global.console = { info: jest.fn() };
+global.AbortSignal = { timeout: jest.fn() };
 
 describe("constructor", () => {
 	it("works with JS element", () => {

package/tests/components/Map.test.js

@@ -26,6 +26,7 @@ jest.mock("maplibre-gl", () => ({
 			return {
 				layers: [],
 				sources: {},
+				metadata: {},
 			};
 		}
 		resize() {;}
@@ -52,7 +53,7 @@ const createParent = () => ({
 		getDataBbox: jest.fn(),
 		getPicturesTilesUrl: jest.fn(),
 		_getMapRequestTransform: jest.fn(),
-		getMapStyle: () => ({ sources: {}, layers: [] }),
+		getMapStyle: () => ({ sources: {}, layers: [], metadata: {} }),
 	},
 	_t: {
 		maplibre: {},
@@ -205,6 +206,7 @@ describe("filterUserLayersContent", () => {
 		const m = new Map(p, c);
 		m.getSource = () => true;
 		m.setPaintProperty = jest.fn();
+		m.getLayer = () => true;
 		m._fire("load");
 		m.setFilter = jest.fn();
 		m.filterUserLayersContent("pictures", [["test", "true"]]);

package/tests/utils/API.test.js

@@ -3,6 +3,7 @@ import API from "../../src/utils/API";
 jest.mock("maplibre-gl", () => ({
 	addProtocol: jest.fn(),
 }));
+global.AbortSignal = { timeout: jest.fn() };
 
 const ENDPOINT = "https://panoramax.ign.fr/api";
 const VALID_LANDING = {

package/tests/utils/I18n.test.js

@@ -1,4 +1,87 @@
-import { getTranslations } from "../../src/utils/I18n";
+import { autoDetectLocale, getTranslations } from "../../src/utils/I18n";
+
+describe("autoDetectLocale", () => {
+    // Mock the window.navigator.languages
+    const originalNavigatorLanguages = window.navigator.languages;
+
+    afterEach(() => {
+        // Reset window.navigator.languages after each test
+        Object.defineProperty(window.navigator, "languages", {
+            value: originalNavigatorLanguages,
+            configurable: true
+        });
+    });
+
+    it("returns matched language from supportedTranslations", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-FR", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["en", "fr", "es"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("fr");
+    });
+
+    it("returns fallback when no match is found", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["de-DE", "it-IT"],
+            configurable: true
+        });
+        const supportedTranslations = ["en", "fr", "es"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("en");
+    });
+
+    it("returns zh_Hant for Chinese Traditional locales", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["zh-TW"],
+            configurable: true
+        });
+        const supportedTranslations = ["zh_Hant", "zh_Hans", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("zh_Hant");
+    });
+
+    it("returns zh_Hans for Chinese Simplified locales", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["zh-CN"],
+            configurable: true
+        });
+        const supportedTranslations = ["zh_Hant", "zh_Hans", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("zh_Hans");
+    });
+
+    it("returns first matched language even when navigator language has region", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-CA", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["fr", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("fr");
+    });
+
+    it("returns fallback when supportedTranslations is empty", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["fr-FR"],
+            configurable: true
+        });
+        const supportedTranslations = [];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("en");
+    });
+
+    it("handles language codes with more than two characters", () => {
+        Object.defineProperty(window.navigator, "languages", {
+            value: ["pt-BR", "en-US"],
+            configurable: true
+        });
+        const supportedTranslations = ["pt", "en"];
+        const fallback = "en";
+        expect(autoDetectLocale(supportedTranslations, fallback)).toBe("pt");
+    });
+});
 
 describe("getTranslations", () => {
 	it("works with default lang", () => {