@elice/material-video-file 1.240718.3 → 1.240719.1
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.
- package/cjs/_virtual/_rollupPluginBabelHelpers.js +55 -0
- package/cjs/components/material-video-file/MaterialVideoFile.js +40 -35
- package/cjs/components/material-video-file/MaterialVideoFile.styled.js +5 -1
- package/cjs/components/material-video-file/MaterialVideoFilePlayer.js +68 -43
- package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js +6 -2
- package/cjs/components/material-video-file/index.js +7 -0
- package/cjs/components/material-video-file/locales/index.js +13 -0
- package/cjs/components/material-video-file/useMaterialVideoFileApi.js +15 -7
- package/es/_virtual/_rollupPluginBabelHelpers.js +48 -0
- package/es/components/material-video-file/MaterialVideoFile.js +35 -35
- package/es/components/material-video-file/MaterialVideoFile.styled.js +1 -1
- package/es/components/material-video-file/MaterialVideoFilePlayer.js +62 -42
- package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js +2 -2
- package/es/components/material-video-file/index.js +1 -0
- package/es/components/material-video-file/locales/index.js +4 -0
- package/es/components/material-video-file/useMaterialVideoFileApi.js +15 -7
- package/package.json +8 -11
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
function _iterableToArrayLimit(arr, i) {
|
|
4
|
+
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
|
|
5
|
+
if (null != _i) {
|
|
6
|
+
var _s,
|
|
7
|
+
_e,
|
|
8
|
+
_x,
|
|
9
|
+
_r,
|
|
10
|
+
_arr = [],
|
|
11
|
+
_n = !0,
|
|
12
|
+
_d = !1;
|
|
13
|
+
try {
|
|
14
|
+
if (_x = (_i = _i.call(arr)).next, 0 === i) ; else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
|
|
15
|
+
} catch (err) {
|
|
16
|
+
_d = !0, _e = err;
|
|
17
|
+
} finally {
|
|
18
|
+
try {
|
|
19
|
+
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
|
|
20
|
+
} finally {
|
|
21
|
+
if (_d) throw _e;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return _arr;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
function _slicedToArray(arr, i) {
|
|
28
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
29
|
+
}
|
|
30
|
+
function _arrayWithHoles(arr) {
|
|
31
|
+
if (Array.isArray(arr)) return arr;
|
|
32
|
+
}
|
|
33
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
34
|
+
if (!o) return;
|
|
35
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
36
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
37
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
38
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
39
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
40
|
+
}
|
|
41
|
+
function _arrayLikeToArray(arr, len) {
|
|
42
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
43
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
44
|
+
return arr2;
|
|
45
|
+
}
|
|
46
|
+
function _nonIterableRest() {
|
|
47
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
exports.arrayLikeToArray = _arrayLikeToArray;
|
|
51
|
+
exports.arrayWithHoles = _arrayWithHoles;
|
|
52
|
+
exports.iterableToArrayLimit = _iterableToArrayLimit;
|
|
53
|
+
exports.nonIterableRest = _nonIterableRest;
|
|
54
|
+
exports.slicedToArray = _slicedToArray;
|
|
55
|
+
exports.unsupportedIterableToArray = _unsupportedIterableToArray;
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
7
|
var React = require('react');
|
|
7
8
|
var apiClient = require('@elice/api-client');
|
|
8
9
|
var intl = require('@elice/intl');
|
|
@@ -15,49 +16,53 @@ var MaterialVideoFilePlayer = require('./MaterialVideoFilePlayer.js');
|
|
|
15
16
|
var useMaterialVideoFileApi = require('./useMaterialVideoFileApi.js');
|
|
16
17
|
var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
|
|
17
18
|
|
|
19
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
20
|
+
|
|
21
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
22
|
+
var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
|
|
23
|
+
|
|
18
24
|
//
|
|
19
25
|
//
|
|
20
26
|
//
|
|
21
|
-
|
|
27
|
+
var MaterialVideoFile = function MaterialVideoFile(_a) {
|
|
22
28
|
var _b, _c, _d, _e;
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
__intl
|
|
28
|
-
} = _a,
|
|
29
|
+
var materialVideoFileId = _a.materialVideoFileId,
|
|
30
|
+
className = _a.className,
|
|
31
|
+
eliceAccountApiConfiguration = _a.eliceAccountApiConfiguration,
|
|
32
|
+
__intl = _a.__intl,
|
|
29
33
|
playerProps = tslib.__rest(_a, ["materialVideoFileId", "className", "eliceAccountApiConfiguration", "__intl"]);
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
orgNameShort
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
materialVideoFileId
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
}), [materialVideoFileId]), apiClient.config.init);
|
|
34
|
+
var prefixCls = 'em-material-video-file';
|
|
35
|
+
var _useMaterialConfig = materialSharedUtils.useMaterialConfig(),
|
|
36
|
+
orgNameShort = _useMaterialConfig.orgNameShort;
|
|
37
|
+
var _useMaterialVideoFile = useMaterialVideoFileApi.useMaterialVideoFileApi({
|
|
38
|
+
eliceAccountApiConfiguration: eliceAccountApiConfiguration
|
|
39
|
+
}),
|
|
40
|
+
accountApi = _useMaterialVideoFile.accountApi;
|
|
41
|
+
var _useMaterialFetch = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.VideoFile, React__default.default.useCallback(function (signal) {
|
|
42
|
+
return apiClient.getOrgMaterialVideoFileGet({
|
|
43
|
+
materialVideoFileId: materialVideoFileId
|
|
44
|
+
}, {
|
|
45
|
+
signal: signal
|
|
46
|
+
});
|
|
47
|
+
}, [materialVideoFileId]), apiClient.config.init),
|
|
48
|
+
materialVideoFile = _useMaterialFetch.materialVideoFile,
|
|
49
|
+
materialVideoFileStatus = _useMaterialFetch.status;
|
|
47
50
|
//
|
|
48
51
|
//
|
|
49
52
|
//
|
|
50
|
-
return
|
|
51
|
-
value: __intl
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
53
|
+
return jsxRuntime.jsx(intl.RawEliceIntlProvider, {
|
|
54
|
+
value: __intl,
|
|
55
|
+
children: jsxRuntime.jsx(MaterialVideoFile_styled.StyledMaterialVideoFileWrap, {
|
|
56
|
+
className: classnames__default.default(prefixCls, className),
|
|
57
|
+
children: jsxRuntime.jsx(MaterialVideoFilePlayer.default, Object.assign({}, playerProps, {
|
|
58
|
+
orgNameShort: orgNameShort,
|
|
59
|
+
materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
|
|
60
|
+
materialVideoFileStatus: materialVideoFileStatus,
|
|
61
|
+
accountApi: accountApi,
|
|
62
|
+
title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined
|
|
63
|
+
}))
|
|
64
|
+
})
|
|
65
|
+
});
|
|
61
66
|
};
|
|
62
67
|
var MaterialVideoFile$1 = new intl.IntlComponentBuilder(MaterialVideoFile).add('en', en.default).add('ko', ko.default).addAsync('th', Promise.resolve().then(function () { return require('./locales/th.json.js'); })).addAsync('ja', Promise.resolve().then(function () { return require('./locales/ja.json.js'); })).build();
|
|
63
68
|
|
|
@@ -3,7 +3,11 @@
|
|
|
3
3
|
var designTokens = require('@elice/design-tokens');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var StyledMaterialVideoFileWrap = styled__default.default.div.withConfig({
|
|
7
11
|
componentId: "sc-1a1otok-0"
|
|
8
12
|
})(["display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;background:", ";"], designTokens.base.color.gray9);
|
|
9
13
|
|
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
6
|
var React = require('react');
|
|
6
7
|
var blocks = require('@elice/blocks');
|
|
7
8
|
var intl = require('@elice/intl');
|
|
@@ -9,6 +10,11 @@ var types = require('@elice/types');
|
|
|
9
10
|
var classnames = require('classnames');
|
|
10
11
|
var MaterialVideoFilePlayer_styled = require('./MaterialVideoFilePlayer.styled.js');
|
|
11
12
|
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
14
|
+
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
|
+
var classnames__default = /*#__PURE__*/_interopDefaultCompat(classnames);
|
|
17
|
+
|
|
12
18
|
//
|
|
13
19
|
//
|
|
14
20
|
//
|
|
@@ -22,31 +28,38 @@ var VideoUploadStatus;
|
|
|
22
28
|
//
|
|
23
29
|
//
|
|
24
30
|
//
|
|
25
|
-
|
|
26
|
-
className,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
31
|
+
var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
|
|
32
|
+
var className = _ref.className,
|
|
33
|
+
materialVideoFile = _ref.materialVideoFile,
|
|
34
|
+
_ref$materialVideoFil = _ref.materialVideoFileStatus,
|
|
35
|
+
materialVideoFileStatus = _ref$materialVideoFil === void 0 ? 'idle' : _ref$materialVideoFil,
|
|
36
|
+
_ref$materialVideoFil2 = _ref.materialVideoFileTrackerDisabled,
|
|
37
|
+
materialVideoFileTrackerDisabled = _ref$materialVideoFil2 === void 0 ? false : _ref$materialVideoFil2,
|
|
38
|
+
mainLecturePageId = _ref.mainLecturePageId,
|
|
39
|
+
orgNameShort = _ref.orgNameShort,
|
|
40
|
+
_ref$lms = _ref.lms,
|
|
41
|
+
lms = _ref$lms === void 0 ? false : _ref$lms,
|
|
42
|
+
_ref$lmsOrganizationB = _ref.lmsOrganizationBusinessType,
|
|
43
|
+
lmsOrganizationBusinessType = _ref$lmsOrganizationB === void 0 ? null : _ref$lmsOrganizationB,
|
|
44
|
+
_ref$autoPlay = _ref.autoPlay,
|
|
45
|
+
autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
|
|
46
|
+
_ref$autoPlayNext = _ref.autoPlayNext,
|
|
47
|
+
autoPlayNext = _ref$autoPlayNext === void 0 ? false : _ref$autoPlayNext,
|
|
48
|
+
_ref$endControl = _ref.endControl,
|
|
49
|
+
endControl = _ref$endControl === void 0 ? false : _ref$endControl,
|
|
50
|
+
eliceVideoPlayerUrl = _ref.eliceVideoPlayerUrl,
|
|
51
|
+
_ref$emptyComponent = _ref.emptyComponent,
|
|
52
|
+
emptyComponent = _ref$emptyComponent === void 0 ? null : _ref$emptyComponent,
|
|
53
|
+
onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage,
|
|
54
|
+
onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
|
|
55
|
+
accountApi = _ref.accountApi;
|
|
43
56
|
var _a;
|
|
44
|
-
|
|
45
|
-
|
|
57
|
+
var prefixCls = 'em-video-player';
|
|
58
|
+
var intl$1 = intl.useRawEliceIntl();
|
|
46
59
|
/**
|
|
47
60
|
* Current video status.
|
|
48
61
|
*/
|
|
49
|
-
|
|
62
|
+
var materialVideoFileUploadStatus = React__default.default.useMemo(function () {
|
|
50
63
|
var _a, _b, _c;
|
|
51
64
|
// empty
|
|
52
65
|
if (typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _a === void 0 ? void 0 : _a.status) === 'undefined' && typeof ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === 'undefined') {
|
|
@@ -86,39 +99,47 @@ const MaterialVideoFilePlayer = ({
|
|
|
86
99
|
//
|
|
87
100
|
// pending
|
|
88
101
|
if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
|
|
89
|
-
return
|
|
102
|
+
return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
|
|
103
|
+
children: jsxRuntime.jsx(blocks.Spinner, {})
|
|
104
|
+
});
|
|
90
105
|
}
|
|
91
106
|
// rejected / empty video
|
|
92
107
|
if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
|
|
93
|
-
return
|
|
108
|
+
return jsxRuntime.jsx(React__default.default.Fragment, {
|
|
94
109
|
children: emptyComponent
|
|
95
110
|
});
|
|
96
111
|
}
|
|
97
112
|
// encoding
|
|
98
113
|
if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
|
|
99
|
-
return
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
114
|
+
return jsxRuntime.jsxs(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
|
|
115
|
+
children: [jsxRuntime.jsx(blocks.Spinner, {}), jsxRuntime.jsx(blocks.Text, {
|
|
116
|
+
role: "gray3",
|
|
117
|
+
lineHeight: 1.5,
|
|
118
|
+
textAlign: "center",
|
|
119
|
+
preWrap: true,
|
|
120
|
+
children: intl$1.formatMessage({
|
|
121
|
+
id: 'videoFile.player.encoding'
|
|
122
|
+
})
|
|
123
|
+
})]
|
|
124
|
+
});
|
|
107
125
|
}
|
|
108
126
|
// encoding failed
|
|
109
127
|
if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
|
|
110
|
-
return
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
128
|
+
return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, {
|
|
129
|
+
children: jsxRuntime.jsx(blocks.Text, {
|
|
130
|
+
role: "gray3",
|
|
131
|
+
lineHeight: 1.5,
|
|
132
|
+
textAlign: "center",
|
|
133
|
+
preWrap: true,
|
|
134
|
+
children: intl$1.formatMessage({
|
|
135
|
+
id: 'videoFile.player.encodingFailed'
|
|
136
|
+
})
|
|
137
|
+
})
|
|
138
|
+
});
|
|
118
139
|
}
|
|
119
140
|
// resolved
|
|
120
|
-
return
|
|
121
|
-
className:
|
|
141
|
+
return jsxRuntime.jsx(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
|
|
142
|
+
className: classnames__default.default(prefixCls, className),
|
|
122
143
|
orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
|
|
123
144
|
materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
|
|
124
145
|
linkedMaterialId: mainLecturePageId,
|
|
@@ -128,8 +149,12 @@ const MaterialVideoFilePlayer = ({
|
|
|
128
149
|
noEndControl: !endControl,
|
|
129
150
|
noTracker: materialVideoFileTrackerDisabled,
|
|
130
151
|
playerBaseUrl: eliceVideoPlayerUrl,
|
|
131
|
-
otp:
|
|
132
|
-
|
|
152
|
+
otp: function otp() {
|
|
153
|
+
return accountApi.auth.authOtpPost().then(function (res) {
|
|
154
|
+
return res.otp;
|
|
155
|
+
});
|
|
156
|
+
},
|
|
157
|
+
onLecturePageNavigate: function onLecturePageNavigate(dir) {
|
|
133
158
|
if (dir === 'prev' && onNavigatePreviousLecturePage) {
|
|
134
159
|
onNavigatePreviousLecturePage();
|
|
135
160
|
} else if (dir === 'next' && onNavigateNextLecturePage) {
|
|
@@ -3,10 +3,14 @@
|
|
|
3
3
|
var videoplayerClient = require('@elice/videoplayer-client');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
+
|
|
10
|
+
var StyledVideoPlayer = styled__default.default(videoplayerClient.EliceVideoplayer).withConfig({
|
|
7
11
|
componentId: "sc-1ocq3lp-0"
|
|
8
12
|
})(["width:100%;height:100%;border:0;"]);
|
|
9
|
-
|
|
13
|
+
var StyledVideoPlayerLoading = styled__default.default.div.withConfig({
|
|
10
14
|
componentId: "sc-1ocq3lp-1"
|
|
11
15
|
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
|
|
12
16
|
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var en = require('./en.json.js');
|
|
4
|
+
var ko = require('./ko.json.js');
|
|
5
|
+
var th = require('./th.json.js');
|
|
6
|
+
var ja = require('./ja.json.js');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.messageEn = en.default;
|
|
11
|
+
exports.messageKo = ko.default;
|
|
12
|
+
exports.messageTh = th.default;
|
|
13
|
+
exports.messageJa = ja.default;
|
|
@@ -1,27 +1,35 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
|
|
3
4
|
var React = require('react');
|
|
4
5
|
var openapiClientAccount = require('@elice/openapi-client-account');
|
|
5
6
|
|
|
6
7
|
//
|
|
7
8
|
//
|
|
8
9
|
//
|
|
9
|
-
|
|
10
|
-
|
|
10
|
+
var useMaterialVideoFileApi = function useMaterialVideoFileApi(props) {
|
|
11
|
+
var _return = React.useRef({});
|
|
11
12
|
//
|
|
12
13
|
//
|
|
13
14
|
//
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
var createAccountApi = function createAccountApi() {
|
|
16
|
+
return Object.freeze({
|
|
17
|
+
auth: new openapiClientAccount.AuthApi(props.eliceAccountApiConfiguration)
|
|
18
|
+
});
|
|
19
|
+
};
|
|
17
20
|
//
|
|
18
21
|
//
|
|
19
22
|
//
|
|
20
|
-
|
|
23
|
+
var _useState = React.useState(createAccountApi),
|
|
24
|
+
_useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
|
|
25
|
+
accountApi = _useState2[0],
|
|
26
|
+
setAccountApi = _useState2[1];
|
|
21
27
|
//
|
|
22
28
|
//
|
|
23
29
|
//
|
|
24
|
-
React.useEffect(()
|
|
30
|
+
React.useEffect(function () {
|
|
31
|
+
return setAccountApi(createAccountApi);
|
|
32
|
+
},
|
|
25
33
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
26
34
|
[props.eliceAccountApiConfiguration]);
|
|
27
35
|
//
|
|
@@ -0,0 +1,48 @@
|
|
|
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) ; else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
|
|
13
|
+
} catch (err) {
|
|
14
|
+
_d = !0, _e = err;
|
|
15
|
+
} finally {
|
|
16
|
+
try {
|
|
17
|
+
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
|
|
18
|
+
} finally {
|
|
19
|
+
if (_d) throw _e;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return _arr;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
function _slicedToArray(arr, i) {
|
|
26
|
+
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
|
|
27
|
+
}
|
|
28
|
+
function _arrayWithHoles(arr) {
|
|
29
|
+
if (Array.isArray(arr)) return arr;
|
|
30
|
+
}
|
|
31
|
+
function _unsupportedIterableToArray(o, minLen) {
|
|
32
|
+
if (!o) return;
|
|
33
|
+
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
|
|
34
|
+
var n = Object.prototype.toString.call(o).slice(8, -1);
|
|
35
|
+
if (n === "Object" && o.constructor) n = o.constructor.name;
|
|
36
|
+
if (n === "Map" || n === "Set") return Array.from(o);
|
|
37
|
+
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
|
|
38
|
+
}
|
|
39
|
+
function _arrayLikeToArray(arr, len) {
|
|
40
|
+
if (len == null || len > arr.length) len = arr.length;
|
|
41
|
+
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
|
|
42
|
+
return arr2;
|
|
43
|
+
}
|
|
44
|
+
function _nonIterableRest() {
|
|
45
|
+
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export { _arrayLikeToArray as arrayLikeToArray, _arrayWithHoles as arrayWithHoles, _iterableToArrayLimit as iterableToArrayLimit, _nonIterableRest as nonIterableRest, _slicedToArray as slicedToArray, _unsupportedIterableToArray as unsupportedIterableToArray };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
3
|
import React from 'react';
|
|
3
4
|
import { getOrgMaterialVideoFileGet, config } from '@elice/api-client';
|
|
4
5
|
import { IntlComponentBuilder, RawEliceIntlProvider } from '@elice/intl';
|
|
@@ -14,46 +15,45 @@ import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
|
|
|
14
15
|
//
|
|
15
16
|
//
|
|
16
17
|
//
|
|
17
|
-
|
|
18
|
+
var MaterialVideoFile = function MaterialVideoFile(_a) {
|
|
18
19
|
var _b, _c, _d, _e;
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
__intl
|
|
24
|
-
} = _a,
|
|
20
|
+
var materialVideoFileId = _a.materialVideoFileId,
|
|
21
|
+
className = _a.className,
|
|
22
|
+
eliceAccountApiConfiguration = _a.eliceAccountApiConfiguration,
|
|
23
|
+
__intl = _a.__intl,
|
|
25
24
|
playerProps = __rest(_a, ["materialVideoFileId", "className", "eliceAccountApiConfiguration", "__intl"]);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
orgNameShort
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
materialVideoFileId
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}), [materialVideoFileId]), config.init);
|
|
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;
|
|
43
41
|
//
|
|
44
42
|
//
|
|
45
43
|
//
|
|
46
|
-
return
|
|
47
|
-
value: __intl
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
44
|
+
return jsx(RawEliceIntlProvider, {
|
|
45
|
+
value: __intl,
|
|
46
|
+
children: jsx(StyledMaterialVideoFileWrap, {
|
|
47
|
+
className: classnames(prefixCls, className),
|
|
48
|
+
children: jsx(MaterialVideoFilePlayer, Object.assign({}, playerProps, {
|
|
49
|
+
orgNameShort: orgNameShort,
|
|
50
|
+
materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
|
|
51
|
+
materialVideoFileStatus: materialVideoFileStatus,
|
|
52
|
+
accountApi: accountApi,
|
|
53
|
+
title: (_e = (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _b === void 0 ? void 0 : _b.name) !== null && _c !== void 0 ? _c : (_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.videoAssetName) !== null && _e !== void 0 ? _e : undefined
|
|
54
|
+
}))
|
|
55
|
+
})
|
|
56
|
+
});
|
|
57
57
|
};
|
|
58
58
|
var MaterialVideoFile$1 = new IntlComponentBuilder(MaterialVideoFile).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
|
|
59
59
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { base } from '@elice/design-tokens';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
var 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
|
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { Spinner, Text } from '@elice/blocks';
|
|
3
4
|
import { useRawEliceIntl } from '@elice/intl';
|
|
@@ -18,31 +19,38 @@ var VideoUploadStatus;
|
|
|
18
19
|
//
|
|
19
20
|
//
|
|
20
21
|
//
|
|
21
|
-
|
|
22
|
-
className,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
22
|
+
var MaterialVideoFilePlayer = function MaterialVideoFilePlayer(_ref) {
|
|
23
|
+
var className = _ref.className,
|
|
24
|
+
materialVideoFile = _ref.materialVideoFile,
|
|
25
|
+
_ref$materialVideoFil = _ref.materialVideoFileStatus,
|
|
26
|
+
materialVideoFileStatus = _ref$materialVideoFil === void 0 ? 'idle' : _ref$materialVideoFil,
|
|
27
|
+
_ref$materialVideoFil2 = _ref.materialVideoFileTrackerDisabled,
|
|
28
|
+
materialVideoFileTrackerDisabled = _ref$materialVideoFil2 === void 0 ? false : _ref$materialVideoFil2,
|
|
29
|
+
mainLecturePageId = _ref.mainLecturePageId,
|
|
30
|
+
orgNameShort = _ref.orgNameShort,
|
|
31
|
+
_ref$lms = _ref.lms,
|
|
32
|
+
lms = _ref$lms === void 0 ? false : _ref$lms,
|
|
33
|
+
_ref$lmsOrganizationB = _ref.lmsOrganizationBusinessType,
|
|
34
|
+
lmsOrganizationBusinessType = _ref$lmsOrganizationB === void 0 ? null : _ref$lmsOrganizationB,
|
|
35
|
+
_ref$autoPlay = _ref.autoPlay,
|
|
36
|
+
autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
|
|
37
|
+
_ref$autoPlayNext = _ref.autoPlayNext,
|
|
38
|
+
autoPlayNext = _ref$autoPlayNext === void 0 ? false : _ref$autoPlayNext,
|
|
39
|
+
_ref$endControl = _ref.endControl,
|
|
40
|
+
endControl = _ref$endControl === void 0 ? false : _ref$endControl,
|
|
41
|
+
eliceVideoPlayerUrl = _ref.eliceVideoPlayerUrl,
|
|
42
|
+
_ref$emptyComponent = _ref.emptyComponent,
|
|
43
|
+
emptyComponent = _ref$emptyComponent === void 0 ? null : _ref$emptyComponent,
|
|
44
|
+
onNavigatePreviousLecturePage = _ref.onNavigatePreviousLecturePage,
|
|
45
|
+
onNavigateNextLecturePage = _ref.onNavigateNextLecturePage,
|
|
46
|
+
accountApi = _ref.accountApi;
|
|
39
47
|
var _a;
|
|
40
|
-
|
|
41
|
-
|
|
48
|
+
var prefixCls = 'em-video-player';
|
|
49
|
+
var intl = useRawEliceIntl();
|
|
42
50
|
/**
|
|
43
51
|
* Current video status.
|
|
44
52
|
*/
|
|
45
|
-
|
|
53
|
+
var materialVideoFileUploadStatus = React.useMemo(function () {
|
|
46
54
|
var _a, _b, _c;
|
|
47
55
|
// empty
|
|
48
56
|
if (typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) === null || _a === void 0 ? void 0 : _a.status) === 'undefined' && typeof ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === 'undefined') {
|
|
@@ -82,38 +90,46 @@ const MaterialVideoFilePlayer = ({
|
|
|
82
90
|
//
|
|
83
91
|
// pending
|
|
84
92
|
if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
|
|
85
|
-
return
|
|
93
|
+
return jsx(StyledVideoPlayerLoading, {
|
|
94
|
+
children: jsx(Spinner, {})
|
|
95
|
+
});
|
|
86
96
|
}
|
|
87
97
|
// rejected / empty video
|
|
88
98
|
if (materialVideoFileStatus === 'rejected' || materialVideoFileUploadStatus === VideoUploadStatus.Empty) {
|
|
89
|
-
return
|
|
99
|
+
return jsx(React.Fragment, {
|
|
90
100
|
children: emptyComponent
|
|
91
101
|
});
|
|
92
102
|
}
|
|
93
103
|
// encoding
|
|
94
104
|
if (materialVideoFileUploadStatus === VideoUploadStatus.Encoding) {
|
|
95
|
-
return
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
105
|
+
return jsxs(StyledVideoPlayerLoading, {
|
|
106
|
+
children: [jsx(Spinner, {}), jsx(Text, {
|
|
107
|
+
role: "gray3",
|
|
108
|
+
lineHeight: 1.5,
|
|
109
|
+
textAlign: "center",
|
|
110
|
+
preWrap: true,
|
|
111
|
+
children: intl.formatMessage({
|
|
112
|
+
id: 'videoFile.player.encoding'
|
|
113
|
+
})
|
|
114
|
+
})]
|
|
115
|
+
});
|
|
103
116
|
}
|
|
104
117
|
// encoding failed
|
|
105
118
|
if (materialVideoFileUploadStatus === VideoUploadStatus.EncodingFailed) {
|
|
106
|
-
return
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
119
|
+
return jsx(StyledVideoPlayerLoading, {
|
|
120
|
+
children: jsx(Text, {
|
|
121
|
+
role: "gray3",
|
|
122
|
+
lineHeight: 1.5,
|
|
123
|
+
textAlign: "center",
|
|
124
|
+
preWrap: true,
|
|
125
|
+
children: intl.formatMessage({
|
|
126
|
+
id: 'videoFile.player.encodingFailed'
|
|
127
|
+
})
|
|
128
|
+
})
|
|
129
|
+
});
|
|
114
130
|
}
|
|
115
131
|
// resolved
|
|
116
|
-
return
|
|
132
|
+
return jsx(StyledVideoPlayer, {
|
|
117
133
|
className: classnames(prefixCls, className),
|
|
118
134
|
orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
|
|
119
135
|
materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
|
|
@@ -124,8 +140,12 @@ const MaterialVideoFilePlayer = ({
|
|
|
124
140
|
noEndControl: !endControl,
|
|
125
141
|
noTracker: materialVideoFileTrackerDisabled,
|
|
126
142
|
playerBaseUrl: eliceVideoPlayerUrl,
|
|
127
|
-
otp:
|
|
128
|
-
|
|
143
|
+
otp: function otp() {
|
|
144
|
+
return accountApi.auth.authOtpPost().then(function (res) {
|
|
145
|
+
return res.otp;
|
|
146
|
+
});
|
|
147
|
+
},
|
|
148
|
+
onLecturePageNavigate: function onLecturePageNavigate(dir) {
|
|
129
149
|
if (dir === 'prev' && onNavigatePreviousLecturePage) {
|
|
130
150
|
onNavigatePreviousLecturePage();
|
|
131
151
|
} else if (dir === 'next' && onNavigateNextLecturePage) {
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { EliceVideoplayer } from '@elice/videoplayer-client';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
var StyledVideoPlayer = styled(EliceVideoplayer).withConfig({
|
|
5
5
|
componentId: "sc-1ocq3lp-0"
|
|
6
6
|
})(["width:100%;height:100%;border:0;"]);
|
|
7
|
-
|
|
7
|
+
var StyledVideoPlayerLoading = styled.div.withConfig({
|
|
8
8
|
componentId: "sc-1ocq3lp-1"
|
|
9
9
|
})(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
|
|
10
10
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as MaterialVideoFile } from './MaterialVideoFile.js';
|
|
@@ -1,25 +1,33 @@
|
|
|
1
|
+
import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
1
2
|
import { useRef, useState, useEffect } from 'react';
|
|
2
3
|
import { AuthApi } from '@elice/openapi-client-account';
|
|
3
4
|
|
|
4
5
|
//
|
|
5
6
|
//
|
|
6
7
|
//
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
var useMaterialVideoFileApi = function useMaterialVideoFileApi(props) {
|
|
9
|
+
var _return = useRef({});
|
|
9
10
|
//
|
|
10
11
|
//
|
|
11
12
|
//
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
var createAccountApi = function createAccountApi() {
|
|
14
|
+
return Object.freeze({
|
|
15
|
+
auth: new AuthApi(props.eliceAccountApiConfiguration)
|
|
16
|
+
});
|
|
17
|
+
};
|
|
15
18
|
//
|
|
16
19
|
//
|
|
17
20
|
//
|
|
18
|
-
|
|
21
|
+
var _useState = useState(createAccountApi),
|
|
22
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
23
|
+
accountApi = _useState2[0],
|
|
24
|
+
setAccountApi = _useState2[1];
|
|
19
25
|
//
|
|
20
26
|
//
|
|
21
27
|
//
|
|
22
|
-
useEffect(()
|
|
28
|
+
useEffect(function () {
|
|
29
|
+
return setAccountApi(createAccountApi);
|
|
30
|
+
},
|
|
23
31
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
24
32
|
[props.eliceAccountApiConfiguration]);
|
|
25
33
|
//
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elice/material-video-file",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.240719.1",
|
|
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",
|
|
@@ -17,10 +17,8 @@
|
|
|
17
17
|
"scripts": {
|
|
18
18
|
"start": "run-s watch",
|
|
19
19
|
"prebuild": "run-s clean",
|
|
20
|
-
"build": "
|
|
21
|
-
"
|
|
22
|
-
"build:cjs": "rollup -c ../../rollup.config.ts --configPlugin typescript -f cjs",
|
|
23
|
-
"watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -w",
|
|
20
|
+
"build": "cross-env NODE_ENV=production rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs",
|
|
21
|
+
"watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -f cjs -w",
|
|
24
22
|
"lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
|
|
25
23
|
"clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
|
|
26
24
|
},
|
|
@@ -47,16 +45,16 @@
|
|
|
47
45
|
},
|
|
48
46
|
"devDependencies": {
|
|
49
47
|
"@elice/api-client": "1.240619.0",
|
|
50
|
-
"@elice/blocks": "^1.
|
|
48
|
+
"@elice/blocks": "^1.240529.0",
|
|
51
49
|
"@elice/design-tokens": "^1.220803.0",
|
|
52
50
|
"@elice/icons": "^1.230814.0",
|
|
53
51
|
"@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
|
|
54
52
|
"@elice/intl": "0.240425.0-rc.2",
|
|
55
|
-
"@elice/material-shared-types": "1.
|
|
56
|
-
"@elice/material-shared-utils": "1.
|
|
53
|
+
"@elice/material-shared-types": "1.240719.1",
|
|
54
|
+
"@elice/material-shared-utils": "1.240719.1",
|
|
57
55
|
"@elice/messenger": "^1.240426.0",
|
|
58
56
|
"@elice/openapi-client-account": "^1.230814.0",
|
|
59
|
-
"@elice/types": "1.
|
|
57
|
+
"@elice/types": "^1.240709.0",
|
|
60
58
|
"@elice/videoplayer-client": "^2.240618.1",
|
|
61
59
|
"@types/classnames": "^2.3.1",
|
|
62
60
|
"@types/query-string": "^6.3.0",
|
|
@@ -65,6 +63,5 @@
|
|
|
65
63
|
"react": "^17.0.2",
|
|
66
64
|
"react-use": "^17.2.4",
|
|
67
65
|
"styled-components": "^5.3.0"
|
|
68
|
-
}
|
|
69
|
-
"gitHead": "5479962bf1206df7c1f6f4f24b5f2547b90be799"
|
|
66
|
+
}
|
|
70
67
|
}
|