@shoutem/ui 9.0.0-rc.5 → 9.0.1

package/components/Video/Video.js

@@ -6,24 +6,27 @@ import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 import VideoSourceReader from './VideoSourceReader';
 
-function getSource(sourceReader, poster) {
+function getSource(sourceReader, poster, headers) {
   const url = sourceReader.getUrl();
+  let source;
 
   if (sourceReader.isEmbeddableVideo()) {
-    return {
-      uri: url,
-    };
+    source = { uri: url };
+  } else {
+    const HTML = `
+      <video width="100%" height="auto" poster="${poster}" controls  >
+         <source src="${url}" >
+       </video>
+    `;
+
+    source = { html: HTML };
   }
 
-  const HTML = `
-    <video width="100%" height="auto" poster="${poster}" controls  >
-       <source src="${url}" >
-     </video>
-  `;
+  if (headers) {
+    source.headers = headers;
+  }
 
-  return {
-    html: HTML,
-  };
+  return source;
 }
 
 /**
@@ -44,7 +47,8 @@ class Video extends PureComponent {
   }
 
   render() {
-    const { width, height = '100%', style, poster } = this.props;
+    const { width, height = '100%', style, poster, headers } = this.props;
+    const webViewSource = getSource(this.sourceReader, poster, headers);
 
     return (
       <View style={style.container}>
@@ -52,7 +56,7 @@ class Video extends PureComponent {
           allowsFullscreenVideo
           mediaPlaybackRequiresUserAction={false}
           style={{ width, height }}
-          source={getSource(this.sourceReader, poster)}
+          source={webViewSource}
           scrollEnabled={false}
           originWhitelist={['*']}
         />
@@ -63,6 +67,7 @@ class Video extends PureComponent {
 
 Video.propTypes = {
   style: PropTypes.object.isRequired,
+  headers: PropTypes.object,
   height: PropTypes.number,
   // `playerParams` currently only works for Youtube
   playerParams: PropTypes.object,
@@ -75,6 +80,7 @@ Video.propTypes = {
 
 Video.defaultProps = {
   width: undefined,
+  headers: undefined,
   height: undefined,
   playerParams: { showinfo: 0 },
   source: undefined,

package/html/components/AttachmentRenderer.js

@@ -4,39 +4,35 @@ import PropTypes from 'prop-types';
 import { resolveDimensions } from '../services/Dimensions';
 import Image from './Image';
 
-const AttachmentRenderer = ({ id, type, style, attachments }) => {
-  if (!attachments) {
+const AttachmentRenderer = ({ tnode, style, attachments }) => {
+  if (!attachments || _.isEmpty(attachments)) {
     return null;
   }
 
-  if (type === 'image') {
-    const image = _.find(attachments, { id });
+  const image = _.find(attachments, { id: tnode?.id });
 
-    if (image && image.src) {
-      const source = { uri: image.src };
-      const imageSize = { width: image.width, height: image.height };
-      const { height, width } = resolveDimensions(imageSize, style);
-      const resolvedStyle = { alignSelf: 'center', height, width };
-
-      return <Image source={source} key={id} style={resolvedStyle} />;
-    }
+  if (!image || !image.src) {
+    return null;
   }
 
-  return null;
+  const source = { uri: image.src };
+  const imageSize = { width: image.width, height: image.height };
+  const { height, width } = resolveDimensions(imageSize, style);
+  const resolvedStyle = { alignSelf: 'center', height, width };
+
+  return <Image source={source} key={tnode?.id} style={resolvedStyle} />;
 };
 
 AttachmentRenderer.propTypes = {
-  attachments: PropTypes.oneOf([PropTypes.array, PropTypes.object]),
-  id: PropTypes.any,
+  attachments: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   style: PropTypes.any,
-  type: PropTypes.any,
+  tnode: PropTypes.object,
 };
 
 AttachmentRenderer.defaultProps = {
-  id: undefined,
-  type: undefined,
   attachments: undefined,
   style: undefined,
+  tnode: {},
 };
 
 export default AttachmentRenderer;

package/html/components/SimpleHtml.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from 'react';
 import { Linking } from 'react-native';
 import Html, { defaultSystemFonts } from 'react-native-render-html';
@@ -11,7 +12,10 @@ import table, {
 import _ from 'lodash';
 import { connectStyle } from '@shoutem/theme';
 import VideoRenderer from '@shoutem/ui/html/components/VideoRenderer';
-import { videoModel } from '@shoutem/ui/html/services/HTMLElementModels';
+import {
+  attachmentModel,
+  videoModel,
+} from '@shoutem/ui/html/services/HTMLElementModels';
 import { View } from '../../components/View';
 import { resolveMaxWidth } from '../services/Dimensions';
 import { onElement } from '../services/DomVisitors';
@@ -75,7 +79,7 @@ const SimpleHtml = ({
       table,
       attachment: props => (
         <AttachmentRenderer
-          {...props}
+          tnode={props.tnode}
           attachments={attachments}
           style={style}
         />
@@ -117,6 +121,7 @@ const SimpleHtml = ({
       table: tableModel,
       iframe: iframeModel,
       video: videoModel,
+      attachment: attachmentModel,
       ...customHtmlElementModels,
     }),
     [customHtmlElementModels],

package/html/services/HTMLElementModels.js

@@ -5,3 +5,9 @@ export const videoModel = HTMLElementModel.fromCustomModel({
   tagName: 'video',
   isOpaque: true,
 });
+
+export const attachmentModel = HTMLElementModel.fromCustomModel({
+  contentModel: HTMLContentModel.block,
+  tagName: 'attachment',
+  isOpaque: true,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "9.0.0-rc.5",
+  "version": "9.0.1",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -15,9 +15,9 @@
     "@native-html/table-plugin": "5.3.1",
     "@openspacelabs/react-native-zoomable-view": "2.0.4",
     "@react-native-community/datetimepicker": "6.2.0",
-    "@shoutem/animation": "1.0.0-rc.1",
+    "@shoutem/animation": "1.0.0",
     "@shoutem/eslint-config-react": "~1.0.6",
-    "@shoutem/theme": "1.0.0-rc.4",
+    "@shoutem/theme": "1.0.0",
     "auto-bind": "4.0.0",
     "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",

package/theme.js

@@ -2407,8 +2407,11 @@ export default () => {
         paddingHorizontal: 20,
         paddingVertical: 16,
         borderBottomWidth: 1,
-        borderColor: 'rgba(130, 130, 130, 0.1)',
         alignItems: 'center',
+        backgroundColor: resolveVariable('primaryButtonBackgroundColor'),
+        borderColor: resolveVariable('primaryButtonBorderColor'),
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 13,
       },
       text: {
         fontSize: 15,