@shoutem/ui 6.3.2 → 6.3.3-rc.0

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';
@@ -76,6 +78,7 @@ class SimpleHtml extends PureComponent {
           style={style}
         />
       ),
+      video: VideoRenderer,
     };
 
     const htmlProps = {
@@ -101,10 +104,11 @@ class SimpleHtml extends PureComponent {
       customHTMLElementModels: {
         table: tableModel,
         iframe: iframeModel,
+        video: videoModel,
       },
       WebView,
       ignoredTags: IGNORED_TAGS,
-      domVisitors: { onElement },
+      domVisitors,
     };
 
     return (

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