Skip to content

Commit

Permalink
Implement 'mediaPlaybackRequiresUserAction' prop
Browse files Browse the repository at this point in the history
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 facebook-github-bot committed Aug 16, 2018
1 parent 4ca949b commit 7217630
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 3 deletions.
10 changes: 8 additions & 2 deletions Libraries/Components/WKWebView/WKWebView.ios.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.`);
}
}

Expand Down
1 change: 1 addition & 0 deletions React/Views/RCTWKWebView.h
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions React/Views/RCTWKWebView.m
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,9 @@ - (void)didMoveToWindow
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;
Expand Down
2 changes: 1 addition & 1 deletion React/Views/RCTWKWebViewManager.m
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ - (UIView *)view
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.
*/
Expand Down

0 comments on commit 7217630

Please sign in to comment.