@elice/material-video-file 1.220919.0 → 1.221026.0

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

@@ -1,8 +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'>;
+import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
+declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
     materialVideoFileId: number;
+    className?: string;
     locale?: string;
 }
 declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;

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

@@ -4,11 +4,10 @@ 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 MaterialVideoFilePlayer = require('./MaterialVideoFilePlayer.js');
 var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -17,14 +16,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 const MaterialVideoFile = _a => {
-  var _b;
+  var _b, _c, _d;
 
   var {
     materialVideoFileId,
     className,
     locale = 'en'
   } = _a,
-      videoPlayerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "locale"]);
+      playerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "locale"]);
 
   const prefixCls = 'em-material-video-file';
   const {
@@ -34,27 +33,22 @@ const MaterialVideoFile = _a => {
     materialVideoFileId
   }, {
     signal
-  }), [materialVideoFileId]));
-
-  const makeOtpKey = async () => {
-    return apiClient.postGlobalAuthOtpKeyMake().then(res => res.otpKey);
-  }; //
+  }), [materialVideoFileId])); //
   //
   //
 
-
   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,
+  }, React__default["default"].createElement(MaterialVideoFilePlayer, Object.assign({}, playerProps, {
     orgNameShort: orgNameShort,
-    videoGetStatus: materialVideoFileStatus,
-    onOtpRequest: makeOtpKey
-  })) : React__default["default"].createElement(blocks.Spinner, null)));
+    materialVideoFile: (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) !== null && _b !== void 0 ? _b : null,
+    materialVideoFileStatus: materialVideoFileStatus,
+    title: (_d = (_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.videoAssetName) !== null && _d !== void 0 ? _d : undefined
+  }))));
 };
 
 module.exports = MaterialVideoFile;

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { EliceVideoPlayerSearchParams, GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+export interface MaterialVideoFilePlayerProps {
+    /** Classname for the element. */
+    className?: string;
+    /** Material video file. */
+    materialVideoFile: null | GetOrgMaterialVideoFileGetResponses['materialVideoFile'];
+    /** Fetch status of material video file.  */
+    materialVideoFileStatus?: APIStatus;
+    /** Disable material video file tracker. */
+    materialVideoFileTrackerDisabled?: EliceVideoPlayerSearchParams['notrack'];
+    /**
+     * Linked material (main lecture page) ID.
+     * If this is set, the material assumed as sub lecture page.
+     */
+    mainLecturePageId?: EliceVideoPlayerSearchParams['lmid'];
+    /** Organization name short. */
+    orgNameShort: EliceVideoPlayerSearchParams['org'];
+    /** Run in LMS env? */
+    lms?: EliceVideoPlayerSearchParams['lms'];
+    /** Type of LMS org business. */
+    lmsOrganizationBusinessType?: EliceVideoPlayerSearchParams['lmstype'];
+    /** Auto play. */
+    autoPlay?: EliceVideoPlayerSearchParams['autoplay'];
+    /** Auto play next lecture page. */
+    autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
+    /** Locale. */
+    locale?: EliceVideoPlayerSearchParams['locale'];
+    /** Elice video player url. */
+    eliceVideoPlayerUrl?: string;
+    /** Empty component. */
+    emptyComponent: React.ReactNode;
+    /** Title of player. (set on iframe) */
+    title?: string;
+    /** Navigate to previous lecture page. */
+    onNavigatePreviousLecturePage?: () => void;
+    /** Navigate to next lecture page. */
+    onNavigateNextLecturePage?: () => void;
+}
+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<MaterialVideoFilePlayerProps> & {
+    MimeType: typeof VideoMimeType;
+};
+export default _default;

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

@@ -0,0 +1,177 @@
+'use strict';
+
+var React = require('react');
+var reactIntl = require('react-intl');
+var apiClient = require('@elice/api-client');
+var blocks = require('@elice/blocks');
+var types = require('@elice/types');
+var classnames = require('classnames');
+var MaterialVideoFilePlayer_styled = require('./MaterialVideoFilePlayer.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 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 ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-video-player';
+const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
+
+const MaterialVideoFilePlayer = ({
+  className,
+  materialVideoFile,
+  materialVideoFileStatus = 'idle',
+  materialVideoFileTrackerDisabled = false,
+  mainLecturePageId,
+  orgNameShort,
+  lms = false,
+  lmsOrganizationBusinessType = null,
+  autoPlay = true,
+  autoPlayNext = true,
+  locale,
+  eliceVideoPlayerUrl,
+  emptyComponent = null,
+  title = 'elice-video-player',
+  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); //
+  // Get video iframe src.
+  //
+
+  React__default["default"].useEffect(() => {
+    if (!eliceVideoPlayerUrl || !materialVideoFile) {
+      return;
+    }
+
+    const abortCtrl = new AbortController();
+    apiClient.postGlobalAuthOtpKeyMake({
+      signal: abortCtrl.signal
+    }) // issue otp key
+    .then(res => res.otpKey) // create search params
+    .then(otp => ({
+      org: orgNameShort,
+      mid: materialVideoFile.id,
+      lmid: mainLecturePageId,
+      lms,
+      lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
+      codec: VideoMimeType.Smooth,
+      autoplay: autoPlay,
+      autoplaynext: autoPlayNext,
+      notrack: materialVideoFileTrackerDisabled,
+      origin: window.location.origin,
+      locale,
+      otp
+    })) // create url from search params
+    .then(params => {
+      const url = new URL(eliceVideoPlayerUrl);
+      Object.entries(params).forEach(([key, value]) => {
+        if (value) {
+          url.searchParams.set(key, value);
+        }
+      });
+      return url;
+    }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
+      if (err.name !== 'AbortError') {
+        setPlayerFrameSrc(null);
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, locale]); //
+  // Add event listener for navigating prev and next lecture page.
+  //
+
+  React__default["default"].useEffect(() => {
+    const _handle = event => {
+      var _a, _b, _c;
+
+      try {
+        const edata = JSON.parse(event.data);
+
+        if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
+          return;
+        }
+
+        switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
+          case 'previous':
+            if (typeof onNavigatePreviousLecturePage === 'function') {
+              onNavigatePreviousLecturePage();
+            }
+
+            break;
+
+          case 'next':
+            if (typeof onNavigateNextLecturePage === 'function') {
+              onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
+            }
+
+            break;
+        }
+      } catch (_) {//
+      }
+    };
+
+    window.addEventListener('message', _handle);
+    return () => {
+      window.removeEventListener('message', _handle);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  //
+  //
+  // pending
+
+  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
+
+
+  if (!isVideoUploaded || materialVideoFileStatus === 'rejected') {
+    return React__default["default"].createElement(React__default["default"].Fragment, {
+      children: emptyComponent
+    });
+  } // encoding
+
+
+  if (isVideoEncoding) {
+    return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, 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"
+    })));
+  } // resolved
+
+
+  return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
+    className: classnames__default["default"](prefixCls, className),
+    src: playerFrameSrc,
+    title: title,
+    allow: "autoplay",
+    allowFullScreen: true
+  });
+};
+
+var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
+  MimeType: VideoMimeType
+});
+
+module.exports = MaterialVideoFilePlayer$1;

package/cjs/components/{video-player/VideoPlayer.styled.js → material-video-file/MaterialVideoFilePlayer.styled.js}

@@ -9,10 +9,10 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 const StyledVideoPlayerWrap = styled__default["default"].iframe.withConfig({
-  componentId: "sc-6gevcy-0"
+  componentId: "sc-1ocq3lp-0"
 })(["width:100%;height:100%;border:0;"]);
 const StyledVideoPlayerLoading = styled__default["default"].div.withConfig({
-  componentId: "sc-6gevcy-1"
+  componentId: "sc-1ocq3lp-1"
 })(["width:100%;height:100%;display:flex;align-items:center;justify-content:center;"]);
 
 exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;

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

@@ -1,8 +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'>;
+import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
+declare type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
 export interface MaterialVideoFileProps extends PickedVideoPlayerProps {
     materialVideoFileId: number;
+    className?: string;
     locale?: string;
 }
 declare const MaterialVideoFile: React.FC<MaterialVideoFileProps>;

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

@@ -1,24 +1,23 @@
 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 { config, getOrgMaterialVideoFileGet } from '@elice/api-client';
 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 MaterialVideoFilePlayer from './MaterialVideoFilePlayer.js';
 import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
 
 const MaterialVideoFile = _a => {
-  var _b;
+  var _b, _c, _d;
 
   var {
     materialVideoFileId,
     className,
     locale = 'en'
   } = _a,
-      videoPlayerProps = __rest(_a, ["materialVideoFileId", "className", "locale"]);
+      playerProps = __rest(_a, ["materialVideoFileId", "className", "locale"]);
 
   const prefixCls = 'em-material-video-file';
   const {
@@ -28,27 +27,22 @@ const MaterialVideoFile = _a => {
     materialVideoFileId
   }, {
     signal
-  }), [materialVideoFileId]));
-
-  const makeOtpKey = async () => {
-    return postGlobalAuthOtpKeyMake().then(res => res.otpKey);
-  }; //
+  }), [materialVideoFileId])); //
   //
   //
 
-
   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,
+  }, React.createElement(MaterialVideoFilePlayer, Object.assign({}, playerProps, {
     orgNameShort: orgNameShort,
-    videoGetStatus: materialVideoFileStatus,
-    onOtpRequest: makeOtpKey
-  })) : React.createElement(Spinner, null)));
+    materialVideoFile: (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile) !== null && _b !== void 0 ? _b : null,
+    materialVideoFileStatus: materialVideoFileStatus,
+    title: (_d = (_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.videoAssetName) !== null && _d !== void 0 ? _d : undefined
+  }))));
 };
 
 export { MaterialVideoFile as default };

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { EliceVideoPlayerSearchParams, GetOrgMaterialVideoFileGetResponses } from '@elice/types';
+export interface MaterialVideoFilePlayerProps {
+    /** Classname for the element. */
+    className?: string;
+    /** Material video file. */
+    materialVideoFile: null | GetOrgMaterialVideoFileGetResponses['materialVideoFile'];
+    /** Fetch status of material video file.  */
+    materialVideoFileStatus?: APIStatus;
+    /** Disable material video file tracker. */
+    materialVideoFileTrackerDisabled?: EliceVideoPlayerSearchParams['notrack'];
+    /**
+     * Linked material (main lecture page) ID.
+     * If this is set, the material assumed as sub lecture page.
+     */
+    mainLecturePageId?: EliceVideoPlayerSearchParams['lmid'];
+    /** Organization name short. */
+    orgNameShort: EliceVideoPlayerSearchParams['org'];
+    /** Run in LMS env? */
+    lms?: EliceVideoPlayerSearchParams['lms'];
+    /** Type of LMS org business. */
+    lmsOrganizationBusinessType?: EliceVideoPlayerSearchParams['lmstype'];
+    /** Auto play. */
+    autoPlay?: EliceVideoPlayerSearchParams['autoplay'];
+    /** Auto play next lecture page. */
+    autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
+    /** Locale. */
+    locale?: EliceVideoPlayerSearchParams['locale'];
+    /** Elice video player url. */
+    eliceVideoPlayerUrl?: string;
+    /** Empty component. */
+    emptyComponent: React.ReactNode;
+    /** Title of player. (set on iframe) */
+    title?: string;
+    /** Navigate to previous lecture page. */
+    onNavigatePreviousLecturePage?: () => void;
+    /** Navigate to next lecture page. */
+    onNavigateNextLecturePage?: () => void;
+}
+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<MaterialVideoFilePlayerProps> & {
+    MimeType: typeof VideoMimeType;
+};
+export default _default;

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { postGlobalAuthOtpKeyMake } from '@elice/api-client';
+import { Spinner, Text } from '@elice/blocks';
+import { enums } from '@elice/types';
+import classnames from 'classnames';
+import { StyledVideoPlayerLoading, StyledVideoPlayerWrap } from './MaterialVideoFilePlayer.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 ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-video-player';
+const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
+
+const MaterialVideoFilePlayer = ({
+  className,
+  materialVideoFile,
+  materialVideoFileStatus = 'idle',
+  materialVideoFileTrackerDisabled = false,
+  mainLecturePageId,
+  orgNameShort,
+  lms = false,
+  lmsOrganizationBusinessType = null,
+  autoPlay = true,
+  autoPlayNext = true,
+  locale,
+  eliceVideoPlayerUrl,
+  emptyComponent = null,
+  title = 'elice-video-player',
+  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); //
+  // Get video iframe src.
+  //
+
+  React.useEffect(() => {
+    if (!eliceVideoPlayerUrl || !materialVideoFile) {
+      return;
+    }
+
+    const abortCtrl = new AbortController();
+    postGlobalAuthOtpKeyMake({
+      signal: abortCtrl.signal
+    }) // issue otp key
+    .then(res => res.otpKey) // create search params
+    .then(otp => ({
+      org: orgNameShort,
+      mid: materialVideoFile.id,
+      lmid: mainLecturePageId,
+      lms,
+      lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
+      codec: VideoMimeType.Smooth,
+      autoplay: autoPlay,
+      autoplaynext: autoPlayNext,
+      notrack: materialVideoFileTrackerDisabled,
+      origin: window.location.origin,
+      locale,
+      otp
+    })) // create url from search params
+    .then(params => {
+      const url = new URL(eliceVideoPlayerUrl);
+      Object.entries(params).forEach(([key, value]) => {
+        if (value) {
+          url.searchParams.set(key, value);
+        }
+      });
+      return url;
+    }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
+      if (err.name !== 'AbortError') {
+        setPlayerFrameSrc(null);
+      }
+    });
+    return () => {
+      abortCtrl.abort();
+    };
+  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, locale]); //
+  // Add event listener for navigating prev and next lecture page.
+  //
+
+  React.useEffect(() => {
+    const _handle = event => {
+      var _a, _b, _c;
+
+      try {
+        const edata = JSON.parse(event.data);
+
+        if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
+          return;
+        }
+
+        switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
+          case 'previous':
+            if (typeof onNavigatePreviousLecturePage === 'function') {
+              onNavigatePreviousLecturePage();
+            }
+
+            break;
+
+          case 'next':
+            if (typeof onNavigateNextLecturePage === 'function') {
+              onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
+            }
+
+            break;
+        }
+      } catch (_) {//
+      }
+    };
+
+    window.addEventListener('message', _handle);
+    return () => {
+      window.removeEventListener('message', _handle);
+    };
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  []); //
+  //
+  //
+  // pending
+
+  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
+    return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
+  } // empty video / rejected
+
+
+  if (!isVideoUploaded || materialVideoFileStatus === 'rejected') {
+    return React.createElement(React.Fragment, {
+      children: emptyComponent
+    });
+  } // encoding
+
+
+  if (isVideoEncoding) {
+    return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null), React.createElement(Text, {
+      role: "gray3"
+    }, React.createElement(FormattedMessage, {
+      id: "videoFile.player.onEncoding"
+    })));
+  } // resolved
+
+
+  return React.createElement(StyledVideoPlayerWrap, {
+    className: classnames(prefixCls, className),
+    src: playerFrameSrc,
+    title: title,
+    allow: "autoplay",
+    allowFullScreen: true
+  });
+};
+
+var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
+  MimeType: VideoMimeType
+});
+
+export { MaterialVideoFilePlayer$1 as default };

package/es/components/{video-player/VideoPlayer.styled.js → material-video-file/MaterialVideoFilePlayer.styled.js}

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.220919.0",
+  "version": "1.221026.0",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -33,9 +33,9 @@
     "@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.220914.0",
+    "@elice/material-shared-types": "*",
+    "@elice/material-shared-utils": "*",
+    "@elice/types": "^1.221026.1",
     "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.220919.0",
-    "@elice/material-shared-utils": "1.220919.0",
-    "@elice/types": "^1.220914.0",
+    "@elice/material-shared-types": "1.221026.0",
+    "@elice/material-shared-utils": "1.221026.0",
+    "@elice/types": "^1.221026.1",
     "@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": "bddb3a6f9165572b2ba351356d5443f85d0ff519"
+  "gitHead": "7de772c5b7ffa0c09afe214c732b3557f5958471"
 }

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

@@ -1,39 +0,0 @@
-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

@@ -1,158 +0,0 @@
-'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/index.d.ts

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

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

@@ -1,39 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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/index.d.ts

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