Merge alpha into master

BloomBooks · Nov 14, 2024 · e68eeff · e68eeff
2 parents a9bc9d4 + 1f6f1ca
commit e68eeff
Show file tree

Hide file tree

Showing 294 changed files with 19,093 additions and 30,520 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
         "browser": true,
         "es6": true
     },
-    "extends": "eslint:recommended",
+    "extends": ["eslint:recommended", "plugin:storybook/recommended"],
     "globals": {
         "Atomics": "readonly",
         "SharedArrayBuffer": "readonly"

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -1,41 +1,52 @@
 name: Build-Test-Release
 
 on:
-  push:
-    branches:
-      - master
+    push:
+        branches:
+            - master
+            - alpha
 
 jobs:
-  build-test-release:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v4
-        with:
-            # Keep in sync with volta -> node version in package.json
-          node-version: 16
-
-      - name: Install dependencies
-        run: yarn
-
-      - name: Build package
-        run: yarn build
-
-      - name: Run tests
-        run: yarn test
-
-      - name: Clean up package.json
-        # We used to use the clean-publish package to do this, but when
-        # we switched to using semantic-release, we had to do it manually.
-        run: npm pkg delete scripts && npm pkg delete devDependencies && npm pkg delete dependencies
-
-      - name: Publish package
-        id: semantic_release
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: npx semantic-release
+    build-test-release:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v4
+              with:
+                  # Keep in sync with volta -> node version in package.json
+                  node-version: 20
+
+            - name: Install dependencies
+              run: yarn
+
+            - name: Sync with crowdin
+              env:
+                  BLOOM_CROWDIN_TOKEN: ${{ secrets.BLOOM_CROWDIN_TOKEN }}
+              run: |
+                  if [ "${{ github.ref }}" = "refs/heads/master" ]; then
+                    yarn strings:sync
+                  else
+                    yarn strings:download
+                  fi
+
+            - name: Build package
+              run: yarn build
+
+            - name: Run tests
+              run: yarn test
+
+            - name: Clean up package.json
+              # We used to use the clean-publish package to do this, but when
+              # we switched to using semantic-release, we had to do it manually.
+              run: npm pkg delete scripts && npm pkg delete devDependencies && npm pkg delete dependencies
+
+            - name: Publish package
+              id: semantic_release
+              env:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+                  NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+              run: npx semantic-release
diff --git a/.gitignore b/.gitignore
@@ -6,14 +6,14 @@ updateFiles.bat
 
 debug.log
 
-/src/l10n/l10n-all.json
-/src/l10n/_locales/*
-!/src/l10n/_locales/en
-
-src/activities/domActivities/multipleChoiceDomActivity.css
-
-testBooks/sample-dom-activity/Activity.css
-
-src/bloom-player.css
-
-*.bak
+src/activities/domActivities/multipleChoiceDomActivity.css
+
+testBooks/sample-dom-activity/Activity.css
+
+src/bloom-player.css
+
+*.bak
+
+*storybook.log
+src/l10n/bloom-player
+
diff --git a/.storybook/main.js b/.storybook/main.js
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,32 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+// get the vite config one level up
+import viteConfigFn from "../vite.config";
+
+const proxy = viteConfigFn({
+    command: "serve",
+    mode: "development",
+}).server!.proxy;
+const config: StorybookConfig = {
+    stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+    viteFinal: (config, options) => {
+        // setup the same proxy that we have in "vite dev" to avoid CORS issues
+        const server = {
+            ...config.server,
+            proxy: {
+                ...proxy,
+            },
+        };
+
+        return { ...config, server };
+    },
+};
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,14 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
diff --git a/.vscode/launch.json b/.vscode/launch.json
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,7 +7,12 @@
         "statusBar.noFolderBackground": "#D65649",
         "statussBar.prominentBackground": "#D65649"
     },
-    "cSpell.words": ["editables", "swiper", "tabindex", "Xmatter"],
+    "cSpell.words": [
+        "editables",
+        "swiper",
+        "tabindex",
+        "Xmatter"
+    ],
     "cSpell.ignorePaths": [
         "package-lock.json",
         "node_modules",
@@ -16,5 +21,10 @@
         ".vscode",
         ".vscode-insiders",
         "package.json"
-    ]
-}
+    ],
+    "[json][jsonc]": {
+        "editor.codeActionsOnSave": [
+            "source.fixAll"
+        ]
+    }
+}
diff --git a/index-for-developing.html b/index-for-developing.html
@@ -1,75 +1,62 @@
-<!-- This is used with the lite-server. Haven't figured
-     out how to have it exist anywhere but at this top level.
-     To serve a local book (e.g., from testBooks): copy its folder to the dist directory.
-     (This could no doubt be automated if we wanted.)
-     Then, set src to bloomplayer-for-developing.htm?url=http://localhost:8080/<folder>/<filename>.htm
-     Don't include dist in the path. Change backslash to slash. May be helpful to rename things
-     so no there are no characters needing encoding.
-     For example, given a book at dist\BunAndJam\BunAndJam.htm, use
-     src="bloomplayer-for-developing.htm?url=http://localhost:8080/BunAndJam/BunAndJam.htm"
+<!-- The vite dev server is configured to serve from the testBooks directory.
+     So to serve a book from there, the url should start with "testBooks/".
+
+     To deal with CORS, the vite dev server has a proxy at "s3/" so bloomlibrary.org books should start with "s3/".
+
      Note: all the different versions of src below except src itself are ignored; they
      are alternative src's that may be useful again (or may be obsolete and wrong).
      -->
 <html>
-    <body>
-        <iframe
-            id="my-iframe"
-            src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest/educationforlife%40sil.org%2f433f2ae9-3cba-48bf-82a7-faa3932908ae/bloomdigital%2findex.htm&hideFullScreenButton=false"
-            publish_video_preview_src="bloomplayer-for-developing.htm?centerVertically=true&videoPreviewMode=true&autoplay=no&defaultDuration=1&url=http%3A%2F%2Flocalhost%3A8089%2Fbloom%2FC%253A%2FUsers%2FPolk%2FAppData%2FLocal%2FTemp%2FPlaceForStagingBook%2FA%2520Family%2520Learns%2520about%2520Immunisations&independent=false&host=bloomdesktop&skipActivities=true&hideNavButtons=true"
-            local_folder_manually_copied_to_dist_src="bloomplayer-for-developing.htm?url=http://localhost:8080/CatAndDog/CatAndDog.htm"
-            dev_videoWithAudio_src="bloomplayer-for-developing.htm?centerVertically=true&url=https://s3.amazonaws.com/bloomharvest-sandbox/colin_sugget%40sil.org%2f665dab68-723c-4245-b4b4-c771d0329329/bloomdigital%2findex.htm&independent=false&host=testing"
-            dev_moonAndCap_src="bloomplayer-for-developing.htm?centerVertically=true&url=https://s3.amazonaws.com/bloomharvest-sandbox/john_thomson%40sil.org%2fd4d081d9-9c90-427b-814c-7bd7730fc25b/bloomdigital%2findex.htm&independent=false&host=testing"
-            bloom_reader_preview_src="bloomplayer-for-developing.htm?url=http://localhost:8089/bloom/C%3A/Users/YourName/AppData/Local/Temp/PlaceForStagingBook/myBookTitle"
-            local_src="bloomplayer-for-developing.htm?url=http://localhost:8080/test_books/MoonAndCap/MoonAndCap.htm&hideFullScreenButton=false&independent=true&host=testing"
-            video_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/jeffrey_su%40sil.org%2f9eaa0134-6b34-4b20-80df-58c4e9d62480/bloomdigital%2findex.htm"
-            blahsrc="bloomplayer-for-developing.htm?allowToggleAppBar=true&url=file%3A%2F%2Fc%3A%2Fdev%2Fbook%2Fbook.htm"
-            landscape_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest/educationforlife%40sil.org%2f1fec727e-855f-4691-bbd0-3efb666b4598/bloomdigital%2findex.htm"
-            landscape_video_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest/educationforlife%40sil.org%2f6f6d82d5-e98d-445d-b4be-143df993c3c0/bloomdigital%2findex.htm"
-            talking_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/librarian%40bloomlibrary.org%2fa8c92a95-ba88-464e-81b0-628c9ef9d060/bloomdigital%2findex.htm"
-            music_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/bloom.bible.stories%40gmail.com%2f2e0b9e8c-1722-45b9-bfc6-4379fd6b3e7e/bloomdigital%2findex.htm"
-            talking_and_music_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/andrew_polk%40sil.org%2f37c8a66d-cf9c-4557-ada7-34c3551e8883/bloomdigital%2findex.htm"
-            talking_imageDesc_src="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/stephen_mcconnel%40sil.org/a4736538-1b58-4272-8833-a94e3f5ec3ae/bloomdigital/index.htm"
-            srcWithLang="bloomplayer-for-developing.htm?url=https://s3.amazonaws.com/bloomharvest-sandbox/wycliffe%40bloomlibrary.org%2f278510fd-6700-4ae1-8114-4c7024b7a399/bloomdigital%2findex.htm&showBackButton=true&lang=fr"
-            style="width: 100%; height: 100%;"
-            allowfullscreen
-            allow="fullscreen"
-        ></iframe>
-        <div style="position:absolute;top:20px;left:20px;">
-            <button
-                onclick="
+
+<body>
+    <iframe id="player-iframe"
+        src="bloomplayer-for-developing.htm?url=testBooks/Bloom5.4-activities/Bloom5.4-activities.htm"
+        xsrc="bloomplayer-for-developing.htm?url=s3/bloomharvest/educationforlife%40sil.org%2f433f2ae9-3cba-48bf-82a7-faa3932908ae/bloomdigital%2findex.htm&hideFullScreenButton=false"
+        publish_video_preview_src="bloomplayer-for-developing.htm?centerVertically=true&videoPreviewMode=true&autoplay=no&defaultDuration=1&url=http%3A%2F%2Flocalhost%3A8089%2Fbloom%2FC%253A%2FUsers%2FPolk%2FAppData%2FLocal%2FTemp%2FPlaceForStagingBook%2FA%2520Family%2520Learns%2520about%2520Immunisations&independent=false&host=bloomdesktop&skipActivities=true&hideNavButtons=true"
+        dev_videoWithAudio_src="bloomplayer-for-developing.htm?centerVertically=true&url=s3/bloomharvest-sandbox/colin_sugget%40sil.org%2f665dab68-723c-4245-b4b4-c771d0329329/bloomdigital%2findex.htm&independent=false&host=testing"
+        dev_moonAndCap_src="bloomplayer-for-developing.htm?centerVertically=true&url=s3/bloomharvest-sandbox/john_thomson%40sil.org%2fd4d081d9-9c90-427b-814c-7bd7730fc25b/bloomdigital%2findex.htm&independent=false&host=testing"
+        bloom_reader_preview_src="bloomplayer-for-developing.htm?url=http://localhost:8089/bloom/C%3A/Users/YourName/AppData/Local/Temp/PlaceForStagingBook/myBookTitle"
+        local_src="bloomplayer-for-developing.htm?url=http://localhost:8080/test_books/MoonAndCap/MoonAndCap.htm&hideFullScreenButton=false&independent=true&host=testing"
+        video_src="bloomplayer-for-developing.htm?url=s3/bloomharvest-sandbox/jeffrey_su%40sil.org%2f9eaa0134-6b34-4b20-80df-58c4e9d62480/bloomdigital%2findex.htm"
+        blahsrc="bloomplayer-for-developing.htm?allowToggleAppBar=true&url=file%3A%2F%2Fc%3A%2Fdev%2Fbook%2Fbook.htm"
+        landscape_src="bloomplayer-for-developing.htm?url=s3/bloomharvest/educationforlife%40sil.org%2f1fec727e-855f-4691-bbd0-3efb666b4598/bloomdigital%2findex.htm"
+        landscape_video_src="bloomplayer-for-developing.htm?url=s3/bloomharvest/educationforlife%40sil.org%2f6f6d82d5-e98d-445d-b4be-143df993c3c0/bloomdigital%2findex.htm"
+        talking_src="bloomplayer-for-developing.htm?url=s3/bloomharvest-sandbox/librarian%40bloomlibrary.org%2fa8c92a95-ba88-464e-81b0-628c9ef9d060/bloomdigital%2findex.htm"
+        music_src="bloomplayer-for-developing.htm?url=s3/bloomharvest-sandbox/bloom.bible.stories%40gmail.com%2f2e0b9e8c-1722-45b9-bfc6-4379fd6b3e7e/bloomdigital%2findex.htm"
+        talking_and_music_src="bloomplayer-for-developing.htm?url=s3/bloomharvest-sandbox/andrew_polk%40sil.org%2f37c8a66d-cf9c-4557-ada7-34c3551e8883/bloomdigital%2findex.htm"
+        talking_imageDesc_src="bloomplayer-for-developing.htm?url=s3/bloomharvest-sandbox/stephen_mcconnel%40sil.org/a4736538-1b58-4272-8833-a94e3f5ec3ae/bloomdigital/index.htm"
+        style="width: 100%; height: 100%;" allowfullscreen allow="fullscreen"></iframe>
+    <div style="position:absolute;top:20px;left:20px;">
+        <button onclick="
                     var iframe = document.getElementById(
-                        'my-iframe'
+                        'player-iframe'
                     );
                     msg = { messageType: 'control', play: true, autoplay: 'yes' };
                     iframe.contentWindow?.postMessage(JSON.stringify(msg), '*');
-                "
-            >
-                autoplay
-            </button>
-            <button
-                onclick="
+                ">
+            autoplay
+        </button>
+        <button onclick="
                     var iframe = document.getElementById(
-                        'my-iframe'
+                        'player-iframe'
                     );
                     msg = { messageType: 'control', pause: true };
                     iframe.contentWindow?.postMessage(JSON.stringify(msg), '*');
-                "
-            >
-                pause
-            </button>
-            <button
-                onclick="
+                ">
+            pause
+        </button>
+        <button onclick="
                     var iframe = document.getElementById(
-                        'my-iframe'
+                        'player-iframe'
                     );
                     msg = { messageType: 'control', pause: true };
                     iframe.contentWindow?.postMessage(JSON.stringify(msg), '*');
                     msg = { messageType: 'control', reset: true };
                     iframe.contentWindow?.postMessage(JSON.stringify(msg), '*');
-                "
-            >
-                reset
-            </button>
-        </div>
-    </body>
-</html>
+                ">
+            reset
+        </button>
+    </div>
+</body>
+
+</html>
diff --git a/jest.config.js b/jest.config.js