@wix/editor-react-components 1.2496.0 → 1.2497.0

package/dist/site/components/Logo/css.css

@@ -1,4 +1,18 @@
-.logo__Y9w6a {
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
+}.logo__Y9w6a {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -28,19 +42,4 @@
   width: 100%;
   height: 100%;
   display: block;
-}
-.image__WopE9 {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.image__WopE9 img {
-  max-width: var(--wix-img-max-width, 100%);
-}
-.image__WopE9[data-animate-blur] img {
-  filter: blur(9px);
-  transition: filter 0.8s ease-in;
-}
-.image__WopE9[data-animate-blur] img[data-load-done] {
-  filter: none;
 }

package/dist/site/components/TransparentVideo/TransparentVideo.types.d.ts

@@ -21,13 +21,13 @@ export type TransparentVideoFilterEffect = {
     invert?: boolean;
 };
 export interface TransparentVideoProps extends VideoUploadProps {
-    showPoster: boolean;
+    hideCanvas: boolean;
     videoStartType: VideoStartType;
     videoEndType: VideoEndType;
     filterEffect?: TransparentVideoFilterEffect;
 }
 export interface TransparentVideoBuilderProps extends TransparentVideoFilterEffect, VideoUploadProps {
-    showPoster: boolean;
+    hideCanvas: boolean;
     videoStartType: VideoStartType;
     videoEndType: VideoEndType;
     filterEffectRecolorVideo?: boolean;

package/dist/site/components/TransparentVideo/component.js

@@ -3292,7 +3292,7 @@ function useTransparentVideo(props) {
     video,
     videoStartType = VideoStartType.auto,
     videoEndType = VideoEndType.loop,
-    showPoster = false,
+    hideCanvas = false,
     mute = true
   } = props;
   const playerRef = useRef(null);
@@ -3360,8 +3360,8 @@ function useTransparentVideo(props) {
   const isPlaying = playingState === VideoPlayingState.playing;
   const shouldAutoplay = videoStartType === VideoStartType.auto;
   const shouldReplay = videoEndType !== VideoEndType.stop;
-  const shouldDisplayPoster = showPoster || !isPlaying && playingState !== VideoPlayingState.paused;
-  const shouldMuteVideo = isMuted || mute || shouldDisplayPoster;
+  const shouldHideCanvas = hideCanvas || !isPlaying && playingState !== VideoPlayingState.paused;
+  const shouldMuteVideo = isMuted || mute || shouldHideCanvas;
   const shouldDisplayAudioToggle = !!(video && video.hasAudio && !mute);
   const shouldDisplayPlayButton = !!video && !(playingState === VideoPlayingState.ended && !shouldReplay);
   const posterFilterId = useMemo(
@@ -3438,7 +3438,7 @@ function useTransparentVideo(props) {
     shouldAutoplay,
     playbackRate,
     playerRef,
-    shouldDisplayPoster,
+    shouldHideCanvas,
     video,
     videoEndType,
     videoRef,
@@ -3541,7 +3541,7 @@ function TransparentVideo(props) {
     shouldAutoplay,
     playbackRate,
     playerRef,
-    shouldDisplayPoster,
+    shouldHideCanvas,
     video,
     videoEndType,
     videoRef,
@@ -3585,7 +3585,8 @@ function TransparentVideo(props) {
                   muted: shouldMuteVideo,
                   loop: videoEndType === VideoEndType.loop,
                   autoplay: shouldAutoplay,
-                  qualityPolicy: "adaptive",
+                  qualityPolicy: "proportional",
+                  posterFittingType: "fit",
                   playbackRate
                 }
               )
@@ -3600,7 +3601,7 @@ function TransparentVideo(props) {
               className: clsx(
                 styles.canvas,
                 "webglcanvas",
-                shouldDisplayPoster && styles.hidden
+                shouldHideCanvas && styles.hidden
               ),
               "aria-label": (a11y == null ? void 0 : a11y.ariaLabel) || "",
               role: "presentation",

package/dist/site/components/TransparentVideo/css.css

@@ -39,14 +39,6 @@
   height: 0;
 }
 
-.poster__d1pI5 {
-  object-fit: contain;
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background: transparent;
-}
-
 .playWrapper__yH3ix {
   position: absolute;
   top: 50%;
@@ -77,7 +69,7 @@
   height: 0;
   width: 0;
 }
-.video-container__qOTQi {
+.videoContainer__Eyxxe {
   width: 100%;
   height: 100%;
   display: block;
@@ -85,13 +77,6 @@
   container-type: size;
 }
 
-.video-poster-img__bHEFW {
-  width: 100%;
-  height: 100%;
-  object-fit: var(--poster-fit, cover);
-  object-position: var(--poster-align, center);
-}
-
 .video__YuKrH {
   height: 100%;
   width: 100%;
@@ -103,19 +88,18 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}
-.image__WopE9 {
+}.image__OIbFL {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__WopE9 img {
+.image__OIbFL img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__WopE9[data-animate-blur] img {
+.image__OIbFL[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__WopE9[data-animate-blur] img[data-load-done] {
+.image__OIbFL[data-animate-blur] img[data-load-done] {
   filter: none;
 }

package/dist/site/components/TransparentVideo/useTransparentVideo.d.ts

@@ -17,7 +17,7 @@ export declare function useTransparentVideo(props: TransparentVideoProps): {
     shouldAutoplay: boolean;
     playbackRate: number;
     playerRef: import('react').RefObject<HTMLDivElement>;
-    shouldDisplayPoster: boolean;
+    shouldHideCanvas: boolean;
     video: import('@wix/video').VideoMedia | undefined;
     videoEndType: VideoEndType;
     videoRef: import('react').RefObject<HTMLVideoElement>;

package/dist/site/components/VideoUpload/css.css

@@ -448,7 +448,7 @@
 .playButton__FDp-e {
   cursor: pointer;
 }
-.video-container__qOTQi {
+.videoContainer__Eyxxe {
   width: 100%;
   height: 100%;
   display: block;
@@ -456,13 +456,6 @@
   container-type: size;
 }
 
-.video-poster-img__bHEFW {
-  width: 100%;
-  height: 100%;
-  object-fit: var(--poster-fit, cover);
-  object-position: var(--poster-align, center);
-}
-
 .video__YuKrH {
   height: 100%;
   width: 100%;
@@ -474,19 +467,18 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}
-.image__WopE9 {
+}.image__OIbFL {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__WopE9 img {
+.image__OIbFL img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__WopE9[data-animate-blur] img {
+.image__OIbFL[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__WopE9[data-animate-blur] img[data-load-done] {
+.image__OIbFL[data-animate-blur] img[data-load-done] {
   filter: none;
 }