Converted Talking Book Tool to React (BL-16410)

src/BloomBrowserUI/bookEdit/bloomField/BloomField.ts

@@ -1,7 +1,7 @@
 /// <reference path="../../typings/jquery/jquery.d.ts" />
 /// <reference path="../../typings/ckeditor/ckeditor.d.ts" />
 
-import AudioRecording from "../toolbox/talkingBook/audioRecording";
+import { createValidXhtmlUniqueId } from "../js/xhtmlIdUtils";
 import { get, post } from "../../utils/bloomApi";
 import BloomMessageBoxSupport from "../../utils/bloomMessageBoxSupport";
 import { tryProcessHyperlink } from "./hyperlinks";
@@ -520,7 +520,7 @@ export default class BloomField {
             nodelist.forEach(
                 (span: Element, key: number, parent: NodeListOf<Element>) => {
                     const oldId = span.getAttribute("id");
-                    const newId = AudioRecording.createValidXhtmlUniqueId();
+                    const newId = createValidXhtmlUniqueId();
                     span.setAttribute("id", newId);
                     post(`audio/copyAudioFile?oldId=${oldId}&newId=${newId}`);
                 },

src/BloomBrowserUI/bookEdit/js/bloomImages.ts

@@ -21,7 +21,6 @@ import { updateCanvasElementClass } from "../toolbox/canvas/canvasElementDomUtil
 import { farthest } from "../../utils/elementUtils";
 import { EditableDivUtils } from "./editableDivUtils";
 import { playingBloomGame } from "../toolbox/games/DragActivityTabControl";
-import { kPlaybackOrderContainerClass } from "../toolbox/talkingBook/audioRecording";
 import { getWorkspaceBundleExports } from "./workspaceFrames";
 import {
     changeImage,
@@ -651,8 +650,9 @@ export function handleMouseEnterBloomCanvas(bloomCanvas: HTMLElement): void {
     SetImageTooltip(bloomCanvas);
 
     if (
-        bloomCanvas.getElementsByClassName(kPlaybackOrderContainerClass)
-            .length > 0
+        bloomCanvas.getElementsByClassName(
+            "bloom-playbackOrderControlsContainer",
+        ).length > 0
     ) {
         return; // Playback order controls are active, deactivate bloom-canvas stuff.
     }

src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementContextControls.tsx

@@ -21,7 +21,7 @@ import { BloomTooltip } from "../../../react_components/BloomToolTip";
 import { useL10n } from "../../../react_components/l10nHooks";
 import { kBloomDisabledOpacity } from "../../../utils/colorUtils";
 import { getAsync, useApiObject } from "../../../utils/bloomApi";
-import AudioRecording from "../../toolbox/talkingBook/audioRecording";
+import { audioExistsForIdsAsync } from "../../toolbox/talkingBook/audioUtils";
 import { getAudioSentencesOfVisibleEditables } from "bloom-player";
 import { canvasElementControlRegistry } from "../../toolbox/canvas/canvasElementControlRegistry";
 import { buildCanvasElementControlRegistryContext } from "../../toolbox/canvas/buildCanvasElementControlRegistryContext";
@@ -156,7 +156,7 @@ const CanvasElementContextControls: React.FunctionComponent<{
             props.canvasElement,
         );
         const ids = audioSentences.map((sentence) => sentence.id);
-        AudioRecording.audioExistsForIdsAsync(ids)
+        audioExistsForIdsAsync(ids)
             .then((audioExists) => {
                 setTextHasAudio(audioExists);
             })

src/BloomBrowserUI/bookEdit/js/canvasElementManager/CanvasElementDuplication.ts

@@ -5,7 +5,7 @@ import {
     kBloomButtonClass,
     kImageFitModeAttribute,
 } from "../../toolbox/canvas/canvasElementConstants";
-import AudioRecording from "../../toolbox/talkingBook/audioRecording";
+import { createValidXhtmlUniqueId } from "../xhtmlIdUtils";
 import { postData, postJson } from "../../../utils/bloomApi";
 import { cloneCanvasElementHtmlStructure } from "./canvasElementCloneCleanup";
 
@@ -369,7 +369,7 @@ export class CanvasElementDuplication {
         sourceId: string,
         copiedElement: Element,
     ): void {
-        const newId = AudioRecording.createValidXhtmlUniqueId();
+        const newId = createValidXhtmlUniqueId();
         copiedElement.setAttribute("id", newId);
         void copyAudioFileAsync(sourceId, newId); // we don't need to wait for this to finish
         const duration = sourceElement.getAttribute("data-duration");

src/BloomBrowserUI/bookEdit/js/xhtmlIdUtils.ts

@@ -0,0 +1,14 @@
+// taken out of audioRecording.ts to avoid the need for other
+// files to import that big file just to use a little bit of
+// code.
+
+import { EditableDivUtils } from "./editableDivUtils";
+
+export function createValidXhtmlUniqueId(): string {
+    let newId = EditableDivUtils.createUuid();
+    if (/^\d/.test(newId)) {
+        newId = "i" + newId; // valid ID in XHTML can't start with digit
+    }
+
+    return newId;
+}

src/BloomBrowserUI/bookEdit/toolbox/ToolboxRoot.tsx

@@ -69,10 +69,6 @@ const toolIconPathByToolId: Record<string, string> = {
         "/bloom/bookEdit/toolbox/impairmentVisualizer/blind-eye-white.svg",
 };
 
-const legacyToolSubPathByToolId: Record<string, string> = {
-    talkingBook: "talkingBook/talkingBookToolboxTool.html",
-};
-
 const toolboxHeaderIconStyles = css`
     width: 16px;
     height: 16px;
@@ -154,7 +150,6 @@ const makeSectionFromToolId = (toolId: string): ToolboxSection => {
         id: toolId,
         englishLabel: labelInfo.englishLabel,
         l10nKey: labelInfo.l10nKey,
-        legacyToolHtmlSubPath: legacyToolSubPathByToolId[toolId],
     };
 };
 
@@ -261,12 +256,7 @@ const ensureReactToolBodyElement = (
     }
 
     const normalizedToolId = normalizeToolId(toolId);
-    // Do not create elements for legacy tools; they load their content from
-    // legacyToolHtmlSubPath and their makeRootElement() implementations throw
-    // "Method not implemented." if called directly.
-    if (legacyToolSubPathByToolId[normalizedToolId]) {
-        return undefined;
-    }
+
     const tool = getMasterToolList().find((candidate) => {
         return candidate.id() === normalizedToolId;
     });
@@ -457,36 +447,6 @@ export const ToolboxRoot: React.FunctionComponent = () => {
             return;
         }
 
-        const legacyToolHtmlSubPath = legacyToolSubPathByToolId[toolId];
-        if (legacyToolHtmlSubPath) {
-            try {
-                const legacyToolBodyHtml = await loadLegacyToolBodyHtml({
-                    id: toolId,
-                    englishLabel: "",
-                    l10nKey: "",
-                    legacyToolHtmlSubPath,
-                });
-                setSections((previousSections) =>
-                    previousSections.map((section) => {
-                        if (section.id !== toolId) {
-                            return section;
-                        }
-                        return {
-                            ...section,
-                            legacyToolBodyHtml,
-                        };
-                    }),
-                );
-            } catch (error) {
-                hydratedToolIds.current.delete(toolId);
-                console.error(
-                    `Failed to load legacy toolbox HTML for ${toolId}.`,
-                    error,
-                );
-            }
-            return;
-        }
-
         hydratedToolIds.current.delete(toolId);
     }, []);
 

src/BloomBrowserUI/bookEdit/toolbox/canvas/canvasControlRegistry.ts

@@ -73,7 +73,7 @@ import {
     playSound,
     showDialogToChooseSoundFileAsync,
 } from "../games/GameTool";
-import AudioRecording from "../talkingBook/audioRecording";
+import { showTalkingBookTool } from "../talkingBook/showTalkingBookTool";
 import { showLinkTargetChooserDialog } from "../../../react_components/LinkTargetChooser/LinkTargetChooserDialogLauncher";
 import { kBloomBlue } from "../../../bloomMaterialUITheme";
 import {
@@ -334,7 +334,7 @@ const makeChooseAudioMenuItemForText = (
                 englishLabel: "Use Talking Book Tool",
                 onSelect: () => {
                     runtime.closeMenu(false);
-                    AudioRecording.showTalkingBookTool();
+                    showTalkingBookTool();
                 },
             },
         ],

src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/jquery.text-markupSpec.js

@@ -302,9 +302,9 @@ describe("jquery.text-markup", function () {
         ]);
 
         // ...but ZERO WIDTH JOINER is legitimate within a word and must NOT split it.
-        expect(
-            theOneLibSynphony.getWordsFromHtmlString(`ca${zwj}t`),
-        ).toEqual([`ca${zwj}t`]);
+        expect(theOneLibSynphony.getWordsFromHtmlString(`ca${zwj}t`)).toEqual([
+            `ca${zwj}t`,
+        ]);
     });
 
     it("wrap_words_extra matches words bounded by a ZERO WIDTH SPACE (BL-16490)", function () {

src/BloomBrowserUI/bookEdit/toolbox/readers/libSynphony/synphony_lib.ts

@@ -1475,7 +1475,8 @@ export class LibSynphony {
         // include them; they must be listed explicitly. See BL-16490.
         const wordBoundaryChars =
             "\\s\\p{Z}" + zeroWidthAndDirectionalSplitters;
-        var beforeWord = "(^\\s*|>\\s*|[" + wordBoundaryChars + "]|\\p{P}| )"; // word beginning delimiter
+        var beforeWord =
+            "(^\\s*|>\\s*|[" + wordBoundaryChars + "]|\\p{P}| )"; // word beginning delimiter
         var afterWord =
             "(?=(\\s*$|\\s*<|[" +
             wordBoundaryChars +

src/BloomBrowserUI/bookEdit/toolbox/talkingBook/IAudioRecorder.ts

@@ -3,11 +3,16 @@
 // anything implementation-specific.
 
 import { RecordingMode } from "./recordingMode"; // only holds the RecordingMode enum
+import { TalkingBookUiState } from "./TalkingBookUiState";
 
 export interface IAudioRecorder {
     autoSegmentBasedOnTextLength: () => number[];
     markAudioSplit: () => void;
+    insertSegmentMarker(): void;
+    setShowPlaybackOrder(isOn: boolean): Promise<void>;
     setShowingImageDescriptions: (boolean) => void;
+    setRecordingMode(recordingMode: RecordingMode): Promise<void>;
+    handleImportRecordingClick(): void;
     removeRecordingSetup: () => void;
     getUpdateMarkupAction: () => Promise<() => void>;
     setupForRecordingAsync: () => Promise<void>;
@@ -22,4 +27,21 @@ export interface IAudioRecorder {
     getPageDocBody: () => HTMLElement | null;
     getCurrentTextBox: () => HTMLElement | null;
     recordingMode: RecordingMode;
+    setLevelCanvas(canvas: HTMLCanvasElement | null): void;
+    closeDeviceSelectMenu(): void;
+    changeInputDevice(): void;
+    setInputDevice(device: any): void;
+    startRecordCurrentAsync(): Promise<void>;
+    endRecordCurrentAsync(): Promise<void>;
+    togglePlayCurrentAsync(): Promise<void>;
+    playESpeakPreview(): void;
+    showAdjustTimingsDialog(): Promise<void>;
+    moveToNextAudioElement(): Promise<void>;
+    moveToPrevAudioElementAsync(): Promise<void>;
+    clearRecordingAsync(): Promise<void>;
+    listenAsync(canvasToExclude?: HTMLElement): Promise<void>;
+    getTalkingBookUiState(): TalkingBookUiState;
+    registerStateListener(
+        listener: (state: TalkingBookUiState) => void,
+    ): () => void;
 }