@elice/material-video-file 1.240614.0-cloudflare.2 → 1.240618.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 (13) hide show
  1. package/cjs/components/material-video-file/MaterialVideoFile.d.ts +1 -1
  2. package/cjs/components/material-video-file/MaterialVideoFile.js +2 -2
  3. package/cjs/components/material-video-file/MaterialVideoFilePlayer.d.ts +2 -14
  4. package/cjs/components/material-video-file/MaterialVideoFilePlayer.js +29 -136
  5. package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts +4 -1
  6. package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js +3 -2
  7. package/es/components/material-video-file/MaterialVideoFile.d.ts +1 -1
  8. package/es/components/material-video-file/MaterialVideoFile.js +2 -2
  9. package/es/components/material-video-file/MaterialVideoFilePlayer.d.ts +2 -14
  10. package/es/components/material-video-file/MaterialVideoFilePlayer.js +30 -137
  11. package/es/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts +4 -1
  12. package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js +3 -2
  13. package/package.json +9 -7
package/cjs/components/material-video-file/MaterialVideoFile.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { WithIntlComponentBuilderProps } from '@elice/intl';
3
3
  import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
4
4
  import type { UseMaterialVideoFileApiProps } from './useMaterialVideoFileApi';
5
- type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage' | 'locale'>;
5
+ type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
6
6
  export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMaterialVideoFileApiProps {
7
7
  materialVideoFileId: number;
8
8
  className?: string;
package/cjs/components/material-video-file/MaterialVideoFile.js CHANGED
@@ -19,7 +19,7 @@ var MaterialVideoFile_styled = require('./MaterialVideoFile.styled.js');
19
19
  //
20
20
  //
21
21
  const MaterialVideoFile = _a => {
22
- var _b, _c, _d, _e;
22
+ var _b, _c;
23
23
  var {
24
24
  materialVideoFileId,
25
25
  className,
@@ -56,7 +56,7 @@ const MaterialVideoFile = _a => {
56
56
  materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
57
57
  materialVideoFileStatus: materialVideoFileStatus,
58
58
  accountApi: accountApi,
59
- 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
59
+ title: (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.videoAssetName) !== null && _c !== void 0 ? _c : undefined
60
60
  }))));
61
61
  };
62
62
  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();
package/cjs/components/material-video-file/MaterialVideoFilePlayer.d.ts CHANGED
@@ -28,8 +28,6 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
28
28
  autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
29
29
  /** End control overlay. */
30
30
  endControl?: EliceVideoPlayerSearchParams['endctrl'];
31
- /** Locale. */
32
- locale?: EliceVideoPlayerSearchParams['locale'];
33
31
  /** Elice video player url. */
34
32
  eliceVideoPlayerUrl?: string;
35
33
  /** Empty component. */
@@ -41,15 +39,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
41
39
  /** Navigate to next lecture page. */
42
40
  onNavigateNextLecturePage?: () => void;
43
41
  }
44
- declare enum VideoMimeType {
45
- /** `application/vnd.ms-sstr+xml` */
46
- Smooth = "application/vnd.ms-sstr+xml",
47
- /** `application/vnd.apple.mpegurl` */
48
- Hls = "application/vnd.apple.mpegurl",
49
- /** `application/dash+xml` */
50
- Mpeg = "application/dash+xml"
51
- }
52
- declare const _default: React.FC<MaterialVideoFilePlayerProps> & {
53
- MimeType: typeof VideoMimeType;
54
- };
55
- export default _default;
42
+ declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
43
+ export default MaterialVideoFilePlayer;
package/cjs/components/material-video-file/MaterialVideoFilePlayer.js CHANGED
@@ -19,20 +19,6 @@ var VideoUploadStatus;
19
19
  VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
20
20
  VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
21
21
  })(VideoUploadStatus || (VideoUploadStatus = {}));
22
- var VideoMimeType;
23
- (function (VideoMimeType) {
24
- /** `application/vnd.ms-sstr+xml` */
25
- VideoMimeType["Smooth"] = "application/vnd.ms-sstr+xml";
26
- /** `application/vnd.apple.mpegurl` */
27
- VideoMimeType["Hls"] = "application/vnd.apple.mpegurl";
28
- /** `application/dash+xml` */
29
- VideoMimeType["Mpeg"] = "application/dash+xml";
30
- })(VideoMimeType || (VideoMimeType = {}));
31
- //
32
- //
33
- //
34
- const ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
35
- const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
36
22
  //
37
23
  //
38
24
  //
@@ -48,141 +34,38 @@ const MaterialVideoFilePlayer = ({
48
34
  autoPlay = false,
49
35
  autoPlayNext = false,
50
36
  endControl = false,
51
- locale,
52
37
  eliceVideoPlayerUrl,
53
38
  emptyComponent = null,
54
- title = 'elice-videoplayer',
55
39
  onNavigatePreviousLecturePage,
56
40
  onNavigateNextLecturePage,
57
41
  accountApi
58
42
  }) => {
43
+ var _a;
59
44
  const prefixCls = 'em-video-player';
60
45
  const intl$1 = intl.useRawEliceIntl();
61
- const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
62
46
  /**
63
47
  * Current video status.
64
48
  */
65
49
  const materialVideoFileUploadStatus = React.useMemo(() => {
66
- var _a, _b, _c;
67
- // empty
68
- 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') {
69
- return VideoUploadStatus.Empty;
70
- }
71
- //
72
- // Cloudflare Stream
73
- //
74
- if (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) {
75
- switch (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream.status) {
76
- case types.enums.CloudflareStreamStatus.Uploaded:
77
- return VideoUploadStatus.Encoding;
78
- case types.enums.CloudflareStreamStatus.EncodeFailed:
79
- return VideoUploadStatus.EncodingFailed;
80
- case types.enums.CloudflareStreamStatus.Encoded:
81
- return typeof materialVideoFile.cloudflareStream.downloadUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
82
- default:
83
- return VideoUploadStatus.Empty;
84
- }
85
- }
86
- //
87
- // Azure Media Video
88
- //
89
- switch ((_c = materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) {
90
- case types.enums.AzureMediaVideoStatus.Encoding:
50
+ var _a, _b, _c, _d;
51
+ switch (true) {
52
+ case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
53
+ return VideoUploadStatus.Empty;
54
+ case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === types.enums.AzureMediaVideoStatus.Encoding:
91
55
  return VideoUploadStatus.Encoding;
92
- case types.enums.AzureMediaVideoStatus.Error:
56
+ case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === types.enums.AzureMediaVideoStatus.Error:
93
57
  return VideoUploadStatus.EncodingFailed;
94
- case types.enums.AzureMediaVideoStatus.Done:
95
- return typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
58
+ case ((_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.status) === types.enums.AzureMediaVideoStatus.Done && typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string':
59
+ return VideoUploadStatus.Ready;
96
60
  default:
97
61
  return VideoUploadStatus.Empty;
98
62
  }
99
63
  }, [materialVideoFile]);
100
64
  //
101
- // Get video iframe src.
102
- //
103
- React.useEffect(() => {
104
- if (!eliceVideoPlayerUrl || !materialVideoFile) {
105
- return;
106
- }
107
- const abortCtrl = new AbortController();
108
- accountApi.auth.authOtpPost({
109
- signal: abortCtrl.signal
110
- })
111
- // issue otp key
112
- .then(res => res.otp)
113
- // create search params
114
- .then(otp => ({
115
- org: orgNameShort,
116
- mid: materialVideoFile.id,
117
- lmid: mainLecturePageId,
118
- lms,
119
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
120
- codec: VideoMimeType.Smooth,
121
- autoplay: autoPlay,
122
- autoplaynext: autoPlayNext,
123
- endctrl: endControl,
124
- notrack: materialVideoFileTrackerDisabled,
125
- origin: window.location.origin,
126
- locale,
127
- otp
128
- }))
129
- // create url from search params
130
- .then(params => {
131
- const url = new URL(eliceVideoPlayerUrl);
132
- Object.entries(params).forEach(([key, value]) => {
133
- if (value) {
134
- url.searchParams.set(key, value);
135
- }
136
- });
137
- return url;
138
- }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
139
- if (err.name !== 'AbortError') {
140
- setPlayerFrameSrc(null);
141
- }
142
- });
143
- return () => {
144
- abortCtrl.abort();
145
- };
146
- }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
147
- //
148
- // Add event listener for navigating prev and next lecture page.
149
- //
150
- React.useEffect(() => {
151
- const _handle = event => {
152
- var _a, _b, _c;
153
- try {
154
- const edata = JSON.parse(event.data);
155
- if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
156
- return;
157
- }
158
- switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
159
- case 'previous':
160
- if (typeof onNavigatePreviousLecturePage === 'function') {
161
- onNavigatePreviousLecturePage();
162
- }
163
- break;
164
- case 'next':
165
- if (typeof onNavigateNextLecturePage === 'function') {
166
- onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
167
- }
168
- break;
169
- }
170
- } catch (_) {
171
- //
172
- }
173
- };
174
- window.addEventListener('message', _handle);
175
- return () => {
176
- window.removeEventListener('message', _handle);
177
- };
178
- },
179
- // eslint-disable-next-line react-hooks/exhaustive-deps
180
- []);
181
- //
182
65
  //
183
66
  //
184
67
  // pending
185
- if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
68
+ if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
186
69
  return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Spinner, null));
187
70
  }
188
71
  // rejected / empty video
@@ -214,16 +97,26 @@ const MaterialVideoFilePlayer = ({
214
97
  })));
215
98
  }
216
99
  // resolved
217
- return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
100
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
218
101
  className: classnames(prefixCls, className),
219
- src: playerFrameSrc,
220
- title: title,
221
- allow: "autoplay",
222
- allowFullScreen: true
102
+ orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
103
+ materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
104
+ linkedMaterialId: mainLecturePageId,
105
+ lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
106
+ noAutoplay: !autoPlay,
107
+ noAutoplayNext: !autoPlayNext,
108
+ noEndControl: !endControl,
109
+ noTracker: materialVideoFileTrackerDisabled,
110
+ playerBaseUrl: eliceVideoPlayerUrl,
111
+ otp: () => accountApi.auth.authOtpPost().then(res => res.otp),
112
+ onLecturePageNavigate: dir => {
113
+ if (dir === 'prev' && onNavigatePreviousLecturePage) {
114
+ onNavigatePreviousLecturePage();
115
+ } else if (dir === 'next' && onNavigateNextLecturePage) {
116
+ onNavigateNextLecturePage();
117
+ }
118
+ }
223
119
  });
224
120
  };
225
- var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
226
- MimeType: VideoMimeType
227
- });
228
121
 
229
- exports.default = MaterialVideoFilePlayer$1;
122
+ exports.default = MaterialVideoFilePlayer;
package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
1
+ /// <reference types="react" />
2
+ export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
3
+ __intl: import("@elice/intl").EliceIntlShape;
4
+ }, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
2
5
  export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
package/cjs/components/material-video-file/MaterialVideoFilePlayer.styled.js CHANGED
@@ -1,13 +1,14 @@
1
1
  'use strict';
2
2
 
3
+ var videoplayerClient = require('@elice/videoplayer-client');
3
4
  var styled = require('styled-components');
4
5
 
5
- const StyledVideoPlayerWrap = styled.iframe.withConfig({
6
+ const StyledVideoPlayer = styled(videoplayerClient.EliceVideoplayer).withConfig({
6
7
  componentId: "sc-1ocq3lp-0"
7
8
  })(["width:100%;height:100%;border:0;"]);
8
9
  const StyledVideoPlayerLoading = styled.div.withConfig({
9
10
  componentId: "sc-1ocq3lp-1"
10
11
  })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
11
12
 
13
+ exports.StyledVideoPlayer = StyledVideoPlayer;
12
14
  exports.StyledVideoPlayerLoading = StyledVideoPlayerLoading;
13
- exports.StyledVideoPlayerWrap = StyledVideoPlayerWrap;
package/es/components/material-video-file/MaterialVideoFile.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { WithIntlComponentBuilderProps } from '@elice/intl';
3
3
  import type { MaterialVideoFilePlayerProps } from './MaterialVideoFilePlayer';
4
4
  import type { UseMaterialVideoFileApiProps } from './useMaterialVideoFileApi';
5
- type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage' | 'locale'>;
5
+ type PickedVideoPlayerProps = Pick<MaterialVideoFilePlayerProps, 'materialVideoFileTrackerDisabled' | 'mainLecturePageId' | 'lms' | 'lmsOrganizationBusinessType' | 'emptyComponent' | 'autoPlay' | 'autoPlayNext' | 'endControl' | 'eliceVideoPlayerUrl' | 'onNavigatePreviousLecturePage' | 'onNavigateNextLecturePage'>;
6
6
  export interface MaterialVideoFileProps extends PickedVideoPlayerProps, UseMaterialVideoFileApiProps {
7
7
  materialVideoFileId: number;
8
8
  className?: string;
package/es/components/material-video-file/MaterialVideoFile.js CHANGED
@@ -15,7 +15,7 @@ import { StyledMaterialVideoFileWrap } from './MaterialVideoFile.styled.js';
15
15
  //
16
16
  //
17
17
  const MaterialVideoFile = _a => {
18
- var _b, _c, _d, _e;
18
+ var _b, _c;
19
19
  var {
20
20
  materialVideoFileId,
21
21
  className,
@@ -52,7 +52,7 @@ const MaterialVideoFile = _a => {
52
52
  materialVideoFile: materialVideoFile !== null && materialVideoFile !== void 0 ? materialVideoFile : null,
53
53
  materialVideoFileStatus: materialVideoFileStatus,
54
54
  accountApi: accountApi,
55
- 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
55
+ title: (_c = (_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.videoAssetName) !== null && _c !== void 0 ? _c : undefined
56
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();
package/es/components/material-video-file/MaterialVideoFilePlayer.d.ts CHANGED
@@ -28,8 +28,6 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
28
28
  autoPlayNext?: EliceVideoPlayerSearchParams['autoplaynext'];
29
29
  /** End control overlay. */
30
30
  endControl?: EliceVideoPlayerSearchParams['endctrl'];
31
- /** Locale. */
32
- locale?: EliceVideoPlayerSearchParams['locale'];
33
31
  /** Elice video player url. */
34
32
  eliceVideoPlayerUrl?: string;
35
33
  /** Empty component. */
@@ -41,15 +39,5 @@ export interface MaterialVideoFilePlayerProps extends UseMaterialVideoFileApiRet
41
39
  /** Navigate to next lecture page. */
42
40
  onNavigateNextLecturePage?: () => void;
43
41
  }
44
- declare enum VideoMimeType {
45
- /** `application/vnd.ms-sstr+xml` */
46
- Smooth = "application/vnd.ms-sstr+xml",
47
- /** `application/vnd.apple.mpegurl` */
48
- Hls = "application/vnd.apple.mpegurl",
49
- /** `application/dash+xml` */
50
- Mpeg = "application/dash+xml"
51
- }
52
- declare const _default: React.FC<MaterialVideoFilePlayerProps> & {
53
- MimeType: typeof VideoMimeType;
54
- };
55
- export default _default;
42
+ declare const MaterialVideoFilePlayer: React.FC<MaterialVideoFilePlayerProps>;
43
+ export default MaterialVideoFilePlayer;
package/es/components/material-video-file/MaterialVideoFilePlayer.js CHANGED
@@ -3,7 +3,7 @@ import { Spinner, Text } from '@elice/blocks';
3
3
  import { useRawEliceIntl } from '@elice/intl';
4
4
  import { enums } from '@elice/types';
5
5
  import classnames from 'classnames';
6
- import { StyledVideoPlayerLoading, StyledVideoPlayerWrap } from './MaterialVideoFilePlayer.styled.js';
6
+ import { StyledVideoPlayerLoading, StyledVideoPlayer } from './MaterialVideoFilePlayer.styled.js';
7
7
 
8
8
  //
9
9
  //
@@ -15,20 +15,6 @@ var VideoUploadStatus;
15
15
  VideoUploadStatus[VideoUploadStatus["EncodingFailed"] = 2] = "EncodingFailed";
16
16
  VideoUploadStatus[VideoUploadStatus["Ready"] = 3] = "Ready";
17
17
  })(VideoUploadStatus || (VideoUploadStatus = {}));
18
- var VideoMimeType;
19
- (function (VideoMimeType) {
20
- /** `application/vnd.ms-sstr+xml` */
21
- VideoMimeType["Smooth"] = "application/vnd.ms-sstr+xml";
22
- /** `application/vnd.apple.mpegurl` */
23
- VideoMimeType["Hls"] = "application/vnd.apple.mpegurl";
24
- /** `application/dash+xml` */
25
- VideoMimeType["Mpeg"] = "application/dash+xml";
26
- })(VideoMimeType || (VideoMimeType = {}));
27
- //
28
- //
29
- //
30
- const ELICE_VIDEO_PLAYER_MESSAGE_EVENT = 'elice-videoplayer';
31
- const ELICE_VIDEO_PLAYER_MESSAGE_TYPE = 'navigate';
32
18
  //
33
19
  //
34
20
  //
@@ -44,141 +30,38 @@ const MaterialVideoFilePlayer = ({
44
30
  autoPlay = false,
45
31
  autoPlayNext = false,
46
32
  endControl = false,
47
- locale,
48
33
  eliceVideoPlayerUrl,
49
34
  emptyComponent = null,
50
- title = 'elice-videoplayer',
51
35
  onNavigatePreviousLecturePage,
52
36
  onNavigateNextLecturePage,
53
37
  accountApi
54
38
  }) => {
39
+ var _a;
55
40
  const prefixCls = 'em-video-player';
56
41
  const intl = useRawEliceIntl();
57
- const [playerFrameSrc, setPlayerFrameSrc] = React.useState(null);
58
42
  /**
59
43
  * Current video status.
60
44
  */
61
45
  const materialVideoFileUploadStatus = React.useMemo(() => {
62
- var _a, _b, _c;
63
- // empty
64
- 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') {
65
- return VideoUploadStatus.Empty;
66
- }
67
- //
68
- // Cloudflare Stream
69
- //
70
- if (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) {
71
- switch (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream.status) {
72
- case enums.CloudflareStreamStatus.Uploaded:
73
- return VideoUploadStatus.Encoding;
74
- case enums.CloudflareStreamStatus.EncodeFailed:
75
- return VideoUploadStatus.EncodingFailed;
76
- case enums.CloudflareStreamStatus.Encoded:
77
- return typeof materialVideoFile.cloudflareStream.downloadUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
78
- default:
79
- return VideoUploadStatus.Empty;
80
- }
81
- }
82
- //
83
- // Azure Media Video
84
- //
85
- switch ((_c = materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) {
86
- case enums.AzureMediaVideoStatus.Encoding:
46
+ var _a, _b, _c, _d;
47
+ switch (true) {
48
+ case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
49
+ return VideoUploadStatus.Empty;
50
+ case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === enums.AzureMediaVideoStatus.Encoding:
87
51
  return VideoUploadStatus.Encoding;
88
- case enums.AzureMediaVideoStatus.Error:
52
+ case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === enums.AzureMediaVideoStatus.Error:
89
53
  return VideoUploadStatus.EncodingFailed;
90
- case enums.AzureMediaVideoStatus.Done:
91
- return typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
54
+ case ((_d = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _d === void 0 ? void 0 : _d.status) === enums.AzureMediaVideoStatus.Done && typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string':
55
+ return VideoUploadStatus.Ready;
92
56
  default:
93
57
  return VideoUploadStatus.Empty;
94
58
  }
95
59
  }, [materialVideoFile]);
96
60
  //
97
- // Get video iframe src.
98
- //
99
- React.useEffect(() => {
100
- if (!eliceVideoPlayerUrl || !materialVideoFile) {
101
- return;
102
- }
103
- const abortCtrl = new AbortController();
104
- accountApi.auth.authOtpPost({
105
- signal: abortCtrl.signal
106
- })
107
- // issue otp key
108
- .then(res => res.otp)
109
- // create search params
110
- .then(otp => ({
111
- org: orgNameShort,
112
- mid: materialVideoFile.id,
113
- lmid: mainLecturePageId,
114
- lms,
115
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
116
- codec: VideoMimeType.Smooth,
117
- autoplay: autoPlay,
118
- autoplaynext: autoPlayNext,
119
- endctrl: endControl,
120
- notrack: materialVideoFileTrackerDisabled,
121
- origin: window.location.origin,
122
- locale,
123
- otp
124
- }))
125
- // create url from search params
126
- .then(params => {
127
- const url = new URL(eliceVideoPlayerUrl);
128
- Object.entries(params).forEach(([key, value]) => {
129
- if (value) {
130
- url.searchParams.set(key, value);
131
- }
132
- });
133
- return url;
134
- }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
135
- if (err.name !== 'AbortError') {
136
- setPlayerFrameSrc(null);
137
- }
138
- });
139
- return () => {
140
- abortCtrl.abort();
141
- };
142
- }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
143
- //
144
- // Add event listener for navigating prev and next lecture page.
145
- //
146
- React.useEffect(() => {
147
- const _handle = event => {
148
- var _a, _b, _c;
149
- try {
150
- const edata = JSON.parse(event.data);
151
- 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
- return;
153
- }
154
- switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
155
- case 'previous':
156
- if (typeof onNavigatePreviousLecturePage === 'function') {
157
- onNavigatePreviousLecturePage();
158
- }
159
- break;
160
- case 'next':
161
- if (typeof onNavigateNextLecturePage === 'function') {
162
- onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
163
- }
164
- break;
165
- }
166
- } catch (_) {
167
- //
168
- }
169
- };
170
- window.addEventListener('message', _handle);
171
- return () => {
172
- window.removeEventListener('message', _handle);
173
- };
174
- },
175
- // eslint-disable-next-line react-hooks/exhaustive-deps
176
- []);
177
- //
178
61
  //
179
62
  //
180
63
  // pending
181
- if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
64
+ if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
182
65
  return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
183
66
  }
184
67
  // rejected / empty video
@@ -210,16 +93,26 @@ const MaterialVideoFilePlayer = ({
210
93
  })));
211
94
  }
212
95
  // resolved
213
- return React.createElement(StyledVideoPlayerWrap, {
96
+ return React.createElement(StyledVideoPlayer, {
214
97
  className: classnames(prefixCls, className),
215
- src: playerFrameSrc,
216
- title: title,
217
- allow: "autoplay",
218
- allowFullScreen: true
98
+ orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
99
+ materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
100
+ linkedMaterialId: mainLecturePageId,
101
+ lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
102
+ noAutoplay: !autoPlay,
103
+ noAutoplayNext: !autoPlayNext,
104
+ noEndControl: !endControl,
105
+ noTracker: materialVideoFileTrackerDisabled,
106
+ playerBaseUrl: eliceVideoPlayerUrl,
107
+ otp: () => accountApi.auth.authOtpPost().then(res => res.otp),
108
+ onLecturePageNavigate: dir => {
109
+ if (dir === 'prev' && onNavigatePreviousLecturePage) {
110
+ onNavigatePreviousLecturePage();
111
+ } else if (dir === 'next' && onNavigateNextLecturePage) {
112
+ onNavigateNextLecturePage();
113
+ }
114
+ }
219
115
  });
220
116
  };
221
- var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
222
- MimeType: VideoMimeType
223
- });
224
117
 
225
- export { MaterialVideoFilePlayer$1 as default };
118
+ export { MaterialVideoFilePlayer as default };
package/es/components/material-video-file/MaterialVideoFilePlayer.styled.d.ts CHANGED
@@ -1,2 +1,5 @@
1
- export declare const StyledVideoPlayerWrap: import("styled-components").StyledComponent<"iframe", any, {}, never>;
1
+ /// <reference types="react" />
2
+ export declare const StyledVideoPlayer: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/intl").IntlComponentExtraProps & Omit<import("@elice/videoplayer-client").EliceVideoplayerProps, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & {
3
+ __intl: import("@elice/intl").EliceIntlShape;
4
+ }, keyof import("@elice/intl").IntlComponentExtraProps | "__intl"> & import("react").RefAttributes<any>>, any, {}, never>;
2
5
  export declare const StyledVideoPlayerLoading: import("styled-components").StyledComponent<"div", any, {}, never>;
package/es/components/material-video-file/MaterialVideoFilePlayer.styled.js CHANGED
@@ -1,10 +1,11 @@
1
+ import { EliceVideoplayer } from '@elice/videoplayer-client';
1
2
  import styled from 'styled-components';
2
3
 
3
- const StyledVideoPlayerWrap = styled.iframe.withConfig({
4
+ const StyledVideoPlayer = styled(EliceVideoplayer).withConfig({
4
5
  componentId: "sc-1ocq3lp-0"
5
6
  })(["width:100%;height:100%;border:0;"]);
6
7
  const StyledVideoPlayerLoading = styled.div.withConfig({
7
8
  componentId: "sc-1ocq3lp-1"
8
9
  })(["display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;"]);
9
10
 
10
- export { StyledVideoPlayerLoading, StyledVideoPlayerWrap };
11
+ export { StyledVideoPlayer, StyledVideoPlayerLoading };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elice/material-video-file",
3
- "version": "1.240614.0-cloudflare.2",
3
+ "version": "1.240618.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",
@@ -29,11 +29,12 @@
29
29
  "@elice/blocks": "^1",
30
30
  "@elice/design-tokens": "^1",
31
31
  "@elice/icons": "^1",
32
- "@elice/intl": "*",
32
+ "@elice/intl": "^0",
33
33
  "@elice/material-shared-types": "*",
34
34
  "@elice/material-shared-utils": "*",
35
35
  "@elice/openapi-client-account": "^1",
36
36
  "@elice/types": "^1",
37
+ "@elice/videoplayer-client": "^2",
37
38
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
38
39
  "react-use": "^17.0.0",
39
40
  "styled-components": "^5.2.0"
@@ -44,16 +45,17 @@
44
45
  "tslib": "^2.6.1"
45
46
  },
46
47
  "devDependencies": {
47
- "@elice/api-client": "1.240612.0-cloudflare.0",
48
+ "@elice/api-client": "^1.230815.0",
48
49
  "@elice/blocks": "^1.240514.0",
49
50
  "@elice/design-tokens": "^1.220803.0",
50
51
  "@elice/icons": "^1.230814.0",
51
52
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
52
53
  "@elice/intl": "0.240425.0-rc.2",
53
- "@elice/material-shared-types": "1.240614.0-cloudflare.0",
54
- "@elice/material-shared-utils": "1.240614.0-cloudflare.0",
54
+ "@elice/material-shared-types": "1.240618.0",
55
+ "@elice/material-shared-utils": "1.240618.0",
55
56
  "@elice/openapi-client-account": "^1.230814.0",
56
- "@elice/types": "1.240527.0-cloudflare.3",
57
+ "@elice/types": "^1.240208.0",
58
+ "@elice/videoplayer-client": "^2.240618.0",
57
59
  "@types/classnames": "^2.3.1",
58
60
  "@types/query-string": "^6.3.0",
59
61
  "@types/react": "~17.0.9",
@@ -62,5 +64,5 @@
62
64
  "react-use": "^17.2.4",
63
65
  "styled-components": "^5.3.0"
64
66
  },
65
- "gitHead": "9aa8bc15db4cc1448be55b3e8be5d540cedb67d2"
67
+ "gitHead": "63d4bb89b897e3f211035a7b3c7d8677ab43e4ff"
66
68
  }