add i18n for video component

frontend/apps/marketing/public/locales/en-US/common.json

@@ -1,3 +1,5 @@
 {
-  "hello": "Hello World!"
-}
+  "hello": "Hello World!",
+  "videoErrorBody": "This video is blocked on your network.",
+  "videoErrorHeading": "Video unavailable"
+}

frontend/apps/marketing/src/components/video/Video.tsx

@@ -0,0 +1,24 @@
+'use client';
+import '@code-dot-org/component-library/video/index.css';
+import initTranslations from "@/app/i18n";
+
+import { Video as DscoVideo, VideoProps } from '@code-dot-org/component-library/video';
+import { useEffect, useState } from 'react';
+
+const Video = (props: VideoProps) => {
+  const [errorBody, setErrorBody] = useState<string | undefined>(undefined);
+  const [errorHeading, setErrorHeading] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    initTranslations('zh-CN', ['common']).then(({ t }) => {
+      setErrorHeading(t('videoErrorHeading'));
+      setErrorBody(t('videoErrorBody'));
+    })
+  }, [])
+  //const { t, i18n } = useTranslation();
+
+  return <DscoVideo errorHeading={errorHeading} errorBody={errorBody} {...props} />
+  //return <DscoVideo errorHeading={t('videoErrorHeading')} errorBody={t('videoErrorBody')} {...props} />
+}
+
+export default Video;

frontend/apps/marketing/src/components/video/index.ts

@@ -1,5 +1,7 @@
 import '@code-dot-org/component-library/video/index.css';
+import initTranslations from "@/app/i18n";
 
 // Export the Component Definition for use in Contentful Studio
-export {VideoContentfulComponentDefinition} from './videoContentfulDefinition';
-export {default} from '@code-dot-org/component-library/video';
+export { VideoContentfulComponentDefinition } from './videoContentfulDefinition';
+
+export { default as default } from './Video';