#21451 Fix WebGL disabled error message

src/components/views/location/LocationPicker.tsx

@@ -119,10 +119,13 @@ class LocationPicker extends React.Component<ILocationPickerProps, IState> {
             }
         } catch (e) {
             logger.error("Failed to render map", e);
-            const errorType =
-                (e as Error)?.message === LocationShareError.MapStyleUrlNotConfigured
-                    ? LocationShareError.MapStyleUrlNotConfigured
-                    : LocationShareError.Default;
+            const errorMessage = (e as Error)?.message;
+            let errorType;
+            if(errorMessage === LocationShareError.MapStyleUrlNotConfigured)
+                errorType = LocationShareError.MapStyleUrlNotConfigured;
+            else if(errorMessage.includes('Failed to initialize WebGL'))
+                errorType = LocationShareError.WebGLNotEnabled;
+            else errorType = LocationShareError.Default;
             this.setState({ error: errorType });
         }
     }

src/i18n/strings/en_EN.json

@@ -784,6 +784,7 @@
     "You may need to manually permit %(brand)s to access your microphone/webcam": "You may need to manually permit %(brand)s to access your microphone/webcam",
     "This homeserver is not configured to display maps.": "This homeserver is not configured to display maps.",
     "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.": "This homeserver is not configured correctly to display maps, or the configured map server may be unreachable.",
+    "WebGL is required for this site, please enable it in your browser settings.": "WebGL is required for this site, please enable it in your browser settings.",
     "Toggle attribution": "Toggle attribution",
     "Map feedback": "Map feedback",
     "Enter fullscreen": "Enter fullscreen",

src/utils/location/LocationShareErrors.ts

@@ -19,6 +19,7 @@ import { _t } from "../../languageHandler";
 export enum LocationShareError {
     MapStyleUrlNotConfigured = "MapStyleUrlNotConfigured",
     MapStyleUrlNotReachable = "MapStyleUrlNotReachable",
+    WebGLNotEnabled = "WebGLNotEnabled",
     Default = "Default",
 }
 
@@ -27,6 +28,8 @@ export const getLocationShareErrorMessage = (errorType?: LocationShareError): st
         case LocationShareError.MapStyleUrlNotConfigured:
             return _t("This homeserver is not configured to display maps.");
         case LocationShareError.MapStyleUrlNotReachable:
+        case LocationShareError.WebGLNotEnabled:
+            return _t("WebGL is required for this site, please enable it in your browser settings.")
         default:
             return _t(
                 `This homeserver is not configured correctly to display maps, ` +

test/components/views/location/LocationPicker-test.tsx

@@ -118,6 +118,18 @@ describe("LocationPicker", () => {
             expect(getByText("This homeserver is not configured to display maps.")).toBeInTheDocument();
         });
 
+        it("displays error when WebGl is not enabled", () => {
+            // suppress expected error log
+            jest.spyOn(logger, "error").mockImplementation(() => {});
+            mocked(findMapStyleUrl).mockImplementation(() => {
+                throw new Error("Failed to initialize WebGL");
+            });
+
+            const { getByText } = getComponent();
+
+            expect(getByText("WebGL is required for this site, please enable it in your browser settings.")).toBeInTheDocument();
+        });
+
         it("displays error when map setup throws", () => {
             // suppress expected error log
             jest.spyOn(logger, "error").mockImplementation(() => {});