@onesy/ui-react 1.0.33 → 1.0.35

package/Medias/Medias.js

@@ -143,6 +143,9 @@ const useStyle = (0, style_react_1.style)(theme => ({
     aspectRatioTiktok: {
         aspectRatio: '3 / 6.84',
         width: '324px'
+    },
+    customEmbed: {
+        maxWidth: '750px'
     }
 }), { name: 'onesy-Medias' });
 const Medias = react_1.default.forwardRef((props_, ref) => {
@@ -203,32 +206,52 @@ const Medias = react_1.default.forwardRef((props_, ref) => {
     }, [values]);
     const getLink = react_1.default.useCallback((item, index) => {
         var _a;
-        if (!(item === null || item === void 0 ? void 0 : item.urlEmbed))
-            return null;
-        let url;
-        try {
-            url = new URL(item.urlEmbed);
-        }
-        catch (error) {
-            console.log('Invalid embed URL', item);
+        const urlEmbed = item === null || item === void 0 ? void 0 : item.urlEmbed;
+        if (!urlEmbed)
             return null;
+        const otherProps = {
+            key: index
+        };
+        const urlEmbedStart = urlEmbed.replace('http://', '').replace('https://', '');
+        const isPlatform = (urlEmbedStart.startsWith('youtu') ||
+            urlEmbedStart.startsWith('www.youtu') ||
+            urlEmbedStart.startsWith('instagram') ||
+            urlEmbedStart.startsWith('www.instagram') ||
+            urlEmbedStart.startsWith('tiktok') ||
+            urlEmbedStart.startsWith('www.tiktok') ||
+            urlEmbedStart.startsWith('vimeo') ||
+            urlEmbedStart.startsWith('www.vimeo'));
+        // predefined
+        if (isPlatform) {
+            let url;
+            try {
+                url = new URL(item.urlEmbed);
+            }
+            catch (error) {
+                console.log('Invalid embed URL', item);
+                return null;
+            }
+            const id = (_a = url.pathname) === null || _a === void 0 ? void 0 : _a.split('/').filter(Boolean).slice(-1)[0];
+            if (!(url === null || url === void 0 ? void 0 : url.hostname) || !id)
+                return null;
+            if (item.urlEmbed.includes('youtu.be')) {
+                return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({}, otherProps, { title: item.name || '', src: `https://www.youtube.com/embed/${id}`, allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share', allowFullScreen: true, className: classes.aspectRatioYoutube })));
+            }
+            if (item.urlEmbed.includes('instagram.com')) {
+                return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({}, otherProps, { title: item.name || '', src: `https://www.instagram.com/reel/${id}/embed`, allowFullScreen: true, className: classes.aspectRatioInstagram })));
+            }
+            if (item.urlEmbed.includes('tiktok.com')) {
+                return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({}, otherProps, { title: item.name || '', src: `https://www.tiktok.com/embed/v2/${id}`, allowFullScreen: true, className: classes.aspectRatioTiktok })));
+            }
+            if (item.urlEmbed.includes('vimeo.com')) {
+                return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({}, otherProps, { title: item.name || '', src: `https://player.vimeo.com/video/${id}`, allowFullScreen: true, className: classes.aspectRatioVimeo })));
+            }
+            return ((0, jsx_runtime_1.jsx)(Link, Object.assign({}, otherProps, { href: item === null || item === void 0 ? void 0 : item.urlEmbed, target: 'blank' }, { children: item.name || item.urlEmbed })));
         }
-        const id = (_a = url.pathname) === null || _a === void 0 ? void 0 : _a.split('/').filter(Boolean).slice(-1)[0];
-        if (!(url === null || url === void 0 ? void 0 : url.hostname) || !id)
-            return null;
-        if (item.urlEmbed.includes('youtu.be')) {
-            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.youtube.com/embed/${id}`, allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share', allowFullScreen: true, className: classes.aspectRatioYoutube }, index));
-        }
-        if (item.urlEmbed.includes('instagram.com')) {
-            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.instagram.com/reel/${id}/embed`, allowFullScreen: true, className: classes.aspectRatioInstagram }, index));
-        }
-        if (item.urlEmbed.includes('tiktok.com')) {
-            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://www.tiktok.com/embed/v2/${id}`, allowFullScreen: true, className: classes.aspectRatioTiktok }, index));
-        }
-        if (item.urlEmbed.includes('vimeo.com')) {
-            return ((0, jsx_runtime_1.jsx)("iframe", { title: item.name || '', src: `https://player.vimeo.com/video/${id}`, allowFullScreen: true, className: classes.aspectRatioVimeo }, index));
-        }
-        return ((0, jsx_runtime_1.jsx)(Link, Object.assign({ href: item === null || item === void 0 ? void 0 : item.urlEmbed, target: 'blank' }, { children: item.name || item.urlEmbed }), index));
+        // custom embed code
+        return ((0, jsx_runtime_1.jsx)(Line, Object.assign({}, otherProps, { className: classes.customEmbed, fullWidth: true, dangerouslySetInnerHTML: {
+                __html: urlEmbed
+            } })));
     }, []);
     const getItem = (version, item, index) => {
         var _a, _b, _c, _d, _e, _f;

package/Page/Page.js

@@ -42,7 +42,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
     name: {
         maxWidth: '440px'
     }
-}), { name: 'onesy-Page' });
+}), { name: 'onesy' });
 const Page = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPage) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);

package/PageTransition/PageTransition.js

@@ -45,7 +45,7 @@ const useStyle = (0, style_react_1.style)(theme => ({
     out: {
         animation: '$fadeOut 0.24s forwards'
     }
-}), { name: 'onesy-PageTransition' });
+}), { name: 'onesyTransition' });
 const PageTransition = react_1.default.forwardRef((props_, ref) => {
     const theme = (0, style_react_1.useOnesyTheme)();
     const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyPageTransition) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);

package/esm/Medias/Medias.js

@@ -132,6 +132,9 @@ const useStyle = styleMethod(theme => ({
   aspectRatioTiktok: {
     aspectRatio: '3 / 6.84',
     width: '324px'
+  },
+  customEmbed: {
+    maxWidth: '750px'
   }
 }), {
   name: 'onesy-Medias'
@@ -209,58 +212,72 @@ const Medias = /*#__PURE__*/React.forwardRef((props_, ref) => {
     return items_;
   }, [values]);
   const getLink = React.useCallback((item, index) => {
-    if (!item?.urlEmbed) return null;
-    let url;
-    try {
-      url = new URL(item.urlEmbed);
-    } catch (error) {
-      console.log('Invalid embed URL', item);
-      return null;
-    }
-    const id = url.pathname?.split('/').filter(Boolean).slice(-1)[0];
-    if (!url?.hostname || !id) return null;
-    if (item.urlEmbed.includes('youtu.be')) {
-      return /*#__PURE__*/React.createElement("iframe", {
-        key: index,
-        title: item.name || '',
-        src: `https://www.youtube.com/embed/${id}`,
-        allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
-        allowFullScreen: true,
-        className: classes.aspectRatioYoutube
-      });
-    }
-    if (item.urlEmbed.includes('instagram.com')) {
-      return /*#__PURE__*/React.createElement("iframe", {
-        key: index,
-        title: item.name || '',
-        src: `https://www.instagram.com/reel/${id}/embed`,
-        allowFullScreen: true,
-        className: classes.aspectRatioInstagram
-      });
-    }
-    if (item.urlEmbed.includes('tiktok.com')) {
-      return /*#__PURE__*/React.createElement("iframe", {
-        key: index,
-        title: item.name || '',
-        src: `https://www.tiktok.com/embed/v2/${id}`,
-        allowFullScreen: true,
-        className: classes.aspectRatioTiktok
-      });
-    }
-    if (item.urlEmbed.includes('vimeo.com')) {
-      return /*#__PURE__*/React.createElement("iframe", {
-        key: index,
-        title: item.name || '',
-        src: `https://player.vimeo.com/video/${id}`,
-        allowFullScreen: true,
-        className: classes.aspectRatioVimeo
-      });
+    const urlEmbed = item?.urlEmbed;
+    if (!urlEmbed) return null;
+    const otherProps = {
+      key: index
+    };
+    const urlEmbedStart = urlEmbed.replace('http://', '').replace('https://', '');
+    const isPlatform = urlEmbedStart.startsWith('youtu') || urlEmbedStart.startsWith('www.youtu') || urlEmbedStart.startsWith('instagram') || urlEmbedStart.startsWith('www.instagram') || urlEmbedStart.startsWith('tiktok') || urlEmbedStart.startsWith('www.tiktok') || urlEmbedStart.startsWith('vimeo') || urlEmbedStart.startsWith('www.vimeo');
+
+    // predefined
+    if (isPlatform) {
+      let url;
+      try {
+        url = new URL(item.urlEmbed);
+      } catch (error) {
+        console.log('Invalid embed URL', item);
+        return null;
+      }
+      const id = url.pathname?.split('/').filter(Boolean).slice(-1)[0];
+      if (!url?.hostname || !id) return null;
+      if (item.urlEmbed.includes('youtu.be')) {
+        return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
+          title: item.name || '',
+          src: `https://www.youtube.com/embed/${id}`,
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
+          allowFullScreen: true,
+          className: classes.aspectRatioYoutube
+        }));
+      }
+      if (item.urlEmbed.includes('instagram.com')) {
+        return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
+          title: item.name || '',
+          src: `https://www.instagram.com/reel/${id}/embed`,
+          allowFullScreen: true,
+          className: classes.aspectRatioInstagram
+        }));
+      }
+      if (item.urlEmbed.includes('tiktok.com')) {
+        return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
+          title: item.name || '',
+          src: `https://www.tiktok.com/embed/v2/${id}`,
+          allowFullScreen: true,
+          className: classes.aspectRatioTiktok
+        }));
+      }
+      if (item.urlEmbed.includes('vimeo.com')) {
+        return /*#__PURE__*/React.createElement("iframe", _extends({}, otherProps, {
+          title: item.name || '',
+          src: `https://player.vimeo.com/video/${id}`,
+          allowFullScreen: true,
+          className: classes.aspectRatioVimeo
+        }));
+      }
+      return /*#__PURE__*/React.createElement(Link, _extends({}, otherProps, {
+        href: item?.urlEmbed,
+        target: "blank"
+      }), item.name || item.urlEmbed);
     }
-    return /*#__PURE__*/React.createElement(Link, {
-      key: index,
-      href: item?.urlEmbed,
-      target: "blank"
-    }, item.name || item.urlEmbed);
+
+    // custom embed code
+    return /*#__PURE__*/React.createElement(Line, _extends({}, otherProps, {
+      className: classes.customEmbed,
+      fullWidth: true,
+      dangerouslySetInnerHTML: {
+        __html: urlEmbed
+      }
+    }));
   }, []);
   const getItem = (version, item, index) => {
     const media = item.value;

package/esm/Page/Page.js

@@ -32,7 +32,7 @@ const useStyle = styleMethod(theme => ({
     maxWidth: '440px'
   }
 }), {
-  name: 'onesy-Page'
+  name: 'onesy'
 });
 const Page = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();

package/esm/PageTransition/PageTransition.js

@@ -35,7 +35,7 @@ const useStyle = styleMethod(theme => ({
     animation: '$fadeOut 0.24s forwards'
   }
 }), {
-  name: 'onesy-PageTransition'
+  name: 'onesyTransition'
 });
 const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license UiReact v1.0.33
+/** @license UiReact v1.0.35
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onesy/ui-react",
-  "version": "1.0.33",
+  "version": "1.0.35",
   "description": "UI for React",
   "repository": "https://github.com/onesy-me/onesy.git",
   "author": "Lazar <lazareric2@gmail.com>",