Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1096399 - [Loop] Upgrade React to 0.12.2. r=Standard8

Browse Source 
--HG--
rename : browser/components/loop/content/shared/libs/react-0.11.2.js => browser/components/loop/content/shared/libs/react-0.12.2.js
This commit is contained in:
Nicolas Perriault 2015-01-06 13:07:26 +01:00
parent 0f72f4bec2
commit d74d5eaeb9
37 changed files with 4043 additions and 4460 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/loop/content/conversation.html
View File

@ -20,7 +20,7 @@
<script type="text/javascript" src="loop/libs/l10n.js"></script>
<script type="text/javascript" src="loop/js/otconfig.js"></script>
<script type="text/javascript" src="loop/libs/sdk.js"></script>
<script type="text/javascript" src="loop/shared/libs/react-0.11.2.js"></script>
<script type="text/javascript" src="loop/shared/libs/react-0.12.2.js"></script>
<script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
<script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>
<script type="text/javascript" src="loop/shared/libs/backbone-1.1.2.js"></script>

104
browser/components/loop/content/js/contacts.js
View File

@ -81,7 +81,7 @@ loop.contacts = (function(_, mozL10n) {
contact[field][0].value = value;
};
const ContactDropdown = React.createClass({displayName: 'ContactDropdown',
const ContactDropdown = React.createClass({displayName: "ContactDropdown",
propTypes: {
handleAction: React.PropTypes.func.isRequired,
canEdit: React.PropTypes.bool
@ -124,36 +124,36 @@ loop.contacts = (function(_, mozL10n) {
: "block_contact_menu_button";
return (
React.DOM.ul({className: cx({ "dropdown-menu": true,
React.createElement("ul", {className: cx({ "dropdown-menu": true,
"dropdown-menu-up": this.state.openDirUp })},
React.DOM.li({className: cx({ "dropdown-menu-item": true,
React.createElement("li", {className: cx({ "dropdown-menu-item": true,
"disabled": this.props.blocked }),
onClick: this.onItemClick,
'data-action': "video-call"},
React.DOM.i({className: "icon icon-video-call"}),
"data-action": "video-call"},
React.createElement("i", {className: "icon icon-video-call"}),
mozL10n.get("video_call_menu_button")
),
React.DOM.li({className: cx({ "dropdown-menu-item": true,
React.createElement("li", {className: cx({ "dropdown-menu-item": true,
"disabled": this.props.blocked }),
onClick: this.onItemClick, 'data-action': "audio-call"},
React.DOM.i({className: "icon icon-audio-call"}),
onClick: this.onItemClick, "data-action": "audio-call"},
React.createElement("i", {className: "icon icon-audio-call"}),
mozL10n.get("audio_call_menu_button")
),
React.DOM.li({className: cx({ "dropdown-menu-item": true,
React.createElement("li", {className: cx({ "dropdown-menu-item": true,
"disabled": !this.props.canEdit }),
onClick: this.onItemClick, 'data-action': "edit"},
React.DOM.i({className: "icon icon-edit"}),
onClick: this.onItemClick, "data-action": "edit"},
React.createElement("i", {className: "icon icon-edit"}),
mozL10n.get("edit_contact_menu_button")
),
React.DOM.li({className: "dropdown-menu-item",
onClick: this.onItemClick, 'data-action': blockAction},
React.DOM.i({className: "icon icon-" + blockAction}),
React.createElement("li", {className: "dropdown-menu-item",
onClick: this.onItemClick, "data-action": blockAction},
React.createElement("i", {className: "icon icon-" + blockAction}),
mozL10n.get(blockLabel)
),
React.DOM.li({className: cx({ "dropdown-menu-item": true,
React.createElement("li", {className: cx({ "dropdown-menu-item": true,
"disabled": !this.props.canEdit }),
onClick: this.onItemClick, 'data-action': "remove"},
React.DOM.i({className: "icon icon-remove"}),
onClick: this.onItemClick, "data-action": "remove"},
React.createElement("i", {className: "icon icon-remove"}),
mozL10n.get("remove_contact_menu_button")
)
)
@ -161,7 +161,7 @@ loop.contacts = (function(_, mozL10n) {
}
});
const ContactDetail = React.createClass({displayName: 'ContactDetail',
const ContactDetail = React.createClass({displayName: "ContactDetail",
getInitialState: function() {
return {
showMenu: false,
@ -231,23 +231,23 @@ loop.contacts = (function(_, mozL10n) {
});
return (
React.DOM.li({className: contactCSSClass, onMouseLeave: this.hideDropdownMenu},
React.DOM.div({className: "avatar"}),
React.DOM.div({className: "details"},
React.DOM.div({className: "username"}, React.DOM.strong(null, names.firstName), " ", names.lastName,
React.DOM.i({className: cx({"icon icon-google": this.props.contact.category[0] == "google"})}),
React.DOM.i({className: cx({"icon icon-blocked": this.props.contact.blocked})})
React.createElement("li", {className: contactCSSClass, onMouseLeave: this.hideDropdownMenu},
React.createElement("div", {className: "avatar"}),
React.createElement("div", {className: "details"},
React.createElement("div", {className: "username"}, React.createElement("strong", null, names.firstName), " ", names.lastName,
React.createElement("i", {className: cx({"icon icon-google": this.props.contact.category[0] == "google"})}),
React.createElement("i", {className: cx({"icon icon-blocked": this.props.contact.blocked})})
),
React.DOM.div({className: "email"}, email.value)
React.createElement("div", {className: "email"}, email.value)
),
React.DOM.div({className: "icons"},
React.DOM.i({className: "icon icon-video",
React.createElement("div", {className: "icons"},
React.createElement("i", {className: "icon icon-video",
onClick: this.handleAction.bind(null, "video-call")}),
React.DOM.i({className: "icon icon-caret-down",
React.createElement("i", {className: "icon icon-caret-down",
onClick: this.showDropdownMenu})
),
this.state.showMenu
? ContactDropdown({handleAction: this.handleAction,
? React.createElement(ContactDropdown, {handleAction: this.handleAction,
canEdit: this.canEdit(),
blocked: this.props.contact.blocked})
: null
@ -257,7 +257,7 @@ loop.contacts = (function(_, mozL10n) {
}
});
const ContactsList = React.createClass({displayName: 'ContactsList',
const ContactsList = React.createClass({displayName: "ContactsList",
mixins: [
React.addons.LinkedStateMixin,
loop.shared.mixins.WindowCloseMixin
@ -467,7 +467,7 @@ loop.contacts = (function(_, mozL10n) {
let cx = React.addons.classSet;
let viewForItem = item => {
return ContactDetail({key: item._guid, contact: item,
return React.createElement(ContactDetail, {key: item._guid, contact: item,
handleContactAction: this.handleContactAction})
};
@ -494,33 +494,33 @@ loop.contacts = (function(_, mozL10n) {
}
return (
React.DOM.div(null,
React.DOM.div({className: "content-area"},
ButtonGroup(null,
Button({caption: this.state.importBusy
React.createElement("div", null,
React.createElement("div", {className: "content-area"},
React.createElement(ButtonGroup, null,
React.createElement(Button, {caption: this.state.importBusy
? mozL10n.get("importing_contacts_progress_button")
: mozL10n.get("import_contacts_button"),
disabled: this.state.importBusy,
onClick: this.handleImportButtonClick},
React.DOM.div({className: cx({"contact-import-spinner": true,
React.createElement("div", {className: cx({"contact-import-spinner": true,
spinner: true,
busy: this.state.importBusy})})
),
Button({caption: mozL10n.get("new_contact_button"),
React.createElement(Button, {caption: mozL10n.get("new_contact_button"),
onClick: this.handleAddContactButtonClick})
),
showFilter ?
React.DOM.input({className: "contact-filter",
React.createElement("input", {className: "contact-filter",
placeholder: mozL10n.get("contacts_search_placesholder"),
valueLink: this.linkState("filter")})
: null
),
React.DOM.ul({className: "contact-list"},
React.createElement("ul", {className: "contact-list"},
shownContacts.available ?
shownContacts.available.sort(this.sortContacts).map(viewForItem) :
null,
shownContacts.blocked && shownContacts.blocked.length > 0 ?
React.DOM.div({className: "contact-separator"}, mozL10n.get("contacts_blocked_contacts")) :
React.createElement("div", {className: "contact-separator"}, mozL10n.get("contacts_blocked_contacts")) :
null,
shownContacts.blocked ?
shownContacts.blocked.sort(this.sortContacts).map(viewForItem) :
@ -531,7 +531,7 @@ loop.contacts = (function(_, mozL10n) {
}
});
const ContactDetailsForm = React.createClass({displayName: 'ContactDetailsForm',
const ContactDetailsForm = React.createClass({displayName: "ContactDetailsForm",
mixins: [React.addons.LinkedStateMixin],
propTypes: {
@ -628,27 +628,27 @@ loop.contacts = (function(_, mozL10n) {
let phoneOrEmailRequired = !this.state.email && !this.state.tel;
return (
React.DOM.div({className: "content-area contact-form"},
React.DOM.header(null, this.props.mode == "add"
React.createElement("div", {className: "content-area contact-form"},
React.createElement("header", null, this.props.mode == "add"
? mozL10n.get("add_contact_button")
: mozL10n.get("edit_contact_title")),
React.DOM.label(null, mozL10n.get("edit_contact_name_label")),
React.DOM.input({ref: "name", required: true, pattern: "\\s*\\S.*", type: "text",
React.createElement("label", null, mozL10n.get("edit_contact_name_label")),
React.createElement("input", {ref: "name", required: true, pattern: "\\s*\\S.*", type: "text",
className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("name")}),
React.DOM.label(null, mozL10n.get("edit_contact_email_label")),
React.DOM.input({ref: "email", type: "email", required: phoneOrEmailRequired,
React.createElement("label", null, mozL10n.get("edit_contact_email_label")),
React.createElement("input", {ref: "email", type: "email", required: phoneOrEmailRequired,
className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("email")}),
React.DOM.label(null, mozL10n.get("new_contact_fxos_phone_placeholder")),
React.DOM.input({ref: "tel", type: "tel", required: phoneOrEmailRequired,
React.createElement("label", null, mozL10n.get("new_contact_fxos_phone_placeholder")),
React.createElement("input", {ref: "tel", type: "tel", required: phoneOrEmailRequired,
className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("tel")}),
ButtonGroup(null,
Button({additionalClass: "button-cancel",
React.createElement(ButtonGroup, null,
React.createElement(Button, {additionalClass: "button-cancel",
caption: mozL10n.get("cancel_button"),
onClick: this.handleCancelButtonClick}),
Button({additionalClass: "button-accept",
React.createElement(Button, {additionalClass: "button-accept",
caption: this.props.mode == "add"
? mozL10n.get("add_contact_button")
: mozL10n.get("edit_contact_done_button"),

12
browser/components/loop/content/js/conversation.js
View File

@ -26,7 +26,7 @@ loop.conversation = (function(mozL10n) {
* Master controller view for handling if incoming or outgoing calls are
* in progress, and hence, which view to display.
*/
var AppControllerView = React.createClass({displayName: 'AppControllerView',
var AppControllerView = React.createClass({displayName: "AppControllerView",
mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
propTypes: {
@ -64,7 +64,7 @@ loop.conversation = (function(mozL10n) {
render: function() {
switch(this.state.windowType) {
case "incoming": {
return (IncomingConversationView({
return (React.createElement(IncomingConversationView, {
client: this.props.client,
conversation: this.props.conversation,
sdk: this.props.sdk,
@ -73,21 +73,21 @@ loop.conversation = (function(mozL10n) {
));
}
case "outgoing": {
return (OutgoingConversationView({
return (React.createElement(OutgoingConversationView, {
store: this.props.conversationStore,
dispatcher: this.props.dispatcher,
feedbackStore: this.props.feedbackStore}
));
}
case "room": {
return (DesktopRoomConversationView({
return (React.createElement(DesktopRoomConversationView, {
dispatcher: this.props.dispatcher,
roomStore: this.props.roomStore,
feedbackStore: this.props.feedbackStore}
));
}
case "failed": {
return GenericFailureView({cancelCall: this.closeWindow});
return React.createElement(GenericFailureView, {cancelCall: this.closeWindow});
}
default: {
// If we don't have a windowType, we don't know what we are yet,
@ -183,7 +183,7 @@ loop.conversation = (function(mozL10n) {
dispatcher.dispatch(new sharedActions.WindowUnload());
});
React.renderComponent(AppControllerView({
React.render(React.createElement(AppControllerView, {
conversationAppStore: conversationAppStore,
roomStore: roomStore,
feedbackStore: feedbackStore,

2
browser/components/loop/content/js/conversation.jsx
View File

@ -183,7 +183,7 @@ loop.conversation = (function(mozL10n) {
dispatcher.dispatch(new sharedActions.WindowUnload());
});
React.renderComponent(<AppControllerView
React.render(<AppControllerView
conversationAppStore={conversationAppStore}
roomStore={roomStore}
feedbackStore={feedbackStore}

146
browser/components/loop/content/js/conversationViews.js
View File

@ -39,7 +39,7 @@ loop.conversationViews = (function(mozL10n) {
* Displays information about the call
* Caller avatar, name & conversation creation date
*/
var CallIdentifierView = React.createClass({displayName: 'CallIdentifierView',
var CallIdentifierView = React.createClass({displayName: "CallIdentifierView",
propTypes: {
peerIdentifier: React.PropTypes.string,
showIcons: React.PropTypes.bool.isRequired,
@ -83,16 +83,16 @@ loop.conversationViews = (function(mozL10n) {
});
return (
React.DOM.div({className: "fx-embedded-call-identifier"},
React.DOM.div({className: "fx-embedded-call-identifier-avatar fx-embedded-call-identifier-item"}),
React.DOM.div({className: "fx-embedded-call-identifier-info fx-embedded-call-identifier-item"},
React.DOM.div({className: "fx-embedded-call-identifier-text overflow-text-ellipsis"},
React.createElement("div", {className: "fx-embedded-call-identifier"},
React.createElement("div", {className: "fx-embedded-call-identifier-avatar fx-embedded-call-identifier-item"}),
React.createElement("div", {className: "fx-embedded-call-identifier-info fx-embedded-call-identifier-item"},
React.createElement("div", {className: "fx-embedded-call-identifier-text overflow-text-ellipsis"},
this.props.peerIdentifier
),
React.DOM.div({className: callDetailClasses},
React.DOM.span({className: "fx-embedded-tiny-audio-icon"}),
React.DOM.span({className: iconVideoClasses}),
React.DOM.span({className: "fx-embedded-conversation-timestamp"},
React.createElement("div", {className: callDetailClasses},
React.createElement("span", {className: "fx-embedded-tiny-audio-icon"}),
React.createElement("span", {className: iconVideoClasses}),
React.createElement("span", {className: "fx-embedded-conversation-timestamp"},
this.formatCreationDate()
)
)
@ -109,7 +109,7 @@ loop.conversationViews = (function(mozL10n) {
* Allows the view to be extended with different buttons and progress
* via children properties.
*/
var ConversationDetailView = React.createClass({displayName: 'ConversationDetailView',
var ConversationDetailView = React.createClass({displayName: "ConversationDetailView",
propTypes: {
contact: React.PropTypes.object
},
@ -120,11 +120,11 @@ loop.conversationViews = (function(mozL10n) {
document.title = contactName;
return (
React.DOM.div({className: "call-window"},
CallIdentifierView({
React.createElement("div", {className: "call-window"},
React.createElement(CallIdentifierView, {
peerIdentifier: contactName,
showIcons: false}),
React.DOM.div(null, this.props.children)
React.createElement("div", null, this.props.children)
)
);
}
@ -133,7 +133,7 @@ loop.conversationViews = (function(mozL10n) {
// Matches strings of the form "<nonspaces>@<nonspaces>" or "+<digits>"
var EMAIL_OR_PHONE_RE = /^(:?\S+@\S+|\+\d+)$/;
var IncomingCallView = React.createClass({displayName: 'IncomingCallView',
var IncomingCallView = React.createClass({displayName: "IncomingCallView",
mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.AudioMixin],
propTypes: {
@ -213,29 +213,29 @@ loop.conversationViews = (function(mozL10n) {
});
return (
React.DOM.div({className: "call-window"},
CallIdentifierView({video: this.props.video,
React.createElement("div", {className: "call-window"},
React.createElement(CallIdentifierView, {video: this.props.video,
peerIdentifier: this.props.model.getCallIdentifier(),
urlCreationDate: this.props.model.get("urlCreationDate"),
showIcons: true}),
React.DOM.div({className: "btn-group call-action-group"},
React.createElement("div", {className: "btn-group call-action-group"},
React.DOM.div({className: "fx-embedded-call-button-spacer"}),
React.createElement("div", {className: "fx-embedded-call-button-spacer"}),
React.DOM.div({className: "btn-chevron-menu-group"},
React.DOM.div({className: "btn-group-chevron"},
React.DOM.div({className: "btn-group"},
React.createElement("div", {className: "btn-chevron-menu-group"},
React.createElement("div", {className: "btn-group-chevron"},
React.createElement("div", {className: "btn-group"},
React.DOM.button({className: "btn btn-decline",
React.createElement("button", {className: "btn btn-decline",
onClick: this._handleDecline},
mozL10n.get("incoming_call_cancel_button")
),
React.DOM.div({className: "btn-chevron", onClick: this.toggleDropdownMenu})
React.createElement("div", {className: "btn-chevron", onClick: this.toggleDropdownMenu})
),
React.DOM.ul({className: dropdownMenuClassesDecline},
React.DOM.li({className: "btn-block", onClick: this._handleDeclineBlock},
React.createElement("ul", {className: dropdownMenuClassesDecline},
React.createElement("li", {className: "btn-block", onClick: this._handleDeclineBlock},
mozL10n.get("incoming_call_cancel_and_block_button")
)
)
@ -243,11 +243,11 @@ loop.conversationViews = (function(mozL10n) {
)
),
React.DOM.div({className: "fx-embedded-call-button-spacer"}),
React.createElement("div", {className: "fx-embedded-call-button-spacer"}),
AcceptCallButton({mode: this._answerModeProps()}),
React.createElement(AcceptCallButton, {mode: this._answerModeProps()}),
React.DOM.div({className: "fx-embedded-call-button-spacer"})
React.createElement("div", {className: "fx-embedded-call-button-spacer"})
)
)
@ -260,7 +260,7 @@ loop.conversationViews = (function(mozL10n) {
* Incoming call view accept button, renders different primary actions
* (answer with video / with audio only) based on the props received
**/
var AcceptCallButton = React.createClass({displayName: 'AcceptCallButton',
var AcceptCallButton = React.createClass({displayName: "AcceptCallButton",
propTypes: {
mode: React.PropTypes.object.isRequired,
@ -270,17 +270,17 @@ loop.conversationViews = (function(mozL10n) {
var mode = this.props.mode;
return (
/* jshint ignore:start */
React.DOM.div({className: "btn-chevron-menu-group"},
React.DOM.div({className: "btn-group"},
React.DOM.button({className: "btn btn-accept",
React.createElement("div", {className: "btn-chevron-menu-group"},
React.createElement("div", {className: "btn-group"},
React.createElement("button", {className: "btn btn-accept",
onClick: mode.primary.handler,
title: mozL10n.get(mode.primary.tooltip)},
React.DOM.span({className: "fx-embedded-answer-btn-text"},
React.createElement("span", {className: "fx-embedded-answer-btn-text"},
mozL10n.get("incoming_call_accept_button")
),
React.DOM.span({className: mode.primary.className})
React.createElement("span", {className: mode.primary.className})
),
React.DOM.div({className: mode.secondary.className,
React.createElement("div", {className: mode.secondary.className,
onClick: mode.secondary.handler,
title: mozL10n.get(mode.secondary.tooltip)}
)
@ -297,7 +297,7 @@ loop.conversationViews = (function(mozL10n) {
* XXX Based on CallFailedView, but built specially until we flux-ify the
* incoming call views (bug 1088672).
*/
var GenericFailureView = React.createClass({displayName: 'GenericFailureView',
var GenericFailureView = React.createClass({displayName: "GenericFailureView",
mixins: [sharedMixins.AudioMixin],
propTypes: {
@ -312,11 +312,11 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("generic_failure_title");
return (
React.DOM.div({className: "call-window"},
React.DOM.h2(null, mozL10n.get("generic_failure_title")),
React.createElement("div", {className: "call-window"},
React.createElement("h2", null, mozL10n.get("generic_failure_title")),
React.DOM.div({className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-cancel",
React.createElement("div", {className: "btn-group call-action-group"},
React.createElement("button", {className: "btn btn-cancel",
onClick: this.props.cancelCall},
mozL10n.get("cancel_button")
)
@ -332,7 +332,7 @@ loop.conversationViews = (function(mozL10n) {
*
* At the moment, it does more than that, these parts need refactoring out.
*/
var IncomingConversationView = React.createClass({displayName: 'IncomingConversationView',
var IncomingConversationView = React.createClass({displayName: "IncomingConversationView",
mixins: [sharedMixins.AudioMixin, sharedMixins.WindowCloseMixin],
propTypes: {
@ -385,7 +385,7 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("incoming_call_title2");
return (
IncomingCallView({
React.createElement(IncomingCallView, {
model: this.props.conversation,
video: this.props.conversation.hasVideoStream("incoming")}
)
@ -397,7 +397,7 @@ loop.conversationViews = (function(mozL10n) {
var callType = this.props.conversation.get("selectedCallType");
return (
sharedViews.ConversationView({
React.createElement(sharedViews.ConversationView, {
initiate: true,
sdk: this.props.sdk,
model: this.props.conversation,
@ -408,7 +408,7 @@ loop.conversationViews = (function(mozL10n) {
case "end": {
// XXX To be handled with the "failed" view state when bug 1047410 lands
if (this.state.callFailed) {
return GenericFailureView({
return React.createElement(GenericFailureView, {
cancelCall: this.closeWindow.bind(this)}
);
}
@ -418,7 +418,7 @@ loop.conversationViews = (function(mozL10n) {
this.play("terminated");
return (
sharedViews.FeedbackView({
React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.closeWindow.bind(this)}
)
@ -426,7 +426,7 @@ loop.conversationViews = (function(mozL10n) {
}
case "close": {
this.closeWindow();
return (React.DOM.div(null));
return (React.createElement("div", null));
}
}
},
@ -646,7 +646,7 @@ loop.conversationViews = (function(mozL10n) {
* View for pending conversations. Displays a cancel button and appropriate
* pending/ringing strings.
*/
var PendingConversationView = React.createClass({displayName: 'PendingConversationView',
var PendingConversationView = React.createClass({displayName: "PendingConversationView",
mixins: [sharedMixins.AudioMixin],
propTypes: {
@ -686,12 +686,12 @@ loop.conversationViews = (function(mozL10n) {
});
return (
ConversationDetailView({contact: this.props.contact},
React.createElement(ConversationDetailView, {contact: this.props.contact},
React.DOM.p({className: "btn-label"}, pendingStateString),
React.createElement("p", {className: "btn-label"}, pendingStateString),
React.DOM.div({className: "btn-group call-action-group"},
React.DOM.button({className: btnCancelStyles,
React.createElement("div", {className: "btn-group call-action-group"},
React.createElement("button", {className: btnCancelStyles,
onClick: this.cancelCall},
mozL10n.get("initiate_call_cancel_button")
)
@ -705,7 +705,7 @@ loop.conversationViews = (function(mozL10n) {
/**
* Call failed view. Displayed when a call fails.
*/
var CallFailedView = React.createClass({displayName: 'CallFailedView',
var CallFailedView = React.createClass({displayName: "CallFailedView",
mixins: [
Backbone.Events,
sharedMixins.AudioMixin,
@ -758,7 +758,7 @@ loop.conversationViews = (function(mozL10n) {
if (!this.state.emailLinkError) {
return;
}
return React.DOM.p({className: "error"}, mozL10n.get("unable_retrieve_url"));
return React.createElement("p", {className: "error"}, mozL10n.get("unable_retrieve_url"));
},
retryCall: function() {
@ -783,23 +783,23 @@ loop.conversationViews = (function(mozL10n) {
render: function() {
return (
React.DOM.div({className: "call-window"},
React.DOM.h2(null, mozL10n.get("generic_failure_title")),
React.createElement("div", {className: "call-window"},
React.createElement("h2", null, mozL10n.get("generic_failure_title")),
React.DOM.p({className: "btn-label"}, mozL10n.get("generic_failure_with_reason2")),
React.createElement("p", {className: "btn-label"}, mozL10n.get("generic_failure_with_reason2")),
this._renderError(),
React.DOM.div({className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-cancel",
React.createElement("div", {className: "btn-group call-action-group"},
React.createElement("button", {className: "btn btn-cancel",
onClick: this.cancelCall},
mozL10n.get("cancel_button")
),
React.DOM.button({className: "btn btn-info btn-retry",
React.createElement("button", {className: "btn btn-info btn-retry",
onClick: this.retryCall},
mozL10n.get("retry_call_button")
),
React.DOM.button({className: "btn btn-info btn-email",
React.createElement("button", {className: "btn btn-info btn-email",
onClick: this.emailLink,
disabled: this.state.emailLinkButtonDisabled},
mozL10n.get("share_button2")
@ -810,7 +810,7 @@ loop.conversationViews = (function(mozL10n) {
}
});
var OngoingConversationView = React.createClass({displayName: 'OngoingConversationView',
var OngoingConversationView = React.createClass({displayName: "OngoingConversationView",
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
video: React.PropTypes.object,
@ -924,15 +924,15 @@ loop.conversationViews = (function(mozL10n) {
});
return (
React.DOM.div({className: "video-layout-wrapper"},
React.DOM.div({className: "conversation"},
React.DOM.div({className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"})
React.createElement("div", {className: "video-layout-wrapper"},
React.createElement("div", {className: "conversation"},
React.createElement("div", {className: "media nested"},
React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.createElement("div", {className: "video_inner remote"})
),
React.DOM.div({className: localStreamClasses})
React.createElement("div", {className: localStreamClasses})
),
loop.shared.views.ConversationToolbar({
React.createElement(loop.shared.views.ConversationToolbar, {
video: this.props.video,
audio: this.props.audio,
publishStream: this.publishStream,
@ -947,7 +947,7 @@ loop.conversationViews = (function(mozL10n) {
* Master View Controller for outgoing calls. This manages
* the different views that need displaying.
*/
var OutgoingConversationView = React.createClass({displayName: 'OutgoingConversationView',
var OutgoingConversationView = React.createClass({displayName: "OutgoingConversationView",
mixins: [
sharedMixins.AudioMixin,
Backbone.Events
@ -995,7 +995,7 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("conversation_has_ended");
return (
sharedViews.FeedbackView({
React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this._closeWindow.bind(this)}
)
@ -1009,14 +1009,14 @@ loop.conversationViews = (function(mozL10n) {
return null;
}
case CALL_STATES.TERMINATED: {
return (CallFailedView({
return (React.createElement(CallFailedView, {
dispatcher: this.props.dispatcher,
store: this.props.store,
contact: this.state.contact}
));
}
case CALL_STATES.ONGOING: {
return (OngoingConversationView({
return (React.createElement(OngoingConversationView, {
dispatcher: this.props.dispatcher,
video: {enabled: !this.state.videoMuted},
audio: {enabled: !this.state.audioMuted}}
@ -1032,7 +1032,7 @@ loop.conversationViews = (function(mozL10n) {
return null;
}
default: {
return (PendingConversationView({
return (React.createElement(PendingConversationView, {
dispatcher: this.props.dispatcher,
callState: this.state.callState,
contact: this.state.contact,

222
browser/components/loop/content/js/panel.js
View File

@ -21,7 +21,7 @@ loop.panel = (function(_, mozL10n) {
var ContactsList = loop.contacts.ContactsList;
var ContactDetailsForm = loop.contacts.ContactDetailsForm;
var TabView = React.createClass({displayName: 'TabView',
var TabView = React.createClass({displayName: "TabView",
propTypes: {
buttonsHidden: React.PropTypes.array,
// The selectedTab prop is used by the UI showcase.
@ -66,28 +66,28 @@ loop.panel = (function(_, mozL10n) {
var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) {
tabButtons.push(
React.DOM.li({className: cx({selected: isSelected}),
React.createElement("li", {className: cx({selected: isSelected}),
key: i,
'data-tab-name': tabName,
"data-tab-name": tabName,
onClick: this.handleSelectTab})
);
}
tabs.push(
React.DOM.div({key: i, className: cx({tab: true, selected: isSelected})},
React.createElement("div", {key: i, className: cx({tab: true, selected: isSelected})},
tab.props.children
)
);
}, this);
return (
React.DOM.div({className: "tab-view-container"},
React.DOM.ul({className: "tab-view"}, tabButtons),
React.createElement("div", {className: "tab-view-container"},
React.createElement("ul", {className: "tab-view"}, tabButtons),
tabs
)
);
}
});
var Tab = React.createClass({displayName: 'Tab',
var Tab = React.createClass({displayName: "Tab",
render: function() {
return null;
}
@ -96,7 +96,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Availability drop down menu subview.
*/
var AvailabilityDropdown = React.createClass({displayName: 'AvailabilityDropdown',
var AvailabilityDropdown = React.createClass({displayName: "AvailabilityDropdown",
mixins: [sharedMixins.DropdownMenuMixin],
getInitialState: function() {
@ -142,22 +142,22 @@ loop.panel = (function(_, mozL10n) {
mozL10n.get("display_name_available_status");
return (
React.DOM.div({className: "dropdown"},
React.DOM.p({className: "dnd-status", onClick: this.showDropdownMenu},
React.DOM.span(null, availabilityText),
React.DOM.i({className: availabilityStatus})
React.createElement("div", {className: "dropdown"},
React.createElement("p", {className: "dnd-status", onClick: this.showDropdownMenu},
React.createElement("span", null, availabilityText),
React.createElement("i", {className: availabilityStatus})
),
React.DOM.ul({className: availabilityDropdown,
React.createElement("ul", {className: availabilityDropdown,
onMouseLeave: this.hideDropdownMenu},
React.DOM.li({onClick: this.changeAvailability("available"),
React.createElement("li", {onClick: this.changeAvailability("available"),
className: "dropdown-menu-item dnd-make-available"},
React.DOM.i({className: "status status-available"}),
React.DOM.span(null, mozL10n.get("display_name_available_status"))
React.createElement("i", {className: "status status-available"}),
React.createElement("span", null, mozL10n.get("display_name_available_status"))
),
React.DOM.li({onClick: this.changeAvailability("do-not-disturb"),
React.createElement("li", {onClick: this.changeAvailability("do-not-disturb"),
className: "dropdown-menu-item dnd-make-unavailable"},
React.DOM.i({className: "status status-dnd"}),
React.DOM.span(null, mozL10n.get("display_name_dnd_status"))
React.createElement("i", {className: "status status-dnd"}),
React.createElement("span", null, mozL10n.get("display_name_dnd_status"))
)
)
)
@ -165,7 +165,7 @@ loop.panel = (function(_, mozL10n) {
}
});
var GettingStartedView = React.createClass({displayName: 'GettingStartedView',
var GettingStartedView = React.createClass({displayName: "GettingStartedView",
mixins: [sharedMixins.WindowCloseMixin],
handleButtonClick: function() {
@ -181,13 +181,13 @@ loop.panel = (function(_, mozL10n) {
return null;
}
return (
React.DOM.div({id: "fte-getstarted"},
React.DOM.header({id: "fte-title"},
React.createElement("div", {id: "fte-getstarted"},
React.createElement("header", {id: "fte-title"},
mozL10n.get("first_time_experience_title", {
"clientShortname": mozL10n.get("clientShortname2")
})
),
Button({htmlId: "fte-button",
React.createElement(Button, {htmlId: "fte-button",
onClick: this.handleButtonClick,
caption: mozL10n.get("first_time_experience_button_label")})
)
@ -195,7 +195,7 @@ loop.panel = (function(_, mozL10n) {
}
});
var ToSView = React.createClass({displayName: 'ToSView',
var ToSView = React.createClass({displayName: "ToSView",
getInitialState: function() {
var getPref = navigator.mozLoop.getLoopPref.bind(navigator.mozLoop);
@ -212,28 +212,28 @@ loop.panel = (function(_, mozL10n) {
var privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
var tosHTML = mozL10n.get("legal_text_and_links3", {
"clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use": React.renderComponentToStaticMarkup(
React.DOM.a({href: terms_of_use_url, target: "_blank"},
"terms_of_use": React.renderToStaticMarkup(
React.createElement("a", {href: terms_of_use_url, target: "_blank"},
mozL10n.get("legal_text_tos")
)
),
"privacy_notice": React.renderComponentToStaticMarkup(
React.DOM.a({href: privacy_notice_url, target: "_blank"},
"privacy_notice": React.renderToStaticMarkup(
React.createElement("a", {href: privacy_notice_url, target: "_blank"},
mozL10n.get("legal_text_privacy")
)
),
});
return React.DOM.div({id: "powered-by-wrapper"},
React.DOM.p({id: "powered-by"},
return React.createElement("div", {id: "powered-by-wrapper"},
React.createElement("p", {id: "powered-by"},
mozL10n.get("powered_by_beforeLogo"),
React.DOM.img({id: "powered-by-logo", className: locale}),
React.createElement("img", {id: "powered-by-logo", className: locale}),
mozL10n.get("powered_by_afterLogo")
),
React.DOM.p({className: "terms-service",
React.createElement("p", {className: "terms-service",
dangerouslySetInnerHTML: {__html: tosHTML}})
);
} else {
return React.DOM.div(null);
return React.createElement("div", null);
}
}
});
@ -241,7 +241,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Panel settings (gear) menu entry.
*/
var SettingsDropdownEntry = React.createClass({displayName: 'SettingsDropdownEntry',
var SettingsDropdownEntry = React.createClass({displayName: "SettingsDropdownEntry",
propTypes: {
onClick: React.PropTypes.func.isRequired,
label: React.PropTypes.string.isRequired,
@ -258,11 +258,11 @@ loop.panel = (function(_, mozL10n) {
return null;
}
return (
React.DOM.li({onClick: this.props.onClick, className: "dropdown-menu-item"},
React.createElement("li", {onClick: this.props.onClick, className: "dropdown-menu-item"},
this.props.icon ?
React.DOM.i({className: "icon icon-" + this.props.icon}) :
React.createElement("i", {className: "icon icon-" + this.props.icon}) :
null,
React.DOM.span(null, this.props.label)
React.createElement("span", null, this.props.label)
)
);
}
@ -271,7 +271,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Panel settings (gear) menu.
*/
var SettingsDropdown = React.createClass({displayName: 'SettingsDropdown',
var SettingsDropdown = React.createClass({displayName: "SettingsDropdown",
mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.WindowCloseMixin],
handleClickSettingsEntry: function() {
@ -315,29 +315,29 @@ loop.panel = (function(_, mozL10n) {
}
return (
React.DOM.div({className: "settings-menu dropdown"},
React.DOM.a({className: "button-settings", onClick: this.showDropdownMenu,
React.createElement("div", {className: "settings-menu dropdown"},
React.createElement("a", {className: "button-settings", onClick: this.showDropdownMenu,
title: mozL10n.get("settings_menu_button_tooltip")}),
React.DOM.ul({className: cx({"dropdown-menu": true, hide: !this.state.showMenu}),
React.createElement("ul", {className: cx({"dropdown-menu": true, hide: !this.state.showMenu}),
onMouseLeave: this.hideDropdownMenu},
SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_settings"),
React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_settings"),
onClick: this.handleClickSettingsEntry,
displayed: false,
icon: "settings"}),
SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_account"),
React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_account"),
onClick: this.handleClickAccountEntry,
icon: "account",
displayed: this._isSignedIn()}),
SettingsDropdownEntry({icon: "tour",
React.createElement(SettingsDropdownEntry, {icon: "tour",
label: mozL10n.get("tour_label"),
onClick: this.openGettingStartedTour}),
SettingsDropdownEntry({label: this._isSignedIn() ?
React.createElement(SettingsDropdownEntry, {label: this._isSignedIn() ?
mozL10n.get("settings_menu_item_signout") :
mozL10n.get("settings_menu_item_signin"),
onClick: this.handleClickAuthEntry,
displayed: navigator.mozLoop.fxAEnabled,
icon: this._isSignedIn() ? "signout" : "signin"}),
SettingsDropdownEntry({label: mozL10n.get("help_label"),
React.createElement(SettingsDropdownEntry, {label: mozL10n.get("help_label"),
onClick: this.handleHelpEntry,
icon: "help"})
)
@ -349,7 +349,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Call url result view.
*/
var CallUrlResult = React.createClass({displayName: 'CallUrlResult',
var CallUrlResult = React.createClass({displayName: "CallUrlResult",
mixins: [sharedMixins.DocumentVisibilityMixin],
propTypes: {
@ -467,26 +467,26 @@ loop.panel = (function(_, mozL10n) {
// from the react lib.
var cx = React.addons.classSet;
return (
React.DOM.div({className: "generate-url"},
React.DOM.header({id: "share-link-header"}, mozL10n.get("share_link_header_text")),
React.DOM.div({className: "generate-url-stack"},
React.DOM.input({type: "url", value: this.state.callUrl, readOnly: "true",
React.createElement("div", {className: "generate-url"},
React.createElement("header", {id: "share-link-header"}, mozL10n.get("share_link_header_text")),
React.createElement("div", {className: "generate-url-stack"},
React.createElement("input", {type: "url", value: this.state.callUrl, readOnly: "true",
onCopy: this.handleLinkExfiltration,
className: cx({"generate-url-input": true,
pending: this.state.pending,
// Used in functional testing, signals that
// call url was received from loop server
callUrl: !this.state.pending})}),
React.DOM.div({className: cx({"generate-url-spinner": true,
React.createElement("div", {className: cx({"generate-url-spinner": true,
spinner: true,
busy: this.state.pending})})
),
ButtonGroup({additionalClass: "url-actions"},
Button({additionalClass: "button-email",
React.createElement(ButtonGroup, {additionalClass: "url-actions"},
React.createElement(Button, {additionalClass: "button-email",
disabled: !this.state.callUrl,
onClick: this.handleEmailButtonClick,
caption: mozL10n.get("share_button")}),
Button({additionalClass: "button-copy",
React.createElement(Button, {additionalClass: "button-copy",
disabled: !this.state.callUrl,
onClick: this.handleCopyButtonClick,
caption: this.state.copied ? mozL10n.get("copied_url_button") :
@ -500,7 +500,7 @@ loop.panel = (function(_, mozL10n) {
/**
* FxA sign in/up link component.
*/
var AuthLink = React.createClass({displayName: 'AuthLink',
var AuthLink = React.createClass({displayName: "AuthLink",
handleSignUpLinkClick: function() {
navigator.mozLoop.logInToFxA();
},
@ -510,8 +510,8 @@ loop.panel = (function(_, mozL10n) {
return null;
}
return (
React.DOM.p({className: "signin-link"},
React.DOM.a({href: "#", onClick: this.handleSignUpLinkClick},
React.createElement("p", {className: "signin-link"},
React.createElement("a", {href: "#", onClick: this.handleSignUpLinkClick},
mozL10n.get("panel_footer_signin_or_signup_link")
)
)
@ -522,17 +522,17 @@ loop.panel = (function(_, mozL10n) {
/**
* FxA user identity (guest/authenticated) component.
*/
var UserIdentity = React.createClass({displayName: 'UserIdentity',
var UserIdentity = React.createClass({displayName: "UserIdentity",
render: function() {
return (
React.DOM.p({className: "user-identity"},
React.createElement("p", {className: "user-identity"},
this.props.displayName
)
);
}
});
var EditInPlace = React.createClass({displayName: 'EditInPlace',
var EditInPlace = React.createClass({displayName: "EditInPlace",
mixins: [React.addons.LinkedStateMixin],
propTypes: {
@ -588,15 +588,15 @@ loop.panel = (function(_, mozL10n) {
render: function() {
if (!this.state.edit) {
return (
React.DOM.span({className: "edit-in-place", onClick: this.handleTextClick,
React.createElement("span", {className: "edit-in-place", onClick: this.handleTextClick,
title: mozL10n.get("rooms_name_this_room_tooltip2")},
this.state.text
)
);
}
return (
React.DOM.form({onSubmit: this.handleFormSubmit},
React.DOM.input({type: "text", valueLink: this.linkState("text"),
React.createElement("form", {onSubmit: this.handleFormSubmit},
React.createElement("input", {type: "text", valueLink: this.linkState("text"),
onClick: this.handleInputClick,
onBlur: this.cancelEdit})
)
@ -607,7 +607,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Room list entry.
*/
var RoomEntry = React.createClass({displayName: 'RoomEntry',
var RoomEntry = React.createClass({displayName: "RoomEntry",
propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
room: React.PropTypes.instanceOf(loop.store.Room).isRequired
@ -690,19 +690,19 @@ loop.panel = (function(_, mozL10n) {
});
return (
React.DOM.div({className: roomClasses, onMouseLeave: this.handleMouseLeave,
React.createElement("div", {className: roomClasses, onMouseLeave: this.handleMouseLeave,
onClick: this.handleClickEntry},
React.DOM.h2(null,
React.DOM.span({className: "room-notification"}),
EditInPlace({text: room.roomName, onChange: this.renameRoom}),
React.DOM.button({className: copyButtonClasses,
React.createElement("h2", null,
React.createElement("span", {className: "room-notification"}),
React.createElement(EditInPlace, {text: room.roomName, onChange: this.renameRoom}),
React.createElement("button", {className: copyButtonClasses,
title: mozL10n.get("rooms_list_copy_url_tooltip"),
onClick: this.handleCopyButtonClick}),
React.DOM.button({className: "delete-link",
React.createElement("button", {className: "delete-link",
title: mozL10n.get("rooms_list_delete_tooltip"),
onClick: this.handleDeleteButtonClick})
),
React.DOM.p(null, React.DOM.a({className: "room-url-link", href: "#"}, room.roomUrl))
React.createElement("p", null, React.createElement("a", {className: "room-url-link", href: "#"}, room.roomUrl))
)
);
}
@ -711,7 +711,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Room list.
*/
var RoomList = React.createClass({displayName: 'RoomList',
var RoomList = React.createClass({displayName: "RoomList",
mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
propTypes: {
@ -776,19 +776,19 @@ loop.panel = (function(_, mozL10n) {
}
return (
React.DOM.div({className: "rooms"},
React.DOM.h1(null, this._getListHeading()),
React.DOM.div({className: "room-list"},
React.createElement("div", {className: "rooms"},
React.createElement("h1", null, this._getListHeading()),
React.createElement("div", {className: "room-list"},
this.state.rooms.map(function(room, i) {
return RoomEntry({
return React.createElement(RoomEntry, {
key: room.roomToken,
dispatcher: this.props.dispatcher,
room: room}
);
}, this)
),
React.DOM.p(null,
React.DOM.button({className: "btn btn-info new-room-button",
React.createElement("p", null,
React.createElement("button", {className: "btn btn-info new-room-button",
onClick: this.handleCreateButtonClick,
disabled: this._hasPendingOperation()},
mozL10n.get("rooms_new_room_button_label")
@ -802,7 +802,7 @@ loop.panel = (function(_, mozL10n) {
/**
* Panel view.
*/
var PanelView = React.createClass({displayName: 'PanelView',
var PanelView = React.createClass({displayName: "PanelView",
propTypes: {
notifications: React.PropTypes.object.isRequired,
client: React.PropTypes.object.isRequired,
@ -894,23 +894,23 @@ loop.panel = (function(_, mozL10n) {
_renderRoomsOrCallTab: function() {
if (!this._roomsEnabled()) {
return (
Tab({name: "call"},
React.DOM.div({className: "content-area"},
CallUrlResult({client: this.props.client,
React.createElement(Tab, {name: "call"},
React.createElement("div", {className: "content-area"},
React.createElement(CallUrlResult, {client: this.props.client,
notifications: this.props.notifications,
callUrl: this.props.callUrl}),
ToSView(null)
React.createElement(ToSView, null)
)
)
);
}
return (
Tab({name: "rooms"},
RoomList({dispatcher: this.props.dispatcher,
React.createElement(Tab, {name: "rooms"},
React.createElement(RoomList, {dispatcher: this.props.dispatcher,
store: this.props.roomStore,
userDisplayName: this._getUserDisplayName()}),
ToSView(null)
React.createElement(ToSView, null)
)
);
},
@ -950,11 +950,11 @@ loop.panel = (function(_, mozL10n) {
if (!this.state.gettingStartedSeen) {
return (
React.DOM.div(null,
NotificationListView({notifications: this.props.notifications,
React.createElement("div", null,
React.createElement(NotificationListView, {notifications: this.props.notifications,
clearOnDocumentHidden: true}),
GettingStartedView(null),
ToSView(null)
React.createElement(GettingStartedView, null),
React.createElement(ToSView, null)
)
);
}
@ -966,38 +966,38 @@ loop.panel = (function(_, mozL10n) {
}
return (
React.DOM.div(null,
NotificationListView({notifications: this.props.notifications,
React.createElement("div", null,
React.createElement(NotificationListView, {notifications: this.props.notifications,
clearOnDocumentHidden: true}),
TabView({ref: "tabView", selectedTab: this.props.selectedTab,
React.createElement(TabView, {ref: "tabView", selectedTab: this.props.selectedTab,
buttonsHidden: hideButtons},
this._renderRoomsOrCallTab(),
Tab({name: "contacts"},
ContactsList({selectTab: this.selectTab,
React.createElement(Tab, {name: "contacts"},
React.createElement(ContactsList, {selectTab: this.selectTab,
startForm: this.startForm})
),
Tab({name: "contacts_add", hidden: true},
ContactDetailsForm({ref: "contacts_add", mode: "add",
React.createElement(Tab, {name: "contacts_add", hidden: true},
React.createElement(ContactDetailsForm, {ref: "contacts_add", mode: "add",
selectTab: this.selectTab})
),
Tab({name: "contacts_edit", hidden: true},
ContactDetailsForm({ref: "contacts_edit", mode: "edit",
React.createElement(Tab, {name: "contacts_edit", hidden: true},
React.createElement(ContactDetailsForm, {ref: "contacts_edit", mode: "edit",
selectTab: this.selectTab})
),
Tab({name: "contacts_import", hidden: true},
ContactDetailsForm({ref: "contacts_import", mode: "import",
React.createElement(Tab, {name: "contacts_import", hidden: true},
React.createElement(ContactDetailsForm, {ref: "contacts_import", mode: "import",
selectTab: this.selectTab})
)
),
React.DOM.div({className: "footer"},
React.DOM.div({className: "user-details"},
UserIdentity({displayName: this._getUserDisplayName()}),
AvailabilityDropdown(null)
React.createElement("div", {className: "footer"},
React.createElement("div", {className: "user-details"},
React.createElement(UserIdentity, {displayName: this._getUserDisplayName()}),
React.createElement(AvailabilityDropdown, null)
),
React.DOM.div({className: "signin-details"},
AuthLink(null),
React.DOM.div({className: "footer-signin-separator"}),
SettingsDropdown(null)
React.createElement("div", {className: "signin-details"},
React.createElement(AuthLink, null),
React.createElement("div", {className: "footer-signin-separator"}),
React.createElement(SettingsDropdown, null)
)
)
)
@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
notifications: notifications
});
React.renderComponent(PanelView({
React.render(React.createElement(PanelView, {
client: client,
notifications: notifications,
roomStore: roomStore,

6
browser/components/loop/content/js/panel.jsx
View File

@ -212,12 +212,12 @@ loop.panel = (function(_, mozL10n) {
var privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
var tosHTML = mozL10n.get("legal_text_and_links3", {
"clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use": React.renderComponentToStaticMarkup(
"terms_of_use": React.renderToStaticMarkup(
<a href={terms_of_use_url} target="_blank">
{mozL10n.get("legal_text_tos")}
</a>
),
"privacy_notice": React.renderComponentToStaticMarkup(
"privacy_notice": React.renderToStaticMarkup(
<a href={privacy_notice_url} target="_blank">
{mozL10n.get("legal_text_privacy")}
</a>
@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
notifications: notifications
});
React.renderComponent(<PanelView
React.render(<PanelView
client={client}
notifications={notifications}
roomStore={roomStore}

42
browser/components/loop/content/js/roomViews.js
View File

@ -57,7 +57,7 @@ loop.roomViews = (function(mozL10n) {
/**
* Desktop room invitation view (overlay).
*/
var DesktopRoomInvitationView = React.createClass({displayName: 'DesktopRoomInvitationView',
var DesktopRoomInvitationView = React.createClass({displayName: "DesktopRoomInvitationView",
mixins: [ActiveRoomStoreMixin, React.addons.LinkedStateMixin],
propTypes: {
@ -128,25 +128,25 @@ loop.roomViews = (function(mozL10n) {
render: function() {
var cx = React.addons.classSet;
return (
React.DOM.div({className: "room-invitation-overlay"},
React.DOM.p({className: cx({"error": !!this.state.error,
React.createElement("div", {className: "room-invitation-overlay"},
React.createElement("p", {className: cx({"error": !!this.state.error,
"error-display-area": true})},
mozL10n.get("rooms_name_change_failed_label")
),
React.DOM.form({onSubmit: this.handleFormSubmit},
React.DOM.textarea({rows: "2", type: "text", className: "input-room-name",
React.createElement("form", {onSubmit: this.handleFormSubmit},
React.createElement("textarea", {rows: "2", type: "text", className: "input-room-name",
valueLink: this.linkState("newRoomName"),
onBlur: this.handleFormSubmit,
onKeyDown: this.handleTextareaKeyDown,
placeholder: mozL10n.get("rooms_name_this_room_label")})
),
React.DOM.p(null, mozL10n.get("invite_header_text")),
React.DOM.div({className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-info btn-email",
React.createElement("p", null, mozL10n.get("invite_header_text")),
React.createElement("div", {className: "btn-group call-action-group"},
React.createElement("button", {className: "btn btn-info btn-email",
onClick: this.handleEmailButtonClick},
mozL10n.get("share_button2")
),
React.DOM.button({className: "btn btn-info btn-copy",
React.createElement("button", {className: "btn btn-info btn-copy",
onClick: this.handleCopyButtonClick},
this.state.copiedUrl ? mozL10n.get("copied_url_button") :
mozL10n.get("copy_url_button2")
@ -160,7 +160,7 @@ loop.roomViews = (function(mozL10n) {
/**
* Desktop room conversation view.
*/
var DesktopRoomConversationView = React.createClass({displayName: 'DesktopRoomConversationView',
var DesktopRoomConversationView = React.createClass({displayName: "DesktopRoomConversationView",
mixins: [
ActiveRoomStoreMixin,
sharedMixins.DocumentTitleMixin,
@ -175,7 +175,7 @@ loop.roomViews = (function(mozL10n) {
_renderInvitationOverlay: function() {
if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) {
return DesktopRoomInvitationView({
return React.createElement(DesktopRoomInvitationView, {
roomStore: this.props.roomStore,
dispatcher: this.props.dispatcher}
);
@ -295,13 +295,13 @@ loop.roomViews = (function(mozL10n) {
case ROOM_STATES.FULL: {
// Note: While rooms are set to hold a maximum of 2 participants, the
// FULL case should never happen on desktop.
return loop.conversationViews.GenericFailureView({
return React.createElement(loop.conversationViews.GenericFailureView, {
cancelCall: this.closeWindow}
);
}
case ROOM_STATES.ENDED: {
if (this.state.used)
return sharedViews.FeedbackView({
return React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.closeWindow}
);
@ -313,17 +313,17 @@ loop.roomViews = (function(mozL10n) {
}
default: {
return (
React.DOM.div({className: "room-conversation-wrapper"},
React.createElement("div", {className: "room-conversation-wrapper"},
this._renderInvitationOverlay(),
React.DOM.div({className: "video-layout-wrapper"},
React.DOM.div({className: "conversation room-conversation"},
React.DOM.div({className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"})
React.createElement("div", {className: "video-layout-wrapper"},
React.createElement("div", {className: "conversation room-conversation"},
React.createElement("div", {className: "media nested"},
React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.createElement("div", {className: "video_inner remote"})
),
React.DOM.div({className: localStreamClasses})
React.createElement("div", {className: localStreamClasses})
),
sharedViews.ConversationToolbar({
React.createElement(sharedViews.ConversationToolbar, {
video: {enabled: !this.state.videoMuted, visible: true},
audio: {enabled: !this.state.audioMuted, visible: true},
publishStream: this.publishStream,

2
browser/components/loop/content/panel.html
View File

@ -14,7 +14,7 @@
<div id="main"></div>
<script type="text/javascript" src="loop/shared/libs/react-0.11.2.js"></script>
<script type="text/javascript" src="loop/shared/libs/react-0.12.2.js"></script>
<script type="text/javascript" src="loop/libs/l10n.js"></script>
<script type="text/javascript" src="loop/shared/libs/jquery-2.1.0.js"></script>
<script type="text/javascript" src="loop/shared/libs/lodash-2.4.1.js"></script>

46
browser/components/loop/content/shared/js/feedbackViews.js
View File

@ -25,7 +25,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
* Props:
* -
*/
var FeedbackLayout = React.createClass({displayName: 'FeedbackLayout',
var FeedbackLayout = React.createClass({displayName: "FeedbackLayout",
propTypes: {
children: React.PropTypes.component.isRequired,
title: React.PropTypes.string.isRequired,
@ -33,19 +33,19 @@ loop.shared.views.FeedbackView = (function(l10n) {
},
render: function() {
var backButton = React.DOM.div(null);
var backButton = React.createElement("div", null);
if (this.props.reset) {
backButton = (
React.DOM.button({className: "fx-embedded-btn-back", type: "button",
React.createElement("button", {className: "fx-embedded-btn-back", type: "button",
onClick: this.props.reset},
"« ", l10n.get("feedback_back_button")
)
);
}
return (
React.DOM.div({className: "feedback"},
React.createElement("div", {className: "feedback"},
backButton,
React.DOM.h3(null, this.props.title),
React.createElement("h3", null, this.props.title),
this.props.children
)
);
@ -55,7 +55,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
/**
* Detailed feedback form.
*/
var FeedbackForm = React.createClass({displayName: 'FeedbackForm',
var FeedbackForm = React.createClass({displayName: "FeedbackForm",
propTypes: {
feedbackStore: React.PropTypes.instanceOf(loop.store.FeedbackStore),
pending: React.PropTypes.bool,
@ -84,8 +84,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
var categories = this._getCategories();
return Object.keys(categories).map(function(category, key) {
return (
React.DOM.label({key: key, className: "feedback-category-label"},
React.DOM.input({type: "radio", ref: "category", name: "category",
React.createElement("label", {key: key, className: "feedback-category-label"},
React.createElement("input", {type: "radio", ref: "category", name: "category",
className: "feedback-category-radio",
value: category,
onChange: this.handleCategoryChange,
@ -149,12 +149,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
var descriptionDisplayValue = this.state.category === "other" ?
this.state.description : "";
return (
FeedbackLayout({title: l10n.get("feedback_what_makes_you_sad"),
React.createElement(FeedbackLayout, {title: l10n.get("feedback_what_makes_you_sad"),
reset: this.props.reset},
React.DOM.form({onSubmit: this.handleFormSubmit},
React.createElement("form", {onSubmit: this.handleFormSubmit},
this._getCategoryFields(),
React.DOM.p(null,
React.DOM.input({type: "text", ref: "description", name: "description",
React.createElement("p", null,
React.createElement("input", {type: "text", ref: "description", name: "description",
className: "feedback-description",
onChange: this.handleDescriptionFieldChange,
onFocus: this.handleDescriptionFieldFocus,
@ -162,7 +162,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
placeholder:
l10n.get("feedback_custom_category_text_placeholder")})
),
React.DOM.button({type: "submit", className: "btn btn-success",
React.createElement("button", {type: "submit", className: "btn btn-success",
disabled: !this._isFormReady()},
l10n.get("feedback_submit_button")
)
@ -179,7 +179,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
* - {Function} onAfterFeedbackReceived Function to execute after the
* WINDOW_AUTOCLOSE_TIMEOUT_IN_SECONDS timeout has elapsed
*/
var FeedbackReceived = React.createClass({displayName: 'FeedbackReceived',
var FeedbackReceived = React.createClass({displayName: "FeedbackReceived",
propTypes: {
onAfterFeedbackReceived: React.PropTypes.func
},
@ -208,8 +208,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
}
}
return (
FeedbackLayout({title: l10n.get("feedback_thank_you_heading")},
React.DOM.p({className: "info thank-you"},
React.createElement(FeedbackLayout, {title: l10n.get("feedback_thank_you_heading")},
React.createElement("p", {className: "info thank-you"},
l10n.get("feedback_window_will_close_in2", {
countdown: this.state.countdown,
num: this.state.countdown
@ -222,7 +222,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
/**
* Feedback view.
*/
var FeedbackView = React.createClass({displayName: 'FeedbackView',
var FeedbackView = React.createClass({displayName: "FeedbackView",
mixins: [Backbone.Events],
propTypes: {
@ -283,12 +283,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
default:
case FEEDBACK_STATES.INIT: {
return (
FeedbackLayout({title:
React.createElement(FeedbackLayout, {title:
l10n.get("feedback_call_experience_heading2")},
React.DOM.div({className: "faces"},
React.DOM.button({className: "face face-happy",
React.createElement("div", {className: "faces"},
React.createElement("button", {className: "face face-happy",
onClick: this.handleHappyClick}),
React.DOM.button({className: "face face-sad",
React.createElement("button", {className: "face face-sad",
onClick: this.handleSadClick})
)
)
@ -296,7 +296,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
}
case FEEDBACK_STATES.DETAILS: {
return (
FeedbackForm({
React.createElement(FeedbackForm, {
feedbackStore: this.props.feedbackStore,
reset: this.reset,
pending: this.state.feedbackState === FEEDBACK_STATES.PENDING})
@ -311,7 +311,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
this.state.error);
}
return (
FeedbackReceived({
React.createElement(FeedbackReceived, {
onAfterFeedbackReceived: this.props.onAfterFeedbackReceived})
);
}

66
browser/components/loop/content/shared/js/views.js
View File

@ -23,7 +23,7 @@ loop.shared.views = (function(_, OT, l10n) {
* - {Function} action Function to be executed on click.
* - {Enabled} enabled Stream activation status (default: true).
*/
var MediaControlButton = React.createClass({displayName: 'MediaControlButton',
var MediaControlButton = React.createClass({displayName: "MediaControlButton",
propTypes: {
scope: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired,
@ -64,7 +64,7 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() {
return (
/* jshint ignore:start */
React.DOM.button({className: this._getClasses(),
React.createElement("button", {className: this._getClasses(),
title: this._getTitle(),
onClick: this.handleClick})
/* jshint ignore:end */
@ -75,7 +75,7 @@ loop.shared.views = (function(_, OT, l10n) {
/**
* Conversation controls.
*/
var ConversationToolbar = React.createClass({displayName: 'ConversationToolbar',
var ConversationToolbar = React.createClass({displayName: "ConversationToolbar",
getDefaultProps: function() {
return {
video: {enabled: true, visible: true},
@ -112,22 +112,22 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() {
var cx = React.addons.classSet;
return (
React.DOM.ul({className: "conversation-toolbar"},
React.DOM.li({className: "conversation-toolbar-btn-box btn-hangup-entry"},
React.DOM.button({className: "btn btn-hangup", onClick: this.handleClickHangup,
React.createElement("ul", {className: "conversation-toolbar"},
React.createElement("li", {className: "conversation-toolbar-btn-box btn-hangup-entry"},
React.createElement("button", {className: "btn btn-hangup", onClick: this.handleClickHangup,
title: l10n.get("hangup_button_title"),
disabled: !this.props.enableHangup},
this._getHangupButtonLabel()
)
),
React.DOM.li({className: "conversation-toolbar-btn-box"},
MediaControlButton({action: this.handleToggleVideo,
React.createElement("li", {className: "conversation-toolbar-btn-box"},
React.createElement(MediaControlButton, {action: this.handleToggleVideo,
enabled: this.props.video.enabled,
visible: this.props.video.visible,
scope: "local", type: "video"})
),
React.DOM.li({className: "conversation-toolbar-btn-box"},
MediaControlButton({action: this.handleToggleAudio,
React.createElement("li", {className: "conversation-toolbar-btn-box"},
React.createElement(MediaControlButton, {action: this.handleToggleAudio,
enabled: this.props.audio.enabled,
visible: this.props.audio.visible,
scope: "local", type: "audio"})
@ -140,7 +140,7 @@ loop.shared.views = (function(_, OT, l10n) {
/**
* Conversation view.
*/
var ConversationView = React.createClass({displayName: 'ConversationView',
var ConversationView = React.createClass({displayName: "ConversationView",
mixins: [Backbone.Events, sharedMixins.AudioMixin],
propTypes: {
@ -324,15 +324,15 @@ loop.shared.views = (function(_, OT, l10n) {
});
/* jshint ignore:start */
return (
React.DOM.div({className: "video-layout-wrapper"},
React.DOM.div({className: "conversation"},
React.DOM.div({className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"})
React.createElement("div", {className: "video-layout-wrapper"},
React.createElement("div", {className: "conversation"},
React.createElement("div", {className: "media nested"},
React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.createElement("div", {className: "video_inner remote"})
),
React.DOM.div({className: localStreamClasses})
React.createElement("div", {className: localStreamClasses})
),
ConversationToolbar({video: this.state.video,
React.createElement(ConversationToolbar, {video: this.state.video,
audio: this.state.audio,
publishStream: this.publishStream,
hangup: this.hangup})
@ -346,7 +346,7 @@ loop.shared.views = (function(_, OT, l10n) {
/**
* Notification view.
*/
var NotificationView = React.createClass({displayName: 'NotificationView',
var NotificationView = React.createClass({displayName: "NotificationView",
mixins: [Backbone.Events],
propTypes: {
@ -357,19 +357,19 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() {
var notification = this.props.notification;
return (
React.DOM.div({className: "notificationContainer"},
React.DOM.div({key: this.props.key,
React.createElement("div", {className: "notificationContainer"},
React.createElement("div", {key: this.props.key,
className: "alert alert-" + notification.get("level")},
React.DOM.span({className: "message"}, notification.get("message"))
React.createElement("span", {className: "message"}, notification.get("message"))
),
React.DOM.div({className: "detailsBar details-" + notification.get("level"),
React.createElement("div", {className: "detailsBar details-" + notification.get("level"),
hidden: !notification.get("details")},
React.DOM.button({className: "detailsButton btn-info",
React.createElement("button", {className: "detailsButton btn-info",
onClick: notification.get("detailsButtonCallback"),
hidden: !notification.get("detailsButtonLabel") || !notification.get("detailsButtonCallback")},
notification.get("detailsButtonLabel")
),
React.DOM.span({className: "details"}, notification.get("details"))
React.createElement("span", {className: "details"}, notification.get("details"))
)
)
);
@ -379,7 +379,7 @@ loop.shared.views = (function(_, OT, l10n) {
/**
* Notification list view.
*/
var NotificationListView = React.createClass({displayName: 'NotificationListView',
var NotificationListView = React.createClass({displayName: "NotificationListView",
mixins: [Backbone.Events, sharedMixins.DocumentVisibilityMixin],
propTypes: {
@ -419,9 +419,9 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() {
return (
React.DOM.div({className: "messages"},
React.createElement("div", {className: "messages"},
this.props.notifications.map(function(notification, key) {
return NotificationView({key: key, notification: notification});
return React.createElement(NotificationView, {key: key, notification: notification});
})
)
@ -429,7 +429,7 @@ loop.shared.views = (function(_, OT, l10n) {
}
});
var Button = React.createClass({displayName: 'Button',
var Button = React.createClass({displayName: "Button",
propTypes: {
caption: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func.isRequired,
@ -453,18 +453,18 @@ loop.shared.views = (function(_, OT, l10n) {
classObject[this.props.additionalClass] = true;
}
return (
React.DOM.button({onClick: this.props.onClick,
React.createElement("button", {onClick: this.props.onClick,
disabled: this.props.disabled,
id: this.props.htmlId,
className: cx(classObject)},
React.DOM.span({className: "button-caption"}, this.props.caption),
React.createElement("span", {className: "button-caption"}, this.props.caption),
this.props.children
)
);
}
});
var ButtonGroup = React.createClass({displayName: 'ButtonGroup',
var ButtonGroup = React.createClass({displayName: "ButtonGroup",
PropTypes: {
additionalClass: React.PropTypes.string
},
@ -482,7 +482,7 @@ loop.shared.views = (function(_, OT, l10n) {
classObject[this.props.additionalClass] = true;
}
return (
React.DOM.div({className: cx(classObject)},
React.createElement("div", {className: cx(classObject)},
this.props.children
)
);

22
browser/components/loop/content/shared/libs/react-0.11.2-prod.js
View File

File diff suppressed because one or more lines are too long

16
browser/components/loop/content/shared/libs/react-0.12.2-prod.js Normal file
View File

File diff suppressed because one or more lines are too long

6496
browser/components/loop/content/shared/libs/react-0.11.2.js → browser/components/loop/content/shared/libs/react-0.12.2.js
View File

File diff suppressed because it is too large Load Diff

4
browser/components/loop/jar.mn
View File

@ -89,9 +89,9 @@ browser.jar:
# Shared libs
#ifdef DEBUG
content/browser/loop/shared/libs/react-0.11.2.js (content/shared/libs/react-0.11.2.js)
content/browser/loop/shared/libs/react-0.12.2.js (content/shared/libs/react-0.12.2.js)
#else
content/browser/loop/shared/libs/react-0.11.2.js (content/shared/libs/react-0.11.2-prod.js)
content/browser/loop/shared/libs/react-0.12.2.js (content/shared/libs/react-0.12.2-prod.js)
#endif
content/browser/loop/shared/libs/lodash-2.4.1.js (content/shared/libs/lodash-2.4.1.js)
content/browser/loop/shared/libs/jquery-2.1.0.js (content/shared/libs/jquery-2.1.0.js)

2
browser/components/loop/standalone/content/index.html
View File

@ -80,7 +80,7 @@
}
</script>
<script type="text/javascript" src="libs/l10n-gaia-02ca67948fe8.js"></script>
<script type="text/javascript" src="shared/libs/react-0.11.2.js"></script>
<script type="text/javascript" src="shared/libs/react-0.12.2.js"></script>
<script type="text/javascript" src="shared/libs/jquery-2.1.0.js"></script>
<script type="text/javascript" src="shared/libs/lodash-2.4.1.js"></script>
<script type="text/javascript" src="shared/libs/backbone-1.1.2.js"></script>

4
browser/components/loop/standalone/content/js/fxOSMarketplace.js
View File

@ -12,9 +12,9 @@ loop.fxOSMarketplaceViews = (function() {
* iframe in case that we need to request the installation of the FxOS Loop
* client.
*/
var FxOSHiddenMarketplaceView = React.createClass({displayName: 'FxOSHiddenMarketplaceView',
var FxOSHiddenMarketplaceView = React.createClass({displayName: "FxOSHiddenMarketplaceView",
render: function() {
return React.DOM.iframe({id: "marketplace", src: this.props.marketplaceSrc, hidden: true});
return React.createElement("iframe", {id: "marketplace", src: this.props.marketplaceSrc, hidden: true});
},
componentDidUpdate: function() {

92
browser/components/loop/standalone/content/js/standaloneRoomViews.js
View File

@ -17,7 +17,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
var sharedMixins = loop.shared.mixins;
var sharedViews = loop.shared.views;
var StandaloneRoomInfoArea = React.createClass({displayName: 'StandaloneRoomInfoArea',
var StandaloneRoomInfoArea = React.createClass({displayName: "StandaloneRoomInfoArea",
propTypes: {
helper: React.PropTypes.instanceOf(loop.shared.utils.Helper).isRequired,
activeRoomStore: React.PropTypes.oneOfType([
@ -38,7 +38,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
_renderCallToActionLink: function() {
if (this.props.helper.isFirefox(navigator.userAgent)) {
return (
React.DOM.a({href: loop.config.learnMoreUrl, className: "btn btn-info"},
React.createElement("a", {href: loop.config.learnMoreUrl, className: "btn btn-info"},
mozL10n.get("rooms_room_full_call_to_action_label", {
clientShortname: mozL10n.get("clientShortname2")
})
@ -46,7 +46,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
);
}
return (
React.DOM.a({href: loop.config.brandWebsiteUrl, className: "btn btn-info"},
React.createElement("a", {href: loop.config.brandWebsiteUrl, className: "btn btn-info"},
mozL10n.get("rooms_room_full_call_to_action_nonFx_label", {
brandShortname: mozL10n.get("brandShortname")
})
@ -74,8 +74,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
case ROOM_STATES.READY: {
// XXX: In ENDED state, we should rather display the feedback form.
return (
React.DOM.div({className: "room-inner-info-area"},
React.DOM.button({className: "btn btn-join btn-info",
React.createElement("div", {className: "room-inner-info-area"},
React.createElement("button", {className: "btn btn-join btn-info",
onClick: this.props.joinRoom},
mozL10n.get("rooms_room_join_label")
)
@ -87,8 +87,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
{clientShortname: mozL10n.get("clientShortname2")});
// XXX Bug 1047040 will add images to help prompt the user.
return (
React.DOM.div({className: "room-inner-info-area"},
React.DOM.p({className: "prompt-media-message"},
React.createElement("div", {className: "room-inner-info-area"},
React.createElement("p", {className: "prompt-media-message"},
msg
)
)
@ -97,8 +97,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
case ROOM_STATES.JOINED:
case ROOM_STATES.SESSION_CONNECTED: {
return (
React.DOM.div({className: "room-inner-info-area"},
React.DOM.p({className: "empty-room-message"},
React.createElement("div", {className: "room-inner-info-area"},
React.createElement("p", {className: "empty-room-message"},
mozL10n.get("rooms_only_occupant_label")
)
)
@ -106,19 +106,19 @@ loop.standaloneRoomViews = (function(mozL10n) {
}
case ROOM_STATES.FULL: {
return (
React.DOM.div({className: "room-inner-info-area"},
React.DOM.p({className: "full-room-message"},
React.createElement("div", {className: "room-inner-info-area"},
React.createElement("p", {className: "full-room-message"},
mozL10n.get("rooms_room_full_label")
),
React.DOM.p(null, this._renderCallToActionLink())
React.createElement("p", null, this._renderCallToActionLink())
)
);
}
case ROOM_STATES.ENDED: {
if (this.props.roomUsed)
return (
React.DOM.div({className: "ended-conversation"},
sharedViews.FeedbackView({
React.createElement("div", {className: "ended-conversation"},
React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.onFeedbackSent}
)
@ -132,11 +132,11 @@ loop.standaloneRoomViews = (function(mozL10n) {
}
case ROOM_STATES.FAILED: {
return (
React.DOM.div({className: "room-inner-info-area"},
React.DOM.p({className: "failed-room-message"},
React.createElement("div", {className: "room-inner-info-area"},
React.createElement("p", {className: "failed-room-message"},
this._getFailureString()
),
React.DOM.button({className: "btn btn-join btn-info",
React.createElement("button", {className: "btn btn-join btn-info",
onClick: this.props.joinRoom},
mozL10n.get("retry_call_button")
)
@ -150,30 +150,30 @@ loop.standaloneRoomViews = (function(mozL10n) {
}
});
var StandaloneRoomHeader = React.createClass({displayName: 'StandaloneRoomHeader',
var StandaloneRoomHeader = React.createClass({displayName: "StandaloneRoomHeader",
render: function() {
return (
React.DOM.header(null,
React.DOM.h1(null, mozL10n.get("clientShortname2")),
React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl},
React.DOM.i({className: "icon icon-help"})
React.createElement("header", null,
React.createElement("h1", null, mozL10n.get("clientShortname2")),
React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl},
React.createElement("i", {className: "icon icon-help"})
)
)
);
}
});
var StandaloneRoomFooter = React.createClass({displayName: 'StandaloneRoomFooter',
var StandaloneRoomFooter = React.createClass({displayName: "StandaloneRoomFooter",
_getContent: function() {
return mozL10n.get("legal_text_and_links", {
"clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use_url": React.renderComponentToStaticMarkup(
React.DOM.a({href: loop.config.legalWebsiteUrl, target: "_blank"},
"terms_of_use_url": React.renderToStaticMarkup(
React.createElement("a", {href: loop.config.legalWebsiteUrl, target: "_blank"},
mozL10n.get("terms_of_use_link_text")
)
),
"privacy_notice_url": React.renderComponentToStaticMarkup(
React.DOM.a({href: loop.config.privacyWebsiteUrl, target: "_blank"},
"privacy_notice_url": React.renderToStaticMarkup(
React.createElement("a", {href: loop.config.privacyWebsiteUrl, target: "_blank"},
mozL10n.get("privacy_notice_link_text")
)
),
@ -182,15 +182,15 @@ loop.standaloneRoomViews = (function(mozL10n) {
render: function() {
return (
React.DOM.footer(null,
React.DOM.p({dangerouslySetInnerHTML: {__html: this._getContent()}}),
React.DOM.div({className: "footer-logo"})
React.createElement("footer", null,
React.createElement("p", {dangerouslySetInnerHTML: {__html: this._getContent()}}),
React.createElement("div", {className: "footer-logo"})
)
);
}
});
var StandaloneRoomView = React.createClass({displayName: 'StandaloneRoomView',
var StandaloneRoomView = React.createClass({displayName: "StandaloneRoomView",
mixins: [
Backbone.Events,
sharedMixins.RoomsAudioMixin
@ -360,29 +360,29 @@ loop.standaloneRoomViews = (function(mozL10n) {
});
return (
React.DOM.div({className: "room-conversation-wrapper"},
React.DOM.div({className: "beta-logo"}),
StandaloneRoomHeader(null),
StandaloneRoomInfoArea({roomState: this.state.roomState,
React.createElement("div", {className: "room-conversation-wrapper"},
React.createElement("div", {className: "beta-logo"}),
React.createElement(StandaloneRoomHeader, null),
React.createElement(StandaloneRoomInfoArea, {roomState: this.state.roomState,
failureReason: this.state.failureReason,
joinRoom: this.joinRoom,
helper: this.props.helper,
activeRoomStore: this.props.activeRoomStore,
feedbackStore: this.props.feedbackStore,
roomUsed: this.state.used}),
React.DOM.div({className: "video-layout-wrapper"},
React.DOM.div({className: "conversation room-conversation"},
React.DOM.h2({className: "room-name"}, this.state.roomName),
React.DOM.div({className: "media nested"},
React.DOM.span({className: "self-view-hidden-message"},
React.createElement("div", {className: "video-layout-wrapper"},
React.createElement("div", {className: "conversation room-conversation"},
React.createElement("h2", {className: "room-name"}, this.state.roomName),
React.createElement("div", {className: "media nested"},
React.createElement("span", {className: "self-view-hidden-message"},
mozL10n.get("self_view_hidden_message")
),
React.DOM.div({className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"})
React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.createElement("div", {className: "video_inner remote"})
),
React.DOM.div({className: localStreamClasses})
React.createElement("div", {className: localStreamClasses})
),
sharedViews.ConversationToolbar({
React.createElement(sharedViews.ConversationToolbar, {
video: {enabled: !this.state.videoMuted,
visible: this._roomIsActive()},
audio: {enabled: !this.state.audioMuted,
@ -393,10 +393,10 @@ loop.standaloneRoomViews = (function(mozL10n) {
enableHangup: this._roomIsActive()})
)
),
loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({
React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
marketplaceSrc: this.state.marketplaceSrc,
onMarketplaceMessage: this.state.onMarketplaceMessage}),
StandaloneRoomFooter(null)
React.createElement(StandaloneRoomFooter, null)
)
);
}

4
browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
View File

@ -167,12 +167,12 @@ loop.standaloneRoomViews = (function(mozL10n) {
_getContent: function() {
return mozL10n.get("legal_text_and_links", {
"clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use_url": React.renderComponentToStaticMarkup(
"terms_of_use_url": React.renderToStaticMarkup(
<a href={loop.config.legalWebsiteUrl} target="_blank">
{mozL10n.get("terms_of_use_link_text")}
</a>
),
"privacy_notice_url": React.renderComponentToStaticMarkup(
"privacy_notice_url": React.renderToStaticMarkup(
<a href={loop.config.privacyWebsiteUrl} target="_blank">
{mozL10n.get("privacy_notice_link_text")}
</a>

227
browser/components/loop/standalone/content/js/webapp.js
View File

@ -25,11 +25,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Homepage view.
*/
var HomeView = React.createClass({displayName: 'HomeView',
var HomeView = React.createClass({displayName: "HomeView",
render: function() {
multiplexGum.reset();
return (
React.DOM.p(null, mozL10n.get("welcome", {clientShortname: mozL10n.get("clientShortname2")}))
React.createElement("p", null, mozL10n.get("welcome", {clientShortname: mozL10n.get("clientShortname2")}))
);
}
});
@ -37,16 +37,16 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Unsupported Browsers view.
*/
var UnsupportedBrowserView = React.createClass({displayName: 'UnsupportedBrowserView',
var UnsupportedBrowserView = React.createClass({displayName: "UnsupportedBrowserView",
render: function() {
return (
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"))
React.createElement("div", {className: "expired-url-info"},
React.createElement("div", {className: "info-panel"},
React.createElement("div", {className: "firefox-logo"}),
React.createElement("h1", null, mozL10n.get("incompatible_browser_heading")),
React.createElement("h4", null, mozL10n.get("incompatible_browser_message"))
),
PromoteFirefoxView({helper: this.props.helper})
React.createElement(PromoteFirefoxView, {helper: this.props.helper})
)
);
}
@ -55,13 +55,13 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Unsupported Device view.
*/
var UnsupportedDeviceView = React.createClass({displayName: 'UnsupportedDeviceView',
var UnsupportedDeviceView = React.createClass({displayName: "UnsupportedDeviceView",
render: function() {
return (
React.DOM.div(null,
React.DOM.h2(null, mozL10n.get("incompatible_device")),
React.DOM.p(null, mozL10n.get("sorry_device_unsupported", {clientShortname: mozL10n.get("clientShortname2")})),
React.DOM.p(null, mozL10n.get("use_firefox_windows_mac_linux", {brandShortname: mozL10n.get("brandShortname")}))
React.createElement("div", null,
React.createElement("h2", null, mozL10n.get("incompatible_device")),
React.createElement("p", null, mozL10n.get("sorry_device_unsupported", {clientShortname: mozL10n.get("clientShortname2")})),
React.createElement("p", null, mozL10n.get("use_firefox_windows_mac_linux", {brandShortname: mozL10n.get("brandShortname")}))
)
);
}
@ -70,20 +70,20 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Firefox promotion interstitial. Will display only to non-Firefox users.
*/
var PromoteFirefoxView = React.createClass({displayName: 'PromoteFirefoxView',
var PromoteFirefoxView = React.createClass({displayName: "PromoteFirefoxView",
propTypes: {
helper: React.PropTypes.object.isRequired
},
render: function() {
if (this.props.helper.isFirefox(navigator.userAgent)) {
return React.DOM.div(null);
return React.createElement("div", null);
}
return (
React.DOM.div({className: "promote-firefox"},
React.DOM.h3(null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})),
React.DOM.p(null,
React.DOM.a({className: "btn btn-large btn-accept",
React.createElement("div", {className: "promote-firefox"},
React.createElement("h3", null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})),
React.createElement("p", null,
React.createElement("a", {className: "btn btn-large btn-accept",
href: loop.config.brandWebsiteUrl},
mozL10n.get("get_firefox_button", {
brandShortname: mozL10n.get("brandShortname")
@ -98,30 +98,30 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Expired call URL view.
*/
var CallUrlExpiredView = React.createClass({displayName: 'CallUrlExpiredView',
var CallUrlExpiredView = React.createClass({displayName: "CallUrlExpiredView",
propTypes: {
helper: React.PropTypes.object.isRequired
},
render: function() {
return (
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("call_url_unavailable_notification_heading")),
React.DOM.h4(null, mozL10n.get("call_url_unavailable_notification_message2"))
React.createElement("div", {className: "expired-url-info"},
React.createElement("div", {className: "info-panel"},
React.createElement("div", {className: "firefox-logo"}),
React.createElement("h1", null, mozL10n.get("call_url_unavailable_notification_heading")),
React.createElement("h4", null, mozL10n.get("call_url_unavailable_notification_message2"))
),
PromoteFirefoxView({helper: this.props.helper})
React.createElement(PromoteFirefoxView, {helper: this.props.helper})
)
);
}
});
var ConversationBranding = React.createClass({displayName: 'ConversationBranding',
var ConversationBranding = React.createClass({displayName: "ConversationBranding",
render: function() {
return (
React.DOM.h1({className: "standalone-header-title"},
React.DOM.strong(null, mozL10n.get("clientShortname2"))
React.createElement("h1", {className: "standalone-header-title"},
React.createElement("strong", null, mozL10n.get("clientShortname2"))
)
);
}
@ -195,7 +195,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
});
var ConversationHeader = React.createClass({displayName: 'ConversationHeader',
var ConversationHeader = React.createClass({displayName: "ConversationHeader",
render: function() {
var cx = React.addons.classSet;
var conversationUrl = location.href;
@ -212,15 +212,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
});
return (
React.DOM.header({className: "standalone-header header-box container-box"},
ConversationBranding(null),
React.DOM.div({className: "loop-logo",
React.createElement("header", {className: "standalone-header header-box container-box"},
React.createElement(ConversationBranding, null),
React.createElement("div", {className: "loop-logo",
title: mozL10n.get("client_alttext",
{clientShortname: mozL10n.get("clientShortname2")})}),
React.DOM.h3({className: "call-url"},
React.createElement("h3", {className: "call-url"},
conversationUrl
),
React.DOM.h4({className: urlCreationDateClasses},
React.createElement("h4", {className: urlCreationDateClasses},
callUrlCreationDateString
)
)
@ -228,15 +228,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
});
var ConversationFooter = React.createClass({displayName: 'ConversationFooter',
var ConversationFooter = React.createClass({displayName: "ConversationFooter",
render: function() {
return (
React.DOM.div({className: "standalone-footer container-box"},
React.DOM.div({title: mozL10n.get("vendor_alttext",
React.createElement("div", {className: "standalone-footer container-box"},
React.createElement("div", {title: mozL10n.get("vendor_alttext",
{vendorShortname: mozL10n.get("vendorShortname")}),
className: "footer-logo"}),
React.DOM.div({className: "footer-external-links"},
React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl},
React.createElement("div", {className: "footer-external-links"},
React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl},
mozL10n.get("support_link")
)
)
@ -249,7 +249,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
* A view for when conversations are pending, displays any messages
* and an option cancel button.
*/
var PendingConversationView = React.createClass({displayName: 'PendingConversationView',
var PendingConversationView = React.createClass({displayName: "PendingConversationView",
propTypes: {
callState: React.PropTypes.string.isRequired,
// If not supplied, the cancel button is not displayed.
@ -265,32 +265,32 @@ loop.webapp = (function($, _, OT, mozL10n) {
});
return (
React.DOM.div({className: "container"},
React.DOM.div({className: "container-box"},
React.DOM.header({className: "pending-header header-box"},
ConversationBranding(null)
React.createElement("div", {className: "container"},
React.createElement("div", {className: "container-box"},
React.createElement("header", {className: "pending-header header-box"},
React.createElement(ConversationBranding, null)
),
React.DOM.div({id: "cameraPreview"}),
React.createElement("div", {id: "cameraPreview"}),
React.DOM.div({id: "messages"}),
React.createElement("div", {id: "messages"}),
React.DOM.p({className: "standalone-btn-label"},
React.createElement("p", {className: "standalone-btn-label"},
this.props.callState
),
React.DOM.div({className: "btn-pending-cancel-group btn-group"},
React.DOM.div({className: "flex-padding-1"}),
React.DOM.button({className: cancelButtonClasses,
React.createElement("div", {className: "btn-pending-cancel-group btn-group"},
React.createElement("div", {className: "flex-padding-1"}),
React.createElement("button", {className: cancelButtonClasses,
onClick: this.props.cancelCallback},
React.DOM.span({className: "standalone-call-btn-text"},
React.createElement("span", {className: "standalone-call-btn-text"},
mozL10n.get("initiate_call_cancel_button")
)
),
React.DOM.div({className: "flex-padding-1"})
React.createElement("div", {className: "flex-padding-1"})
)
),
ConversationFooter(null)
React.createElement(ConversationFooter, null)
)
);
}
@ -300,7 +300,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
* View displayed whilst the get user media prompt is being displayed. Indicates
* to the user to accept the prompt.
*/
var GumPromptConversationView = React.createClass({displayName: 'GumPromptConversationView',
var GumPromptConversationView = React.createClass({displayName: "GumPromptConversationView",
render: function() {
var callState = mozL10n.get("call_progress_getting_media_description", {
clientShortname: mozL10n.get("clientShortname2")
@ -310,7 +310,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
currentStatus: mozL10n.get("call_progress_getting_media_title")
});
return PendingConversationView({callState: callState});
return React.createElement(PendingConversationView, {callState: callState});
}
});
@ -318,7 +318,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
* View displayed waiting for a call to be connected. Updates the display
* once the websocket shows that the callee is being alerted.
*/
var WaitingConversationView = React.createClass({displayName: 'WaitingConversationView',
var WaitingConversationView = React.createClass({displayName: "WaitingConversationView",
mixins: [sharedMixins.AudioMixin],
getInitialState: function() {
@ -356,7 +356,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
currentStatus: mozL10n.get(callStateStringEntityName)});
return (
PendingConversationView({
React.createElement(PendingConversationView, {
callState: callState,
cancelCallback: this._cancelOutgoingCall}
)
@ -364,7 +364,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
});
var InitiateCallButton = React.createClass({displayName: 'InitiateCallButton',
var InitiateCallButton = React.createClass({displayName: "InitiateCallButton",
mixins: [sharedMixins.DropdownMenuMixin],
propTypes: {
@ -388,25 +388,25 @@ loop.webapp = (function($, _, OT, mozL10n) {
"disabled": this.props.disabled
});
return (
React.DOM.div({className: "standalone-btn-chevron-menu-group"},
React.DOM.div({className: "btn-group-chevron"},
React.DOM.div({className: "btn-group"},
React.DOM.button({className: "btn btn-constrained btn-large btn-accept",
React.createElement("div", {className: "standalone-btn-chevron-menu-group"},
React.createElement("div", {className: "btn-group-chevron"},
React.createElement("div", {className: "btn-group"},
React.createElement("button", {className: "btn btn-constrained btn-large btn-accept",
onClick: this.props.startCall("audio-video"),
disabled: this.props.disabled,
title: mozL10n.get("initiate_audio_video_call_tooltip2")},
React.DOM.span({className: "standalone-call-btn-text"},
React.createElement("span", {className: "standalone-call-btn-text"},
this.props.caption
),
React.DOM.span({className: "standalone-call-btn-video-icon"})
React.createElement("span", {className: "standalone-call-btn-video-icon"})
),
React.DOM.div({className: chevronClasses,
React.createElement("div", {className: chevronClasses,
onClick: this.toggleDropdownMenu}
)
),
React.DOM.ul({className: dropdownMenuClasses},
React.DOM.li(null,
React.DOM.button({className: "start-audio-only-call",
React.createElement("ul", {className: dropdownMenuClasses},
React.createElement("li", null,
React.createElement("button", {className: "start-audio-only-call",
onClick: this.props.startCall("audio"),
disabled: this.props.disabled},
mozL10n.get("initiate_audio_call_button2")
@ -422,7 +422,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Initiate conversation view.
*/
var InitiateConversationView = React.createClass({displayName: 'InitiateConversationView',
var InitiateConversationView = React.createClass({displayName: "InitiateConversationView",
mixins: [Backbone.Events],
propTypes: {
@ -518,37 +518,37 @@ loop.webapp = (function($, _, OT, mozL10n) {
});
return (
React.DOM.div({className: "container"},
React.DOM.div({className: "container-box"},
React.createElement("div", {className: "container"},
React.createElement("div", {className: "container-box"},
ConversationHeader({
React.createElement(ConversationHeader, {
urlCreationDateString: this.state.urlCreationDateString}),
React.DOM.p({className: "standalone-btn-label"},
React.createElement("p", {className: "standalone-btn-label"},
this.props.title
),
React.DOM.div({id: "messages"}),
React.createElement("div", {id: "messages"}),
React.DOM.div({className: "btn-group"},
React.DOM.div({className: "flex-padding-1"}),
InitiateCallButton({
React.createElement("div", {className: "btn-group"},
React.createElement("div", {className: "flex-padding-1"}),
React.createElement(InitiateCallButton, {
caption: this.props.callButtonLabel,
disabled: this.state.disableCallButton,
startCall: this.startCall}
),
React.DOM.div({className: "flex-padding-1"})
React.createElement("div", {className: "flex-padding-1"})
),
React.DOM.p({className: tosClasses,
React.createElement("p", {className: tosClasses,
dangerouslySetInnerHTML: {__html: tosHTML}})
),
loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({
React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
marketplaceSrc: this.state.marketplaceSrc,
onMarketplaceMessage: this.state.onMarketplaceMessage}),
ConversationFooter(null)
React.createElement(ConversationFooter, null)
)
);
}
@ -557,7 +557,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
/**
* Ended conversation view.
*/
var EndedConversationView = React.createClass({displayName: 'EndedConversationView',
var EndedConversationView = React.createClass({displayName: "EndedConversationView",
propTypes: {
conversation: React.PropTypes.instanceOf(sharedModels.ConversationModel)
.isRequired,
@ -571,12 +571,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
{clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_conversation_ended")});
return (
React.DOM.div({className: "ended-conversation"},
sharedViews.FeedbackView({
React.createElement("div", {className: "ended-conversation"},
React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.props.onAfterFeedbackReceived}
),
sharedViews.ConversationView({
React.createElement(sharedViews.ConversationView, {
initiate: false,
sdk: this.props.sdk,
model: this.props.conversation,
@ -588,18 +588,18 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
});
var StartConversationView = React.createClass({displayName: 'StartConversationView',
var StartConversationView = React.createClass({displayName: "StartConversationView",
render: function() {
document.title = mozL10n.get("clientShortname2");
return this.transferPropsTo(
InitiateConversationView({
title: mozL10n.get("initiate_call_button_label2"),
callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
return React.createElement(InitiateConversationView, React.__spread({},
this.props,
{title: mozL10n.get("initiate_call_button_label2"),
callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
);
}
});
var FailedConversationView = React.createClass({displayName: 'FailedConversationView',
var FailedConversationView = React.createClass({displayName: "FailedConversationView",
mixins: [sharedMixins.AudioMixin],
componentDidMount: function() {
@ -610,11 +610,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_error")});
return this.transferPropsTo(
InitiateConversationView({
title: mozL10n.get("call_failed_title"),
callButtonLabel: mozL10n.get("retry_call_button")})
);
return React.createElement(InitiateConversationView, React.__spread({},
this.props,
{title: mozL10n.get("call_failed_title"),
callButtonLabel: mozL10n.get("retry_call_button")}));
}
});
@ -624,7 +623,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
*
* At the moment, it does more than that, these parts need refactoring out.
*/
var OutgoingConversationView = React.createClass({displayName: 'OutgoingConversationView',
var OutgoingConversationView = React.createClass({displayName: "OutgoingConversationView",
propTypes: {
client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired,
conversation: React.PropTypes.oneOfType([
@ -679,7 +678,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
switch (this.state.callStatus) {
case "start": {
return (
StartConversationView({
React.createElement(StartConversationView, {
conversation: this.props.conversation,
notifications: this.props.notifications,
client: this.props.client}
@ -688,7 +687,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
case "failure": {
return (
FailedConversationView({
React.createElement(FailedConversationView, {
conversation: this.props.conversation,
notifications: this.props.notifications,
client: this.props.client}
@ -696,17 +695,17 @@ loop.webapp = (function($, _, OT, mozL10n) {
);
}
case "gumPrompt": {
return GumPromptConversationView(null);
return React.createElement(GumPromptConversationView, null);
}
case "pending": {
return WaitingConversationView({websocket: this._websocket});
return React.createElement(WaitingConversationView, {websocket: this._websocket});
}
case "connected": {
document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_in_conversation")});
return (
sharedViews.ConversationView({
React.createElement(sharedViews.ConversationView, {
initiate: true,
sdk: this.props.sdk,
model: this.props.conversation,
@ -716,7 +715,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
case "end": {
return (
EndedConversationView({
React.createElement(EndedConversationView, {
sdk: this.props.sdk,
conversation: this.props.conversation,
feedbackStore: this.props.feedbackStore,
@ -726,11 +725,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
case "expired": {
return (
CallUrlExpiredView({helper: this.props.helper})
React.createElement(CallUrlExpiredView, {helper: this.props.helper})
);
}
default: {
return HomeView(null);
return React.createElement(HomeView, null);
}
}
},
@ -918,7 +917,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
* Webapp Root View. This is the main, single, view that controls the display
* of the webapp page.
*/
var WebappRootView = React.createClass({displayName: 'WebappRootView',
var WebappRootView = React.createClass({displayName: "WebappRootView",
mixins: [sharedMixins.UrlHashChangeMixin,
sharedMixins.DocumentLocationMixin,
@ -967,14 +966,14 @@ loop.webapp = (function($, _, OT, mozL10n) {
render: function() {
switch (this.state.windowType) {
case "unsupportedDevice": {
return UnsupportedDeviceView(null);
return React.createElement(UnsupportedDeviceView, null);
}
case "unsupportedBrowser": {
return UnsupportedBrowserView({helper: this.props.helper});
return React.createElement(UnsupportedBrowserView, {helper: this.props.helper});
}
case "outgoing": {
return (
OutgoingConversationView({
React.createElement(OutgoingConversationView, {
client: this.props.client,
conversation: this.props.conversation,
helper: this.props.helper,
@ -986,7 +985,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
}
case "room": {
return (
loop.standaloneRoomViews.StandaloneRoomView({
React.createElement(loop.standaloneRoomViews.StandaloneRoomView, {
activeRoomStore: this.props.activeRoomStore,
feedbackStore: this.props.feedbackStore,
dispatcher: this.props.dispatcher,
@ -995,7 +994,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
);
}
case "home": {
return HomeView(null);
return React.createElement(HomeView, null);
}
default: {
// The state hasn't been initialised yet, so don't display
@ -1079,7 +1078,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
dispatcher.dispatch(new sharedActions.WindowUnload());
});
React.renderComponent(WebappRootView({
React.render(React.createElement(WebappRootView, {
client: client,
conversation: conversation,
helper: helper,

21
browser/components/loop/standalone/content/js/webapp.jsx
View File

@ -591,11 +591,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
var StartConversationView = React.createClass({
render: function() {
document.title = mozL10n.get("clientShortname2");
return this.transferPropsTo(
<InitiateConversationView
title={mozL10n.get("initiate_call_button_label2")}
callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")} />
);
return <InitiateConversationView
{...this.props}
title={mozL10n.get("initiate_call_button_label2")}
callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")}
/>;
}
});
@ -610,11 +610,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_error")});
return this.transferPropsTo(
<InitiateConversationView
title={mozL10n.get("call_failed_title")}
callButtonLabel={mozL10n.get("retry_call_button")} />
);
return <InitiateConversationView
{...this.props}
title={mozL10n.get("call_failed_title")}
callButtonLabel={mozL10n.get("retry_call_button")} />;
}
});
@ -1079,7 +1078,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
dispatcher.dispatch(new sharedActions.WindowUnload());
});
React.renderComponent(<WebappRootView
React.render(<WebappRootView
client={client}
conversation={conversation}
helper={helper}

76
browser/components/loop/test/desktop-local/contacts_test.js
View File

@ -59,7 +59,8 @@ describe("loop.contacts", function() {
};
navigator.mozLoop.contacts = {getAll: sandbox.stub()};
listView = TestUtils.renderIntoDocument(loop.contacts.ContactsList());
listView = TestUtils.renderIntoDocument(
React.createElement(loop.contacts.ContactsList));
});
afterEach(function() {
@ -88,46 +89,47 @@ describe("loop.contacts", function() {
describe("ContactDetailsForm", function() {
describe("#render", function() {
describe("add mode", function() {
var view;
beforeEach(function() {
view = TestUtils.renderIntoDocument(
React.createElement(
loop.contacts.ContactDetailsForm, {mode: "add"}));
});
it("should render 'add' header", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var header = view.getDOMNode().querySelector("header");
expect(header).to.not.equal(null);
expect(header.textContent).to.eql(fakeAddContactButtonText);
});
it("should render name input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
expect(nameInput).to.not.equal(null);
});
it("should render email input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var emailInput = view.getDOMNode().querySelector("input[type='email']");
expect(emailInput).to.not.equal(null);
});
it("should render tel input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var telInput = view.getDOMNode().querySelector("input[type='tel']");
expect(telInput).to.not.equal(null);
});
it("should render 'add contact' button", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var addButton = view.getDOMNode().querySelector(".button-accept");
expect(addButton).to.not.equal(null);
expect(addButton.textContent).to.eql(fakeAddContactButtonText);
});
it("should have all fields required by default", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
var telInput = view.getDOMNode().querySelector("input[type='tel']");
var emailInput = view.getDOMNode().querySelector("input[type='email']");
@ -136,9 +138,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(true);
expect(telInput.required).to.equal(true);
});
it("should have email and tel required after a name is input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
var telInput = view.getDOMNode().querySelector("input[type='tel']");
@ -148,9 +149,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(true);
expect(telInput.required).to.equal(true);
});
it("should allow a contact with only a name and a phone number", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
var telInput = view.getDOMNode().querySelector("input[type='tel']");
@ -161,9 +161,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(false, "emailInput");
expect(telInput.checkValidity()).to.equal(true, "telInput");
});
it("should allow a contact with only a name and email", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
var emailInput = view.getDOMNode().querySelector("input[type='email']");
@ -174,9 +173,8 @@ describe("loop.contacts", function() {
expect(emailInput.checkValidity()).to.equal(true);
expect(telInput.required).to.equal(false);
});
it("should not allow a contact with only a name", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
var emailInput = view.getDOMNode().querySelector("input[type='email']");
@ -186,9 +184,8 @@ describe("loop.contacts", function() {
expect(emailInput.checkValidity()).to.equal(false);
expect(telInput.checkValidity()).to.equal(false);
});
it("should not allow a contact without name", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']");
var emailInput = view.getDOMNode().querySelector("input[type='email']");
TestUtils.Simulate.change(emailInput, {target: {value: "test@example.com"}});
@ -200,40 +197,38 @@ describe("loop.contacts", function() {
expect(telInput.checkValidity()).to.equal(true);
});
});
describe("edit mode", function() {
it("should render 'edit' header", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "edit"}));
describe("edit mode", function() {
var view;
beforeEach(function() {
view = TestUtils.renderIntoDocument(
React.createElement(
loop.contacts.ContactDetailsForm, {mode: "edit"}));
});
it("should render 'edit' header", function() {
var header = view.getDOMNode().querySelector("header");
expect(header).to.not.equal(null);
expect(header.textContent).to.eql(fakeEditContactButtonText);
});
it("should render name input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "edit"}));
it("should render name input", function() {
var nameInput = view.getDOMNode().querySelector("input[type='text']");
expect(nameInput).to.not.equal(null);
});
it("should render email input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "edit"}));
it("should render email input", function() {
var emailInput = view.getDOMNode().querySelector("input[type='email']");
expect(emailInput).to.not.equal(null);
});
it("should render tel input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "edit"}));
it("should render tel input", function() {
var telInput = view.getDOMNode().querySelector("input[type='tel']");
expect(telInput).to.not.equal(null);
});
it("should render 'done' button", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "edit"}));
it("should render 'done' button", function() {
var doneButton = view.getDOMNode().querySelector(".button-accept");
expect(doneButton).to.not.equal(null);
expect(doneButton.textContent).to.eql(fakeDoneButtonText);
@ -248,6 +243,7 @@ describe("loop.contacts", function() {
expect(obj.value).to.eql("");
});
it("should return the preferred value when the field exists", function() {
var correctValue = "correct value";
var fakeContact = {fakeField: [{value: "wrong value"}, {value: correctValue, pref: true}]};
@ -265,6 +261,7 @@ describe("loop.contacts", function() {
expect(contact).to.not.have.property("fakeField");
});
it("should clear the value on the object if the new value is empty," +
" it existed before, and it is optional", function() {
var contact = {fakeField: [{value: "foobar"}]};
@ -272,6 +269,7 @@ describe("loop.contacts", function() {
expect(contact["fakeField"][0].value).to.eql("");
});
it("should set the value on the object if the new value is empty," +
" and it did not exist before", function() {
var contact = {fakeField: [{value: "foobar"}]};

77
browser/components/loop/test/desktop-local/conversationViews_test.js
View File

@ -109,7 +109,7 @@ describe("loop.conversationViews", function () {
describe("CallIdentifierView", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
loop.conversationViews.CallIdentifierView(props));
React.createElement(loop.conversationViews.CallIdentifierView, props));
}
it("should set display the peer identifer", function() {
@ -170,7 +170,7 @@ describe("loop.conversationViews", function () {
describe("ConversationDetailView", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
loop.conversationViews.ConversationDetailView(props));
React.createElement(loop.conversationViews.ConversationDetailView, props));
}
it("should set the document title to the calledId", function() {
@ -192,7 +192,7 @@ describe("loop.conversationViews", function () {
describe("PendingConversationView", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
loop.conversationViews.PendingConversationView(props));
React.createElement(loop.conversationViews.PendingConversationView, props));
}
it("should set display connecting string when the state is not alerting",
@ -277,7 +277,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent(options) {
options = options || {};
return TestUtils.renderIntoDocument(
loop.conversationViews.CallFailedView({
React.createElement(loop.conversationViews.CallFailedView, {
dispatcher: dispatcher,
store: store,
contact: options.contact
@ -417,7 +417,7 @@ describe("loop.conversationViews", function () {
describe("OngoingConversationView", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
loop.conversationViews.OngoingConversationView(props));
React.createElement(loop.conversationViews.OngoingConversationView, props));
}
it("should dispatch a setupStreamElements action when the view is created",
@ -511,7 +511,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
loop.conversationViews.OutgoingConversationView({
React.createElement(loop.conversationViews.OutgoingConversationView, {
dispatcher: dispatcher,
store: store,
feedbackStore: feedbackStore
@ -613,7 +613,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
loop.conversationViews.IncomingConversationView({
React.createElement(loop.conversationViews.IncomingConversationView, {
client: client,
conversation: conversation,
sdk: {},
@ -1149,7 +1149,7 @@ describe("loop.conversationViews", function () {
sandbox.stub(window, "Audio").returns(fakeAudio);
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: true
}));
@ -1158,7 +1158,7 @@ describe("loop.conversationViews", function () {
describe("default answer mode", function() {
it("should display video as primary answer mode", function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: true
}));
@ -1170,7 +1170,7 @@ describe("loop.conversationViews", function () {
it("should display audio as primary answer mode", function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: false
}));
@ -1182,7 +1182,7 @@ describe("loop.conversationViews", function () {
it("should accept call with video", function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: true
}));
@ -1199,7 +1199,7 @@ describe("loop.conversationViews", function () {
it("should accept call with audio", function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: false
}));
@ -1216,38 +1216,38 @@ describe("loop.conversationViews", function () {
it("should accept call with video when clicking on secondary btn",
function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
model: model,
video: false
}));
var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-video-small');
view = TestUtils.renderIntoDocument(
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: false
}));
var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-video-small');
React.addons.TestUtils.Simulate.click(secondaryBtn);
React.addons.TestUtils.Simulate.click(secondaryBtn);
sinon.assert.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video");
sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept");
sinon.assert.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video");
sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept");
});
it("should accept call with audio when clicking on secondary btn",
function() {
view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({
model: model,
video: true
}));
var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-audio-small');
view = TestUtils.renderIntoDocument(
React.createElement(loop.conversationViews.IncomingCallView, {
model: model,
video: true
}));
var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-audio-small');
React.addons.TestUtils.Simulate.click(secondaryBtn);
React.addons.TestUtils.Simulate.click(secondaryBtn);
sinon.assert.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio");
sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept");
sinon.assert.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio");
sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept");
});
});
@ -1308,10 +1308,9 @@ describe("loop.conversationViews", function () {
sandbox.stub(window, "Audio").returns(fakeAudio);
view = TestUtils.renderIntoDocument(
loop.conversationViews.GenericFailureView({
React.createElement(loop.conversationViews.GenericFailureView, {
cancelCall: function() {}
})
);
}));
});
it("should play a failure sound, once", function() {

10
browser/components/loop/test/desktop-local/conversation_test.js
View File

@ -73,7 +73,7 @@ describe("loop.conversation", function() {
describe("#init", function() {
beforeEach(function() {
sandbox.stub(React, "renderComponent");
sandbox.stub(React, "render");
sandbox.stub(document.mozL10n, "initialize");
sandbox.stub(loop.shared.models.ConversationModel.prototype,
@ -107,10 +107,10 @@ describe("loop.conversation", function() {
it("should create the AppControllerView", function() {
loop.conversation.init();
sinon.assert.calledOnce(React.renderComponent);
sinon.assert.calledWith(React.renderComponent,
sinon.assert.calledOnce(React.render);
sinon.assert.calledWith(React.render,
sinon.match(function(value) {
return TestUtils.isDescriptorOfType(value,
return TestUtils.isCompositeComponentElement(value,
loop.conversation.AppControllerView);
}));
});
@ -132,7 +132,7 @@ describe("loop.conversation", function() {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
loop.conversation.AppControllerView({
React.createElement(loop.conversation.AppControllerView, {
client: client,
conversation: conversation,
roomStore: roomStore,

2
browser/components/loop/test/desktop-local/index.html
View File

@ -23,7 +23,7 @@
<!-- libs -->
<script src="../../content/libs/l10n.js"></script>
<script src="../../content/shared/libs/react-0.11.2.js"></script>
<script src="../../content/shared/libs/react-0.12.2.js"></script>
<script src="../../content/shared/libs/jquery-2.1.0.js"></script>
<script src="../../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../../content/shared/libs/backbone-1.1.2.js"></script>

132
browser/components/loop/test/desktop-local/panel_test.js
View File

@ -80,7 +80,7 @@ describe("loop.panel", function() {
describe("#init", function() {
beforeEach(function() {
sandbox.stub(React, "renderComponent");
sandbox.stub(React, "render");
sandbox.stub(document.mozL10n, "initialize");
sandbox.stub(document.mozL10n, "get").returns("Fake title");
});
@ -96,10 +96,10 @@ describe("loop.panel", function() {
it("should render the panel view", function() {
loop.panel.init();
sinon.assert.calledOnce(React.renderComponent);
sinon.assert.calledWith(React.renderComponent,
sinon.assert.calledOnce(React.render);
sinon.assert.calledWith(React.render,
sinon.match(function(value) {
return TestUtils.isDescriptorOfType(value,
return TestUtils.isCompositeComponentElement(value,
loop.panel.PanelView);
}));
});
@ -121,7 +121,8 @@ describe("loop.panel", function() {
var view;
beforeEach(function() {
view = TestUtils.renderIntoDocument(loop.panel.AvailabilityDropdown());
view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.AvailabilityDropdown));
});
describe("doNotDisturb preference change", function() {
@ -171,14 +172,15 @@ describe("loop.panel", function() {
});
function createTestPanelView() {
return TestUtils.renderIntoDocument(loop.panel.PanelView({
notifications: notifications,
client: fakeClient,
showTabButtons: true,
mozLoop: fakeMozLoop,
dispatcher: dispatcher,
roomStore: roomStore
}));
return TestUtils.renderIntoDocument(
React.createElement(loop.panel.PanelView, {
notifications: notifications,
client: fakeClient,
showTabButtons: true,
mozLoop: fakeMozLoop,
dispatcher: dispatcher,
roomStore: roomStore
}));
}
describe('TabView', function() {
@ -267,7 +269,8 @@ describe("loop.panel", function() {
it("should be hidden if FxA is not enabled",
function() {
navigator.mozLoop.fxAEnabled = false;
var view = TestUtils.renderIntoDocument(loop.panel.AuthLink());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.AuthLink));
expect(view.getDOMNode()).to.be.null;
});
@ -290,7 +293,8 @@ describe("loop.panel", function() {
it("should be hidden if FxA is not enabled",
function() {
navigator.mozLoop.fxAEnabled = false;
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
expect(view.getDOMNode()).to.be.null;
});
@ -298,7 +302,8 @@ describe("loop.panel", function() {
function() {
navigator.mozLoop.loggedInToFxA = false;
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
expect(view.getDOMNode().querySelectorAll(".icon-signout"))
.to.have.length.of(0);
@ -309,7 +314,8 @@ describe("loop.panel", function() {
it("should show a signout entry when user is authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"};
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
expect(view.getDOMNode().querySelectorAll(".icon-signout"))
.to.have.length.of(1);
@ -320,7 +326,8 @@ describe("loop.panel", function() {
it("should show an account entry when user is authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"};
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
expect(view.getDOMNode().querySelectorAll(".icon-account"))
.to.have.length.of(1);
@ -329,7 +336,8 @@ describe("loop.panel", function() {
it("should open the FxA settings when the account entry is clicked", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"};
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-account"));
@ -341,7 +349,8 @@ describe("loop.panel", function() {
function() {
navigator.mozLoop.loggedInToFxA = false;
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
expect(view.getDOMNode().querySelectorAll(".icon-account"))
.to.have.length.of(0);
@ -349,7 +358,8 @@ describe("loop.panel", function() {
it("should sign in the user on click when unauthenticated", function() {
navigator.mozLoop.loggedInToFxA = false;
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-signin"));
@ -359,7 +369,8 @@ describe("loop.panel", function() {
it("should sign out the user on click when authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"};
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-signout"));
@ -383,7 +394,8 @@ describe("loop.panel", function() {
});
it("should open a tab to the support page", function() {
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
TestUtils.Simulate
.click(view.getDOMNode().querySelector(".icon-help"));
@ -452,10 +464,11 @@ describe("loop.panel", function() {
};
sandbox.stub(notifications, "reset");
view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
notifications: notifications,
client: fakeClient
}));
view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
});
describe("Rendering the component should generate a call URL", function() {
@ -477,10 +490,11 @@ describe("loop.panel", function() {
it("should make a request to requestCallUrl", function() {
sandbox.stub(fakeClient, "requestCallUrl");
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
notifications: notifications,
client: fakeClient
}));
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
sinon.assert.calledOnce(view.props.client.requestCallUrl);
sinon.assert.calledWithExactly(view.props.client.requestCallUrl,
@ -490,7 +504,8 @@ describe("loop.panel", function() {
it("should set the call url form in a pending state", function() {
// Cancel requestCallUrl effect to keep the state pending
fakeClient.requestCallUrl = sandbox.stub();
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -521,7 +536,8 @@ describe("loop.panel", function() {
it("should display a share button for email", function() {
fakeClient.requestCallUrl = sandbox.stub();
var composeCallUrlEmail = sandbox.stub(sharedUtils, "composeCallUrlEmail");
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -536,7 +552,8 @@ describe("loop.panel", function() {
it("should feature a copy button capable of copying the call url when clicked", function() {
fakeClient.requestCallUrl = sandbox.stub();
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -556,7 +573,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is copied via button",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -576,7 +594,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is copied via button",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -599,7 +618,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is emailed",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -619,7 +639,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is emailed",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -642,7 +663,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is copied manually",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -663,7 +685,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is copied manually",
function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
@ -690,10 +713,11 @@ describe("loop.panel", function() {
cb("fake error");
};
sandbox.stub(notifications, "errorL10n");
TestUtils.renderIntoDocument(loop.panel.CallUrlResult({
notifications: notifications,
client: fakeClient
}));
TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications,
client: fakeClient
}));
sinon.assert.calledOnce(notifications.errorL10n);
sinon.assert.calledWithExactly(notifications.errorL10n,
@ -723,7 +747,8 @@ describe("loop.panel", function() {
});
function mountRoomEntry(props) {
return TestUtils.renderIntoDocument(loop.panel.RoomEntry(props));
return TestUtils.renderIntoDocument(
React.createElement(loop.panel.RoomEntry, props));
}
describe("Edit room name", function() {
@ -918,11 +943,12 @@ describe("loop.panel", function() {
});
function createTestComponent() {
return TestUtils.renderIntoDocument(loop.panel.RoomList({
store: roomStore,
dispatcher: dispatcher,
userDisplayName: fakeEmail
}));
return TestUtils.renderIntoDocument(
React.createElement(loop.panel.RoomList, {
store: roomStore,
dispatcher: dispatcher,
userDisplayName: fakeEmail
}));
}
it("should dispatch a GetAllRooms action on mount", function() {
@ -990,7 +1016,8 @@ describe("loop.panel", function() {
}[key];
};
var view = TestUtils.renderIntoDocument(loop.panel.ToSView());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.ToSView));
TestUtils.findRenderedDOMComponentWithClass(view, "terms-service");
});
@ -1019,7 +1046,8 @@ describe("loop.panel", function() {
"seenToS": "seen"
}[key];
};
var view = TestUtils.renderIntoDocument(loop.panel.ToSView());
var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.ToSView));
TestUtils.findRenderedDOMComponentWithClass(view, "terms-service");
});

25
browser/components/loop/test/desktop-local/roomViews_test.js
View File

@ -55,9 +55,10 @@ describe("loop.roomViews", function () {
render: function() { return React.DOM.div(); }
});
var testView = TestUtils.renderIntoDocument(TestView({
roomStore: roomStore
}));
var testView = TestUtils.renderIntoDocument(
React.createElement(TestView, {
roomStore: roomStore
}));
expect(testView.state).eql({
roomState: ROOM_STATES.INIT,
@ -74,9 +75,10 @@ describe("loop.roomViews", function () {
mixins: [loop.roomViews.ActiveRoomStoreMixin],
render: function() { return React.DOM.div(); }
});
var testView = TestUtils.renderIntoDocument(TestView({
roomStore: roomStore
}));
var testView = TestUtils.renderIntoDocument(
React.createElement(TestView, {
roomStore: roomStore
}));
activeRoomStore.setStoreState({roomState: ROOM_STATES.READY});
@ -97,10 +99,11 @@ describe("loop.roomViews", function () {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
new loop.roomViews.DesktopRoomInvitationView({
dispatcher: dispatcher,
roomStore: roomStore
}));
React.createElement(
loop.roomViews.DesktopRoomInvitationView, {
dispatcher: dispatcher,
roomStore: roomStore
}));
}
it("should dispatch an EmailRoomUrl action when the email button is " +
@ -202,7 +205,7 @@ describe("loop.roomViews", function () {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
new loop.roomViews.DesktopRoomConversationView({
React.createElement(loop.roomViews.DesktopRoomConversationView, {
dispatcher: dispatcher,
roomStore: roomStore,
feedbackStore: new loop.store.FeedbackStore(dispatcher, {

7
browser/components/loop/test/shared/feedbackViews_test.js
View File

@ -25,9 +25,10 @@ describe("loop.shared.views.FeedbackView", function() {
feedbackStore = new loop.store.FeedbackStore(dispatcher, {
feedbackClient: fakeFeedbackClient
});
comp = TestUtils.renderIntoDocument(sharedViews.FeedbackView({
feedbackStore: feedbackStore
}));
comp = TestUtils.renderIntoDocument(
React.createElement(sharedViews.FeedbackView, {
feedbackStore: feedbackStore
}));
});
afterEach(function() {

2
browser/components/loop/test/shared/index.html
View File

@ -22,7 +22,7 @@
</script>
<!-- libs -->
<script src="../../content/shared/libs/react-0.11.2.js"></script>
<script src="../../content/shared/libs/react-0.12.2.js"></script>
<script src="../../content/shared/libs/jquery-2.1.0.js"></script>
<script src="../../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../../content/shared/libs/backbone-1.1.2.js"></script>

19
browser/components/loop/test/shared/mixins_test.js
View File

@ -31,7 +31,7 @@ describe("loop.shared.mixins", function() {
return React.DOM.div();
}
});
return new TestComp();
return new React.createElement(TestComp);
}
it("should watch for hashchange event", function() {
@ -83,7 +83,7 @@ describe("loop.shared.mixins", function() {
});
it("should call window.location.reload", function() {
var comp = TestUtils.renderIntoDocument(TestComp());
var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
comp.locationReload();
@ -109,7 +109,7 @@ describe("loop.shared.mixins", function() {
});
it("should set window.document.title", function() {
var comp = TestUtils.renderIntoDocument(TestComp());
var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
comp.setTitle("It's a Fake!");
@ -136,7 +136,7 @@ describe("loop.shared.mixins", function() {
});
it("should call window.close", function() {
var comp = TestUtils.renderIntoDocument(TestComp());
var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
comp.closeWindow();
@ -181,7 +181,7 @@ describe("loop.shared.mixins", function() {
function() {
setupFakeVisibilityEventDispatcher({target: {hidden: false}});
comp = TestUtils.renderIntoDocument(TestComp());
comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(onDocumentVisibleStub);
});
@ -190,7 +190,7 @@ describe("loop.shared.mixins", function() {
function() {
setupFakeVisibilityEventDispatcher({target: {hidden: true}});
comp = TestUtils.renderIntoDocument(TestComp());
comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(onDocumentHiddenStub);
});
@ -227,14 +227,14 @@ describe("loop.shared.mixins", function() {
});
it("should not play a failure sound when doNotDisturb true", function() {
view = TestUtils.renderIntoDocument(TestComp());
view = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.notCalled(navigator.mozLoop.getAudioBlob);
sinon.assert.notCalled(fakeAudio.play);
});
it("should play a failure sound, once", function() {
navigator.mozLoop.doNotDisturb = false;
view = TestUtils.renderIntoDocument(TestComp());
view = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(navigator.mozLoop.getAudioBlob);
sinon.assert.calledWithExactly(navigator.mozLoop.getAudioBlob,
"failure", sinon.match.func);
@ -258,7 +258,8 @@ describe("loop.shared.mixins", function() {
}
});
var renderedComp = TestUtils.renderIntoDocument(TestComp());
var renderedComp = TestUtils.renderIntoDocument(
React.createElement(TestComp));
sandbox.stub(renderedComp, "play");
return renderedComp;
}

60
browser/components/loop/test/shared/views_test.js
View File

@ -44,45 +44,49 @@ describe("loop.shared.views", function() {
describe("MediaControlButton", function() {
it("should render an enabled local audio button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
scope: "local",
type: "audio",
action: function(){},
enabled: true
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(sharedViews.MediaControlButton, {
scope: "local",
type: "audio",
action: function(){},
enabled: true
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(false);
});
it("should render a muted local audio button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
scope: "local",
type: "audio",
action: function(){},
enabled: false
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(sharedViews.MediaControlButton, {
scope: "local",
type: "audio",
action: function(){},
enabled: false
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(true);
});
it("should render an enabled local video button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
scope: "local",
type: "video",
action: function(){},
enabled: true
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(sharedViews.MediaControlButton, {
scope: "local",
type: "video",
action: function(){},
enabled: true
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(false);
});
it("should render a muted local video button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({
scope: "local",
type: "video",
action: function(){},
enabled: false
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(sharedViews.MediaControlButton, {
scope: "local",
type: "video",
action: function(){},
enabled: false
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(true);
});
@ -93,7 +97,7 @@ describe("loop.shared.views", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
sharedViews.ConversationToolbar(props));
React.createElement(sharedViews.ConversationToolbar, props));
}
beforeEach(function() {
@ -198,7 +202,8 @@ describe("loop.shared.views", function() {
var fakeSDK, fakeSessionData, fakeSession, fakePublisher, model, fakeAudio;
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(sharedViews.ConversationView(props));
return TestUtils.renderIntoDocument(
React.createElement(sharedViews.ConversationView, props));
}
beforeEach(function() {
@ -530,7 +535,8 @@ describe("loop.shared.views", function() {
var coll, view, testNotif;
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(sharedViews.NotificationListView(props));
return TestUtils.renderIntoDocument(
React.createElement(sharedViews.NotificationListView, props));
}
beforeEach(function() {

2
browser/components/loop/test/standalone/index.html
View File

@ -23,7 +23,7 @@
</script>
<!-- libs -->
<script src="../../content/shared/libs/react-0.11.2.js"></script>
<script src="../../content/shared/libs/react-0.12.2.js"></script>
<script src="../../content/shared/libs/jquery-2.1.0.js"></script>
<script src="../../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../../content/shared/libs/backbone-1.1.2.js"></script>

13
browser/components/loop/test/standalone/standaloneRoomViews_test.js
View File

@ -40,12 +40,13 @@ describe("loop.standaloneRoomViews", function() {
describe("StandaloneRoomView", function() {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
loop.standaloneRoomViews.StandaloneRoomView({
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
feedbackStore: feedbackStore,
helper: new loop.shared.utils.Helper()
}));
React.createElement(
loop.standaloneRoomViews.StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
feedbackStore: feedbackStore,
helper: new loop.shared.utils.Helper()
}));
}
function expectActionDispatched(view) {

142
browser/components/loop/test/standalone/webapp_test.js
View File

@ -53,7 +53,7 @@ describe("loop.webapp", function() {
describe("#init", function() {
beforeEach(function() {
sandbox.stub(React, "renderComponent");
sandbox.stub(React, "render");
loop.config.feedbackApiUrl = "http://fake.invalid";
sandbox.stub(loop.Dispatcher.prototype, "dispatch");
});
@ -61,10 +61,10 @@ describe("loop.webapp", function() {
it("should create the WebappRootView", function() {
loop.webapp.init();
sinon.assert.calledOnce(React.renderComponent);
sinon.assert.calledWith(React.renderComponent,
sinon.assert.calledOnce(React.render);
sinon.assert.calledWith(React.render,
sinon.match(function(value) {
return TestUtils.isDescriptorOfType(value,
return TestUtils.isCompositeComponentElement(value,
loop.webapp.WebappRootView);
}));
});
@ -106,7 +106,8 @@ describe("loop.webapp", function() {
function mountTestComponent(props) {
return TestUtils.renderIntoDocument(
loop.webapp.OutgoingConversationView(props));
React.createElement(
loop.webapp.OutgoingConversationView, props));
}
beforeEach(function() {
@ -620,11 +621,12 @@ describe("loop.webapp", function() {
sandbox.stub(client, "requestCallUrlInfo");
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.FailedConversationView({
conversation: conversation,
client: client,
notifications: notifications
}));
React.createElement(
loop.webapp.FailedConversationView, {
conversation: conversation,
client: client,
notifications: notifications
}));
});
it("should play a failure sound, once", function() {
@ -645,16 +647,17 @@ describe("loop.webapp", function() {
function mountTestComponent() {
return TestUtils.renderIntoDocument(
loop.webapp.WebappRootView({
client: client,
helper: helper,
notifications: notifications,
sdk: sdk,
conversation: conversationModel,
standaloneAppStore: standaloneAppStore,
activeRoomStore: activeRoomStore,
feedbackStore: feedbackStore
}));
React.createElement(
loop.webapp.WebappRootView, {
client: client,
helper: helper,
notifications: notifications,
sdk: sdk,
conversation: conversationModel,
standaloneAppStore: standaloneAppStore,
activeRoomStore: activeRoomStore,
feedbackStore: feedbackStore
}));
}
beforeEach(function() {
@ -739,7 +742,8 @@ describe("loop.webapp", function() {
standaloneMedia.setSingleton(multiplexGum);
sandbox.stub(standaloneMedia._MultiplexGum.prototype, "reset");
TestUtils.renderIntoDocument(loop.webapp.HomeView());
TestUtils.renderIntoDocument(
React.createElement(loop.webapp.HomeView));
sinon.assert.calledOnce(multiplexGum.reset);
sinon.assert.calledWithExactly(multiplexGum.reset);
@ -766,9 +770,10 @@ describe("loop.webapp", function() {
sandbox.stub(window, "XMLHttpRequest").returns(fakeAudioXHR);
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.WaitingConversationView({
websocket: websocket
})
React.createElement(
loop.webapp.WaitingConversationView, {
websocket: websocket
})
);
});
@ -849,12 +854,12 @@ describe("loop.webapp", function() {
};
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
React.createElement(
loop.webapp.StartConversationView, {
conversation: conversation,
notifications: notifications,
client: standaloneClientStub
})
);
}));
});
it("should start the audio-video conversation establishment process",
@ -945,12 +950,12 @@ describe("loop.webapp", function() {
requestCallUrlInfo = sandbox.stub();
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
})
);
React.createElement(
loop.webapp.StartConversationView, {
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
}));
loop.config.marketplaceUrl = "http://market/";
});
@ -1030,12 +1035,12 @@ describe("loop.webapp", function() {
var tos;
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
})
);
React.createElement(
loop.webapp.StartConversationView, {
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
}));
tos = view.getDOMNode().querySelector(".terms-service");
expect(tos.classList.contains("hide")).to.equal(false);
@ -1046,12 +1051,12 @@ describe("loop.webapp", function() {
localStorage.setItem("has-seen-tos", "true");
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
})
);
React.createElement(
loop.webapp.StartConversationView, {
conversation: conversation,
notifications: notifications,
client: {requestCallUrlInfo: requestCallUrlInfo}
}));
tos = view.getDOMNode().querySelector(".terms-service");
expect(tos.classList.contains("hide")).to.equal(true);
@ -1075,13 +1080,13 @@ describe("loop.webapp", function() {
});
sandbox.stub(window, "XMLHttpRequest").returns(fakeAudioXHR);
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.EndedConversationView({
conversation: conversation,
sdk: {},
feedbackStore: feedbackStore,
onAfterFeedbackReceived: function(){}
})
);
React.createElement(
loop.webapp.EndedConversationView, {
conversation: conversation,
sdk: {},
feedbackStore: feedbackStore,
onAfterFeedbackReceived: function(){}
}));
});
it("should render a ConversationView", function() {
@ -1096,17 +1101,20 @@ describe("loop.webapp", function() {
describe("PromoteFirefoxView", function() {
describe("#render", function() {
it("should not render when using Firefox", function() {
var comp = TestUtils.renderIntoDocument(loop.webapp.PromoteFirefoxView({
helper: {isFirefox: function() { return true; }}
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(loop.webapp.PromoteFirefoxView, {
helper: {isFirefox: function() { return true; }}
}));
expect(comp.getDOMNode().querySelectorAll("h3").length).eql(0);
});
it("should render when not using Firefox", function() {
var comp = TestUtils.renderIntoDocument(loop.webapp.PromoteFirefoxView({
helper: {isFirefox: function() { return false; }}
}));
var comp = TestUtils.renderIntoDocument(
React.createElement(
loop.webapp.PromoteFirefoxView, {
helper: {isFirefox: function() { return false; }}
}));
expect(comp.getDOMNode().querySelectorAll("h3").length).eql(1);
});
@ -1144,12 +1152,12 @@ describe("loop.webapp", function() {
};
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
React.createElement(
loop.webapp.StartConversationView, {
conversation: conversation,
notifications: notifications,
client: standaloneClientStub
})
);
}));
// default to succeeding with a null local media object
stubGetPermsAndCacheMedia.callsArgWith(1, {});
@ -1292,12 +1300,12 @@ describe("loop.webapp", function() {
before(function() {
view = React.addons.TestUtils.renderIntoDocument(
loop.webapp.StartConversationView({
conversation: model,
notifications: notifications,
client: {requestCallUrlInfo: sandbox.stub()}
})
);
React.createElement(
loop.webapp.StartConversationView, {
conversation: model,
notifications: notifications,
client: {requestCallUrlInfo: sandbox.stub()}
}));
});
beforeEach(function() {

2
browser/components/loop/ui/index.html
View File

@ -28,7 +28,7 @@
</script>
<script src="../content/js/multiplexGum.js"></script>
<script src="../content/shared/libs/sdk.js"></script>
<script src="../content/shared/libs/react-0.11.2.js"></script>
<script src="../content/shared/libs/react-0.12.2.js"></script>
<script src="../content/shared/libs/jquery-2.1.0.js"></script>
<script src="../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../content/shared/libs/backbone-1.1.2.js"></script>

394
browser/components/loop/ui/ui-showcase.js
View File

@ -117,17 +117,17 @@
detailsButtonLabel: "Retry",
});
var SVGIcon = React.createClass({displayName: 'SVGIcon',
var SVGIcon = React.createClass({displayName: "SVGIcon",
render: function() {
return (
React.DOM.span({className: "svg-icon", style: {
React.createElement("span", {className: "svg-icon", style: {
"background-image": "url(/content/shared/img/icons-16x16.svg#" + this.props.shapeId + ")"
}})
);
}
});
var SVGIcons = React.createClass({displayName: 'SVGIcons',
var SVGIcons = React.createClass({displayName: "SVGIcons",
shapes: [
"audio", "audio-hover", "audio-active", "block",
"block-red", "block-hover", "block-active", "contacts", "contacts-hover",
@ -140,11 +140,11 @@
render: function() {
return (
React.DOM.div({className: "svg-icon-list"},
React.createElement("div", {className: "svg-icon-list"},
this.shapes.map(function(shapeId, i) {
return React.DOM.div({key: i, className: "svg-icon-entry"},
React.DOM.p(null, SVGIcon({shapeId: shapeId})),
React.DOM.p(null, shapeId)
return React.createElement("div", {key: i, className: "svg-icon-entry"},
React.createElement("p", null, React.createElement(SVGIcon, {shapeId: shapeId})),
React.createElement("p", null, shapeId)
);
}, this)
)
@ -152,7 +152,7 @@
}
});
var Example = React.createClass({displayName: 'Example',
var Example = React.createClass({displayName: "Example",
makeId: function(prefix) {
return (prefix || "") + this.props.summary.toLowerCase().replace(/\s/g, "-");
},
@ -160,12 +160,12 @@
render: function() {
var cx = React.addons.classSet;
return (
React.DOM.div({className: "example"},
React.DOM.h3({id: this.makeId()},
React.createElement("div", {className: "example"},
React.createElement("h3", {id: this.makeId()},
this.props.summary,
React.DOM.a({href: this.makeId("#")}, " ¶")
React.createElement("a", {href: this.makeId("#")}, " ¶")
),
React.DOM.div({className: cx({comp: true, dashed: this.props.dashed}),
React.createElement("div", {className: cx({comp: true, dashed: this.props.dashed}),
style: this.props.style || {}},
this.props.children
)
@ -174,27 +174,27 @@
}
});
var Section = React.createClass({displayName: 'Section',
var Section = React.createClass({displayName: "Section",
render: function() {
return (
React.DOM.section({id: this.props.name},
React.DOM.h1(null, this.props.name),
React.createElement("section", {id: this.props.name},
React.createElement("h1", null, this.props.name),
this.props.children
)
);
}
});
var ShowCase = React.createClass({displayName: 'ShowCase',
var ShowCase = React.createClass({displayName: "ShowCase",
render: function() {
return (
React.DOM.div({className: "showcase"},
React.DOM.header(null,
React.DOM.h1(null, "Loop UI Components Showcase"),
React.DOM.nav({className: "showcase-menu"},
React.createElement("div", {className: "showcase"},
React.createElement("header", null,
React.createElement("h1", null, "Loop UI Components Showcase"),
React.createElement("nav", {className: "showcase-menu"},
React.Children.map(this.props.children, function(section) {
return (
React.DOM.a({className: "btn btn-info", href: "#" + section.props.name},
React.createElement("a", {className: "btn btn-info", href: "#" + section.props.name},
section.props.name
)
);
@ -207,57 +207,57 @@
}
});
var App = React.createClass({displayName: 'App',
var App = React.createClass({displayName: "App",
render: function() {
return (
ShowCase(null,
Section({name: "PanelView"},
React.DOM.p({className: "note"},
React.DOM.strong(null, "Note:"), " 332px wide."
React.createElement(ShowCase, null,
React.createElement(Section, {name: "PanelView"},
React.createElement("p", {className: "note"},
React.createElement("strong", null, "Note:"), " 332px wide."
),
Example({summary: "Call URL retrieved", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: notifications,
React.createElement(Example, {summary: "Call URL retrieved", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: notifications,
callUrl: "http://invalid.example.url/",
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Call URL retrieved - authenticated", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: notifications,
React.createElement(Example, {summary: "Call URL retrieved - authenticated", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: notifications,
callUrl: "http://invalid.example.url/",
userProfile: {email: "test@example.com"},
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Pending call url retrieval", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: notifications,
React.createElement(Example, {summary: "Pending call url retrieval", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: notifications,
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Pending call url retrieval - authenticated", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: notifications,
React.createElement(Example, {summary: "Pending call url retrieval - authenticated", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: notifications,
userProfile: {email: "test@example.com"},
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Error Notification", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: errNotifications,
React.createElement(Example, {summary: "Error Notification", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: errNotifications,
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Error Notification - authenticated", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: errNotifications,
React.createElement(Example, {summary: "Error Notification - authenticated", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: errNotifications,
userProfile: {email: "test@example.com"},
mozLoop: navigator.mozLoop,
dispatcher: dispatcher,
roomStore: roomStore})
),
Example({summary: "Room list tab", dashed: "true", style: {width: "332px"}},
PanelView({client: mockClient, notifications: notifications,
React.createElement(Example, {summary: "Room list tab", dashed: "true", style: {width: "332px"}},
React.createElement(PanelView, {client: mockClient, notifications: notifications,
userProfile: {email: "test@example.com"},
mozLoop: mockMozLoopRooms,
dispatcher: dispatcher,
@ -266,70 +266,70 @@
)
),
Section({name: "IncomingCallView"},
Example({summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}},
React.DOM.div({className: "fx-embedded"},
IncomingCallView({model: mockConversationModel,
React.createElement(Section, {name: "IncomingCallView"},
React.createElement(Example, {summary: "Default / incoming video call", dashed: "true", style: {width: "260px", height: "254px"}},
React.createElement("div", {className: "fx-embedded"},
React.createElement(IncomingCallView, {model: mockConversationModel,
video: true})
)
),
Example({summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}},
React.DOM.div({className: "fx-embedded"},
IncomingCallView({model: mockConversationModel,
React.createElement(Example, {summary: "Default / incoming audio only call", dashed: "true", style: {width: "260px", height: "254px"}},
React.createElement("div", {className: "fx-embedded"},
React.createElement(IncomingCallView, {model: mockConversationModel,
video: false})
)
)
),
Section({name: "IncomingCallView-ActiveState"},
Example({summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}},
React.DOM.div({className: "fx-embedded"},
IncomingCallView({model: mockConversationModel,
React.createElement(Section, {name: "IncomingCallView-ActiveState"},
React.createElement(Example, {summary: "Default", dashed: "true", style: {width: "260px", height: "254px"}},
React.createElement("div", {className: "fx-embedded"},
React.createElement(IncomingCallView, {model: mockConversationModel,
showMenu: true})
)
)
),
Section({name: "ConversationToolbar"},
React.DOM.h2(null, "Desktop Conversation Window"),
React.DOM.div({className: "fx-embedded override-position"},
Example({summary: "Default (260x265)", dashed: "true"},
ConversationToolbar({video: {enabled: true},
React.createElement(Section, {name: "ConversationToolbar"},
React.createElement("h2", null, "Desktop Conversation Window"),
React.createElement("div", {className: "fx-embedded override-position"},
React.createElement(Example, {summary: "Default (260x265)", dashed: "true"},
React.createElement(ConversationToolbar, {video: {enabled: true},
audio: {enabled: true},
hangup: noop,
publishStream: noop})
),
Example({summary: "Video muted"},
ConversationToolbar({video: {enabled: false},
React.createElement(Example, {summary: "Video muted"},
React.createElement(ConversationToolbar, {video: {enabled: false},
audio: {enabled: true},
hangup: noop,
publishStream: noop})
),
Example({summary: "Audio muted"},
ConversationToolbar({video: {enabled: true},
React.createElement(Example, {summary: "Audio muted"},
React.createElement(ConversationToolbar, {video: {enabled: true},
audio: {enabled: false},
hangup: noop,
publishStream: noop})
)
),
React.DOM.h2(null, "Standalone"),
React.DOM.div({className: "standalone override-position"},
Example({summary: "Default"},
ConversationToolbar({video: {enabled: true},
React.createElement("h2", null, "Standalone"),
React.createElement("div", {className: "standalone override-position"},
React.createElement(Example, {summary: "Default"},
React.createElement(ConversationToolbar, {video: {enabled: true},
audio: {enabled: true},
hangup: noop,
publishStream: noop})
),
Example({summary: "Video muted"},
ConversationToolbar({video: {enabled: false},
React.createElement(Example, {summary: "Video muted"},
React.createElement(ConversationToolbar, {video: {enabled: false},
audio: {enabled: true},
hangup: noop,
publishStream: noop})
),
Example({summary: "Audio muted"},
ConversationToolbar({video: {enabled: true},
React.createElement(Example, {summary: "Audio muted"},
React.createElement(ConversationToolbar, {video: {enabled: true},
audio: {enabled: false},
hangup: noop,
publishStream: noop})
@ -337,92 +337,92 @@
)
),
Section({name: "GumPromptConversationView"},
Example({summary: "Gum Prompt conversation view", dashed: "true"},
React.DOM.div({className: "standalone"},
GumPromptConversationView(null)
React.createElement(Section, {name: "GumPromptConversationView"},
React.createElement(Example, {summary: "Gum Prompt conversation view", dashed: "true"},
React.createElement("div", {className: "standalone"},
React.createElement(GumPromptConversationView, null)
)
)
),
Section({name: "WaitingConversationView"},
Example({summary: "Waiting conversation view (connecting)", dashed: "true"},
React.DOM.div({className: "standalone"},
WaitingConversationView({websocket: mockWebSocket,
React.createElement(Section, {name: "WaitingConversationView"},
React.createElement(Example, {summary: "Waiting conversation view (connecting)", dashed: "true"},
React.createElement("div", {className: "standalone"},
React.createElement(WaitingConversationView, {websocket: mockWebSocket,
dispatcher: dispatcher})
)
),
Example({summary: "Waiting conversation view (ringing)", dashed: "true"},
React.DOM.div({className: "standalone"},
WaitingConversationView({websocket: mockWebSocket,
React.createElement(Example, {summary: "Waiting conversation view (ringing)", dashed: "true"},
React.createElement("div", {className: "standalone"},
React.createElement(WaitingConversationView, {websocket: mockWebSocket,
dispatcher: dispatcher,
callState: "ringing"})
)
)
),
Section({name: "PendingConversationView (Desktop)"},
Example({summary: "Connecting", dashed: "true",
React.createElement(Section, {name: "PendingConversationView (Desktop)"},
React.createElement(Example, {summary: "Connecting", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
DesktopPendingConversationView({callState: "gather",
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopPendingConversationView, {callState: "gather",
contact: mockContact,
dispatcher: dispatcher})
)
)
),
Section({name: "CallFailedView"},
Example({summary: "Call Failed", dashed: "true",
React.createElement(Section, {name: "CallFailedView"},
React.createElement(Example, {summary: "Call Failed", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
CallFailedView({dispatcher: dispatcher})
React.createElement("div", {className: "fx-embedded"},
React.createElement(CallFailedView, {dispatcher: dispatcher})
)
),
Example({summary: "Call Failed — with call URL error", dashed: "true",
React.createElement(Example, {summary: "Call Failed — with call URL error", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
CallFailedView({dispatcher: dispatcher, emailLinkError: true})
React.createElement("div", {className: "fx-embedded"},
React.createElement(CallFailedView, {dispatcher: dispatcher, emailLinkError: true})
)
)
),
Section({name: "StartConversationView"},
Example({summary: "Start conversation view", dashed: "true"},
React.DOM.div({className: "standalone"},
StartConversationView({conversation: mockConversationModel,
React.createElement(Section, {name: "StartConversationView"},
React.createElement(Example, {summary: "Start conversation view", dashed: "true"},
React.createElement("div", {className: "standalone"},
React.createElement(StartConversationView, {conversation: mockConversationModel,
client: mockClient,
notifications: notifications})
)
)
),
Section({name: "FailedConversationView"},
Example({summary: "Failed conversation view", dashed: "true"},
React.DOM.div({className: "standalone"},
FailedConversationView({conversation: mockConversationModel,
React.createElement(Section, {name: "FailedConversationView"},
React.createElement(Example, {summary: "Failed conversation view", dashed: "true"},
React.createElement("div", {className: "standalone"},
React.createElement(FailedConversationView, {conversation: mockConversationModel,
client: mockClient,
notifications: notifications})
)
)
),
Section({name: "ConversationView"},
Example({summary: "Desktop conversation window", dashed: "true",
React.createElement(Section, {name: "ConversationView"},
React.createElement(Example, {summary: "Desktop conversation window", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
ConversationView({sdk: mockSDK,
React.createElement("div", {className: "fx-embedded"},
React.createElement(ConversationView, {sdk: mockSDK,
model: mockConversationModel,
video: {enabled: true},
audio: {enabled: true}})
)
),
Example({summary: "Desktop conversation window large", dashed: "true"},
React.DOM.div({className: "breakpoint", 'data-breakpoint-width': "800px",
'data-breakpoint-height': "600px"},
React.DOM.div({className: "fx-embedded"},
ConversationView({sdk: mockSDK,
React.createElement(Example, {summary: "Desktop conversation window large", dashed: "true"},
React.createElement("div", {className: "breakpoint", "data-breakpoint-width": "800px",
"data-breakpoint-height": "600px"},
React.createElement("div", {className: "fx-embedded"},
React.createElement(ConversationView, {sdk: mockSDK,
video: {enabled: true},
audio: {enabled: true},
model: mockConversationModel})
@ -430,19 +430,19 @@
)
),
Example({summary: "Desktop conversation window local audio stream",
React.createElement(Example, {summary: "Desktop conversation window local audio stream",
dashed: "true", style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
ConversationView({sdk: mockSDK,
React.createElement("div", {className: "fx-embedded"},
React.createElement(ConversationView, {sdk: mockSDK,
video: {enabled: false},
audio: {enabled: true},
model: mockConversationModel})
)
),
Example({summary: "Standalone version"},
React.DOM.div({className: "standalone"},
ConversationView({sdk: mockSDK,
React.createElement(Example, {summary: "Standalone version"},
React.createElement("div", {className: "standalone"},
React.createElement(ConversationView, {sdk: mockSDK,
video: {enabled: true},
audio: {enabled: true},
model: mockConversationModel})
@ -450,14 +450,14 @@
)
),
Section({name: "ConversationView-640"},
Example({summary: "640px breakpoint for conversation view"},
React.DOM.div({className: "breakpoint",
React.createElement(Section, {name: "ConversationView-640"},
React.createElement(Example, {summary: "640px breakpoint for conversation view"},
React.createElement("div", {className: "breakpoint",
style: {"text-align":"center"},
'data-breakpoint-width': "400px",
'data-breakpoint-height': "780px"},
React.DOM.div({className: "standalone"},
ConversationView({sdk: mockSDK,
"data-breakpoint-width": "400px",
"data-breakpoint-height": "780px"},
React.createElement("div", {className: "standalone"},
React.createElement(ConversationView, {sdk: mockSDK,
video: {enabled: true},
audio: {enabled: true},
model: mockConversationModel})
@ -466,10 +466,10 @@
)
),
Section({name: "ConversationView-LocalAudio"},
Example({summary: "Local stream is audio only"},
React.DOM.div({className: "standalone"},
ConversationView({sdk: mockSDK,
React.createElement(Section, {name: "ConversationView-LocalAudio"},
React.createElement(Example, {summary: "Local stream is audio only"},
React.createElement("div", {className: "standalone"},
React.createElement(ConversationView, {sdk: mockSDK,
video: {enabled: false},
audio: {enabled: true},
model: mockConversationModel})
@ -477,35 +477,35 @@
)
),
Section({name: "FeedbackView"},
React.DOM.p({className: "note"},
React.DOM.strong(null, "Note:"), " For the useable demo, you can access submitted data at ",
React.DOM.a({href: "https://input.allizom.org/"}, "input.allizom.org"), "."
React.createElement(Section, {name: "FeedbackView"},
React.createElement("p", {className: "note"},
React.createElement("strong", null, "Note:"), " For the useable demo, you can access submitted data at ",
React.createElement("a", {href: "https://input.allizom.org/"}, "input.allizom.org"), "."
),
Example({summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}},
FeedbackView({feedbackStore: feedbackStore})
React.createElement(Example, {summary: "Default (useable demo)", dashed: "true", style: {width: "260px"}},
React.createElement(FeedbackView, {feedbackStore: feedbackStore})
),
Example({summary: "Detailed form", dashed: "true", style: {width: "260px"}},
FeedbackView({feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.DETAILS})
React.createElement(Example, {summary: "Detailed form", dashed: "true", style: {width: "260px"}},
React.createElement(FeedbackView, {feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.DETAILS})
),
Example({summary: "Thank you!", dashed: "true", style: {width: "260px"}},
FeedbackView({feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.SENT})
React.createElement(Example, {summary: "Thank you!", dashed: "true", style: {width: "260px"}},
React.createElement(FeedbackView, {feedbackStore: feedbackStore, feedbackState: FEEDBACK_STATES.SENT})
)
),
Section({name: "CallUrlExpiredView"},
Example({summary: "Firefox User"},
CallUrlExpiredView({helper: {isFirefox: returnTrue}})
React.createElement(Section, {name: "CallUrlExpiredView"},
React.createElement(Example, {summary: "Firefox User"},
React.createElement(CallUrlExpiredView, {helper: {isFirefox: returnTrue}})
),
Example({summary: "Non-Firefox User"},
CallUrlExpiredView({helper: {isFirefox: returnFalse}})
React.createElement(Example, {summary: "Non-Firefox User"},
React.createElement(CallUrlExpiredView, {helper: {isFirefox: returnFalse}})
)
),
Section({name: "EndedConversationView"},
Example({summary: "Displays the feedback form"},
React.DOM.div({className: "standalone"},
EndedConversationView({sdk: mockSDK,
React.createElement(Section, {name: "EndedConversationView"},
React.createElement(Example, {summary: "Displays the feedback form"},
React.createElement("div", {className: "standalone"},
React.createElement(EndedConversationView, {sdk: mockSDK,
video: {enabled: true},
audio: {enabled: true},
conversation: mockConversationModel,
@ -515,64 +515,64 @@
)
),
Section({name: "AlertMessages"},
Example({summary: "Various alerts"},
React.DOM.div({className: "alert alert-warning"},
React.DOM.button({className: "close"}),
React.DOM.p({className: "message"},
React.createElement(Section, {name: "AlertMessages"},
React.createElement(Example, {summary: "Various alerts"},
React.createElement("div", {className: "alert alert-warning"},
React.createElement("button", {className: "close"}),
React.createElement("p", {className: "message"},
"The person you were calling has ended the conversation."
)
),
React.DOM.br(null),
React.DOM.div({className: "alert alert-error"},
React.DOM.button({className: "close"}),
React.DOM.p({className: "message"},
React.createElement("br", null),
React.createElement("div", {className: "alert alert-error"},
React.createElement("button", {className: "close"}),
React.createElement("p", {className: "message"},
"The person you were calling has ended the conversation."
)
)
)
),
Section({name: "HomeView"},
Example({summary: "Standalone Home View"},
React.DOM.div({className: "standalone"},
HomeView(null)
React.createElement(Section, {name: "HomeView"},
React.createElement(Example, {summary: "Standalone Home View"},
React.createElement("div", {className: "standalone"},
React.createElement(HomeView, null)
)
)
),
Section({name: "UnsupportedBrowserView"},
Example({summary: "Standalone Unsupported Browser"},
React.DOM.div({className: "standalone"},
UnsupportedBrowserView({helper: {isFirefox: returnFalse}})
React.createElement(Section, {name: "UnsupportedBrowserView"},
React.createElement(Example, {summary: "Standalone Unsupported Browser"},
React.createElement("div", {className: "standalone"},
React.createElement(UnsupportedBrowserView, {helper: {isFirefox: returnFalse}})
)
)
),
Section({name: "UnsupportedDeviceView"},
Example({summary: "Standalone Unsupported Device"},
React.DOM.div({className: "standalone"},
UnsupportedDeviceView(null)
React.createElement(Section, {name: "UnsupportedDeviceView"},
React.createElement(Example, {summary: "Standalone Unsupported Device"},
React.createElement("div", {className: "standalone"},
React.createElement(UnsupportedDeviceView, null)
)
)
),
Section({name: "DesktopRoomConversationView"},
Example({summary: "Desktop room conversation (invitation)", dashed: "true",
React.createElement(Section, {name: "DesktopRoomConversationView"},
React.createElement(Example, {summary: "Desktop room conversation (invitation)", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
DesktopRoomConversationView({
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
roomStore: roomStore,
dispatcher: dispatcher,
roomState: ROOM_STATES.INIT})
)
),
Example({summary: "Desktop room conversation", dashed: "true",
React.createElement(Example, {summary: "Desktop room conversation", dashed: "true",
style: {width: "260px", height: "265px"}},
React.DOM.div({className: "fx-embedded"},
DesktopRoomConversationView({
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
roomStore: roomStore,
dispatcher: dispatcher,
roomState: ROOM_STATES.HAS_PARTICIPANTS})
@ -580,10 +580,10 @@
)
),
Section({name: "StandaloneRoomView"},
Example({summary: "Standalone room conversation (ready)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Section, {name: "StandaloneRoomView"},
React.createElement(Example, {summary: "Standalone room conversation (ready)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.READY,
@ -591,9 +591,9 @@
)
),
Example({summary: "Standalone room conversation (joined)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (joined)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.JOINED,
@ -601,9 +601,9 @@
)
),
Example({summary: "Standalone room conversation (has-participants)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (has-participants)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.HAS_PARTICIPANTS,
@ -611,9 +611,9 @@
)
),
Example({summary: "Standalone room conversation (full - FFx user)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (full - FFx user)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.FULL,
@ -621,9 +621,9 @@
)
),
Example({summary: "Standalone room conversation (full - non FFx user)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (full - non FFx user)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.FULL,
@ -631,9 +631,9 @@
)
),
Example({summary: "Standalone room conversation (feedback)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (feedback)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
feedbackStore: feedbackStore,
@ -642,9 +642,9 @@
)
),
Example({summary: "Standalone room conversation (failed)"},
React.DOM.div({className: "standalone"},
StandaloneRoomView({
React.createElement(Example, {summary: "Standalone room conversation (failed)"},
React.createElement("div", {className: "standalone"},
React.createElement(StandaloneRoomView, {
dispatcher: dispatcher,
activeRoomStore: activeRoomStore,
roomState: ROOM_STATES.FAILED,
@ -653,9 +653,9 @@
)
),
Section({name: "SVG icons preview"},
Example({summary: "16x16"},
SVGIcons(null)
React.createElement(Section, {name: "SVG icons preview"},
React.createElement(Example, {summary: "16x16"},
React.createElement(SVGIcons, null)
)
)
@ -705,7 +705,7 @@
window.addEventListener("DOMContentLoaded", function() {
try {
React.renderComponent(App(null), document.body);
React.render(React.createElement(App, null), document.body);
} catch(err) {
console.log(err);
}

2
browser/components/loop/ui/ui-showcase.jsx
View File

@ -705,7 +705,7 @@
window.addEventListener("DOMContentLoaded", function() {
try {
React.renderComponent(<App />, document.body);
React.render(<App />, document.body);
} catch(err) {
console.log(err);
}