@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
56 lines (54 loc) • 1.91 kB
JavaScript
import qs from 'qs';
import themed from '@dr.pogodin/react-themes';
import Throbber from "../Throbber";
import baseTheme from "./base.scss";
import throbberTheme from "./throbber.scss";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
* A component for embeding a YouTube video.
* @param [props] Component properties.
* @param [props.autoplay] If `true` the video will start to play
* automatically once loaded.
* @param [props.src] URL of the video to play. Can be in any of
* the following formats, and keeps any additional query parameters understood
* by the YouTube IFrame player:
* - `https://www.youtube.com/watch?v=NdF6Rmt6Ado`
* - `https://youtu.be/NdF6Rmt6Ado`
* - `https://www.youtube.com/embed/NdF6Rmt6Ado`
* @param [props.theme] _Ad hoc_ theme.
* @param [props.title] The `title` attribute to add to the player
* IFrame.
*/
const YouTubeVideo = ({
autoplay,
src,
theme,
title
}) => {
const srcParts = src.split('?');
let [url] = srcParts;
const [, queryString] = srcParts;
const query = queryString ? qs.parse(queryString) : {};
const videoId = query.v ?? url?.match(/\/([a-zA-Z0-9-_]*)$/)?.[1];
url = `https://www.youtube.com/embed/${videoId}`;
delete query.v;
query.autoplay = autoplay ? '1' : '0';
url += `?${qs.stringify(query)}`;
// TODO: https://developers.google.com/youtube/player_parameters
// More query parameters can be exposed via the component props.
return /*#__PURE__*/_jsxs("div", {
className: theme.container,
children: [/*#__PURE__*/_jsx(Throbber, {
theme: throbberTheme
}), /*#__PURE__*/_jsx("iframe", {
// eslint-disable-line react/iframe-missing-sandbox
allow: "autoplay",
allowFullScreen: true,
className: theme.video,
src: url,
title: title
})]
});
};
export default themed(YouTubeVideo, 'YouTubeVideo', baseTheme);
//# sourceMappingURL=index.js.map