diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
index 58f4b2b0..5c1e2f88 100644
--- a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
+++ b/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,
diff --git a/packages/griffith/src/components/TranslatedText/strings.js b/packages/griffith/src/constants/locales.js
similarity index 96%
rename from packages/griffith/src/components/TranslatedText/strings.js
rename to packages/griffith/src/constants/locales.js
index c4a0d878..6090dde6 100644
--- a/packages/griffith/src/components/TranslatedText/strings.js
+++ b/packages/griffith/src/constants/locales.js
@@ -1,3 +1,6 @@
+export const defaultLocal = 'en'
+
+// TODO: 应该提供 tree-shaking 的方式加载
export default {
en: {
'quality-auto': 'Auto',
diff --git a/packages/griffith/src/contexts/Locale/LocaleContext.js b/packages/griffith/src/contexts/Locale/LocaleContext.js
index 6a68e757..8bebdb28 100644
--- a/packages/griffith/src/contexts/Locale/LocaleContext.js
+++ b/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
diff --git a/packages/griffith/src/contexts/Locale/LocaleProvider.js b/packages/griffith/src/contexts/Locale/LocaleProvider.js
index 25fd71ab..c289308e 100644
--- a/packages/griffith/src/contexts/Locale/LocaleProvider.js
+++ b/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 (
-
- {this.props.children}
-
- )
- }
+export default function LocaleProvider({locale, localeConfig, children}) {
+ const value = useMemo(() => getLocalConfig(locale, localeConfig), [
+ locale,
+ localeConfig,
+ ])
+ return (
+ {children}
+ )
}