Kaynağa Gözat

[RN] Add VideoQualityLabel indicator for mobile

master
Bettenbuk Zoltan 7 yıl önce
ebeveyn
işleme
118250750a

+ 1
- 0
react/features/base/styles/components/styles/ColorPalette.js Dosyayı Görüntüle

@@ -22,6 +22,7 @@ export const ColorPalette = {
22 22
     blueHighlight: '#1081b2',
23 23
     buttonUnderlay: '#495258',
24 24
     darkGrey: '#555555',
25
+    green: '#40b183',
25 26
     red: '#D00000',
26 27
     white: 'white'
27 28
 };

+ 2
- 0
react/features/conference/components/Conference.native.js Dosyayı Görüntüle

@@ -18,6 +18,7 @@ import { ConferenceNotification } from '../../calendar-sync';
18 18
 import { Filmstrip } from '../../filmstrip';
19 19
 import { LargeVideo } from '../../large-video';
20 20
 import { setToolboxVisible, Toolbox } from '../../toolbox';
21
+import { VideoQualityLabel } from '../../video-quality';
21 22
 
22 23
 import styles from './styles';
23 24
 
@@ -245,6 +246,7 @@ class Conference extends Component<Props> {
245 246
                       * participants.
246 247
                       */}
247 248
                     <Filmstrip />
249
+                    <VideoQualityLabel style = { styles.videoQualityLabel } />
248 250
                 </View>
249 251
                 <TestConnectionInfo />
250 252
 

+ 6
- 0
react/features/conference/components/styles.js Dosyayı Görüntüle

@@ -35,5 +35,11 @@ export default createStyleSheet({
35 35
         // On iPhone X there is the notch. In the two cases BoxModel.margin is
36 36
         // not enough.
37 37
         top: BoxModel.margin * 3
38
+    },
39
+
40
+    videoQualityLabel: {
41
+        right: 0,
42
+        top: 0,
43
+        position: 'absolute'
38 44
     }
39 45
 });

+ 41
- 0
react/features/video-quality/components/AbstractVideoQualityLabel.js Dosyayı Görüntüle

@@ -0,0 +1,41 @@
1
+// @flow
2
+
3
+import { Component } from 'react';
4
+
5
+export type Props = {
6
+
7
+    /**
8
+     * Whether or not the conference is in audio only mode.
9
+     */
10
+    _audioOnly: boolean,
11
+
12
+    /**
13
+     * Invoked to obtain translated strings.
14
+     */
15
+    t: Function
16
+};
17
+
18
+/**
19
+ * Abstract class for the {@code VideoQualityLabel} component.
20
+ */
21
+export default class AbstractVideoQualityLabel<P: Props> extends Component<P> {
22
+
23
+}
24
+
25
+/**
26
+ * Maps (parts of) the Redux state to the associated
27
+ * {@code AbstractVideoQualityLabel}'s props.
28
+ *
29
+ * @param {Object} state - The Redux state.
30
+ * @private
31
+ * @returns {{
32
+ *     _audioOnly: boolean
33
+ * }}
34
+ */
35
+export function _abstractMapStateToProps(state: Object) {
36
+    const { audioOnly } = state['features/base/conference'];
37
+
38
+    return {
39
+        _audioOnly: audioOnly
40
+    };
41
+}

+ 76
- 0
react/features/video-quality/components/VideoQualityLabel.native.js Dosyayı Görüntüle

@@ -0,0 +1,76 @@
1
+// @flow
2
+
3
+import React from 'react';
4
+import { connect } from 'react-redux';
5
+
6
+import { translate } from '../../base/i18n';
7
+import { CircularLabel } from '../../base/label';
8
+import { combineStyles, type StyleType } from '../../base/styles';
9
+
10
+import AbstractVideoQualityLabel, {
11
+    _abstractMapStateToProps,
12
+    type Props as AbstractProps
13
+} from './AbstractVideoQualityLabel';
14
+import styles from './styles';
15
+
16
+type Props = AbstractProps & {
17
+
18
+    /**
19
+     * Style of the component passed as props.
20
+     */
21
+    style: ?StyleType
22
+};
23
+
24
+/**
25
+ * React {@code Component} responsible for displaying a label that indicates
26
+ * the displayed video state of the current conference.
27
+ *
28
+ * NOTE: Due to the lack of actual video quality information on mobile side,
29
+ * this component currently only displays audio only indicator, but the naming
30
+ * is kept consistent with web and in the future we may introduce the required
31
+ * api and extend this component with actual quality indication.
32
+ */
33
+class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
34
+
35
+    /**
36
+     * Implements React {@link Component}'s render.
37
+     *
38
+     * @inheritdoc
39
+     */
40
+    render() {
41
+        const { _audioOnly, style, t } = this.props;
42
+
43
+        if (!_audioOnly) {
44
+            // We don't have info about the quality so no need for the indicator
45
+            return null;
46
+        }
47
+
48
+        return (
49
+            <CircularLabel
50
+                label = { t('videoStatus.audioOnly') }
51
+                style = {
52
+                    combineStyles(styles.indicatorAudioOnly, style)
53
+                } />
54
+        );
55
+    }
56
+}
57
+
58
+/**
59
+ * Maps (parts of) the Redux state to the associated
60
+ * {@code VideoQualityLabel}'s props.
61
+ *
62
+ * NOTE: This component has no props other than the abstract ones but keeping
63
+ * the coding style the same for consistency reasons.
64
+ *
65
+ * @param {Object} state - The Redux state.
66
+ * @private
67
+ * @returns {{
68
+ * }}
69
+ */
70
+function _mapStateToProps(state: Object) {
71
+    return {
72
+        ..._abstractMapStateToProps(state)
73
+    };
74
+}
75
+
76
+export default translate(connect(_mapStateToProps)(VideoQualityLabel));

+ 31
- 39
react/features/video-quality/components/VideoQualityLabel.web.js Dosyayı Görüntüle

@@ -1,6 +1,7 @@
1
+// @flow
2
+
1 3
 import Tooltip from '@atlaskit/tooltip';
2
-import PropTypes from 'prop-types';
3
-import React, { Component } from 'react';
4
+import React from 'react';
4 5
 import { connect } from 'react-redux';
5 6
 
6 7
 import { translate } from '../../base/i18n';
@@ -8,15 +9,38 @@ import { CircularLabel } from '../../base/label';
8 9
 import { MEDIA_TYPE } from '../../base/media';
9 10
 import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';
10 11
 
12
+import AbstractVideoQualityLabel, {
13
+    _abstractMapStateToProps,
14
+    type Props as AbstractProps
15
+} from './AbstractVideoQualityLabel';
16
+
17
+type Props = AbstractProps & {
18
+
19
+    /**
20
+     * The message to show within the label.
21
+     */
22
+    _labelKey: string,
23
+
24
+    /**
25
+     * The message to show within the label's tooltip.
26
+     */
27
+    _tooltipKey: string,
28
+
29
+    /**
30
+     * The redux representation of the JitsiTrack displayed on large video.
31
+     */
32
+    _videoTrack: Object
33
+};
34
+
11 35
 /**
12 36
  * A map of video resolution (number) to translation key.
13 37
  *
14 38
  * @type {Object}
15 39
  */
16 40
 const RESOLUTION_TO_TRANSLATION_KEY = {
17
-    720: 'videoStatus.hd',
18
-    360: 'videoStatus.sd',
19
-    180: 'videoStatus.ld'
41
+    '720': 'videoStatus.hd',
42
+    '360': 'videoStatus.sd',
43
+    '180': 'videoStatus.ld'
20 44
 };
21 45
 
22 46
 /**
@@ -37,38 +61,7 @@ const RESOLUTIONS
37 61
  * will display if not in audio only mode and a high-definition large video is
38 62
  * being displayed.
39 63
  */
40
-export class VideoQualityLabel extends Component {
41
-    /**
42
-     * {@code VideoQualityLabel}'s property types.
43
-     *
44
-     * @static
45
-     */
46
-    static propTypes = {
47
-        /**
48
-         * Whether or not the conference is in audio only mode.
49
-         */
50
-        _audioOnly: PropTypes.bool,
51
-
52
-        /**
53
-         * The message to show within the label.
54
-         */
55
-        _labelKey: PropTypes.string,
56
-
57
-        /**
58
-         * The message to show within the label's tooltip.
59
-         */
60
-        _tooltipKey: PropTypes.string,
61
-
62
-        /**
63
-         * The redux representation of the JitsiTrack displayed on large video.
64
-         */
65
-        _videoTrack: PropTypes.object,
66
-
67
-        /**
68
-         * Invoked to obtain translated strings.
69
-         */
70
-        t: PropTypes.func
71
-    };
64
+export class VideoQualityLabel extends AbstractVideoQualityLabel<Props> {
72 65
 
73 66
     /**
74 67
      * Implements React's {@link Component#render()}.
@@ -157,7 +150,6 @@ function _mapResolutionToTranslationsKeys(resolution) {
157 150
  * @param {Object} state - The Redux state.
158 151
  * @private
159 152
  * @returns {{
160
- *     _audioOnly: boolean,
161 153
  *     _labelKey: string,
162 154
  *     _tooltipKey: string,
163 155
  *     _videoTrack: Object
@@ -176,7 +168,7 @@ function _mapStateToProps(state) {
176 168
         = audioOnly ? {} : _mapResolutionToTranslationsKeys(resolution);
177 169
 
178 170
     return {
179
-        _audioOnly: audioOnly,
171
+        ..._abstractMapStateToProps(state),
180 172
         _labelKey: translationKeys.labelKey,
181 173
         _tooltipKey: translationKeys.tooltipKey,
182 174
         _videoTrack: videoTrackOnLargeVideo

+ 16
- 0
react/features/video-quality/components/styles.js Dosyayı Görüntüle

@@ -0,0 +1,16 @@
1
+// @flow
2
+
3
+import { ColorPalette, createStyleSheet } from '../../base/styles';
4
+
5
+/**
6
+ * The styles of the React {@code Components} of the feature video-quality.
7
+ */
8
+export default createStyleSheet({
9
+
10
+    /**
11
+     * Style for the audio-only indicator.
12
+     */
13
+    indicatorAudioOnly: {
14
+        backgroundColor: ColorPalette.green
15
+    }
16
+});

Loading…
İptal
Kaydet