diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 0468d4d9c..8fc3ce92c 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -37,7 +37,7 @@ jobs:
- run: npm ci
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.37 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+ - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.38 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
if: github.repository_owner == 'microbit-foundation'
env:
NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/lang/ui.ca.json b/lang/ui.ca.json
index f0079db42..2f3e3bc5c 100644
--- a/lang/ui.ca.json
+++ b/lang/ui.ca.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "Benvingut a l'Editor Python de la micro:bit",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Amplia",
"description": "Text label for zoom in button"
diff --git a/lang/ui.de.json b/lang/ui.de.json
index 540f14631..d3d8703c1 100644
--- a/lang/ui.de.json
+++ b/lang/ui.de.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "Willkommen zum micro:bit Python-Editor",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Vergrößern",
"description": "Text label for zoom in button"
diff --git a/lang/ui.en.json b/lang/ui.en.json
index 88b44ba07..e83ebd588 100644
--- a/lang/ui.en.json
+++ b/lang/ui.en.json
@@ -1159,6 +1159,10 @@
"defaultMessage": "Welcome to the micro:bit Python Editor",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Zoom in",
"description": "Text label for zoom in button"
diff --git a/lang/ui.es-es.json b/lang/ui.es-es.json
index 634e3a867..d615ce3dd 100644
--- a/lang/ui.es-es.json
+++ b/lang/ui.es-es.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "Bienvenido al Editor de Python de micro:bit",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Aumentar zoom",
"description": "Text label for zoom in button"
diff --git a/lang/ui.fr.json b/lang/ui.fr.json
index d49bceda8..3c8cf76f4 100644
--- a/lang/ui.fr.json
+++ b/lang/ui.fr.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "Bienvenue dans l'éditeur Python micro:bit",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Zoom avant",
"description": "Text label for zoom in button"
diff --git a/lang/ui.ja.json b/lang/ui.ja.json
index 96df79548..b8b56e462 100644
--- a/lang/ui.ja.json
+++ b/lang/ui.ja.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "micro:bit Pythonエディターへようこそ",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "拡大",
"description": "Text label for zoom in button"
diff --git a/lang/ui.ko.json b/lang/ui.ko.json
index ef5629b1e..47ec75d06 100644
--- a/lang/ui.ko.json
+++ b/lang/ui.ko.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "micro:bit Python 편집기에 오신 것을 환영합니다",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "글꼴 크게",
"description": "Text label for zoom in button"
diff --git a/lang/ui.nl.json b/lang/ui.nl.json
index 73937fe57..8ab388e35 100644
--- a/lang/ui.nl.json
+++ b/lang/ui.nl.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "Welkom bij de micro:bit Python Editor",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "Inzoomen",
"description": "Text label for zoom in button"
diff --git a/lang/ui.zh-cn.json b/lang/ui.zh-cn.json
index ca8058c6f..661ee1a8e 100644
--- a/lang/ui.zh-cn.json
+++ b/lang/ui.zh-cn.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "欢迎使用 micro:bit Python 编辑器",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "放大",
"description": "Text label for zoom in button"
diff --git a/lang/ui.zh-tw.json b/lang/ui.zh-tw.json
index 8b1461881..47d0b0ca5 100644
--- a/lang/ui.zh-tw.json
+++ b/lang/ui.zh-tw.json
@@ -1158,6 +1158,10 @@
"defaultMessage": "歡迎使用 micro:bit Python 編輯器",
"description": "Title for the welcome dialog"
},
+ "welcome-video-alt": {
+ "defaultMessage": "video introducing the Python Editor",
+ "description": "iframe title for the welcome video"
+ },
"zoom-in-action": {
"defaultMessage": "放大",
"description": "Text label for zoom in button"
diff --git a/src/common/YoutubeVideoEmbed.tsx b/src/common/YoutubeVideoEmbed.tsx
index ee3f74fa2..8df16fb07 100644
--- a/src/common/YoutubeVideoEmbed.tsx
+++ b/src/common/YoutubeVideoEmbed.tsx
@@ -1,56 +1,33 @@
-import { AspectRatio, Box, Text } from "@chakra-ui/react";
-import Spinner from "./Spinner";
+import { AspectRatio, Box } from "@chakra-ui/react";
export interface YoutubeVideo {
alt: string;
- attribution: string;
- caption: string;
youtubeId: string;
}
interface YoutubeVideoProps {
- youTubeVideo: YoutubeVideo | undefined;
+ alt: string;
+ youtubeId: string;
}
-const YoutubeVideoEmbed = ({ youTubeVideo }: YoutubeVideoProps) => {
- const { alt, attribution, caption, youtubeId } = youTubeVideo || {};
+const YoutubeVideoEmbed = ({ alt, youtubeId }: YoutubeVideoProps) => {
return (
- <>
- {youTubeVideo ? (
-
-
-
-
- {caption && (
-
- {caption}
-
- )}
- {attribution && (
-
- {attribution}
-
- )}
-
- ) : (
-
-
-
- )}
- >
+
+
+
+
+
);
};
diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
index bf1ce0c41..658d681fe 100644
--- a/src/deployment/default/index.tsx
+++ b/src/deployment/default/index.tsx
@@ -18,6 +18,8 @@ const stubConsentContext = createContext(
const defaultDeploymentFactory: DeploymentConfigFactory = () => ({
chakraTheme: theme,
+ // This isn't ideal as it's the branded version. You can just remove the field to remove the welcome dialog.
+ welcomeVideoYouTubeId: "mREwMW69qKc",
logging: new NullLogging(),
compliance: {
ConsentProvider: ({ children }: { children: ReactNode }) => (
diff --git a/src/deployment/index.ts b/src/deployment/index.ts
index 62b719e61..e8faf0216 100644
--- a/src/deployment/index.ts
+++ b/src/deployment/index.ts
@@ -21,6 +21,7 @@ export interface CookieConsent {
}
export interface DeploymentConfig {
+ welcomeVideoYouTubeId?: string;
squareLogo?: ReactNode;
horizontalLogo?: ReactNode;
compliance: {
diff --git a/src/messages/ui.ca.json b/src/messages/ui.ca.json
index 0403d4130..db70d5413 100644
--- a/src/messages/ui.ca.json
+++ b/src/messages/ui.ca.json
@@ -2459,6 +2459,12 @@
"value": "Benvingut a l'Editor Python de la micro:bit"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.de.json b/src/messages/ui.de.json
index 6121b4641..8cc1572e6 100644
--- a/src/messages/ui.de.json
+++ b/src/messages/ui.de.json
@@ -2555,6 +2555,12 @@
"value": "Willkommen zum micro:bit Python-Editor"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.en.json b/src/messages/ui.en.json
index 6ecd15c8f..10477babc 100644
--- a/src/messages/ui.en.json
+++ b/src/messages/ui.en.json
@@ -2507,6 +2507,12 @@
"value": "Welcome to the micro:bit Python Editor"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.es-es.json b/src/messages/ui.es-es.json
index 1274a6302..e8514d9fc 100644
--- a/src/messages/ui.es-es.json
+++ b/src/messages/ui.es-es.json
@@ -2499,6 +2499,12 @@
"value": "Bienvenido al Editor de Python de micro:bit"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.fr.json b/src/messages/ui.fr.json
index 22281fde2..6609d1414 100644
--- a/src/messages/ui.fr.json
+++ b/src/messages/ui.fr.json
@@ -2499,6 +2499,12 @@
"value": "Bienvenue dans l'éditeur Python micro:bit"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.ja.json b/src/messages/ui.ja.json
index a0fb5e624..0b4b8dbe5 100644
--- a/src/messages/ui.ja.json
+++ b/src/messages/ui.ja.json
@@ -2501,6 +2501,12 @@
"value": "micro:bit Pythonエディターへようこそ"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.ko.json b/src/messages/ui.ko.json
index dfc207ae4..4813008aa 100644
--- a/src/messages/ui.ko.json
+++ b/src/messages/ui.ko.json
@@ -2495,6 +2495,12 @@
"value": "micro:bit Python 편집기에 오신 것을 환영합니다"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.nl.json b/src/messages/ui.nl.json
index a97c7e0dc..af753f47b 100644
--- a/src/messages/ui.nl.json
+++ b/src/messages/ui.nl.json
@@ -2542,6 +2542,12 @@
"value": "Welkom bij de micro:bit Python Editor"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.zh-cn.json b/src/messages/ui.zh-cn.json
index 2b831a38a..360498f1c 100644
--- a/src/messages/ui.zh-cn.json
+++ b/src/messages/ui.zh-cn.json
@@ -2508,6 +2508,12 @@
"value": "欢迎使用 micro:bit Python 编辑器"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/messages/ui.zh-tw.json b/src/messages/ui.zh-tw.json
index 396efd941..fff0089b2 100644
--- a/src/messages/ui.zh-tw.json
+++ b/src/messages/ui.zh-tw.json
@@ -2507,6 +2507,12 @@
"value": "歡迎使用 micro:bit Python 編輯器"
}
],
+ "welcome-video-alt": [
+ {
+ "type": 0,
+ "value": "video introducing the Python Editor"
+ }
+ ],
"zoom-in-action": [
{
"type": 0,
diff --git a/src/workbench/PreReleaseNotice.tsx b/src/workbench/PreReleaseNotice.tsx
index 116209132..411a2884a 100644
--- a/src/workbench/PreReleaseNotice.tsx
+++ b/src/workbench/PreReleaseNotice.tsx
@@ -8,7 +8,7 @@ import { Flex, HStack, Text } from "@chakra-ui/layout";
import { useCallback, useEffect, useState } from "react";
import { RiFeedbackFill, RiInformationFill } from "react-icons/ri";
import { useStorage } from "../common/use-storage";
-import { useCookieConsent } from "../deployment";
+import { useCookieConsent, useDeployment } from "../deployment";
import { flags } from "../flags";
export type ReleaseNoticeState = "info" | "feedback" | "closed";
@@ -56,6 +56,7 @@ export const useReleaseDialogState = (): [
};
const PreReleaseNotice = ({ onDialogChange }: PreReleaseNoticeProps) => {
+ const { welcomeVideoYouTubeId: hasInfoDialog } = useDeployment();
const openInfoDialog = useCallback(() => {
onDialogChange("info");
}, [onDialogChange]);
@@ -78,17 +79,19 @@ const PreReleaseNotice = ({ onDialogChange }: PreReleaseNoticeProps) => {
Beta release
- }
- variant="link"
- color="white"
- colorScheme="whiteAlpha"
- size="xs"
- p={1}
- onClick={openInfoDialog}
- >
- More
-
+ {hasInfoDialog && (
+ }
+ variant="link"
+ color="white"
+ colorScheme="whiteAlpha"
+ size="xs"
+ p={1}
+ onClick={openInfoDialog}
+ >
+ More
+
+ )}
}
variant="link"
diff --git a/src/workbench/ReleaseDialogs.tsx b/src/workbench/ReleaseDialogs.tsx
index 27001d66c..6954ff45a 100644
--- a/src/workbench/ReleaseDialogs.tsx
+++ b/src/workbench/ReleaseDialogs.tsx
@@ -7,6 +7,7 @@ import { useCallback } from "react";
import FeedbackForm from "./FeedbackForm";
import { ReleaseNoticeState } from "./PreReleaseNotice";
import WelcomeDialog from "./WelcomeDialog";
+import { useDeployment } from "../deployment";
interface ReleaseDialogsProps {
dialog: ReleaseNoticeState;
@@ -14,14 +15,21 @@ interface ReleaseDialogsProps {
}
const ReleaseDialogs = ({ dialog, onDialogChange }: ReleaseDialogsProps) => {
+ const { welcomeVideoYouTubeId } = useDeployment();
const handleClose = useCallback(() => {
onDialogChange("closed");
}, [onDialogChange]);
if (dialog === "feedback") {
return ;
}
- if (dialog === "info") {
- return ;
+ if (dialog === "info" && welcomeVideoYouTubeId) {
+ return (
+
+ );
}
return null;
};
diff --git a/src/workbench/WelcomeDialog.tsx b/src/workbench/WelcomeDialog.tsx
index 4de16c5ea..d1b9ee654 100644
--- a/src/workbench/WelcomeDialog.tsx
+++ b/src/workbench/WelcomeDialog.tsx
@@ -13,49 +13,23 @@ import {
ModalOverlay,
} from "@chakra-ui/modal";
import { Icon } from "@chakra-ui/react";
-import { ReactNode, useEffect, useState } from "react";
+import { ReactNode } from "react";
import { RiExternalLinkLine } from "react-icons/ri";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
import ModalCloseButton from "../common/ModalCloseButton";
-import { fetchContent } from "../common/sanity";
-import YoutubeVideoEmbed, { YoutubeVideo } from "../common/YoutubeVideoEmbed";
+import YoutubeVideoEmbed from "../common/YoutubeVideoEmbed";
import { useDeployment } from "../deployment";
-import { useLogging } from "../logging/logging-hooks";
-import { useSettings } from "../settings/settings";
interface WelcomeDialogProps {
+ youtubeId: string;
isOpen: boolean;
onClose: () => void;
}
-const WelcomeDialog = ({ isOpen, onClose }: WelcomeDialogProps) => {
+const WelcomeDialog = ({ youtubeId, isOpen, onClose }: WelcomeDialogProps) => {
const { guideLink } = useDeployment();
- const [welcomeVideo, setWelcomeVideo] = useState();
- const [loadError, setLoadError] = useState(false);
- const [{ languageId }] = useSettings();
- const logging = useLogging();
- useEffect(() => {
- const adaptContent = (result: any): YoutubeVideo | undefined => {
- if (result.length === 1 && result[0].welcomeVideo) {
- return result[0].welcomeVideo;
- }
- };
- const query = (): string => {
- return `
- *[_id == "pythonEditorConfig" && !(_id in path("drafts.**"))]{
- welcomeVideo
- }`;
- };
- const fetchWelcomeVideo = async () => {
- try {
- setWelcomeVideo(await fetchContent(languageId, query, adaptContent));
- } catch (e) {
- logging.error(e);
- setLoadError(true);
- }
- };
- fetchWelcomeVideo();
- }, [languageId, logging]);
+ const intl = useIntl();
+ const welcomeVideoAltText = intl.formatMessage({ id: "welcome-video-alt" });
return (
@@ -75,13 +49,10 @@ const WelcomeDialog = ({ isOpen, onClose }: WelcomeDialogProps) => {
- {loadError ? (
-
-
-
- ) : (
-
- )}
+