@wix/editor-react-components 1.2153.0

package/dist/site/components/AudioPlayer/component.preview.d.ts

@@ -0,0 +1,3 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+export { default } from './AudioPlayer';
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { PlayButtonProps } from '../types';
+export declare const PlayButton: React.FC<PlayButtonProps>;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { ProgressSliderProps } from '../types';
+export declare const ProgressSlider: React.FC<ProgressSliderProps>;

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

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { VolumeControlsProps } from '../types';
+export declare const VolumeControls: React.FC<VolumeControlsProps>;

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

@@ -0,0 +1,87 @@
+export declare const selectors: {
+    readonly root: "audioPlayer";
+    readonly controls: "controls";
+    readonly playButton: "playButton";
+    readonly playIcon: "playIcon";
+    readonly progressBar: "progressBar";
+    readonly progressTrack: "progressTrack";
+    readonly progressFill: "progressFill";
+    readonly volumeControls: "volumeControls";
+    readonly muteButton: "muteButton";
+    readonly volumeSlider: "volumeSlider";
+    readonly volumeTrack: "volumeTrack";
+    readonly timeDisplay: "timeDisplay";
+    readonly audioTitle: "audioTitle";
+    readonly title: "title";
+    readonly artistName: "artistName";
+    readonly coverMedia: "coverMedia";
+};
+export declare const dataDefaults: {
+    readonly loop: false;
+    readonly volume: 100;
+};
+export declare const borderDefaultValue: "0px none rgba(0, 0, 0, 1)";
+export declare const ARIA_LABELS: {
+    readonly playButton: "Play";
+    readonly pauseButton: "Pause";
+    readonly muteButton: "Mute";
+    readonly unmuteButton: "Unmute";
+    readonly progressBar: "Seek";
+    readonly volumeSlider: "Volume";
+    readonly volumeControls: "Volume controls";
+};
+export declare const SEEK_STEP_SECONDS = 5;
+export declare const VOLUME_STEP_PERCENT = 5;
+export declare const DesignStates: {
+    readonly controls: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "audio-player__controls--hover";
+        };
+    };
+};
+export declare const DisplayNames: {
+    root: {
+        displayName: string;
+        cssProperties: {
+            color: string;
+        };
+        cssCustomProperties: {
+            'content-horizontal-alignment': string;
+            'vertical-spacing': string;
+            'audio-title-gap': string;
+        };
+    };
+    controls: {
+        displayName: string;
+        cssCustomProperties: {
+            'progress-fill-color': string;
+            'volume-control-color': string;
+            'time-display-color': string;
+            'play-icon-color': string;
+            'play-icon-size': string;
+        };
+        displayGroups: {
+            fillColors: string;
+            icon: string;
+        };
+    };
+    elements: {
+        coverMedia: string;
+        audioTitle: string;
+        artistName: string;
+        progressBar: string;
+        timeDisplay: string;
+        volumeControls: string;
+    };
+    data: {
+        coverImage: string;
+        displayMode: string;
+        loop: string;
+        volume: string;
+        ariaLabel: string;
+    };
+    displayGroups: {
+        playbackOptions: string;
+    };
+};

package/dist/site/components/AudioPlayer/css.css

@@ -0,0 +1,217 @@
+.root__hYTL- {
+  box-sizing: border-box;
+  --display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  overflow: visible;
+  gap: var(--vertical-spacing);
+  border-color: #000000;
+}
+
+.coverMediaWrapper__4WJv- {
+  position: relative;
+  flex: 1 1 100px;
+  min-height: 10px;
+  overflow: hidden;
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+}
+.coverMediaWrapper__4WJv- > :not(style) {
+  position: absolute;
+  inset: 0;
+}
+
+.audioTitle__sraj4 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--audio-title-gap);
+  align-items: var(--content-horizontal-alignment);
+}
+
+.artistName__m1VFK {
+  opacity: 0.7;
+}
+
+.controls__CVIRI {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 8px;
+}
+
+.playIcon__ix-Gs {
+  width: var(--play-icon-size);
+  height: var(--play-icon-size);
+  color: var(--play-icon-color);
+  cursor: pointer;
+}
+
+.progressBar__JKVlY {
+  flex: 1;
+  min-width: 22px;
+}
+
+.progressTrack__bm5K- {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+  height: 3px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.progressTrack__bm5K-::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--progress-fill-color);
+  opacity: 0.3;
+}
+
+.progressFill__hUBX1 {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: var(--progress-percent, 0%);
+  height: 100%;
+  border-radius: inherit;
+  background-color: var(--progress-fill-color);
+}
+
+.progressThumb__aGPAS {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--progress-fill-color);
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  z-index: 1;
+}
+.progressThumb__aGPAS[data-focus-visible] {
+  opacity: 1;
+  outline: 2px solid Highlight;
+  outline-offset: 2px;
+}
+
+.progressTrack__bm5K-:hover .progressThumb__aGPAS {
+  opacity: 1;
+}
+
+.timeDisplay__Pw7f0 {
+  font: 400 12px/normal sans-serif;
+  color: var(--time-display-color);
+  white-space: nowrap;
+}
+
+.volumeControls__-atKQ {
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  z-index: 1;
+}
+
+.muteIcon__n7APk {
+  width: 20px;
+  height: 20px;
+  color: var(--volume-control-color);
+}
+
+.volumeSliderWrapper__JyspH {
+  position: absolute;
+  width: 100%;
+  inset-block-end: 100%;
+  inset-inline-start: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  pointer-events: none;
+}
+
+.volumeSlider__e8CHL {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.volumeControls__-atKQ:hover .volumeSlider__e8CHL,
+.volumeControls__-atKQ:focus-within .volumeSlider__e8CHL {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.volumeControls__-atKQ:hover .volumeSliderWrapper__JyspH,
+.volumeControls__-atKQ:focus-within .volumeSliderWrapper__JyspH {
+  pointer-events: auto;
+}
+
+.volumeTrack__hQIXf {
+  position: relative;
+  width: 4px;
+  height: 30px;
+  border-radius: 2px;
+  cursor: pointer;
+}
+.volumeTrack__hQIXf::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: var(--volume-control-color);
+  opacity: 0.3;
+}
+
+.volumeFill__BxwCt {
+  position: absolute;
+  inset-inline-start: 0;
+  inset-block-end: 0;
+  width: 100%;
+  height: var(--volume-percent, 0%);
+  border-radius: inherit;
+  background-color: var(--volume-control-color);
+}
+
+.volumeThumb__3tTpu {
+  position: absolute;
+  inset-inline-start: 50%;
+  transform: translateX(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--volume-control-color);
+  cursor: pointer;
+}
+.volumeThumb__3tTpu::before {
+  content: "";
+  position: absolute;
+  inset: -14px;
+  border-radius: 50%;
+}
+.volumeThumb__3tTpu[data-focus-visible] {
+  outline: 2px solid Highlight;
+  outline-offset: 2px;
+}
+
+.seoLink__azehx {
+  display: none;
+}.audioPlayer {
+  --audio-title-gap: 2px;
+  --content-horizontal-alignment: stretch;
+  --vertical-spacing: 8px;
+
+  --play-icon-size: 24px;
+  --play-icon-color: transparent;
+
+  --progress-fill-color: transparent;
+
+  --time-display-color: transparent;
+
+  --volume-control-color: transparent;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}

package/dist/site/components/AudioPlayer/hooks/useAudioPlayer.d.ts

@@ -0,0 +1,13 @@
+import { UseAudioPlayerOptions } from '../types';
+export declare const useAudioPlayer: ({ instanceId, audioUrl, loop, volume, onPlay, onPause, onEnded, onTimeupdate, }: UseAudioPlayerOptions) => {
+    isPlaying: boolean;
+    currentTime: number;
+    duration: number;
+    currentVolume: number;
+    isMuted: boolean;
+    hasError: boolean;
+    togglePlay: () => void;
+    toggleMute: () => void;
+    seekTo: (value: number) => void;
+    setVolume: (value: number) => void;
+};

package/dist/site/components/AudioPlayer/icons/SoundOff.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const SoundOff: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/site/components/AudioPlayer/icons/SoundOn.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const SoundOn: React.FC<React.SVGProps<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as AudioPlayer } from './component';

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

@@ -0,0 +1,6 @@
+'use client';
+
+import AudioPlayer from './component.js';
+
+export { AudioPlayer };
+export default AudioPlayer;

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

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;

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

@@ -0,0 +1,314 @@
+import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, E as ELEMENTS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { a as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { D as DesignStates, a as DisplayNames, s as selectors, b as borderDefaultValue } from "../chunks/constants31.js";
+import manifest$1 from "../Image3/manifest.js";
+import { w as withSpec } from "../chunks/manifest.js";
+import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
+const controlsConfig = {
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    selector: `.${selectors.controls}`,
+    displayName: DisplayNames.controls.displayName,
+    behaviors: {
+      selectable: false,
+      removable: false
+    },
+    cssCustomProperties: {
+      "progress-fill-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.controls.cssCustomProperties["progress-fill-color"],
+        defaultValue: "currentColor"
+      },
+      "volume-control-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.controls.cssCustomProperties["volume-control-color"],
+        defaultValue: "currentColor"
+      },
+      "time-display-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.controls.cssCustomProperties["time-display-color"],
+        defaultValue: "currentColor"
+      },
+      "play-icon-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.controls.cssCustomProperties["play-icon-color"],
+        defaultValue: "currentColor"
+      },
+      "play-icon-size": {
+        cssPropertyType: CSS_PROPERTIES.CSS_DATA_TYPE.length,
+        displayName: DisplayNames.controls.cssCustomProperties["play-icon-size"],
+        defaultValue: "24px"
+      }
+    },
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.controls.hover.displayName,
+        className: DesignStates.controls.hover.className,
+        pseudoClass: NativeStateType.hover
+      })
+    },
+    displayGroups: {
+      fillColors: {
+        displayName: DisplayNames.controls.displayGroups.fillColors,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+        cssDataType: {
+          items: [
+            "progress-fill-color",
+            "volume-control-color",
+            "time-display-color"
+          ]
+        }
+      },
+      icon: {
+        displayName: DisplayNames.controls.displayGroups.icon,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+        cssDataType: {
+          items: ["play-icon-color", "play-icon-size"]
+        }
+      }
+    }
+  }
+};
+const coverMediaConfig = {
+  elementType: ELEMENTS.ELEMENT_TYPE.refElement,
+  refElement: {
+    selector: `.${selectors.coverMedia}`,
+    type: "wixEditorElements.Image",
+    displayName: DisplayNames.elements.coverMedia,
+    behaviors: {
+      selectable: false,
+      removable: true
+    },
+    displayFilters: {
+      data: {
+        hide: [
+          "image",
+          "link",
+          "a11y",
+          "priority",
+          "decorative",
+          "displayMode"
+        ]
+      },
+      cssCustomProperties: {
+        hide: ["mix-blend-mode"]
+      }
+    },
+    data: {
+      image: { disableEditing: true }
+    }
+  }
+};
+const innerElement = (selector, displayName, displayDefault = "block") => ({
+  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+  inlineElement: {
+    selector,
+    displayName,
+    behaviors: {
+      selectable: false,
+      removable: true
+    },
+    cssProperties: {
+      display: {
+        defaultValue: displayDefault,
+        display: {
+          displayValues: [
+            CSS_PROPERTIES.DISPLAY_VALUE.none,
+            CSS_PROPERTIES.DISPLAY_VALUE[displayDefault]
+          ]
+        }
+      }
+    }
+  }
+});
+const manifest = {
+  id: "4cc1e6b6-a52c-4aa1-b464-10a0e49b217f",
+  type: "wixEditorElements.AudioPlayer",
+  description: "A component that plays a single audio file with customizable playback controls, allowing users to play, pause, adjust volume, and seek through audio content",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 135
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 135
+      }
+    }
+  },
+  editorElement: {
+    selector: `.${selectors.root}`,
+    displayName: DisplayNames.root.displayName,
+    archetype: Archetype.Audio,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    interactions: {
+      triggers: [
+        INTERACTIONS.TRIGGER_TYPE.click,
+        INTERACTIONS.TRIGGER_TYPE.viewEnter
+      ]
+    },
+    cssProperties: {
+      background: {},
+      font: {},
+      color: {
+        displayName: DisplayNames.root.cssProperties.color
+      },
+      borderInlineStart: { defaultValue: borderDefaultValue },
+      borderInlineEnd: { defaultValue: borderDefaultValue },
+      borderTop: { defaultValue: borderDefaultValue },
+      borderBottom: { defaultValue: borderDefaultValue },
+      borderStartStartRadius: {},
+      borderStartEndRadius: {},
+      borderEndStartRadius: {},
+      borderEndEndRadius: {},
+      boxShadow: {},
+      paddingTop: {},
+      paddingBottom: {},
+      paddingInlineStart: {},
+      paddingInlineEnd: {}
+    },
+    cssCustomProperties: {
+      "content-horizontal-alignment": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.justifyContent,
+        displayName: DisplayNames.root.cssCustomProperties["content-horizontal-alignment"]
+      },
+      "vertical-spacing": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties["vertical-spacing"],
+        defaultValue: "8px"
+      },
+      "audio-title-gap": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+        displayName: DisplayNames.root.cssCustomProperties["audio-title-gap"],
+        defaultValue: "2px"
+      }
+    },
+    data: {
+      audio: {
+        dataType: DATA.DATA_TYPE.audio
+      },
+      coverImage: {
+        dataType: DATA.DATA_TYPE.image,
+        displayName: DisplayNames.data.coverImage,
+        [DATA.DATA_TYPE.image]: {
+          category: "IMAGE"
+        }
+      },
+      displayMode: {
+        ...manifest$1.editorElement.data.displayMode,
+        displayName: DisplayNames.data.displayMode,
+        defaultValue: "fill"
+      },
+      loop: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.data.loop,
+        defaultValue: false
+      },
+      volume: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.data.volume,
+        defaultValue: 100,
+        [DATA.DATA_TYPE.number]: {
+          min: "0",
+          max: "100"
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [
+            DATA.A11Y_ATTRIBUTES.role,
+            DATA.A11Y_ATTRIBUTES.tabIndex,
+            DATA.A11Y_ATTRIBUTES.ariaLabel,
+            DATA.A11Y_ATTRIBUTES.ariaLabelledby,
+            DATA.A11Y_ATTRIBUTES.ariaLive,
+            DATA.A11Y_ATTRIBUTES.ariaHidden
+          ]
+        }
+      },
+      onPlay: {
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {}
+      },
+      onPause: {
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {}
+      },
+      onEnded: {
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {}
+      },
+      onTimeupdate: {
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {}
+      },
+      ...manifestMouseHover()
+    },
+    displayGroups: {
+      coverArtGroup: {
+        displayName: DisplayNames.elements.coverMedia,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["coverImage", "displayMode"]
+        }
+      },
+      playbackGroup: {
+        displayName: DisplayNames.displayGroups.playbackOptions,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: ["loop", "volume"]
+        }
+      }
+    },
+    elements: {
+      controls: controlsConfig,
+      coverArt: coverMediaConfig,
+      audioTitle: innerElement(
+        `.${selectors.title}`,
+        DisplayNames.elements.audioTitle
+      ),
+      artistName: innerElement(
+        `.${selectors.artistName}`,
+        DisplayNames.elements.artistName
+      ),
+      progressBar: innerElement(
+        `.${selectors.progressBar}`,
+        DisplayNames.elements.progressBar
+      ),
+      timeDisplay: innerElement(
+        `.${selectors.timeDisplay}`,
+        DisplayNames.elements.timeDisplay
+      ),
+      volumeControls: innerElement(
+        `.${selectors.volumeControls}`,
+        DisplayNames.elements.volumeControls,
+        "flex"
+      )
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/AudioPlayer/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/AudioPlayer",
+      dependencies: {
+        componentDependencies: ["@wix/editor-react-components/Image3"],
+        serviceDependencies: ["@wix/viewer-service-environment"]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/AudioPlayer/component.preview.tsx"
+    }
+  }
+};
+export {
+  manifest as default
+};