@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ISocialPlayerVimeoProps } from './SocialPlayerVimeo.types';
+import { EditorElement } from '@wix/component-protocol/schema';
+interface ManifestOverrideParams {
+    getCurrentProps: () => ISocialPlayerVimeoProps;
+}
+export default function SocialPlayerVimeoPreview(props: ISocialPlayerVimeoProps): React.JSX.Element;
+export declare const resolveManifestOverrides: ({ getCurrentProps, }: ManifestOverrideParams) => Partial<EditorElement> | undefined;
+export {};

package/dist/site/components/SocialPlayerVimeo/components/SocialPlayerVimeo.d.ts

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

package/dist/site/components/SocialPlayerVimeo/components/hooks/useVimeoPlayer.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const useVimeoPlayer: ({ url, autoPlay, loop, mute, enabledTitle, startTime, endTime, ref, }: {
+    url?: string | undefined;
+    autoPlay?: boolean | undefined;
+    loop?: boolean | undefined;
+    mute?: boolean | undefined;
+    enabledTitle?: boolean | undefined;
+    startTime?: number | undefined;
+    endTime?: number | undefined;
+    ref?: import('react').RefObject<HTMLDivElement> | undefined;
+}) => void;

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

@@ -0,0 +1,2 @@
+export declare const SocialPlayerVimeoViewerType: "wixui.SocialPlayerVimeo";
+export declare const VIMEO_OEMBED_API = "https://vimeo.com/api/oembed.json";

package/dist/site/components/SocialPlayerVimeo/css.css

@@ -0,0 +1,43 @@
+.root__KwlWp {
+  --box-shadow: initial;
+  --border-color: black;
+  --border-width: initial;
+  --border-style: initial;
+  --borderStartStartRadius: initial;
+  --borderStartEndRadius: initial;
+  --borderEndStartRadius: initial;
+  --borderEndEndRadius: initial;
+  width: 100%;
+  height: 100%;
+  container-type: size;
+}
+
+.playerWrapper__6pWGG {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alignmentWrapper__-evwX {
+  box-sizing: border-box;
+  width: min(100%, 100cqh * (var(--aspect-ratio)));
+  height: min(100%, 100cqw / (var(--aspect-ratio)));
+  visibility: var(--visibility, hidden);
+  overflow: clip;
+  box-shadow: var(--box-shadow, none);
+  outline-width: var(--border-width, 0);
+  outline-style: var(--border-style, solid);
+  outline-color: var(--border-color, transparent);
+  border-start-start-radius: var(--borderStartStartRadius, 0);
+  border-start-end-radius: var(--borderStartEndRadius, 0);
+  border-end-start-radius: var(--borderEndStartRadius, 0);
+  border-end-end-radius: var(--borderEndEndRadius, 0);
+}
+
+.root__KwlWp iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}

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

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

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

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

package/dist/site/components/SocialPlayerVimeo/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/SocialPlayerVimeo/manifest.js

@@ -0,0 +1,184 @@
+import { I as INTERACTIONS, C as CSS_PROPERTIES, D as DATA, b as DISPLAY_GROUPS, L as LAYOUT, a as ACTIONS, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+const manifest = {
+  id: "8ec522c3-d8dd-43d8-9f07-1c4c1bb09d80",
+  type: "wixEditorElements.VimeoPlayer",
+  description: "Embeds Vimeo videos, allowing visitors to watch them directly on a web page",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 640
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 360
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/SocialPlayerVimeo/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/SocialPlayerVimeo"
+    },
+    editor: {
+      componentUrl: "./site/components/SocialPlayerVimeo/component.preview.tsx"
+    },
+    sdk: {
+      url: "./site/components/SocialPlayerVimeo/sdk.ts"
+    }
+  },
+  editorElement: {
+    selector: ".socialPlayerVimeo",
+    displayName: "Vimeo Player",
+    archetype: Archetype.Social,
+    customActions: {
+      replaceVideo: {
+        displayName: "Replace Video",
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.panel,
+          panel: {
+            panelType: ACTIONS.PANEL_TYPE.panelId,
+            panelId: "b8c4d9e1-5f3a-4b6c-9d0e-2f3a4b5c6d7e"
+          }
+        }
+      }
+    },
+    cssProperties: {
+      boxShadow: {}
+    },
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical
+    },
+    displayGroups: {
+      borderGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+        border: {
+          color: "border-color",
+          width: "border-width",
+          style: "border-style"
+        }
+      }
+    },
+    data: {
+      url: {
+        dataType: DATA.DATA_TYPE.webUrl,
+        displayName: "Vimeo link"
+      },
+      description: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: "Description",
+        [DATA.DATA_TYPE.text]: {
+          maxLength: 256
+        }
+      },
+      autoPlay: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Play automatically"
+      },
+      loop: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Loop video"
+      },
+      mute: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Mute on play"
+      },
+      enabledControls: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Show controls"
+      },
+      enabledTitle: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: "Show title"
+      },
+      startTime: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: "Start time"
+      },
+      endTime: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: "End time"
+      }
+    },
+    cssCustomProperties: {
+      "box-shadow": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        defaultValue: "none"
+      },
+      "border-color": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+        displayName: "Border Color"
+      },
+      "border-width": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+        displayName: "Border Width"
+      },
+      "border-style": {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStyle,
+        displayName: "Border Style"
+      },
+      borderBottom: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderBottom,
+        defaultValue: "0px"
+      },
+      borderInlineStart: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineStart,
+        defaultValue: "0px"
+      },
+      borderInlineEnd: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderInlineEnd,
+        defaultValue: "0px"
+      },
+      borderTop: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderTop,
+        defaultValue: "0px"
+      },
+      borderStartStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
+        defaultValue: "0px"
+      },
+      borderStartEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
+        defaultValue: "0px"
+      },
+      borderEndStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
+        defaultValue: "0px"
+      },
+      borderEndEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
+        defaultValue: "0px"
+      }
+    },
+    displayFilters: {
+      data: {
+        hide: ["url", "startTime", "endTime", "enabledControls", "description"]
+      },
+      cssProperties: {
+        hide: ["boxShadow"]
+      },
+      cssCustomProperties: {
+        hide: [
+          "borderInlineStart",
+          "borderInlineEnd",
+          "borderTop",
+          "borderBottom"
+        ]
+      }
+    },
+    helpArticle: {
+      kbId: "39a8c672-5bf5-4a39-bfd8-755db3f8f22c"
+    },
+    interactions: {
+      triggers: [
+        INTERACTIONS.TRIGGER_TYPE.viewEnter,
+        INTERACTIONS.TRIGGER_TYPE.viewProgress,
+        INTERACTIONS.TRIGGER_TYPE.pointerMove
+      ],
+      effectGroups: [INTERACTIONS.EFFECT_GROUP.UNKNOWN_EFFECT_GROUP]
+    }
+  }
+};
+export {
+  manifest as default
+};

package/dist/site/components/SocialPlayerVimeo/panels/settings/extension.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    type: string;
+};
+export default _default;

package/dist/site/components/SocialPlayerVimeo/panels/settings/panel.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+declare const VimeoSettingsPanel: () => React.JSX.Element;
+export default VimeoSettingsPanel;

package/dist/site/components/SocialPlayerVimeo/sdk.d.ts

@@ -0,0 +1,5 @@
+import { CorvidSDKFactory } from '../../../types/vendored/editor-elements-types-corvid';
+export declare const SOCIAL_PLAYER_VIMEO_SDK_TYPE = "$w.VimeoPlayer";
+export declare const createSocialPlayerVimeoSdk: CorvidSDKFactory;
+export declare const SocialPlayerVimeoSdk: CorvidSDKFactory<object, object, object>;
+export default SocialPlayerVimeoSdk;

package/dist/site/components/SocialPlayerVimeo/sdk.js

@@ -0,0 +1,69 @@
+import { c as composeSDKFactories } from "../chunks/composeSDKFactories.js";
+import { e as elementSdkFactory } from "../chunks/elementSdk.js";
+const SOCIAL_PLAYER_VIMEO_SDK_TYPE = "$w.VimeoPlayer";
+const createSocialPlayerVimeoSdk = (api) => {
+  const { props, setProps } = api;
+  return {
+    get type() {
+      return SOCIAL_PLAYER_VIMEO_SDK_TYPE;
+    },
+    get src() {
+      return props.url || "";
+    },
+    set src(value) {
+      setProps({ url: value });
+    },
+    get description() {
+      return props.description || "";
+    },
+    set description(value) {
+      setProps({ description: value });
+    },
+    get autoPlay() {
+      return props.autoPlay ?? false;
+    },
+    set autoPlay(value) {
+      setProps({ autoPlay: value });
+    },
+    get loop() {
+      return props.loop ?? false;
+    },
+    set loop(value) {
+      setProps({ loop: value });
+    },
+    get isMuted() {
+      return props.mute ?? false;
+    },
+    set isMuted(value) {
+      setProps({ mute: value });
+    },
+    get startTime() {
+      return props.startTime ?? 0;
+    },
+    set startTime(value) {
+      setProps({ startTime: value });
+    },
+    get endTime() {
+      return props.endTime ?? 0;
+    },
+    set endTime(value) {
+      setProps({ endTime: value });
+    },
+    get showTitle() {
+      return props.enabledTitle ?? false;
+    },
+    set showTitle(value) {
+      setProps({ enabledTitle: value });
+    }
+  };
+};
+const SocialPlayerVimeoSdk = composeSDKFactories([
+  elementSdkFactory(SOCIAL_PLAYER_VIMEO_SDK_TYPE),
+  createSocialPlayerVimeoSdk
+]);
+export {
+  SOCIAL_PLAYER_VIMEO_SDK_TYPE,
+  SocialPlayerVimeoSdk,
+  createSocialPlayerVimeoSdk,
+  SocialPlayerVimeoSdk as default
+};

package/dist/site/components/SocialPlayerYoutube/SocialPlayerYoutube.semanticClassNames.d.ts

@@ -0,0 +1,4 @@
+declare const semanticClassNames: {
+    readonly root: "social-player-youtube";
+};
+export default semanticClassNames;

package/dist/site/components/SocialPlayerYoutube/component.d.ts

@@ -0,0 +1,3 @@
+import { SocialPlayerYoutubeProps } from './components/SocialPlayerYoutube';
+import { default as React } from 'react';
+export default function (props: SocialPlayerYoutubeProps): React.JSX.Element;

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

@@ -0,0 +1,211 @@
+import { jsx } from "react/jsx-runtime";
+import { f as formatClassNames } from "../chunks/classNames.js";
+import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { c as clsx } from "../chunks/clsx.js";
+import * as React from "react";
+import { useMemo } from "react";
+const semanticClassNames = {
+  root: "social-player-youtube"
+};
+const TestIds = {
+  viewer: {
+    iframe: "SocialPlayerYoutube-iframe"
+  }
+};
+const root = "root__vRb0c";
+const alignmentWrapper = "alignmentWrapper__U4DY9";
+const styles = {
+  root,
+  alignmentWrapper
+};
+const shortsPathPrefix = "/shorts/";
+const embedPathPrefix = "/embed/";
+const directPathPrefix = "/v/";
+const prefixes = [shortsPathPrefix, embedPathPrefix, directPathPrefix];
+const tryParseUrl = (raw) => {
+  try {
+    return new URL(raw);
+  } catch (err) {
+    return null;
+  }
+};
+const parseYoutubeUrl = (rawUrl) => {
+  if (!rawUrl) {
+    return null;
+  }
+  const url = tryParseUrl(rawUrl);
+  if (!url) {
+    return null;
+  }
+  if (url.host === "youtu.be") {
+    const videoId = url.pathname.slice(1);
+    return { videoId, isShorts: false };
+  }
+  if (url.host === "studio.youtube.com") {
+    const videoId = url.pathname.split("/")[2] ?? null;
+    return videoId ? { videoId, isShorts: false } : null;
+  }
+  if (url.host === "www.youtube.com" || url.host === "youtube.com" || url.host === "music.youtube.com") {
+    if (url.pathname.startsWith(shortsPathPrefix)) {
+      const videoId = url.pathname.slice(shortsPathPrefix.length);
+      return { videoId, isShorts: true };
+    }
+    const knownPrefix = prefixes.find(
+      (prefix) => url.pathname.startsWith(prefix) && prefix !== shortsPathPrefix
+    );
+    if (knownPrefix) {
+      const videoId = url.pathname.slice(knownPrefix.length);
+      return { videoId, isShorts: false };
+    }
+    if (url.pathname.startsWith("/watch")) {
+      const videoId = url.searchParams.get("v");
+      return videoId ? { videoId, isShorts: false } : null;
+    }
+  }
+  return null;
+};
+const getIframeUrl = (videoId, options) => {
+  const {
+    mute,
+    autoPlay,
+    loop,
+    enabledCaptions,
+    enabledControls,
+    startTime,
+    endTime
+  } = options;
+  const youtubeUrl = new URL(`https://www.youtube.com/embed/${videoId}`);
+  const paramClone = {
+    enablejsapi: 0,
+    // TODO: Add origin?
+    controls: enabledControls ? 1 : 0,
+    mute: autoPlay || mute ? 1 : 0,
+    loop: loop ? 1 : 0,
+    autoplay: autoPlay ? 1 : 0,
+    cc_load_policy: enabledCaptions ? 1 : 0,
+    start: startTime,
+    end: endTime,
+    playlist: videoId
+  };
+  for (const [key, value] of Object.entries(paramClone)) {
+    if (value === void 0 || value === null) {
+      continue;
+    }
+    youtubeUrl.searchParams.append(key, value.toString());
+  }
+  return youtubeUrl.toString();
+};
+const useYoutubeIframe = (props) => {
+  const {
+    url,
+    mute,
+    autoPlay,
+    loop,
+    enabledCaptions,
+    enabledControls,
+    startTime,
+    endTime
+  } = props;
+  const videoInfo = useMemo(() => {
+    return parseYoutubeUrl(url ?? "");
+  }, [url]);
+  const iframeUrl = useMemo(() => {
+    if (!videoInfo) {
+      return "";
+    }
+    return getIframeUrl(videoInfo.videoId, {
+      mute,
+      autoPlay,
+      loop,
+      enabledCaptions,
+      enabledControls,
+      startTime,
+      endTime
+    });
+  }, [
+    videoInfo,
+    mute,
+    autoPlay,
+    loop,
+    enabledCaptions,
+    enabledControls,
+    startTime,
+    endTime
+  ]);
+  const aspectRatioStyles = useMemo(() => {
+    if (!videoInfo) {
+      return {};
+    }
+    const aspectRatio = videoInfo.isShorts ? 9 / 16 : 16 / 9;
+    return { "--aspect-ratio": aspectRatio };
+  }, [videoInfo]);
+  return { iframeUrl, aspectRatioStyles };
+};
+const SocialPlayerYoutube = (props) => {
+  const {
+    id,
+    className,
+    customClassNames = [],
+    description,
+    url,
+    mute = false,
+    autoPlay = false,
+    loop = false,
+    enabledCaptions = false,
+    enabledControls = false,
+    startTime = 0,
+    endTime = 0
+  } = props;
+  const playerElement = React.useRef(null);
+  const { iframeUrl, aspectRatioStyles } = useYoutubeIframe({
+    url,
+    mute,
+    autoPlay,
+    loop,
+    enabledCaptions,
+    enabledControls,
+    startTime,
+    endTime
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: clsx(
+        className,
+        styles.root,
+        formatClassNames(semanticClassNames.root, ...customClassNames)
+      ),
+      ...getDataAttributes(props),
+      children: /* @__PURE__ */ jsx("div", { className: styles.alignmentWrapper, children: /* @__PURE__ */ jsx(
+        "iframe",
+        {
+          "data-testid": TestIds.viewer.iframe,
+          title: description,
+          style: aspectRatioStyles,
+          src: iframeUrl,
+          ref: playerElement,
+          allowFullScreen: true
+        }
+      ) })
+    }
+  );
+};
+function component(props) {
+  const {
+    className,
+    url = "https://www.youtube.com/watch?v=J_aW-ytd2P4",
+    ...restProps
+  } = props;
+  return /* @__PURE__ */ jsx(
+    SocialPlayerYoutube,
+    {
+      className: `${className} socialPlayerYoutube`,
+      url,
+      ...restProps
+    }
+  );
+}
+export {
+  component as default
+};

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

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { SocialPlayerYoutubeProps } from './components/SocialPlayerYoutube';
+import { EditorElement } from '@wix/component-protocol/schema';
+interface ManifestOverrideParams {
+    getCurrentProps: () => SocialPlayerYoutubeProps;
+}
+export default function SocialPlayerYoutubePreview(props: SocialPlayerYoutubeProps): React.JSX.Element;
+export declare const resolveManifestOverrides: ({ getCurrentProps, }: ManifestOverrideParams) => Partial<EditorElement> | undefined;
+export {};

package/dist/site/components/SocialPlayerYoutube/components/SocialPlayerYoutube.d.ts

@@ -0,0 +1,5 @@
+import { SocialPlayerSharedProps } from '../../SocialPlayerShared/SocialPlayersShared.types';
+import * as React from 'react';
+export type SocialPlayerYoutubeProps = SocialPlayerSharedProps;
+declare const SocialPlayerYoutube: React.FC<SocialPlayerYoutubeProps>;
+export default SocialPlayerYoutube;

package/dist/site/components/SocialPlayerYoutube/components/hooks/useYoutubeIframe.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const useYoutubeIframe: (props: {
+    url?: string;
+    mute: boolean;
+    autoPlay: boolean;
+    loop: boolean;
+    enabledCaptions: boolean;
+    enabledControls: boolean;
+    startTime: number;
+    endTime: number;
+}) => {
+    iframeUrl: string;
+    aspectRatioStyles: import('react').CSSProperties;
+};

package/dist/site/components/SocialPlayerYoutube/components/utils/getIframeUrl.d.ts

@@ -0,0 +1,2 @@
+import { SocialPlayerSharedData } from '../../../SocialPlayerShared/SocialPlayersShared.types';
+export declare const getIframeUrl: (videoId: string, options: Pick<SocialPlayerSharedData, 'mute' | 'autoPlay' | 'loop' | 'enabledCaptions' | 'enabledControls' | 'startTime' | 'endTime'>) => string;

package/dist/site/components/SocialPlayerYoutube/components/utils/parseYoutubeUrl.d.ts

@@ -0,0 +1,5 @@
+export interface YoutubeVideoInfo {
+    videoId: string;
+    isShorts: boolean;
+}
+export declare const parseYoutubeUrl: (rawUrl: string) => YoutubeVideoInfo | null;

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

@@ -0,0 +1,23 @@
+export declare const SocialPlayerYoutubeViewerType: "wixui.SocialPlayerYoutube";
+export declare const helpIds: {
+    settingsPanel: string;
+};
+export declare const TestIds: {
+    viewer: {
+        iframe: string;
+    };
+};
+export declare const translationKeys: {
+    readonly settingsPanel: {
+        readonly title: "SocialPlayerYoutube.Settings_Title";
+        readonly urlLabel: "SocialPlayerYoutube.Url_Label";
+        readonly urlPlaceholder: "SocialPlayerYoutube.Url_Placeholder";
+        readonly autoPlayLabel: "SocialPlayerYoutube.AutoPlay_Label";
+        readonly enabledControlsLabel: "SocialPlayerYoutube.EnabledControls_Label";
+        readonly enabledCaptionsLabel: "SocialPlayerYoutube.EnabledCaptions_Label";
+        readonly muteLabel: "SocialPlayerYoutube.Mute_Label";
+    };
+    readonly designPanel: {
+        readonly title: "SocialPlayerYoutube_Design_Button_Header";
+    };
+};