Browse Source

Some fixes mentioned in the PR

j8
Ilya Daynatovich 8 years ago
parent
commit
60b14e9b45

+ 4
- 0
react/features/base/react/Platform.web.js View File

7
     OS = 'android';
7
     OS = 'android';
8
 } else if (userAgent.match(/iP(ad|hone|od)/i)) {
8
 } else if (userAgent.match(/iP(ad|hone|od)/i)) {
9
     OS = 'ios';
9
     OS = 'ios';
10
+} else if (userAgent.match(/windows/i)) {
11
+    OS = 'windows';
12
+} else if (userAgent.match(/mac/i)) {
13
+    OS = 'mac';
10
 }
14
 }
11
 
15
 
12
 /**
16
 /**

+ 5
- 2
react/features/unsupported-browser/components/NoMobileApp.js View File

2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
 
4
 
5
+import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
6
+
5
 declare var interfaceConfig: Object;
7
 declare var interfaceConfig: Object;
6
 
8
 
7
 /**
9
 /**
22
         return (
24
         return (
23
             <div className = { ns }>
25
             <div className = { ns }>
24
                 <h2 className = { `${ns}__title` }>
26
                 <h2 className = { `${ns}__title` }>
25
-                    Video chat isn't available in the mobile apps
27
+                    Video chat isn't available on mobile
26
                 </h2>
28
                 </h2>
27
                 <p className = { `${ns}__description` }>
29
                 <p className = { `${ns}__description` }>
28
-                    Video chat isn't available on mobile
30
+                    Please use {interfaceConfig.APP_NAME} on
29
                     Desktop to join calls.
31
                     Desktop to join calls.
30
                 </p>
32
                 </p>
33
+                <UnsupportedMobileBrowserStyle />
31
             </div>
34
             </div>
32
         );
35
         );
33
     }
36
     }

+ 53
- 15
react/features/unsupported-browser/components/UnsupportedDesktopBrowser.js View File

2
 
2
 
3
 import React, { Component } from 'react';
3
 import React, { Component } from 'react';
4
 
4
 
5
+import { Platform } from '../../base/react';
6
+
5
 import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
7
 import { CHROME, FIREFOX, IE, SAFARI } from './browserLinks';
6
 
8
 
9
+/**
10
+ * Describes styles namespace for this component.
11
+ *
12
+ * @type {string}
13
+ */
14
+const NS = 'unsupported-desktop-browser';
15
+
7
 /**
16
 /**
8
  * React component representing unsupported browser page.
17
  * React component representing unsupported browser page.
9
  *
18
  *
16
      * @returns {ReactElement}
25
      * @returns {ReactElement}
17
      */
26
      */
18
     render() {
27
     render() {
19
-        const ns = 'unsupported-desktop-browser';
20
-        const nsLink = `${ns}__link`;
21
-
22
         return (
28
         return (
23
-            <div className = { ns }>
24
-                <h2 className = { `${ns}__title` }>
29
+            <div className = { NS }>
30
+                <h2 className = { `${NS}__title` }>
25
                     It looks like you're using a browser we don't support.
31
                     It looks like you're using a browser we don't support.
26
                 </h2>
32
                 </h2>
27
-                <p className = { `${ns}__description` }>
33
+                <p className = { `${NS}__description` }>
28
                     Please try again with the latest version of&nbsp;
34
                     Please try again with the latest version of&nbsp;
29
                     <a
35
                     <a
30
-                        className = { nsLink }
36
+                        className = { `${NS}__link` }
31
                         href = { CHROME } >Chrome</a>,&nbsp;
37
                         href = { CHROME } >Chrome</a>,&nbsp;
32
                     <a
38
                     <a
33
-                        className = { nsLink }
34
-                        href = { FIREFOX }>Firefox</a>,&nbsp;
35
-                    <a
36
-                        className = { nsLink }
37
-                        href = { SAFARI }>Safari</a> or&nbsp;
38
-                    <a
39
-                        className = { nsLink }
40
-                        href = { IE }>IE</a>.
39
+                        className = { `${NS}__link` }
40
+                        href = { FIREFOX }>Firefox</a> or&nbsp;
41
+                    { this._showSafariLinkIfRequired() }
42
+                    { this._showIELinkIfRequired() }.
41
                 </p>
43
                 </p>
42
             </div>
44
             </div>
43
         );
45
         );
44
     }
46
     }
47
+
48
+    /**
49
+     * Depending on the platform returns the link to IE browser.
50
+     *
51
+     * @returns {ReactElement|null}
52
+     * @private
53
+     */
54
+    _showIELinkIfRequired() {
55
+        if (Platform.OS === 'windows') {
56
+            return (
57
+                <a
58
+                    className = { `${NS}__link` }
59
+                    href = { IE }>IE</a>
60
+            );
61
+        }
62
+
63
+        return null;
64
+    }
65
+
66
+    /**
67
+     * Depending on the platform returns the link to Safari browser.
68
+     *
69
+     * @returns {ReactElement|null}
70
+     * @private
71
+     */
72
+    _showSafariLinkIfRequired() {
73
+        if (Platform.OS === 'mac') {
74
+            return (
75
+                <a
76
+                    className = { `${NS}__link` }
77
+                    href = { SAFARI }>Safari</a>
78
+            );
79
+        }
80
+
81
+        return null;
82
+    }
45
 }
83
 }
46
 
84
 

+ 3
- 31
react/features/unsupported-browser/components/UnsupportedMobileBrowser.js View File

5
 
5
 
6
 import { Platform } from '../../base/react';
6
 import { Platform } from '../../base/react';
7
 
7
 
8
+import UnsupportedMobileBrowserStyle from './UnsupportedMobileBrowserStyle';
9
+
8
 /**
10
 /**
9
  * The map of platforms to URLs at which the mobile app for the associated
11
  * The map of platforms to URLs at which the mobile app for the associated
10
  * platform is available for download.
12
  * platform is available for download.
101
                         </button>
103
                         </button>
102
                     </a>
104
                     </a>
103
                 </div>
105
                 </div>
104
-
105
-                {
106
-                    this._renderStyle()
107
-                }
106
+                <UnsupportedMobileBrowserStyle />
108
             </div>
107
             </div>
109
         );
108
         );
110
     }
109
     }
111
-
112
-    /**
113
-     * Renders an HTML style element with CSS specific to
114
-     * this UnsupportedMobileBrowser.
115
-     *
116
-     * @private
117
-     * @returns {ReactElement}
118
-     */
119
-    _renderStyle() {
120
-        // Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
121
-        // which detects whether the browser supports WebRTC. If the browser
122
-        // does not support WebRTC, it displays an alert in the form of a yellow
123
-        // bar at the top of the page. The alert notifies the user that the
124
-        // browser does not support WebRTC and, if Temasys provide a plugin for
125
-        // the browser, the alert contains a button to initiate installing the
126
-        // browser. When Temasys do not provide a plugin for the browser, we do
127
-        // not want the alert on the unsupported-browser page because the
128
-        // notification about the lack of WebRTC support is the whole point of
129
-        // the unsupported-browser page.
130
-        return (
131
-            <style type = 'text/css'>
132
-                {
133
-                    'iframe[name="adapterjs-alert"] { display: none; }'
134
-                }
135
-            </style>
136
-        );
137
-    }
138
 }
110
 }
139
 
111
 
140
 /**
112
 /**

+ 37
- 0
react/features/unsupported-browser/components/UnsupportedMobileBrowserStyle.js View File

1
+import React, { Component } from 'react';
2
+
3
+/**
4
+ * React component that represents HTML style element with CSS specific to
5
+ * unsupported mobile browser components.
6
+ *
7
+ * @private
8
+ * @returns {ReactElement}
9
+ */
10
+export default class UnsupportedMobileBrowserStyle extends Component {
11
+
12
+    /**
13
+     * Implements React's {@link Component#render()}.
14
+     *
15
+     * @inheritdoc
16
+     * @returns {ReactElement}
17
+     */
18
+    render() {
19
+        // Temasys provide lib-jitsi-meet/modules/RTC/adapter.screenshare.js
20
+        // which detects whether the browser supports WebRTC. If the browser
21
+        // does not support WebRTC, it displays an alert in the form of a yellow
22
+        // bar at the top of the page. The alert notifies the user that the
23
+        // browser does not support WebRTC and, if Temasys provide a plugin for
24
+        // the browser, the alert contains a button to initiate installing the
25
+        // browser. When Temasys do not provide a plugin for the browser, we do
26
+        // not want the alert on the unsupported-browser page because the
27
+        // notification about the lack of WebRTC support is the whole point of
28
+        // the unsupported-browser page.
29
+        return (
30
+            <style type = 'text/css'>
31
+                {
32
+                    'iframe[name="adapterjs-alert"] { display: none; }'
33
+                }
34
+            </style>
35
+        );
36
+    }
37
+}

Loading…
Cancel
Save