@elice/material-video-file 1.231227.0 → 1.240112.0-cloud.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/cjs/components/material-video-file/MaterialVideoFile.js +29 -32
  2. package/cjs/components/material-video-file/MaterialVideoFile.styled.js +1 -7
  3. package/cjs/components/material-video-file/MaterialVideoFilePlayer.js +61 -87
  4. package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js +2 -8
  5. package/cjs/components/material-video-file/locales.js +2 -4
  6. package/cjs/components/material-video-file/useMaterialVideoFileApi.js +7 -17
  7. package/cjs/index.js +1 -3
  8. package/es/components/material-video-file/MaterialVideoFile.js +24 -22
  9. package/es/components/material-video-file/MaterialVideoFile.styled.js +1 -1
  10. package/es/components/material-video-file/MaterialVideoFilePlayer.js +52 -73
  11. package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js +2 -2
  12. package/es/components/material-video-file/locales.js +2 -2
  13. package/es/components/material-video-file/useMaterialVideoFileApi.js +7 -15
  14. package/package.json +7 -7
  15. package/cjs/_virtual/_rollupPluginBabelHelpers.js +0 -60
  16. package/es/_virtual/_rollupPluginBabelHelpers.js +0 -51
package/cjs/components/material-video-file/MaterialVideoFile.js CHANGED
@@ -14,48 +14,45 @@ var MaterialVideoFilePlayer = require('./MaterialVideoFilePlayer.js');
14
14
  var useMaterialVideoFileApi = require('./useMaterialVideoFileApi.js');
15
15
  var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
16
16
 
17
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
-
19
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
20
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
21
-
22
17
  //
23
18
  //
24
19
  //
25
- var MaterialVideoFile = function MaterialVideoFile(_a) {
20
+ const MaterialVideoFile = _a => {
26
21
  var _b, _c;
27
- var materialVideoFileId = _a.materialVideoFileId,
28
- className = _a.className,
29
- _a$locale = _a.locale,
30
- locale = _a$locale === void 0 ? 'en' : _a$locale,
31
- eliceAccountApiConfiguration = _a.eliceAccountApiConfiguration,
22
+ var {
23
+ materialVideoFileId,
24
+ className,
25
+ locale = 'en',
26
+ eliceAccountApiConfiguration
27
+ } = _a,
32
28
  playerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "locale", "eliceAccountApiConfiguration"]);
33
- var prefixCls = 'em-material-video-file';
34
- var _useMaterialConfig = materialSharedUtils.useMaterialConfig(),
35
- orgNameShort = _useMaterialConfig.orgNameShort;
36
- var _useMaterialVideoFile = useMaterialVideoFileApi.useMaterialVideoFileApi({
37
- eliceAccountApiConfiguration: eliceAccountApiConfiguration
38
- }),
39
- accountApi = _useMaterialVideoFile.accountApi;
40
- var _useMaterialFetch = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.VideoFile, React__default["default"].useCallback(function (signal) {
41
- return apiClient.getOrgMaterialVideoFileGet({
42
- materialVideoFileId: materialVideoFileId
43
- }, {
44
- signal: signal
45
- });
46
- }, [materialVideoFileId]), apiClient.config.init),
47
- materialVideoFile = _useMaterialFetch.materialVideoFile,
48
- materialVideoFileStatus = _useMaterialFetch.status;
29
+ const prefixCls = 'em-material-video-file';
30
+ const {
31
+ orgNameShort
32
+ } = materialSharedUtils.useMaterialConfig();
33
+ const {
34
+ accountApi
35
+ } = useMaterialVideoFileApi.useMaterialVideoFileApi({
36
+ eliceAccountApiConfiguration
37
+ });
38
+ const {
39
+ materialVideoFile,
40
+ status: materialVideoFileStatus
41
+ } = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.VideoFile, React.useCallback(signal => apiClient.getOrgMaterialVideoFileGet({
42
+ materialVideoFileId
43
+ }, {
44
+ signal
45
+ }), [materialVideoFileId]), apiClient.config.init);
49
46
  //
50
47
  //
51
48
  //
52
- return React__default["default"].createElement(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
53
- className: classnames__default["default"](prefixCls, className)
54
- }, React__default["default"].createElement(reactIntl.IntlProvider, {
49
+ return React.createElement(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
50
+ className: classnames(prefixCls, className)
51
+ }, React.createElement(reactIntl.IntlProvider, {
55
52
  locale: locale,
56
53
  defaultLocale: "en",
57
54
  messages: locale in locales ? locales[locale] : locales.en
58
- }, React__default["default"].createElement(MaterialVideoFilePlayer["default"], Object.assign({}, playerProps, {
55
+ }, React.createElement(MaterialVideoFilePlayer.default, Object.assign({}, playerProps, {
59
56
  orgNameShort: orgNameShort,
60
57
  materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
61
58
  materialVideoFileStatus: materialVideoFileStatus,
@@ -64,4 +61,4 @@ var MaterialVideoFile = function MaterialVideoFile(_a) {
64
61
  }))));
65
62
  };
66
63
 
67
- exports["default"] = MaterialVideoFile;
64
+ exports.default = MaterialVideoFile;
package/cjs/components/material-video-file/MaterialVideoFile.styled.js CHANGED
@@ -1,15 +1,9 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var designTokens = require('@elice/design-tokens');
6
4
  var styled = require('styled-components');
7
5
 
8
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
9
-
10
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
11
-
12
- var StyledMaterialVideoFileWrap = styled__default["default"].div.withConfig({
6
+ const StyledMaterialVideoFileWrap = styled.div.withConfig({
13
7
  componentId: "sc-1a1otok-0"
14
8
  })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], designTokens.base.color.gray9);
15
9
 
package/cjs/components/material-video-file/MaterialVideoFilePlayer.js CHANGED
@@ -2,7 +2,6 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
6
5
  var React = require('react');
7
6
  var reactIntl = require('react-intl');
8
7
  var blocks = require('@elice/blocks');
@@ -10,11 +9,6 @@ var types = require('@elice/types');
10
9
  var classnames = require('classnames');
11
10
  var MaterialVideoFilePlayer_styled = require('./MaterialVideoFilePlayer.styled.js');
12
11
 
13
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
-
15
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
16
- var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
17
-
18
12
  //
19
13
  //
20
14
  //
@@ -37,48 +31,37 @@ var VideoMimeType;
37
31
  //
38
32
  //
39
33
  //
40
- var ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
41
- var ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
34
+ const ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
35
+ const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
42
36
  //
43
37
  //
44
38
  //
45
- var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
46
- var className = _ref.className,
47
- materialVideoFile = _ref.materialVideoFile,
48
- _ref$materialVideoFil = _ref.materialVideoFileStatus,
49
- materialVideoFileStatus = _ref$materialVideoFil === void 0 ? 'idle' : _ref$materialVideoFil,
50
- _ref$materialVideoFil2 = _ref.materialVideoFileTrackerDisabled,
51
- materialVideoFileTrackerDisabled = _ref$materialVideoFil2 === void 0 ? false : _ref$materialVideoFil2,
52
- mainLecturePageId = _ref.mainLecturePageId,
53
- orgNameShort = _ref.orgNameShort,
54
- _ref$lms = _ref.lms,
55
- lms = _ref$lms === void 0 ? false : _ref$lms,
56
- _ref$lmsOrganizationB = _ref.lmsOrganizationBusinessType,
57
- lmsOrganizationBusinessType = _ref$lmsOrganizationB === void 0 ? null : _ref$lmsOrganizationB,
58
- _ref$autoPlay = _ref.autoPlay,
59
- autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
60
- _ref$autoPlayNext = _ref.autoPlayNext,
61
- autoPlayNext = _ref$autoPlayNext === void 0 ? false : _ref$autoPlayNext,
62
- _ref$endControl = _ref.endControl,
63
- endControl = _ref$endControl === void 0 ? false : _ref$endControl,
64
- locale = _ref.locale,
65
- eliceVideoPlayerUrl = _ref.eliceVideoPlayerUrl,
66
- _ref$emptyComponent = _ref.emptyComponent,
67
- emptyComponent = _ref$emptyComponent === void 0 ? null : _ref$emptyComponent,
68
- _ref$title = _ref.title,
69
- title = _ref$title === void 0 ? 'elice-videoplayer' : _ref$title,
70
- onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage,
71
- onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
72
- accountApi = _ref.accountApi;
73
- var prefixCls = 'em-video-player';
74
- var _React$useState = React__default["default"].useState(null),
75
- _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
76
- playerFrameSrc = _React$useState2[0],
77
- setPlayerFrameSrc = _React$useState2[1];
39
+ const MaterialVideoFilePlayer = ({
40
+ className,
41
+ materialVideoFile,
42
+ materialVideoFileStatus = 'idle',
43
+ materialVideoFileTrackerDisabled = false,
44
+ mainLecturePageId,
45
+ orgNameShort,
46
+ lms = false,
47
+ lmsOrganizationBusinessType = null,
48
+ autoPlay = false,
49
+ autoPlayNext = false,
50
+ endControl = false,
51
+ locale,
52
+ eliceVideoPlayerUrl,
53
+ emptyComponent = null,
54
+ title = 'elice-videoplayer',
55
+ onNavigatePreviousLecturePage,
56
+ onNavigateNextLecturePage,
57
+ accountApi
58
+ }) => {
59
+ const prefixCls = 'em-video-player';
60
+ const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
78
61
  /**
79
62
  * Current video status.
80
63
  */
81
- var materialVideoFileUploadStatus = React__default["default"].useMemo(function () {
64
+ const materialVideoFileUploadStatus = React.useMemo(() => {
82
65
  var _a, _b, _c, _d;
83
66
  switch (true) {
84
67
  case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
@@ -96,67 +79,58 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
96
79
  //
97
80
  // Get video iframe src.
98
81
  //
99
- React__default["default"].useEffect(function () {
82
+ React.useEffect(() => {
100
83
  if (!eliceVideoPlayerUrl || !materialVideoFile) {
101
84
  return;
102
85
  }
103
- var abortCtrl = new AbortController();
86
+ const abortCtrl = new AbortController();
104
87
  accountApi.auth.authOtpPost({
105
88
  signal: abortCtrl.signal
106
89
  })
107
90
  // issue otp key
108
- .then(function (res) {
109
- return res.otp;
110
- })
91
+ .then(res => res.otp)
111
92
  // create search params
112
- .then(function (otp) {
113
- return {
114
- org: orgNameShort,
115
- mid: materialVideoFile.id,
116
- lmid: mainLecturePageId,
117
- lms: lms,
118
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
119
- codec: VideoMimeType.Smooth,
120
- autoplay: autoPlay,
121
- autoplaynext: autoPlayNext,
122
- endctrl: endControl,
123
- notrack: materialVideoFileTrackerDisabled,
124
- origin: window.location.origin,
125
- locale: locale,
126
- otp: otp
127
- };
128
- })
93
+ .then(otp => ({
94
+ org: orgNameShort,
95
+ mid: materialVideoFile.id,
96
+ lmid: mainLecturePageId,
97
+ lms,
98
+ lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
99
+ codec: VideoMimeType.Smooth,
100
+ autoplay: autoPlay,
101
+ autoplaynext: autoPlayNext,
102
+ endctrl: endControl,
103
+ notrack: materialVideoFileTrackerDisabled,
104
+ origin: window.location.origin,
105
+ locale,
106
+ otp
107
+ }))
129
108
  // create url from search params
130
- .then(function (params) {
131
- var url = new URL(eliceVideoPlayerUrl);
132
- Object.entries(params).forEach(function (_ref2) {
133
- var _ref3 = _rollupPluginBabelHelpers.slicedToArray(_ref2, 2),
134
- key = _ref3[0],
135
- value = _ref3[1];
109
+ .then(params => {
110
+ const url = new URL(eliceVideoPlayerUrl);
111
+ Object.entries(params).forEach(([key, value]) => {
136
112
  if (value) {
137
113
  url.searchParams.set(key, value);
138
114
  }
139
115
  });
140
116
  return url;
141
- }).then(function (url) {
142
- return url.href;
143
- }).then(setPlayerFrameSrc).catch(function (err) {
117
+ }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
144
118
  if (err.name !== 'AbortError') {
145
119
  setPlayerFrameSrc(null);
146
120
  }
147
121
  });
148
- return function () {
122
+ return () => {
149
123
  abortCtrl.abort();
150
124
  };
151
125
  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
152
126
  //
153
127
  // Add event listener for navigating prev and next lecture page.
154
128
  //
155
- React__default["default"].useEffect(function () {
156
- var _handle = function _handle(event) {
129
+ React.useEffect(() => {
130
+ const _handle = event => {
157
131
  var _a, _b, _c;
158
132
  try {
159
- var edata = JSON.parse(event.data);
133
+ const edata = JSON.parse(event.data);
160
134
  if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
161
135
  return;
162
136
  }
@@ -177,7 +151,7 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
177
151
  }
178
152
  };
179
153
  window.addEventListener('message', _handle);
180
- return function () {
154
+ return () => {
181
155
  window.removeEventListener('message', _handle);
182
156
  };
183
157
  },
@@ -188,39 +162,39 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
188
162
  //
189
163
  // pending
190
164
  if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
191
- return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Spinner, null));
165
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Spinner, null));
192
166
  }
193
167
  // rejected / empty video
194
168
  if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
195
- return React__default["default"].createElement(React__default["default"].Fragment, {
169
+ return React.createElement(React.Fragment, {
196
170
  children: emptyComponent
197
171
  });
198
172
  }
199
173
  // encoding
200
174
  if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
201
- return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Spinner, null), React__default["default"].createElement(blocks.Text, {
175
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Spinner, null), React.createElement(blocks.Text, {
202
176
  role: "gray3",
203
177
  lineHeight: 1.5,
204
178
  textAlign: "center",
205
179
  preWrap: true
206
- }, React__default["default"].createElement(reactIntl.FormattedMessage, {
180
+ }, React.createElement(reactIntl.FormattedMessage, {
207
181
  id: "videoFile.player.encoding"
208
182
  })));
209
183
  }
210
184
  // encoding failed
211
185
  if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
212
- return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React__default["default"].createElement(blocks.Text, {
186
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Text, {
213
187
  role: "gray3",
214
188
  lineHeight: 1.5,
215
189
  textAlign: "center",
216
190
  preWrap: true
217
- }, React__default["default"].createElement(reactIntl.FormattedMessage, {
191
+ }, React.createElement(reactIntl.FormattedMessage, {
218
192
  id: "videoFile.player.encodingFailed"
219
193
  })));
220
194
  }
221
195
  // resolved
222
- return React__default["default"].createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
223
- className: classnames__default["default"](prefixCls, className),
196
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
197
+ className: classnames(prefixCls, className),
224
198
  src: playerFrameSrc,
225
199
  title: title,
226
200
  allow: "autoplay",
@@ -231,4 +205,4 @@ var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
231
205
  MimeType: VideoMimeType
232
206
  });
233
207
 
234
- exports["default"] = MaterialVideoFilePlayer$1;
208
+ exports.default = MaterialVideoFilePlayer$1;
package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js CHANGED
@@ -1,17 +1,11 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var styled = require('styled-components');
6
4
 
7
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
-
9
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
10
-
11
- var StyledVideoPlayerWrap = styled__default["default"].iframe.withConfig({
5
+ const StyledVideoPlayerWrap = styled.iframe.withConfig({
12
6
  componentId: "sc-1ocq3lp-0"
13
7
  })(["width:100%;height:100%;border:0;"]);
14
- var StyledVideoPlayerLoading = styled__default["default"].div.withConfig({
8
+ const StyledVideoPlayerLoading = styled.div.withConfig({
15
9
  componentId: "sc-1ocq3lp-1"
16
10
  })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
17
11
 
package/cjs/components/material-video-file/locales.js CHANGED
@@ -1,15 +1,13 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var en = {
3
+ const en = {
6
4
  'videoFile.player.preparing': 'Material on preparing.',
7
5
  'videoFile.player.uploadVideoBtn': 'Upload File',
8
6
  'videoFile.player.encoding': 'A video is being prepared.\nPlease check back later.',
9
7
  'videoFile.player.encodingFailed': 'There was a problem processing the video.\nIf the problem persists, please contact customer service.',
10
8
  'videoFile.player.noVideo': 'This file does not exist.'
11
9
  };
12
- var ko = {
10
+ const ko = {
13
11
  'videoFile.player.preparing': '자료를 준비 중입니다.',
14
12
  'videoFile.player.uploadVideoBtn': '파일 업로드',
15
13
  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
package/cjs/components/material-video-file/useMaterialVideoFileApi.js CHANGED
@@ -1,37 +1,27 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
6
3
  var React = require('react');
7
4
  var openapiClientAccount = require('@elice/openapi-client-account');
8
5
 
9
6
  //
10
7
  //
11
8
  //
12
- var useMaterialVideoFileApi = function useMaterialVideoFileApi(props) {
13
- var _return = React.useRef({});
9
+ const useMaterialVideoFileApi = props => {
10
+ const _return = React.useRef({});
14
11
  //
15
12
  //
16
13
  //
17
- var createAccountApi = function createAccountApi() {
18
- return Object.freeze({
19
- auth: new openapiClientAccount.AuthApi(props.eliceAccountApiConfiguration)
20
- });
21
- };
14
+ const createAccountApi = () => Object.freeze({
15
+ auth: new openapiClientAccount.AuthApi(props.eliceAccountApiConfiguration)
16
+ });
22
17
  //
23
18
  //
24
19
  //
25
- var _useState = React.useState(createAccountApi),
26
- _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
27
- accountApi = _useState2[0],
28
- setAccountApi = _useState2[1];
20
+ const [accountApi, setAccountApi] = React.useState(createAccountApi);
29
21
  //
30
22
  //
31
23
  //
32
- React.useEffect(function () {
33
- return setAccountApi(createAccountApi);
34
- },
24
+ React.useEffect(() => setAccountApi(createAccountApi),
35
25
  // eslint-disable-next-line react-hooks/exhaustive-deps
36
26
  [props.eliceAccountApiConfiguration]);
37
27
  //
package/cjs/index.js CHANGED
@@ -1,9 +1,7 @@
1
1
  'use strict';
2
2
 
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
3
  var MaterialVideoFile = require('./components/material-video-file/MaterialVideoFile.js');
6
4
 
7
5
 
8
6
 
9
- exports.MaterialVideoFile = MaterialVideoFile["default"];
7
+ exports.MaterialVideoFile = MaterialVideoFile.default;
package/es/components/material-video-file/MaterialVideoFile.js CHANGED
@@ -14,30 +14,32 @@ import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
14
14
  //
15
15
  //
16
16
  //
17
- var MaterialVideoFile = function MaterialVideoFile(_a) {
17
+ const MaterialVideoFile = _a => {
18
18
  var _b, _c;
19
- var materialVideoFileId = _a.materialVideoFileId,
20
- className = _a.className,
21
- _a$locale = _a.locale,
22
- locale = _a$locale === void 0 ? 'en' : _a$locale,
23
- eliceAccountApiConfiguration = _a.eliceAccountApiConfiguration,
19
+ var {
20
+ materialVideoFileId,
21
+ className,
22
+ locale = 'en',
23
+ eliceAccountApiConfiguration
24
+ } = _a,
24
25
  playerProps = __rest(_a, ["materialVideoFileId", "className", "locale", "eliceAccountApiConfiguration"]);
25
- var prefixCls = 'em-material-video-file';
26
- var _useMaterialConfig = useMaterialConfig(),
27
- orgNameShort = _useMaterialConfig.orgNameShort;
28
- var _useMaterialVideoFile = useMaterialVideoFileApi({
29
- eliceAccountApiConfiguration: eliceAccountApiConfiguration
30
- }),
31
- accountApi = _useMaterialVideoFile.accountApi;
32
- var _useMaterialFetch = useMaterialFetch(enums.LectureMaterialType.VideoFile, React.useCallback(function (signal) {
33
- return getOrgMaterialVideoFileGet({
34
- materialVideoFileId: materialVideoFileId
35
- }, {
36
- signal: signal
37
- });
38
- }, [materialVideoFileId]), config.init),
39
- materialVideoFile = _useMaterialFetch.materialVideoFile,
40
- materialVideoFileStatus = _useMaterialFetch.status;
26
+ const prefixCls = 'em-material-video-file';
27
+ const {
28
+ orgNameShort
29
+ } = useMaterialConfig();
30
+ const {
31
+ accountApi
32
+ } = useMaterialVideoFileApi({
33
+ eliceAccountApiConfiguration
34
+ });
35
+ const {
36
+ materialVideoFile,
37
+ status: materialVideoFileStatus
38
+ } = useMaterialFetch(enums.LectureMaterialType.VideoFile, React.useCallback(signal => getOrgMaterialVideoFileGet({
39
+ materialVideoFileId
40
+ }, {
41
+ signal
42
+ }), [materialVideoFileId]), config.init);
41
43
  //
42
44
  //
43
45
  //
package/es/components/material-video-file/MaterialVideoFile.styled.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { base } from '@elice/design-tokens';
2
2
  import styled from 'styled-components';
3
3
 
4
- var StyledMaterialVideoFileWrap = styled.div.withConfig({
4
+ const StyledMaterialVideoFileWrap = styled.div.withConfig({
5
5
  componentId: "sc-1a1otok-0"
6
6
  })(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], base.color.gray9);
7
7
 
package/es/components/material-video-file/MaterialVideoFilePlayer.js CHANGED
@@ -1,4 +1,3 @@
1
- import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import React from 'react';
3
2
  import { FormattedMessage } from 'react-intl';
4
3
  import { Spinner, Text } from '@elice/blocks';
@@ -28,48 +27,37 @@ var VideoMimeType;
28
27
  //
29
28
  //
30
29
  //
31
- var ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
32
- var ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
30
+ const ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
31
+ const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
33
32
  //
34
33
  //
35
34
  //
36
- var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
37
- var className = _ref.className,
38
- materialVideoFile = _ref.materialVideoFile,
39
- _ref$materialVideoFil = _ref.materialVideoFileStatus,
40
- materialVideoFileStatus = _ref$materialVideoFil === void 0 ? 'idle' : _ref$materialVideoFil,
41
- _ref$materialVideoFil2 = _ref.materialVideoFileTrackerDisabled,
42
- materialVideoFileTrackerDisabled = _ref$materialVideoFil2 === void 0 ? false : _ref$materialVideoFil2,
43
- mainLecturePageId = _ref.mainLecturePageId,
44
- orgNameShort = _ref.orgNameShort,
45
- _ref$lms = _ref.lms,
46
- lms = _ref$lms === void 0 ? false : _ref$lms,
47
- _ref$lmsOrganizationB = _ref.lmsOrganizationBusinessType,
48
- lmsOrganizationBusinessType = _ref$lmsOrganizationB === void 0 ? null : _ref$lmsOrganizationB,
49
- _ref$autoPlay = _ref.autoPlay,
50
- autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
51
- _ref$autoPlayNext = _ref.autoPlayNext,
52
- autoPlayNext = _ref$autoPlayNext === void 0 ? false : _ref$autoPlayNext,
53
- _ref$endControl = _ref.endControl,
54
- endControl = _ref$endControl === void 0 ? false : _ref$endControl,
55
- locale = _ref.locale,
56
- eliceVideoPlayerUrl = _ref.eliceVideoPlayerUrl,
57
- _ref$emptyComponent = _ref.emptyComponent,
58
- emptyComponent = _ref$emptyComponent === void 0 ? null : _ref$emptyComponent,
59
- _ref$title = _ref.title,
60
- title = _ref$title === void 0 ? 'elice-videoplayer' : _ref$title,
61
- onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage,
62
- onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
63
- accountApi = _ref.accountApi;
64
- var prefixCls = 'em-video-player';
65
- var _React$useState = React.useState(null),
66
- _React$useState2 = _slicedToArray(_React$useState, 2),
67
- playerFrameSrc = _React$useState2[0],
68
- setPlayerFrameSrc = _React$useState2[1];
35
+ const MaterialVideoFilePlayer = ({
36
+ className,
37
+ materialVideoFile,
38
+ materialVideoFileStatus = 'idle',
39
+ materialVideoFileTrackerDisabled = false,
40
+ mainLecturePageId,
41
+ orgNameShort,
42
+ lms = false,
43
+ lmsOrganizationBusinessType = null,
44
+ autoPlay = false,
45
+ autoPlayNext = false,
46
+ endControl = false,
47
+ locale,
48
+ eliceVideoPlayerUrl,
49
+ emptyComponent = null,
50
+ title = 'elice-videoplayer',
51
+ onNavigatePreviousLecturePage,
52
+ onNavigateNextLecturePage,
53
+ accountApi
54
+ }) => {
55
+ const prefixCls = 'em-video-player';
56
+ const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
69
57
  /**
70
58
  * Current video status.
71
59
  */
72
- var materialVideoFileUploadStatus = React.useMemo(function () {
60
+ const materialVideoFileUploadStatus = React.useMemo(() => {
73
61
  var _a, _b, _c, _d;
74
62
  switch (true) {
75
63
  case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
@@ -87,67 +75,58 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
87
75
  //
88
76
  // Get video iframe src.
89
77
  //
90
- React.useEffect(function () {
78
+ React.useEffect(() => {
91
79
  if (!eliceVideoPlayerUrl || !materialVideoFile) {
92
80
  return;
93
81
  }
94
- var abortCtrl = new AbortController();
82
+ const abortCtrl = new AbortController();
95
83
  accountApi.auth.authOtpPost({
96
84
  signal: abortCtrl.signal
97
85
  })
98
86
  // issue otp key
99
- .then(function (res) {
100
- return res.otp;
101
- })
87
+ .then(res => res.otp)
102
88
  // create search params
103
- .then(function (otp) {
104
- return {
105
- org: orgNameShort,
106
- mid: materialVideoFile.id,
107
- lmid: mainLecturePageId,
108
- lms: lms,
109
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
110
- codec: VideoMimeType.Smooth,
111
- autoplay: autoPlay,
112
- autoplaynext: autoPlayNext,
113
- endctrl: endControl,
114
- notrack: materialVideoFileTrackerDisabled,
115
- origin: window.location.origin,
116
- locale: locale,
117
- otp: otp
118
- };
119
- })
89
+ .then(otp => ({
90
+ org: orgNameShort,
91
+ mid: materialVideoFile.id,
92
+ lmid: mainLecturePageId,
93
+ lms,
94
+ lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
95
+ codec: VideoMimeType.Smooth,
96
+ autoplay: autoPlay,
97
+ autoplaynext: autoPlayNext,
98
+ endctrl: endControl,
99
+ notrack: materialVideoFileTrackerDisabled,
100
+ origin: window.location.origin,
101
+ locale,
102
+ otp
103
+ }))
120
104
  // create url from search params
121
- .then(function (params) {
122
- var url = new URL(eliceVideoPlayerUrl);
123
- Object.entries(params).forEach(function (_ref2) {
124
- var _ref3 = _slicedToArray(_ref2, 2),
125
- key = _ref3[0],
126
- value = _ref3[1];
105
+ .then(params => {
106
+ const url = new URL(eliceVideoPlayerUrl);
107
+ Object.entries(params).forEach(([key, value]) => {
127
108
  if (value) {
128
109
  url.searchParams.set(key, value);
129
110
  }
130
111
  });
131
112
  return url;
132
- }).then(function (url) {
133
- return url.href;
134
- }).then(setPlayerFrameSrc).catch(function (err) {
113
+ }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
135
114
  if (err.name !== 'AbortError') {
136
115
  setPlayerFrameSrc(null);
137
116
  }
138
117
  });
139
- return function () {
118
+ return () => {
140
119
  abortCtrl.abort();
141
120
  };
142
121
  }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
143
122
  //
144
123
  // Add event listener for navigating prev and next lecture page.
145
124
  //
146
- React.useEffect(function () {
147
- var _handle = function _handle(event) {
125
+ React.useEffect(() => {
126
+ const _handle = event => {
148
127
  var _a, _b, _c;
149
128
  try {
150
- var edata = JSON.parse(event.data);
129
+ const edata = JSON.parse(event.data);
151
130
  if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
152
131
  return;
153
132
  }
@@ -168,7 +147,7 @@ var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
168
147
  }
169
148
  };
170
149
  window.addEventListener('message', _handle);
171
- return function () {
150
+ return () => {
172
151
  window.removeEventListener('message', _handle);
173
152
  };
174
153
  },
package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import styled from 'styled-components';
2
2
 
3
- var StyledVideoPlayerWrap = styled.iframe.withConfig({
3
+ const StyledVideoPlayerWrap = styled.iframe.withConfig({
4
4
  componentId: "sc-1ocq3lp-0"
5
5
  })(["width:100%;height:100%;border:0;"]);
6
- var StyledVideoPlayerLoading = styled.div.withConfig({
6
+ const StyledVideoPlayerLoading = styled.div.withConfig({
7
7
  componentId: "sc-1ocq3lp-1"
8
8
  })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
9
9
 
package/es/components/material-video-file/locales.js CHANGED
@@ -1,11 +1,11 @@
1
- var en = {
1
+ const en = {
2
2
  'videoFile.player.preparing': 'Material on preparing.',
3
3
  'videoFile.player.uploadVideoBtn': 'Upload File',
4
4
  'videoFile.player.encoding': 'A video is being prepared.\nPlease check back later.',
5
5
  'videoFile.player.encodingFailed': 'There was a problem processing the video.\nIf the problem persists, please contact customer service.',
6
6
  'videoFile.player.noVideo': 'This file does not exist.'
7
7
  };
8
- var ko = {
8
+ const ko = {
9
9
  'videoFile.player.preparing': '자료를 준비 중입니다.',
10
10
  'videoFile.player.uploadVideoBtn': '파일 업로드',
11
11
  'videoFile.player.encoding': '동영상을 준비 중 입니다.\n잠시 후 다시 확인해주세요.',
package/es/components/material-video-file/useMaterialVideoFileApi.js CHANGED
@@ -1,33 +1,25 @@
1
- import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
2
1
  import { useRef, useState, useEffect } from 'react';
3
2
  import { AuthApi } from '@elice/openapi-client-account';
4
3
 
5
4
  //
6
5
  //
7
6
  //
8
- var useMaterialVideoFileApi = function useMaterialVideoFileApi(props) {
9
- var _return = useRef({});
7
+ const useMaterialVideoFileApi = props => {
8
+ const _return = useRef({});
10
9
  //
11
10
  //
12
11
  //
13
- var createAccountApi = function createAccountApi() {
14
- return Object.freeze({
15
- auth: new AuthApi(props.eliceAccountApiConfiguration)
16
- });
17
- };
12
+ const createAccountApi = () => Object.freeze({
13
+ auth: new AuthApi(props.eliceAccountApiConfiguration)
14
+ });
18
15
  //
19
16
  //
20
17
  //
21
- var _useState = useState(createAccountApi),
22
- _useState2 = _slicedToArray(_useState, 2),
23
- accountApi = _useState2[0],
24
- setAccountApi = _useState2[1];
18
+ const [accountApi, setAccountApi] = useState(createAccountApi);
25
19
  //
26
20
  //
27
21
  //
28
- useEffect(function () {
29
- return setAccountApi(createAccountApi);
30
- },
22
+ useEffect(() => setAccountApi(createAccountApi),
31
23
  // eslint-disable-next-line react-hooks/exhaustive-deps
32
24
  [props.eliceAccountApiConfiguration]);
33
25
  //
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-video-file",
3
- "version": "1.231227.0",
3
+ "version": "1.240112.0-cloud.0",
4
4
  "description": "User view and editing components of Elice material video file",
5
5
  "repository": "https://git.elicer.io/elice/frontend/library/elice-material",
6
6
  "license": "UNLICENSED",
@@ -18,9 +18,9 @@
18
18
  "start": "run-s watch",
19
19
  "prebuild": "run-s clean",
20
20
  "build": "run-p build:es build:cjs",
21
- "build:es": "rollup -c ../../rollup.config.ts -f es",
22
- "build:cjs": "rollup -c ../../rollup.config.ts -f cjs",
23
- "watch": "rollup -c ../../rollup.config.ts -f es -w",
21
+ "build:es": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es",
22
+ "build:cjs": "rollup -c ../../rollup.config.ts --configPlugin typescript -f cjs",
23
+ "watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -w",
24
24
  "lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
25
25
  "clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
26
26
  },
@@ -49,8 +49,8 @@
49
49
  "@elice/design-tokens": "^1.220803.0",
50
50
  "@elice/icons": "^1.230814.0",
51
51
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
52
- "@elice/material-shared-types": "1.231227.0",
53
- "@elice/material-shared-utils": "1.231227.0",
52
+ "@elice/material-shared-types": "1.240112.0-cloud.0",
53
+ "@elice/material-shared-utils": "1.240112.0-cloud.0",
54
54
  "@elice/openapi-client-account": "^1.230814.0",
55
55
  "@elice/types": "^1.230815.0",
56
56
  "@types/classnames": "^2.3.1",
@@ -62,5 +62,5 @@
62
62
  "react-use": "^17.2.4",
63
63
  "styled-components": "^5.3.0"
64
64
  },
65
- "gitHead": "9c84854123a8e6ae3a8d734e3bc9b944bf20d924"
65
+ "gitHead": "5724868dc938b0d4987541030e911b60c0dfcff7"
66
66
  }
package/cjs/_virtual/_rollupPluginBabelHelpers.js DELETED
@@ -1,60 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- function _iterableToArrayLimit(arr, i) {
6
- var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
7
- if (null != _i) {
8
- var _s,
9
- _e,
10
- _x,
11
- _r,
12
- _arr = [],
13
- _n = !0,
14
- _d = !1;
15
- try {
16
- if (_x = (_i = _i.call(arr)).next, 0 === i) {
17
- if (Object(_i) !== _i) return;
18
- _n = !1;
19
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
20
- } catch (err) {
21
- _d = !0, _e = err;
22
- } finally {
23
- try {
24
- if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
25
- } finally {
26
- if (_d) throw _e;
27
- }
28
- }
29
- return _arr;
30
- }
31
- }
32
- function _slicedToArray(arr, i) {
33
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
34
- }
35
- function _arrayWithHoles(arr) {
36
- if (Array.isArray(arr)) return arr;
37
- }
38
- function _unsupportedIterableToArray(o, minLen) {
39
- if (!o) return;
40
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
41
- var n = Object.prototype.toString.call(o).slice(8, -1);
42
- if (n === "Object" && o.constructor) n = o.constructor.name;
43
- if (n === "Map" || n === "Set") return Array.from(o);
44
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
45
- }
46
- function _arrayLikeToArray(arr, len) {
47
- if (len == null || len > arr.length) len = arr.length;
48
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
49
- return arr2;
50
- }
51
- function _nonIterableRest() {
52
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
53
- }
54
-
55
- exports.arrayLikeToArray = _arrayLikeToArray;
56
- exports.arrayWithHoles = _arrayWithHoles;
57
- exports.iterableToArrayLimit = _iterableToArrayLimit;
58
- exports.nonIterableRest = _nonIterableRest;
59
- exports.slicedToArray = _slicedToArray;
60
- exports.unsupportedIterableToArray = _unsupportedIterableToArray;
package/es/_virtual/_rollupPluginBabelHelpers.js DELETED
@@ -1,51 +0,0 @@
1
- function _iterableToArrayLimit(arr, i) {
2
- var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
3
- if (null != _i) {
4
- var _s,
5
- _e,
6
- _x,
7
- _r,
8
- _arr = [],
9
- _n = !0,
10
- _d = !1;
11
- try {
12
- if (_x = (_i = _i.call(arr)).next, 0 === i) {
13
- if (Object(_i) !== _i) return;
14
- _n = !1;
15
- } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
16
- } catch (err) {
17
- _d = !0, _e = err;
18
- } finally {
19
- try {
20
- if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
21
- } finally {
22
- if (_d) throw _e;
23
- }
24
- }
25
- return _arr;
26
- }
27
- }
28
- function _slicedToArray(arr, i) {
29
- return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
30
- }
31
- function _arrayWithHoles(arr) {
32
- if (Array.isArray(arr)) return arr;
33
- }
34
- function _unsupportedIterableToArray(o, minLen) {
35
- if (!o) return;
36
- if (typeof o === "string") return _arrayLikeToArray(o, minLen);
37
- var n = Object.prototype.toString.call(o).slice(8, -1);
38
- if (n === "Object" && o.constructor) n = o.constructor.name;
39
- if (n === "Map" || n === "Set") return Array.from(o);
40
- if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
41
- }
42
- function _arrayLikeToArray(arr, len) {
43
- if (len == null || len > arr.length) len = arr.length;
44
- for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
45
- return arr2;
46
- }
47
- function _nonIterableRest() {
48
- throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
49
- }
50
-
51
- export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _slicedToArray as slicedToArray, _unsupportedIterableToArray as unsupportedIterableToArray };