@shoutem/ui 6.4.0-rc.0 → 6.4.1-rc.0

package/html/components/IframeRenderer.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Vimeo } from 'react-native-vimeo-iframe';
 import YoutubePlayer from 'react-native-youtube-iframe';
 import iframe from '@native-html/iframe-plugin';
 import PropTypes from 'prop-types';
@@ -41,6 +42,19 @@ const IframeRenderer = props => {
     );
   }
 
+  if (url && url.includes('vimeo')) {
+    const vimeoIdRegEx = /(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/(?:[^\/]*)\/videos\/|album\/(?:\d+)\/video\/|video\/|)(\d+)(?:[a-zA-Z0-9_\-]+)?/i;
+    const regExMatches = url.match(vimeoIdRegEx);
+    const vimeoId = regExMatches[1];
+
+    return (
+      <Vimeo
+        videoId={vimeoId}
+        style={{ height: shoutemStyle.vimeoVideo.height }}
+      />
+    );
+  }
+
   return iframe(props);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.4.0-rc.0",
+  "version": "6.4.1-rc.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -41,6 +41,7 @@
     "react-native-toast-message": "2.1.5",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
+    "react-native-vimeo-iframe": "1.2.1",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },

package/theme.js

@@ -2284,6 +2284,10 @@ export default () => {
         height: responsiveWidth(194),
         paddingBottom: resolveVariable('smallGutter'),
       },
+      // Just enough to display portrait mode Vimeo videos and all Vimeo player controls
+      vimeoVideo: {
+        height: responsiveWidth(220),
+      },
       fallback: {
         width: window.width,
         height: 40,