@shoutem/ui 9.2.0 → 9.2.1-rc.1

package/components/Video/Video.js

@@ -1,9 +1,12 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
+import { Vimeo } from 'react-native-vimeo-iframe';
 import { WebView } from 'react-native-webview';
+import YoutubePlayer from 'react-native-youtube-iframe';
 import PropTypes from 'prop-types';
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
+import { isAndroid } from '../../services';
 import VideoSourceReader from './VideoSourceReader';
 
 function getSource(sourceReader, poster, headers) {
@@ -29,14 +32,28 @@ function getSource(sourceReader, poster, headers) {
   return source;
 }
 
+// YouTube/Vimeo iframe players require a numeric height (they can't take
+// '100%'), so resolve one from the height prop, then the themed container
+// height, then a default.
+function resolveEmbedHeight(height, style) {
+  if (typeof height === 'number') {
+    return height;
+  }
+
+  const containerHeight = style?.container?.height;
+
+  if (typeof containerHeight === 'number') {
+    return containerHeight;
+  }
+
+  return 240;
+}
+
 /**
- * Renders a Video based on the source type
- * if source is an url to a web player the
- * it is displayed in a WebView, if not
- * a Video HTML element is displayed in the
- * WebView.
- *
- * @returns {*}
+ * Renders a video based on its source type. YouTube and Vimeo go through their
+ * dedicated iframe players so the embed loads with a valid origin - a bare
+ * YouTube embed in a plain WebView has no Referer and fails with "Error 153".
+ * Any other source is rendered as an HTML5 video inside a WebView.
  */
 class Video extends PureComponent {
   constructor(props) {
@@ -47,7 +64,43 @@ class Video extends PureComponent {
   }
 
   render() {
-    const { width, height = '100%', style, poster, headers } = this.props;
+    const {
+      width,
+      height = '100%',
+      style,
+      poster,
+      headers,
+      playerParams,
+    } = this.props;
+
+    if (this.sourceReader.isYouTube) {
+      return (
+        <View style={style.container}>
+          <YoutubePlayer
+            videoId={this.sourceReader.getYouTubeId()}
+            height={resolveEmbedHeight(height, style)}
+            initialPlayerParams={playerParams}
+            webViewProps={{ renderToHardwareTextureAndroid: true }}
+          />
+        </View>
+      );
+    }
+
+    if (this.sourceReader.isVimeo) {
+      return (
+        <View style={style.container}>
+          <Vimeo
+            videoId={this.sourceReader.getVimeoId()}
+            style={{ height: resolveEmbedHeight(height, style) }}
+            {...(isAndroid && {
+              overScrollMode: 'never',
+              androidLayerType: 'software',
+            })}
+          />
+        </View>
+      );
+    }
+
     const webViewSource = getSource(this.sourceReader, poster, headers);
 
     return (

package/components/Video/VideoSourceReader.js

@@ -2,7 +2,7 @@ import { stringify } from 'qs';
 
 function getYouTubeVideoId(url) {
   // eslint-disable-next-line no-useless-escape
-  const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\??v?=?))([^#&\?]*).*/;
+  const regExp = /^.*(?:(youtu.be\/)|(shorts\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\??v?=?))([^#&\?]*).*/;
   const match = url.match(regExp);
 
   if (match && match[7].length === 11) {
@@ -65,4 +65,12 @@ export default class VideoSourceReader {
 
     return this.source;
   }
+
+  getYouTubeId() {
+    return getYouTubeVideoId(this.source);
+  }
+
+  getVimeoId() {
+    return getVimeoVideoId(this.source);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "9.2.0",
+  "version": "9.2.1-rc.1",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",