@elice/material-video 1.230328.0 → 1.230418.0

package/cjs/components/material-video/MaterialVideo.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var reactIntl = require('react-intl');
@@ -16,23 +18,22 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const MaterialVideo = _a => {
-  var {
-    className,
-    materialVideoId,
-    locale = 'en'
-  } = _a,
-      youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "locale"]);
-
-  const prefixCls = 'em-material-video';
-  const {
-    materialVideo,
-    status: materialVideoStatus
-  } = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.Video, React__default["default"].useCallback(signal => apiClient.getOrgMaterialVideoGet({
-    materialVideoId
-  }, {
-    signal
-  }), [materialVideoId]), apiClient.config.init);
+var MaterialVideo = function MaterialVideo(_a) {
+  var className = _a.className,
+    materialVideoId = _a.materialVideoId,
+    _a$locale = _a.locale,
+    locale = _a$locale === void 0 ? 'en' : _a$locale,
+    youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "locale"]);
+  var prefixCls = 'em-material-video';
+  var _useMaterialFetch = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.Video, React__default["default"].useCallback(function (signal) {
+      return apiClient.getOrgMaterialVideoGet({
+        materialVideoId: materialVideoId
+      }, {
+        signal: signal
+      });
+    }, [materialVideoId]), apiClient.config.init),
+    materialVideo = _useMaterialFetch.materialVideo,
+    materialVideoStatus = _useMaterialFetch.status;
   return React__default["default"].createElement(blocks.Flex, {
     className: classnames__default["default"](prefixCls, className),
     align: "center",
@@ -43,10 +44,10 @@ const MaterialVideo = _a => {
     locale: locale,
     defaultLocale: "en",
     messages: locale in locales ? locales[locale] : locales.en
-  }, React__default["default"].createElement(MaterialVideoContent, Object.assign({
+  }, React__default["default"].createElement(MaterialVideoContent["default"], Object.assign({
     materialVideo: materialVideo !== null && materialVideo !== void 0 ? materialVideo : null,
     videoGetStatus: materialVideoStatus
   }, youtubeProps))));
 };
 
-module.exports = MaterialVideo;
+exports["default"] = MaterialVideo;

package/cjs/components/material-video/MaterialVideo.styled.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledMaterialVideoStatus = styled__default["default"](blocks.Flex).withConfig({
+var StyledMaterialVideoStatus = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-dg3csq-0"
 })(["width:100%;height:100%;background-color:#22222c;"]);
 

package/cjs/components/material-video/MaterialVideoContent.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var reactIntl = require('react-intl');
@@ -14,15 +16,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const MaterialVideoContent = _a => {
-  var {
-    videoGetStatus,
-    materialVideo
-  } = _a,
-      youtubeProps = tslib.__rest(_a, ["videoGetStatus", "materialVideo"]);
-
-  const intl = reactIntl.useIntl();
-
+var MaterialVideoContent = function MaterialVideoContent(_a) {
+  var videoGetStatus = _a.videoGetStatus,
+    materialVideo = _a.materialVideo,
+    youtubeProps = tslib.__rest(_a, ["videoGetStatus", "materialVideo"]);
+  var intl = reactIntl.useIntl();
   if (videoGetStatus === 'pending') {
     return React__default["default"].createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
       align: "center",
@@ -35,7 +33,6 @@ const MaterialVideoContent = _a => {
       id: 'video.status.loading'
     })));
   }
-
   if (!(materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.url) || videoGetStatus === 'rejected') {
     return React__default["default"].createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
       align: "center",
@@ -51,10 +48,9 @@ const MaterialVideoContent = _a => {
       id: 'video.status.error'
     })));
   }
-
-  return React__default["default"].createElement(YoutubePlayer, Object.assign({
+  return React__default["default"].createElement(YoutubePlayer["default"], Object.assign({
     videoId: youtubeUrlParser.youtubeUrlParser(materialVideo.url)
   }, youtubeProps));
 };
 
-module.exports = MaterialVideoContent;
+exports["default"] = MaterialVideoContent;

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

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const en = {
+var en = {
   'video.status.loading': 'Loading video...',
   'video.status.error': 'Error occurred while loading video'
 };
-const ko = {
+var ko = {
   'video.status.loading': '수업 자료 로딩 중...',
   'video.status.error': '수업 자료를 가져오는 중 문제가 발생하였습니다.'
 };

package/cjs/components/youtube-player/YoutubePlayer.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var tslib = require('tslib');
 var React = require('react');
 var Youtube = require('react-youtube');
@@ -12,24 +14,24 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Youtube__default = /*#__PURE__*/_interopDefaultLegacy(Youtube);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-const YoutubePlayer = _a => {
-  var {
-    className,
-    videoId,
-    autoPlay = false,
-    disableControl = false,
-    disableKeyboardEvent = false,
-    disableFullscreen = false
-  } = _a,
-      youtubeProps = tslib.__rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
-
-  const prefixCls = 'em-youtube-player';
+var YoutubePlayer = function YoutubePlayer(_a) {
+  var className = _a.className,
+    videoId = _a.videoId,
+    _a$autoPlay = _a.autoPlay,
+    autoPlay = _a$autoPlay === void 0 ? false : _a$autoPlay,
+    _a$disableControl = _a.disableControl,
+    disableControl = _a$disableControl === void 0 ? false : _a$disableControl,
+    _a$disableKeyboardEve = _a.disableKeyboardEvent,
+    disableKeyboardEvent = _a$disableKeyboardEve === void 0 ? false : _a$disableKeyboardEve,
+    _a$disableFullscreen = _a.disableFullscreen,
+    disableFullscreen = _a$disableFullscreen === void 0 ? false : _a$disableFullscreen,
+    youtubeProps = tslib.__rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
+  var prefixCls = 'em-youtube-player';
   /**
    * Get options for YouTube IFrame player API.
    * ref: https://developers.google.com/youtube/player_parameters#Parameters
    */
-
-  const getYoutubeOptions = () => {
+  var getYoutubeOptions = function getYoutubeOptions() {
     return {
       width: '100%',
       height: '100%',
@@ -41,7 +43,6 @@ const YoutubePlayer = _a => {
       }
     };
   };
-
   return React__default["default"].createElement(YoutubePlayer_styled.StyledYoutubePlayerWrapper, {
     className: classnames__default["default"](prefixCls, className),
     justify: "center",
@@ -49,8 +50,8 @@ const YoutubePlayer = _a => {
   }, React__default["default"].createElement(Youtube__default["default"], Object.assign({
     videoId: videoId,
     opts: getYoutubeOptions(),
-    containerClassName: `${prefixCls}__inner`
+    containerClassName: "".concat(prefixCls, "__inner")
   }, youtubeProps)));
 };
 
-module.exports = YoutubePlayer;
+exports["default"] = YoutubePlayer;

package/cjs/components/youtube-player/YoutubePlayer.styled.js

@@ -9,7 +9,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-const StyledYoutubePlayerWrapper = styled__default["default"](blocks.Flex).withConfig({
+var StyledYoutubePlayerWrapper = styled__default["default"](blocks.Flex).withConfig({
   componentId: "sc-ao5iuk-0"
 })(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
 

package/cjs/index.js

@@ -6,4 +6,4 @@ var MaterialVideo = require('./components/material-video/MaterialVideo.js');
 
 
 
-exports.MaterialVideo = MaterialVideo;
+exports.MaterialVideo = MaterialVideo["default"];

package/cjs/utils/youtubeUrlParser.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * @param url URL of youtube
  * @returns id of youtube video OR null when URL is invalid
  */
-const youtubeUrlParser = url => {
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-  const match = regExp.exec(url);
+var youtubeUrlParser = function youtubeUrlParser(url) {
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = regExp.exec(url);
   return match && match[7].length === 11 ? match[7] : null;
 };
 

package/es/components/material-video/MaterialVideo.js

@@ -10,23 +10,22 @@ import * as locales from './locales.js';
 import { en } from './locales.js';
 import MaterialVideoContent from './MaterialVideoContent.js';
 
-const MaterialVideo = _a => {
-  var {
-    className,
-    materialVideoId,
-    locale = 'en'
-  } = _a,
-      youtubeProps = __rest(_a, ["className", "materialVideoId", "locale"]);
-
-  const prefixCls = 'em-material-video';
-  const {
-    materialVideo,
-    status: materialVideoStatus
-  } = useMaterialFetch(enums.LectureMaterialType.Video, React.useCallback(signal => getOrgMaterialVideoGet({
-    materialVideoId
-  }, {
-    signal
-  }), [materialVideoId]), config.init);
+var MaterialVideo = function MaterialVideo(_a) {
+  var className = _a.className,
+    materialVideoId = _a.materialVideoId,
+    _a$locale = _a.locale,
+    locale = _a$locale === void 0 ? 'en' : _a$locale,
+    youtubeProps = __rest(_a, ["className", "materialVideoId", "locale"]);
+  var prefixCls = 'em-material-video';
+  var _useMaterialFetch = useMaterialFetch(enums.LectureMaterialType.Video, React.useCallback(function (signal) {
+      return getOrgMaterialVideoGet({
+        materialVideoId: materialVideoId
+      }, {
+        signal: signal
+      });
+    }, [materialVideoId]), config.init),
+    materialVideo = _useMaterialFetch.materialVideo,
+    materialVideoStatus = _useMaterialFetch.status;
   return React.createElement(Flex, {
     className: classnames(prefixCls, className),
     align: "center",

package/es/components/material-video/MaterialVideo.styled.js

@@ -1,7 +1,7 @@
 import { Flex } from '@elice/blocks';
 import styled from 'styled-components';
 
-const StyledMaterialVideoStatus = styled(Flex).withConfig({
+var StyledMaterialVideoStatus = styled(Flex).withConfig({
   componentId: "sc-dg3csq-0"
 })(["width:100%;height:100%;background-color:#22222c;"]);
 

package/es/components/material-video/MaterialVideoContent.js

@@ -8,15 +8,11 @@ import { youtubeUrlParser } from '../../utils/youtubeUrlParser.js';
 import YoutubePlayer from '../youtube-player/YoutubePlayer.js';
 import { StyledMaterialVideoStatus } from './MaterialVideo.styled.js';
 
-const MaterialVideoContent = _a => {
-  var {
-    videoGetStatus,
-    materialVideo
-  } = _a,
-      youtubeProps = __rest(_a, ["videoGetStatus", "materialVideo"]);
-
-  const intl = useIntl();
-
+var MaterialVideoContent = function MaterialVideoContent(_a) {
+  var videoGetStatus = _a.videoGetStatus,
+    materialVideo = _a.materialVideo,
+    youtubeProps = __rest(_a, ["videoGetStatus", "materialVideo"]);
+  var intl = useIntl();
   if (videoGetStatus === 'pending') {
     return React.createElement(StyledMaterialVideoStatus, {
       align: "center",
@@ -29,7 +25,6 @@ const MaterialVideoContent = _a => {
       id: 'video.status.loading'
     })));
   }
-
   if (!(materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.url) || videoGetStatus === 'rejected') {
     return React.createElement(StyledMaterialVideoStatus, {
       align: "center",
@@ -45,7 +40,6 @@ const MaterialVideoContent = _a => {
       id: 'video.status.error'
     })));
   }
-
   return React.createElement(YoutubePlayer, Object.assign({
     videoId: youtubeUrlParser(materialVideo.url)
   }, youtubeProps));

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

@@ -1,8 +1,8 @@
-const en = {
+var en = {
   'video.status.loading': 'Loading video...',
   'video.status.error': 'Error occurred while loading video'
 };
-const ko = {
+var ko = {
   'video.status.loading': '수업 자료 로딩 중...',
   'video.status.error': '수업 자료를 가져오는 중 문제가 발생하였습니다.'
 };

package/es/components/youtube-player/YoutubePlayer.js

@@ -4,24 +4,24 @@ import Youtube from 'react-youtube';
 import classnames from 'classnames';
 import { StyledYoutubePlayerWrapper } from './YoutubePlayer.styled.js';
 
-const YoutubePlayer = _a => {
-  var {
-    className,
-    videoId,
-    autoPlay = false,
-    disableControl = false,
-    disableKeyboardEvent = false,
-    disableFullscreen = false
-  } = _a,
-      youtubeProps = __rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
-
-  const prefixCls = 'em-youtube-player';
+var YoutubePlayer = function YoutubePlayer(_a) {
+  var className = _a.className,
+    videoId = _a.videoId,
+    _a$autoPlay = _a.autoPlay,
+    autoPlay = _a$autoPlay === void 0 ? false : _a$autoPlay,
+    _a$disableControl = _a.disableControl,
+    disableControl = _a$disableControl === void 0 ? false : _a$disableControl,
+    _a$disableKeyboardEve = _a.disableKeyboardEvent,
+    disableKeyboardEvent = _a$disableKeyboardEve === void 0 ? false : _a$disableKeyboardEve,
+    _a$disableFullscreen = _a.disableFullscreen,
+    disableFullscreen = _a$disableFullscreen === void 0 ? false : _a$disableFullscreen,
+    youtubeProps = __rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
+  var prefixCls = 'em-youtube-player';
   /**
    * Get options for YouTube IFrame player API.
    * ref: https://developers.google.com/youtube/player_parameters#Parameters
    */
-
-  const getYoutubeOptions = () => {
+  var getYoutubeOptions = function getYoutubeOptions() {
     return {
       width: '100%',
       height: '100%',
@@ -33,7 +33,6 @@ const YoutubePlayer = _a => {
       }
     };
   };
-
   return React.createElement(StyledYoutubePlayerWrapper, {
     className: classnames(prefixCls, className),
     justify: "center",
@@ -41,7 +40,7 @@ const YoutubePlayer = _a => {
   }, React.createElement(Youtube, Object.assign({
     videoId: videoId,
     opts: getYoutubeOptions(),
-    containerClassName: `${prefixCls}__inner`
+    containerClassName: "".concat(prefixCls, "__inner")
   }, youtubeProps)));
 };
 

package/es/components/youtube-player/YoutubePlayer.styled.js

@@ -1,7 +1,7 @@
 import { Flex } from '@elice/blocks';
 import styled from 'styled-components';
 
-const StyledYoutubePlayerWrapper = styled(Flex).withConfig({
+var StyledYoutubePlayerWrapper = styled(Flex).withConfig({
   componentId: "sc-ao5iuk-0"
 })(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
 

package/es/utils/youtubeUrlParser.js

@@ -3,9 +3,9 @@
  * @param url URL of youtube
  * @returns id of youtube video OR null when URL is invalid
  */
-const youtubeUrlParser = url => {
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-  const match = regExp.exec(url);
+var youtubeUrlParser = function youtubeUrlParser(url) {
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
+  var match = regExp.exec(url);
   return match && match[7].length === 11 ? match[7] : null;
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elice/material-video",
-  "version": "1.230328.0",
+  "version": "1.230418.0",
   "description": "User view and editing components of Elice material video",
   "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
   "license": "UNLICENSED",
@@ -29,13 +29,13 @@
     "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
   },
   "peerDependencies": {
-    "@elice/api-client": "1.230306.1",
+    "@elice/api-client": "^1.230413.0",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/material-shared-types": "*",
     "@elice/material-shared-utils": "*",
-    "@elice/types": "^1.230306.0",
+    "@elice/types": "^1.230417.0",
     "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
     "react-intl": "^5.0.0",
     "react-use": "^17.0.0",
@@ -47,14 +47,14 @@
     "tslib": "^2.3.1"
   },
   "devDependencies": {
-    "@elice/api-client": "1.230306.1",
+    "@elice/api-client": "^1.230413.0",
     "@elice/blocks": "^1.220803.0",
     "@elice/design-tokens": "^1.220803.0",
     "@elice/icons": "^1.220803.0",
     "@elice/icons-legacy": "npm:@elice/icons@0.220803.1",
-    "@elice/material-shared-types": "1.230328.0",
-    "@elice/material-shared-utils": "1.230328.0",
-    "@elice/types": "^1.230306.0",
+    "@elice/material-shared-types": "1.230418.0",
+    "@elice/material-shared-utils": "1.230418.0",
+    "@elice/types": "^1.230417.0",
     "@types/classnames": "^2.3.1",
     "@types/react": "~17.0.9",
     "@types/styled-components": "^5.1.21",
@@ -63,5 +63,5 @@
     "react-use": "^17.2.4",
     "styled-components": "^5.3.0"
   },
-  "gitHead": "c24abeffe609385031a77c725bf6e92e47e94b56"
+  "gitHead": "06d5f856939bdbb6bffa9eba30f2fab56d66129b"
 }