feat(rn,ui) get rid of the gradients

2021-03-18 11:54:49 +01:00 · 2021-03-18 11:54:49 +01:00 · 2f5ab2757f
parent bde26c4fbb
commit 2f5ab2757f
10 changed files with 38 additions and 145 deletions
--- a/android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java
+++ b/android/sdk/src/main/java/org/jitsi/meet/sdk/ReactInstanceManagerHolder.java
@ -178,7 +178,6 @@ class ReactInstanceManagerHolder {

        List<ReactPackage> packages
            = new ArrayList<>(Arrays.asList(
-                new com.BV.LinearGradient.LinearGradientPackage(),
                new com.calendarevents.CalendarEventsPackage(),
                new com.corbt.keepawake.KCKeepAwakePackage(),
                new com.facebook.react.shell.MainReactPackage(),
--- a/ios/Podfile
+++ b/ios/Podfile
@ -61,7 +61,6 @@ target 'JitsiMeetSDK' do
  pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
  pod 'react-native-webview', :path => '../node_modules/react-native-webview'
  pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
-  pod 'BVLinearGradient', :path => '../node_modules/react-native-linear-gradient'
  pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'
  pod 'RNDeviceInfo', :path => '../node_modules/react-native-device-info'
  pod 'RNGoogleSignin', :path => '../node_modules/@react-native-community/google-signin'
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -5,8 +5,6 @@ PODS:
  - AppAuth/Core (1.2.0)
  - AppAuth/ExternalUserAgent (1.2.0)
  - boost-for-react-native (1.63.0)
-  - BVLinearGradient (2.5.6):
-    - React
  - CocoaLumberjack (3.5.3):
    - CocoaLumberjack/Core (= 3.5.3)
  - CocoaLumberjack/Core (3.5.3)
@ -371,7 +369,6 @@ PODS:
  - Yoga (1.14.0)

 DEPENDENCIES:
-  - BVLinearGradient (from `../node_modules/react-native-linear-gradient`)
  - CocoaLumberjack (~> 3.5.3)
  - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
  - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector/`)
@ -442,8 +439,6 @@ SPEC REPOS:
    - PromisesObjC

 EXTERNAL SOURCES:
-  BVLinearGradient:
-    :path: "../node_modules/react-native-linear-gradient"
  DoubleConversion:
    :podspec: "../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec"
  FBLazyVector:
@ -526,7 +521,6 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
  AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
  boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
-  BVLinearGradient: e3aad03778a456d77928f594a649e96995f1c872
  CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
  DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
  FBLazyVector: ca7f56c8ff6cd8590f7a673d7903b06019805581
@ -584,6 +578,6 @@ SPEC CHECKSUMS:
  RNWatch: a5320c959c75e72845c07985f3e935e58998f1d3
  Yoga: 96b469c5e81ff51b917b92e8c3390642d4ded30c

-PODFILE CHECKSUM: 5be5132e41831a98362eeed760558227a4df89ae
+PODFILE CHECKSUM: d059cebf82da14a53940a16c24c3330752d4b0c8

 COCOAPODS: 1.10.1
--- a/package-lock.json
+++ b/package-lock.json
@ -13956,11 +13956,6 @@
      "resolved": "https://registry.npmjs.org/react-native-keep-awake/-/react-native-keep-awake-4.0.0.tgz",
      "integrity": "sha512-0Fotox+eLXQooeibVs3P60yASYUWjtRw9MZNmbuHt5UZQrgUrAKsE4jm7gTr4tPU1m1RkwGzcgUFpcOkh/ec7g=="
    },
-    "react-native-linear-gradient": {
-      "version": "2.5.6",
-      "resolved": "https://registry.npmjs.org/react-native-linear-gradient/-/react-native-linear-gradient-2.5.6.tgz",
-      "integrity": "sha512-HDwEaXcQIuXXCV70O+bK1rizFong3wj+5Q/jSyifKFLg0VWF95xh8XQgfzXwtq0NggL9vNjPKXa016KuFu+VFg=="
-    },
    "react-native-sound": {
      "version": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
      "from": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190"
--- a/package.json
+++ b/package.json
@ -76,7 +76,6 @@
    "react-native-device-info": "8.0.0",
    "react-native-immersive": "2.0.0",
    "react-native-keep-awake": "4.0.0",
-    "react-native-linear-gradient": "2.5.6",
    "react-native-sound": "github:jitsi/react-native-sound#3fe5480fce935e888d5089d94a191c7c7e3aa190",
    "react-native-splash-screen": "3.2.0",
    "react-native-svg": "12.1.0",
--- a/react/features/conference/components/native/Conference.js
+++ b/react/features/conference/components/native/Conference.js
@ -2,7 +2,6 @@

 import React from 'react';
 import { NativeModules, SafeAreaView, StatusBar } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';

 import { appNavigate } from '../../../app/actions';
 import { PIP_ENABLED, FULLSCREEN_ENABLED, getFeatureFlag } from '../../../base/flags';
@ -37,7 +36,7 @@ import type { AbstractProps } from '../AbstractConference';
 import Labels from './Labels';
 import LonelyMeetingExperience from './LonelyMeetingExperience';
 import NavigationBar from './NavigationBar';
-import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
+import styles from './styles';


 /**
@ -238,17 +237,11 @@ class Conference extends AbstractConference<Props, *> {
     */
    _renderContent() {
        const {
-            _aspectRatio,
            _connecting,
-            _filmstripVisible,
            _largeVideoParticipantId,
            _reducedUI,
-            _shouldDisplayTileView,
-            _toolboxVisible
+            _shouldDisplayTileView
        } = this.props;
-        const showGradient = _toolboxVisible;
-        const applyGradientStretching
-            = _filmstripVisible && _aspectRatio === ASPECT_RATIO_NARROW && !_shouldDisplayTileView;

        if (_reducedUI) {
            return this._renderContentForReducedUi();
@ -284,22 +277,6 @@ class Conference extends AbstractConference<Props, *> {
                    pointerEvents = 'box-none'
                    style = { styles.toolboxAndFilmstripContainer }>

-                    { showGradient && <LinearGradient
-                        colors = { NAVBAR_GRADIENT_COLORS }
-                        end = {{
-                            x: 0.0,
-                            y: 0.0
-                        }}
-                        pointerEvents = 'none'
-                        start = {{
-                            x: 0.0,
-                            y: 1.0
-                        }}
-                        style = { [
-                            styles.bottomGradient,
-                            applyGradientStretching ? styles.gradientStretchBottom : undefined
-                        ] } />}
-
                    <Labels />

                    <Captions onPress = { this._onClick } />
--- a/react/features/conference/components/native/NavigationBar.js
+++ b/react/features/conference/components/native/NavigationBar.js
@ -1,8 +1,7 @@
 // @flow

-import React, { Component } from 'react';
-import { SafeAreaView, Text, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
+import React from 'react';
+import { Text, View } from 'react-native';

 import { getConferenceName } from '../../../base/conference';
 import { getFeatureFlag, CONFERENCE_TIMER_ENABLED, MEETING_NAME_ENABLED } from '../../../base/flags';
@ -11,7 +10,8 @@ import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { isToolboxVisible } from '../../../toolbox/functions.native';
 import ConferenceTimer from '../ConferenceTimer';

-import styles, { NAVBAR_GRADIENT_COLORS } from './styles';
+import styles from './styles';
+

 type Props = {

@ -39,54 +39,39 @@ type Props = {
 /**
 * Implements a navigation bar component that is rendered on top of the
 * conference screen.
+ *
+ * @param {Props} props - The React props passed to this component.
+ * @returns {React.Node}
 */
-class NavigationBar extends Component<Props> {
-    /**
-     * Implements {@Component#render}.
-     *
-     * @inheritdoc
-     */
-    render() {
-        if (!this.props._visible) {
-            return null;
-        }
-
-        return [
-            <LinearGradient
-                colors = { NAVBAR_GRADIENT_COLORS }
-                key = { 1 }
-                pointerEvents = 'none'
-                style = { styles.gradient }>
-                <SafeAreaView>
-                    <View style = { styles.gradientStretchTop } />
-                </SafeAreaView>
-            </LinearGradient>,
-            <View
-                key = { 2 }
-                pointerEvents = 'box-none'
-                style = { styles.navBarWrapper }>
-                <PictureInPictureButton
-                    styles = { styles.navBarButton } />
-                <View
-                    pointerEvents = 'box-none'
-                    style = { styles.roomNameWrapper }>
-                    {
-                        this.props._meetingNameEnabled
-                        && <Text
-                            numberOfLines = { 1 }
-                            style = { styles.roomName }>
-                            { this.props._meetingName }
-                        </Text>
-                    }
-                    {
-                        this.props._conferenceTimerEnabled && <ConferenceTimer />
-                    }
-                </View>
-            </View>
-        ];
+const NavigationBar = (props: Props) => {
+    if (!props._visible) {
+        return null;
    }

-}
+    return (
+        <View
+            pointerEvents = 'box-none'
+            style = { styles.navBarWrapper }>
+            <PictureInPictureButton
+                styles = { styles.navBarButton } />
+            <View
+                pointerEvents = 'box-none'
+                style = { styles.roomNameWrapper }>
+                {
+                    props._meetingNameEnabled
+                    && <Text
+                        numberOfLines = { 1 }
+                        style = { styles.roomName }>
+                        { props._meetingName }
+                    </Text>
+                }
+                {
+                    props._conferenceTimerEnabled && <ConferenceTimer />
+                }
+            </View>
+        </View>
+    );
+};

 /**
 * Maps part of the Redux store to the props of this component.
--- a/react/features/conference/components/native/styles.js
+++ b/react/features/conference/components/native/styles.js
@ -2,28 +2,13 @@ import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
 import { BoxModel, ColorPalette, fixAndroidViewClipping } from '../../../base/styles';
 import { FILMSTRIP_SIZE } from '../../../filmstrip';

-export const NAVBAR_GRADIENT_COLORS = [ '#000000FF', '#00000000' ];
 export const INSECURE_ROOM_NAME_LABEL_COLOR = ColorPalette.warning;

-// From brand guideline
-const BOTTOM_GRADIENT_HEIGHT = 290;
-const DEFAULT_GRADIENT_SIZE = 140;
-
 /**
 * The styles of the feature conference.
 */
 export default {

-    bottomGradient: {
-        bottom: 0,
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-        minHeight: DEFAULT_GRADIENT_SIZE,
-        left: 0,
-        position: 'absolute',
-        right: 0
-    },
-
    /**
     * {@code Conference} style.
     */
@ -37,22 +22,6 @@ export default {
        margin: 10
    },

-    gradient: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        flex: 1
-    },
-
-    gradientStretchBottom: {
-        height: BOTTOM_GRADIENT_HEIGHT
-    },
-
-    gradientStretchTop: {
-        height: DEFAULT_GRADIENT_SIZE
-    },
-
    /**
     * View that contains the indicators.
     */
--- a/react/features/mobile/incoming-call/components/IncomingCallPage.js
+++ b/react/features/mobile/incoming-call/components/IncomingCallPage.js
@ -2,7 +2,6 @@

 import React, { Component } from 'react';
 import { Image, Text, View } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';

 import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n';
@ -10,11 +9,7 @@ import { connect } from '../../../base/redux';

 import AnswerButton from './AnswerButton';
 import DeclineButton from './DeclineButton';
-import styles, {
-    AVATAR_BORDER_GRADIENT,
-    BACKGROUND_OVERLAY_GRADIENT,
-    CALLER_AVATAR_SIZE
-} from './styles';
+import styles, { CALLER_AVATAR_SIZE } from './styles';

 /**
 * The type of React {@code Component} props of {@link IncomingCallPage}.
@ -66,9 +61,6 @@ class IncomingCallPage extends Component<Props> {
                        source = {{ uri: this.props._callerAvatarURL }}
                        style = { styles.backgroundAvatarImage } />
                </View>
-                <LinearGradient
-                    colors = { BACKGROUND_OVERLAY_GRADIENT }
-                    style = { styles.backgroundOverlayGradient } />
                <Text style = { styles.title }>
                    { callTitle }
                </Text>
@ -124,9 +116,6 @@ class IncomingCallPage extends Component<Props> {
    _renderCallerAvatar() {
        return (
            <View style = { styles.avatarContainer }>
-                <LinearGradient
-                    colors = { AVATAR_BORDER_GRADIENT }
-                    style = { styles.avatarBorder } />
                <View style = { styles.avatar }>
                    <Avatar
                        size = { CALLER_AVATAR_SIZE }
--- a/react/features/mobile/incoming-call/components/styles.js
+++ b/react/features/mobile/incoming-call/components/styles.js
@ -1,9 +1,5 @@
 import { ColorPalette, createStyleSheet } from '../../../base/styles';

-export const AVATAR_BORDER_GRADIENT = [ '#4C9AFF', '#0052CC' ];
-
-export const BACKGROUND_OVERLAY_GRADIENT = [ '#0052CC', '#4C9AFF' ];
-
 const BUTTON_SIZE = 56;

 const CALLER_AVATAR_BORDER_WIDTH = 3;
@ -85,15 +81,6 @@ export default createStyleSheet({
        flex: 1
    },

-    backgroundOverlayGradient: {
-        bottom: 0,
-        left: 0,
-        opacity: 0.9,
-        position: 'absolute',
-        right: 0,
-        top: 0
-    },
-
    buttonsContainer: {
        alignItems: 'flex-end',
        flex: 1,