@wistia/wistia-player-react/dist/mjs/WistiaPlayerWrapper-KWZJK262.mjs

An embeddable wistia-player web component and React wrapper to add responsive, lightweight, and SEO-friendly videos to your site.

"use client";
import {
  camelCaseToKebabCase,
  getMergedEmbedOption,
  getSwatchAspectRatio,
  wistiaPlayerStyleBlock
} from "./chunk-KUPUTXLJ.mjs";

// src/WistiaPlayerWrapper.tsx
import { forwardRef, useEffect, useRef, useState, Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var WistiaPlayerWrapper = forwardRef(
  (props, ref) => {
    const { aspect, className, embedHost, id, mediaId, roundedPlayer, swatch, style } = props;
    const finalEmbedHost = getMergedEmbedOption(mediaId, "embedHost", embedHost ?? void 0);
    const player = useRef(null);
    const [swatchAspectRatio, setSwatchAspectRatio] = useState(aspect);
    const [isWistiaPlayerDefined, setIsWistiaPlayerDefined] = useState(false);
    useEffect(() => {
      if (swatch !== false && swatchAspectRatio === void 0) {
        void getSwatchAspectRatio(mediaId, finalEmbedHost).then((ratio) => {
          setSwatchAspectRatio(ratio);
        });
      }
      void import("./wistia-player-PSOGZFTV.mjs");
      void customElements.whenDefined("wistia-player").then(() => {
        setIsWistiaPlayerDefined(true);
      });
    }, []);
    const eventProps = {};
    const embedOptionProps = {};
    Object.entries(props).forEach(([key, value]) => {
      if (key.startsWith("on") && key[2] === key[2].toUpperCase()) {
        const formattedKey = camelCaseToKebabCase(key).slice(3);
        eventProps[formattedKey] = value;
      } else {
        embedOptionProps[camelCaseToKebabCase(key)] = value;
      }
    });
    Object.entries(eventProps).forEach(([event, callback]) => {
      useEffect(() => {
        const playerRef = player.current;
        playerRef?.addEventListener(event, callback);
        return () => {
          playerRef?.removeEventListener(event, callback);
        };
      }, [callback, isWistiaPlayerDefined]);
    });
    const shouldDisplaySwatch = swatchAspectRatio !== void 0;
    const styleBlock = wistiaPlayerStyleBlock({
      mediaId,
      embedHost: finalEmbedHost,
      aspect: swatchAspectRatio,
      shouldLoadSwatch: swatch,
      roundedPlayer
    });
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      shouldDisplaySwatch && /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: styleBlock } }),
      /* @__PURE__ */ jsx(
        "wistia-player",
        {
          ref: (node) => {
            player.current = node;
            if (typeof ref === "function") {
              ref(node);
            } else if (ref !== null) {
              ref.current = node;
            }
          },
          id: id ?? void 0,
          "media-id": mediaId,
          class: className,
          style,
          react: true,
          ...embedOptionProps
        },
        id ?? mediaId
      )
    ] });
  }
);
export {
  WistiaPlayerWrapper
};