@elice/material-video 1.240401.0 → 1.240508.0-globalization.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/cjs/components/material-video/MaterialVideo.d.ts +3 -3
  2. package/cjs/components/material-video/MaterialVideo.js +13 -10
  3. package/cjs/components/material-video/MaterialVideoContent.js +6 -4
  4. package/cjs/components/material-video/locales/en.json.js +7 -0
  5. package/cjs/components/material-video/locales/index.d.ts +3 -0
  6. package/cjs/components/material-video/locales/ko.json.js +7 -0
  7. package/cjs/components/material-video/locales/th.json.js +7 -0
  8. package/es/components/material-video/MaterialVideo.d.ts +3 -3
  9. package/es/components/material-video/MaterialVideo.js +13 -11
  10. package/es/components/material-video/MaterialVideoContent.js +4 -2
  11. package/es/components/material-video/locales/en.json.js +3 -0
  12. package/es/components/material-video/locales/index.d.ts +3 -0
  13. package/es/components/material-video/locales/ko.json.js +3 -0
  14. package/es/components/material-video/locales/th.json.js +3 -0
  15. package/package.json +6 -6
  16. package/cjs/components/material-video/locales.d.ts +0 -5
  17. package/cjs/components/material-video/locales.js +0 -13
  18. package/es/components/material-video/locales.d.ts +0 -5
  19. package/es/components/material-video/locales.js +0 -10
package/cjs/components/material-video/MaterialVideo.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
+ import type { WithIntlComponentBuilderProps } from '@elice/intl';
2
3
  import type { YoutubePlayerSharedProps } from '../youtube-player';
3
4
  export interface MaterialVideoProps extends YoutubePlayerSharedProps {
4
5
  className?: string;
5
6
  materialVideoId: number;
6
- locale?: string;
7
7
  }
8
- declare const MaterialVideo: React.FC<MaterialVideoProps>;
9
- export default MaterialVideo;
8
+ declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
9
+ export default _default;
package/cjs/components/material-video/MaterialVideo.js CHANGED
@@ -4,22 +4,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var reactIntl = require('react-intl');
8
7
  var apiClient = require('@elice/api-client');
9
8
  var blocks = require('@elice/blocks');
9
+ var intl = require('@elice/intl');
10
10
  var materialSharedUtils = require('@elice/material-shared-utils');
11
11
  var types = require('@elice/types');
12
12
  var classnames = require('classnames');
13
- var locales = require('./locales.js');
13
+ var en = require('./locales/en.json.js');
14
+ var ko = require('./locales/ko.json.js');
15
+ var th = require('./locales/th.json.js');
14
16
  var MaterialVideoContent = require('./MaterialVideoContent.js');
15
17
 
16
18
  const MaterialVideo = _a => {
17
19
  var {
18
20
  className,
19
21
  materialVideoId,
20
- locale = 'en'
22
+ __intl
21
23
  } = _a,
22
- youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "locale"]);
24
+ youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "__intl"]);
23
25
  const prefixCls = 'em-material-video';
24
26
  const {
25
27
  materialVideo,
@@ -29,20 +31,21 @@ const MaterialVideo = _a => {
29
31
  }, {
30
32
  signal
31
33
  }), [materialVideoId]), apiClient.config.init);
32
- return React.createElement(blocks.Flex, {
34
+ return React.createElement(intl.RawEliceIntlProvider, {
35
+ value: {
36
+ intl: __intl
37
+ }
38
+ }, React.createElement(blocks.Flex, {
33
39
  className: classnames(prefixCls, className),
34
40
  align: "center",
35
41
  justify: "center",
36
42
  width: "100%",
37
43
  height: "100%"
38
- }, React.createElement(reactIntl.IntlProvider, {
39
- locale: locale,
40
- defaultLocale: "en",
41
- messages: locale in locales ? locales[locale] : locales.en
42
44
  }, React.createElement(MaterialVideoContent.default, Object.assign({
43
45
  materialVideo: materialVideo !== null && materialVideo !== void 0 ? materialVideo : null,
44
46
  videoGetStatus: materialVideoStatus
45
47
  }, youtubeProps))));
46
48
  };
49
+ var MaterialVideo$1 = new intl.IntlComponentBuilder(MaterialVideo).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
47
50
 
48
- exports.default = MaterialVideo;
51
+ exports.default = MaterialVideo$1;
package/cjs/components/material-video/MaterialVideoContent.js CHANGED
@@ -4,10 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var tslib = require('tslib');
6
6
  var React = require('react');
7
- var reactIntl = require('react-intl');
8
7
  var blocks = require('@elice/blocks');
9
8
  var designTokens = require('@elice/design-tokens');
10
9
  var icons = require('@elice/icons');
10
+ var intl = require('@elice/intl');
11
11
  var youtubeUrlParser = require('../../utils/youtubeUrlParser.js');
12
12
  var YoutubePlayer = require('../youtube-player/YoutubePlayer.js');
13
13
  var MaterialVideo_styled = require('./MaterialVideo.styled.js');
@@ -18,7 +18,9 @@ const MaterialVideoContent = _a => {
18
18
  materialVideo
19
19
  } = _a,
20
20
  youtubeProps = tslib.__rest(_a, ["videoGetStatus", "materialVideo"]);
21
- const intl = reactIntl.useIntl();
21
+ const {
22
+ intl: intl$1
23
+ } = intl.useRawEliceIntl();
22
24
  if (videoGetStatus === 'pending') {
23
25
  return React.createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
24
26
  align: "center",
@@ -27,7 +29,7 @@ const MaterialVideoContent = _a => {
27
29
  width: 0.5
28
30
  }), React.createElement(blocks.Text, {
29
31
  role: "white"
30
- }, intl.formatMessage({
32
+ }, intl$1.formatMessage({
31
33
  id: 'video.status.loading'
32
34
  })));
33
35
  }
@@ -42,7 +44,7 @@ const MaterialVideoContent = _a => {
42
44
  width: 0.5
43
45
  }), React.createElement(blocks.Text, {
44
46
  role: "white"
45
- }, intl.formatMessage({
47
+ }, intl$1.formatMessage({
46
48
  id: 'video.status.error'
47
49
  })));
48
50
  }
package/cjs/components/material-video/locales/en.json.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var messageEn = {"video.status.loading":"Loading video...","video.status.error":"Error occurred while loading video"};
6
+
7
+ exports.default = messageEn;
package/cjs/components/material-video/locales/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default as messageEn } from './en.json';
2
+ export { default as messageKo } from './ko.json';
3
+ export { default as messageTh } from './th.json';
package/cjs/components/material-video/locales/ko.json.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var messageKo = {"video.status.loading":"{_termLibraryLecture} {_termLibraryLecturePage} 로딩 중...","video.status.error":"{_termLibraryLecture} {_termLibraryLecturePage}를 가져오는 중 문제가 발생하였습니다."};
6
+
7
+ exports.default = messageKo;
package/cjs/components/material-video/locales/th.json.js ADDED
@@ -0,0 +1,7 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var messageTh = {"video.status.loading":"การโหลดข้อมูลการเรียนการสอน...","video.status.error":"การดึงข้อมูลสำหรับการเรียนการสอนมีปัญหาโดยไม่ทราบสาเหตุ"};
6
+
7
+ exports.default = messageTh;
package/es/components/material-video/MaterialVideo.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
+ import type { WithIntlComponentBuilderProps } from '@elice/intl';
2
3
  import type { YoutubePlayerSharedProps } from '../youtube-player';
3
4
  export interface MaterialVideoProps extends YoutubePlayerSharedProps {
4
5
  className?: string;
5
6
  materialVideoId: number;
6
- locale?: string;
7
7
  }
8
- declare const MaterialVideo: React.FC<MaterialVideoProps>;
9
- export default MaterialVideo;
8
+ declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
9
+ export default _default;
package/es/components/material-video/MaterialVideo.js CHANGED
@@ -1,22 +1,23 @@
1
1
  import { __rest } from 'tslib';
2
2
  import React from 'react';
3
- import { IntlProvider } from 'react-intl';
4
3
  import { getOrgMaterialVideoGet, config } from '@elice/api-client';
5
4
  import { Flex } from '@elice/blocks';
5
+ import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
6
6
  import { useMaterialFetch } from '@elice/material-shared-utils';
7
7
  import { enums } from '@elice/types';
8
8
  import classnames from 'classnames';
9
- import * as locales from './locales.js';
10
- import { en } from './locales.js';
9
+ import messageEn from './locales/en.json.js';
10
+ import messageKo from './locales/ko.json.js';
11
+ import messageTh from './locales/th.json.js';
11
12
  import MaterialVideoContent from './MaterialVideoContent.js';
12
13
 
13
14
  const MaterialVideo = _a => {
14
15
  var {
15
16
  className,
16
17
  materialVideoId,
17
- locale = 'en'
18
+ __intl
18
19
  } = _a,
19
- youtubeProps = __rest(_a, ["className", "materialVideoId", "locale"]);
20
+ youtubeProps = __rest(_a, ["className", "materialVideoId", "__intl"]);
20
21
  const prefixCls = 'em-material-video';
21
22
  const {
22
23
  materialVideo,
@@ -26,20 +27,21 @@ const MaterialVideo = _a => {
26
27
  }, {
27
28
  signal
28
29
  }), [materialVideoId]), config.init);
29
- return React.createElement(Flex, {
30
+ return React.createElement(RawEliceIntlProvider, {
31
+ value: {
32
+ intl: __intl
33
+ }
34
+ }, React.createElement(Flex, {
30
35
  className: classnames(prefixCls, className),
31
36
  align: "center",
32
37
  justify: "center",
33
38
  width: "100%",
34
39
  height: "100%"
35
- }, React.createElement(IntlProvider, {
36
- locale: locale,
37
- defaultLocale: "en",
38
- messages: locale in locales ? locales[locale] : en
39
40
  }, React.createElement(MaterialVideoContent, Object.assign({
40
41
  materialVideo: materialVideo !== null && materialVideo !== void 0 ? materialVideo : null,
41
42
  videoGetStatus: materialVideoStatus
42
43
  }, youtubeProps))));
43
44
  };
45
+ var MaterialVideo$1 = new IntlComponentBuilder(MaterialVideo).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
44
46
 
45
- export { MaterialVideo as default };
47
+ export { MaterialVideo$1 as default };
package/es/components/material-video/MaterialVideoContent.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import { __rest } from 'tslib';
2
2
  import React from 'react';
3
- import { useIntl } from 'react-intl';
4
3
  import { Spinner, Hspace, Text, Icon } from '@elice/blocks';
5
4
  import { base } from '@elice/design-tokens';
6
5
  import { eilStatusWarn } from '@elice/icons';
6
+ import { useRawEliceIntl } from '@elice/intl';
7
7
  import { youtubeUrlParser } from '../../utils/youtubeUrlParser.js';
8
8
  import YoutubePlayer from '../youtube-player/YoutubePlayer.js';
9
9
  import { StyledMaterialVideoStatus } from './MaterialVideo.styled.js';
@@ -14,7 +14,9 @@ const MaterialVideoContent = _a => {
14
14
  materialVideo
15
15
  } = _a,
16
16
  youtubeProps = __rest(_a, ["videoGetStatus", "materialVideo"]);
17
- const intl = useIntl();
17
+ const {
18
+ intl
19
+ } = useRawEliceIntl();
18
20
  if (videoGetStatus === 'pending') {
19
21
  return React.createElement(StyledMaterialVideoStatus, {
20
22
  align: "center",
package/es/components/material-video/locales/en.json.js ADDED
@@ -0,0 +1,3 @@
1
+ var messageEn = {"video.status.loading":"Loading video...","video.status.error":"Error occurred while loading video"};
2
+
3
+ export { messageEn as default };
package/es/components/material-video/locales/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export { default as messageEn } from './en.json';
2
+ export { default as messageKo } from './ko.json';
3
+ export { default as messageTh } from './th.json';
package/es/components/material-video/locales/ko.json.js ADDED
@@ -0,0 +1,3 @@
1
+ var messageKo = {"video.status.loading":"{_termLibraryLecture} {_termLibraryLecturePage} 로딩 중...","video.status.error":"{_termLibraryLecture} {_termLibraryLecturePage}를 가져오는 중 문제가 발생하였습니다."};
2
+
3
+ export { messageKo as default };
package/es/components/material-video/locales/th.json.js ADDED
@@ -0,0 +1,3 @@
1
+ var messageTh = {"video.status.loading":"การโหลดข้อมูลการเรียนการสอน...","video.status.error":"การดึงข้อมูลสำหรับการเรียนการสอนมีปัญหาโดยไม่ทราบสาเหตุ"};
2
+
3
+ export { messageTh as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-video",
3
- "version": "1.240401.0",
3
+ "version": "1.240508.0-globalization.0",
4
4
  "description": "User view and editing components of Elice material video",
5
5
  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
6
6
  "license": "UNLICENSED",
@@ -29,11 +29,11 @@
29
29
  "@elice/blocks": "^1",
30
30
  "@elice/design-tokens": "^1",
31
31
  "@elice/icons": "^1",
32
+ "@elice/intl": "*",
32
33
  "@elice/material-shared-types": "*",
33
34
  "@elice/material-shared-utils": "*",
34
35
  "@elice/types": "^1",
35
36
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
36
- "react-intl": "^5.0.0",
37
37
  "react-use": "^17.0.0",
38
38
  "styled-components": "^5.2.0"
39
39
  },
@@ -48,16 +48,16 @@
48
48
  "@elice/design-tokens": "^1.220803.0",
49
49
  "@elice/icons": "^1.230814.0",
50
50
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
51
- "@elice/material-shared-types": "1.240401.0",
52
- "@elice/material-shared-utils": "1.240401.0",
51
+ "@elice/intl": "0.240425.0-alpha.7",
52
+ "@elice/material-shared-types": "1.240508.0-globalization.0",
53
+ "@elice/material-shared-utils": "1.240508.0-globalization.0",
53
54
  "@elice/types": "^1.240208.0",
54
55
  "@types/classnames": "^2.3.1",
55
56
  "@types/react": "~17.0.9",
56
57
  "@types/styled-components": "^5.1.21",
57
58
  "react": "^17.0.2",
58
- "react-intl": "^5.20.10",
59
59
  "react-use": "^17.2.4",
60
60
  "styled-components": "^5.3.0"
61
61
  },
62
- "gitHead": "c3c7c033d7524e3d16328399010562ca6c2c3286"
62
+ "gitHead": "e64474c7cab0b6cb852ba08a2076c88e732eec03"
63
63
  }
package/cjs/components/material-video/locales.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export declare const en: {
2
- 'video.status.loading': string;
3
- 'video.status.error': string;
4
- };
5
- export declare const ko: typeof en;
package/cjs/components/material-video/locales.js DELETED
@@ -1,13 +0,0 @@
1
- 'use strict';
2
-
3
- const en = {
4
- 'video.status.loading': 'Loading video...',
5
- 'video.status.error': 'Error occurred while loading video'
6
- };
7
- const ko = {
8
- 'video.status.loading': '수업 자료 로딩 중...',
9
- 'video.status.error': '수업 자료를 가져오는 중 문제가 발생하였습니다.'
10
- };
11
-
12
- exports.en = en;
13
- exports.ko = ko;
package/es/components/material-video/locales.d.ts DELETED
@@ -1,5 +0,0 @@
1
- export declare const en: {
2
- 'video.status.loading': string;
3
- 'video.status.error': string;
4
- };
5
- export declare const ko: typeof en;
package/es/components/material-video/locales.js DELETED
@@ -1,10 +0,0 @@
1
- const en = {
2
- 'video.status.loading': 'Loading video...',
3
- 'video.status.error': 'Error occurred while loading video'
4
- };
5
- const ko = {
6
- 'video.status.loading': '수업 자료 로딩 중...',
7
- 'video.status.error': '수업 자료를 가져오는 중 문제가 발생하였습니다.'
8
- };
9
-
10
- export { en, ko };