@shoutem/ui 6.3.0 → 6.3.1

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/html/components/SimpleHtml.js

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
 import { View } from '../../components/View';
 import { resolveMaxWidth } from '../services/Dimensions';
+import { onElement } from '../services/DomVisitors';
 import AttachmentRenderer from './AttachmentRenderer';
 import IframeRenderer from './IframeRenderer';
 
@@ -40,6 +41,7 @@ class SimpleHtml extends PureComponent {
       customTagStyles,
       unsupportedVideoFormatMessage,
       attachments,
+      domVisitors,
       ...otherProps
     } = this.props;
 
@@ -102,6 +104,7 @@ class SimpleHtml extends PureComponent {
       },
       WebView,
       ignoredTags: IGNORED_TAGS,
+      domVisitors: { onElement },
     };
 
     return (
@@ -119,6 +122,7 @@ SimpleHtml.propTypes = {
   customAlterNode: PropTypes.func,
   customHandleLinkPress: PropTypes.func,
   customTagStyles: PropTypes.object,
+  domVisitors: PropTypes.object,
   unsupportedVideoFormatMessage: PropTypes.string,
 };
 
@@ -129,6 +133,7 @@ SimpleHtml.defaultProps = {
   customHandleLinkPress: undefined,
   customTagStyles: undefined,
   unsupportedVideoFormatMessage: undefined,
+  domVisitors: { onElement },
 };
 
 export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);

package/html/services/DomVisitors.js

@@ -0,0 +1,34 @@
+import _ from 'lodash';
+
+// Shoutem RTE component wraps any video attachment (hosted inside iframe) with <figure>
+// element. That element contains style that breaks the SimpleHtml UI - enormous blank
+// space below attachment.
+// This function removes height and padding-bottom styles from figure to fix this UI issue.
+export const removeShoutemRteVideoAttachmentWrapper = element => {
+  if (
+    element.name === 'figure' &&
+    element.children.length > 0 &&
+    // <figure> can have multiple generated children too - type:text. Probably caused by empty space between
+    // figure and iframe elements in generated HTML.
+    _.some(element.children, ({ name }) => name === 'iframe')
+  ) {
+    // Remove height and padding-bottom styles because they break the UI
+    element.attribs.style = element.attribs.style
+      ? element.attribs.style
+          .replace(/height:[^;]+;?/, '')
+          .replace(/padding-bottom:[^;]+;?/, '')
+      : '';
+  }
+
+  return element;
+};
+
+/**
+ * Collection of node (HTML element) alteration callbacks. Define any html element
+ * manipulations inside.
+ * @param {*} element - HTML element to check against and manipulate if necessary
+ * @returns Manipulated HTML element
+ */
+export const onElement = element => {
+  return removeShoutemRteVideoAttachmentWrapper(element);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -135,4 +135,4 @@
       "!/node_modules/@shoutem"
     ]
   }
-}
+}

package/theme.js

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