瀏覽代碼

Updates the unsupported mobile browser page.

master
damencho 7 年之前
父節點
當前提交
67ac0e8b8a

+ 2
- 2
css/_variables.scss 查看文件

138
 /**
138
 /**
139
  * Unsupported browser
139
  * Unsupported browser
140
  */
140
  */
141
-$primaryUnsupportedBrowserButtonBgColor: #17a0db;
142
-$unsupportedBrowserButtonBgColor: #ff9a00;
141
+$primaryUnsupportedBrowserButtonBgColor: #0052CC;
142
+$unsupportedBrowserButtonBgColor: rgba(9, 30, 66, 0.04);
143
 $unsupportedBrowserTextColor: #4a4a4a;
143
 $unsupportedBrowserTextColor: #4a4a4a;
144
 $unsupportedBrowserTextSmallFontSize: 17px;
144
 $unsupportedBrowserTextSmallFontSize: 17px;
145
 $unsupportedBrowserTitleColor: #fff;
145
 $unsupportedBrowserTitleColor: #fff;

+ 8
- 13
css/unsupported-browser/_unsupported-mobile-browser.scss 查看文件

17
     }
17
     }
18
 
18
 
19
     &__text {
19
     &__text {
20
-        font-size: 1.8em;
20
+        font-size: 1.2em;
21
         line-height: em(29px, 21px);
21
         line-height: em(29px, 21px);
22
         margin-bottom: 0.65em;
22
         margin-bottom: 0.65em;
23
 
23
 
39
 
39
 
40
     &__button {
40
     &__button {
41
         border: 0;
41
         border: 0;
42
-        height: 42px;
43
-        margin: 0 auto;
42
+        height: 2.2857142857142856em;
43
+        line-height: 2.2857142857142856em;
44
+        margin: auto auto 9px;
44
         max-width: 300px;
45
         max-width: 300px;
45
-        width: 98%;
46
-        @include border-radius(8px);
46
+        width: auto;
47
+        @include border-radius(3px);
47
         background-color: $unsupportedBrowserButtonBgColor;
48
         background-color: $unsupportedBrowserButtonBgColor;
48
-        font-size: 1.5em;
49
-        font-weight: 300;
50
-        letter-spacing: 0.5px;
51
-        text-shadow: 0px 1px 2px $unsupportedBrowserTextColor;
52
-
53
-        // Disable standard button effects.
54
-        box-shadow: none;
55
-        outline: none;
49
+        color: #505F79;
56
 
50
 
57
         &:active {
51
         &:active {
58
             background-color: $unsupportedBrowserButtonBgColor;
52
             background-color: $unsupportedBrowserButtonBgColor;
60
 
54
 
61
         &_primary {
55
         &_primary {
62
             background-color: $primaryUnsupportedBrowserButtonBgColor;
56
             background-color: $primaryUnsupportedBrowserButtonBgColor;
57
+            color: #FFFFFF;
63
 
58
 
64
             &:active {
59
             &:active {
65
                 background-color: $primaryUnsupportedBrowserButtonBgColor;
60
                 background-color: $primaryUnsupportedBrowserButtonBgColor;

+ 15
- 0
interface_config.js 查看文件

150
      * @type {boolean}
150
      * @type {boolean}
151
      */
151
      */
152
     VIDEO_QUALITY_LABEL_DISABLED: false
152
     VIDEO_QUALITY_LABEL_DISABLED: false
153
+
154
+    /**
155
+     * Specify custom URL for downloading android mobile app.
156
+     */
157
+    // MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
158
+
159
+    /**
160
+     * Specify URL for downloading ios mobile app.
161
+     */
162
+    // MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',
163
+
164
+    /**
165
+     * Specify mobile app scheme for opening the app from the mobile browser.
166
+     */
167
+    // MOBILE_APP_SCHEME: 'org.jitsi.meet'
153
 };
168
 };
154
 
169
 
155
 /* eslint-enable no-unused-vars, no-var, max-len */
170
 /* eslint-enable no-unused-vars, no-var, max-len */

+ 3
- 5
lang/main.json 查看文件

126
         "raiseHand": "Raise / Lower your hand"
126
         "raiseHand": "Raise / Lower your hand"
127
     },
127
     },
128
     "unsupportedBrowser": {
128
     "unsupportedBrowser": {
129
-        "appInstalled": "or if you already have it<br /><strong>then</strong>",
130
-        "appNotInstalled": "You need <strong>__app__</strong> to join a conversation on your mobile",
131
-        "downloadApp": "Download the App",
132
-        "joinConversation": "Join the conversation",
133
-        "startConference": "Start a conference"
129
+        "appNotInstalled": "Join this meeting with __app__ on your phone.",
130
+        "downloadApp": "Download the app",
131
+        "openApp": "Continue to __app__"
134
     },
132
     },
135
     "bottomtoolbar": {
133
     "bottomtoolbar": {
136
         "chat": "Open / close chat",
134
         "chat": "Open / close chat",

+ 19
- 51
react/features/unsupported-browser/components/UnsupportedMobileBrowser.js 查看文件

2
 
2
 
3
 import PropTypes from 'prop-types';
3
 import PropTypes from 'prop-types';
4
 import React, { Component } from 'react';
4
 import React, { Component } from 'react';
5
-import { connect } from 'react-redux';
6
 
5
 
7
 import { translate, translateToHTML } from '../../base/i18n';
6
 import { translate, translateToHTML } from '../../base/i18n';
8
 import { Platform } from '../../base/react';
7
 import { Platform } from '../../base/react';
9
 
8
 
10
 import HideNotificationBarStyle from './HideNotificationBarStyle';
9
 import HideNotificationBarStyle from './HideNotificationBarStyle';
11
 
10
 
11
+declare var interfaceConfig: Object;
12
+
12
 /**
13
 /**
13
  * The namespace of the CSS styles of UnsupportedMobileBrowser.
14
  * The namespace of the CSS styles of UnsupportedMobileBrowser.
14
  *
15
  *
33
  * @type {Array<string>}
34
  * @type {Array<string>}
34
  */
35
  */
35
 const _URLS = {
36
 const _URLS = {
36
-    android: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
37
-    ios: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905'
37
+    android: interfaceConfig.MOBILE_DOWNLOAD_LINK_ANDROID
38
+        || 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
39
+    ios: interfaceConfig.MOBILE_DOWNLOAD_LINK_IOS
40
+        || 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905'
38
 };
41
 };
39
 
42
 
40
 /**
43
 /**
51
      * @static
54
      * @static
52
      */
55
      */
53
     static propTypes = {
56
     static propTypes = {
54
-        /**
55
-         * The name of the conference room to be joined upon clicking the
56
-         * respective button.
57
-         *
58
-         * @private
59
-         * @type {string}
60
-         */
61
-        _room: PropTypes.string,
62
-
63
         /**
57
         /**
64
          * The function to translate human-readable text.
58
          * The function to translate human-readable text.
65
          *
59
          *
76
      * @inheritdoc
70
      * @inheritdoc
77
      */
71
      */
78
     componentWillMount() {
72
     componentWillMount() {
79
-        const joinText
80
-            = this.props._room ? 'joinConversation' : 'startConference';
81
-
82
         // If the user installed the app while this Component was displayed
73
         // If the user installed the app while this Component was displayed
83
         // (e.g. the user clicked the Download the App button), then we would
74
         // (e.g. the user clicked the Download the App button), then we would
84
         // like to open the current URL in the mobile app. The only way to do it
75
         // like to open the current URL in the mobile app. The only way to do it
85
         // appears to be a link with an app-specific scheme, not a Universal
76
         // appears to be a link with an app-specific scheme, not a Universal
86
         // Link.
77
         // Link.
87
-        const joinURL = `org.jitsi.meet:${window.location.href}`;
78
+        const appScheme = interfaceConfig.MOBILE_APP_SCHEME || 'org.jitsi.meet';
79
+        const joinURL = `${appScheme}:${window.location.href}`;
88
 
80
 
89
         this.setState({
81
         this.setState({
90
-            joinText,
91
             joinURL
82
             joinURL
92
         });
83
         });
93
     }
84
     }
101
     render() {
92
     render() {
102
         const { t } = this.props;
93
         const { t } = this.props;
103
 
94
 
104
-        const downloadButtonClassName
95
+        const openAppButtonClassName
105
             = `${_SNS}__button ${_SNS}__button_primary`;
96
             = `${_SNS}__button ${_SNS}__button_primary`;
97
+        const appName
98
+            = interfaceConfig.ADD_PEOPLE_APP_NAME || interfaceConfig.APP_NAME;
106
 
99
 
107
         return (
100
         return (
108
             <div className = { _SNS }>
101
             <div className = { _SNS }>
115
                             translateToHTML(
108
                             translateToHTML(
116
                                 t,
109
                                 t,
117
                                 `${_TNS}.appNotInstalled`,
110
                                 `${_TNS}.appNotInstalled`,
118
-                                { postProcess: 'resolveAppName' })
111
+                                { app: appName })
119
                         }
112
                         }
120
                     </p>
113
                     </p>
121
-                    <a href = { _URLS[Platform.OS] }>
122
-                        <button className = { downloadButtonClassName }>
123
-                            { t(`${_TNS}.downloadApp`) }
114
+                    <a href = { this.state.joinURL }>
115
+                        <button className = { openAppButtonClassName }>
116
+                            { t(`${_TNS}.openApp`,
117
+                                { app: appName }) }
124
                         </button>
118
                         </button>
125
                     </a>
119
                     </a>
126
-                    <p className = { `${_SNS}__text ${_SNS}__text_small` }>
127
-                        { translateToHTML(t, `${_TNS}.appInstalled`) }
128
-                    </p>
129
-                    <a href = { this.state.joinURL }>
120
+                    <a href = { _URLS[Platform.OS] }>
130
                         <button className = { `${_SNS}__button` }>
121
                         <button className = { `${_SNS}__button` }>
131
-                            { t(`${_TNS}.${this.state.joinText}`) }
122
+                            { t(`${_TNS}.downloadApp`) }
132
                         </button>
123
                         </button>
133
                     </a>
124
                     </a>
134
                 </div>
125
                 </div>
139
     }
130
     }
140
 }
131
 }
141
 
132
 
142
-/**
143
- * Maps (parts of) the Redux state to the associated UnsupportedMobileBrowser's
144
- * props.
145
- *
146
- * @param {Object} state - Redux state.
147
- * @private
148
- * @returns {{
149
- *     _room: string
150
- * }}
151
- */
152
-function _mapStateToProps(state) {
153
-    return {
154
-        /**
155
-         * The name of the conference room to be joined upon clicking the
156
-         * respective button.
157
-         *
158
-         * @private
159
-         * @type {string}
160
-         */
161
-        _room: state['features/base/conference'].room
162
-    };
163
-}
164
-
165
-export default translate(connect(_mapStateToProps)(UnsupportedMobileBrowser));
133
+export default translate(UnsupportedMobileBrowser);

Loading…
取消
儲存