@wix/editor-react-components 1.2163.0 → 1.2164.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.
- package/dist/site/components/Breadcrumbs/component.js +2 -1
- package/dist/site/components/CollapsibleText/component.js +11 -8
- package/dist/site/components/TransparentVideo/component.js +112 -67
- package/dist/site/components/TransparentVideo/css.css +2 -1
- package/dist/site/components/VideoUpload/component.js +4 -6
- package/dist/site/components/VideoUpload/sdk.js +5 -4
- package/dist/site/components/chunks/Button.js +3 -1
- package/package.json +9 -2
|
@@ -1630,7 +1630,8 @@ function Breadcrumbs2({
|
|
|
1630
1630
|
}) {
|
|
1631
1631
|
const rootRef = useRef(null);
|
|
1632
1632
|
const iconProps = elementProps == null ? void 0 : elementProps.animatedHomeIcon;
|
|
1633
|
-
const
|
|
1633
|
+
const generatedItems = useBreadcrumbItems();
|
|
1634
|
+
const items = itemsFromProps ?? generatedItems;
|
|
1634
1635
|
const collapsedRange = useCollapsedRange(rootRef, items.length);
|
|
1635
1636
|
useSeoService(items);
|
|
1636
1637
|
return /* @__PURE__ */ jsxs(
|
|
@@ -64,10 +64,7 @@ const getIsExpandRedundant = (textRef, maxLinesCss) => {
|
|
|
64
64
|
if (!isValidLineHeightNumber) {
|
|
65
65
|
lineHeightAsNumber = FALLBACK_LINE_HEIGHT;
|
|
66
66
|
}
|
|
67
|
-
const maxLines = parseInt(
|
|
68
|
-
computedStyle.getPropertyValue("--max-lines"),
|
|
69
|
-
10
|
|
70
|
-
);
|
|
67
|
+
const maxLines = parseInt(computedStyle.getPropertyValue("--max-lines"), 10);
|
|
71
68
|
const effectiveMaxLines = !isNaN(maxLines) ? maxLines : maxLinesCss;
|
|
72
69
|
const maxHeight = Math.ceil(lineHeightAsNumber * effectiveMaxLines);
|
|
73
70
|
return txtElement.scrollHeight <= maxHeight + LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE;
|
|
@@ -116,7 +113,15 @@ const noop = () => {
|
|
|
116
113
|
function CollapsibleText(props) {
|
|
117
114
|
var _a, _b, _c;
|
|
118
115
|
const environmentService = useService(definitionExports.EnvironmentDefinition);
|
|
119
|
-
const {
|
|
116
|
+
const {
|
|
117
|
+
id,
|
|
118
|
+
className,
|
|
119
|
+
text: text2,
|
|
120
|
+
expandMode,
|
|
121
|
+
link,
|
|
122
|
+
linkText,
|
|
123
|
+
tag: TagName = "p"
|
|
124
|
+
} = props;
|
|
120
125
|
const { readMoreText, readLessText } = props;
|
|
121
126
|
const {
|
|
122
127
|
onClick = noop,
|
|
@@ -179,9 +184,7 @@ function CollapsibleText(props) {
|
|
|
179
184
|
children: /* @__PURE__ */ jsxs(
|
|
180
185
|
"div",
|
|
181
186
|
{
|
|
182
|
-
className: clsx(
|
|
183
|
-
formatClassNames(semanticClassNames.root)
|
|
184
|
-
),
|
|
187
|
+
className: clsx(formatClassNames(semanticClassNames.root)),
|
|
185
188
|
"data-testid": TestIds.root,
|
|
186
189
|
children: [
|
|
187
190
|
/* @__PURE__ */ jsx(
|
|
@@ -65,7 +65,11 @@ function attrToString(key, value) {
|
|
|
65
65
|
function attrsObjectToString(attrs) {
|
|
66
66
|
return Object.keys(attrs).map((key) => attrToString(key, attrs[key])).join(" ");
|
|
67
67
|
}
|
|
68
|
-
function filterWrapperTemplate({
|
|
68
|
+
function filterWrapperTemplate({
|
|
69
|
+
id,
|
|
70
|
+
content,
|
|
71
|
+
attrs = {}
|
|
72
|
+
}) {
|
|
69
73
|
return `<filter id="${id}" color-interpolation-filters="sRGB" ${attrsObjectToString(attrs)}>
|
|
70
74
|
<feComponentTransfer result="srcRGB"/>
|
|
71
75
|
${content}
|
|
@@ -90,7 +94,11 @@ function sepia({ value }) {
|
|
|
90
94
|
function hue({ value }) {
|
|
91
95
|
return `<feColorMatrix type="hueRotate" values="${value}"/>`;
|
|
92
96
|
}
|
|
93
|
-
function color({
|
|
97
|
+
function color({
|
|
98
|
+
value,
|
|
99
|
+
inAttr,
|
|
100
|
+
result
|
|
101
|
+
}) {
|
|
94
102
|
const hexColor = typeof value === "string" ? value : value.color;
|
|
95
103
|
const opacity = typeof value === "object" && typeof value.opacity !== "undefined" ? value.opacity : 1;
|
|
96
104
|
return `<feColorMatrix type="matrix" values="${getColor(hex2RgbNorm(hexColor), opacity)}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
|
|
@@ -112,17 +120,28 @@ function offset({ value, inAttr, result }) {
|
|
|
112
120
|
function blend$1({ value, inAttr, in2Attr, result }) {
|
|
113
121
|
return `<feBlend mode="${value}" in="${inAttr}" in2="${in2Attr}" ${attrToString("result", result)}/>`;
|
|
114
122
|
}
|
|
115
|
-
function composite({
|
|
123
|
+
function composite({
|
|
124
|
+
value,
|
|
125
|
+
inAttr,
|
|
126
|
+
in2Attr,
|
|
127
|
+
result
|
|
128
|
+
}) {
|
|
116
129
|
return `<feComposite operator="${value}" in="${inAttr}" in2="${in2Attr}" ${attrToString("result", result)}/>`;
|
|
117
130
|
}
|
|
118
|
-
function duotone$1({
|
|
131
|
+
function duotone$1({
|
|
132
|
+
value: { dark, light },
|
|
133
|
+
inAttr,
|
|
134
|
+
result
|
|
135
|
+
}) {
|
|
119
136
|
return `${saturation({ value: 0 })}
|
|
120
137
|
<feColorMatrix type="matrix" values="${getDoutone(hex2RgbNorm(light), hex2RgbNorm(dark))}" ${inAttr ? `in="${inAttr}"` : ""}${result ? `result="${result}"` : ""}/>`;
|
|
121
138
|
}
|
|
122
139
|
function luma({ value: { dark, light }, result }) {
|
|
123
140
|
return `<feColorMatrix type="matrix" values="${getLumaMatrix(light, dark)}" ${result ? `result="${result}"` : ""}/>`;
|
|
124
141
|
}
|
|
125
|
-
function shadow({
|
|
142
|
+
function shadow({
|
|
143
|
+
value: { blurRadius, mergeGraphic, ...rest }
|
|
144
|
+
}) {
|
|
126
145
|
return `${blur({ value: blurRadius, inAttr: "SourceAlpha" })}
|
|
127
146
|
${offset({ value: rest })}
|
|
128
147
|
${color({ value: rest })}
|
|
@@ -169,21 +188,15 @@ function interpolate(id, filterDefinition, overrides, attrs) {
|
|
|
169
188
|
const filterValue = getFilterValue(key, value, overrides);
|
|
170
189
|
const arg = { ...effect, value: filterValue };
|
|
171
190
|
if (typeof filterValue === "number") {
|
|
172
|
-
return filterComponentTempaltesWithNumber[key](
|
|
173
|
-
arg
|
|
174
|
-
);
|
|
191
|
+
return filterComponentTempaltesWithNumber[key](arg);
|
|
175
192
|
} else if (typeof filterValue === "string") {
|
|
176
|
-
return filterComponentTempaltesWithString[key](
|
|
177
|
-
arg
|
|
178
|
-
);
|
|
193
|
+
return filterComponentTempaltesWithString[key](arg);
|
|
179
194
|
} else if (key === "luma") {
|
|
180
195
|
return luma(arg);
|
|
181
196
|
} else if (key === "identity") {
|
|
182
197
|
return identity(arg);
|
|
183
198
|
} else {
|
|
184
|
-
return filterComponentTempaltes[key](
|
|
185
|
-
arg
|
|
186
|
-
);
|
|
199
|
+
return filterComponentTempaltes[key](arg);
|
|
187
200
|
}
|
|
188
201
|
}).join("\n");
|
|
189
202
|
return filterWrapperTemplate({ id, content, attrs });
|
|
@@ -598,9 +611,14 @@ function getFilter(id, name, overrides, attrs) {
|
|
|
598
611
|
}
|
|
599
612
|
const getFilterEffectString = (id, filterEffect) => {
|
|
600
613
|
if (!filterEffect) return "";
|
|
601
|
-
return getFilter(
|
|
602
|
-
|
|
603
|
-
|
|
614
|
+
return getFilter(
|
|
615
|
+
id,
|
|
616
|
+
`${filterEffect.effectType}`,
|
|
617
|
+
{
|
|
618
|
+
...filterEffect
|
|
619
|
+
},
|
|
620
|
+
{}
|
|
621
|
+
);
|
|
604
622
|
};
|
|
605
623
|
const removeMediaPrefix = (uri) => {
|
|
606
624
|
if (uri.startsWith("media/")) {
|
|
@@ -644,10 +662,7 @@ const getFilterEffectData = (props) => {
|
|
|
644
662
|
return effectTypeObj;
|
|
645
663
|
};
|
|
646
664
|
const closeSelfClosingSvgTags = (svg) => {
|
|
647
|
-
return svg.replace(
|
|
648
|
-
/<([a-zA-Z][\w:-]*)([^>]*)\/>/g,
|
|
649
|
-
"<$1$2></$1>"
|
|
650
|
-
);
|
|
665
|
+
return svg.replace(/<([a-zA-Z][\w:-]*)([^>]*)\/>/g, "<$1$2></$1>");
|
|
651
666
|
};
|
|
652
667
|
function alphaMask({ isLuminance = false } = {}) {
|
|
653
668
|
return {
|
|
@@ -3307,7 +3322,9 @@ function useTransparentVideo(props) {
|
|
|
3307
3322
|
const initialFilterEffectRef = useRef(props.filterEffect);
|
|
3308
3323
|
const [canPlayTransparentVideo, setCanPlayTransparentVideo] = useState(true);
|
|
3309
3324
|
const [playingState, setPlayingState] = useState();
|
|
3310
|
-
const [isMuted, setIsMuted] = useState(
|
|
3325
|
+
const [isMuted, setIsMuted] = useState(
|
|
3326
|
+
videoStartType === VideoStartType.auto || mute
|
|
3327
|
+
);
|
|
3311
3328
|
useEffect(() => {
|
|
3312
3329
|
if (!canPlayTransparentVideo) {
|
|
3313
3330
|
return;
|
|
@@ -3365,7 +3382,10 @@ function useTransparentVideo(props) {
|
|
|
3365
3382
|
const shouldMuteVideo = isMuted || mute || shouldDisplayPoster;
|
|
3366
3383
|
const shouldDisplayAudioToggle = !!(video && video.hasAudio && !mute);
|
|
3367
3384
|
const shouldDisplayPlayButton = !!video && !(playingState === VideoPlayingState.ended && !shouldReplay);
|
|
3368
|
-
const posterFilterId = useMemo(
|
|
3385
|
+
const posterFilterId = useMemo(
|
|
3386
|
+
() => `${SVG_FILTER_ID_PREFIX}${props.id}`,
|
|
3387
|
+
[props.id]
|
|
3388
|
+
);
|
|
3369
3389
|
const onClickHandler = useCallback(() => {
|
|
3370
3390
|
var _a, _b;
|
|
3371
3391
|
if (playingState === VideoPlayingState.ended && !shouldReplay) {
|
|
@@ -3392,10 +3412,13 @@ function useTransparentVideo(props) {
|
|
|
3392
3412
|
(_a = videoRef.current) == null ? void 0 : _a.pause();
|
|
3393
3413
|
}
|
|
3394
3414
|
}, [videoStartType]);
|
|
3395
|
-
const onAudioToggleClickHandler = useCallback(
|
|
3396
|
-
event
|
|
3397
|
-
|
|
3398
|
-
|
|
3415
|
+
const onAudioToggleClickHandler = useCallback(
|
|
3416
|
+
(event) => {
|
|
3417
|
+
event.stopPropagation();
|
|
3418
|
+
setIsMuted((prev) => !prev);
|
|
3419
|
+
},
|
|
3420
|
+
[]
|
|
3421
|
+
);
|
|
3399
3422
|
return {
|
|
3400
3423
|
a11y,
|
|
3401
3424
|
className,
|
|
@@ -3471,37 +3494,43 @@ const TransparentVideoPoster = React__default.memo(
|
|
|
3471
3494
|
}
|
|
3472
3495
|
);
|
|
3473
3496
|
TransparentVideoPoster.displayName = "TransparentVideoPoster";
|
|
3474
|
-
const MutedIcon = () =>
|
|
3475
|
-
/*
|
|
3476
|
-
|
|
3477
|
-
/* @__PURE__ */ jsx("
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
/* @__PURE__ */ jsx("
|
|
3481
|
-
/* @__PURE__ */
|
|
3482
|
-
|
|
3483
|
-
|
|
3484
|
-
|
|
3485
|
-
] }) })
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
|
-
|
|
3491
|
-
|
|
3492
|
-
|
|
3493
|
-
/* @__PURE__ */ jsx("
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
|
|
3501
|
-
|
|
3502
|
-
|
|
3503
|
-
|
|
3504
|
-
|
|
3497
|
+
const MutedIcon = () => (
|
|
3498
|
+
/* oxlint-disable-next-line jsx_a11y/role-supports-aria-props */
|
|
3499
|
+
/* @__PURE__ */ jsx("svg", { preserveAspectRatio: "xMidYMid meet", "data-bbox": "5.726 5.999 21.997 18.001", "data-type": "shape", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", role: "presentation", "aria-hidden": "true", "aria-label": "", children: /* @__PURE__ */ jsxs("g", { children: [
|
|
3500
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "b0f9f707-af61-4336-bcea-c2fee482e562_audioOff-comp-mneizzz18", height: "200%", width: "200%", y: "-50%", x: "-50%", children: [
|
|
3501
|
+
/* @__PURE__ */ jsx("feOffset", { result: "out-offset", in: "SourceAlpha" }),
|
|
3502
|
+
/* @__PURE__ */ jsx("feGaussianBlur", { result: "out-blur", in: "out-offset", stdDeviation: "2" }),
|
|
3503
|
+
/* @__PURE__ */ jsx("feColorMatrix", { result: "out-matrix", in: "out-blur", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.40 0" }),
|
|
3504
|
+
/* @__PURE__ */ jsxs("feMerge", { children: [
|
|
3505
|
+
/* @__PURE__ */ jsx("feMergeNode", { in: "out-matrix" }),
|
|
3506
|
+
/* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
|
|
3507
|
+
] })
|
|
3508
|
+
] }) }),
|
|
3509
|
+
/* @__PURE__ */ jsx("path", { fill: "white", filter: "url(#b0f9f707-af61-4336-bcea-c2fee482e562_audioOff-comp-mneizzz18)", d: "M27.39 17.535a.478.478 0 0 1 .306.615v.001a.51.51 0 0 1-.641.292L6.074 12.471a.478.478 0 0 1-.325-.605.505.505 0 0 1 .661-.302l20.98 5.971zm-6.211.375c1.911-.377 1.812 2.001 1.813 2.001 0 1.273-.986 2.713-3.235 2.713-2.009 0-2.515-1.345-2.515-2.252 0-1.117.646-2.258 2.519-2.258.671-.001 1.095-.141 1.418-.204zm-8.427-1.643v.013h.001l-.005 5.007c0 1.273-.985 2.713-3.233 2.713C7.506 24 7 22.655 7 21.748c0-1.117.646-2.258 2.519-2.258 1.696 0 1.972-.427 1.972-1.319l.001-1.934a.513.513 0 0 1 .512-.477h.23c.285 0 .518.228.518.507zm-.537-4.642a.666.666 0 0 1-.506-.141.61.61 0 0 1-.22-.468l.006-2.86c0-.304.227-.562.535-.609l10.238-1.54a.629.629 0 0 1 .726.609L23 13.591c0 .013-.006.024-.007.036a.49.49 0 0 1-.094.248.516.516 0 0 1-.416.222h-.229a.51.51 0 0 1-.517-.505l-.004-3.479-9.518 1.512z" })
|
|
3510
|
+
] }) })
|
|
3511
|
+
);
|
|
3512
|
+
const UnMutedIcon = () => (
|
|
3513
|
+
/* oxlint-disable-next-line jsx_a11y/role-supports-aria-props */
|
|
3514
|
+
/* @__PURE__ */ jsx("svg", { preserveAspectRatio: "xMidYMid meet", "data-bbox": "7 5.999 16 18.001", "data-type": "shape", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "30", viewBox: "0 0 30 30", role: "presentation", "aria-hidden": "true", "aria-label": "", children: /* @__PURE__ */ jsxs("g", { children: [
|
|
3515
|
+
/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", { id: "4e358e3c-c4cc-411c-8da6-747bbbb99bfa_audioOn-comp-mneizzz18", height: "200%", width: "200%", y: "-50%", x: "-50%", children: [
|
|
3516
|
+
/* @__PURE__ */ jsx("feOffset", { result: "out-offset", in: "SourceAlpha" }),
|
|
3517
|
+
/* @__PURE__ */ jsx("feGaussianBlur", { result: "out-blur", in: "out-offset", stdDeviation: "2" }),
|
|
3518
|
+
/* @__PURE__ */ jsx("feColorMatrix", { result: "out-matrix", in: "out-blur", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0" }),
|
|
3519
|
+
/* @__PURE__ */ jsxs("feMerge", { children: [
|
|
3520
|
+
/* @__PURE__ */ jsx("feMergeNode", { in: "out-matrix" }),
|
|
3521
|
+
/* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
|
|
3522
|
+
] })
|
|
3523
|
+
] }) }),
|
|
3524
|
+
/* @__PURE__ */ jsx(
|
|
3525
|
+
"path",
|
|
3526
|
+
{
|
|
3527
|
+
fill: "white",
|
|
3528
|
+
filter: "url(#4e358e3c-c4cc-411c-8da6-747bbbb99bfa_audioOn-comp-mneizzz18)",
|
|
3529
|
+
d: "M23 6.616a.625.625 0 0 0-.727-.609l-10.241 1.54a.62.62 0 0 0-.535.609l-.006 10.016c0 .892-.276 1.319-1.971 1.319C7.646 19.49 7 20.631 7 21.748 7 22.655 7.507 24 9.516 24c2.249 0 3.236-1.44 3.236-2.713l.006-9.719 8.98-1.454v6.87c-.045.763-.401 1.13-1.973 1.13-1.874 0-2.52 1.141-2.52 2.258 0 .907.507 2.252 2.516 2.252 2.249 0 3.236-1.44 3.236-2.713L23 6.616z"
|
|
3530
|
+
}
|
|
3531
|
+
)
|
|
3532
|
+
] }) })
|
|
3533
|
+
);
|
|
3505
3534
|
const PauseIcon = () => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
3506
3535
|
/* @__PURE__ */ jsx("rect", { x: "13", y: "10", width: "5", height: "20", "data-color": "1", fill: "white", "data-testid": "pause-rect" }),
|
|
3507
3536
|
/* @__PURE__ */ jsx("rect", { x: "22", y: "10", width: "5", height: "20", "data-color": "1", fill: "white", "data-testid": "pause-rect" })
|
|
@@ -3555,11 +3584,7 @@ function TransparentVideo(props) {
|
|
|
3555
3584
|
{
|
|
3556
3585
|
id,
|
|
3557
3586
|
ref: playerRef,
|
|
3558
|
-
className: clsx(
|
|
3559
|
-
styles.mainWrapper,
|
|
3560
|
-
className,
|
|
3561
|
-
"wixui-transparent-video"
|
|
3562
|
-
),
|
|
3587
|
+
className: clsx(styles.mainWrapper, className, "wixui-transparent-video"),
|
|
3563
3588
|
"data-has-alpha": "true",
|
|
3564
3589
|
"data-playing": shouldAutoplay ? "" : void 0,
|
|
3565
3590
|
onClick: onClickHandler,
|
|
@@ -3585,7 +3610,11 @@ function TransparentVideo(props) {
|
|
|
3585
3610
|
{
|
|
3586
3611
|
id: `${id}-webglcanvas`,
|
|
3587
3612
|
ref: canvasRef,
|
|
3588
|
-
className: clsx(
|
|
3613
|
+
className: clsx(
|
|
3614
|
+
styles.canvas,
|
|
3615
|
+
"webglcanvas",
|
|
3616
|
+
shouldDisplayPoster && styles.hidden
|
|
3617
|
+
),
|
|
3589
3618
|
"aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || "",
|
|
3590
3619
|
role: "presentation",
|
|
3591
3620
|
"data-testid": "canvas"
|
|
@@ -3598,12 +3627,28 @@ function TransparentVideo(props) {
|
|
|
3598
3627
|
containerId: id,
|
|
3599
3628
|
posterUrl,
|
|
3600
3629
|
posterFilterId,
|
|
3601
|
-
filterEffectSvgString: getFilterEffectString(
|
|
3630
|
+
filterEffectSvgString: getFilterEffectString(
|
|
3631
|
+
posterFilterId,
|
|
3632
|
+
filterEffects
|
|
3633
|
+
),
|
|
3602
3634
|
ariaLabel: a11y == null ? void 0 : a11y.ariaLabel
|
|
3603
3635
|
}
|
|
3604
3636
|
),
|
|
3605
|
-
shouldDisplayAudioToggle && /* @__PURE__ */ jsx(
|
|
3606
|
-
|
|
3637
|
+
shouldDisplayAudioToggle && /* @__PURE__ */ jsx(
|
|
3638
|
+
"div",
|
|
3639
|
+
{
|
|
3640
|
+
className: clsx(styles.audioToggle),
|
|
3641
|
+
onClick: onAudioToggleClickHandler,
|
|
3642
|
+
children: isMuted ? /* @__PURE__ */ jsx(MutedIcon, {}) : /* @__PURE__ */ jsx(UnMutedIcon, {})
|
|
3643
|
+
}
|
|
3644
|
+
),
|
|
3645
|
+
shouldDisplayPlayButton && /* @__PURE__ */ jsx(
|
|
3646
|
+
"div",
|
|
3647
|
+
{
|
|
3648
|
+
className: clsx(styles.playWrapper, { [styles.isShown]: !isPlaying }),
|
|
3649
|
+
children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
|
|
3650
|
+
}
|
|
3651
|
+
)
|
|
3607
3652
|
]
|
|
3608
3653
|
}
|
|
3609
3654
|
);
|
|
@@ -5,7 +5,8 @@
|
|
|
5
5
|
.mainWrapper__gc4Bd[data-show-canvas] .canvas__fJeLY {
|
|
6
6
|
opacity: 1;
|
|
7
7
|
}
|
|
8
|
-
.mainWrapper__gc4Bd:hover .audioToggle__k2EqB,
|
|
8
|
+
.mainWrapper__gc4Bd:hover .audioToggle__k2EqB,
|
|
9
|
+
.mainWrapper__gc4Bd:hover .playWrapper__yH3ix {
|
|
9
10
|
opacity: 1;
|
|
10
11
|
}
|
|
11
12
|
.mainWrapper__gc4Bd:hover .playWrapper__yH3ix svg {
|
|
@@ -448,15 +448,13 @@ const useVolume = (videoRef, video) => {
|
|
|
448
448
|
}
|
|
449
449
|
_setVolume(videoElement.volume);
|
|
450
450
|
_setIsMuted(videoElement.muted);
|
|
451
|
-
|
|
451
|
+
const handleVolumeChange = () => {
|
|
452
452
|
_setVolume(videoElement.volume);
|
|
453
453
|
_setIsMuted(videoElement.muted);
|
|
454
|
-
}
|
|
454
|
+
};
|
|
455
|
+
videoElement.addEventListener("volumechange", handleVolumeChange);
|
|
455
456
|
return () => {
|
|
456
|
-
videoElement.removeEventListener("volumechange",
|
|
457
|
-
_setVolume(videoElement.volume);
|
|
458
|
-
_setIsMuted(videoElement.muted);
|
|
459
|
-
});
|
|
457
|
+
videoElement.removeEventListener("volumechange", handleVolumeChange);
|
|
460
458
|
};
|
|
461
459
|
}, [videoRef]);
|
|
462
460
|
return {
|
|
@@ -462,9 +462,7 @@ const fixMediaTitleLength = (value, lengthLimit) => {
|
|
|
462
462
|
};
|
|
463
463
|
const parseVideoQualities = (fileOutput) => {
|
|
464
464
|
var _a;
|
|
465
|
-
const mp4Videos = fileOutput.video.filter(
|
|
466
|
-
(v) => v.format === "mp4"
|
|
467
|
-
);
|
|
465
|
+
const mp4Videos = fileOutput.video.filter((v) => v.format === "mp4");
|
|
468
466
|
const storyboard = (_a = fileOutput.storyboard) == null ? void 0 : _a.find(
|
|
469
467
|
(s) => s.format === "mp4"
|
|
470
468
|
);
|
|
@@ -487,7 +485,10 @@ const parseVideoQualities = (fileOutput) => {
|
|
|
487
485
|
return qualities;
|
|
488
486
|
};
|
|
489
487
|
const parseAdaptiveUrls = (fileOutput) => {
|
|
490
|
-
const adaptiveVideo = getObjectValueByKey(
|
|
488
|
+
const adaptiveVideo = getObjectValueByKey(
|
|
489
|
+
fileOutput,
|
|
490
|
+
"adaptive_video"
|
|
491
|
+
);
|
|
491
492
|
return adaptiveVideo.map((item) => ({
|
|
492
493
|
format: item.format,
|
|
493
494
|
url: item.url
|
|
@@ -50,7 +50,9 @@ function useIconAnimation(isDisabled) {
|
|
|
50
50
|
}
|
|
51
51
|
function useHoverState(iconAnimationTriggers, onAnimationForward, onAnimationBackward, propsOnMouseEnter, propsOnMouseLeave) {
|
|
52
52
|
const [active2, setActive] = useState(false);
|
|
53
|
-
const animationTimeoutRef = useRef(
|
|
53
|
+
const animationTimeoutRef = useRef(
|
|
54
|
+
null
|
|
55
|
+
);
|
|
54
56
|
useEffect(() => {
|
|
55
57
|
return () => {
|
|
56
58
|
if (animationTimeoutRef.current) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/editor-react-components",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.2164.0",
|
|
4
4
|
"description": "React components for the Wix Editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
"build": "yarn build:lite && yarn build:janet && yarn build:package",
|
|
35
35
|
"build:package": "vite build && yarn check:npm-bundle-secrets",
|
|
36
36
|
"check:npm-bundle-secrets": "node scripts/check-npm-bundle-secrets.mjs",
|
|
37
|
+
"lint": "yarn run -T lint:ox:package",
|
|
38
|
+
"check:linting": "yarn run lint",
|
|
39
|
+
"check:formatting": "yarn run -T oxfmt -c ../../.oxfmtrc.json . --check",
|
|
40
|
+
"validate": "yarn run -T turbo check:linting check:formatting",
|
|
37
41
|
"build:app": "astro check && wix build",
|
|
38
42
|
"build:lite": "yarn validate:manifests && yarn build:app",
|
|
39
43
|
"dev": "yarn validate:manifests && yarn cli-dev",
|
|
@@ -174,6 +178,9 @@
|
|
|
174
178
|
"method": "DAC"
|
|
175
179
|
},
|
|
176
180
|
"validations": {
|
|
181
|
+
"postDependenciesBuild": [
|
|
182
|
+
"validate"
|
|
183
|
+
],
|
|
177
184
|
"postPublish": [
|
|
178
185
|
"test:e2e"
|
|
179
186
|
]
|
|
@@ -183,5 +190,5 @@
|
|
|
183
190
|
"registry": "https://registry.npmjs.org/",
|
|
184
191
|
"access": "public"
|
|
185
192
|
},
|
|
186
|
-
"falconPackageHash": "
|
|
193
|
+
"falconPackageHash": "69df6063d9c2457247375ca4a90bb48eb537708fef78cc0fd66e189d"
|
|
187
194
|
}
|