浏览代码

feat: add icon based avatar and icon for pstn

master
Bettenbuk Zoltan 6 年前
父节点
当前提交
42814eac7d

+ 2
- 2
package-lock.json 查看文件

9042
       }
9042
       }
9043
     },
9043
     },
9044
     "lib-jitsi-meet": {
9044
     "lib-jitsi-meet": {
9045
-      "version": "github:jitsi/lib-jitsi-meet#d9a5afe94bf525fe9b294ae0d5dfe2ad86838b45",
9046
-      "from": "github:jitsi/lib-jitsi-meet#d9a5afe94bf525fe9b294ae0d5dfe2ad86838b45",
9045
+      "version": "github:jitsi/lib-jitsi-meet#8a4d1f1b085131aca3cec5513fa7995cf7508fc2",
9046
+      "from": "github:jitsi/lib-jitsi-meet#8a4d1f1b085131aca3cec5513fa7995cf7508fc2",
9047
       "requires": {
9047
       "requires": {
9048
         "@jitsi/sdp-interop": "0.1.14",
9048
         "@jitsi/sdp-interop": "0.1.14",
9049
         "@jitsi/sdp-simulcast": "0.2.1",
9049
         "@jitsi/sdp-simulcast": "0.2.1",

+ 1
- 1
package.json 查看文件

54
     "js-utils": "github:jitsi/js-utils#192b1c996e8c05530eb1f19e82a31069c3021e31",
54
     "js-utils": "github:jitsi/js-utils#192b1c996e8c05530eb1f19e82a31069c3021e31",
55
     "jsrsasign": "8.0.12",
55
     "jsrsasign": "8.0.12",
56
     "jwt-decode": "2.2.0",
56
     "jwt-decode": "2.2.0",
57
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#d9a5afe94bf525fe9b294ae0d5dfe2ad86838b45",
57
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#8a4d1f1b085131aca3cec5513fa7995cf7508fc2",
58
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
58
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
59
     "lodash": "4.17.11",
59
     "lodash": "4.17.11",
60
     "moment": "2.19.4",
60
     "moment": "2.19.4",

+ 13
- 1
react/features/base/avatar/components/AbstractStatelessAvatar.js 查看文件

34
  * Implements an abstract stateless avatar component that renders an avatar purely from what gets passed through
34
  * Implements an abstract stateless avatar component that renders an avatar purely from what gets passed through
35
  * props.
35
  * props.
36
  */
36
  */
37
-export default class AbstractStatelessAvatar<P: Props> extends PureComponent<P> {}
37
+export default class AbstractStatelessAvatar<P: Props> extends PureComponent<P> {
38
+    /**
39
+     * Parses an icon out of a specially constructed icon URL and returns the icon name.
40
+     *
41
+     * @param {string?} url - The url to parse.
42
+     * @returns {string?}
43
+     */
44
+    _parseIconUrl(url: ?string): ?string {
45
+        const match = url && url.match(/icon:\/\/(.+)/i);
46
+
47
+        return (match && match[1]) || undefined;
48
+    }
49
+}

+ 9
- 8
react/features/base/avatar/components/Avatar.js 查看文件

138
         if (effectiveURL) {
138
         if (effectiveURL) {
139
             avatarProps.onAvatarLoadError = this._onAvatarLoadError;
139
             avatarProps.onAvatarLoadError = this._onAvatarLoadError;
140
             avatarProps.url = effectiveURL;
140
             avatarProps.url = effectiveURL;
141
-        } else {
142
-            const initials = getInitials(_initialsBase);
141
+        }
142
+
143
+        const initials = getInitials(_initialsBase);
143
 
144
 
144
-            if (initials) {
145
-                avatarProps.color = getAvatarColor(colorBase || _initialsBase);
146
-                avatarProps.initials = initials;
147
-            }
145
+        if (initials) {
146
+            avatarProps.color = getAvatarColor(colorBase || _initialsBase);
147
+            avatarProps.initials = initials;
148
         }
148
         }
149
 
149
 
150
         return (
150
         return (
175
  * @returns {Props}
175
  * @returns {Props}
176
  */
176
  */
177
 export function _mapStateToProps(state: Object, ownProps: Props) {
177
 export function _mapStateToProps(state: Object, ownProps: Props) {
178
-    const { colorBase, displayName, participantId } = ownProps;
178
+    const { colorBase, displayName, participantId, url } = ownProps;
179
     const _participant = participantId && getParticipantById(state, participantId);
179
     const _participant = participantId && getParticipantById(state, participantId);
180
     const _initialsBase = (_participant && _participant.name) || displayName;
180
     const _initialsBase = (_participant && _participant.name) || displayName;
181
 
181
 
182
     return {
182
     return {
183
         _initialsBase,
183
         _initialsBase,
184
         _loadableAvatarUrl: _participant && _participant.loadableAvatarUrl,
184
         _loadableAvatarUrl: _participant && _participant.loadableAvatarUrl,
185
-        colorBase: !colorBase && _participant ? _participant.id : colorBase
185
+        colorBase: !colorBase && _participant ? _participant.id : colorBase,
186
+        url: !url && _participant && _participant.isJigasi ? 'icon://phone' : url
186
     };
187
     };
187
 }
188
 }
188
 
189
 

+ 32
- 1
react/features/base/avatar/components/native/StatelessAvatar.js 查看文件

8
 import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
8
 import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
9
 
9
 
10
 import styles from './styles';
10
 import styles from './styles';
11
+import { Icon } from '../../../font-icons';
11
 
12
 
12
 type Props = AbstractProps & {
13
 type Props = AbstractProps & {
13
 
14
 
34
 
35
 
35
         let avatar;
36
         let avatar;
36
 
37
 
37
-        if (url) {
38
+        const icon = this._parseIconUrl(url);
39
+
40
+        if (icon) {
41
+            avatar = this._renderIconAvatar(icon);
42
+        } else if (url) {
38
             avatar = this._renderURLAvatar();
43
             avatar = this._renderURLAvatar();
39
         } else if (initials) {
44
         } else if (initials) {
40
             avatar = this._renderInitialsAvatar();
45
             avatar = this._renderInitialsAvatar();
53
         );
58
         );
54
     }
59
     }
55
 
60
 
61
+    _parseIconUrl: ?string => ?string
62
+
56
     /**
63
     /**
57
      * Renders the default avatar.
64
      * Renders the default avatar.
58
      *
65
      *
71
         );
78
         );
72
     }
79
     }
73
 
80
 
81
+    /**
82
+     * Renders the initials-based avatar.
83
+     *
84
+     * @param {string} icon - The icon name to render.
85
+     * @returns {React$Element<*>}
86
+     */
87
+    _renderIconAvatar(icon) {
88
+        const { color, size } = this.props;
89
+
90
+        return (
91
+            <View
92
+                style = { [
93
+                    styles.initialsContainer,
94
+                    {
95
+                        backgroundColor: color
96
+                    }
97
+                ] }>
98
+                <Icon
99
+                    name = { icon }
100
+                    style = { styles.initialsText(size) } />
101
+            </View>
102
+        );
103
+    }
104
+
74
     /**
105
     /**
75
      * Renders the initials-based avatar.
106
      * Renders the initials-based avatar.
76
      *
107
      *

+ 14
- 0
react/features/base/avatar/components/web/StatelessAvatar.js 查看文件

34
      */
34
      */
35
     render() {
35
     render() {
36
         const { initials, url } = this.props;
36
         const { initials, url } = this.props;
37
+        const icon = this._parseIconUrl(url);
38
+
39
+        if (icon) {
40
+            return (
41
+                <div
42
+                    className = { this._getAvatarClassName() }
43
+                    id = { this.props.id }
44
+                    style = { this._getAvatarStyle(this.props.color) }>
45
+                    <i className = { `icon-${icon}` } />
46
+                </div>
47
+            );
48
+        }
37
 
49
 
38
         if (url) {
50
         if (url) {
39
             return (
51
             return (
106
     _getAvatarClassName(additional) {
118
     _getAvatarClassName(additional) {
107
         return `avatar ${additional || ''} ${this.props.className || ''}`;
119
         return `avatar ${additional || ''} ${this.props.className || ''}`;
108
     }
120
     }
121
+
122
+    _parseIconUrl: ?string => ?string
109
 }
123
 }

+ 7
- 0
react/features/base/participants/middleware.js 查看文件

196
                 JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
196
                 JitsiConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
197
                 (participant, propertyName, oldValue, newValue) => {
197
                 (participant, propertyName, oldValue, newValue) => {
198
                     switch (propertyName) {
198
                     switch (propertyName) {
199
+                    case 'features_jigasi':
200
+                        store.dispatch(participantUpdated({
201
+                            conference,
202
+                            id: participant.getId(),
203
+                            isJigasi: newValue
204
+                        }));
205
+                        break;
199
                     case 'features_screen-sharing':
206
                     case 'features_screen-sharing':
200
                         store.dispatch(participantUpdated({
207
                         store.dispatch(participantUpdated({
201
                             conference,
208
                             conference,

+ 2
- 0
react/features/base/participants/reducer.js 查看文件

188
         dominantSpeaker,
188
         dominantSpeaker,
189
         email,
189
         email,
190
         isFakeParticipant,
190
         isFakeParticipant,
191
+        isJigasi,
191
         loadableAvatarUrl,
192
         loadableAvatarUrl,
192
         local,
193
         local,
193
         name,
194
         name,
219
         email,
220
         email,
220
         id,
221
         id,
221
         isFakeParticipant,
222
         isFakeParticipant,
223
+        isJigasi,
222
         loadableAvatarUrl,
224
         loadableAvatarUrl,
223
         local: local || false,
225
         local: local || false,
224
         name,
226
         name,

+ 1
- 1
react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js 查看文件

417
             selected
417
             selected
418
                 = inviteItems.find(_.matchesProperty('number', item.number));
418
                 = inviteItems.find(_.matchesProperty('number', item.number));
419
             renderableItem = {
419
             renderableItem = {
420
-                avatar: 'phone',
420
+                avatar: 'icon://phone',
421
                 key: item.number,
421
                 key: item.number,
422
                 title: item.number
422
                 title: item.number
423
             };
423
             };

正在加载...
取消
保存