Permalink
Browse files

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
  • Loading branch information...
RSNara authored and kelset committed Aug 16, 2018
1 parent 527792a commit ee971a76fae35edb624b4fa30017085264e92e77
@@ -17,12 +17,18 @@ const RCTWKWebView = requireNativeComponent('RCTWKWebView');
type RCTWKWebViewProps = { type RCTWKWebViewProps = {
allowsInlineMediaPlayback?: boolean, allowsInlineMediaPlayback?: boolean,
mediaPlaybackRequiresUserAction?: boolean,
}; };
class WKWebView extends React.Component<RCTWKWebViewProps> { class WKWebView extends React.Component<RCTWKWebViewProps> {
componentWillReceiveProps(nextProps: RCTWKWebViewProps) { componentWillReceiveProps(nextProps: RCTWKWebViewProps) {
if (this.props.allowsInlineMediaPlayback !== nextProps.allowsInlineMediaPlayback) { this.showRedboxOnPropChanges(nextProps, 'allowsInlineMediaPlayback');
console.error('Changes to property allowsInlineMediaPlayback do nothing after the initial render.'); 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.`);
} }
} }
@@ -29,6 +29,7 @@ shouldStartLoadForRequest:(NSMutableDictionary<NSString *, id> *)request
@property (nonatomic, assign) CGFloat decelerationRate; @property (nonatomic, assign) CGFloat decelerationRate;
@property (nonatomic, assign) BOOL allowsInlineMediaPlayback; @property (nonatomic, assign) BOOL allowsInlineMediaPlayback;
@property (nonatomic, assign) BOOL bounces; @property (nonatomic, assign) BOOL bounces;
@property (nonatomic, assign) BOOL mediaPlaybackRequiresUserAction;
- (void)postMessage:(NSString *)message; - (void)postMessage:(NSString *)message;
- (void)injectJavaScript:(NSString *)script; - (void)injectJavaScript:(NSString *)script;
@@ -40,6 +40,9 @@ - (void)didMoveToWindow
wkWebViewConfig.userContentController = [WKUserContentController new]; wkWebViewConfig.userContentController = [WKUserContentController new];
[wkWebViewConfig.userContentController addScriptMessageHandler: self name: MessageHanderName]; [wkWebViewConfig.userContentController addScriptMessageHandler: self name: MessageHanderName];
wkWebViewConfig.allowsInlineMediaPlayback = _allowsInlineMediaPlayback; wkWebViewConfig.allowsInlineMediaPlayback = _allowsInlineMediaPlayback;
wkWebViewConfig.mediaTypesRequiringUserActionForPlayback = _mediaPlaybackRequiresUserAction
? WKAudiovisualMediaTypeAll
: WKAudiovisualMediaTypeNone;
_webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig]; _webView = [[WKWebView alloc] initWithFrame:self.bounds configuration: wkWebViewConfig];
_webView.scrollView.delegate = self; _webView.scrollView.delegate = self;
@@ -28,7 +28,7 @@ - (UIView *)view
RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock) RCT_EXPORT_VIEW_PROPERTY(onShouldStartLoadWithRequest, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString) RCT_EXPORT_VIEW_PROPERTY(injectedJavaScript, NSString)
RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL) RCT_EXPORT_VIEW_PROPERTY(allowsInlineMediaPlayback, BOOL)
RCT_EXPORT_VIEW_PROPERTY(mediaPlaybackRequiresUserAction, BOOL)
/** /**
* Expose methods to enable messaging the webview. * Expose methods to enable messaging the webview.
*/ */

0 comments on commit ee971a7

Please sign in to comment.