@elice/material-video 1.220803.0

package/README.md

@@ -0,0 +1,3 @@
+# elice-material-video
+
+User view and editing components of Elice material video.

package/cjs/components/material-video/MaterialVideo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { YoutubePlayerSharedProps } from '../youtube-player';
+export interface MaterialVideoProps extends YoutubePlayerSharedProps {
+    className?: string;
+    materialVideoId: number;
+    locale?: string;
+}
+declare const MaterialVideo: React.FC<MaterialVideoProps>;
+export default MaterialVideo;

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

@@ -0,0 +1,50 @@
+'use strict';
+
+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 locales = require('./locales.js');
+var MaterialVideoContent = require('./MaterialVideoContent.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);
+
+const MaterialVideo = _a => {
+  var _b;
+
+  var {
+    className,
+    materialVideoId,
+    locale = 'en'
+  } = _a,
+      youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "locale"]);
+
+  const prefixCls = 'em-material-video';
+  const [materialVideo, materialVideoStatus] = materialSharedUtils.useMaterialInitFetch(apiClient.config.init, React__default["default"].useCallback(signal => apiClient.getOrgMaterialVideoGet({
+    materialVideoId
+  }, {
+    signal
+  }), [materialVideoId]));
+  return React__default["default"].createElement(blocks.Flex, {
+    className: classnames__default["default"](prefixCls, className),
+    align: "center",
+    justify: "center",
+    width: "100%",
+    height: "100%"
+  }, React__default["default"].createElement(reactIntl.IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : locales.en
+  }, React__default["default"].createElement(MaterialVideoContent, Object.assign({
+    materialVideo: (_b = materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.materialVideo) !== null && _b !== void 0 ? _b : null,
+    videoGetStatus: materialVideoStatus
+  }, youtubeProps))));
+};
+
+module.exports = MaterialVideo;

package/cjs/components/material-video/MaterialVideo.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledMaterialVideoStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const StyledMaterialVideoStatus = styled__default["default"](blocks.Flex).withConfig({
+  componentId: "sc-dg3csq-0"
+})(["width:100%;height:100%;background-color:#22222c;"]);
+
+exports.StyledMaterialVideoStatus = StyledMaterialVideoStatus;

package/cjs/components/material-video/MaterialVideoContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { GetOrgMaterialVideoGetResponses } from '@elice/types';
+import type { YoutubePlayerSharedProps } from '../youtube-player';
+export interface MaterialVideoContentProps extends YoutubePlayerSharedProps {
+    videoGetStatus: APIStatus;
+    materialVideo: null | GetOrgMaterialVideoGetResponses['materialVideo'];
+}
+declare const MaterialVideoContent: React.FC<MaterialVideoContentProps>;
+export default MaterialVideoContent;

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

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactIntl = require('react-intl');
+var blocks = require('@elice/blocks');
+var designTokens = require('@elice/design-tokens');
+var icons = require('@elice/icons');
+var youtubeUrlParser = require('../../utils/youtubeUrlParser.js');
+var YoutubePlayer = require('../youtube-player/YoutubePlayer.js');
+var MaterialVideo_styled = require('./MaterialVideo.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const MaterialVideoContent = _a => {
+  var {
+    videoGetStatus,
+    materialVideo
+  } = _a,
+      youtubeProps = tslib.__rest(_a, ["videoGetStatus", "materialVideo"]);
+
+  const intl = reactIntl.useIntl();
+
+  if (videoGetStatus === 'pending') {
+    return React__default["default"].createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
+      align: "center",
+      justify: "center"
+    }, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "white"
+    }, intl.formatMessage({
+      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",
+      justify: "center"
+    }, React__default["default"].createElement(blocks.Icon, {
+      icon: icons.eilStatusWarn,
+      color: designTokens.base.color.white
+    }), React__default["default"].createElement(blocks.Hspace, {
+      width: 0.5
+    }), React__default["default"].createElement(blocks.Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'video.status.error'
+    })));
+  }
+
+  return React__default["default"].createElement(YoutubePlayer, Object.assign({
+    videoId: youtubeUrlParser.youtubeUrlParser(materialVideo.url)
+  }, youtubeProps));
+};
+
+module.exports = MaterialVideoContent;

package/cjs/components/material-video/index.d.ts

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

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

@@ -0,0 +1,5 @@
+export declare const en: {
+    'video.status.loading': string;
+    'video.status.error': string;
+};
+export declare const ko: typeof en;

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

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

package/cjs/components/youtube-player/YoutubePlayer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { YouTubeProps } from 'react-youtube';
+declare type PickedYoutubeProps = Pick<YouTubeProps, 'onReady' | 'onError' | 'onPlay' | 'onPause' | 'onEnd' | 'onStateChange' | 'onPlaybackRateChange' | 'onPlaybackQualityChange'>;
+export interface YoutubePlayerSharedProps extends PickedYoutubeProps {
+    autoPlay?: boolean;
+    disableControl?: boolean;
+    disableKeyboardEvent?: boolean;
+    disableFullscreen?: boolean;
+}
+export interface YoutubePlayerProps extends YoutubePlayerSharedProps {
+    className?: string;
+    videoId: string;
+}
+declare const YoutubePlayer: React.FC<YoutubePlayerProps>;
+export default YoutubePlayer;

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

@@ -0,0 +1,56 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var Youtube = require('react-youtube');
+var classnames = require('classnames');
+var YoutubePlayer_styled = require('./YoutubePlayer.styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+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';
+  /**
+   * Get options for YouTube IFrame player API.
+   * ref: https://developers.google.com/youtube/player_parameters#Parameters
+   */
+
+  const getYoutubeOptions = () => {
+    return {
+      width: '100%',
+      height: '100%',
+      playerVars: {
+        autoplay: autoPlay ? 1 : 0,
+        controls: disableControl ? 0 : 1,
+        fs: disableFullscreen ? 0 : 1,
+        disablekb: disableKeyboardEvent ? 1 : 0
+      }
+    };
+  };
+
+  return React__default["default"].createElement(YoutubePlayer_styled.StyledYoutubePlayerWrapper, {
+    className: classnames__default["default"](prefixCls, className),
+    justify: "center",
+    align: "center"
+  }, React__default["default"].createElement(Youtube__default["default"], Object.assign({
+    videoId: videoId,
+    opts: getYoutubeOptions(),
+    containerClassName: `${prefixCls}__inner`
+  }, youtubeProps)));
+};
+
+module.exports = YoutubePlayer;

package/cjs/components/youtube-player/YoutubePlayer.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledYoutubePlayerWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var blocks = require('@elice/blocks');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const 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%;}"]);
+
+exports.StyledYoutubePlayerWrapper = StyledYoutubePlayerWrapper;

package/cjs/components/youtube-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as YoutubePlayer } from './YoutubePlayer';
+export type { YoutubePlayerProps, YoutubePlayerSharedProps, } from './YoutubePlayer';

package/cjs/index.d.ts

@@ -0,0 +1 @@
+export * from './components/material-video';

package/cjs/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var MaterialVideo = require('./components/material-video/MaterialVideo.js');
+
+
+
+exports.MaterialVideo = MaterialVideo;

package/cjs/utils/youtubeUrlParser.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get YouTube video id from url using regex
+ * @param url URL of youtube
+ * @returns id of youtube video OR null when URL is invalid
+ */
+export declare const youtubeUrlParser: (url: string) => string | null;

package/cjs/utils/youtubeUrlParser.js

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Get YouTube video id from url using regex
+ * @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);
+  return match && match[7].length === 11 ? match[7] : null;
+};
+
+exports.youtubeUrlParser = youtubeUrlParser;

package/es/components/material-video/MaterialVideo.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { YoutubePlayerSharedProps } from '../youtube-player';
+export interface MaterialVideoProps extends YoutubePlayerSharedProps {
+    className?: string;
+    materialVideoId: number;
+    locale?: string;
+}
+declare const MaterialVideo: React.FC<MaterialVideoProps>;
+export default MaterialVideo;

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

@@ -0,0 +1,44 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { IntlProvider } from 'react-intl';
+import { config, getOrgMaterialVideoGet } from '@elice/api-client';
+import { Flex } from '@elice/blocks';
+import { useMaterialInitFetch } from '@elice/material-shared-utils';
+import classnames from 'classnames';
+import * as locales from './locales.js';
+import { en } from './locales.js';
+import MaterialVideoContent from './MaterialVideoContent.js';
+
+const MaterialVideo = _a => {
+  var _b;
+
+  var {
+    className,
+    materialVideoId,
+    locale = 'en'
+  } = _a,
+      youtubeProps = __rest(_a, ["className", "materialVideoId", "locale"]);
+
+  const prefixCls = 'em-material-video';
+  const [materialVideo, materialVideoStatus] = useMaterialInitFetch(config.init, React.useCallback(signal => getOrgMaterialVideoGet({
+    materialVideoId
+  }, {
+    signal
+  }), [materialVideoId]));
+  return React.createElement(Flex, {
+    className: classnames(prefixCls, className),
+    align: "center",
+    justify: "center",
+    width: "100%",
+    height: "100%"
+  }, React.createElement(IntlProvider, {
+    locale: locale,
+    defaultLocale: "en",
+    messages: locale in locales ? locales[locale] : en
+  }, React.createElement(MaterialVideoContent, Object.assign({
+    materialVideo: (_b = materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.materialVideo) !== null && _b !== void 0 ? _b : null,
+    videoGetStatus: materialVideoStatus
+  }, youtubeProps))));
+};
+
+export { MaterialVideo as default };

package/es/components/material-video/MaterialVideo.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledMaterialVideoStatus: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

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

package/es/components/material-video/MaterialVideoContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { APIStatus } from '@elice/material-shared-types';
+import type { GetOrgMaterialVideoGetResponses } from '@elice/types';
+import type { YoutubePlayerSharedProps } from '../youtube-player';
+export interface MaterialVideoContentProps extends YoutubePlayerSharedProps {
+    videoGetStatus: APIStatus;
+    materialVideo: null | GetOrgMaterialVideoGetResponses['materialVideo'];
+}
+declare const MaterialVideoContent: React.FC<MaterialVideoContentProps>;
+export default MaterialVideoContent;

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

@@ -0,0 +1,54 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Spinner, Hspace, Text, Icon } from '@elice/blocks';
+import { base } from '@elice/design-tokens';
+import { eilStatusWarn } from '@elice/icons';
+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();
+
+  if (videoGetStatus === 'pending') {
+    return React.createElement(StyledMaterialVideoStatus, {
+      align: "center",
+      justify: "center"
+    }, React.createElement(Spinner, null), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'video.status.loading'
+    })));
+  }
+
+  if (!(materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.url) || videoGetStatus === 'rejected') {
+    return React.createElement(StyledMaterialVideoStatus, {
+      align: "center",
+      justify: "center"
+    }, React.createElement(Icon, {
+      icon: eilStatusWarn,
+      color: base.color.white
+    }), React.createElement(Hspace, {
+      width: 0.5
+    }), React.createElement(Text, {
+      role: "white"
+    }, intl.formatMessage({
+      id: 'video.status.error'
+    })));
+  }
+
+  return React.createElement(YoutubePlayer, Object.assign({
+    videoId: youtubeUrlParser(materialVideo.url)
+  }, youtubeProps));
+};
+
+export { MaterialVideoContent as default };

package/es/components/material-video/index.d.ts

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

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

@@ -0,0 +1,5 @@
+export declare const en: {
+    'video.status.loading': string;
+    'video.status.error': string;
+};
+export declare const ko: typeof en;

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

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

package/es/components/youtube-player/YoutubePlayer.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { YouTubeProps } from 'react-youtube';
+declare type PickedYoutubeProps = Pick<YouTubeProps, 'onReady' | 'onError' | 'onPlay' | 'onPause' | 'onEnd' | 'onStateChange' | 'onPlaybackRateChange' | 'onPlaybackQualityChange'>;
+export interface YoutubePlayerSharedProps extends PickedYoutubeProps {
+    autoPlay?: boolean;
+    disableControl?: boolean;
+    disableKeyboardEvent?: boolean;
+    disableFullscreen?: boolean;
+}
+export interface YoutubePlayerProps extends YoutubePlayerSharedProps {
+    className?: string;
+    videoId: string;
+}
+declare const YoutubePlayer: React.FC<YoutubePlayerProps>;
+export default YoutubePlayer;

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

@@ -0,0 +1,48 @@
+import { __rest } from 'tslib';
+import React from 'react';
+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';
+  /**
+   * Get options for YouTube IFrame player API.
+   * ref: https://developers.google.com/youtube/player_parameters#Parameters
+   */
+
+  const getYoutubeOptions = () => {
+    return {
+      width: '100%',
+      height: '100%',
+      playerVars: {
+        autoplay: autoPlay ? 1 : 0,
+        controls: disableControl ? 0 : 1,
+        fs: disableFullscreen ? 0 : 1,
+        disablekb: disableKeyboardEvent ? 1 : 0
+      }
+    };
+  };
+
+  return React.createElement(StyledYoutubePlayerWrapper, {
+    className: classnames(prefixCls, className),
+    justify: "center",
+    align: "center"
+  }, React.createElement(Youtube, Object.assign({
+    videoId: videoId,
+    opts: getYoutubeOptions(),
+    containerClassName: `${prefixCls}__inner`
+  }, youtubeProps)));
+};
+
+export { YoutubePlayer as default };

package/es/components/youtube-player/YoutubePlayer.styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledYoutubePlayerWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/blocks").FlexProps & import("react").RefAttributes<HTMLDivElement>>, any, {}, never>;

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

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

package/es/components/youtube-player/index.d.ts

@@ -0,0 +1,2 @@
+export { default as YoutubePlayer } from './YoutubePlayer';
+export type { YoutubePlayerProps, YoutubePlayerSharedProps, } from './YoutubePlayer';

package/es/index.d.ts

@@ -0,0 +1 @@
+export * from './components/material-video';

package/es/index.js

@@ -0,0 +1 @@
+export { default as MaterialVideo } from './components/material-video/MaterialVideo.js';

package/es/utils/youtubeUrlParser.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Get YouTube video id from url using regex
+ * @param url URL of youtube
+ * @returns id of youtube video OR null when URL is invalid
+ */
+export declare const youtubeUrlParser: (url: string) => string | null;

package/es/utils/youtubeUrlParser.js

@@ -0,0 +1,12 @@
+/**
+ * Get YouTube video id from url using regex
+ * @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);
+  return match && match[7].length === 11 ? match[7] : null;
+};
+
+export { youtubeUrlParser };

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@elice/material-video",
+  "version": "1.220803.0",
+  "description": "User view and editing components of Elice material video",
+  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
+  "license": "UNLICENSED",
+  "main": "./cjs/index.js",
+  "module": "./es/index.js",
+  "types": "./es/index.d.ts",
+  "files": [
+    "es",
+    "cjs",
+    "package.json",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": "~16.14",
+    "yarn": ">=1.20 <2"
+  },
+  "scripts": {
+    "start": "run-s watch",
+    "prebuild": "run-s clean",
+    "build": "run-p build:es build:cjs",
+    "build:es": "rollup -c ../../rollup.config.ts -f es",
+    "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
+    "watch": "rollup -c ../../rollup.config.ts -f es -w",
+    "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
+    "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
+  },
+  "peerDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@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.220802.1",
+    "react": "^16.8.0  || ^17.0.0 || ^18.0.0",
+    "react-intl": "^5.0.0",
+    "react-use": "^17.0.0",
+    "styled-components": "^5.2.0"
+  },
+  "dependencies": {
+    "classnames": "^2.2.0",
+    "react-youtube": "^7.14.0",
+    "tslib": "^2.3.1"
+  },
+  "devDependencies": {
+    "@elice/api-client": "^1.220802.1",
+    "@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.220803.0",
+    "@elice/material-shared-utils": "1.220803.0",
+    "@elice/types": "^1.220802.1",
+    "@types/classnames": "^2.3.1",
+    "@types/react": "~17.0.9",
+    "@types/styled-components": "^5.1.21",
+    "react": "^17.0.2",
+    "react-intl": "^5.20.10",
+    "react-use": "^17.2.4",
+    "styled-components": "^5.3.0"
+  },
+  "gitHead": "21c6b42ae6550e7899c57bf39fa78cea0f47e64c"
+}