elseware-ui 2.2.31 → 2.3.0

package/build/components/data-display/video/youtube-video-player/YoutubeVideoPlayer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@types/react" />
+import React from "react";
+interface YoutubeVideoPlayerProps {
+    videoUrl: string;
+    width?: number;
+    height?: number;
+}
+declare const YoutubeVideoPlayer: React.FC<YoutubeVideoPlayerProps>;
+export default YoutubeVideoPlayer;

package/build/index.d.ts

@@ -17,6 +17,7 @@ import Slider from "./components/data-display/slider/Slider";
 import Table from "./components/data-display/table/Table";
 import Tag from "./components/data-display/tag/Tag";
 import { Typography, Chapter, Section, Paragraph, Quote } from "./components/data-display/typography";
+import YoutubeVideoPlayer from "./components/data-display/video/youtube-video-player/YoutubeVideoPlayer";
 import { Button } from "./components/data-entry/button/Button";
 import Checkbox from "./components/data-entry/checkbox/Checkbox";
 import DateSelector from "./components/data-entry/date-selector/DateSelector";
@@ -58,4 +59,4 @@ import useModal from "./utils/hooks/components/useModal";
 import useDrawer from "./utils/hooks/components/useDrawer";
 import useClickOutside from "./utils/hooks/useClickOutside";
 import useIsMobile from "./utils/hooks/useIsMobile";
-export { Avatar, Badge, TitleBanner, Brand, BarChart, LineChart, PieChart, Chip, Image, CloudinaryImage, Info, List, ListItem, PriceTag, StarRating, StarRatingDistribution, Slider, Table, Tag, Typography, Chapter, Section, Paragraph, Quote, Button, Checkbox, DateSelector, Form, FormResponse, ImageInput, Input, MultiImageInput, InputResponse, Radio, StarRatingInput, Select, Switch, TextArea, Backdrop, Skeleton, Toast, sendToast, Transition, ContentArea, FooterNavbar, Sidebar, Flex, FlexCol, FlexRow, Grid, Layout, Header, Content, Footer, Breadcrumb, BreadcrumbItem, Drawer, DrawerToggler, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemTitle, Link, Menu, MenuGroup, MenuItem, MenuItemTitle, RouteTab, RouteTabs, Modal, Accordion, Card, CardHeader, CardContent, CardFooter, ThemeContext, ThemeProvider, ThemeSwitch, AsyncComponentWrapper, ShowMore, useModal, useDrawer, useClickOutside, useIsMobile, };
+export { Avatar, Badge, TitleBanner, Brand, BarChart, LineChart, PieChart, Chip, Image, CloudinaryImage, Info, List, ListItem, PriceTag, StarRating, StarRatingDistribution, Slider, Table, Tag, Typography, Chapter, Section, Paragraph, Quote, YoutubeVideoPlayer, Button, Checkbox, DateSelector, Form, FormResponse, ImageInput, Input, MultiImageInput, InputResponse, Radio, StarRatingInput, Select, Switch, TextArea, Backdrop, Skeleton, Toast, sendToast, Transition, ContentArea, FooterNavbar, Sidebar, Flex, FlexCol, FlexRow, Grid, Layout, Header, Content, Footer, Breadcrumb, BreadcrumbItem, Drawer, DrawerToggler, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemTitle, Link, Menu, MenuGroup, MenuItem, MenuItemTitle, RouteTab, RouteTabs, Modal, Accordion, Card, CardHeader, CardContent, CardFooter, ThemeContext, ThemeProvider, ThemeSwitch, AsyncComponentWrapper, ShowMore, useModal, useDrawer, useClickOutside, useIsMobile, };

package/build/index.es.js

@@ -33600,6 +33600,19 @@ function Tag(_a) {
             _b)) }, { children: text })));
 }
 
+var getYoutubeEmbedUrl = function (url) {
+    var videoIdMatch = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
+    return videoIdMatch ? "https://www.youtube.com/embed/".concat(videoIdMatch[1]) : "";
+};
+var YoutubeVideoPlayer = function (_a) {
+    var videoUrl = _a.videoUrl, _b = _a.width, width = _b === void 0 ? 750 : _b, _c = _a.height, height = _c === void 0 ? 422 : _c;
+    var embedUrl = getYoutubeEmbedUrl(videoUrl);
+    if (!embedUrl) {
+        return jsxRuntime.jsx(FormResponse, { text: "Invalid YouTube URL", variant: "danger" });
+    }
+    return (jsxRuntime.jsx("div", __assign$1({ className: "flex justify-center" }, { children: jsxRuntime.jsx("iframe", { width: width, height: height, src: embedUrl, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, className: "rounded-lg shadow-lg" }) })));
+};
+
 function InputResponse(_a) {
     var _b;
     var name = _a.name, visibility = _a.visibility, _c = _a.variant, variant = _c === void 0 ? "default" : _c, styles = _a.styles;
@@ -34558,4 +34571,4 @@ var useDrawer = function (defaultVisibility) {
     };
 };
 
-export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, Brand, Breadcrumb, BreadcrumbItem, Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, Content, ContentArea, DateSelector, Drawer, DrawerToggler, Flex, FlexCol, FlexRow, Footer, FooterNavbar, Form, FormResponse, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemTitle, Image$1 as Image, ImageInput, Info, Input, InputResponse, Layout, LineChart, Link, List, ListItem, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, Quote, Radio, RouteTab, RouteTabs, Section, Select, ShowMore, Sidebar, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Transition, Typography, sendToast, useClickOutside, useDrawer, useIsMobile, useModal };
+export { Accordion, AsyncComponentWrapper, Avatar, Backdrop, Badge, BarChart, Brand, Breadcrumb, BreadcrumbItem, Button, Card, CardContent, CardFooter, CardHeader, Chapter, Checkbox, Chip, CloudinaryImage, Content, ContentArea, DateSelector, Drawer, DrawerToggler, Flex, FlexCol, FlexRow, Footer, FooterNavbar, Form, FormResponse, Grid, Header, HeaderNav, HeaderNavGroup, HeaderNavItem, HeaderNavItemTitle, Image$1 as Image, ImageInput, Info, Input, InputResponse, Layout, LineChart, Link, List, ListItem, Menu, MenuGroup, MenuItem, MenuItemTitle, Modal, MultiImageInput, Paragraph, PieChart, PriceTag, Quote, Radio, RouteTab, RouteTabs, Section, Select, ShowMore, Sidebar, Skeleton, Slider, StarRating, StarRatingDistribution, StarRatingInput, Switch, Table, Tag, TextArea, ThemeContext, ThemeProvider, ThemeSwitch, TitleBanner, Toast, Transition, Typography, YoutubeVideoPlayer, sendToast, useClickOutside, useDrawer, useIsMobile, useModal };

package/build/index.js

@@ -33626,6 +33626,19 @@ function Tag(_a) {
             _b)) }, { children: text })));
 }
 
+var getYoutubeEmbedUrl = function (url) {
+    var videoIdMatch = url.match(/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/);
+    return videoIdMatch ? "https://www.youtube.com/embed/".concat(videoIdMatch[1]) : "";
+};
+var YoutubeVideoPlayer = function (_a) {
+    var videoUrl = _a.videoUrl, _b = _a.width, width = _b === void 0 ? 750 : _b, _c = _a.height, height = _c === void 0 ? 422 : _c;
+    var embedUrl = getYoutubeEmbedUrl(videoUrl);
+    if (!embedUrl) {
+        return jsxRuntime.jsx(FormResponse, { text: "Invalid YouTube URL", variant: "danger" });
+    }
+    return (jsxRuntime.jsx("div", __assign$1({ className: "flex justify-center" }, { children: jsxRuntime.jsx("iframe", { width: width, height: height, src: embedUrl, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, className: "rounded-lg shadow-lg" }) })));
+};
+
 function InputResponse(_a) {
     var _b;
     var name = _a.name, visibility = _a.visibility, _c = _a.variant, variant = _c === void 0 ? "default" : _c, styles = _a.styles;
@@ -34663,6 +34676,7 @@ exports.TitleBanner = TitleBanner;
 exports.Toast = Toast;
 exports.Transition = Transition;
 exports.Typography = Typography;
+exports.YoutubeVideoPlayer = YoutubeVideoPlayer;
 exports.sendToast = sendToast;
 exports.useClickOutside = useClickOutside;
 exports.useDrawer = useDrawer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elseware-ui",
-  "version": "2.2.31",
+  "version": "2.3.0",
   "private": false,
   "description": "A modern and customizable React UI component library by elseware Technology.",
   "types": "build/index.d.ts",