@elice/material-video 1.240718.0-trasncript.2 → 1.240718.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/components/material-video/MaterialVideo.js +27 -34
- package/cjs/components/material-video/MaterialVideo.styled.js +1 -5
- package/cjs/components/material-video/MaterialVideoContent.js +29 -31
- package/cjs/components/youtube-player/YoutubePlayer.js +20 -28
- package/cjs/components/youtube-player/YoutubePlayer.styled.js +1 -5
- package/cjs/utils/youtubeUrlParser.js +6 -6
- package/es/components/material-video/MaterialVideo.js +27 -29
- package/es/components/material-video/MaterialVideo.styled.js +1 -1
- package/es/components/material-video/MaterialVideoContent.js +29 -31
- package/es/components/youtube-player/YoutubePlayer.js +19 -22
- package/es/components/youtube-player/YoutubePlayer.styled.js +1 -1
- package/es/utils/youtubeUrlParser.js +6 -6
- package/package.json +11 -8
- package/cjs/components/material-video/index.js +0 -7
- package/cjs/components/material-video/locales/index.js +0 -13
- package/cjs/components/youtube-player/index.js +0 -7
- package/es/components/material-video/index.js +0 -1
- package/es/components/material-video/locales/index.js +0 -4
- package/es/components/youtube-player/index.js +0 -1
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
7
6
|
var React = require('react');
|
|
8
7
|
var apiClient = require('@elice/api-client');
|
|
9
8
|
var blocks = require('@elice/blocks');
|
|
@@ -15,40 +14,34 @@ var en = require('./locales/en.json.js');
|
|
|
15
14
|
var ko = require('./locales/ko.json.js');
|
|
16
15
|
var MaterialVideoContent = require('./MaterialVideoContent.js');
|
|
17
16
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
var className = _a.className,
|
|
25
|
-
materialVideoId = _a.materialVideoId,
|
|
26
|
-
__intl = _a.__intl,
|
|
17
|
+
const MaterialVideo = _a => {
|
|
18
|
+
var {
|
|
19
|
+
className,
|
|
20
|
+
materialVideoId,
|
|
21
|
+
__intl
|
|
22
|
+
} = _a,
|
|
27
23
|
youtubeProps = tslib.__rest(_a, ["className", "materialVideoId", "__intl"]);
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
}, youtubeProps))
|
|
50
|
-
})
|
|
51
|
-
});
|
|
24
|
+
const prefixCls = 'em-material-video';
|
|
25
|
+
const {
|
|
26
|
+
materialVideo,
|
|
27
|
+
status: materialVideoStatus
|
|
28
|
+
} = materialSharedUtils.useMaterialFetch(types.enums.LectureMaterialType.Video, React.useCallback(signal => apiClient.getOrgMaterialVideoGet({
|
|
29
|
+
materialVideoId
|
|
30
|
+
}, {
|
|
31
|
+
signal
|
|
32
|
+
}), [materialVideoId]), apiClient.config.init);
|
|
33
|
+
return React.createElement(intl.RawEliceIntlProvider, {
|
|
34
|
+
value: __intl
|
|
35
|
+
}, React.createElement(blocks.Flex, {
|
|
36
|
+
className: classnames(prefixCls, className),
|
|
37
|
+
align: "center",
|
|
38
|
+
justify: "center",
|
|
39
|
+
width: "100%",
|
|
40
|
+
height: "100%"
|
|
41
|
+
}, React.createElement(MaterialVideoContent.default, Object.assign({
|
|
42
|
+
materialVideo: materialVideo !== null && materialVideo !== void 0 ? materialVideo : null,
|
|
43
|
+
videoGetStatus: materialVideoStatus
|
|
44
|
+
}, youtubeProps))));
|
|
52
45
|
};
|
|
53
46
|
var MaterialVideo$1 = new intl.IntlComponentBuilder(MaterialVideo).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();
|
|
54
47
|
|
|
@@ -3,11 +3,7 @@
|
|
|
3
3
|
var blocks = require('@elice/blocks');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
-
|
|
10
|
-
var StyledMaterialVideoStatus = styled__default.default(blocks.Flex).withConfig({
|
|
6
|
+
const StyledMaterialVideoStatus = styled(blocks.Flex).withConfig({
|
|
11
7
|
componentId: "sc-dg3csq-0"
|
|
12
8
|
})(["width:100%;height:100%;background-color:#22222c;"]);
|
|
13
9
|
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var
|
|
6
|
+
var React = require('react');
|
|
7
7
|
var blocks = require('@elice/blocks');
|
|
8
8
|
var designTokens = require('@elice/design-tokens');
|
|
9
9
|
var icons = require('@elice/icons');
|
|
@@ -12,43 +12,41 @@ var youtubeUrlParser = require('../../utils/youtubeUrlParser.js');
|
|
|
12
12
|
var YoutubePlayer = require('../youtube-player/YoutubePlayer.js');
|
|
13
13
|
var MaterialVideo_styled = require('./MaterialVideo.styled.js');
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
var
|
|
17
|
-
|
|
15
|
+
const MaterialVideoContent = _a => {
|
|
16
|
+
var {
|
|
17
|
+
videoGetStatus,
|
|
18
|
+
materialVideo
|
|
19
|
+
} = _a,
|
|
18
20
|
youtubeProps = tslib.__rest(_a, ["videoGetStatus", "materialVideo"]);
|
|
19
|
-
|
|
21
|
+
const intl$1 = intl.useRawEliceIntl();
|
|
20
22
|
if (videoGetStatus === 'pending') {
|
|
21
|
-
return
|
|
23
|
+
return React.createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
|
|
22
24
|
align: "center",
|
|
23
|
-
justify: "center"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
})]
|
|
32
|
-
});
|
|
25
|
+
justify: "center"
|
|
26
|
+
}, React.createElement(blocks.Spinner, null), React.createElement(blocks.Hspace, {
|
|
27
|
+
width: 0.5
|
|
28
|
+
}), React.createElement(blocks.Text, {
|
|
29
|
+
role: "white"
|
|
30
|
+
}, intl$1.formatMessage({
|
|
31
|
+
id: 'video.status.loading'
|
|
32
|
+
})));
|
|
33
33
|
}
|
|
34
34
|
if (!(materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.url) || videoGetStatus === 'rejected') {
|
|
35
|
-
return
|
|
35
|
+
return React.createElement(MaterialVideo_styled.StyledMaterialVideoStatus, {
|
|
36
36
|
align: "center",
|
|
37
|
-
justify: "center"
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
})]
|
|
49
|
-
});
|
|
37
|
+
justify: "center"
|
|
38
|
+
}, React.createElement(blocks.Icon, {
|
|
39
|
+
icon: icons.eilStatusWarn,
|
|
40
|
+
color: designTokens.base.color.white
|
|
41
|
+
}), React.createElement(blocks.Hspace, {
|
|
42
|
+
width: 0.5
|
|
43
|
+
}), React.createElement(blocks.Text, {
|
|
44
|
+
role: "white"
|
|
45
|
+
}, intl$1.formatMessage({
|
|
46
|
+
id: 'video.status.error'
|
|
47
|
+
})));
|
|
50
48
|
}
|
|
51
|
-
return
|
|
49
|
+
return React.createElement(YoutubePlayer.default, Object.assign({
|
|
52
50
|
videoId: youtubeUrlParser.youtubeUrlParser(materialVideo.url)
|
|
53
51
|
}, youtubeProps));
|
|
54
52
|
};
|
|
@@ -3,34 +3,27 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
|
-
var
|
|
6
|
+
var React = require('react');
|
|
7
7
|
var Youtube = require('react-youtube');
|
|
8
8
|
var classnames = require('classnames');
|
|
9
9
|
var YoutubePlayer_styled = require('./YoutubePlayer.styled.js');
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
autoPlay = _a$autoPlay === void 0 ? false : _a$autoPlay,
|
|
21
|
-
_a$disableControl = _a.disableControl,
|
|
22
|
-
disableControl = _a$disableControl === void 0 ? false : _a$disableControl,
|
|
23
|
-
_a$disableKeyboardEve = _a.disableKeyboardEvent,
|
|
24
|
-
disableKeyboardEvent = _a$disableKeyboardEve === void 0 ? false : _a$disableKeyboardEve,
|
|
25
|
-
_a$disableFullscreen = _a.disableFullscreen,
|
|
26
|
-
disableFullscreen = _a$disableFullscreen === void 0 ? false : _a$disableFullscreen,
|
|
11
|
+
const YoutubePlayer = _a => {
|
|
12
|
+
var {
|
|
13
|
+
className,
|
|
14
|
+
videoId,
|
|
15
|
+
autoPlay = false,
|
|
16
|
+
disableControl = false,
|
|
17
|
+
disableKeyboardEvent = false,
|
|
18
|
+
disableFullscreen = false
|
|
19
|
+
} = _a,
|
|
27
20
|
youtubeProps = tslib.__rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
|
|
28
|
-
|
|
21
|
+
const prefixCls = 'em-youtube-player';
|
|
29
22
|
/**
|
|
30
23
|
* Get options for YouTube IFrame player API.
|
|
31
24
|
* ref: https://developers.google.com/youtube/player_parameters#Parameters
|
|
32
25
|
*/
|
|
33
|
-
|
|
26
|
+
const getYoutubeOptions = () => {
|
|
34
27
|
return {
|
|
35
28
|
width: '100%',
|
|
36
29
|
height: '100%',
|
|
@@ -42,16 +35,15 @@ var YoutubePlayer = function YoutubePlayer(_a) {
|
|
|
42
35
|
}
|
|
43
36
|
};
|
|
44
37
|
};
|
|
45
|
-
return
|
|
46
|
-
className:
|
|
38
|
+
return React.createElement(YoutubePlayer_styled.StyledYoutubePlayerWrapper, {
|
|
39
|
+
className: classnames(prefixCls, className),
|
|
47
40
|
justify: "center",
|
|
48
|
-
align: "center"
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
});
|
|
41
|
+
align: "center"
|
|
42
|
+
}, React.createElement(Youtube, Object.assign({
|
|
43
|
+
videoId: videoId,
|
|
44
|
+
opts: getYoutubeOptions(),
|
|
45
|
+
containerClassName: `${prefixCls}__inner`
|
|
46
|
+
}, youtubeProps)));
|
|
55
47
|
};
|
|
56
48
|
|
|
57
49
|
exports.default = YoutubePlayer;
|
|
@@ -3,11 +3,7 @@
|
|
|
3
3
|
var blocks = require('@elice/blocks');
|
|
4
4
|
var styled = require('styled-components');
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
|
|
9
|
-
|
|
10
|
-
var StyledYoutubePlayerWrapper = styled__default.default(blocks.Flex).withConfig({
|
|
6
|
+
const StyledYoutubePlayerWrapper = styled(blocks.Flex).withConfig({
|
|
11
7
|
componentId: "sc-ao5iuk-0"
|
|
12
8
|
})(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
|
|
13
9
|
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
const YOUTUBE_DOMAIN = 'https://www.youtube.com';
|
|
4
|
+
const YOUTUBE_SHORT_DOMAIN = 'https://youtu.be';
|
|
5
|
+
const YOUTUBE_VIDEO_ID_LENGTH = 11;
|
|
6
6
|
/**
|
|
7
7
|
* Get YouTube video id from url using regex
|
|
8
8
|
* @param url URL of youtube
|
|
9
9
|
* @returns id of youtube video OR null when URL is invalid
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
const youtubeUrlParser = url => {
|
|
12
12
|
var _a, _b;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
const pattern = new RegExp(`^(?:${YOUTUBE_DOMAIN}/watch\\?v=|${YOUTUBE_DOMAIN}/embed/|${YOUTUBE_SHORT_DOMAIN}/)(?<videoId>[^?&]+)`);
|
|
14
|
+
const match = pattern.exec(url);
|
|
15
15
|
if (match && ((_a = match.groups) === null || _a === void 0 ? void 0 : _a.videoId.length) === YOUTUBE_VIDEO_ID_LENGTH) {
|
|
16
16
|
return (_b = match.groups) === null || _b === void 0 ? void 0 : _b.videoId;
|
|
17
17
|
}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { getOrgMaterialVideoGet, config } from '@elice/api-client';
|
|
5
4
|
import { Flex } from '@elice/blocks';
|
|
@@ -11,35 +10,34 @@ import messageEn from './locales/en.json.js';
|
|
|
11
10
|
import messageKo from './locales/ko.json.js';
|
|
12
11
|
import MaterialVideoContent from './MaterialVideoContent.js';
|
|
13
12
|
|
|
14
|
-
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
const MaterialVideo = _a => {
|
|
14
|
+
var {
|
|
15
|
+
className,
|
|
16
|
+
materialVideoId,
|
|
17
|
+
__intl
|
|
18
|
+
} = _a,
|
|
18
19
|
youtubeProps = __rest(_a, ["className", "materialVideoId", "__intl"]);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}, youtubeProps))
|
|
41
|
-
})
|
|
42
|
-
});
|
|
20
|
+
const prefixCls = 'em-material-video';
|
|
21
|
+
const {
|
|
22
|
+
materialVideo,
|
|
23
|
+
status: materialVideoStatus
|
|
24
|
+
} = useMaterialFetch(enums.LectureMaterialType.Video, React.useCallback(signal => getOrgMaterialVideoGet({
|
|
25
|
+
materialVideoId
|
|
26
|
+
}, {
|
|
27
|
+
signal
|
|
28
|
+
}), [materialVideoId]), config.init);
|
|
29
|
+
return React.createElement(RawEliceIntlProvider, {
|
|
30
|
+
value: __intl
|
|
31
|
+
}, React.createElement(Flex, {
|
|
32
|
+
className: classnames(prefixCls, className),
|
|
33
|
+
align: "center",
|
|
34
|
+
justify: "center",
|
|
35
|
+
width: "100%",
|
|
36
|
+
height: "100%"
|
|
37
|
+
}, React.createElement(MaterialVideoContent, Object.assign({
|
|
38
|
+
materialVideo: materialVideo !== null && materialVideo !== void 0 ? materialVideo : null,
|
|
39
|
+
videoGetStatus: materialVideoStatus
|
|
40
|
+
}, youtubeProps))));
|
|
43
41
|
};
|
|
44
42
|
var MaterialVideo$1 = new IntlComponentBuilder(MaterialVideo).add('en', messageEn).add('ko', messageKo).addAsync('th', import('./locales/th.json.js')).addAsync('ja', import('./locales/ja.json.js')).build();
|
|
45
43
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Flex } from '@elice/blocks';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const StyledMaterialVideoStatus = styled(Flex).withConfig({
|
|
5
5
|
componentId: "sc-dg3csq-0"
|
|
6
6
|
})(["width:100%;height:100%;background-color:#22222c;"]);
|
|
7
7
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { __rest } from 'tslib';
|
|
2
|
-
import
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import { Spinner, Hspace, Text, Icon } from '@elice/blocks';
|
|
4
4
|
import { base } from '@elice/design-tokens';
|
|
5
5
|
import { eilStatusWarn } from '@elice/icons';
|
|
@@ -8,43 +8,41 @@ import { youtubeUrlParser } from '../../utils/youtubeUrlParser.js';
|
|
|
8
8
|
import YoutubePlayer from '../youtube-player/YoutubePlayer.js';
|
|
9
9
|
import { StyledMaterialVideoStatus } from './MaterialVideo.styled.js';
|
|
10
10
|
|
|
11
|
-
|
|
12
|
-
var
|
|
13
|
-
|
|
11
|
+
const MaterialVideoContent = _a => {
|
|
12
|
+
var {
|
|
13
|
+
videoGetStatus,
|
|
14
|
+
materialVideo
|
|
15
|
+
} = _a,
|
|
14
16
|
youtubeProps = __rest(_a, ["videoGetStatus", "materialVideo"]);
|
|
15
|
-
|
|
17
|
+
const intl = useRawEliceIntl();
|
|
16
18
|
if (videoGetStatus === 'pending') {
|
|
17
|
-
return
|
|
19
|
+
return React.createElement(StyledMaterialVideoStatus, {
|
|
18
20
|
align: "center",
|
|
19
|
-
justify: "center"
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
})]
|
|
28
|
-
});
|
|
21
|
+
justify: "center"
|
|
22
|
+
}, React.createElement(Spinner, null), React.createElement(Hspace, {
|
|
23
|
+
width: 0.5
|
|
24
|
+
}), React.createElement(Text, {
|
|
25
|
+
role: "white"
|
|
26
|
+
}, intl.formatMessage({
|
|
27
|
+
id: 'video.status.loading'
|
|
28
|
+
})));
|
|
29
29
|
}
|
|
30
30
|
if (!(materialVideo === null || materialVideo === void 0 ? void 0 : materialVideo.url) || videoGetStatus === 'rejected') {
|
|
31
|
-
return
|
|
31
|
+
return React.createElement(StyledMaterialVideoStatus, {
|
|
32
32
|
align: "center",
|
|
33
|
-
justify: "center"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
})]
|
|
45
|
-
});
|
|
33
|
+
justify: "center"
|
|
34
|
+
}, React.createElement(Icon, {
|
|
35
|
+
icon: eilStatusWarn,
|
|
36
|
+
color: base.color.white
|
|
37
|
+
}), React.createElement(Hspace, {
|
|
38
|
+
width: 0.5
|
|
39
|
+
}), React.createElement(Text, {
|
|
40
|
+
role: "white"
|
|
41
|
+
}, intl.formatMessage({
|
|
42
|
+
id: 'video.status.error'
|
|
43
|
+
})));
|
|
46
44
|
}
|
|
47
|
-
return
|
|
45
|
+
return React.createElement(YoutubePlayer, Object.assign({
|
|
48
46
|
videoId: youtubeUrlParser(materialVideo.url)
|
|
49
47
|
}, youtubeProps));
|
|
50
48
|
};
|
|
@@ -1,27 +1,25 @@
|
|
|
1
1
|
import { __rest } from 'tslib';
|
|
2
|
-
import
|
|
2
|
+
import React from 'react';
|
|
3
3
|
import Youtube from 'react-youtube';
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
import { StyledYoutubePlayerWrapper } from './YoutubePlayer.styled.js';
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
_a$disableFullscreen = _a.disableFullscreen,
|
|
17
|
-
disableFullscreen = _a$disableFullscreen === void 0 ? false : _a$disableFullscreen,
|
|
7
|
+
const YoutubePlayer = _a => {
|
|
8
|
+
var {
|
|
9
|
+
className,
|
|
10
|
+
videoId,
|
|
11
|
+
autoPlay = false,
|
|
12
|
+
disableControl = false,
|
|
13
|
+
disableKeyboardEvent = false,
|
|
14
|
+
disableFullscreen = false
|
|
15
|
+
} = _a,
|
|
18
16
|
youtubeProps = __rest(_a, ["className", "videoId", "autoPlay", "disableControl", "disableKeyboardEvent", "disableFullscreen"]);
|
|
19
|
-
|
|
17
|
+
const prefixCls = 'em-youtube-player';
|
|
20
18
|
/**
|
|
21
19
|
* Get options for YouTube IFrame player API.
|
|
22
20
|
* ref: https://developers.google.com/youtube/player_parameters#Parameters
|
|
23
21
|
*/
|
|
24
|
-
|
|
22
|
+
const getYoutubeOptions = () => {
|
|
25
23
|
return {
|
|
26
24
|
width: '100%',
|
|
27
25
|
height: '100%',
|
|
@@ -33,16 +31,15 @@ var YoutubePlayer = function YoutubePlayer(_a) {
|
|
|
33
31
|
}
|
|
34
32
|
};
|
|
35
33
|
};
|
|
36
|
-
return
|
|
34
|
+
return React.createElement(StyledYoutubePlayerWrapper, {
|
|
37
35
|
className: classnames(prefixCls, className),
|
|
38
36
|
justify: "center",
|
|
39
|
-
align: "center"
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
});
|
|
37
|
+
align: "center"
|
|
38
|
+
}, React.createElement(Youtube, Object.assign({
|
|
39
|
+
videoId: videoId,
|
|
40
|
+
opts: getYoutubeOptions(),
|
|
41
|
+
containerClassName: `${prefixCls}__inner`
|
|
42
|
+
}, youtubeProps)));
|
|
46
43
|
};
|
|
47
44
|
|
|
48
45
|
export { YoutubePlayer as default };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Flex } from '@elice/blocks';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
const StyledYoutubePlayerWrapper = styled(Flex).withConfig({
|
|
5
5
|
componentId: "sc-ao5iuk-0"
|
|
6
6
|
})(["width:100%;height:100%;background-color:#22222c;& .em-youtube-player__inner{width:90%;height:90%;}"]);
|
|
7
7
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
const YOUTUBE_DOMAIN = 'https://www.youtube.com';
|
|
2
|
+
const YOUTUBE_SHORT_DOMAIN = 'https://youtu.be';
|
|
3
|
+
const YOUTUBE_VIDEO_ID_LENGTH = 11;
|
|
4
4
|
/**
|
|
5
5
|
* Get YouTube video id from url using regex
|
|
6
6
|
* @param url URL of youtube
|
|
7
7
|
* @returns id of youtube video OR null when URL is invalid
|
|
8
8
|
*/
|
|
9
|
-
|
|
9
|
+
const youtubeUrlParser = url => {
|
|
10
10
|
var _a, _b;
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
const pattern = new RegExp(`^(?:${YOUTUBE_DOMAIN}/watch\\?v=|${YOUTUBE_DOMAIN}/embed/|${YOUTUBE_SHORT_DOMAIN}/)(?<videoId>[^?&]+)`);
|
|
12
|
+
const match = pattern.exec(url);
|
|
13
13
|
if (match && ((_a = match.groups) === null || _a === void 0 ? void 0 : _a.videoId.length) === YOUTUBE_VIDEO_ID_LENGTH) {
|
|
14
14
|
return (_b = match.groups) === null || _b === void 0 ? void 0 : _b.videoId;
|
|
15
15
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elice/material-video",
|
|
3
|
-
"version": "1.240718.
|
|
3
|
+
"version": "1.240718.1",
|
|
4
4
|
"description": "User view and editing components of Elice material video",
|
|
5
5
|
"repository": "https://git.elicer.io/elice/frontend/library/elice-material",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -17,8 +17,10 @@
|
|
|
17
17
|
"scripts": {
|
|
18
18
|
"start": "run-s watch",
|
|
19
19
|
"prebuild": "run-s clean",
|
|
20
|
-
"build": "
|
|
21
|
-
"
|
|
20
|
+
"build": "run-p build:es build:cjs",
|
|
21
|
+
"build:es": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es",
|
|
22
|
+
"build:cjs": "rollup -c ../../rollup.config.ts --configPlugin typescript -f cjs",
|
|
23
|
+
"watch": "rollup -c ../../rollup.config.ts --configPlugin typescript -f es -w",
|
|
22
24
|
"lint": "eslint --ext .ts,.tsx ./src --max-warnings=0",
|
|
23
25
|
"clean": "del-cli \"es/*\" \"cjs/*\" \"dist/*\""
|
|
24
26
|
},
|
|
@@ -42,19 +44,20 @@
|
|
|
42
44
|
},
|
|
43
45
|
"devDependencies": {
|
|
44
46
|
"@elice/api-client": "^1.240619.0",
|
|
45
|
-
"@elice/blocks": "^1.
|
|
47
|
+
"@elice/blocks": "^1.240514.0",
|
|
46
48
|
"@elice/design-tokens": "^1.220803.0",
|
|
47
49
|
"@elice/icons": "^1.230814.0",
|
|
48
50
|
"@elice/icons-legacy": "npm:@elice/icons@0.230814.0",
|
|
49
51
|
"@elice/intl": "0.240425.0-rc.2",
|
|
50
|
-
"@elice/material-shared-types": "1.240718.
|
|
51
|
-
"@elice/material-shared-utils": "1.240718.
|
|
52
|
-
"@elice/types": "1.
|
|
52
|
+
"@elice/material-shared-types": "1.240718.1",
|
|
53
|
+
"@elice/material-shared-utils": "1.240718.1",
|
|
54
|
+
"@elice/types": "^1.240619.0",
|
|
53
55
|
"@types/classnames": "^2.3.1",
|
|
54
56
|
"@types/react": "~17.0.9",
|
|
55
57
|
"@types/styled-components": "^5.1.21",
|
|
56
58
|
"react": "^17.0.2",
|
|
57
59
|
"react-use": "^17.2.4",
|
|
58
60
|
"styled-components": "^5.3.0"
|
|
59
|
-
}
|
|
61
|
+
},
|
|
62
|
+
"gitHead": "c1b2b8f98c5eed547941a327188a09f6ed21f6e4"
|
|
60
63
|
}
|
|
@@ -1,13 +0,0 @@
|
|
|
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 +0,0 @@
|
|
|
1
|
-
export { default as MaterialVideo } from './MaterialVideo.js';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as YoutubePlayer } from './YoutubePlayer.js';
|