@team-monolith/cds 1.121.1 → 1.121.2
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.
|
@@ -10,11 +10,21 @@ import { useLexicalEditable } from "@lexical/react/useLexicalEditable";
|
|
|
10
10
|
import { InsertVideoDialog } from "../../components/InsertVideoDialog";
|
|
11
11
|
import ReactPlayer from "react-player";
|
|
12
12
|
import { css } from "@emotion/react";
|
|
13
|
+
import { useTranslation } from "react-i18next";
|
|
14
|
+
/**
|
|
15
|
+
* 최대 너비 1200px, 레터 박스 그려지지 않도록 16:9 비율 유지
|
|
16
|
+
* 높이는 너비와 종횡비에 따라 자동 조절
|
|
17
|
+
* @param props
|
|
18
|
+
* @returns
|
|
19
|
+
*/
|
|
13
20
|
function VideoPlayer(props) {
|
|
14
21
|
return (_jsx(ReactPlayer, { css: css `
|
|
15
22
|
background: black;
|
|
16
23
|
max-width: 1200px;
|
|
17
|
-
|
|
24
|
+
aspect-ratio: 16 / 9;
|
|
25
|
+
`, width: "100%" // 기본값 640px. emotion css보다 우선 적용되어 prop으로 지정함.
|
|
26
|
+
, height: "auto" // 기본값 360px. emotion css보다 우선 적용되어 prop으로 지정함.
|
|
27
|
+
, url: props.url, controls: true, config: {
|
|
18
28
|
file: {
|
|
19
29
|
hlsOptions: {
|
|
20
30
|
startLevel: 100,
|
|
@@ -26,6 +36,7 @@ export function VideoComponent({ src, nodeKey, }) {
|
|
|
26
36
|
const [open, setOpen] = useState(false);
|
|
27
37
|
const isEditable = useLexicalEditable();
|
|
28
38
|
const [editor] = useLexicalComposerContext();
|
|
39
|
+
const { t } = useTranslation();
|
|
29
40
|
const handleChange = (props) => {
|
|
30
41
|
editor.update(() => {
|
|
31
42
|
const node = $getNodeByKey(nodeKey);
|
|
@@ -45,7 +56,7 @@ export function VideoComponent({ src, nodeKey, }) {
|
|
|
45
56
|
if (!isEditable) {
|
|
46
57
|
return _jsx(VideoPlayer, { url: src });
|
|
47
58
|
}
|
|
48
|
-
return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(VideoPlayer, { url: src }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setOpen(true), "aria-label": "
|
|
59
|
+
return (_jsxs(_Fragment, { children: [_jsxs(EditContainer, { children: [_jsx(VideoPlayer, { url: src }), _jsx(SquareButton, { size: "small", color: "icon", icon: _jsx(Settings3FillIcon, {}), onClick: () => setOpen(true), "aria-label": t("동영상 수정하기") })] }), _jsx(InsertVideoDialog, { open: open, title: t("동영상 수정하기"), onClose: () => setOpen(false), videoProps: { src }, onChange: handleChange, onDelete: handleDelete })] }));
|
|
49
60
|
}
|
|
50
61
|
const EditContainer = styled.div `
|
|
51
62
|
display: flex;
|