Implement 'mediaPlaybackRequiresUserAction' prop

Summary:
HTML video elements can have the `autoplay` attribute, which forces them to play automatically whenever they load on the page.

In this diff, I introduce a new prop `mediaPlaybackRequiresUserAction`, which allows us to control whether video or audio element autoplays even when `autoplay` is set.

Reviewed By: shergin

Differential Revision: D6382256

fbshipit-source-id: 617508653910d600bc43f7f68c6dfd17ab1b6dd8

Libraries/Components/WKWebView/WKWebView.ios.js

@@ -17,12 +17,18 @@ const RCTWKWebView = requireNativeComponent('RCTWKWebView');
 
 type RCTWKWebViewProps = {
   allowsInlineMediaPlayback?: boolean,
+  mediaPlaybackRequiresUserAction?: boolean,
 };
 
 class WKWebView extends React.Component<RCTWKWebViewProps> {
   componentWillReceiveProps(nextProps: RCTWKWebViewProps) {
-    if (this.props.allowsInlineMediaPlayback !== nextProps.allowsInlineMediaPlayback) {
-      console.error('Changes to property allowsInlineMediaPlayback do nothing after the initial render.');
+    this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback');
+    this.showRedboxOnPropChanges(nextProps, 'mediaPlaybackRequiresUserAction');
+  }
+
+  showRedboxOnPropChanges(nextProps: RCTWKWebViewProps, propName: string) {
+    if (this.props[propName] !== nextProps[propName]) {
+      console.error(`Changes to property ${propName} do nothing after the initial render.`);
     }
   }
 

React/Views/RCTWKWebView.h

@@ -29,6 +29,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
 @property (nonatomic, assign) CGFloat decelerationRate;
 @property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
 @property (nonatomic, assign) BOOL bounces;
+@property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction;
 
 - (void)postMessage:(NSString *)message;
 - (void)injectJavaScript:(NSString *)script;

React/Views/RCTWKWebView.m

@@ -40,6 +40,9 @@ static NSString *const MessageHanderName = @"ReactNative";
     wkWebViewConfig.userContentController = [WKUserContentController new];
     [wkWebViewConfig.userContentController addScriptMessageHandler: self name: MessageHanderName];
     wkWebViewConfig.allowsInlineMediaPlayback = _allowsInlineMediaPlayback;
+    wkWebViewConfig.mediaTypesRequiringUserActionForPlayback = _mediaPlaybackRequiresUserAction
+      ? WKAudiovisualMediaTypeAll
+      : WKAudiovisualMediaTypeNone;
 
     _webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig];
     _webView.scrollView.delegate = self;

React/Views/RCTWKWebViewManager.m

@@ -28,7 +28,7 @@ RCT_EXPORT_VIEW_PROPERTY(onLoadingError, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
 RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL)
-
+RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL)
 /**
  * Expose methods to enable messaging the webview.
  */