@elice/material-video-file 1.221026.0 → 1.221028.1

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
-declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
+declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
     materialVideoFileId: number;
     className?: string;

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

@@ -25,6 +25,8 @@ export interface MaterialVideoFilePlayerProps {
     autoPlay?: EliceVideoPlayerSearchParams['autoplay'];
     /** Auto play next lecture page. */
     autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
+    /** End control overlay. */
+    endControl?: EliceVideoPlayerSearchParams['endctrl'];
     /** Locale. */
     locale?: EliceVideoPlayerSearchParams['locale'];
     /** Elice video player url. */

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

@@ -13,6 +13,15 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
+var VideoUploadStatus;
+
+(function (VideoUploadStatus) {
+  VideoUploadStatus[VideoUploadStatus["Empty"] = 0] = "Empty";
+  VideoUploadStatus[VideoUploadStatus["Encoding"] = 1] = "Encoding";
+  VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
+  VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
+})(VideoUploadStatus || (VideoUploadStatus = {}));
+
 var VideoMimeType;
 
 (function (VideoMimeType) {
@@ -38,8 +47,9 @@ const MaterialVideoFilePlayer = ({
   orgNameShort,
   lms = false,
   lmsOrganizationBusinessType = null,
-  autoPlay = true,
-  autoPlayNext = true,
+  autoPlay = false,
+  autoPlayNext = false,
+  endControl = false,
   locale,
   eliceVideoPlayerUrl,
   emptyComponent = null,
@@ -47,12 +57,32 @@ const MaterialVideoFilePlayer = ({
   onNavigatePreviousLecturePage,
   onNavigateNextLecturePage
 }) => {
-  var _a, _b, _c;
-
   const prefixCls = 'em-video-player';
-  const isVideoEncoding = ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === types.enums.AzureMediaVideoStatus.Encoding;
-  const isVideoUploaded = ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === types.enums.AzureMediaVideoStatus.Done && typeof ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.videoStreamingUrl) === 'string';
-  const [playerFrameSrc, setPlayerFrameSrc] = React__default["default"].useState(null); //
+  const [playerFrameSrc, setPlayerFrameSrc] = React__default["default"].useState(null);
+  /**
+   * Current video status.
+   */
+
+  const materialVideoFileUploadStatus = React__default["default"].useMemo(() => {
+    var _a, _b, _c, _d;
+
+    switch (true) {
+      case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
+        return VideoUploadStatus.Empty;
+
+      case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === types.enums.AzureMediaVideoStatus.Encoding:
+        return VideoUploadStatus.Encoding;
+
+      case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === types.enums.AzureMediaVideoStatus.Error:
+        return VideoUploadStatus.EncodingFailed;
+
+      case ((_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.status) === types.enums.AzureMediaVideoStatus.Done && typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string':
+        return VideoUploadStatus.Ready;
+
+      default:
+        return VideoUploadStatus.Empty;
+    }
+  }, [materialVideoFile]); //
   // Get video iframe src.
   //
 
@@ -75,6 +105,7 @@ const MaterialVideoFilePlayer = ({
       codec: VideoMimeType.Smooth,
       autoplay: autoPlay,
       autoplaynext: autoPlayNext,
+      endctrl: endControl,
       notrack: materialVideoFileTrackerDisabled,
       origin: window.location.origin,
       locale,
@@ -96,7 +127,7 @@ const MaterialVideoFilePlayer = ({
     return () => {
       abortCtrl.abort();
     };
-  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, locale]); //
+  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale]); //
   // Add event listener for navigating prev and next lecture page.
   //
 
@@ -142,21 +173,36 @@ const MaterialVideoFilePlayer = ({
 
   if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
     return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Spinner, null));
-  } // empty video / rejected
+  } // rejected / empty video
 
 
-  if (!isVideoUploaded || materialVideoFileStatus === 'rejected') {
+  if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
     return React__default["default"].createElement(React__default["default"].Fragment, {
       children: emptyComponent
     });
   } // encoding
 
 
-  if (isVideoEncoding) {
+  if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
     return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Text, {
-      role: "gray3"
+      role: "gray3",
+      lineHeight: 1.5,
+      textAlign: "center",
+      preWrap: true
+    }, React__default["default"].createElement(reactIntl.FormattedMessage, {
+      id: "videoFile.player.encoding"
+    })));
+  } // encoding failed
+
+
+  if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
+    return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Text, {
+      role: "gray3",
+      lineHeight: 1.5,
+      textAlign: "center",
+      preWrap: true
     }, React__default["default"].createElement(reactIntl.FormattedMessage, {
-      id: "videoFile.player.onEncoding"
+      id: "videoFile.player.encodingFailed"
     })));
   } // resolved
 

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

@@ -13,7 +13,7 @@ const StyledVideoPlayerWrap = styled__default["default"].iframe.withConfig({
 })(["width:100%;height:100%;border:0;"]);
 const StyledVideoPlayerLoading = styled__default["default"].div.withConfig({
   componentId: "sc-1ocq3lp-1"
-})(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
 
 exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;
 exports.StyledVideoPlayerWrap = StyledVideoPlayerWrap;

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

@@ -1,7 +1,8 @@
 export declare const en: {
     'videoFile.player.preparing': string;
     'videoFile.player.uploadVideoBtn': string;
-    'videoFile.player.onEncoding': 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

@@ -5,13 +5,15 @@ 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.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.onEncoding': '파일 인코딩 중..',
+  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
+  'videoFile.player.encodingFailed': '동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.',
   'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
 };
 

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
-declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
+declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
     materialVideoFileId: number;
     className?: string;

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

@@ -25,6 +25,8 @@ export interface MaterialVideoFilePlayerProps {
     autoPlay?: EliceVideoPlayerSearchParams['autoplay'];
     /** Auto play next lecture page. */
     autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
+    /** End control overlay. */
+    endControl?: EliceVideoPlayerSearchParams['endctrl'];
     /** Locale. */
     locale?: EliceVideoPlayerSearchParams['locale'];
     /** Elice video player url. */

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

@@ -6,6 +6,15 @@ import { enums } from '@elice/types';
 import classnames from 'classnames';
 import { StyledVideoPlayerLoading, StyledVideoPlayerWrap } from './MaterialVideoFilePlayer.styled.js';
 
+var VideoUploadStatus;
+
+(function (VideoUploadStatus) {
+  VideoUploadStatus[VideoUploadStatus["Empty"] = 0] = "Empty";
+  VideoUploadStatus[VideoUploadStatus["Encoding"] = 1] = "Encoding";
+  VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
+  VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
+})(VideoUploadStatus || (VideoUploadStatus = {}));
+
 var VideoMimeType;
 
 (function (VideoMimeType) {
@@ -31,8 +40,9 @@ const MaterialVideoFilePlayer = ({
   orgNameShort,
   lms = false,
   lmsOrganizationBusinessType = null,
-  autoPlay = true,
-  autoPlayNext = true,
+  autoPlay = false,
+  autoPlayNext = false,
+  endControl = false,
   locale,
   eliceVideoPlayerUrl,
   emptyComponent = null,
@@ -40,12 +50,32 @@ const MaterialVideoFilePlayer = ({
   onNavigatePreviousLecturePage,
   onNavigateNextLecturePage
 }) => {
-  var _a, _b, _c;
-
   const prefixCls = 'em-video-player';
-  const isVideoEncoding = ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === enums.AzureMediaVideoStatus.Encoding;
-  const isVideoUploaded = ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === enums.AzureMediaVideoStatus.Done && typeof ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.videoStreamingUrl) === 'string';
-  const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null); //
+  const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
+  /**
+   * Current video status.
+   */
+
+  const materialVideoFileUploadStatus = React.useMemo(() => {
+    var _a, _b, _c, _d;
+
+    switch (true) {
+      case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
+        return VideoUploadStatus.Empty;
+
+      case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === enums.AzureMediaVideoStatus.Encoding:
+        return VideoUploadStatus.Encoding;
+
+      case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === enums.AzureMediaVideoStatus.Error:
+        return VideoUploadStatus.EncodingFailed;
+
+      case ((_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.status) === enums.AzureMediaVideoStatus.Done && typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string':
+        return VideoUploadStatus.Ready;
+
+      default:
+        return VideoUploadStatus.Empty;
+    }
+  }, [materialVideoFile]); //
   // Get video iframe src.
   //
 
@@ -68,6 +98,7 @@ const MaterialVideoFilePlayer = ({
       codec: VideoMimeType.Smooth,
       autoplay: autoPlay,
       autoplaynext: autoPlayNext,
+      endctrl: endControl,
       notrack: materialVideoFileTrackerDisabled,
       origin: window.location.origin,
       locale,
@@ -89,7 +120,7 @@ const MaterialVideoFilePlayer = ({
     return () => {
       abortCtrl.abort();
     };
-  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, locale]); //
+  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale]); //
   // Add event listener for navigating prev and next lecture page.
   //
 
@@ -135,21 +166,36 @@ const MaterialVideoFilePlayer = ({
 
   if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
     return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
-  } // empty video / rejected
+  } // rejected / empty video
 
 
-  if (!isVideoUploaded || materialVideoFileStatus === 'rejected') {
+  if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
     return React.createElement(React.Fragment, {
       children: emptyComponent
     });
   } // encoding
 
 
-  if (isVideoEncoding) {
+  if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
     return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null), React.createElement(Text, {
-      role: "gray3"
+      role: "gray3",
+      lineHeight: 1.5,
+      textAlign: "center",
+      preWrap: true
+    }, React.createElement(FormattedMessage, {
+      id: "videoFile.player.encoding"
+    })));
+  } // encoding failed
+
+
+  if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
+    return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Text, {
+      role: "gray3",
+      lineHeight: 1.5,
+      textAlign: "center",
+      preWrap: true
     }, React.createElement(FormattedMessage, {
-      id: "videoFile.player.onEncoding"
+      id: "videoFile.player.encodingFailed"
     })));
   } // resolved
 

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

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

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

@@ -1,7 +1,8 @@
 export declare const en: {
     'videoFile.player.preparing': string;
     'videoFile.player.uploadVideoBtn': string;
-    'videoFile.player.onEncoding': 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,13 +1,15 @@
 const en = {
   'videoFile.player.preparing': 'Material on preparing.',
   'videoFile.player.uploadVideoBtn': 'Upload File',
-  'videoFile.player.onEncoding': 'Encoding 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.onEncoding': '파일 인코딩 중..',
+  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
+  'videoFile.player.encodingFailed': '동영상 준비 중 문제가 발생하였습니다.\n문제가 지속될 경우 고객센터에 문의해주세요.',
   'videoFile.player.noVideo': '존재하지 않는 파일입니다.'
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.221026.0",
+  "version": "1.221028.1",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -35,7 +35,7 @@
     "@elice/icons": "^1.220803.0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
-    "@elice/types": "^1.221026.1",
+    "@elice/types": "^1.221027.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-intl": "^5.0.0",
     "react-use": "^17.0.0",
@@ -52,9 +52,9 @@
     "@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.221026.0",
-    "@elice/material-shared-utils": "1.221026.0",
-    "@elice/types": "^1.221026.1",
+    "@elice/material-shared-types": "1.221028.1",
+    "@elice/material-shared-utils": "1.221028.1",
+    "@elice/types": "^1.221027.0",
     "@types/classnames": "^2.3.1",
     "@types/query-string": "^6.3.0",
     "@types/react": "~17.0.9",
@@ -64,5 +64,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "7de772c5b7ffa0c09afe214c732b3557f5958471"
+  "gitHead": "817b927e18aea831f69af7b40c23ff6699ab14f9"
 }