@wix/editor-react-components 1.2566.0 → 1.2568.0

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

@@ -3373,13 +3373,18 @@ const styles = {
 const PlayButton = ({
   isPlaying,
   hasError,
-  onTogglePlay
+  onTogglePlay,
+  controlsClassName
 }) => {
   const PlaybackIcon = isPlaying ? PauseFilled_default : PlayFilled_default;
   return /* @__PURE__ */ jsx(
     $d2b4bc8c273e7be6$export$353f5b6fc5456de1,
     {
-      className: clsx(selectors.playButton, selectors.controls),
+      className: clsx(
+        selectors.playButton,
+        selectors.controls,
+        controlsClassName
+      ),
       onPress: onTogglePlay,
       isDisabled: hasError,
       "aria-label": isPlaying ? ARIA_LABELS.pauseButton : ARIA_LABELS.playButton,
@@ -3405,9 +3410,10 @@ const ProgressSlider = ({
   duration,
   hasError,
   onSeek,
-  elementProps
+  progressBarClassName,
+  timeDisplayClassName,
+  controlsClassName
 }) => {
-  var _a, _b;
   const timeText = `${formatTime(currentTime)} / ${formatTime(duration)}`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -3417,7 +3423,8 @@ const ProgressSlider = ({
           selectors.progressBar,
           selectors.controls,
           styles.progressBar,
-          (_a = elementProps == null ? void 0 : elementProps.progressBar) == null ? void 0 : _a.className
+          controlsClassName,
+          progressBarClassName
         ),
         minValue: 0,
         maxValue: duration || 1,
@@ -3452,7 +3459,8 @@ const ProgressSlider = ({
           selectors.timeDisplay,
           selectors.controls,
           styles.timeDisplay,
-          (_b = elementProps == null ? void 0 : elementProps.timeDisplay) == null ? void 0 : _b.className
+          controlsClassName,
+          timeDisplayClassName
         ),
         children: timeText
       }
@@ -3511,7 +3519,8 @@ const VolumeControls = ({
   isMuted,
   onToggleMute,
   onVolumeChange,
-  className
+  className,
+  controlsClassName
 }) => /* @__PURE__ */ jsxs(
   $a049562f99e7db0e$export$eb2fcfdbd7ba97d4,
   {
@@ -3519,6 +3528,7 @@ const VolumeControls = ({
       selectors.volumeControls,
       selectors.controls,
       styles.volumeControls,
+      controlsClassName,
       className
     ),
     "aria-label": ARIA_LABELS.volumeControls,
@@ -3558,7 +3568,7 @@ const VolumeControls = ({
   }
 );
 const AudioPlayer = (props) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     id,
     className,
@@ -3576,11 +3586,12 @@ const AudioPlayer = (props) => {
     onMouseOut,
     elementProps
   } = props;
+  const controlsClassName = (_a = elementProps == null ? void 0 : elementProps.controls) == null ? void 0 : _a.className;
   const audioUrl = audio == null ? void 0 : audio.url;
   const title = audio == null ? void 0 : audio.title;
   const artist = audio == null ? void 0 : audio.artist;
   const environment = useService(EnvironmentDefinition);
-  const isSSR = ((_a = environment == null ? void 0 : environment.isSSR) == null ? void 0 : _a.call(environment)) ?? false;
+  const isSSR = ((_b = environment == null ? void 0 : environment.isSSR) == null ? void 0 : _b.call(environment)) ?? false;
   const fallbackInstanceId = useRef(
     `audio-player-${Math.random().toString(36).slice(2)}`
   );
@@ -3627,7 +3638,7 @@ const AudioPlayer = (props) => {
             className: clsx(
               selectors.coverMedia,
               styles.coverMediaWrapper,
-              (_b = elementProps == null ? void 0 : elementProps.coverArt) == null ? void 0 : _b.className
+              (_c = elementProps == null ? void 0 : elementProps.coverArt) == null ? void 0 : _c.className
             ),
             image: coverImage,
             displayMode
@@ -3639,7 +3650,7 @@ const AudioPlayer = (props) => {
             {
               className: clsx(
                 selectors.title,
-                (_c = elementProps == null ? void 0 : elementProps.audioTitle) == null ? void 0 : _c.className
+                (_d = elementProps == null ? void 0 : elementProps.audioTitle) == null ? void 0 : _d.className
               ),
               children: title
             }
@@ -3660,51 +3671,46 @@ const AudioPlayer = (props) => {
               className: clsx(
                 selectors.artistName,
                 styles.artistName,
-                (_d = elementProps == null ? void 0 : elementProps.artistName) == null ? void 0 : _d.className
+                (_e = elementProps == null ? void 0 : elementProps.artistName) == null ? void 0 : _e.className
               ),
               children: artist
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx(
-              styles.controls,
-              (_e = elementProps == null ? void 0 : elementProps.controls) == null ? void 0 : _e.className
-            ),
-            children: [
-              /* @__PURE__ */ jsx(
-                PlayButton,
-                {
-                  isPlaying,
-                  hasError,
-                  onTogglePlay: togglePlay
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ProgressSlider,
-                {
-                  currentTime,
-                  duration,
-                  hasError,
-                  onSeek: seekTo,
-                  elementProps
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                VolumeControls,
-                {
-                  currentVolume,
-                  isMuted,
-                  onToggleMute: toggleMute,
-                  onVolumeChange: setVolume,
-                  className: (_f = elementProps == null ? void 0 : elementProps.volumeControls) == null ? void 0 : _f.className
-                }
-              )
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { className: styles.controls, children: [
+          /* @__PURE__ */ jsx(
+            PlayButton,
+            {
+              isPlaying,
+              hasError,
+              onTogglePlay: togglePlay,
+              controlsClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ProgressSlider,
+            {
+              currentTime,
+              duration,
+              hasError,
+              onSeek: seekTo,
+              progressBarClassName: (_f = elementProps == null ? void 0 : elementProps.progressBar) == null ? void 0 : _f.className,
+              timeDisplayClassName: (_g = elementProps == null ? void 0 : elementProps.timeDisplay) == null ? void 0 : _g.className,
+              controlsClassName
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            VolumeControls,
+            {
+              currentVolume,
+              isMuted,
+              onToggleMute: toggleMute,
+              onVolumeChange: setVolume,
+              className: (_h = elementProps == null ? void 0 : elementProps.volumeControls) == null ? void 0 : _h.className,
+              controlsClassName
+            }
+          )
+        ] })
       ]
     }
   );

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

@@ -54,13 +54,16 @@ export interface PlayButtonProps {
     isPlaying: boolean;
     hasError: boolean;
     onTogglePlay: () => void;
+    controlsClassName?: string;
 }
 export interface ProgressSliderProps {
     currentTime: number;
     duration: number;
     hasError: boolean;
     onSeek: (value: number) => void;
-    elementProps?: AudioPlayerElementProps;
+    progressBarClassName?: string;
+    timeDisplayClassName?: string;
+    controlsClassName?: string;
 }
 export interface VolumeControlsProps {
     currentVolume: number;
@@ -68,4 +71,5 @@ export interface VolumeControlsProps {
     onToggleMute: () => void;
     onVolumeChange: (value: number) => void;
     className?: string;
+    controlsClassName?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2566.0",
+  "version": "1.2568.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -79,12 +79,12 @@
     "@vis.gl/react-google-maps": "^1.5.2",
     "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.530",
     "@wix/design-system-illustrations": "^2.28.5",
-    "@wix/sdk": "^1.21.15",
+    "@wix/sdk": "^1.21.16",
     "@wix/services-manager-react": "^0.1.27",
     "@wix/site-service-business-logger": "^1.0.0",
     "@wix/site-service-configuration": "^1.0.1",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.241.0",
+    "@wix/site-ui": "1.243.0",
     "@wix/video": "^1.106.0",
     "@wix/viewer-service-consent-policy": "^1.0.101",
     "@wix/web-bi-logger": "^2.1.29",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "08d4a7da72d04f1cf1b97e2a75458ed6bc7175785107bd5bfe898da7"
+  "falconPackageHash": "3ef9f41f962b58205d7919ef2e11aa1afed1be12ea1471d7e5bd4c60"
 }