@elice/material-video-file 1.240401.0 → 1.240508.0-globalization.1

package/cjs/components/material-video-file/MaterialVideoFile.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
 import type { UseMaterialVideoFileApiProps } from './useMaterialVideoFileApi';
 type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMaterialVideoFileApiProps {
     materialVideoFileId: number;
     className?: string;
-    locale?: string;
 }
-declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;
-export default MaterialVideoFile;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoFileProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+export default _default;

package/cjs/components/material-video-file/MaterialVideoFile.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var reactIntl = require('react-intl');
 var apiClient = require('@elice/api-client');
+var intl = require('@elice/intl');
 var materialSharedUtils = require('@elice/material-shared-utils');
 var types = require('@elice/types');
 var classnames = require('classnames');
-var locales = require('./locales.js');
+var en = require('./locales/en.json.js');
+var ko = require('./locales/ko.json.js');
+var th = require('./locales/th.json.js');
 var MaterialVideoFilePlayer = require('./MaterialVideoFilePlayer.js');
 var useMaterialVideoFileApi = require('./useMaterialVideoFileApi.js');
 var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
@@ -22,10 +24,10 @@ const MaterialVideoFile = _a => {
   var {
       materialVideoFileId,
       className,
-      locale = 'en',
-      eliceAccountApiConfiguration
+      eliceAccountApiConfiguration,
+      __intl
     } = _a,
-    playerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "locale", "eliceAccountApiConfiguration"]);
+    playerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "eliceAccountApiConfiguration", "__intl"]);
   const prefixCls = 'em-material-video-file';
   const {
     orgNameShort
@@ -46,12 +48,8 @@ const MaterialVideoFile = _a => {
   //
   //
   //
-  return React.createElement(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
+  return React.createElement(intl.RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
     className: classnames(prefixCls, className)
-  }, React.createElement(reactIntl.IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in locales ? locales[locale] : locales.en
   }, React.createElement(MaterialVideoFilePlayer.default, Object.assign({}, playerProps, {
     orgNameShort: orgNameShort,
     materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
@@ -60,5 +58,6 @@ const MaterialVideoFile = _a => {
     title: (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.videoAssetName) !== null && _c !== void 0 ? _c : undefined
   }))));
 };
+var MaterialVideoFile$1 = new intl.IntlComponentBuilder(MaterialVideoFile).add('en', en.default).add('ko', ko.default).add('th', th.default).build();
 
-exports.default = MaterialVideoFile;
+exports.default = MaterialVideoFile$1;

package/cjs/components/material-video-file/MaterialVideoFilePlayer.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactIntl = require('react-intl');
 var blocks = require('@elice/blocks');
+var intl = require('@elice/intl');
 var types = require('@elice/types');
 var classnames = require('classnames');
 var MaterialVideoFilePlayer_styled = require('./MaterialVideoFilePlayer.styled.js');
@@ -57,6 +57,7 @@ const MaterialVideoFilePlayer = ({
   accountApi
 }) => {
   const prefixCls = 'em-video-player';
+  const intl$1 = intl.useRawEliceIntl();
   const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
   /**
    * Current video status.
@@ -177,8 +178,8 @@ const MaterialVideoFilePlayer = ({
       lineHeight: 1.5,
       textAlign: "center",
       preWrap: true
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "videoFile.player.encoding"
+    }, intl$1.formatMessage({
+      id: 'videoFile.player.encoding'
     })));
   }
   // encoding failed
@@ -188,8 +189,8 @@ const MaterialVideoFilePlayer = ({
       lineHeight: 1.5,
       textAlign: "center",
       preWrap: true
-    }, React.createElement(reactIntl.FormattedMessage, {
-      id: "videoFile.player.encodingFailed"
+    }, intl$1.formatMessage({
+      id: 'videoFile.player.encodingFailed'
     })));
   }
   // resolved

package/cjs/components/material-video-file/locales/en.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageEn = {"videoFile.player.preparing":"{_termLibraryLecturePage} on preparing.","videoFile.player.uploadVideoBtn":"Upload File","videoFile.player.encoding":"A video is being prepared.\nPlease check back later.","videoFile.player.encodingFailed":"There was a problem processing the video.\nIf the problem persists, please contact customer service.","videoFile.player.noVideo":"This file does not exist."};
+
+exports.default = messageEn;

package/cjs/components/material-video-file/locales/index.d.ts

@@ -0,0 +1,3 @@
+export { default as messageEn } from './en.json';
+export { default as messageKo } from './ko.json';
+export { default as messageTh } from './th.json';

package/cjs/components/material-video-file/locales/ko.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageKo = {"videoFile.player.preparing":"{_termLibraryLecturePage}를 준비 중입니다.","videoFile.player.uploadVideoBtn":"파일 업로드","videoFile.player.encoding":"동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.","videoFile.player.encodingFailed":"동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.","videoFile.player.noVideo":"존재하지 않는 파일입니다."};
+
+exports.default = messageKo;

package/cjs/components/material-video-file/locales/th.json.js

@@ -0,0 +1,7 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var messageTh = {"videoFile.player.preparing":"กำลังเตรียมข้อมูลค่ะ.","videoFile.player.uploadVideoBtn":"อัปโหลดไฟล์","videoFile.player.encoding":"วิดีโอกำลังเตรียมการ\nโปรดตรวจสอบอีกครั้งในภายหลัง","videoFile.player.encodingFailed":"วิดีโอกำลังเตรียมการมีปัญหาเกิดขึ้น\nหากปัญหายังคงอยู่โปรดติดต่อศูนย์บริการลูกค้า","videoFile.player.noVideo":"ไม่มีไฟล์ที่มีอยู่"};
+
+exports.default = messageTh;

package/es/components/material-video-file/MaterialVideoFile.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
+import type { WithIntlComponentBuilderProps } from '@elice/intl';
 import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
 import type { UseMaterialVideoFileApiProps } from './useMaterialVideoFileApi';
 type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMaterialVideoFileApiProps {
     materialVideoFileId: number;
     className?: string;
-    locale?: string;
 }
-declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;
-export default MaterialVideoFile;
+declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoFileProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+export default _default;

package/es/components/material-video-file/MaterialVideoFile.js

@@ -1,12 +1,13 @@
 import { __rest } from 'tslib';
 import React from 'react';
-import { IntlProvider } from 'react-intl';
 import { getOrgMaterialVideoFileGet, config } from '@elice/api-client';
+import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
 import { useMaterialConfig, useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
-import * as locales from './locales.js';
-import { en } from './locales.js';
+import messageEn from './locales/en.json.js';
+import messageKo from './locales/ko.json.js';
+import messageTh from './locales/th.json.js';
 import MaterialVideoFilePlayer from './MaterialVideoFilePlayer.js';
 import { useMaterialVideoFileApi } from './useMaterialVideoFileApi.js';
 import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
@@ -19,10 +20,10 @@ const MaterialVideoFile = _a => {
   var {
       materialVideoFileId,
       className,
-      locale = 'en',
-      eliceAccountApiConfiguration
+      eliceAccountApiConfiguration,
+      __intl
     } = _a,
-    playerProps = __rest(_a, ["materialVideoFileId", "className", "locale", "eliceAccountApiConfiguration"]);
+    playerProps = __rest(_a, ["materialVideoFileId", "className", "eliceAccountApiConfiguration", "__intl"]);
   const prefixCls = 'em-material-video-file';
   const {
     orgNameShort
@@ -43,12 +44,8 @@ const MaterialVideoFile = _a => {
   //
   //
   //
-  return React.createElement(StyledMaterialVideoFileWrap, {
+  return React.createElement(RawEliceIntlProvider, Object.assign({}, __intl), React.createElement(StyledMaterialVideoFileWrap, {
     className: classnames(prefixCls, className)
-  }, React.createElement(IntlProvider, {
-    locale: locale,
-    defaultLocale: "en",
-    messages: locale in locales ? locales[locale] : en
   }, React.createElement(MaterialVideoFilePlayer, Object.assign({}, playerProps, {
     orgNameShort: orgNameShort,
     materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
@@ -57,5 +54,6 @@ const MaterialVideoFile = _a => {
     title: (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.videoAssetName) !== null && _c !== void 0 ? _c : undefined
   }))));
 };
+var MaterialVideoFile$1 = new IntlComponentBuilder(MaterialVideoFile).add('en', messageEn).add('ko', messageKo).add('th', messageTh).build();
 
-export { MaterialVideoFile as default };
+export { MaterialVideoFile$1 as default };

package/es/components/material-video-file/MaterialVideoFilePlayer.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
 import { Spinner, Text } from '@elice/blocks';
+import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
 import { StyledVideoPlayerLoading, StyledVideoPlayerWrap } from './MaterialVideoFilePlayer.styled.js';
@@ -53,6 +53,7 @@ const MaterialVideoFilePlayer = ({
   accountApi
 }) => {
   const prefixCls = 'em-video-player';
+  const intl = useRawEliceIntl();
   const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
   /**
    * Current video status.
@@ -173,8 +174,8 @@ const MaterialVideoFilePlayer = ({
       lineHeight: 1.5,
       textAlign: "center",
       preWrap: true
-    }, React.createElement(FormattedMessage, {
-      id: "videoFile.player.encoding"
+    }, intl.formatMessage({
+      id: 'videoFile.player.encoding'
     })));
   }
   // encoding failed
@@ -184,8 +185,8 @@ const MaterialVideoFilePlayer = ({
       lineHeight: 1.5,
       textAlign: "center",
       preWrap: true
-    }, React.createElement(FormattedMessage, {
-      id: "videoFile.player.encodingFailed"
+    }, intl.formatMessage({
+      id: 'videoFile.player.encodingFailed'
     })));
   }
   // resolved

package/es/components/material-video-file/locales/en.json.js

@@ -0,0 +1,3 @@
+var messageEn = {"videoFile.player.preparing":"{_termLibraryLecturePage} on preparing.","videoFile.player.uploadVideoBtn":"Upload File","videoFile.player.encoding":"A video is being prepared.\nPlease check back later.","videoFile.player.encodingFailed":"There was a problem processing the video.\nIf the problem persists, please contact customer service.","videoFile.player.noVideo":"This file does not exist."};
+
+export { messageEn as default };

package/es/components/material-video-file/locales/index.d.ts

@@ -0,0 +1,3 @@
+export { default as messageEn } from './en.json';
+export { default as messageKo } from './ko.json';
+export { default as messageTh } from './th.json';

package/es/components/material-video-file/locales/ko.json.js

@@ -0,0 +1,3 @@
+var messageKo = {"videoFile.player.preparing":"{_termLibraryLecturePage}를 준비 중입니다.","videoFile.player.uploadVideoBtn":"파일 업로드","videoFile.player.encoding":"동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.","videoFile.player.encodingFailed":"동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.","videoFile.player.noVideo":"존재하지 않는 파일입니다."};
+
+export { messageKo as default };

package/es/components/material-video-file/locales/th.json.js

@@ -0,0 +1,3 @@
+var messageTh = {"videoFile.player.preparing":"กำลังเตรียมข้อมูลค่ะ.","videoFile.player.uploadVideoBtn":"อัปโหลดไฟล์","videoFile.player.encoding":"วิดีโอกำลังเตรียมการ\nโปรดตรวจสอบอีกครั้งในภายหลัง","videoFile.player.encodingFailed":"วิดีโอกำลังเตรียมการมีปัญหาเกิดขึ้น\nหากปัญหายังคงอยู่โปรดติดต่อศูนย์บริการลูกค้า","videoFile.player.noVideo":"ไม่มีไฟล์ที่มีอยู่"};
+
+export { messageTh as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.240401.0",
+  "version": "1.240508.0-globalization.1",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,12 +29,12 @@
     "@elice/blocks": "^1",
     "@elice/design-tokens": "^1",
     "@elice/icons": "^1",
+    "@elice/intl": "*",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
     "@elice/openapi-client-account": "^1",
     "@elice/types": "^1",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
-    "react-intl": "^5.0.0",
     "react-use": "^17.0.0",
     "styled-components": "^5.2.0"
   },
@@ -49,8 +49,9 @@
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
-    "@elice/material-shared-types": "1.240401.0",
-    "@elice/material-shared-utils": "1.240401.0",
+    "@elice/intl": "0.240425.0-alpha.9",
+    "@elice/material-shared-types": "1.240508.0-globalization.1",
+    "@elice/material-shared-utils": "1.240508.0-globalization.1",
     "@elice/openapi-client-account": "^1.230814.0",
     "@elice/types": "^1.240208.0",
     "@types/classnames": "^2.3.1",
@@ -58,9 +59,8 @@
     "@types/react": "~17.0.9",
     "@types/styled-components": "^5.1.21",
     "react": "^17.0.2",
-    "react-intl": "^5.20.10",
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "c3c7c033d7524e3d16328399010562ca6c2c3286"
+  "gitHead": "359abc2f14610a96b1c4514aedb4a7d0ad02aed3"
 }

package/cjs/components/material-video-file/locales.d.ts

@@ -1,8 +0,0 @@
-export declare const en: {
-    'videoFile.player.preparing': string;
-    'videoFile.player.uploadVideoBtn': string;
-    'videoFile.player.encoding': string;
-    'videoFile.player.encodingFailed': string;
-    'videoFile.player.noVideo': string;
-};
-export declare const ko: typeof en;

package/cjs/components/material-video-file/locales.js

@@ -1,19 +0,0 @@
-'use strict';
-
-const en = {
-  'videoFile.player.preparing': 'Material on preparing.',
-  'videoFile.player.uploadVideoBtn': 'Upload File',
-  'videoFile.player.encoding': 'A video is being prepared.\nPlease check back later.',
-  'videoFile.player.encodingFailed': 'There was a problem processing the video.\nIf the problem persists, please contact customer service.',
-  'videoFile.player.noVideo': 'This file does not exist.'
-};
-const ko = {
-  'videoFile.player.preparing': '자료를 준비 중입니다.',
-  'videoFile.player.uploadVideoBtn': '파일 업로드',
-  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
-  'videoFile.player.encodingFailed': '동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.',
-  'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
-};
-
-exports.en = en;
-exports.ko = ko;

package/es/components/material-video-file/locales.d.ts

@@ -1,8 +0,0 @@
-export declare const en: {
-    'videoFile.player.preparing': string;
-    'videoFile.player.uploadVideoBtn': string;
-    'videoFile.player.encoding': string;
-    'videoFile.player.encodingFailed': string;
-    'videoFile.player.noVideo': string;
-};
-export declare const ko: typeof en;

package/es/components/material-video-file/locales.js

@@ -1,16 +0,0 @@
-const en = {
-  'videoFile.player.preparing': 'Material on preparing.',
-  'videoFile.player.uploadVideoBtn': 'Upload File',
-  'videoFile.player.encoding': 'A video is being prepared.\nPlease check back later.',
-  'videoFile.player.encodingFailed': 'There was a problem processing the video.\nIf the problem persists, please contact customer service.',
-  'videoFile.player.noVideo': 'This file does not exist.'
-};
-const ko = {
-  'videoFile.player.preparing': '자료를 준비 중입니다.',
-  'videoFile.player.uploadVideoBtn': '파일 업로드',
-  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
-  'videoFile.player.encodingFailed': '동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.',
-  'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
-};
-
-export { en, ko };