pds-dev-kit-web 2.2.39 → 2.2.41
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/dist/src/desktop/components/TextField/TextField.d.ts +4 -2
- package/dist/src/desktop/components/TextField/TextField.js +14 -12
- package/dist/src/mobile/components/TextField/TextField.d.ts +4 -2
- package/dist/src/mobile/components/TextField/TextField.js +14 -12
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +3 -4
- package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +11 -12
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.d.ts +1 -0
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/Youtube.js +30 -2
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.d.ts +9 -1
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/parseYoutubeContentProp.js +31 -6
- package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Youtube/types.d.ts +2 -3
- package/package.json +1 -1
- package/release-note.md +5 -5
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Path } from 'react-hook-form';
|
|
3
|
-
import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
|
|
3
|
+
import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
|
|
4
4
|
export type TextFieldProps = {
|
|
5
5
|
name: Path<IFormValues>;
|
|
6
6
|
hintText?: PDSTextType;
|
|
@@ -26,6 +26,8 @@ export type TextFieldProps = {
|
|
|
26
26
|
iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
|
|
27
27
|
iBtn1IconFillType?: 'line' | 'fill';
|
|
28
28
|
iBtn2IconFillType?: 'line' | 'fill';
|
|
29
|
+
overrideIBtn1IconColorKey?: UiColors;
|
|
30
|
+
overrideIBtn2IconColorKey?: UiColors;
|
|
29
31
|
colorTheme?: 'none' | 'dark' | 'transparent';
|
|
30
32
|
max?: number;
|
|
31
33
|
maxLength?: number;
|
|
@@ -45,5 +47,5 @@ export type TextFieldProps = {
|
|
|
45
47
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
46
48
|
onTarget?: () => void;
|
|
47
49
|
};
|
|
48
|
-
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
50
|
+
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
49
51
|
export default TextField;
|
|
@@ -50,7 +50,7 @@ var IconButton_1 = require("../IconButton");
|
|
|
50
50
|
var TextLabel_1 = require("../TextLabel");
|
|
51
51
|
function TextField(_a) {
|
|
52
52
|
var _b;
|
|
53
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
53
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
54
54
|
var basicThemeIconColors = {
|
|
55
55
|
normal: 'ui_cpnt_button_icon_default',
|
|
56
56
|
read_only: 'ui_cpnt_button_icon_default',
|
|
@@ -140,17 +140,19 @@ function TextField(_a) {
|
|
|
140
140
|
break;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey:
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
143
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
|
|
144
|
+
(colorTheme &&
|
|
145
|
+
{
|
|
146
|
+
none: basicThemeIconColors[state],
|
|
147
|
+
dark: darkThemeIconColors[state],
|
|
148
|
+
transparent: transparentThemeIconColors[state]
|
|
149
|
+
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
|
150
|
+
(colorTheme &&
|
|
151
|
+
{
|
|
152
|
+
none: basicThemeIconColors[state],
|
|
153
|
+
dark: darkThemeIconColors[state],
|
|
154
|
+
transparent: transparentThemeIconColors[state]
|
|
155
|
+
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
|
154
156
|
}
|
|
155
157
|
};
|
|
156
158
|
return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "desktop", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Path } from 'react-hook-form';
|
|
3
|
-
import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType } from '../../../common';
|
|
3
|
+
import type { FillIconNameKeys, IFormValues, LineIconNameKeys, PDSTextType, UiColors } from '../../../common';
|
|
4
4
|
export type TextFieldProps = {
|
|
5
5
|
name: Path<IFormValues>;
|
|
6
6
|
hintText?: PDSTextType;
|
|
@@ -26,6 +26,8 @@ export type TextFieldProps = {
|
|
|
26
26
|
iBtn2IconName?: FillIconNameKeys | LineIconNameKeys;
|
|
27
27
|
iBtn1IconFillType?: 'line' | 'fill';
|
|
28
28
|
iBtn2IconFillType?: 'line' | 'fill';
|
|
29
|
+
overrideIBtn1IconColorKey?: UiColors;
|
|
30
|
+
overrideIBtn2IconColorKey?: UiColors;
|
|
29
31
|
colorTheme?: 'none' | 'dark' | 'transparent';
|
|
30
32
|
max?: number;
|
|
31
33
|
maxLength?: number;
|
|
@@ -45,5 +47,5 @@ export type TextFieldProps = {
|
|
|
45
47
|
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
46
48
|
onTarget?: () => void;
|
|
47
49
|
};
|
|
48
|
-
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
50
|
+
declare function TextField({ name, hintText, defaultText, textAlign, prefixText, suffixText, validation, validationPoint, preventBlankMode, enterSubmitMode, size, responsiveMode, textLineType, multiRows, autoMinRows, autoMaxRows, inputType, state, iBtn1IconName, iBtn1IconFillType, iBtn2IconName, iBtn2IconFillType, overrideIBtn1IconColorKey, overrideIBtn2IconColorKey, colorTheme, max, maxLength, min, customWidth, autoComplete, numberStepperMode, numberStep, fontWeight, deleteBtnMode, onBlur, onChange, onClickIBtn1, onClickIBtn2, onFocus, onKeyUp, onKeyDown, onTarget }: TextFieldProps): JSX.Element;
|
|
49
51
|
export default TextField;
|
|
@@ -50,7 +50,7 @@ var IconButton_1 = require("../IconButton");
|
|
|
50
50
|
var TextLabel_1 = require("../TextLabel");
|
|
51
51
|
function TextField(_a) {
|
|
52
52
|
var _b;
|
|
53
|
-
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
53
|
+
var name = _a.name, hintText = _a.hintText, defaultText = _a.defaultText, _c = _a.textAlign, textAlign = _c === void 0 ? 'left' : _c, prefixText = _a.prefixText, suffixText = _a.suffixText, validation = _a.validation, _d = _a.validationPoint, validationPoint = _d === void 0 ? 'onBlur' : _d, _e = _a.preventBlankMode, preventBlankMode = _e === void 0 ? 'none' : _e, _f = _a.enterSubmitMode, enterSubmitMode = _f === void 0 ? 'none' : _f, _g = _a.size, size = _g === void 0 ? 'large' : _g, _h = _a.responsiveMode, responsiveMode = _h === void 0 ? 'none' : _h, _j = _a.textLineType, textLineType = _j === void 0 ? 'single' : _j, _k = _a.multiRows, multiRows = _k === void 0 ? 8 : _k, _l = _a.autoMinRows, autoMinRows = _l === void 0 ? 8 : _l, autoMaxRows = _a.autoMaxRows, _m = _a.inputType, inputType = _m === void 0 ? 'text' : _m, _o = _a.state, state = _o === void 0 ? 'normal' : _o, iBtn1IconName = _a.iBtn1IconName, _p = _a.iBtn1IconFillType, iBtn1IconFillType = _p === void 0 ? 'line' : _p, iBtn2IconName = _a.iBtn2IconName, _q = _a.iBtn2IconFillType, iBtn2IconFillType = _q === void 0 ? 'line' : _q, overrideIBtn1IconColorKey = _a.overrideIBtn1IconColorKey, overrideIBtn2IconColorKey = _a.overrideIBtn2IconColorKey, _r = _a.colorTheme, colorTheme = _r === void 0 ? 'none' : _r, max = _a.max, maxLength = _a.maxLength, min = _a.min, customWidth = _a.customWidth, _s = _a.autoComplete, autoComplete = _s === void 0 ? 'on' : _s, _t = _a.numberStepperMode, numberStepperMode = _t === void 0 ? 'none' : _t, numberStep = _a.numberStep, _u = _a.fontWeight, fontWeight = _u === void 0 ? 'regular' : _u, _v = _a.deleteBtnMode, deleteBtnMode = _v === void 0 ? 'use' : _v, onBlur = _a.onBlur, onChange = _a.onChange, onClickIBtn1 = _a.onClickIBtn1, onClickIBtn2 = _a.onClickIBtn2, onFocus = _a.onFocus, onKeyUp = _a.onKeyUp, onKeyDown = _a.onKeyDown, onTarget = _a.onTarget;
|
|
54
54
|
var basicThemeIconColors = {
|
|
55
55
|
normal: 'ui_cpnt_button_icon_default',
|
|
56
56
|
read_only: 'ui_cpnt_button_icon_default',
|
|
@@ -140,17 +140,19 @@ function TextField(_a) {
|
|
|
140
140
|
break;
|
|
141
141
|
}
|
|
142
142
|
}
|
|
143
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey:
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
143
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [prefixText && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: prefixText, styleTheme: "caption1Bold", colorTheme: "sysTextTertiary", singleLineMode: "use" }), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (0, jsx_runtime_1.jsx)(components_1.TextFieldBase, { name: name, hintText: hintText, defaultText: defaultText, textAlign: textAlign, validation: validation, preventBlankMode: preventBlankMode, enterSubmitMode: enterSubmitMode, textLineType: "single", inputType: inputType, state: state, colorTheme: colorTheme, min: min, max: max, maxLength: maxLength, textSize: "form2", textWeight: fontWeight === 'bold' ? 'bold' : 'normal', fieldPaddingRight: size === 'large' || size === 'rlarge' ? 8 : undefined, deleteIconMode: deleteBtnMode, deleteIconSize: size === 'large' || size === 'rlarge' ? 20 : 16, deleteIconColor: deleteIconColor, isFocused: isFocused, autoComplete: autoComplete, stepperMode: inputType === 'number' && numberStepperMode === 'use' ? 'use' : 'none', stepperRightSpacing: size === 'large' || size === 'rlarge' ? 1 : -4, innerSpinButtonSize: size === 'small' ? 12 : 16, step: numberStep, suffixText: suffixText, suffixTextRightSpacingMode: size === 'large' || size === 'rlarge' ? 'use' : 'none', onFocus: handleFocus, onTarget: handleTarget, onChange: handleChange, onBlur: handleBlur, onKeyUp: handleKeyUp, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsxs)(S_RightBox, { children: [iBtn2IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn2IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn2IconColorKey ||
|
|
144
|
+
(colorTheme &&
|
|
145
|
+
{
|
|
146
|
+
none: basicThemeIconColors[state],
|
|
147
|
+
dark: darkThemeIconColors[state],
|
|
148
|
+
transparent: transparentThemeIconColors[state]
|
|
149
|
+
}[colorTheme]), iconFillType: iBtn2IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn2 })), iBtn1IconName && ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { iconName: iBtn1IconName, baseSize: "small", shapeType: "rectangle", baseColorKey: "ui_cpnt_button_fill_base_transparent", iconSize: size === 'large' || size === 'rlarge' ? 20 : 16, iconColorKey: overrideIBtn1IconColorKey ||
|
|
150
|
+
(colorTheme &&
|
|
151
|
+
{
|
|
152
|
+
none: basicThemeIconColors[state],
|
|
153
|
+
dark: darkThemeIconColors[state],
|
|
154
|
+
transparent: transparentThemeIconColors[state]
|
|
155
|
+
}[colorTheme]), iconFillType: iBtn1IconFillType === 'fill' ? 'fill' : 'line', state: state === 'disabled' ? 'disabled' : 'normal', onClick: handleClickIBtn1 }))] })] }));
|
|
154
156
|
}
|
|
155
157
|
};
|
|
156
158
|
return ((0, jsx_runtime_1.jsxs)(S_TextFieldBox, __assign({ "x-pds-name": "TextField", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_TextFieldWrapper, __assign({ size: size, responsiveMode: responsiveMode, textLineType: textLineType, isFocused: isFocused, isError: isError, state: state, colorTheme: colorTheme, customWidth: customWidth }, { children: S_TextField() })), ((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message) && state === 'normal' && ((0, jsx_runtime_1.jsx)(S_Error, __assign({ colorTheme: colorTheme }, { children: errors[name].message })))] })));
|
|
@@ -699,15 +699,14 @@ export declare const sampleCustomsection1: {
|
|
|
699
699
|
CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: boolean;
|
|
700
700
|
};
|
|
701
701
|
CB_CONTENT_PROP_YOUTUBE: {
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
|
|
702
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
|
|
703
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
|
|
705
704
|
CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
|
|
706
705
|
CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
|
|
707
706
|
};
|
|
708
707
|
CB_EFFECT_PROP_ENTANIM: {
|
|
709
708
|
CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: string;
|
|
710
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE':
|
|
709
|
+
'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null;
|
|
711
710
|
CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: number;
|
|
712
711
|
'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null;
|
|
713
712
|
CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: number;
|
|
@@ -659,15 +659,14 @@ exports.sampleCustomsection1 = {
|
|
|
659
659
|
CB_CONTENT_PROP_VISIBILITY_SPEC_MOBILEWEB: true
|
|
660
660
|
},
|
|
661
661
|
CB_CONTENT_PROP_YOUTUBE: {
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: true,
|
|
662
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: false,
|
|
663
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: false,
|
|
665
664
|
CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: 'https://www.youtube.com/watch?v=ryYFcl57bVo',
|
|
666
665
|
CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: 0
|
|
667
666
|
},
|
|
668
667
|
CB_EFFECT_PROP_ENTANIM: {
|
|
669
|
-
CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: '
|
|
670
|
-
'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE':
|
|
668
|
+
CB_EFFECT_PROP_ENTANIM_SPEC_TYPE: 'NONE',
|
|
669
|
+
'CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE': null,
|
|
671
670
|
CB_EFFECT_PROP_ENTANIM_SPEC_DURATION: 1,
|
|
672
671
|
'CB_EFFECT_PROP_ENTANIM_SPEC_DURATION:MOBILE': null,
|
|
673
672
|
CB_EFFECT_PROP_ENTANIM_SPEC_REPEAT: 1,
|
|
@@ -693,16 +692,16 @@ exports.sampleCustomsection1 = {
|
|
|
693
692
|
'CB_LAYOUT_PROP_PADDING_SPEC_PADDING:MOBILE': null
|
|
694
693
|
},
|
|
695
694
|
CB_PLACEMENT_PROP_PLACEMENT: {
|
|
696
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:
|
|
697
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE':
|
|
698
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:
|
|
699
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE':
|
|
695
|
+
CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: 8,
|
|
696
|
+
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': 8,
|
|
697
|
+
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: 12,
|
|
698
|
+
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': 8,
|
|
700
699
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: 1,
|
|
701
700
|
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': 2,
|
|
702
701
|
CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: 1,
|
|
703
702
|
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': 2,
|
|
704
|
-
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:
|
|
705
|
-
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE':
|
|
703
|
+
CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: 20,
|
|
704
|
+
'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': 20
|
|
706
705
|
},
|
|
707
706
|
CB_STYLE_PROP_BGCOLOR: {
|
|
708
707
|
CB_STYLE_PROP_BGCOLOR_SPEC_ANGLE: 90,
|
|
@@ -1147,7 +1146,7 @@ exports.sampleCustomsection1 = {
|
|
|
1147
1146
|
availableTemplates: [],
|
|
1148
1147
|
schema: 'GENERAL'
|
|
1149
1148
|
},
|
|
1150
|
-
order:
|
|
1149
|
+
order: 5,
|
|
1151
1150
|
program: '',
|
|
1152
1151
|
programData: {},
|
|
1153
1152
|
properties: {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { CB_YOUTUBE_PROPERTIES_TYPE } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
|
|
3
3
|
type Props = CB_YOUTUBE_PROPERTIES_TYPE;
|
|
4
|
+
export type YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'ALWAYS' | 'VIEWPORT-FREEZE' | 'VIEWPORT';
|
|
4
5
|
declare function Youtube(props: Props): JSX.Element;
|
|
5
6
|
export default Youtube;
|
|
@@ -29,10 +29,11 @@ var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverB
|
|
|
29
29
|
var S_CB_BoxWithShadow_1 = require("../components/S_CB_BoxWithShadow");
|
|
30
30
|
var S_HiddenCover_1 = require("../components/S_HiddenCover");
|
|
31
31
|
var parseYoutubeContentProp_1 = __importDefault(require("./parseYoutubeContentProp"));
|
|
32
|
+
var YOUTUBE_AUTOPLAY_TRIGGER_POINT = 'VIEWPORT';
|
|
32
33
|
function Youtube(props) {
|
|
33
34
|
var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
|
|
34
35
|
var CB_CONTENT_PROP_YOUTUBE = props.CB_CONTENT_PROP_YOUTUBE, CB_STYLE_PROP_BGCOLOR = props.CB_STYLE_PROP_BGCOLOR, CB_STYLE_PROP_SHADOW = props.CB_STYLE_PROP_SHADOW, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
|
|
35
|
-
var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id;
|
|
36
|
+
var _b = (0, parseYoutubeContentProp_1.default)(CB_CONTENT_PROP_YOUTUBE, device, YOUTUBE_AUTOPLAY_TRIGGER_POINT), youtubeSrc = _b.youtubeSrc, thumbnailSrc = _b.thumbnailSrc, id = _b.id, cbAutoplayMode = _b.cbAutoplayMode;
|
|
36
37
|
var isEditMode = mode === 'EDIT';
|
|
37
38
|
var _c = getBGColorStyles(CB_STYLE_PROP_BGCOLOR, device), bgColorStyle = _c.style, bgColorHoverStyle = _c.hoverStyle;
|
|
38
39
|
var _d = (0, util_1.parseProperties)(props, device), propsStyle = _d.style, propsHoverStyle = _d.hoverStyle, layoutStyle = _d.layout, effect = _d.effect;
|
|
@@ -49,7 +50,34 @@ function Youtube(props) {
|
|
|
49
50
|
: CB_EFFECT_PROP_ENTANIM['CB_EFFECT_PROP_ENTANIM_SPEC_TYPE:MOBILE'] === 'NONE';
|
|
50
51
|
var hasEffect = !isNoneEffectType;
|
|
51
52
|
var effectVisibleStyle = hasEffect ? { opacity: isVisible ? 1 : 0 } : {};
|
|
52
|
-
|
|
53
|
+
var iframeRef = (0, react_1.useRef)(null);
|
|
54
|
+
var autoplayRef = (0, react_1.useRef)(null);
|
|
55
|
+
var autoplayEntry = (0, hooks_1.useIntersectionObserver)(autoplayRef, {
|
|
56
|
+
freezeOnceVisible: YOUTUBE_AUTOPLAY_TRIGGER_POINT === 'VIEWPORT-FREEZE' ? true : false
|
|
57
|
+
});
|
|
58
|
+
var onLoadIframe = function () {
|
|
59
|
+
var _a;
|
|
60
|
+
if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
|
|
61
|
+
return;
|
|
62
|
+
}
|
|
63
|
+
if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
64
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
// NOTE: Effect for AUTO-PLAY
|
|
68
|
+
(0, react_1.useEffect)(function () {
|
|
69
|
+
var _a;
|
|
70
|
+
if (!((_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow)) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
if (cbAutoplayMode === 'VIEWPORT' && (autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
74
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
|
|
75
|
+
}
|
|
76
|
+
if (cbAutoplayMode === 'VIEWPORT' && !(autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting)) {
|
|
77
|
+
iframeRef.current.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
|
|
78
|
+
}
|
|
79
|
+
}, [autoplayEntry === null || autoplayEntry === void 0 ? void 0 : autoplayEntry.isIntersecting, cbAutoplayMode]);
|
|
80
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isEditModeAndHidden && (0, jsx_runtime_1.jsx)(S_HiddenCover_1.S_HiddenCover, {}), (0, jsx_runtime_1.jsx)(S_CB_AnimationObserverBox_1.S_CB_AnimationObserverBox, __assign({ ref: hasEffect ? cbRef : null, effectVisibleStyle: effectVisibleStyle }, { children: (0, jsx_runtime_1.jsx)(S_CB_BoxWithShadow_1.S_CB_BoxWithShadow, __assign({ ref: autoplayRef, className: "cb-layout-box", normalStyle: __assign(__assign(__assign(__assign({}, propsStyle), layoutStyle), effectCssProperties), bgColorStyle), hoverStyle: __assign(__assign({}, propsHoverStyle), bgColorHoverStyle), cbStylePropsShadowSpecs: CB_STYLE_PROP_SHADOW, device: device }, { children: isEditMode ? ((0, jsx_runtime_1.jsxs)(S_ThumbnailBox, { children: [(0, jsx_runtime_1.jsx)(YoutubeButton, {}), (0, jsx_runtime_1.jsx)(S_Thumbnail, { src: thumbnailSrc })] })) : ((0, jsx_runtime_1.jsx)(S_Iframe, { ref: iframeRef, title: id, src: youtubeSrc, onLoad: onLoadIframe, allow: "accelerometer; encrypted-media; gyroscope; picture-in-picture" })) })) }))] }));
|
|
53
81
|
}
|
|
54
82
|
function getBGColorStyles(props, device) {
|
|
55
83
|
var availableSpecCodes = [
|
|
@@ -1,7 +1,15 @@
|
|
|
1
1
|
import type { CB_CONTENT_PROP_YOUTUBE_TYPE } from './types';
|
|
2
|
-
|
|
2
|
+
import type { YOUTUBE_AUTOPLAY_TRIGGER_POINT } from './Youtube';
|
|
3
|
+
import type { Device } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
|
|
4
|
+
declare function parseYoutubeContentProp(props: CB_CONTENT_PROP_YOUTUBE_TYPE, device: Device, autoplayTriggerPoint: YOUTUBE_AUTOPLAY_TRIGGER_POINT): {
|
|
3
5
|
id: string;
|
|
4
6
|
youtubeSrc: string;
|
|
5
7
|
thumbnailSrc: string;
|
|
8
|
+
cbAutoplayMode?: undefined;
|
|
9
|
+
} | {
|
|
10
|
+
id: string;
|
|
11
|
+
youtubeSrc: string;
|
|
12
|
+
thumbnailSrc: string;
|
|
13
|
+
cbAutoplayMode: string;
|
|
6
14
|
};
|
|
7
15
|
export default parseYoutubeContentProp;
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
function parseYoutubeContentProp(props) {
|
|
3
|
+
function parseYoutubeContentProp(props, device, autoplayTriggerPoint) {
|
|
4
4
|
var id = getYoutubeId(props.CB_CONTENT_PROP_YOUTUBE_SPEC_SRC);
|
|
5
5
|
var start = props.CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME;
|
|
6
|
-
var
|
|
6
|
+
var shouldAutoPlay = device === 'DESKTOP'
|
|
7
|
+
? props.CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY
|
|
8
|
+
: props.CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY;
|
|
9
|
+
var cbAutoplayMode = shouldAutoPlay ? autoplayTriggerPoint : 'NONE';
|
|
7
10
|
if (!id) {
|
|
8
11
|
return {
|
|
9
12
|
id: 'no-id',
|
|
@@ -13,8 +16,9 @@ function parseYoutubeContentProp(props) {
|
|
|
13
16
|
}
|
|
14
17
|
return {
|
|
15
18
|
id: id,
|
|
16
|
-
youtubeSrc: getEmbedUrl(id, start,
|
|
17
|
-
thumbnailSrc: getThumbnailUrl(id)
|
|
19
|
+
youtubeSrc: getEmbedUrl(id, { start: start, shouldAutoPlay: shouldAutoPlay, autoplayMode: autoplayTriggerPoint }),
|
|
20
|
+
thumbnailSrc: getThumbnailUrl(id),
|
|
21
|
+
cbAutoplayMode: cbAutoplayMode
|
|
18
22
|
};
|
|
19
23
|
}
|
|
20
24
|
function getYoutubeId(src) {
|
|
@@ -27,7 +31,28 @@ function getYoutubeId(src) {
|
|
|
27
31
|
function getThumbnailUrl(id) {
|
|
28
32
|
return "https://img.youtube.com/vi/".concat(id, "/0.jpg");
|
|
29
33
|
}
|
|
30
|
-
function getEmbedUrl(id,
|
|
31
|
-
|
|
34
|
+
function getEmbedUrl(id, _a) {
|
|
35
|
+
var start = _a.start, autoplayMode = _a.autoplayMode, shouldAutoPlay = _a.shouldAutoPlay;
|
|
36
|
+
try {
|
|
37
|
+
var url = new URL("https://www.youtube.com/embed/".concat(id));
|
|
38
|
+
url.searchParams.set('start', "".concat(start));
|
|
39
|
+
if (!shouldAutoPlay) {
|
|
40
|
+
return url.href;
|
|
41
|
+
}
|
|
42
|
+
// NOTE: AUTOPLAY PARAMS
|
|
43
|
+
if (autoplayMode === 'ALWAYS') {
|
|
44
|
+
url.searchParams.set('autoplay', '1');
|
|
45
|
+
}
|
|
46
|
+
if (autoplayMode === 'VIEWPORT') {
|
|
47
|
+
url.searchParams.set('enablejsapi', '1');
|
|
48
|
+
}
|
|
49
|
+
url.searchParams.set('mute', '1');
|
|
50
|
+
url.searchParams.set('loop', '1');
|
|
51
|
+
url.searchParams.set('playlist', "".concat(id));
|
|
52
|
+
return url.href;
|
|
53
|
+
}
|
|
54
|
+
catch (error) {
|
|
55
|
+
return "https://www.youtube.com/embed/".concat(id, "?start=").concat(start);
|
|
56
|
+
}
|
|
32
57
|
}
|
|
33
58
|
exports.default = parseYoutubeContentProp;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import type { ENUM_STRING, NUMBER_INTEGER } from '../../../../../../../DynamicLayout/sections/CustomSection/util/types';
|
|
2
2
|
export type CB_CONTENT_PROP_YOUTUBE_TYPE = {
|
|
3
|
-
CB_CONTENT_PROP_YOUTUBE_SPEC_ENDTIME: number;
|
|
4
|
-
CB_CONTENT_PROP_YOUTUBE_SPEC_MPLAY: boolean;
|
|
5
|
-
CB_CONTENT_PROP_YOUTUBE_SPEC_REPLAY: boolean;
|
|
6
3
|
CB_CONTENT_PROP_YOUTUBE_SPEC_SRC: string;
|
|
7
4
|
CB_CONTENT_PROP_YOUTUBE_SPEC_STARTTIME: number;
|
|
5
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_AUTOPLAY: boolean;
|
|
6
|
+
CB_CONTENT_PROP_YOUTUBE_SPEC_MAUTOPLAY: boolean;
|
|
8
7
|
};
|
|
9
8
|
export type CB_STYLE_PROP_BGCOLOR_ENUM_GRADIENT = 'LINEAR' | 'RADIAL';
|
|
10
9
|
export type CB_STYLE_PROP_BGCOLOR_ENUM_TYPE = 'NONE' | 'SOLID' | 'GRADIENT';
|
package/package.json
CHANGED
package/release-note.md
CHANGED