Merge pull request #326 from StephenMcConnel/BL-13906-FixCircularDepe…

…ndency fix: Remove circular dependency which caused test failures (BL-13906) (#326)
BloomBooks · Sep 24, 2024 · d434614 · d434614
2 parents 9c6fd10 + f5e71e4
commit d434614
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 42 deletions.
diff --git a/src/l10n/_locales/en/messages.json b/src/l10n/_locales/en/messages.json
@@ -50,9 +50,5 @@
     "Button.IgnoreImageDescriptions": {
         "message": "Ignore Image Descriptions",
         "description": "tooltip for the button to disable reading image descriptions"
-    },
-    "Video.BadVideoMessage": {
-        "message": "Sorry, this video cannot be played in this browser.",
-        "description": "message displayed when a video is invalid or missing"
     }
 }
diff --git a/src/narration.ts b/src/narration.ts
@@ -19,7 +19,6 @@
 // and video
 
 import LiteEvent from "./event";
-import { hideVideoError, showVideoError } from "./video";
 // Note: trying to avoid other imports, as part of the process of moving this code to a module
 // that can be shared with BloomDesktop.
 
@@ -1287,3 +1286,35 @@ export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
             });
     }
 }
+
+// These methods live here instead of video.ts because video.ts is already importing
+// from narration.ts, and we don't want to create a circular dependency.
+
+// We're living with this message not being localized.
+const badVideoMessage = "Sorry, this video cannot be played in this browser.";
+
+export function showVideoError(video: HTMLVideoElement): void {
+    const parent = video.parentElement;
+    if (parent) {
+        const divs = parent.getElementsByClassName("video-error-message");
+        if (divs.length === 0) {
+            const msgDiv = parent.ownerDocument.createElement("div");
+            msgDiv.className = "video-error-message normal-style";
+            msgDiv.textContent = badVideoMessage;
+            msgDiv.style.display = "block";
+            msgDiv.style.color = "white";
+            msgDiv.style.position = "absolute";
+            msgDiv.style.left = "10%";
+            msgDiv.style.top = "10%";
+            msgDiv.style.width = "80%";
+            parent.appendChild(msgDiv);
+        }
+    }
+}
+export function hideVideoError(video: HTMLVideoElement): void {
+    const parent = video.parentElement;
+    if (parent) {
+        const divs = parent.getElementsByClassName("video-error-message");
+        while (divs.length > 1) parent.removeChild(divs[0]);
+    }
+}
diff --git a/src/video.ts b/src/video.ts
@@ -4,9 +4,10 @@ import { isMacOrIOS } from "./utilities/osUtils";
 import {
     currentPlaybackMode,
     setCurrentPlaybackMode,
-    PlaybackMode
+    PlaybackMode,
+    hideVideoError,
+    showVideoError
 } from "./narration";
-import { LocalizationManager } from "./l10n/localizationManager";
 
 // class Video contains functionality to get videos to play properly in bloom-player
 
@@ -15,15 +16,6 @@ export interface IPageVideoComplete {
     videos: HTMLVideoElement[];
 }
 
-const uiLang = LocalizationManager.getBloomUiLanguage();
-const preferredUiLanguages = uiLang === "en" ? [uiLang] : [uiLang, "en"];
-
-const badVideoMessage = LocalizationManager.getTranslation(
-    "Video.BadVideoMessage",
-    preferredUiLanguages,
-    "Sorry, this video cannot be played in this browser."
-);
-
 export class Video {
     private currentPage: HTMLDivElement;
     private currentVideoElement: HTMLVideoElement | undefined;
@@ -224,29 +216,3 @@ export class Video {
         }
     }
 }
-
-export function showVideoError(video: HTMLVideoElement): void {
-    const parent = video.parentElement;
-    if (parent) {
-        const divs = parent.getElementsByClassName("video-error-message");
-        if (divs.length === 0) {
-            const msgDiv = parent.ownerDocument.createElement("div");
-            msgDiv.className = "video-error-message normal-style";
-            msgDiv.textContent = badVideoMessage;
-            msgDiv.style.display = "block";
-            msgDiv.style.color = "white";
-            msgDiv.style.position = "absolute";
-            msgDiv.style.left = "10%";
-            msgDiv.style.top = "10%";
-            msgDiv.style.width = "80%";
-            parent.appendChild(msgDiv);
-        }
-    }
-}
-export function hideVideoError(video: HTMLVideoElement): void {
-    const parent = video.parentElement;
-    if (parent) {
-        const divs = parent.getElementsByClassName("video-error-message");
-        while (divs.length > 1) parent.removeChild(divs[0]);
-    }
-}