Get the welcome video via the deployment not CMS (#1157)

microbit-matt-hillsdon · web-flow · commit a6346c4b3f0c · 2024-03-26T12:02:24.000Z
This makes more sense than using the CMS as it's not really content in
the same way as everything else.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ? (
-        <Box as="figure">
-          <AspectRatio ratio={16 / 9}>
-            <iframe
-              // Avoid youtube cookie. rel=0 should limit related videos to our channel.
-              // Once we have translated videos we can try e.g. cc_lang_pref=fr
-              // but we'll need to check our codes match theirs.
-              title="welcome video"
-              src={`https://www.youtube-nocookie.com/embed/${
-                youtubeId ? encodeURIComponent(youtubeId.trim()) : ""
-              }?rel=0&cc_load_policy=1`}
-              allow="encrypted-media"
-              frameBorder="0"
-              allowFullScreen
-            >
-              <Text>{alt || ""}</Text>
-            </iframe>
-          </AspectRatio>
-          {caption && (
-            <Text as="figcaption" mt="5px" fontSize="sm">
-              {caption}
-            </Text>
-          )}
-          {attribution && (
-            <Text as="figcaption" mt="5px" fontSize="sm">
-              {attribution}
-            </Text>
-          )}
-        </Box>
-      ) : (
-        <AspectRatio ratio={16 / 9}>
-          <Spinner />
-        </AspectRatio>
-      )}
-    </>
+    <Box as="figure">
+      <AspectRatio ratio={16 / 9}>
+        <iframe
+          // Avoid youtube cookie. rel=0 should limit related videos to our channel.
+          // Once we have translated videos we can try e.g. cc_lang_pref=fr
+          // but we'll need to check our codes match theirs.
+          title={alt}
+          src={`https://www.youtube-nocookie.com/embed/${
+            youtubeId ? encodeURIComponent(youtubeId.trim()) : ""
+          }?rel=0&cc_load_policy=1`}
+          allow="encrypted-media"
+          frameBorder="0"
+          allowFullScreen
+        />
+      </AspectRatio>
+    </Box>
   );
 };
 
diff --git a/src/deployment/default/index.tsx b/src/deployment/default/index.tsx
@@ -18,6 +18,8 @@ const stubConsentContext = createContext<CookieConsent | undefined>(
 
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
       </Text>
       <HStack>
-        <Button
-          leftIcon={<RiInformationFill />}
-          variant="link"
-          color="white"
-          colorScheme="whiteAlpha"
-          size="xs"
-          p={1}
-          onClick={openInfoDialog}
-        >
-          More
-        </Button>
+        {hasInfoDialog && (
+          <Button
+            leftIcon={<RiInformationFill />}
+            variant="link"
+            color="white"
+            colorScheme="whiteAlpha"
+            size="xs"
+            p={1}
+            onClick={openInfoDialog}
+          >
+            More
+          </Button>
+        )}
         <Button
           leftIcon={<RiFeedbackFill />}
           variant="link"
diff --git a/src/workbench/ReleaseDialogs.tsx b/src/workbench/ReleaseDialogs.tsx
diff --git a/src/workbench/WelcomeDialog.tsx b/src/workbench/WelcomeDialog.tsx
