@elice/material-video-file 1.240614.0 → 1.240618.0

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

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

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

@@ -28,8 +28,6 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
     /** End control overlay. */
     endControl?: EliceVideoPlayerSearchParams['endctrl'];
-    /** Locale. */
-    locale?: EliceVideoPlayerSearchParams['locale'];
     /** Elice video player url. */
     eliceVideoPlayerUrl?: string;
     /** Empty component. */
@@ -41,15 +39,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     /** 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;
+declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
+export default MaterialVideoFilePlayer;

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

@@ -19,20 +19,6 @@ var VideoUploadStatus;
   VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
   VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
 })(VideoUploadStatus || (VideoUploadStatus = {}));
-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-videoplayer';
-const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
 //
 //
 //
@@ -48,17 +34,15 @@ const MaterialVideoFilePlayer = ({
   autoPlay = false,
   autoPlayNext = false,
   endControl = false,
-  locale,
   eliceVideoPlayerUrl,
   emptyComponent = null,
-  title = 'elice-videoplayer',
   onNavigatePreviousLecturePage,
   onNavigateNextLecturePage,
   accountApi
 }) => {
+  var _a;
   const prefixCls = 'em-video-player';
   const intl$1 = intl.useRawEliceIntl();
-  const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
   /**
    * Current video status.
    */
@@ -78,91 +62,10 @@ const MaterialVideoFilePlayer = ({
     }
   }, [materialVideoFile]);
   //
-  // Get video iframe src.
-  //
-  React.useEffect(() => {
-    if (!eliceVideoPlayerUrl || !materialVideoFile) {
-      return;
-    }
-    const abortCtrl = new AbortController();
-    accountApi.auth.authOtpPost({
-      signal: abortCtrl.signal
-    })
-    // issue otp key
-    .then(res => res.otp)
-    // 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,
-      endctrl: endControl,
-      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, endControl, locale, accountApi]);
-  //
-  // 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) {
+  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
     return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Spinner, null));
   }
   // rejected / empty video
@@ -194,16 +97,26 @@ const MaterialVideoFilePlayer = ({
     })));
   }
   // resolved
-  return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
+  return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
     className: classnames(prefixCls, className),
-    src: playerFrameSrc,
-    title: title,
-    allow: "autoplay",
-    allowFullScreen: true
+    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: () => accountApi.auth.authOtpPost().then(res => res.otp),
+    onLecturePageNavigate: dir => {
+      if (dir === 'prev' && onNavigatePreviousLecturePage) {
+        onNavigatePreviousLecturePage();
+      } else if (dir === 'next' && onNavigateNextLecturePage) {
+        onNavigateNextLecturePage();
+      }
+    }
   });
 };
-var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
-  MimeType: VideoMimeType
-});
 
-exports.default = MaterialVideoFilePlayer$1;
+exports.default = MaterialVideoFilePlayer;

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

@@ -1,2 +1,5 @@
-export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+/// <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"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+}, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
 export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,13 +1,14 @@
 'use strict';
 
+var videoplayerClient = require('@elice/videoplayer-client');
 var styled = require('styled-components');
 
-const StyledVideoPlayerWrap = styled.iframe.withConfig({
+const StyledVideoPlayer = styled(videoplayerClient.EliceVideoplayer).withConfig({
   componentId: "sc-1ocq3lp-0"
 })(["width:100%;height:100%;border:0;"]);
 const StyledVideoPlayerLoading = styled.div.withConfig({
   componentId: "sc-1ocq3lp-1"
 })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
 
+exports.StyledVideoPlayer = StyledVideoPlayer;
 exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;
-exports.StyledVideoPlayerWrap = StyledVideoPlayerWrap;

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

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

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

@@ -28,8 +28,6 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
     /** End control overlay. */
     endControl?: EliceVideoPlayerSearchParams['endctrl'];
-    /** Locale. */
-    locale?: EliceVideoPlayerSearchParams['locale'];
     /** Elice video player url. */
     eliceVideoPlayerUrl?: string;
     /** Empty component. */
@@ -41,15 +39,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
     /** 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;
+declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
+export default MaterialVideoFilePlayer;

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

@@ -3,7 +3,7 @@ import { Spinner, Text } from '@elice/blocks';
 import { useRawEliceIntl } from '@elice/intl';
 import { enums } from '@elice/types';
 import classnames from 'classnames';
-import { StyledVideoPlayerLoading, StyledVideoPlayerWrap } from './MaterialVideoFilePlayer.styled.js';
+import { StyledVideoPlayerLoading, StyledVideoPlayer } from './MaterialVideoFilePlayer.styled.js';
 
 //
 //
@@ -15,20 +15,6 @@ var VideoUploadStatus;
   VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
   VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
 })(VideoUploadStatus || (VideoUploadStatus = {}));
-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-videoplayer';
-const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
 //
 //
 //
@@ -44,17 +30,15 @@ const MaterialVideoFilePlayer = ({
   autoPlay = false,
   autoPlayNext = false,
   endControl = false,
-  locale,
   eliceVideoPlayerUrl,
   emptyComponent = null,
-  title = 'elice-videoplayer',
   onNavigatePreviousLecturePage,
   onNavigateNextLecturePage,
   accountApi
 }) => {
+  var _a;
   const prefixCls = 'em-video-player';
   const intl = useRawEliceIntl();
-  const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
   /**
    * Current video status.
    */
@@ -74,91 +58,10 @@ const MaterialVideoFilePlayer = ({
     }
   }, [materialVideoFile]);
   //
-  // Get video iframe src.
-  //
-  React.useEffect(() => {
-    if (!eliceVideoPlayerUrl || !materialVideoFile) {
-      return;
-    }
-    const abortCtrl = new AbortController();
-    accountApi.auth.authOtpPost({
-      signal: abortCtrl.signal
-    })
-    // issue otp key
-    .then(res => res.otp)
-    // 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,
-      endctrl: endControl,
-      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, endControl, locale, accountApi]);
-  //
-  // 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) {
+  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
     return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
   }
   // rejected / empty video
@@ -190,16 +93,26 @@ const MaterialVideoFilePlayer = ({
     })));
   }
   // resolved
-  return React.createElement(StyledVideoPlayerWrap, {
+  return React.createElement(StyledVideoPlayer, {
     className: classnames(prefixCls, className),
-    src: playerFrameSrc,
-    title: title,
-    allow: "autoplay",
-    allowFullScreen: true
+    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: () => accountApi.auth.authOtpPost().then(res => res.otp),
+    onLecturePageNavigate: dir => {
+      if (dir === 'prev' && onNavigatePreviousLecturePage) {
+        onNavigatePreviousLecturePage();
+      } else if (dir === 'next' && onNavigateNextLecturePage) {
+        onNavigateNextLecturePage();
+      }
+    }
   });
 };
-var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
-  MimeType: VideoMimeType
-});
 
-export { MaterialVideoFilePlayer$1 as default };
+export { MaterialVideoFilePlayer as default };

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

@@ -1,2 +1,5 @@
-export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
+/// <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"> & {
+    __intl: import("@elice/intl").EliceIntlShape;
+}, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
 export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video-file",
-  "version": "1.240614.0",
+  "version": "1.240618.0",
   "description": "User view and editing components of Elice material video file",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,11 +29,12 @@
     "@elice/blocks": "^1",
     "@elice/design-tokens": "^1",
     "@elice/icons": "^1",
-    "@elice/intl": "*",
+    "@elice/intl": "^0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
     "@elice/openapi-client-account": "^1",
     "@elice/types": "^1",
+    "@elice/videoplayer-client": "^2",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-use": "^17.0.0",
     "styled-components": "^5.2.0"
@@ -50,10 +51,11 @@
     "@elice/icons": "^1.230814.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
     "@elice/intl": "0.240425.0-rc.2",
-    "@elice/material-shared-types": "1.240614.0",
-    "@elice/material-shared-utils": "1.240614.0",
+    "@elice/material-shared-types": "1.240618.0",
+    "@elice/material-shared-utils": "1.240618.0",
     "@elice/openapi-client-account": "^1.230814.0",
     "@elice/types": "^1.240208.0",
+    "@elice/videoplayer-client": "^2.240618.0",
     "@types/classnames": "^2.3.1",
     "@types/query-string": "^6.3.0",
     "@types/react": "~17.0.9",
@@ -62,5 +64,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "129db3c8074dd01f6949eb115bfc4f2f13c68f29"
+  "gitHead": "63d4bb89b897e3f211035a7b3c7d8677ab43e4ff"
 }