@shoutem/ui 6.4.0-rc.0 → 6.4.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/html/components/SimpleHtml.js

@@ -13,8 +13,11 @@ import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
+import VideoRenderer from '@shoutem/ui/html/components/VideoRenderer';
+import { videoModel } from '@shoutem/ui/html/services/HTMLElementModels';
 import { View } from '../../components/View';
 import { resolveMaxWidth } from '../services/Dimensions';
+import { onElement } from '../services/DomVisitors';
 import AttachmentRenderer from './AttachmentRenderer';
 import IframeRenderer from './IframeRenderer';
 
@@ -37,9 +40,14 @@ class SimpleHtml extends PureComponent {
     const {
       style,
       body,
-      customTagStyles,
       unsupportedVideoFormatMessage,
       attachments,
+      customDomVisitors,
+      customCustomRenderers,
+      customTagStyles,
+      customHtmlElementModels,
+      customIgnoredStyles,
+      customRendererProps,
       ...otherProps
     } = this.props;
 
@@ -74,6 +82,8 @@ class SimpleHtml extends PureComponent {
           style={style}
         />
       ),
+      video: VideoRenderer,
+      ...customCustomRenderers,
     };
 
     const htmlProps = {
@@ -83,7 +93,12 @@ class SimpleHtml extends PureComponent {
       tagsStyles: _.omitBy(tagStyles, tagStyle => !tagStyle),
       systemFonts: [...defaultSystemFonts, style.baseFont.fontFamily],
       baseStyle: style.baseFont,
-      ignoredStyles: ['fontFamily', 'letterSpacing', 'transform'],
+      ignoredStyles: [
+        'fontFamily',
+        'letterSpacing',
+        'transform',
+        ...customIgnoredStyles,
+      ],
       renderers: customRenderers,
       renderersProps: {
         table: {
@@ -95,13 +110,17 @@ class SimpleHtml extends PureComponent {
             renderToHardwareTextureAndroid: true,
           },
         },
+        ...customRendererProps,
       },
       customHTMLElementModels: {
         table: tableModel,
         iframe: iframeModel,
+        video: videoModel,
+        ...customHtmlElementModels,
       },
       WebView,
       ignoredTags: IGNORED_TAGS,
+      domVisitors: { onElement, ...customDomVisitors },
     };
 
     return (
@@ -116,19 +135,29 @@ SimpleHtml.propTypes = {
   style: PropTypes.object.isRequired,
   attachments: PropTypes.array,
   body: PropTypes.string,
-  customAlterNode: PropTypes.func,
+  customCustomRenderers: PropTypes.object,
+  customDomVisitors: PropTypes.object,
   customHandleLinkPress: PropTypes.func,
+  customHtmlElementModels: PropTypes.object,
+  customIgnoredStyles: PropTypes.arrayOf(PropTypes.string),
+  customRendererProps: PropTypes.object,
   customTagStyles: PropTypes.object,
+  domVisitors: PropTypes.object,
   unsupportedVideoFormatMessage: PropTypes.string,
 };
 
 SimpleHtml.defaultProps = {
   attachments: undefined,
   body: undefined,
-  customAlterNode: undefined,
   customHandleLinkPress: undefined,
-  customTagStyles: undefined,
+  customTagStyles: {},
   unsupportedVideoFormatMessage: undefined,
+  domVisitors: { onElement },
+  customDomVisitors: {},
+  customCustomRenderers: {},
+  customHtmlElementModels: {},
+  customIgnoredStyles: [],
+  customRendererProps: {},
 };
 
 export default connectStyle('shoutem.ui.SimpleHtml')(SimpleHtml);

package/html/components/VideoRenderer.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import {
+  useComputeMaxWidthForTag,
+  useContentWidth,
+} from 'react-native-render-html';
+import WebView from 'react-native-webview';
+import { findOne } from 'domutils';
+import PropTypes from 'prop-types';
+
+function findSource(tnode) {
+  if (tnode.attributes.src) {
+    return tnode.attributes.src;
+  }
+
+  const sourceElms = findOne(
+    elm => elm.tagName === 'source',
+    tnode.domNode.children,
+  );
+
+  return sourceElms ? sourceElms.attribs.src : '';
+}
+
+/**
+ *
+ * Generate video html with only selected attributes and parameters.
+ * @returns HTML video element
+ */
+function generateVideoHtml(tnode) {
+  const url = findSource(tnode);
+
+  const containsTimeParameter = url.match(/(#|\?)t=[^&$]*/g, '');
+  // If video has no time parameter, we want to add time parameter at 0.1, just to be able to
+  // display the image, first frame of the video. Video tags that don't have autoplay attribute
+  // are not showing first frame without this solution.
+  // Otherwise, if user has defined time parameter, keep it as is.
+  const resolvedUrl = `${url}${containsTimeParameter ? '' : '#t=0.1'}`;
+
+  return `<video controls src="${resolvedUrl}" style="width: 100%; height: 100%;"/>`;
+}
+
+export const VideoRenderer = ({ tnode, style }) => {
+  const computeMaxWidth = useComputeMaxWidthForTag('video');
+  const width = computeMaxWidth(useContentWidth());
+
+  // Using uri as a Webview source is not an option, because we don't have as much control of video.
+  // E.g. if video from uri has autoplay=true, we can't prevent it from auto-playing when Webview renders.
+  // Instead, create video HTML element with only picked attributes and parameters.
+  const html = generateVideoHtml(tnode);
+
+  return (
+    <WebView
+      scrollEnabled={false}
+      source={{
+        html,
+      }}
+      style={[{ aspectRatio: 16 / 9 }, style, { width }]}
+    />
+  );
+};
+
+VideoRenderer.propTypes = {
+  tnode: PropTypes.object.isRequired,
+  style: PropTypes.object,
+};
+
+VideoRenderer.defaultProps = {
+  style: {},
+};
+
+export default VideoRenderer;

package/html/services/DomVisitors.js

@@ -0,0 +1,37 @@
+import _ from 'lodash';
+
+// Shoutem RTE component wraps any video attachment (hosted inside iframe or video) 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.name === 'video') &&
+    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' || name === 'video',
+    )
+  ) {
+    // 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/html/services/HTMLElementModels.js

@@ -0,0 +1,7 @@
+import { HTMLContentModel, HTMLElementModel } from 'react-native-render-html';
+
+export const videoModel = HTMLElementModel.fromCustomModel({
+  contentModel: HTMLContentModel.block,
+  tagName: 'video',
+  isOpaque: true,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "6.4.0-rc.0",
+  "version": "6.4.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -11,13 +11,13 @@
     "test": "jest"
   },
   "dependencies": {
+    "@native-html/iframe-plugin": "2.6.1",
+    "@native-html/table-plugin": "5.3.1",
     "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
     "@shoutem/animation": "~0.15.0",
     "@shoutem/eslint-config-react": "~1.0.6",
     "@shoutem/theme": "~0.13.0",
-    "@native-html/iframe-plugin": "2.6.1",
-    "@native-html/table-plugin": "5.3.1",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
@@ -39,6 +39,7 @@
     "react-native-svg": "12.3.0",
     "react-native-svg-transformer": "1.0.0",
     "react-native-toast-message": "2.1.5",
+    "react-native-vimeo-iframe": "^1.2.1",
     "react-native-webview": "11.23.0",
     "react-native-youtube-iframe": "2.2.2",
     "stream": "0.0.2",
@@ -50,8 +51,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.7",
-    "@babel/register": "7.9.0",
     "@babel/plugin-proposal-decorators": "7.16.7",
+    "@babel/register": "7.9.0",
     "@shoutem/eslint-config-react-native": "~1.0.2",
     "babel-eslint": "10.1.0",
     "eslint": "6.8.0",

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: responsiveHeight(220),
+      },
       fallback: {
         width: window.width,
         height: 40,