diff --git a/src/l10n/_locales/en/messages.json b/src/l10n/_locales/en/messages.json index d9143b2c..7f02c1ab 100644 --- 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 index 188fe41f..58aa9158 100644 --- 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 index 68c02aed..e4d19771 100644 --- 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]); - } -}