From d7efcf315faeb7711b85f639d06030e726a7fd39 Mon Sep 17 00:00:00 2001 From: Artur Jaworski Date: Thu, 13 Sep 2018 14:06:12 +0200 Subject: [PATCH 1/3] introducing onExternalPlaybackActiveChange --- Video.js | 8 ++++++++ ios/Video/RCTVideo.h | 1 + ios/Video/RCTVideo.m | 20 ++++++++++++++++++++ ios/Video/RCTVideoManager.m | 1 + 4 files changed, 30 insertions(+) diff --git a/Video.js b/Video.js index e8203b8b..ad9919b7 100644 --- a/Video.js +++ b/Video.js @@ -172,6 +172,12 @@ export default class Video extends Component { this.props.onPlaybackRateChange(event.nativeEvent); } }; + + _onExternalPlaybackChange = (event) => { + if (this.props.onExternalPlaybackChange) { + this.props.onExternalPlaybackChange(event.nativeEvent); + } + } _onAudioBecomingNoisy = () => { if (this.props.onAudioBecomingNoisy) { @@ -246,6 +252,7 @@ export default class Video extends Component { onPlaybackRateChange: this._onPlaybackRateChange, onAudioFocusChanged: this._onAudioFocusChanged, onAudioBecomingNoisy: this._onAudioBecomingNoisy, + onExternalPlaybackChange: this._onExternalPlaybackChange, }); if (this.props.poster && this.state.showPoster) { @@ -379,6 +386,7 @@ Video.propTypes = { onPlaybackRateChange: PropTypes.func, onAudioFocusChanged: PropTypes.func, onAudioBecomingNoisy: PropTypes.func, + onExternalPlaybackChange: PropTypes.func, /* Required by react-native */ scaleX: PropTypes.number, diff --git a/ios/Video/RCTVideo.h b/ios/Video/RCTVideo.h index b2296c5d..472cb2ff 100644 --- a/ios/Video/RCTVideo.h +++ b/ios/Video/RCTVideo.h @@ -35,6 +35,7 @@ @property (nonatomic, copy) RCTBubblingEventBlock onPlaybackStalled; @property (nonatomic, copy) RCTBubblingEventBlock onPlaybackResume; @property (nonatomic, copy) RCTBubblingEventBlock onPlaybackRateChange; +@property (nonatomic, copy) RCTBubblingEventBlock onExternalPlaybackChange; - (instancetype)initWithEventDispatcher:(RCTEventDispatcher *)eventDispatcher NS_DESIGNATED_INITIALIZER; diff --git a/ios/Video/RCTVideo.m b/ios/Video/RCTVideo.m index 9fe30b63..45389799 100644 --- a/ios/Video/RCTVideo.m +++ b/ios/Video/RCTVideo.m @@ -12,6 +12,7 @@ static NSString *const playbackBufferEmptyKeyPath = @"playbackBufferEmpty"; static NSString *const readyForDisplayKeyPath = @"readyForDisplay"; static NSString *const playbackRate = @"rate"; static NSString *const timedMetadata = @"timedMetadata"; +static NSString *const externalPlaybackActive = @"externalPlaybackActive"; static int const RCTVideoUnset = -1; @@ -35,6 +36,7 @@ static int const RCTVideoUnset = -1; /* Required to publish events */ RCTEventDispatcher *_eventDispatcher; BOOL _playbackRateObserverRegistered; + BOOL _isExternalPlaybackActiveObserverRegistered; BOOL _videoLoadStarted; bool _pendingSeek; @@ -74,6 +76,7 @@ static int const RCTVideoUnset = -1; _eventDispatcher = eventDispatcher; _playbackRateObserverRegistered = NO; + _isExternalPlaybackActiveObserverRegistered = NO; _playbackStalled = NO; _rate = 1.0; _volume = 1.0; @@ -333,12 +336,19 @@ static int const RCTVideoUnset = -1; [_player removeObserver:self forKeyPath:playbackRate context:nil]; _playbackRateObserverRegistered = NO; } + if (_isExternalPlaybackActiveObserverRegistered) { + [_player removeObserver:self forKeyPath:externalPlaybackActive context:nil]; + _isExternalPlaybackActiveObserverRegistered = NO; + } _player = [AVPlayer playerWithPlayerItem:_playerItem]; _player.actionAtItemEnd = AVPlayerActionAtItemEndNone; [_player addObserver:self forKeyPath:playbackRate options:0 context:nil]; _playbackRateObserverRegistered = YES; + + [_player addObserver:self forKeyPath:externalPlaybackActive options:0 context:nil]; + _isExternalPlaybackActiveObserverRegistered = YES; [self addPlayerTimeObserver]; @@ -646,6 +656,12 @@ static int const RCTVideoUnset = -1; _playbackStalled = NO; } } + else if([keyPath isEqualToString:externalPlaybackActive]) { + if(self.onExternalPlaybackChange) { + self.onExternalPlaybackChange(@{@"isExternalPlaybackActive": [NSNumber numberWithBool:_player.isExternalPlaybackActive], + @"target": self.reactTag}); + } + } } else { [super observeValueForKeyPath:keyPath ofObject:object change:change context:context]; } @@ -1290,6 +1306,10 @@ static int const RCTVideoUnset = -1; [_player removeObserver:self forKeyPath:playbackRate context:nil]; _playbackRateObserverRegistered = NO; } + if (_isExternalPlaybackActiveObserverRegistered) { + [_player removeObserver:self forKeyPath:externalPlaybackActive context:nil]; + _isExternalPlaybackActiveObserverRegistered = NO; + } _player = nil; [self removePlayerLayer]; diff --git a/ios/Video/RCTVideoManager.m b/ios/Video/RCTVideoManager.m index e0e0162e..190a1663 100644 --- a/ios/Video/RCTVideoManager.m +++ b/ios/Video/RCTVideoManager.m @@ -56,6 +56,7 @@ RCT_EXPORT_VIEW_PROPERTY(onReadyForDisplay, RCTBubblingEventBlock); RCT_EXPORT_VIEW_PROPERTY(onPlaybackStalled, RCTBubblingEventBlock); RCT_EXPORT_VIEW_PROPERTY(onPlaybackResume, RCTBubblingEventBlock); RCT_EXPORT_VIEW_PROPERTY(onPlaybackRateChange, RCTBubblingEventBlock); +RCT_EXPORT_VIEW_PROPERTY(onExternalPlaybackChange, RCTBubblingEventBlock); - (NSDictionary *)constantsToExport { From 5e2b49c34377c10668681ea4a232580a03e189d5 Mon Sep 17 00:00:00 2001 From: Artur Jaworski Date: Tue, 18 Sep 2018 09:45:12 +0200 Subject: [PATCH 2/3] readme update --- README.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/README.md b/README.md index c1dd0f0f..f0ea1091 100644 --- a/README.md +++ b/README.md @@ -257,6 +257,7 @@ var styles = StyleSheet.create({ * [onLoadStart](#onloadstart) * [onProgress](#onprogress) * [onTimedMetadata](#ontimedmetadata) +* [onExternalPlaybackChange](#onexternalplaybackchange) ### Methods * [dismissFullscreenPlayer](#dismissfullscreenplayer) @@ -721,6 +722,24 @@ Support for timed metadata on Android MediaPlayer is limited at best and only co Platforms: Android ExoPlayer, Android MediaPlayer, iOS +#### onExternalPlaybackChange +Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it's called on connection/disconnection. + +Payload: + +Property | Type | Description +--- | --- | --- +isExternalPlaybackActive | boolean | Boolean indicating is external playback mode is active + +Example: +``` +{ + isExternalPlaybackActive: true +} +``` + +Platforms: iOS + ### Methods Methods operate on a ref to the Video element. You can create a ref using code like: ``` From 407ad14a16643f31877fa9466b4d80b404c8e514 Mon Sep 17 00:00:00 2001 From: Hampton Maxwell Date: Sun, 7 Oct 2018 15:56:15 -0700 Subject: [PATCH 3/3] Reorder onExternalPlaybackChange alphabetically --- README.md | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index f0ea1091..31a8f9b5 100644 --- a/README.md +++ b/README.md @@ -249,6 +249,7 @@ var styles = StyleSheet.create({ ### Event props * [onAudioBecomingNoisy](#onaudiobecomingnoisy) +* [onExternalPlaybackChange](#onexternalplaybackchange) * [onFullscreenPlayerWillPresent](#onfullscreenplayerwillpresent) * [onFullscreenPlayerDidPresent](#onfullscreenplayerdidpresent) * [onFullscreenPlayerWillDismiss](#onfullscreenplayerwilldismiss) @@ -257,7 +258,6 @@ var styles = StyleSheet.create({ * [onLoadStart](#onloadstart) * [onProgress](#onprogress) * [onTimedMetadata](#ontimedmetadata) -* [onExternalPlaybackChange](#onexternalplaybackchange) ### Methods * [dismissFullscreenPlayer](#dismissfullscreenplayer) @@ -587,6 +587,24 @@ Payload: none Platforms: Android ExoPlayer, iOS +#### onExternalPlaybackChange +Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it's called on connection/disconnection. + +Payload: + +Property | Type | Description +--- | --- | --- +isExternalPlaybackActive | boolean | Boolean indicating is external playback mode is active + +Example: +``` +{ + isExternalPlaybackActive: true +} +``` + +Platforms: iOS + #### onFullscreenPlayerWillPresent Callback function that is called when the player is about to enter fullscreen mode. @@ -722,24 +740,6 @@ Support for timed metadata on Android MediaPlayer is limited at best and only co Platforms: Android ExoPlayer, Android MediaPlayer, iOS -#### onExternalPlaybackChange -Callback function that is called when external playback mode for current playing video has changed. Mostly useful when connecting/disconnecting to Apple TV – it's called on connection/disconnection. - -Payload: - -Property | Type | Description ---- | --- | --- -isExternalPlaybackActive | boolean | Boolean indicating is external playback mode is active - -Example: -``` -{ - isExternalPlaybackActive: true -} -``` - -Platforms: iOS - ### Methods Methods operate on a ref to the Video element. You can create a ref using code like: ```