@elice/material-video-file 1.240614.0 → 1.240619.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 +49 -116
  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 +50 -117
  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 +10 -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;
22
+ var _b, _c, _d, _e;
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: (_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
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
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,121 +34,58 @@ 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, _d;
67
- switch (true) {
68
- case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
69
- return VideoUploadStatus.Empty;
70
- case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === types.enums.AzureMediaVideoStatus.Encoding:
50
+ var _a, _b, _c;
51
+ // empty
52
+ 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') {
53
+ return VideoUploadStatus.Empty;
54
+ }
55
+ //
56
+ // Cloudflare Stream
57
+ //
58
+ if (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) {
59
+ switch (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream.status) {
60
+ case types.enums.CloudflareStreamStatus.Uploaded:
61
+ return VideoUploadStatus.Encoding;
62
+ case types.enums.CloudflareStreamStatus.EncodeFailed:
63
+ return VideoUploadStatus.EncodingFailed;
64
+ case types.enums.CloudflareStreamStatus.Encoded:
65
+ return typeof materialVideoFile.cloudflareStream.downloadUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
66
+ default:
67
+ return VideoUploadStatus.Empty;
68
+ }
69
+ }
70
+ //
71
+ // Azure Media Video
72
+ //
73
+ switch ((_c = materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) {
74
+ case types.enums.AzureMediaVideoStatus.Encoding:
71
75
  return VideoUploadStatus.Encoding;
72
- case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === types.enums.AzureMediaVideoStatus.Error:
76
+ case types.enums.AzureMediaVideoStatus.Error:
73
77
  return VideoUploadStatus.EncodingFailed;
74
- 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':
75
- return VideoUploadStatus.Ready;
78
+ case types.enums.AzureMediaVideoStatus.Done:
79
+ return typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
76
80
  default:
77
81
  return VideoUploadStatus.Empty;
78
82
  }
79
83
  }, [materialVideoFile]);
80
84
  //
81
- // Get video iframe src.
82
- //
83
- React.useEffect(() => {
84
- if (!eliceVideoPlayerUrl || !materialVideoFile) {
85
- return;
86
- }
87
- const abortCtrl = new AbortController();
88
- accountApi.auth.authOtpPost({
89
- signal: abortCtrl.signal
90
- })
91
- // issue otp key
92
- .then(res => res.otp)
93
- // create search params
94
- .then(otp => ({
95
- org: orgNameShort,
96
- mid: materialVideoFile.id,
97
- lmid: mainLecturePageId,
98
- lms,
99
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
100
- codec: VideoMimeType.Smooth,
101
- autoplay: autoPlay,
102
- autoplaynext: autoPlayNext,
103
- endctrl: endControl,
104
- notrack: materialVideoFileTrackerDisabled,
105
- origin: window.location.origin,
106
- locale,
107
- otp
108
- }))
109
- // create url from search params
110
- .then(params => {
111
- const url = new URL(eliceVideoPlayerUrl);
112
- Object.entries(params).forEach(([key, value]) => {
113
- if (value) {
114
- url.searchParams.set(key, value);
115
- }
116
- });
117
- return url;
118
- }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
119
- if (err.name !== 'AbortError') {
120
- setPlayerFrameSrc(null);
121
- }
122
- });
123
- return () => {
124
- abortCtrl.abort();
125
- };
126
- }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
127
- //
128
- // Add event listener for navigating prev and next lecture page.
129
- //
130
- React.useEffect(() => {
131
- const _handle = event => {
132
- var _a, _b, _c;
133
- try {
134
- const edata = JSON.parse(event.data);
135
- if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
136
- return;
137
- }
138
- switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
139
- case 'previous':
140
- if (typeof onNavigatePreviousLecturePage === 'function') {
141
- onNavigatePreviousLecturePage();
142
- }
143
- break;
144
- case 'next':
145
- if (typeof onNavigateNextLecturePage === 'function') {
146
- onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
147
- }
148
- break;
149
- }
150
- } catch (_) {
151
- //
152
- }
153
- };
154
- window.addEventListener('message', _handle);
155
- return () => {
156
- window.removeEventListener('message', _handle);
157
- };
158
- },
159
- // eslint-disable-next-line react-hooks/exhaustive-deps
160
- []);
161
- //
162
85
  //
163
86
  //
164
87
  // pending
165
- if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
88
+ if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
166
89
  return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerLoading, null, React.createElement(blocks.Spinner, null));
167
90
  }
168
91
  // rejected / empty video
@@ -194,16 +117,26 @@ const MaterialVideoFilePlayer = ({
194
117
  })));
195
118
  }
196
119
  // resolved
197
- return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayerWrap, {
120
+ return React.createElement(MaterialVideoFilePlayer_styled.StyledVideoPlayer, {
198
121
  className: classnames(prefixCls, className),
199
- src: playerFrameSrc,
200
- title: title,
201
- allow: "autoplay",
202
- allowFullScreen: true
122
+ orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
123
+ materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
124
+ linkedMaterialId: mainLecturePageId,
125
+ lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
126
+ noAutoplay: !autoPlay,
127
+ noAutoplayNext: !autoPlayNext,
128
+ noEndControl: !endControl,
129
+ noTracker: materialVideoFileTrackerDisabled,
130
+ playerBaseUrl: eliceVideoPlayerUrl,
131
+ otp: () => accountApi.auth.authOtpPost().then(res => res.otp),
132
+ onLecturePageNavigate: dir => {
133
+ if (dir === 'prev' && onNavigatePreviousLecturePage) {
134
+ onNavigatePreviousLecturePage();
135
+ } else if (dir === 'next' && onNavigateNextLecturePage) {
136
+ onNavigateNextLecturePage();
137
+ }
138
+ }
203
139
  });
204
140
  };
205
- var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
206
- MimeType: VideoMimeType
207
- });
208
141
 
209
- exports.default = MaterialVideoFilePlayer$1;
142
+ 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;
18
+ var _b, _c, _d, _e;
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: (_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
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
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,121 +30,58 @@ 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, _d;
63
- switch (true) {
64
- case typeof ((_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _a === void 0 ? void 0 : _a.status) === 'undefined':
65
- return VideoUploadStatus.Empty;
66
- case ((_b = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _b === void 0 ? void 0 : _b.status) === enums.AzureMediaVideoStatus.Encoding:
46
+ var _a, _b, _c;
47
+ // empty
48
+ 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') {
49
+ return VideoUploadStatus.Empty;
50
+ }
51
+ //
52
+ // Cloudflare Stream
53
+ //
54
+ if (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream) {
55
+ switch (materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.cloudflareStream.status) {
56
+ case enums.CloudflareStreamStatus.Uploaded:
57
+ return VideoUploadStatus.Encoding;
58
+ case enums.CloudflareStreamStatus.EncodeFailed:
59
+ return VideoUploadStatus.EncodingFailed;
60
+ case enums.CloudflareStreamStatus.Encoded:
61
+ return typeof materialVideoFile.cloudflareStream.downloadUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
62
+ default:
63
+ return VideoUploadStatus.Empty;
64
+ }
65
+ }
66
+ //
67
+ // Azure Media Video
68
+ //
69
+ switch ((_c = materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) {
70
+ case enums.AzureMediaVideoStatus.Encoding:
67
71
  return VideoUploadStatus.Encoding;
68
- case ((_c = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.azureMediaVideo) === null || _c === void 0 ? void 0 : _c.status) === enums.AzureMediaVideoStatus.Error:
72
+ case enums.AzureMediaVideoStatus.Error:
69
73
  return VideoUploadStatus.EncodingFailed;
70
- 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':
71
- return VideoUploadStatus.Ready;
74
+ case enums.AzureMediaVideoStatus.Done:
75
+ return typeof materialVideoFile.azureMediaVideo.videoStreamingUrl === 'string' ? VideoUploadStatus.Ready : VideoUploadStatus.Empty;
72
76
  default:
73
77
  return VideoUploadStatus.Empty;
74
78
  }
75
79
  }, [materialVideoFile]);
76
80
  //
77
- // Get video iframe src.
78
- //
79
- React.useEffect(() => {
80
- if (!eliceVideoPlayerUrl || !materialVideoFile) {
81
- return;
82
- }
83
- const abortCtrl = new AbortController();
84
- accountApi.auth.authOtpPost({
85
- signal: abortCtrl.signal
86
- })
87
- // issue otp key
88
- .then(res => res.otp)
89
- // create search params
90
- .then(otp => ({
91
- org: orgNameShort,
92
- mid: materialVideoFile.id,
93
- lmid: mainLecturePageId,
94
- lms,
95
- lmstype: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
96
- codec: VideoMimeType.Smooth,
97
- autoplay: autoPlay,
98
- autoplaynext: autoPlayNext,
99
- endctrl: endControl,
100
- notrack: materialVideoFileTrackerDisabled,
101
- origin: window.location.origin,
102
- locale,
103
- otp
104
- }))
105
- // create url from search params
106
- .then(params => {
107
- const url = new URL(eliceVideoPlayerUrl);
108
- Object.entries(params).forEach(([key, value]) => {
109
- if (value) {
110
- url.searchParams.set(key, value);
111
- }
112
- });
113
- return url;
114
- }).then(url => url.href).then(setPlayerFrameSrc).catch(err => {
115
- if (err.name !== 'AbortError') {
116
- setPlayerFrameSrc(null);
117
- }
118
- });
119
- return () => {
120
- abortCtrl.abort();
121
- };
122
- }, [orgNameShort, materialVideoFile, materialVideoFileTrackerDisabled, mainLecturePageId, lms, lmsOrganizationBusinessType, eliceVideoPlayerUrl, autoPlay, autoPlayNext, endControl, locale, accountApi]);
123
- //
124
- // Add event listener for navigating prev and next lecture page.
125
- //
126
- React.useEffect(() => {
127
- const _handle = event => {
128
- var _a, _b, _c;
129
- try {
130
- const edata = JSON.parse(event.data);
131
- if (edata.key !== ELICE_VIDEO_PLAYER_MESSAGE_EVENT || ((_a = edata.event) === null || _a === void 0 ? void 0 : _a.type) !== ELICE_VIDEO_PLAYER_MESSAGE_TYPE) {
132
- return;
133
- }
134
- switch ((_c = (_b = edata.event) === null || _b === void 0 ? void 0 : _b.args) === null || _c === void 0 ? void 0 : _c.direction) {
135
- case 'previous':
136
- if (typeof onNavigatePreviousLecturePage === 'function') {
137
- onNavigatePreviousLecturePage();
138
- }
139
- break;
140
- case 'next':
141
- if (typeof onNavigateNextLecturePage === 'function') {
142
- onNavigateNextLecturePage === null || onNavigateNextLecturePage === void 0 ? void 0 : onNavigateNextLecturePage();
143
- }
144
- break;
145
- }
146
- } catch (_) {
147
- //
148
- }
149
- };
150
- window.addEventListener('message', _handle);
151
- return () => {
152
- window.removeEventListener('message', _handle);
153
- };
154
- },
155
- // eslint-disable-next-line react-hooks/exhaustive-deps
156
- []);
157
- //
158
81
  //
159
82
  //
160
83
  // pending
161
- if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending' || materialVideoFileStatus === 'resolved' && !playerFrameSrc) {
84
+ if (materialVideoFileStatus === 'idle' || materialVideoFileStatus === 'pending') {
162
85
  return React.createElement(StyledVideoPlayerLoading, null, React.createElement(Spinner, null));
163
86
  }
164
87
  // rejected / empty video
@@ -190,16 +113,26 @@ const MaterialVideoFilePlayer = ({
190
113
  })));
191
114
  }
192
115
  // resolved
193
- return React.createElement(StyledVideoPlayerWrap, {
116
+ return React.createElement(StyledVideoPlayer, {
194
117
  className: classnames(prefixCls, className),
195
- src: playerFrameSrc,
196
- title: title,
197
- allow: "autoplay",
198
- allowFullScreen: true
118
+ orgNameShort: orgNameShort !== null && orgNameShort !== void 0 ? orgNameShort : '',
119
+ materialVideoId: (_a = materialVideoFile === null || materialVideoFile === void 0 ? void 0 : materialVideoFile.id) !== null && _a !== void 0 ? _a : 0,
120
+ linkedMaterialId: mainLecturePageId,
121
+ lmsType: lms ? lmsOrganizationBusinessType !== null && lmsOrganizationBusinessType !== void 0 ? lmsOrganizationBusinessType : undefined : undefined,
122
+ noAutoplay: !autoPlay,
123
+ noAutoplayNext: !autoPlayNext,
124
+ noEndControl: !endControl,
125
+ noTracker: materialVideoFileTrackerDisabled,
126
+ playerBaseUrl: eliceVideoPlayerUrl,
127
+ otp: () => accountApi.auth.authOtpPost().then(res => res.otp),
128
+ onLecturePageNavigate: dir => {
129
+ if (dir === 'prev' && onNavigatePreviousLecturePage) {
130
+ onNavigatePreviousLecturePage();
131
+ } else if (dir === 'next' && onNavigateNextLecturePage) {
132
+ onNavigateNextLecturePage();
133
+ }
134
+ }
199
135
  });
200
136
  };
201
- var MaterialVideoFilePlayer$1 = Object.assign(MaterialVideoFilePlayer, {
202
- MimeType: VideoMimeType
203
- });
204
137
 
205
- export { MaterialVideoFilePlayer$1 as default };
138
+ 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",
3
+ "version": "1.240619.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,13 @@
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
+ "@elice/messenger": "^1",
35
36
  "@elice/openapi-client-account": "^1",
36
37
  "@elice/types": "^1",
38
+ "@elice/videoplayer-client": "^2",
37
39
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
38
40
  "react-use": "^17.0.0",
39
41
  "styled-components": "^5.2.0"
@@ -44,16 +46,17 @@
44
46
  "tslib": "^2.6.1"
45
47
  },
46
48
  "devDependencies": {
47
- "@elice/api-client": "^1.230815.0",
49
+ "@elice/api-client": "1.240619.0",
48
50
  "@elice/blocks": "^1.240514.0",
49
51
  "@elice/design-tokens": "^1.220803.0",
50
52
  "@elice/icons": "^1.230814.0",
51
53
  "@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
52
54
  "@elice/intl": "0.240425.0-rc.2",
53
- "@elice/material-shared-types": "1.240614.0",
54
- "@elice/material-shared-utils": "1.240614.0",
55
+ "@elice/material-shared-types": "1.240619.0",
56
+ "@elice/material-shared-utils": "1.240619.0",
55
57
  "@elice/openapi-client-account": "^1.230814.0",
56
- "@elice/types": "^1.240208.0",
58
+ "@elice/types": "1.240619.0",
59
+ "@elice/videoplayer-client": "^2.240618.1",
57
60
  "@types/classnames": "^2.3.1",
58
61
  "@types/query-string": "^6.3.0",
59
62
  "@types/react": "~17.0.9",
@@ -62,5 +65,5 @@
62
65
  "react-use": "^17.2.4",
63
66
  "styled-components": "^5.3.0"
64
67
  },
65
- "gitHead": "129db3c8074dd01f6949eb115bfc4f2f13c68f29"
68
+ "gitHead": "38cf96eba78c95ce503ed36ebd3561c68f90ef8f"
66
69
  }