@wistia/wistia-player-react/dist/mjs/WistiaPlayerWrapper-E2P5ZWUP.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,
  isFunction,
  isString,
  isValidEmbedOption,
  wistiaPlayerStyleBlock
} from "./chunk-FSLSW5KG.mjs";

// src/WistiaPlayerWrapper.tsx
import { forwardRef, useEffect, useRef, useState, Fragment } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var stringifyBooleans = (obj) => {
  const result = {};
  Object.entries(obj).forEach(([key, value]) => {
    if (typeof value === "boolean") {
      result[key] = String(value);
    } else {
      result[key] = value;
    }
  });
  return result;
};
var WistiaPlayerWrapper = forwardRef(
  (props, ref) => {
    const { aspect, children, className, embedHost, id, mediaId, roundedPlayer, swatch, style } = props;
    const mergedEmbedHost = getMergedEmbedOption(mediaId, "embedHost", embedHost ?? void 0);
    const finalEmbedHost = isString(mergedEmbedHost) ? mergedEmbedHost : "fast.wistia.com";
    const player = useRef(null);
    const [swatchAspectRatio, setSwatchAspectRatio] = useState(aspect);
    const [isWistiaPlayerDefined, setIsWistiaPlayerDefined] = useState(false);
    useEffect(() => {
      if (swatch !== false && swatchAspectRatio === void 0 && isString(finalEmbedHost)) {
        void getSwatchAspectRatio(mediaId, finalEmbedHost).then((ratio) => {
          setSwatchAspectRatio(ratio);
        });
      }
      void import("./wistia-player-FIDHPNDO.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);
        if (isFunction(value)) {
          eventProps[formattedKey] = value;
        }
      } else if (isValidEmbedOption(value)) {
        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: String(true),
          ...stringifyBooleans(embedOptionProps),
          children
        },
        id ?? mediaId
      )
    ] });
  }
);
export {
  WistiaPlayerWrapper
};