fix: fix default value in LocaleContext

packages/griffith/src/components/PlayerContainer/PlayerContainer.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {defaultLocal} from '../../constants/locales'
 import Player from '../Player'
 import {
   VideoSourceProvider,
@@ -26,7 +27,7 @@ const PlayerContainer = ({
   children,
   initialObjectFit = 'contain',
   useMSE,
-  locale = 'en',
+  locale = defaultLocal,
   localeConfig = {},
   autoplay,
   loop,

packages/griffith/src/components/TranslatedText/strings.js → packages/griffith/src/constants/locales.js

@@ -1,3 +1,6 @@
+export const defaultLocal = 'en'
+
+// TODO: 应该提供 tree-shaking 的方式加载
 export default {
   en: {
     'quality-auto': 'Auto',

packages/griffith/src/contexts/Locale/LocaleContext.js

@@ -1,6 +1,7 @@
 import React from 'react'
+import locales, {defaultLocal} from '../../constants/locales'
 
-const LocaleContext = React.createContext('en')
+const LocaleContext = React.createContext(locales[defaultLocal])
 LocaleContext.displayName = 'LocaleContext'
 
 export default LocaleContext

packages/griffith/src/contexts/Locale/LocaleProvider.js

@@ -1,22 +1,21 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import LocaleContext from './LocaleContext'
-import strings from '../../components/TranslatedText/strings'
-const mergeLocal = (locale, strings, option) => {
-  const defaultString = strings[locale]
-  const optionString = option[locale]
-  if (!optionString) return defaultString
-  return Object.assign({}, defaultString, optionString)
+import locales from '../../constants/locales'
+
+const getLocalConfig = (locale, userLocals) => {
+  const defaultConfig = locales[locale]
+  const userConfig = userLocals[locale]
+  return userConfig
+    ? Object.assign({}, defaultConfig, userConfig)
+    : defaultConfig
 }
 
-export default class LocaleProvider extends React.PureComponent {
-  state = {
-    value: mergeLocal(this.props.locale, strings, this.props.localeConfig),
-  }
-  render() {
-    return (
-      <LocaleContext.Provider value={this.state.value}>
-        {this.props.children}
-      </LocaleContext.Provider>
-    )
-  }
+export default function LocaleProvider({locale, localeConfig, children}) {
+  const value = useMemo(() => getLocalConfig(locale, localeConfig), [
+    locale,
+    localeConfig,
+  ])
+  return (
+    <LocaleContext.Provider value={value}>{children}</LocaleContext.Provider>
+  )
 }