add allowsInlineMediaPlayback prop to play inline html5 video

Summary: Allow an html5 video to be played inline. (see #3112) Closes #3137 Reviewed By: svcscm Differential Revision: D2674318 Pulled By: nicklockwood fb-gh-sync-id: cf71e4039c7027f1468370ae3ddef6eb3e2d2d4f
facebook · Nov 19, 2015 · 7da42e3 · 7da42e3
1 parent 2a9a5fc
commit 7da42e3
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/Libraries/Components/WebView/WebView.ios.js b/Libraries/Components/WebView/WebView.ios.js
@@ -100,26 +100,41 @@ var WebView = React.createClass({
     onNavigationStateChange: PropTypes.func,
     startInLoadingState: PropTypes.bool, // force WebView to show loadingView on first load
     style: View.propTypes.style,
+
     /**
      * Used for android only, JS is enabled by default for WebView on iOS
+     * @platform android
      */
     javaScriptEnabledAndroid: PropTypes.bool,
+
     /**
      * Sets the JS to be injected when the webpage loads.
      */
     injectedJavaScript: PropTypes.string,
 
     /**
-     * Used for iOS only, sets whether the webpage scales to fit the view and the
-     * user can change the scale
+     * Sets whether the webpage scales to fit the view and the user can change the scale.
+     * @platform ios
      */
     scalesPageToFit: PropTypes.bool,
 
     /**
      * Allows custom handling of any webview requests by a JS handler. Return true
      * or false from this method to continue loading the request.
+     * @platform ios
      */
     onShouldStartLoadWithRequest: PropTypes.func,
+
+    /**
+     * Determines whether HTML5 videos play inline or use the native full-screen
+     * controller.
+     * default value `false`
+     * **NOTE** : "In order for video to play inline, not only does this
+     * property need to be set to true, but the video element in the HTML
+     * document must also include the webkit-playsinline attribute."
+     * @platform ios
+     */
+    allowsInlineMediaPlayback: PropTypes.bool,
   },
 
   getInitialState: function() {
@@ -188,6 +203,7 @@ var WebView = React.createClass({
         onLoadingError={this.onLoadingError}
         onShouldStartLoadWithRequest={onShouldStartLoadWithRequest}
         scalesPageToFit={this.props.scalesPageToFit}
+        allowsInlineMediaPlayback={this.props.allowsInlineMediaPlayback}
       />;
 
     return (

diff --git a/React/Views/RCTWebViewManager.m b/React/Views/RCTWebViewManager.m
@@ -18,7 +18,8 @@ @interface RCTWebViewManager () <RCTWebViewDelegate>
 
 @end
 
-@implementation RCTWebViewManager {
+@implementation RCTWebViewManager
+{
   NSConditionLock *_shouldStartLoadLock;
   BOOL _shouldStartLoad;
 }
@@ -32,18 +33,19 @@ - (UIView *)view
   return webView;
 }
 
-RCT_REMAP_VIEW_PROPERTY(url, URL, NSURL);
-RCT_REMAP_VIEW_PROPERTY(html, HTML, NSString);
-RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL);
-RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL);
-RCT_REMAP_VIEW_PROPERTY(scalesPageToFit, _webView.scalesPageToFit, BOOL);
-RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString);
-RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets);
-RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL);
-RCT_EXPORT_VIEW_PROPERTY(onLoadingStart, RCTDirectEventBlock);
-RCT_EXPORT_VIEW_PROPERTY(onLoadingFinish, RCTDirectEventBlock);
-RCT_EXPORT_VIEW_PROPERTY(onLoadingError, RCTDirectEventBlock);
-RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock);
+RCT_REMAP_VIEW_PROPERTY(url, URL, NSURL)
+RCT_REMAP_VIEW_PROPERTY(html, HTML, NSString)
+RCT_REMAP_VIEW_PROPERTY(bounces, _webView.scrollView.bounces, BOOL)
+RCT_REMAP_VIEW_PROPERTY(scrollEnabled, _webView.scrollView.scrollEnabled, BOOL)
+RCT_REMAP_VIEW_PROPERTY(scalesPageToFit, _webView.scalesPageToFit, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
+RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
+RCT_EXPORT_VIEW_PROPERTY(automaticallyAdjustContentInsets, BOOL)
+RCT_EXPORT_VIEW_PROPERTY(onLoadingStart, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLoadingFinish, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onLoadingError, RCTDirectEventBlock)
+RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock)
+RCT_REMAP_VIEW_PROPERTY(allowsInlineMediaPlayback, _webView.allowsInlineMediaPlayback, BOOL)
 
 - (NSDictionary<NSString *, id> *)constantsToExport
 {