@elice/material-video-file 1.250828.0 → 1.250904.0

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithIntlComponentBuilderProps } from '@elice/intl';
+import type { EliceVideoplayerApis } from '@elice/videoplayer-client';
 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' | 'onTranscriptToggle'>;
@@ -7,5 +7,7 @@ export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMater
     materialVideoFileId: number;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoFileProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<MaterialVideoFileProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<EliceVideoplayerApis>>;
 export default _default;

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

@@ -24,7 +24,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
 //
 //
 //
-var MaterialVideoFile = function MaterialVideoFile(_a) {
+var MaterialVideoFile = React.forwardRef(function (_a, ref) {
   var _b, _c, _d, _e;
   var materialVideoFileId = _a.materialVideoFileId,
     className = _a.className,
@@ -59,11 +59,12 @@ var MaterialVideoFile = function MaterialVideoFile(_a) {
         materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
         materialVideoFileStatus: materialVideoFileStatus,
         accountApi: accountApi,
-        title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined
+        title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined,
+        ref: ref
       }))
     })
   });
-};
+});
 var MaterialVideoFile$1 = new intl.IntlComponentBuilder(MaterialVideoFile).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
 
 exports.default = MaterialVideoFile$1;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { APIStatus } from '@elice/material-shared-types';
 import type { EliceVideoPlayerSearchParams, GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+import type { EliceVideoplayerApis } from '@elice/videoplayer-client';
 import type { UseMaterialVideoFileApiReturn } from './useMaterialVideoFileApi';
 export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiReturn {
     /** Classname for the element. */
@@ -41,5 +42,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     /** Toggle transcript. */
     onTranscriptToggle?: (enabled: boolean) => void;
 }
-declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
+declare const MaterialVideoFilePlayer: React.ForwardRefExoticComponent<MaterialVideoFilePlayerProps & React.RefAttributes<EliceVideoplayerApis>>;
 export default MaterialVideoFilePlayer;

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

@@ -28,7 +28,7 @@ var VideoUploadStatus;
 //
 //
 //
-var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
+var MaterialVideoFilePlayer = React.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     materialVideoFile = _ref.materialVideoFile,
     _ref$materialVideoFil = _ref.materialVideoFileStatus,
@@ -54,7 +54,6 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
     onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
     _onTranscriptToggle = _ref.onTranscriptToggle,
     accountApi = _ref.accountApi;
-  var _a;
   var prefixCls = 'em-video-player';
   var intl$1 = intl.useRawEliceIntl();
   /**
@@ -95,79 +94,104 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
         return VideoUploadStatus.Empty;
     }
   }, [materialVideoFile]);
+  /**
+   *
+   */
+  var renderVideoPlayerOverlayContent = function renderVideoPlayerOverlayContent() {
+    // pending
+    if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
+      return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
+        children: jsxRuntime.jsx(blocks.Spinner, {})
+      });
+    }
+    // rejected / empty video
+    if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
+      return jsxRuntime.jsx(React__default.default.Fragment, {
+        children: emptyComponent
+      });
+    }
+    // encoding
+    if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
+      return jsxRuntime.jsxs(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
+        children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
+          role: "gray3",
+          lineHeight: 1.5,
+          textAlign: "center",
+          preWrap: true,
+          children: intl$1.formatMessage({
+            id: 'videoFile.player.encoding'
+          })
+        })]
+      });
+    }
+    // encoding failed
+    if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
+      return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
+        children: jsxRuntime.jsx(blocks.Text, {
+          role: "gray3",
+          lineHeight: 1.5,
+          textAlign: "center",
+          preWrap: true,
+          children: intl$1.formatMessage({
+            id: 'videoFile.player.encodingFailed'
+          })
+        })
+      });
+    }
+    return null;
+  };
+  /**
+   *
+   */
+  var renderVideoPlayerOverlay = function renderVideoPlayerOverlay() {
+    var content = renderVideoPlayerOverlayContent();
+    return content ? jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerOverlay, {
+      children: content
+    }) : null;
+  };
+  /**
+   *
+   */
+  var renderVideoPlayer = function renderVideoPlayer() {
+    var _a;
+    return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
+      className: classnames__default.default(prefixCls, className),
+      orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
+      materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
+      linkedMaterialId: mainLecturePageId,
+      lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
+      noAutoplay: !autoPlay,
+      noAutoplayNext: !autoPlayNext,
+      noEndControl: !endControl,
+      noTracker: materialVideoFileTrackerDisabled,
+      playerBaseUrl: eliceVideoPlayerUrl,
+      otp: function otp() {
+        return accountApi.auth.authOtpPost().then(function (res) {
+          return res.otp;
+        });
+      },
+      onLecturePageNavigate: function onLecturePageNavigate(dir) {
+        if (dir === 'prev' && onNavigatePreviousLecturePage) {
+          onNavigatePreviousLecturePage();
+        } else if (dir === 'next' && onNavigateNextLecturePage) {
+          onNavigateNextLecturePage();
+        }
+      },
+      onTranscriptToggle: function onTranscriptToggle(enabled) {
+        if (typeof _onTranscriptToggle === 'function') {
+          _onTranscriptToggle(enabled);
+        }
+      },
+      ref: ref
+    });
+  };
   //
   //
   //
-  // pending
-  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
-    return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
-      children: jsxRuntime.jsx(blocks.Spinner, {})
-    });
-  }
-  // rejected / empty video
-  if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
-    return jsxRuntime.jsx(React__default.default.Fragment, {
-      children: emptyComponent
-    });
-  }
-  // encoding
-  if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
-    return jsxRuntime.jsxs(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
-      children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
-        role: "gray3",
-        lineHeight: 1.5,
-        textAlign: "center",
-        preWrap: true,
-        children: intl$1.formatMessage({
-          id: 'videoFile.player.encoding'
-        })
-      })]
-    });
-  }
-  // encoding failed
-  if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
-    return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
-      children: jsxRuntime.jsx(blocks.Text, {
-        role: "gray3",
-        lineHeight: 1.5,
-        textAlign: "center",
-        preWrap: true,
-        children: intl$1.formatMessage({
-          id: 'videoFile.player.encodingFailed'
-        })
-      })
-    });
-  }
   // resolved
-  return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
-    className: classnames__default.default(prefixCls, className),
-    orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
-    materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
-    linkedMaterialId: mainLecturePageId,
-    lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
-    noAutoplay: !autoPlay,
-    noAutoplayNext: !autoPlayNext,
-    noEndControl: !endControl,
-    noTracker: materialVideoFileTrackerDisabled,
-    playerBaseUrl: eliceVideoPlayerUrl,
-    otp: function otp() {
-      return accountApi.auth.authOtpPost().then(function (res) {
-        return res.otp;
-      });
-    },
-    onLecturePageNavigate: function onLecturePageNavigate(dir) {
-      if (dir === 'prev' && onNavigatePreviousLecturePage) {
-        onNavigatePreviousLecturePage();
-      } else if (dir === 'next' && onNavigateNextLecturePage) {
-        onNavigateNextLecturePage();
-      }
-    },
-    onTranscriptToggle: function onTranscriptToggle(enabled) {
-      if (typeof _onTranscriptToggle === 'function') {
-        _onTranscriptToggle(enabled);
-      }
-    }
+  return jsxRuntime.jsxs(MaterialVideoFilePlayer_styled.StyledVideoPlayerContainer, {
+    children: [renderVideoPlayer(), renderVideoPlayerOverlay()]
   });
-};
+});
 
 exports.default = MaterialVideoFilePlayer;

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
     __intl: import("@elice/intl").EliceIntlShape;
-}, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
+} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>>, any, {}, never>;
+export declare const StyledVideoPlayerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledVideoPlayerOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -10,9 +10,17 @@ var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 var StyledVideoPlayer = styled__default.default(videoplayerClient.EliceVideoplayer).withConfig({
   componentId: "sc-1ocq3lp-0"
 })(["width:100%;height:100%;border:0;"]);
-var StyledVideoPlayerLoading = styled__default.default.div.withConfig({
+var StyledVideoPlayerContainer = styled__default.default.div.withConfig({
   componentId: "sc-1ocq3lp-1"
+})(["position:relative;width:100%;height:100%;"]);
+var StyledVideoPlayerLoading = styled__default.default.div.withConfig({
+  componentId: "sc-1ocq3lp-2"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
+var StyledVideoPlayerOverlay = styled__default.default.div.withConfig({
+  componentId: "sc-1ocq3lp-3"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1;"]);
 
 exports.StyledVideoPlayer = StyledVideoPlayer;
+exports.StyledVideoPlayerContainer = StyledVideoPlayerContainer;
 exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;
+exports.StyledVideoPlayerOverlay = StyledVideoPlayerOverlay;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { WithIntlComponentBuilderProps } from '@elice/intl';
+import type { EliceVideoplayerApis } from '@elice/videoplayer-client';
 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' | 'onTranscriptToggle'>;
@@ -7,5 +7,7 @@ export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMater
     materialVideoFileId: number;
     className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<WithIntlComponentBuilderProps<MaterialVideoFileProps>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<MaterialVideoFileProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+} & React.RefAttributes<EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & React.RefAttributes<EliceVideoplayerApis>>;
 export default _default;

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

@@ -1,8 +1,8 @@
 import { __rest } from 'tslib';
 import { jsx } from 'react/jsx-runtime';
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { getOrgMaterialVideoFileGet, config } from '@elice/api-client';
-import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
+import { RawEliceIntlProvider, IntlComponentBuilder } from '@elice/intl';
 import { useMaterialConfig, useMaterialFetch } from '@elice/material-shared-utils';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
@@ -15,7 +15,7 @@ import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
 //
 //
 //
-var MaterialVideoFile = function MaterialVideoFile(_a) {
+var MaterialVideoFile = forwardRef(function (_a, ref) {
   var _b, _c, _d, _e;
   var materialVideoFileId = _a.materialVideoFileId,
     className = _a.className,
@@ -50,11 +50,12 @@ var MaterialVideoFile = function MaterialVideoFile(_a) {
         materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
         materialVideoFileStatus: materialVideoFileStatus,
         accountApi: accountApi,
-        title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined
+        title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined,
+        ref: ref
       }))
     })
   });
-};
+});
 var MaterialVideoFile$1 = new IntlComponentBuilder(MaterialVideoFile).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
 
 export { MaterialVideoFile$1 as default };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { APIStatus } from '@elice/material-shared-types';
 import type { EliceVideoPlayerSearchParams, GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+import type { EliceVideoplayerApis } from '@elice/videoplayer-client';
 import type { UseMaterialVideoFileApiReturn } from './useMaterialVideoFileApi';
 export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiReturn {
     /** Classname for the element. */
@@ -41,5 +42,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     /** Toggle transcript. */
     onTranscriptToggle?: (enabled: boolean) => void;
 }
-declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
+declare const MaterialVideoFilePlayer: React.ForwardRefExoticComponent<MaterialVideoFilePlayerProps & React.RefAttributes<EliceVideoplayerApis>>;
 export default MaterialVideoFilePlayer;

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

@@ -1,10 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { forwardRef } from 'react';
 import { Spinner, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
-import { StyledVideoPlayerLoading, StyledVideoPlayer } from './MaterialVideoFilePlayer.styled.js';
+import { StyledVideoPlayerContainer, StyledVideoPlayerOverlay, StyledVideoPlayer, StyledVideoPlayerLoading } from './MaterialVideoFilePlayer.styled.js';
 
 //
 //
@@ -19,7 +19,7 @@ var VideoUploadStatus;
 //
 //
 //
-var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
+var MaterialVideoFilePlayer = forwardRef(function (_ref, ref) {
   var className = _ref.className,
     materialVideoFile = _ref.materialVideoFile,
     _ref$materialVideoFil = _ref.materialVideoFileStatus,
@@ -45,7 +45,6 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
     onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
     _onTranscriptToggle = _ref.onTranscriptToggle,
     accountApi = _ref.accountApi;
-  var _a;
   var prefixCls = 'em-video-player';
   var intl = useRawEliceIntl();
   /**
@@ -86,79 +85,104 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
         return VideoUploadStatus.Empty;
     }
   }, [materialVideoFile]);
+  /**
+   *
+   */
+  var renderVideoPlayerOverlayContent = function renderVideoPlayerOverlayContent() {
+    // pending
+    if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
+      return jsx(StyledVideoPlayerLoading, {
+        children: jsx(Spinner, {})
+      });
+    }
+    // rejected / empty video
+    if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
+      return jsx(React.Fragment, {
+        children: emptyComponent
+      });
+    }
+    // encoding
+    if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
+      return jsxs(StyledVideoPlayerLoading, {
+        children: [jsx(Spinner, {}), jsx(Text, {
+          role: "gray3",
+          lineHeight: 1.5,
+          textAlign: "center",
+          preWrap: true,
+          children: intl.formatMessage({
+            id: 'videoFile.player.encoding'
+          })
+        })]
+      });
+    }
+    // encoding failed
+    if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
+      return jsx(StyledVideoPlayerLoading, {
+        children: jsx(Text, {
+          role: "gray3",
+          lineHeight: 1.5,
+          textAlign: "center",
+          preWrap: true,
+          children: intl.formatMessage({
+            id: 'videoFile.player.encodingFailed'
+          })
+        })
+      });
+    }
+    return null;
+  };
+  /**
+   *
+   */
+  var renderVideoPlayerOverlay = function renderVideoPlayerOverlay() {
+    var content = renderVideoPlayerOverlayContent();
+    return content ? jsx(StyledVideoPlayerOverlay, {
+      children: content
+    }) : null;
+  };
+  /**
+   *
+   */
+  var renderVideoPlayer = function renderVideoPlayer() {
+    var _a;
+    return jsx(StyledVideoPlayer, {
+      className: classnames(prefixCls, className),
+      orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
+      materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
+      linkedMaterialId: mainLecturePageId,
+      lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
+      noAutoplay: !autoPlay,
+      noAutoplayNext: !autoPlayNext,
+      noEndControl: !endControl,
+      noTracker: materialVideoFileTrackerDisabled,
+      playerBaseUrl: eliceVideoPlayerUrl,
+      otp: function otp() {
+        return accountApi.auth.authOtpPost().then(function (res) {
+          return res.otp;
+        });
+      },
+      onLecturePageNavigate: function onLecturePageNavigate(dir) {
+        if (dir === 'prev' && onNavigatePreviousLecturePage) {
+          onNavigatePreviousLecturePage();
+        } else if (dir === 'next' && onNavigateNextLecturePage) {
+          onNavigateNextLecturePage();
+        }
+      },
+      onTranscriptToggle: function onTranscriptToggle(enabled) {
+        if (typeof _onTranscriptToggle === 'function') {
+          _onTranscriptToggle(enabled);
+        }
+      },
+      ref: ref
+    });
+  };
   //
   //
   //
-  // pending
-  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
-    return jsx(StyledVideoPlayerLoading, {
-      children: jsx(Spinner, {})
-    });
-  }
-  // rejected / empty video
-  if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
-    return jsx(React.Fragment, {
-      children: emptyComponent
-    });
-  }
-  // encoding
-  if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
-    return jsxs(StyledVideoPlayerLoading, {
-      children: [jsx(Spinner, {}), jsx(Text, {
-        role: "gray3",
-        lineHeight: 1.5,
-        textAlign: "center",
-        preWrap: true,
-        children: intl.formatMessage({
-          id: 'videoFile.player.encoding'
-        })
-      })]
-    });
-  }
-  // encoding failed
-  if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
-    return jsx(StyledVideoPlayerLoading, {
-      children: jsx(Text, {
-        role: "gray3",
-        lineHeight: 1.5,
-        textAlign: "center",
-        preWrap: true,
-        children: intl.formatMessage({
-          id: 'videoFile.player.encodingFailed'
-        })
-      })
-    });
-  }
   // resolved
-  return jsx(StyledVideoPlayer, {
-    className: classnames(prefixCls, className),
-    orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
-    materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
-    linkedMaterialId: mainLecturePageId,
-    lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
-    noAutoplay: !autoPlay,
-    noAutoplayNext: !autoPlayNext,
-    noEndControl: !endControl,
-    noTracker: materialVideoFileTrackerDisabled,
-    playerBaseUrl: eliceVideoPlayerUrl,
-    otp: function otp() {
-      return accountApi.auth.authOtpPost().then(function (res) {
-        return res.otp;
-      });
-    },
-    onLecturePageNavigate: function onLecturePageNavigate(dir) {
-      if (dir === 'prev' && onNavigatePreviousLecturePage) {
-        onNavigatePreviousLecturePage();
-      } else if (dir === 'next' && onNavigateNextLecturePage) {
-        onNavigateNextLecturePage();
-      }
-    },
-    onTranscriptToggle: function onTranscriptToggle(enabled) {
-      if (typeof _onTranscriptToggle === 'function') {
-        _onTranscriptToggle(enabled);
-      }
-    }
+  return jsxs(StyledVideoPlayerContainer, {
+    children: [renderVideoPlayer(), renderVideoPlayerOverlay()]
   });
-};
+});
 
 export { MaterialVideoFilePlayer as default };

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

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
+export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
     __intl: import("@elice/intl").EliceIntlShape;
-}, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
+} & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>, keyof import("@elice/intl").IntlComponentExtraProps | "__intl">, "ref"> & import("react").RefAttributes<import("@elice/videoplayer-client").EliceVideoplayerApis>>, any, {}, never>;
+export declare const StyledVideoPlayerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledVideoPlayerOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -4,8 +4,14 @@ import styled from 'styled-components';
 var StyledVideoPlayer = styled(EliceVideoplayer).withConfig({
   componentId: "sc-1ocq3lp-0"
 })(["width:100%;height:100%;border:0;"]);
-var StyledVideoPlayerLoading = styled.div.withConfig({
+var StyledVideoPlayerContainer = styled.div.withConfig({
   componentId: "sc-1ocq3lp-1"
+})(["position:relative;width:100%;height:100%;"]);
+var StyledVideoPlayerLoading = styled.div.withConfig({
+  componentId: "sc-1ocq3lp-2"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
+var StyledVideoPlayerOverlay = styled.div.withConfig({
+  componentId: "sc-1ocq3lp-3"
+})(["position:absolute;top:0;left:0;width:100%;height:100%;background-color:#000;z-index:1;"]);
 
-export { StyledVideoPlayer, StyledVideoPlayerLoading };
+export { StyledVideoPlayer, StyledVideoPlayerContainer, StyledVideoPlayerLoading, StyledVideoPlayerOverlay };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.250828.0",
+  "version": "1.250904.0",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -50,12 +50,12 @@
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.241127.0",
-    "@elice/material-shared-types": "1.250828.0",
-    "@elice/material-shared-utils": "1.250828.0",
+    "@elice/material-shared-types": "1.250904.0",
+    "@elice/material-shared-utils": "1.250904.0",
     "@elice/messenger": "^1.240426.0",
     "@elice/openapi-client-account": "^1.230814.0",
     "@elice/types": "^1.250612.0-teamleaderboard.1",
-    "@elice/videoplayer-client": "^2.240717.0-transcript.0",
+    "@elice/videoplayer-client": "^2.250903.1",
     "@types/classnames": "^2.3.1",
     "@types/query-string": "^6.3.0",
     "@types/react": "~17.0.9",