@shoutem/ui 6.3.2 → 6.3.3

package/html/components/SimpleHtml.js

@@ -13,6 +13,8 @@ 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';
@@ -38,10 +40,14 @@ class SimpleHtml extends PureComponent {
     const {
       style,
       body,
-      customTagStyles,
       unsupportedVideoFormatMessage,
       attachments,
-      domVisitors,
+      customDomVisitors,
+      customCustomRenderers,
+      customTagStyles,
+      customHtmlElementModels,
+      customIgnoredStyles,
+      customRendererProps,
       ...otherProps
     } = this.props;
 
@@ -76,6 +82,8 @@ class SimpleHtml extends PureComponent {
           style={style}
         />
       ),
+      video: VideoRenderer,
+      ...customCustomRenderers,
     };
 
     const htmlProps = {
@@ -85,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: {
@@ -97,14 +110,17 @@ class SimpleHtml extends PureComponent {
             renderToHardwareTextureAndroid: true,
           },
         },
+        ...customRendererProps,
       },
       customHTMLElementModels: {
         table: tableModel,
         iframe: iframeModel,
+        video: videoModel,
+        ...customHtmlElementModels,
       },
       WebView,
       ignoredTags: IGNORED_TAGS,
-      domVisitors: { onElement },
+      domVisitors: { onElement, ...customDomVisitors },
     };
 
     return (
@@ -119,8 +135,12 @@ 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,
@@ -129,11 +149,15 @@ SimpleHtml.propTypes = {
 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

@@ -1,16 +1,19 @@
 import _ from 'lodash';
 
-// Shoutem RTE component wraps any video attachment (hosted inside iframe) with <figure>
+// 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 === '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')
+    _.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

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.3.2",
+  "version": "6.3.3",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",