Add disconnect/reconnect video

Fix remaining invalid DOM nesting issue.
microbit-foundation · Apr 11, 2024 · f7bc93b · f7bc93b
1 parent 905678c
commit f7bc93b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 19 deletions.
diff --git a/lang/ui.en.json b/lang/ui.en.json
@@ -1128,7 +1128,7 @@
     "description": "Default title for error messages relating to WebUSB"
   },
   "webusb-error-reconnect-microbit-description": {
-    "defaultMessage": "Please: <ul><li>check that this micro:bit does not have a battery pack connected</li><li>unplug and replug the USB cable</li></ul>",
+    "defaultMessage": "<p>Please:</p><ul><li>check that this micro:bit does not have a battery pack connected</li><li>unplug and replug the USB cable</li></ul>",
     "description": "Part of WebUSB error message"
   },
   "webusb-not-supported": {

diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
@@ -2447,8 +2447,14 @@
   ],
   "webusb-error-reconnect-microbit-description": [
     {
-      "type": 0,
-      "value": "Please: "
+      "children": [
+        {
+          "type": 0,
+          "value": "Please:"
+        }
+      ],
+      "type": 8,
+      "value": "p"
     },
     {
       "children": [

diff --git a/src/project/project-actions.tsx b/src/project/project-actions.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: MIT
  */
 import { Link, List, ListItem, Stack } from "@chakra-ui/layout";
-import { Text, UnorderedList, VStack } from "@chakra-ui/react";
+import { Box, Text, UnorderedList, VStack } from "@chakra-ui/react";
 import { isMakeCodeForV1Hex as isMakeCodeForV1HexNoErrorHandling } from "@microbit/microbit-universal-hex";
 import { saveAs } from "file-saver";
 import { ReactNode } from "react";
@@ -71,6 +71,7 @@ import {
 } from "./project-utils";
 import ProjectNameQuestion from "./ProjectNameQuestion";
 import WebUSBErrorDialog from "../workbench/connect-dialogs/WebUSBErrorDialog";
+import reconnectVideo from "../workbench/connect-dialogs/reconnect.webm";
 
 /**
  * Distinguishes the different ways to trigger the load action.
@@ -902,21 +903,27 @@ export class ProjectActions {
         return {
           title: this.intl.formatMessage({ id: "webusb-error-default-title" }),
           description: (
-            <Text>
-              <FormattedMessage
-                id="webusb-error-reconnect-microbit-description"
-                values={{
-                  li: (chunks: ReactNode) => (
-                    <ListItem>
-                      <Text as="span">{chunks}</Text>
-                    </ListItem>
-                  ),
-                  ul: (chunks: ReactNode) => (
-                    <UnorderedList pl={2}>{chunks}</UnorderedList>
-                  ),
-                }}
-              />
-            </Text>
+            <>
+              <Box>
+                <FormattedMessage
+                  id="webusb-error-reconnect-microbit-description"
+                  values={{
+                    p: (chunks: ReactNode) => <Text>{chunks}</Text>,
+                    li: (chunks: ReactNode) => (
+                      <ListItem>
+                        <Text as="span">{chunks}</Text>
+                      </ListItem>
+                    ),
+                    ul: (chunks: ReactNode) => (
+                      <UnorderedList pl={2}>{chunks}</UnorderedList>
+                    ),
+                  }}
+                />
+              </Box>
+              <video autoPlay loop>
+                <source src={reconnectVideo} type="video/webm" />
+              </video>
+            </>
           ),
         };
       case "timeout-error":

diff --git a/src/workbench/connect-dialogs/reconnect.webm b/src/workbench/connect-dialogs/reconnect.webm