Bug 1045498 - New Hello UX for non supported browsers. r=nperriault

This commit is contained in:
Romain Gauthier 2014-12-09 14:19:21 +01:00
parent 8cafc8c5cb
commit f13abf07a7
3 changed files with 18 additions and 25 deletions

View File

@ -39,18 +39,14 @@ loop.webapp = (function($, _, OT, mozL10n) {
*/
var UnsupportedBrowserView = React.createClass({displayName: 'UnsupportedBrowserView',
render: function() {
var useLatestFF = mozL10n.get("use_latest_firefox", {
"firefoxBrandNameLink": React.renderComponentToStaticMarkup(
React.DOM.a({target: "_blank", href: loop.config.brandWebsiteUrl},
mozL10n.get("brandShortname")
)
)
});
return (
React.DOM.div(null,
React.DOM.h2(null, mozL10n.get("incompatible_browser")),
React.DOM.p(null, mozL10n.get("powered_by_webrtc", {clientShortname: mozL10n.get("clientShortname2")})),
React.DOM.p({dangerouslySetInnerHTML: {__html: useLatestFF}})
React.DOM.div({className: "expired-url-info"},
React.DOM.div({className: "info-panel"},
React.DOM.div({className: "firefox-logo"}),
React.DOM.h1(null, mozL10n.get("incompatible_browser_heading")),
React.DOM.h4(null, mozL10n.get("incompatible_browser_message"))
),
PromoteFirefoxView({helper: this.props.helper})
)
);
}
@ -993,7 +989,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
return UnsupportedDeviceView(null);
}
case "unsupportedBrowser": {
return UnsupportedBrowserView(null);
return UnsupportedBrowserView({helper: this.props.helper});
}
case "outgoing": {
return (

View File

@ -39,18 +39,14 @@ loop.webapp = (function($, _, OT, mozL10n) {
*/
var UnsupportedBrowserView = React.createClass({
render: function() {
var useLatestFF = mozL10n.get("use_latest_firefox", {
"firefoxBrandNameLink": React.renderComponentToStaticMarkup(
<a target="_blank" href={loop.config.brandWebsiteUrl}>
{mozL10n.get("brandShortname")}
</a>
)
});
return (
<div>
<h2>{mozL10n.get("incompatible_browser")}</h2>
<p>{mozL10n.get("powered_by_webrtc", {clientShortname: mozL10n.get("clientShortname2")})}</p>
<p dangerouslySetInnerHTML={{__html: useLatestFF}}></p>
<div className="expired-url-info">
<div className="info-panel">
<div className="firefox-logo" />
<h1>{mozL10n.get("incompatible_browser_heading")}</h1>
<h4>{mozL10n.get("incompatible_browser_message")}</h4>
</div>
<PromoteFirefoxView helper={this.props.helper} />
</div>
);
}
@ -993,7 +989,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
return <UnsupportedDeviceView />;
}
case "unsupportedBrowser": {
return <UnsupportedBrowserView />;
return <UnsupportedBrowserView helper={this.props.helper}/>;
}
case "outgoing": {
return (

View File

@ -20,7 +20,8 @@ unmute_local_video_button_title=Unmute your video
outgoing_call_title=Start conversation?
call_with_contact_title=Conversation with {{incomingCallIdentity}}
welcome=Welcome to the {{clientShortname}} web client.
incompatible_browser=Incompatible Browser
incompatible_browser_heading=Oops!
incompatible_browser_message=Firefox Hello only works in browsers that support WebRTC
powered_by_webrtc=The audio and video components of {{clientShortname}} are powered by WebRTC.
use_latest_firefox=Please try this link in a WebRTC-enabled browser, such as {{firefoxBrandNameLink}}.
incompatible_device=Incompatible device