@elice/material-video-file 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-video-file
+
+User view and editing components of Elice material video file.

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { VideoPlayerProps } from '../video-player';
+declare type PickedVideoPlayerProps = Pick<VideoPlayerProps, 'videoNotUploadedPage' | 'autoPlay' | 'azureVideoPlayerUrl' | 'className' | 'isSupplement' | 'videoGetStatus' | 'videoTitle' | 'userId' | 'isLmsCourse' | 'lmsOrganizationBusinessType'>;
+export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
+    materialVideoFileId: number;
+    locale?: string;
+}
+declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;
+export default MaterialVideoFile;

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var materialSharedUtils = require('@elice/material-shared-utils');
+var classnames = require('classnames');
+var VideoPlayer = require('../video-player/VideoPlayer.js');
+var locales = require('./locales.js');
+var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const MaterialVideoFile = _a => {
+  var _b;
+
+  var {
+    materialVideoFileId,
+    className,
+    locale = 'en'
+  } = _a,
+      videoPlayerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "locale"]);
+
+  const prefixCls = 'em-material-video-file';
+  const {
+    orgNameShort
+  } = materialSharedUtils.useMaterialConfig();
+  const [materialVideoFile, materialVideoFileStatus] = materialSharedUtils.useMaterialInitFetch(apiClient.config.init, React__default["default"].useCallback(signal => apiClient.getOrgMaterialVideoFileGet({
+    materialVideoFileId
+  }, {
+    signal
+  }), [materialVideoFileId]));
+
+  const makeOtpKey = async () => {
+    return apiClient.postGlobalAuthOtpKeyMake().then(res => res.otpKey);
+  }; //
+  //
+  //
+
+
+  return React__default["default"].createElement(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
+    className: classnames__default["default"](prefixCls, className)
+  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : locales.en
+  }, (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) ? React__default["default"].createElement(VideoPlayer, Object.assign({}, videoPlayerProps, {
+    material: (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) !== null && _b !== void 0 ? _b : null,
+    orgNameShort: orgNameShort,
+    videoGetStatus: materialVideoFileStatus,
+    onOtpRequest: makeOtpKey
+  })) : React__default["default"].createElement(blocks.Spinner, null)));
+};
+
+module.exports = MaterialVideoFile;

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

@@ -0,0 +1 @@
+export declare const StyledMaterialVideoFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var designTokens = require('@elice/design-tokens');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMaterialVideoFileWrap = styled__default["default"].div.withConfig({
+  componentId: "sc-1a1otok-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], designTokens.base.color.gray9);
+
+exports.StyledMaterialVideoFileWrap = StyledMaterialVideoFileWrap;

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

@@ -0,0 +1,2 @@
+export { default as MaterialVideoFile } from './MaterialVideoFile';
+export type { MaterialVideoFileProps } from './MaterialVideoFile';

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const en = {
+  'videoFile.player.preparing': 'Material on preparing.',
+  'videoFile.player.uploadVideoBtn': 'Upload File',
+  'videoFile.player.onEncoding': 'Encoding file..',
+  'videoFile.player.noVideo': 'This file does not exist.'
+};
+const ko = {
+  'videoFile.player.preparing': '자료를 준비 중입니다.',
+  'videoFile.player.uploadVideoBtn': '파일 업로드',
+  'videoFile.player.onEncoding': '파일 인코딩 중..',
+  'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
+};
+
+exports.en = en;
+exports.ko = ko;

package/cjs/components/video-player/VideoPlayer.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { EliceVideoPlayerSearchParams } from '@elice/types';
+import type { GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+declare type PickedEliceVideoPlayerSearchParams = Pick<EliceVideoPlayerSearchParams, 'isLmsCourse' | 'userId' | 'lmsOrganizationBusinessType'>;
+export interface VideoPlayerProps extends PickedEliceVideoPlayerSearchParams {
+    /** Material video file data */
+    material: null | GetOrgMaterialVideoFileGetResponses['materialVideoFile'];
+    /** Elice organization name short. */
+    orgNameShort: string;
+    /** The page that shows when the video is not uploaded */
+    videoNotUploadedPage: React.ReactNode;
+    /** Play videos automatically */
+    autoPlay?: boolean;
+    /** Video api server */
+    azureVideoPlayerUrl?: string;
+    /** Classname for the element. */
+    className?: string;
+    /** Check supplement */
+    isSupplement?: boolean;
+    /** Video get api status */
+    videoGetStatus?: APIStatus;
+    /** Video iframe title */
+    videoTitle?: string;
+    /** Get Otp callback */
+    onOtpRequest: () => Promise<string>;
+}
+declare enum VideoMimeType {
+    /** `application/vnd.ms-sstr+xml` */
+    Smooth = "application/vnd.ms-sstr+xml",
+    /** `application/vnd.apple.mpegurl` */
+    Hls = "application/vnd.apple.mpegurl",
+    /** `application/dash+xml` */
+    Mpeg = "application/dash+xml"
+}
+declare const _default: React.FC<VideoPlayerProps> & {
+    MimeType: typeof VideoMimeType;
+};
+export default _default;

package/cjs/components/video-player/VideoPlayer.js

@@ -0,0 +1,158 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var reactUse = require('react-use');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var types = require('@elice/types');
+var classnames = require('classnames');
+var QueryString = require('query-string');
+var VideoPlayer_styled = require('./VideoPlayer.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+var QueryString__default = /*#__PURE__*/_interopDefaultLegacy(QueryString);
+
+var VideoMimeType;
+
+(function (VideoMimeType) {
+  /** `application/vnd.ms-sstr+xml` */
+  VideoMimeType["Smooth"] = "application/vnd.ms-sstr+xml";
+  /** `application/vnd.apple.mpegurl` */
+
+  VideoMimeType["Hls"] = "application/vnd.apple.mpegurl";
+  /** `application/dash+xml` */
+
+  VideoMimeType["Mpeg"] = "application/dash+xml";
+})(VideoMimeType || (VideoMimeType = {}));
+
+const VideoPlayer = ({
+  material,
+  orgNameShort,
+  videoNotUploadedPage,
+  autoPlay = true,
+  azureVideoPlayerUrl,
+  className,
+  isLmsCourse = false,
+  isSupplement,
+  userId,
+  videoTitle,
+  videoGetStatus,
+  lmsOrganizationBusinessType,
+  onOtpRequest
+}) => {
+  var _a, _b;
+
+  const prefixCls = 'em-video-player';
+  const [otp, setOtp] = React__default["default"].useState();
+  /**
+   * Get user otp
+   *
+   * Every time `material` changes, `otp` is called.
+   * Using the previous `otp` result in the following error:
+   *"EliceApiClientError: [invalid_otp_key] logic - the otp key is invalid"
+   */
+
+  reactUse.useDeepCompareEffect(() => {
+    onOtpRequest().then(setOtp).catch(() =>
+    /**
+     * When Otp is undefined, appear error dialog.
+     * Them message is "OTP 세션정보가 없습니다."
+     */
+    setOtp(undefined));
+  }, [material]);
+  /**
+   * Make video search params
+   */
+
+  const makeEncodedUri = () => {
+    var _a, _b;
+
+    const serverUrl = azureVideoPlayerUrl !== null && azureVideoPlayerUrl !== void 0 ? azureVideoPlayerUrl : '';
+    const videoFileUrl = (_b = (_a = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.videoStreamingUrl) !== null && _b !== void 0 ? _b : '';
+    const videoSearchParams = {
+      src: videoFileUrl,
+      type: VideoMimeType.Smooth,
+      orgNameShort,
+      courseId: material === null || material === void 0 ? void 0 : material.courseId,
+      lectureId: material === null || material === void 0 ? void 0 : material.lectureId,
+      materialId: material === null || material === void 0 ? void 0 : material.id,
+      mainOrderNo: !isSupplement ? material === null || material === void 0 ? void 0 : material.mainOrderNo : 0,
+      isLmsCourse,
+      autoplay: autoPlay,
+      userId,
+      location: window.location.hash,
+      otp
+    }; // When only lms, add `lmsOrganizationBusinessType` to search params.
+
+    if (isLmsCourse && typeof lmsOrganizationBusinessType !== undefined) {
+      videoSearchParams.lmsOrganizationBusinessType = lmsOrganizationBusinessType;
+    }
+
+    const encodedUri = `${serverUrl}/?${QueryString__default["default"].stringify(videoSearchParams)}`;
+    return encodedUri;
+  };
+  /**
+   * Check video streaming url
+   */
+
+
+  const isVideoUploaded = Boolean((_a = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.videoStreamingUrl);
+  /**
+   * Check video encoding
+   */
+
+  const isVideoOnEncoding = Boolean(((_b = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === types.enums.AzureMediaVideoStatus.Encoding);
+
+  if (videoGetStatus === 'pending') {
+    return React__default["default"].createElement(blocks.Spinner, null);
+  } // When Video file not found
+
+
+  if (videoGetStatus === 'rejected' || !material) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilStatusWarn,
+      color: designTokens.base.color.white,
+      style: {
+        width: '4rem',
+        height: '4rem'
+      }
+    }), React__default["default"].createElement(blocks.Vspace, {
+      height: 1
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "gray3"
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "videoFile.player.noVideo"
+    })));
+  }
+
+  if (isVideoOnEncoding) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Text, {
+      role: "gray3"
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "videoFile.player.onEncoding"
+    })));
+  }
+
+  if (!isVideoUploaded) {
+    return React__default["default"].createElement(React__default["default"].Fragment, null, videoNotUploadedPage);
+  }
+
+  return otp ? React__default["default"].createElement(VideoPlayer_styled.StyledVideoPlayerWrap, {
+    allowFullScreen: true,
+    className: classnames__default["default"](prefixCls, className),
+    title: videoTitle !== null && videoTitle !== void 0 ? videoTitle : 'video-player',
+    src: makeEncodedUri(),
+    allow: "autoplay"
+  }) : React__default["default"].createElement(VideoPlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Spinner, null));
+};
+
+var VideoPlayer$1 = Object.assign(VideoPlayer, {
+  MimeType: VideoMimeType
+});
+
+module.exports = VideoPlayer$1;

package/cjs/components/video-player/VideoPlayer.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;

package/cjs/components/video-player/VideoPlayer.styled.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledVideoPlayerWrap = styled__default["default"].iframe.withConfig({
+  componentId: "sc-6gevcy-0"
+})(["width:100%;height:100%;border:0;"]);
+const StyledVideoPlayerLoading = styled__default["default"].div.withConfig({
+  componentId: "sc-6gevcy-1"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
+
+exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;
+exports.StyledVideoPlayerWrap = StyledVideoPlayerWrap;

package/cjs/components/video-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VideoPlayer } from './VideoPlayer';
+export type { VideoPlayerProps } from './VideoPlayer';

package/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components/material-video-file';

package/cjs/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialVideoFile = require('./components/material-video-file/MaterialVideoFile.js');
+
+
+
+exports.MaterialVideoFile = MaterialVideoFile;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { VideoPlayerProps } from '../video-player';
+declare type PickedVideoPlayerProps = Pick<VideoPlayerProps, 'videoNotUploadedPage' | 'autoPlay' | 'azureVideoPlayerUrl' | 'className' | 'isSupplement' | 'videoGetStatus' | 'videoTitle' | 'userId' | 'isLmsCourse' | 'lmsOrganizationBusinessType'>;
+export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
+    materialVideoFileId: number;
+    locale?: string;
+}
+declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;
+export default MaterialVideoFile;

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

@@ -0,0 +1,54 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { config, getOrgMaterialVideoFileGet, postGlobalAuthOtpKeyMake } from '@elice/api-client';
+import { Spinner } from '@elice/blocks';
+import { useMaterialConfig, useMaterialInitFetch } from '@elice/material-shared-utils';
+import classnames from 'classnames';
+import VideoPlayer from '../video-player/VideoPlayer.js';
+import * as locales from './locales.js';
+import { en } from './locales.js';
+import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
+
+const MaterialVideoFile = _a => {
+  var _b;
+
+  var {
+    materialVideoFileId,
+    className,
+    locale = 'en'
+  } = _a,
+      videoPlayerProps = __rest(_a, ["materialVideoFileId", "className", "locale"]);
+
+  const prefixCls = 'em-material-video-file';
+  const {
+    orgNameShort
+  } = useMaterialConfig();
+  const [materialVideoFile, materialVideoFileStatus] = useMaterialInitFetch(config.init, React.useCallback(signal => getOrgMaterialVideoFileGet({
+    materialVideoFileId
+  }, {
+    signal
+  }), [materialVideoFileId]));
+
+  const makeOtpKey = async () => {
+    return postGlobalAuthOtpKeyMake().then(res => res.otpKey);
+  }; //
+  //
+  //
+
+
+  return React.createElement(StyledMaterialVideoFileWrap, {
+    className: classnames(prefixCls, className)
+  }, React.createElement(IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : en
+  }, (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) ? React.createElement(VideoPlayer, Object.assign({}, videoPlayerProps, {
+    material: (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) !== null && _b !== void 0 ? _b : null,
+    orgNameShort: orgNameShort,
+    videoGetStatus: materialVideoFileStatus,
+    onOtpRequest: makeOtpKey
+  })) : React.createElement(Spinner, null)));
+};
+
+export { MaterialVideoFile as default };

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

@@ -0,0 +1 @@
+export declare const StyledMaterialVideoFileWrap: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,8 @@
+import { base } from '@elice/design-tokens';
+import styled from 'styled-components';
+
+const StyledMaterialVideoFileWrap = styled.div.withConfig({
+  componentId: "sc-1a1otok-0"
+})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], base.color.gray9);
+
+export { StyledMaterialVideoFileWrap };

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

@@ -0,0 +1,2 @@
+export { default as MaterialVideoFile } from './MaterialVideoFile';
+export type { MaterialVideoFileProps } from './MaterialVideoFile';

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

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

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

@@ -0,0 +1,14 @@
+const en = {
+  'videoFile.player.preparing': 'Material on preparing.',
+  'videoFile.player.uploadVideoBtn': 'Upload File',
+  'videoFile.player.onEncoding': 'Encoding file..',
+  'videoFile.player.noVideo': 'This file does not exist.'
+};
+const ko = {
+  'videoFile.player.preparing': '자료를 준비 중입니다.',
+  'videoFile.player.uploadVideoBtn': '파일 업로드',
+  'videoFile.player.onEncoding': '파일 인코딩 중..',
+  'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
+};
+
+export { en, ko };

package/es/components/video-player/VideoPlayer.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { EliceVideoPlayerSearchParams } from '@elice/types';
+import type { GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+declare type PickedEliceVideoPlayerSearchParams = Pick<EliceVideoPlayerSearchParams, 'isLmsCourse' | 'userId' | 'lmsOrganizationBusinessType'>;
+export interface VideoPlayerProps extends PickedEliceVideoPlayerSearchParams {
+    /** Material video file data */
+    material: null | GetOrgMaterialVideoFileGetResponses['materialVideoFile'];
+    /** Elice organization name short. */
+    orgNameShort: string;
+    /** The page that shows when the video is not uploaded */
+    videoNotUploadedPage: React.ReactNode;
+    /** Play videos automatically */
+    autoPlay?: boolean;
+    /** Video api server */
+    azureVideoPlayerUrl?: string;
+    /** Classname for the element. */
+    className?: string;
+    /** Check supplement */
+    isSupplement?: boolean;
+    /** Video get api status */
+    videoGetStatus?: APIStatus;
+    /** Video iframe title */
+    videoTitle?: string;
+    /** Get Otp callback */
+    onOtpRequest: () => Promise<string>;
+}
+declare enum VideoMimeType {
+    /** `application/vnd.ms-sstr+xml` */
+    Smooth = "application/vnd.ms-sstr+xml",
+    /** `application/vnd.apple.mpegurl` */
+    Hls = "application/vnd.apple.mpegurl",
+    /** `application/dash+xml` */
+    Mpeg = "application/dash+xml"
+}
+declare const _default: React.FC<VideoPlayerProps> & {
+    MimeType: typeof VideoMimeType;
+};
+export default _default;

package/es/components/video-player/VideoPlayer.js

@@ -0,0 +1,150 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDeepCompareEffect } from 'react-use';
+import { Spinner, Icon, Vspace, Text } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilStatusWarn } from '@elice/icons';
+import { enums } from '@elice/types';
+import classnames from 'classnames';
+import QueryString from 'query-string';
+import { StyledVideoPlayerWrap, StyledVideoPlayerLoading } from './VideoPlayer.styled.js';
+
+var VideoMimeType;
+
+(function (VideoMimeType) {
+  /** `application/vnd.ms-sstr+xml` */
+  VideoMimeType["Smooth"] = "application/vnd.ms-sstr+xml";
+  /** `application/vnd.apple.mpegurl` */
+
+  VideoMimeType["Hls"] = "application/vnd.apple.mpegurl";
+  /** `application/dash+xml` */
+
+  VideoMimeType["Mpeg"] = "application/dash+xml";
+})(VideoMimeType || (VideoMimeType = {}));
+
+const VideoPlayer = ({
+  material,
+  orgNameShort,
+  videoNotUploadedPage,
+  autoPlay = true,
+  azureVideoPlayerUrl,
+  className,
+  isLmsCourse = false,
+  isSupplement,
+  userId,
+  videoTitle,
+  videoGetStatus,
+  lmsOrganizationBusinessType,
+  onOtpRequest
+}) => {
+  var _a, _b;
+
+  const prefixCls = 'em-video-player';
+  const [otp, setOtp] = React.useState();
+  /**
+   * Get user otp
+   *
+   * Every time `material` changes, `otp` is called.
+   * Using the previous `otp` result in the following error:
+   *"EliceApiClientError: [invalid_otp_key] logic - the otp key is invalid"
+   */
+
+  useDeepCompareEffect(() => {
+    onOtpRequest().then(setOtp).catch(() =>
+    /**
+     * When Otp is undefined, appear error dialog.
+     * Them message is "OTP 세션정보가 없습니다."
+     */
+    setOtp(undefined));
+  }, [material]);
+  /**
+   * Make video search params
+   */
+
+  const makeEncodedUri = () => {
+    var _a, _b;
+
+    const serverUrl = azureVideoPlayerUrl !== null && azureVideoPlayerUrl !== void 0 ? azureVideoPlayerUrl : '';
+    const videoFileUrl = (_b = (_a = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.videoStreamingUrl) !== null && _b !== void 0 ? _b : '';
+    const videoSearchParams = {
+      src: videoFileUrl,
+      type: VideoMimeType.Smooth,
+      orgNameShort,
+      courseId: material === null || material === void 0 ? void 0 : material.courseId,
+      lectureId: material === null || material === void 0 ? void 0 : material.lectureId,
+      materialId: material === null || material === void 0 ? void 0 : material.id,
+      mainOrderNo: !isSupplement ? material === null || material === void 0 ? void 0 : material.mainOrderNo : 0,
+      isLmsCourse,
+      autoplay: autoPlay,
+      userId,
+      location: window.location.hash,
+      otp
+    }; // When only lms, add `lmsOrganizationBusinessType` to search params.
+
+    if (isLmsCourse && typeof lmsOrganizationBusinessType !== undefined) {
+      videoSearchParams.lmsOrganizationBusinessType = lmsOrganizationBusinessType;
+    }
+
+    const encodedUri = `${serverUrl}/?${QueryString.stringify(videoSearchParams)}`;
+    return encodedUri;
+  };
+  /**
+   * Check video streaming url
+   */
+
+
+  const isVideoUploaded = Boolean((_a = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.videoStreamingUrl);
+  /**
+   * Check video encoding
+   */
+
+  const isVideoOnEncoding = Boolean(((_b = material === null || material === void 0 ? void 0 : material.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === enums.AzureMediaVideoStatus.Encoding);
+
+  if (videoGetStatus === 'pending') {
+    return React.createElement(Spinner, null);
+  } // When Video file not found
+
+
+  if (videoGetStatus === 'rejected' || !material) {
+    return React.createElement(React.Fragment, null, React.createElement(Icon, {
+      icon: eilStatusWarn,
+      color: base.color.white,
+      style: {
+        width: '4rem',
+        height: '4rem'
+      }
+    }), React.createElement(Vspace, {
+      height: 1
+    }), React.createElement(Text, {
+      role: "gray3"
+    }, React.createElement(FormattedMessage, {
+      id: "videoFile.player.noVideo"
+    })));
+  }
+
+  if (isVideoOnEncoding) {
+    return React.createElement(React.Fragment, null, React.createElement(Spinner, null), React.createElement(Text, {
+      role: "gray3"
+    }, React.createElement(FormattedMessage, {
+      id: "videoFile.player.onEncoding"
+    })));
+  }
+
+  if (!isVideoUploaded) {
+    return React.createElement(React.Fragment, null, videoNotUploadedPage);
+  }
+
+  return otp ? React.createElement(StyledVideoPlayerWrap, {
+    allowFullScreen: true,
+    className: classnames(prefixCls, className),
+    title: videoTitle !== null && videoTitle !== void 0 ? videoTitle : 'video-player',
+    src: makeEncodedUri(),
+    allow: "autoplay"
+  }) : React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
+};
+
+var VideoPlayer$1 = Object.assign(VideoPlayer, {
+  MimeType: VideoMimeType
+});
+
+export { VideoPlayer$1 as default };

package/es/components/video-player/VideoPlayer.styled.d.ts

@@ -0,0 +1,2 @@
+export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/video-player/VideoPlayer.styled.js

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+const StyledVideoPlayerWrap = styled.iframe.withConfig({
+  componentId: "sc-6gevcy-0"
+})(["width:100%;height:100%;border:0;"]);
+const StyledVideoPlayerLoading = styled.div.withConfig({
+  componentId: "sc-6gevcy-1"
+})(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
+
+export { StyledVideoPlayerLoading, StyledVideoPlayerWrap };

package/es/components/video-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as VideoPlayer } from './VideoPlayer';
+export type { VideoPlayerProps } from './VideoPlayer';

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './components/material-video-file';

package/es/index.js

@@ -0,0 +1 @@
+export { default as MaterialVideoFile } from './components/material-video-file/MaterialVideoFile.js';

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@elice/material-video-file",
+  "version": "1.220803.0",
+  "description": "User view and editing components of Elice material video file",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/material-shared-types": "22.7.2-1",
+    "@elice/material-shared-utils": "22.7.2-1",
+    "@elice/types": "^1.220802.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"
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "query-string": "^7.1.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@elice/blocks": "^1.220803.0",
+    "@elice/design-tokens": "^1.220803.0",
+    "@elice/icons": "^1.220803.0",
+    "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
+    "@elice/material-shared-types": "1.220803.0",
+    "@elice/material-shared-utils": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@types/classnames": "^2.3.1",
+    "@types/query-string": "^6.3.0",
+    "@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": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}