浏览代码

Fix(React): Modifies thumbnail icon positions and layout

master
yanas 8 年前
父节点
当前提交
043fd6e259

+ 8
- 4
react/features/filmStrip/components/Thumbnail.js 查看文件

86
             };
86
             };
87
         }
87
         }
88
 
88
 
89
+        const thumbToolbarStyle = styles.thumbnailIndicatorContainer;
90
+
89
         // We don't render audio in any of the following:
91
         // We don't render audio in any of the following:
90
         // 1. The audio (source) is muted. There's no practical reason (that we
92
         // 1. The audio (source) is muted. There's no practical reason (that we
91
         //    know of, anyway) why we'd want to render it given that it's
93
         //    know of, anyway) why we'd want to render it given that it's
121
                 { participant.dominantSpeaker
123
                 { participant.dominantSpeaker
122
                     && <DominantSpeakerIndicator /> }
124
                     && <DominantSpeakerIndicator /> }
123
 
125
 
124
-                { audioMuted
125
-                    && <AudioMutedIndicator /> }
126
+                <Container style = { thumbToolbarStyle }>
127
+                    { audioMuted
128
+                        && <AudioMutedIndicator /> }
126
 
129
 
127
-                { videoMuted
128
-                    && <VideoMutedIndicator /> }
130
+                    { videoMuted
131
+                        && <VideoMutedIndicator /> }
132
+                </Container>
129
 
133
 
130
             </Container>
134
             </Container>
131
         );
135
         );

+ 1
- 1
react/features/filmStrip/components/native/AudioMutedIndicator.js 查看文件

16
         return (
16
         return (
17
             <Icon
17
             <Icon
18
                 name = 'microphone-slash'
18
                 name = 'microphone-slash'
19
-                style = { styles.audioMutedIndicator } />
19
+                style = { styles.thumbnailIndicator } />
20
         );
20
         );
21
     }
21
     }
22
 }
22
 }

+ 1
- 1
react/features/filmStrip/components/native/VideoMutedIndicator.js 查看文件

18
         return (
18
         return (
19
             <Icon
19
             <Icon
20
                 name = 'eye-slash'
20
                 name = 'eye-slash'
21
-                style = { styles.videoMutedIndicator } />
21
+                style = { styles.thumbnailIndicator } />
22
         );
22
         );
23
     }
23
     }
24
 }
24
 }

+ 8
- 9
react/features/filmStrip/components/native/styles.js 查看文件

22
     /**
22
     /**
23
      * Audio muted indicator style.
23
      * Audio muted indicator style.
24
      */
24
      */
25
-    audioMutedIndicator: indicator,
25
+    thumbnailIndicator: indicator,
26
+
27
+    dominantSpeakerIndicator: {
28
+        fontSize: 12
29
+    },
26
 
30
 
27
     /**
31
     /**
28
      * Dominant speaker indicator background style.
32
      * Dominant speaker indicator background style.
29
      */
33
      */
30
     dominantSpeakerIndicatorBackground: {
34
     dominantSpeakerIndicatorBackground: {
31
-        borderRadius: 15,
32
-        padding: 5
35
+        borderRadius: 16,
36
+        padding: 4
33
     },
37
     },
34
 
38
 
35
     /**
39
     /**
43
     thumbnail: {
47
     thumbnail: {
44
         height: 80,
48
         height: 80,
45
         width: 80
49
         width: 80
46
-    },
47
-
48
-   /**
49
-     * Video muted indicator style.
50
-     */
51
-    videoMutedIndicator: indicator
50
+    }
52
 });
51
 });

+ 31
- 27
react/features/filmStrip/components/styles.js 查看文件

4
  * Film strip related styles common to both Web and native.
4
  * Film strip related styles common to both Web and native.
5
  */
5
  */
6
 export const styles = {
6
 export const styles = {
7
-    /**
8
-     * Audio muted indicator style.
9
-     */
10
-    audioMutedIndicator: {
11
-        backgroundColor: 'transparent',
12
-        color: ColorPalette.white,
13
-        left: 20,
14
-        position: 'absolute',
15
-        top: 1
16
-    },
17
-
18
     /**
7
     /**
19
      * Dominant speaker indicator style.
8
      * Dominant speaker indicator style.
20
      */
9
      */
29
     dominantSpeakerIndicatorBackground: {
18
     dominantSpeakerIndicatorBackground: {
30
         backgroundColor: ColorPalette.blue,
19
         backgroundColor: ColorPalette.blue,
31
         borderRadius: 15,
20
         borderRadius: 15,
32
-        bottom: 2,
33
-        left: 1,
21
+        left: 4,
34
         padding: 5,
22
         padding: 5,
35
-        position: 'absolute'
23
+        position: 'absolute',
24
+        top: 4
36
     },
25
     },
37
 
26
 
38
     /**
27
     /**
63
      */
52
      */
64
     moderatorIndicator: {
53
     moderatorIndicator: {
65
         backgroundColor: 'transparent',
54
         backgroundColor: 'transparent',
55
+        bottom: 4,
66
         color: ColorPalette.white,
56
         color: ColorPalette.white,
67
-        left: 1,
68
         position: 'absolute',
57
         position: 'absolute',
69
-        top: 1
58
+        right: 4
70
     },
59
     },
71
 
60
 
72
     /**
61
     /**
76
         alignItems: 'stretch',
65
         alignItems: 'stretch',
77
         backgroundColor: ColorPalette.appBackground,
66
         backgroundColor: ColorPalette.appBackground,
78
         borderColor: '#424242',
67
         borderColor: '#424242',
68
+        borderRadius: 3,
79
         borderStyle: 'solid',
69
         borderStyle: 'solid',
80
         borderWidth: 1,
70
         borderWidth: 1,
81
         flex: 1,
71
         flex: 1,
82
         justifyContent: 'center',
72
         justifyContent: 'center',
73
+        marginLeft: 2,
74
+        marginRight: 2,
83
         overflow: 'hidden',
75
         overflow: 'hidden',
84
         position: 'relative'
76
         position: 'relative'
85
     },
77
     },
86
 
78
 
79
+    /**
80
+     * The thumbnail audio and video muted indicator style.
81
+     */
82
+    thumbnailIndicator: {
83
+        backgroundColor: 'transparent',
84
+        color: ColorPalette.white,
85
+        paddingLeft: 1,
86
+        paddingRight: 1,
87
+        position: 'relative'
88
+    },
89
+
90
+    /**
91
+     * The thumbnails indicator container.
92
+     */
93
+    thumbnailIndicatorContainer: {
94
+        alignSelf: 'stretch',
95
+        bottom: 4,
96
+        flex: 1,
97
+        flexDirection: 'row',
98
+        left: 4,
99
+        position: 'absolute'
100
+    },
101
+
87
     /**
102
     /**
88
      * Pinned video thumbnail style.
103
      * Pinned video thumbnail style.
89
      */
104
      */
95
             width: 5
110
             width: 5
96
         },
111
         },
97
         shadowRadius: 5
112
         shadowRadius: 5
98
-    },
99
-
100
-    /**
101
-     * Video muted indicator style.
102
-     */
103
-    videoMutedIndicator: {
104
-        backgroundColor: 'transparent',
105
-        color: ColorPalette.white,
106
-        left: 35,
107
-        position: 'absolute',
108
-        top: 1
109
     }
113
     }
110
 };
114
 };

正在加载...
取消
保存