@wistia/wistia-player-react
Version:
An embeddable wistia-player web component and React wrapper to add responsive, lightweight, and SEO-friendly videos to your site.
72 lines (67 loc) • 2.23 kB
JavaScript
// src/utils/getMergedEmbedOption.ts
var getMergedEmbedOption = (mediaId, optionKey, optionValue) => {
let finalEmbedOption = optionValue;
if (typeof window === "undefined") {
return finalEmbedOption;
}
if (window.wistiaOptions?._all?.[optionKey] !== void 0) {
finalEmbedOption = window.wistiaOptions._all[optionKey];
}
const mediaIdOptions = window.wistiaOptions?.[mediaId];
if (mediaIdOptions !== void 0) {
const mediaIdOptionValue = mediaIdOptions[optionKey];
if (optionValue !== void 0) {
finalEmbedOption = mediaIdOptionValue;
}
}
return finalEmbedOption;
};
// src/utils/camelCaseToKebabCase.ts
var camelCaseToKebabCase = (str) => {
return str.replace(
/[A-Z]+(?![a-z])|[A-Z]/g,
(letter, idx) => (idx !== 0 ? "-" : "") + letter.toLowerCase()
);
};
// src/utils/swatch.ts
var getSwatchMetaData = async (url) => {
const swatch = new Image();
swatch.src = url;
await swatch.decode();
return swatch;
};
var swatchUrl = (mediaId, embedHost) => `https://${embedHost}/embed/medias/${mediaId}/swatch`;
var getSwatchAspectRatio = async (mediaId, embedHost = "fast.wistia.com") => {
const swatchImg = await getSwatchMetaData(swatchUrl(mediaId, embedHost));
const { naturalHeight, naturalWidth } = swatchImg;
return naturalWidth / naturalHeight;
};
var wistiaPlayerStyleBlock = ({
mediaId,
embedHost = "fast.wistia.com",
aspect = 1.7,
shouldLoadSwatch = true,
roundedPlayer = 0
}) => {
const CSSProperties = {
background: shouldLoadSwatch ? `center / contain no-repeat url(${swatchUrl(mediaId, embedHost)})` : void 0,
borderRadius: `${roundedPlayer}px`,
display: "block",
filter: "blur(5px)",
paddingTop: `${100 / aspect}%`
};
return `
wistia-player[media-id='${mediaId}']:not(:defined) {
${Object.entries(CSSProperties).map(([key, value]) => `${camelCaseToKebabCase(key)}: ${value};`).join("\r\n")}
}
wistia-player[media-id='${mediaId}']:state(--initializing) {
${Object.entries(CSSProperties).map(([key, value]) => `${camelCaseToKebabCase(key)}: ${value};`).join("\r\n")}
}
`;
};
export {
getMergedEmbedOption,
camelCaseToKebabCase,
getSwatchAspectRatio,
wistiaPlayerStyleBlock
};