From 2494bbf0446146bfff473ccd55b842098b08eaf2 Mon Sep 17 00:00:00 2001 From: Alexandr Voroncov Date: Mon, 27 May 2019 12:05:36 +0300 Subject: [PATCH 1/3] Update build.gradle --- android/build.gradle | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/android/build.gradle b/android/build.gradle index 4880dd61..66756056 100755 --- a/android/build.gradle +++ b/android/build.gradle @@ -10,9 +10,13 @@ buildscript { apply plugin: 'com.android.library' +def safeExtGet(prop, fallback) { + rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback +} + android { - compileSdkVersion 23 - buildToolsVersion "23.0.1" + compileSdkVersion safeExtGet('compileSdkVersion', 28) + buildToolsVersion safeExtGet('buildToolsVersion', '28.0.2') defaultConfig { minSdkVersion 16 @@ -30,6 +34,6 @@ repositories { } dependencies { - compile fileTree(dir: 'libs', include: ['*.jar']) - compile 'com.facebook.react:react-native:+' + implementation fileTree(dir: 'libs', include: ['*.jar']) + implementation 'com.facebook.react:react-native:+' } From 20999adc0b4b551afa6dca6ed8d5f4b338c69171 Mon Sep 17 00:00:00 2001 From: chichilatte Date: Tue, 23 Jun 2020 00:55:16 +0100 Subject: [PATCH 2/3] Reapply: Refactor layout resizing hack for Android native module --- YouTube.android.js | 67 +++++++++++++++++++++++++++++++--------------- 1 file changed, 45 insertions(+), 22 deletions(-) diff --git a/YouTube.android.js b/YouTube.android.js index 7b39fedb..18ea6d36 100644 --- a/YouTube.android.js +++ b/YouTube.android.js @@ -59,20 +59,20 @@ export default class YouTube extends React.Component { super(props); this.state = { - moduleMargin: StyleSheet.hairlineWidth * 2, - fullscreen: props.fullscreen, + fullscreen: props.fullscreen, + resizingHackFlag: false, }; } componentWillMount() { BackHandler.addEventListener('hardwareBackPress', this._backPress); + } - // Periodically triggeting a forced unnoticable layout rendering until onReady to make sure the - // native loading progress is shown - this._interval = setInterval(() => { - this.setState({ moduleMargin: Math.random() / 2 }); - }, 250); + componentDidMount() { + // Make sure the Loading indication is displayed so use this hack before the video loads + this._fireResizingHack(); } + componentWillReceiveProps(nextProps) { // Translate next `fullscreen` prop to state @@ -82,32 +82,53 @@ export default class YouTube extends React.Component { } componentWillUnmount() { - BackHandler.removeEventListener('hardwareBackPress', this._backPress); + BackHandler.removeEventListener('hardwareBackPress', this._backPress); + clearInterval(this._timeout); } + // The Android YouTube native module is pretty problematic when it comes to mounting correctly + // and rendering inside React-Native's views hierarchy. For now we must trigger some layout + // changes to force a real render on it so it will respotision it's controls after several + // specific events + _fireResizingHack() { + clearInterval(this._timeout); + + let wait = 0.2; + + const next = () => { + this.setState(state => ({ resizingHackFlag: !state.resizingHackFlag })); + + wait = wait >= 1.5 ? 1.5 : wait * 1.4; + this._timeout = setTimeout(next, wait * 1000); + }; + + next(); + } + + _backPress = () => { if (this.state.fullscreen) { this.setState({ fullscreen: false }); - return true; + + return true; } return false; }; + _onLayout = () => { + // When the Native player changes it's layout, we should also force a resizing hack to make + // sure the controls are in their correct place + this._fireResizingHack(); + }; + + _onError = event => { if (this.props.onError) this.props.onError(event.nativeEvent); }; _onReady = event => { - clearInterval(this._interval); - - // The Android YouTube native module is pretty problematic when it comes to mounting correctly - // and rendering inside React-Native's views hierarchy. For now we must trigger some layout - // changes to force a real render on it so it will smoothly appear after ready and show - // controls. We also use the minimal margin to avoid `UNAUTHORIZED_OVERLAY` error from the - // native module that is very sensitive to being covered or even touching its containing view. - setTimeout(() => { - this.setState({ moduleMargin: StyleSheet.hairlineWidth }); - }, 250); + this._fireResizingHack(); + if (this.props.onReady) this.props.onReady(event.nativeEvent); }; @@ -183,15 +204,17 @@ export default class YouTube extends React.Component { render() { return ( - + { this._nativeComponentRef = component; }} {...this.props} fullscreen={this.state.fullscreen} - style={[styles.module, { margin: this.state.moduleMargin }]} - onYouTubeError={this._onError} + style={[ + styles.module, + { marginRight: this.state.resizingHackFlag ? StyleSheet.hairlineWidth : 0 }, + ]} onYouTubeReady={this._onReady} onYouTubeChangeState={this._onChangeState} onYouTubeChangeQuality={this._onChangeQuality} From 11c5ff449acda3c8831e8ee48bb739895e8557d8 Mon Sep 17 00:00:00 2001 From: chichilatte Date: Tue, 23 Jun 2020 01:04:00 +0100 Subject: [PATCH 3/3] Version bump to v1.1.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 259672b9..694c750e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-youtube", - "version": "1.1.0", + "version": "1.1.1", "description": "A component for React Native.", "main": "main.js", "scripts": {