diff --git a/client/src/redux/prop-types.ts b/client/src/redux/prop-types.ts index fd3dc446b1..bb452ccbd9 100644 --- a/client/src/redux/prop-types.ts +++ b/client/src/redux/prop-types.ts @@ -183,6 +183,17 @@ type Required = { src: string; crossDomain?: boolean; }; +export interface BilibiliIds { + aid: string; + bvid: string; + cid: string; +} + +export interface VideoLocaleIds { + espanol?: string; + italian?: string; + portuguese?: string; +} export type ChallengeNodeType = { block: string; @@ -213,6 +224,8 @@ export type ChallengeNodeType = { translationPending: boolean; url: string; videoId: string; + videoLocaleIds?: VideoLocaleIds; + bilibiliIds?: BilibiliIds; videoUrl: string; }; diff --git a/client/src/templates/Challenges/components/VideoPlayer.tsx b/client/src/templates/Challenges/components/VideoPlayer.tsx new file mode 100644 index 0000000000..498671db3f --- /dev/null +++ b/client/src/templates/Challenges/components/VideoPlayer.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import YouTube from 'react-youtube'; +import envData from '../../../../../config/env.json'; +import type { BilibiliIds, VideoLocaleIds } from '../../../redux/prop-types'; + +// TODO: pull these types from all-langs +const { clientLocale } = envData as { + clientLocale: + | 'english' + | 'chinese' + | 'chinese-traditional' + | 'espanol' + | 'italian' + | 'portuguese'; +}; + +interface VideoPlayerProps { + videoId: string; + videoLocaleIds?: VideoLocaleIds; + onVideoLoad: () => void; + videoIsLoaded: boolean; + bilibiliIds?: BilibiliIds; + title: string; +} + +function VideoPlayer({ + videoId, + videoLocaleIds, + onVideoLoad, + videoIsLoaded, + bilibiliIds, + title +}: VideoPlayerProps): JSX.Element { + let bilibiliSrc = null; + + if ( + bilibiliIds && + ['chinese', 'chinese-traditional'].includes(clientLocale) + ) { + const { aid, bvid, cid } = bilibiliIds; + bilibiliSrc = `//player.bilibili.com/player.html?aid=${aid}&bvid=${bvid}&cid=${cid}`; + } + + if (videoLocaleIds) { + const localeId = videoLocaleIds[clientLocale as keyof VideoLocaleIds]; + videoId = localeId || videoId; + } + + return ( + <> + {bilibiliSrc ? ( +