@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
67 lines (65 loc) • 2.83 kB
JavaScript
import qs from 'qs';
import themed from '@dr.pogodin/react-themes';
import Throbber from "../Throbber/index.js";
const baseTheme = {
"context": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___context___Pa7GiX",
"ad": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___ad___NikZ57",
"hoc": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___hoc___FydyFQ",
"container": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___container___pQTzJV",
"video": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-base___video___iFTALT"
};
const throbberTheme = {
"context": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___context___0Piy3R",
"ad": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___ad___GD-lgk",
"hoc": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___hoc___T5TGzT",
"container": "-dr-pogodin-react-utils___build-web-shared-components-YouTubeVideo-throbber___container___IgN6Uf"
};
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