@dr.pogodin/react-utils/build/production/shared/components/YouTubeVideo/index.js

Collection of generic ReactJS components and utils

import qs from"qs";import themed from"@dr.pogodin/react-themes";import Throbber from"../Throbber/index.js";const baseTheme={"context":"Pa7GiX","ad":"NikZ57","hoc":"FydyFQ","container":"pQTzJV","video":"iFTALT"};const throbberTheme={"context":"_0Piy3R","ad":"GD-lgk","hoc":"T5TGzT","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