corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nicolas Perriault
2015-01-06 13:07:26 +01:00
parent 713f37dc83
commit 1c5a309ebd
37 changed files with 4043 additions and 4460 deletions
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/libs/l10n.js"></script>
<script type="text/javascript" src="loop/js/otconfig.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/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/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/lodash-2.4.1.js"></script>
<script type="text/javascript" src="loop/shared/libs/backbone-1.1.2.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; contact[field][0].value = value;
}; };
const ContactDropdown = React.createClass({displayName: 'ContactDropdown', const ContactDropdown = React.createClass({displayName: "ContactDropdown",
propTypes: { propTypes: {
handleAction: React.PropTypes.func.isRequired, handleAction: React.PropTypes.func.isRequired,
canEdit: React.PropTypes.bool canEdit: React.PropTypes.bool
@@ -124,36 +124,36 @@ loop.contacts = (function(_, mozL10n) {
: "block_contact_menu_button"; : "block_contact_menu_button";
return ( return (
React.DOM.ul({className: cx({ "dropdown-menu": true, React.createElement("ul", {className: cx({ "dropdown-menu": true,
"dropdown-menu-up": this.state.openDirUp })}, "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 }), "disabled": this.props.blocked }),
onClick: this.onItemClick, onClick: this.onItemClick,
'data-action': "video-call"}, "data-action": "video-call"},
React.DOM.i({className: "icon icon-video-call"}), React.createElement("i", {className: "icon icon-video-call"}),
mozL10n.get("video_call_menu_button") 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 }), "disabled": this.props.blocked }),
onClick: this.onItemClick, 'data-action': "audio-call"}, onClick: this.onItemClick, "data-action": "audio-call"},
React.DOM.i({className: "icon icon-audio-call"}), React.createElement("i", {className: "icon icon-audio-call"}),
mozL10n.get("audio_call_menu_button") 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 }), "disabled": !this.props.canEdit }),
onClick: this.onItemClick, 'data-action': "edit"}, onClick: this.onItemClick, "data-action": "edit"},
React.DOM.i({className: "icon icon-edit"}), React.createElement("i", {className: "icon icon-edit"}),
mozL10n.get("edit_contact_menu_button") mozL10n.get("edit_contact_menu_button")
), ),
React.DOM.li({className: "dropdown-menu-item", React.createElement("li", {className: "dropdown-menu-item",
onClick: this.onItemClick, 'data-action': blockAction}, onClick: this.onItemClick, "data-action": blockAction},
React.DOM.i({className: "icon icon-" + blockAction}), React.createElement("i", {className: "icon icon-" + blockAction}),
mozL10n.get(blockLabel) 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 }), "disabled": !this.props.canEdit }),
onClick: this.onItemClick, 'data-action': "remove"}, onClick: this.onItemClick, "data-action": "remove"},
React.DOM.i({className: "icon icon-remove"}), React.createElement("i", {className: "icon icon-remove"}),
mozL10n.get("remove_contact_menu_button") 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() { getInitialState: function() {
return { return {
showMenu: false, showMenu: false,
@@ -231,23 +231,23 @@ loop.contacts = (function(_, mozL10n) {
}); });
return ( return (
React.DOM.li({className: contactCSSClass, onMouseLeave: this.hideDropdownMenu}, React.createElement("li", {className: contactCSSClass, onMouseLeave: this.hideDropdownMenu},
React.DOM.div({className: "avatar"}), React.createElement("div", {className: "avatar"}),
React.DOM.div({className: "details"}, React.createElement("div", {className: "details"},
React.DOM.div({className: "username"}, React.DOM.strong(null, names.firstName), " ", names.lastName, React.createElement("div", {className: "username"}, React.createElement("strong", null, names.firstName), " ", names.lastName,
React.DOM.i({className: cx({"icon icon-google": this.props.contact.category[0] == "google"})}), React.createElement("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("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.createElement("div", {className: "icons"},
React.DOM.i({className: "icon icon-video", React.createElement("i", {className: "icon icon-video",
onClick: this.handleAction.bind(null, "video-call")}), 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}) onClick: this.showDropdownMenu})
), ),
this.state.showMenu this.state.showMenu
? ContactDropdown({handleAction: this.handleAction, ? React.createElement(ContactDropdown, {handleAction: this.handleAction,
canEdit: this.canEdit(), canEdit: this.canEdit(),
blocked: this.props.contact.blocked}) blocked: this.props.contact.blocked})
: null : null
@@ -257,7 +257,7 @@ loop.contacts = (function(_, mozL10n) {
} }
}); });
const ContactsList = React.createClass({displayName: 'ContactsList', const ContactsList = React.createClass({displayName: "ContactsList",
mixins: [ mixins: [
React.addons.LinkedStateMixin, React.addons.LinkedStateMixin,
loop.shared.mixins.WindowCloseMixin loop.shared.mixins.WindowCloseMixin
@@ -467,7 +467,7 @@ loop.contacts = (function(_, mozL10n) {
let cx = React.addons.classSet; let cx = React.addons.classSet;
let viewForItem = item => { let viewForItem = item => {
return ContactDetail({key: item._guid, contact: item, return React.createElement(ContactDetail, {key: item._guid, contact: item,
handleContactAction: this.handleContactAction}) handleContactAction: this.handleContactAction})
}; };
@@ -494,33 +494,33 @@ loop.contacts = (function(_, mozL10n) {
} }
return ( return (
React.DOM.div(null, React.createElement("div", null,
React.DOM.div({className: "content-area"}, React.createElement("div", {className: "content-area"},
ButtonGroup(null, React.createElement(ButtonGroup, null,
Button({caption: this.state.importBusy React.createElement(Button, {caption: this.state.importBusy
? mozL10n.get("importing_contacts_progress_button") ? mozL10n.get("importing_contacts_progress_button")
: mozL10n.get("import_contacts_button"), : mozL10n.get("import_contacts_button"),
disabled: this.state.importBusy, disabled: this.state.importBusy,
onClick: this.handleImportButtonClick}, onClick: this.handleImportButtonClick},
React.DOM.div({className: cx({"contact-import-spinner": true, React.createElement("div", {className: cx({"contact-import-spinner": true,
spinner: true, spinner: true,
busy: this.state.importBusy})}) busy: this.state.importBusy})})
), ),
Button({caption: mozL10n.get("new_contact_button"), React.createElement(Button, {caption: mozL10n.get("new_contact_button"),
onClick: this.handleAddContactButtonClick}) onClick: this.handleAddContactButtonClick})
), ),
showFilter ? showFilter ?
React.DOM.input({className: "contact-filter", React.createElement("input", {className: "contact-filter",
placeholder: mozL10n.get("contacts_search_placesholder"), placeholder: mozL10n.get("contacts_search_placesholder"),
valueLink: this.linkState("filter")}) valueLink: this.linkState("filter")})
: null : null
), ),
React.DOM.ul({className: "contact-list"}, React.createElement("ul", {className: "contact-list"},
shownContacts.available ? shownContacts.available ?
shownContacts.available.sort(this.sortContacts).map(viewForItem) : shownContacts.available.sort(this.sortContacts).map(viewForItem) :
null, null,
shownContacts.blocked && shownContacts.blocked.length > 0 ? 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, null,
shownContacts.blocked ? shownContacts.blocked ?
shownContacts.blocked.sort(this.sortContacts).map(viewForItem) : 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], mixins: [React.addons.LinkedStateMixin],
propTypes: { propTypes: {
@@ -628,27 +628,27 @@ loop.contacts = (function(_, mozL10n) {
let phoneOrEmailRequired = !this.state.email && !this.state.tel; let phoneOrEmailRequired = !this.state.email && !this.state.tel;
return ( return (
React.DOM.div({className: "content-area contact-form"}, React.createElement("div", {className: "content-area contact-form"},
React.DOM.header(null, this.props.mode == "add" React.createElement("header", null, this.props.mode == "add"
? mozL10n.get("add_contact_button") ? mozL10n.get("add_contact_button")
: mozL10n.get("edit_contact_title")), : mozL10n.get("edit_contact_title")),
React.DOM.label(null, mozL10n.get("edit_contact_name_label")), React.createElement("label", null, mozL10n.get("edit_contact_name_label")),
React.DOM.input({ref: "name", required: true, pattern: "\\s*\\S.*", type: "text", React.createElement("input", {ref: "name", required: true, pattern: "\\s*\\S.*", type: "text",
className: cx({pristine: this.state.pristine}), className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("name")}), valueLink: this.linkState("name")}),
React.DOM.label(null, mozL10n.get("edit_contact_email_label")), React.createElement("label", null, mozL10n.get("edit_contact_email_label")),
React.DOM.input({ref: "email", type: "email", required: phoneOrEmailRequired, React.createElement("input", {ref: "email", type: "email", required: phoneOrEmailRequired,
className: cx({pristine: this.state.pristine}), className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("email")}), valueLink: this.linkState("email")}),
React.DOM.label(null, mozL10n.get("new_contact_fxos_phone_placeholder")), React.createElement("label", null, mozL10n.get("new_contact_fxos_phone_placeholder")),
React.DOM.input({ref: "tel", type: "tel", required: phoneOrEmailRequired, React.createElement("input", {ref: "tel", type: "tel", required: phoneOrEmailRequired,
className: cx({pristine: this.state.pristine}), className: cx({pristine: this.state.pristine}),
valueLink: this.linkState("tel")}), valueLink: this.linkState("tel")}),
ButtonGroup(null, React.createElement(ButtonGroup, null,
Button({additionalClass: "button-cancel", React.createElement(Button, {additionalClass: "button-cancel",
caption: mozL10n.get("cancel_button"), caption: mozL10n.get("cancel_button"),
onClick: this.handleCancelButtonClick}), onClick: this.handleCancelButtonClick}),
Button({additionalClass: "button-accept", React.createElement(Button, {additionalClass: "button-accept",
caption: this.props.mode == "add" caption: this.props.mode == "add"
? mozL10n.get("add_contact_button") ? mozL10n.get("add_contact_button")
: mozL10n.get("edit_contact_done_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 * Master controller view for handling if incoming or outgoing calls are
* in progress, and hence, which view to display. * 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], mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
propTypes: { propTypes: {
@@ -64,7 +64,7 @@ loop.conversation = (function(mozL10n) {
render: function() { render: function() {
switch(this.state.windowType) { switch(this.state.windowType) {
case "incoming": { case "incoming": {
return (IncomingConversationView({ return (React.createElement(IncomingConversationView, {
client: this.props.client, client: this.props.client,
conversation: this.props.conversation, conversation: this.props.conversation,
sdk: this.props.sdk, sdk: this.props.sdk,
@@ -73,21 +73,21 @@ loop.conversation = (function(mozL10n) {
)); ));
} }
case "outgoing": { case "outgoing": {
return (OutgoingConversationView({ return (React.createElement(OutgoingConversationView, {
store: this.props.conversationStore, store: this.props.conversationStore,
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
feedbackStore: this.props.feedbackStore} feedbackStore: this.props.feedbackStore}
)); ));
} }
case "room": { case "room": {
return (DesktopRoomConversationView({ return (React.createElement(DesktopRoomConversationView, {
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
roomStore: this.props.roomStore, roomStore: this.props.roomStore,
feedbackStore: this.props.feedbackStore} feedbackStore: this.props.feedbackStore}
)); ));
} }
case "failed": { case "failed": {
return GenericFailureView({cancelCall: this.closeWindow}); return React.createElement(GenericFailureView, {cancelCall: this.closeWindow});
} }
default: { default: {
// If we don't have a windowType, we don't know what we are yet, // 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()); dispatcher.dispatch(new sharedActions.WindowUnload());
}); });
React.renderComponent(AppControllerView({ React.render(React.createElement(AppControllerView, {
conversationAppStore: conversationAppStore, conversationAppStore: conversationAppStore,
roomStore: roomStore, roomStore: roomStore,
feedbackStore: feedbackStore, 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()); dispatcher.dispatch(new sharedActions.WindowUnload());
}); });
React.renderComponent(<AppControllerView React.render(<AppControllerView
conversationAppStore={conversationAppStore} conversationAppStore={conversationAppStore}
roomStore={roomStore} roomStore={roomStore}
feedbackStore={feedbackStore} 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 * Displays information about the call
* Caller avatar, name & conversation creation date * Caller avatar, name & conversation creation date
*/ */
var CallIdentifierView = React.createClass({displayName: 'CallIdentifierView', var CallIdentifierView = React.createClass({displayName: "CallIdentifierView",
propTypes: { propTypes: {
peerIdentifier: React.PropTypes.string, peerIdentifier: React.PropTypes.string,
showIcons: React.PropTypes.bool.isRequired, showIcons: React.PropTypes.bool.isRequired,
@@ -83,16 +83,16 @@ loop.conversationViews = (function(mozL10n) {
}); });
return ( return (
React.DOM.div({className: "fx-embedded-call-identifier"}, React.createElement("div", {className: "fx-embedded-call-identifier"},
React.DOM.div({className: "fx-embedded-call-identifier-avatar fx-embedded-call-identifier-item"}), React.createElement("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.createElement("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-text overflow-text-ellipsis"},
this.props.peerIdentifier this.props.peerIdentifier
), ),
React.DOM.div({className: callDetailClasses}, React.createElement("div", {className: callDetailClasses},
React.DOM.span({className: "fx-embedded-tiny-audio-icon"}), React.createElement("span", {className: "fx-embedded-tiny-audio-icon"}),
React.DOM.span({className: iconVideoClasses}), React.createElement("span", {className: iconVideoClasses}),
React.DOM.span({className: "fx-embedded-conversation-timestamp"}, React.createElement("span", {className: "fx-embedded-conversation-timestamp"},
this.formatCreationDate() this.formatCreationDate()
) )
) )
@@ -109,7 +109,7 @@ loop.conversationViews = (function(mozL10n) {
* Allows the view to be extended with different buttons and progress * Allows the view to be extended with different buttons and progress
* via children properties. * via children properties.
*/ */
var ConversationDetailView = React.createClass({displayName: 'ConversationDetailView', var ConversationDetailView = React.createClass({displayName: "ConversationDetailView",
propTypes: { propTypes: {
contact: React.PropTypes.object contact: React.PropTypes.object
}, },
@@ -120,11 +120,11 @@ loop.conversationViews = (function(mozL10n) {
document.title = contactName; document.title = contactName;
return ( return (
React.DOM.div({className: "call-window"}, React.createElement("div", {className: "call-window"},
CallIdentifierView({ React.createElement(CallIdentifierView, {
peerIdentifier: contactName, peerIdentifier: contactName,
showIcons: false}), 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>" // Matches strings of the form "<nonspaces>@<nonspaces>" or "+<digits>"
var EMAIL_OR_PHONE_RE = /^(:?\S+@\S+|\+\d+)$/; 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], mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.AudioMixin],
propTypes: { propTypes: {
@@ -213,29 +213,29 @@ loop.conversationViews = (function(mozL10n) {
}); });
return ( return (
React.DOM.div({className: "call-window"}, React.createElement("div", {className: "call-window"},
CallIdentifierView({video: this.props.video, React.createElement(CallIdentifierView, {video: this.props.video,
peerIdentifier: this.props.model.getCallIdentifier(), peerIdentifier: this.props.model.getCallIdentifier(),
urlCreationDate: this.props.model.get("urlCreationDate"), urlCreationDate: this.props.model.get("urlCreationDate"),
showIcons: true}), 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.createElement("div", {className: "btn-chevron-menu-group"},
React.DOM.div({className: "btn-group-chevron"}, React.createElement("div", {className: "btn-group-chevron"},
React.DOM.div({className: "btn-group"}, React.createElement("div", {className: "btn-group"},
React.DOM.button({className: "btn btn-decline", React.createElement("button", {className: "btn btn-decline",
onClick: this._handleDecline}, onClick: this._handleDecline},
mozL10n.get("incoming_call_cancel_button") 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.createElement("ul", {className: dropdownMenuClassesDecline},
React.DOM.li({className: "btn-block", onClick: this._handleDeclineBlock}, React.createElement("li", {className: "btn-block", onClick: this._handleDeclineBlock},
mozL10n.get("incoming_call_cancel_and_block_button") 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 * Incoming call view accept button, renders different primary actions
* (answer with video / with audio only) based on the props received * (answer with video / with audio only) based on the props received
**/ **/
var AcceptCallButton = React.createClass({displayName: 'AcceptCallButton', var AcceptCallButton = React.createClass({displayName: "AcceptCallButton",
propTypes: { propTypes: {
mode: React.PropTypes.object.isRequired, mode: React.PropTypes.object.isRequired,
@@ -270,17 +270,17 @@ loop.conversationViews = (function(mozL10n) {
var mode = this.props.mode; var mode = this.props.mode;
return ( return (
/* jshint ignore:start */ /* jshint ignore:start */
React.DOM.div({className: "btn-chevron-menu-group"}, React.createElement("div", {className: "btn-chevron-menu-group"},
React.DOM.div({className: "btn-group"}, React.createElement("div", {className: "btn-group"},
React.DOM.button({className: "btn btn-accept", React.createElement("button", {className: "btn btn-accept",
onClick: mode.primary.handler, onClick: mode.primary.handler,
title: mozL10n.get(mode.primary.tooltip)}, 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") 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, onClick: mode.secondary.handler,
title: mozL10n.get(mode.secondary.tooltip)} 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 * XXX Based on CallFailedView, but built specially until we flux-ify the
* incoming call views (bug 1088672). * incoming call views (bug 1088672).
*/ */
var GenericFailureView = React.createClass({displayName: 'GenericFailureView', var GenericFailureView = React.createClass({displayName: "GenericFailureView",
mixins: [sharedMixins.AudioMixin], mixins: [sharedMixins.AudioMixin],
propTypes: { propTypes: {
@@ -312,11 +312,11 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("generic_failure_title"); document.title = mozL10n.get("generic_failure_title");
return ( return (
React.DOM.div({className: "call-window"}, React.createElement("div", {className: "call-window"},
React.DOM.h2(null, mozL10n.get("generic_failure_title")), React.createElement("h2", null, mozL10n.get("generic_failure_title")),
React.DOM.div({className: "btn-group call-action-group"}, React.createElement("div", {className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-cancel", React.createElement("button", {className: "btn btn-cancel",
onClick: this.props.cancelCall}, onClick: this.props.cancelCall},
mozL10n.get("cancel_button") 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. * 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], mixins: [sharedMixins.AudioMixin, sharedMixins.WindowCloseMixin],
propTypes: { propTypes: {
@@ -385,7 +385,7 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("incoming_call_title2"); document.title = mozL10n.get("incoming_call_title2");
return ( return (
IncomingCallView({ React.createElement(IncomingCallView, {
model: this.props.conversation, model: this.props.conversation,
video: this.props.conversation.hasVideoStream("incoming")} video: this.props.conversation.hasVideoStream("incoming")}
) )
@@ -397,7 +397,7 @@ loop.conversationViews = (function(mozL10n) {
var callType = this.props.conversation.get("selectedCallType"); var callType = this.props.conversation.get("selectedCallType");
return ( return (
sharedViews.ConversationView({ React.createElement(sharedViews.ConversationView, {
initiate: true, initiate: true,
sdk: this.props.sdk, sdk: this.props.sdk,
model: this.props.conversation, model: this.props.conversation,
@@ -408,7 +408,7 @@ loop.conversationViews = (function(mozL10n) {
case "end": { case "end": {
// XXX To be handled with the "failed" view state when bug 1047410 lands // XXX To be handled with the "failed" view state when bug 1047410 lands
if (this.state.callFailed) { if (this.state.callFailed) {
return GenericFailureView({ return React.createElement(GenericFailureView, {
cancelCall: this.closeWindow.bind(this)} cancelCall: this.closeWindow.bind(this)}
); );
} }
@@ -418,7 +418,7 @@ loop.conversationViews = (function(mozL10n) {
this.play("terminated"); this.play("terminated");
return ( return (
sharedViews.FeedbackView({ React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.closeWindow.bind(this)} onAfterFeedbackReceived: this.closeWindow.bind(this)}
) )
@@ -426,7 +426,7 @@ loop.conversationViews = (function(mozL10n) {
} }
case "close": { case "close": {
this.closeWindow(); 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 * View for pending conversations. Displays a cancel button and appropriate
* pending/ringing strings. * pending/ringing strings.
*/ */
var PendingConversationView = React.createClass({displayName: 'PendingConversationView', var PendingConversationView = React.createClass({displayName: "PendingConversationView",
mixins: [sharedMixins.AudioMixin], mixins: [sharedMixins.AudioMixin],
propTypes: { propTypes: {
@@ -686,12 +686,12 @@ loop.conversationViews = (function(mozL10n) {
}); });
return ( 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.createElement("div", {className: "btn-group call-action-group"},
React.DOM.button({className: btnCancelStyles, React.createElement("button", {className: btnCancelStyles,
onClick: this.cancelCall}, onClick: this.cancelCall},
mozL10n.get("initiate_call_cancel_button") mozL10n.get("initiate_call_cancel_button")
) )
@@ -705,7 +705,7 @@ loop.conversationViews = (function(mozL10n) {
/** /**
* Call failed view. Displayed when a call fails. * Call failed view. Displayed when a call fails.
*/ */
var CallFailedView = React.createClass({displayName: 'CallFailedView', var CallFailedView = React.createClass({displayName: "CallFailedView",
mixins: [ mixins: [
Backbone.Events, Backbone.Events,
sharedMixins.AudioMixin, sharedMixins.AudioMixin,
@@ -758,7 +758,7 @@ loop.conversationViews = (function(mozL10n) {
if (!this.state.emailLinkError) { if (!this.state.emailLinkError) {
return; 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() { retryCall: function() {
@@ -783,23 +783,23 @@ loop.conversationViews = (function(mozL10n) {
render: function() { render: function() {
return ( return (
React.DOM.div({className: "call-window"}, React.createElement("div", {className: "call-window"},
React.DOM.h2(null, mozL10n.get("generic_failure_title")), 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(), this._renderError(),
React.DOM.div({className: "btn-group call-action-group"}, React.createElement("div", {className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-cancel", React.createElement("button", {className: "btn btn-cancel",
onClick: this.cancelCall}, onClick: this.cancelCall},
mozL10n.get("cancel_button") 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}, onClick: this.retryCall},
mozL10n.get("retry_call_button") 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, onClick: this.emailLink,
disabled: this.state.emailLinkButtonDisabled}, disabled: this.state.emailLinkButtonDisabled},
mozL10n.get("share_button2") 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: { propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired, dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
video: React.PropTypes.object, video: React.PropTypes.object,
@@ -924,15 +924,15 @@ loop.conversationViews = (function(mozL10n) {
}); });
return ( return (
React.DOM.div({className: "video-layout-wrapper"}, React.createElement("div", {className: "video-layout-wrapper"},
React.DOM.div({className: "conversation"}, React.createElement("div", {className: "conversation"},
React.DOM.div({className: "media nested"}, React.createElement("div", {className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"}, React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"}) 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, video: this.props.video,
audio: this.props.audio, audio: this.props.audio,
publishStream: this.publishStream, publishStream: this.publishStream,
@@ -947,7 +947,7 @@ loop.conversationViews = (function(mozL10n) {
* Master View Controller for outgoing calls. This manages * Master View Controller for outgoing calls. This manages
* the different views that need displaying. * the different views that need displaying.
*/ */
var OutgoingConversationView = React.createClass({displayName: 'OutgoingConversationView', var OutgoingConversationView = React.createClass({displayName: "OutgoingConversationView",
mixins: [ mixins: [
sharedMixins.AudioMixin, sharedMixins.AudioMixin,
Backbone.Events Backbone.Events
@@ -995,7 +995,7 @@ loop.conversationViews = (function(mozL10n) {
document.title = mozL10n.get("conversation_has_ended"); document.title = mozL10n.get("conversation_has_ended");
return ( return (
sharedViews.FeedbackView({ React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this._closeWindow.bind(this)} onAfterFeedbackReceived: this._closeWindow.bind(this)}
) )
@@ -1009,14 +1009,14 @@ loop.conversationViews = (function(mozL10n) {
return null; return null;
} }
case CALL_STATES.TERMINATED: { case CALL_STATES.TERMINATED: {
return (CallFailedView({ return (React.createElement(CallFailedView, {
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
store: this.props.store, store: this.props.store,
contact: this.state.contact} contact: this.state.contact}
)); ));
} }
case CALL_STATES.ONGOING: { case CALL_STATES.ONGOING: {
return (OngoingConversationView({ return (React.createElement(OngoingConversationView, {
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
video: {enabled: !this.state.videoMuted}, video: {enabled: !this.state.videoMuted},
audio: {enabled: !this.state.audioMuted}} audio: {enabled: !this.state.audioMuted}}
@@ -1032,7 +1032,7 @@ loop.conversationViews = (function(mozL10n) {
return null; return null;
} }
default: { default: {
return (PendingConversationView({ return (React.createElement(PendingConversationView, {
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
callState: this.state.callState, callState: this.state.callState,
contact: this.state.contact, 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 ContactsList = loop.contacts.ContactsList;
var ContactDetailsForm = loop.contacts.ContactDetailsForm; var ContactDetailsForm = loop.contacts.ContactDetailsForm;
var TabView = React.createClass({displayName: 'TabView', var TabView = React.createClass({displayName: "TabView",
propTypes: { propTypes: {
buttonsHidden: React.PropTypes.array, buttonsHidden: React.PropTypes.array,
// The selectedTab prop is used by the UI showcase. // The selectedTab prop is used by the UI showcase.
@@ -66,28 +66,28 @@ loop.panel = (function(_, mozL10n) {
var isSelected = (this.state.selectedTab == tabName); var isSelected = (this.state.selectedTab == tabName);
if (!tab.props.hidden) { if (!tab.props.hidden) {
tabButtons.push( tabButtons.push(
React.DOM.li({className: cx({selected: isSelected}), React.createElement("li", {className: cx({selected: isSelected}),
key: i, key: i,
'data-tab-name': tabName, "data-tab-name": tabName,
onClick: this.handleSelectTab}) onClick: this.handleSelectTab})
); );
} }
tabs.push( 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 tab.props.children
) )
); );
}, this); }, this);
return ( return (
React.DOM.div({className: "tab-view-container"}, React.createElement("div", {className: "tab-view-container"},
React.DOM.ul({className: "tab-view"}, tabButtons), React.createElement("ul", {className: "tab-view"}, tabButtons),
tabs tabs
) )
); );
} }
}); });
var Tab = React.createClass({displayName: 'Tab', var Tab = React.createClass({displayName: "Tab",
render: function() { render: function() {
return null; return null;
} }
@@ -96,7 +96,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* Availability drop down menu subview. * Availability drop down menu subview.
*/ */
var AvailabilityDropdown = React.createClass({displayName: 'AvailabilityDropdown', var AvailabilityDropdown = React.createClass({displayName: "AvailabilityDropdown",
mixins: [sharedMixins.DropdownMenuMixin], mixins: [sharedMixins.DropdownMenuMixin],
getInitialState: function() { getInitialState: function() {
@@ -142,22 +142,22 @@ loop.panel = (function(_, mozL10n) {
mozL10n.get("display_name_available_status"); mozL10n.get("display_name_available_status");
return ( return (
React.DOM.div({className: "dropdown"}, React.createElement("div", {className: "dropdown"},
React.DOM.p({className: "dnd-status", onClick: this.showDropdownMenu}, React.createElement("p", {className: "dnd-status", onClick: this.showDropdownMenu},
React.DOM.span(null, availabilityText), React.createElement("span", null, availabilityText),
React.DOM.i({className: availabilityStatus}) React.createElement("i", {className: availabilityStatus})
), ),
React.DOM.ul({className: availabilityDropdown, React.createElement("ul", {className: availabilityDropdown,
onMouseLeave: this.hideDropdownMenu}, onMouseLeave: this.hideDropdownMenu},
React.DOM.li({onClick: this.changeAvailability("available"), React.createElement("li", {onClick: this.changeAvailability("available"),
className: "dropdown-menu-item dnd-make-available"}, className: "dropdown-menu-item dnd-make-available"},
React.DOM.i({className: "status status-available"}), React.createElement("i", {className: "status status-available"}),
React.DOM.span(null, mozL10n.get("display_name_available_status")) 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"}, className: "dropdown-menu-item dnd-make-unavailable"},
React.DOM.i({className: "status status-dnd"}), React.createElement("i", {className: "status status-dnd"}),
React.DOM.span(null, mozL10n.get("display_name_dnd_status")) 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], mixins: [sharedMixins.WindowCloseMixin],
handleButtonClick: function() { handleButtonClick: function() {
@@ -181,13 +181,13 @@ loop.panel = (function(_, mozL10n) {
return null; return null;
} }
return ( return (
React.DOM.div({id: "fte-getstarted"}, React.createElement("div", {id: "fte-getstarted"},
React.DOM.header({id: "fte-title"}, React.createElement("header", {id: "fte-title"},
mozL10n.get("first_time_experience_title", { mozL10n.get("first_time_experience_title", {
"clientShortname": mozL10n.get("clientShortname2") "clientShortname": mozL10n.get("clientShortname2")
}) })
), ),
Button({htmlId: "fte-button", React.createElement(Button, {htmlId: "fte-button",
onClick: this.handleButtonClick, onClick: this.handleButtonClick,
caption: mozL10n.get("first_time_experience_button_label")}) 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() { getInitialState: function() {
var getPref = navigator.mozLoop.getLoopPref.bind(navigator.mozLoop); 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 privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
var tosHTML = mozL10n.get("legal_text_and_links3", { var tosHTML = mozL10n.get("legal_text_and_links3", {
"clientShortname": mozL10n.get("clientShortname2"), "clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use": React.renderComponentToStaticMarkup( "terms_of_use": React.renderToStaticMarkup(
React.DOM.a({href: terms_of_use_url, target: "_blank"}, React.createElement("a", {href: terms_of_use_url, target: "_blank"},
mozL10n.get("legal_text_tos") mozL10n.get("legal_text_tos")
) )
), ),
"privacy_notice": React.renderComponentToStaticMarkup( "privacy_notice": React.renderToStaticMarkup(
React.DOM.a({href: privacy_notice_url, target: "_blank"}, React.createElement("a", {href: privacy_notice_url, target: "_blank"},
mozL10n.get("legal_text_privacy") mozL10n.get("legal_text_privacy")
) )
), ),
}); });
return React.DOM.div({id: "powered-by-wrapper"}, return React.createElement("div", {id: "powered-by-wrapper"},
React.DOM.p({id: "powered-by"}, React.createElement("p", {id: "powered-by"},
mozL10n.get("powered_by_beforeLogo"), 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") mozL10n.get("powered_by_afterLogo")
), ),
React.DOM.p({className: "terms-service", React.createElement("p", {className: "terms-service",
dangerouslySetInnerHTML: {__html: tosHTML}}) dangerouslySetInnerHTML: {__html: tosHTML}})
); );
} else { } else {
return React.DOM.div(null); return React.createElement("div", null);
} }
} }
}); });
@@ -241,7 +241,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* Panel settings (gear) menu entry. * Panel settings (gear) menu entry.
*/ */
var SettingsDropdownEntry = React.createClass({displayName: 'SettingsDropdownEntry', var SettingsDropdownEntry = React.createClass({displayName: "SettingsDropdownEntry",
propTypes: { propTypes: {
onClick: React.PropTypes.func.isRequired, onClick: React.PropTypes.func.isRequired,
label: React.PropTypes.string.isRequired, label: React.PropTypes.string.isRequired,
@@ -258,11 +258,11 @@ loop.panel = (function(_, mozL10n) {
return null; return null;
} }
return ( 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 ? this.props.icon ?
React.DOM.i({className: "icon icon-" + this.props.icon}) : React.createElement("i", {className: "icon icon-" + this.props.icon}) :
null, 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. * Panel settings (gear) menu.
*/ */
var SettingsDropdown = React.createClass({displayName: 'SettingsDropdown', var SettingsDropdown = React.createClass({displayName: "SettingsDropdown",
mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.WindowCloseMixin], mixins: [sharedMixins.DropdownMenuMixin, sharedMixins.WindowCloseMixin],
handleClickSettingsEntry: function() { handleClickSettingsEntry: function() {
@@ -315,29 +315,29 @@ loop.panel = (function(_, mozL10n) {
} }
return ( return (
React.DOM.div({className: "settings-menu dropdown"}, React.createElement("div", {className: "settings-menu dropdown"},
React.DOM.a({className: "button-settings", onClick: this.showDropdownMenu, React.createElement("a", {className: "button-settings", onClick: this.showDropdownMenu,
title: mozL10n.get("settings_menu_button_tooltip")}), 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}, onMouseLeave: this.hideDropdownMenu},
SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_settings"), React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_settings"),
onClick: this.handleClickSettingsEntry, onClick: this.handleClickSettingsEntry,
displayed: false, displayed: false,
icon: "settings"}), icon: "settings"}),
SettingsDropdownEntry({label: mozL10n.get("settings_menu_item_account"), React.createElement(SettingsDropdownEntry, {label: mozL10n.get("settings_menu_item_account"),
onClick: this.handleClickAccountEntry, onClick: this.handleClickAccountEntry,
icon: "account", icon: "account",
displayed: this._isSignedIn()}), displayed: this._isSignedIn()}),
SettingsDropdownEntry({icon: "tour", React.createElement(SettingsDropdownEntry, {icon: "tour",
label: mozL10n.get("tour_label"), label: mozL10n.get("tour_label"),
onClick: this.openGettingStartedTour}), onClick: this.openGettingStartedTour}),
SettingsDropdownEntry({label: this._isSignedIn() ? React.createElement(SettingsDropdownEntry, {label: this._isSignedIn() ?
mozL10n.get("settings_menu_item_signout") : mozL10n.get("settings_menu_item_signout") :
mozL10n.get("settings_menu_item_signin"), mozL10n.get("settings_menu_item_signin"),
onClick: this.handleClickAuthEntry, onClick: this.handleClickAuthEntry,
displayed: navigator.mozLoop.fxAEnabled, displayed: navigator.mozLoop.fxAEnabled,
icon: this._isSignedIn() ? "signout" : "signin"}), icon: this._isSignedIn() ? "signout" : "signin"}),
SettingsDropdownEntry({label: mozL10n.get("help_label"), React.createElement(SettingsDropdownEntry, {label: mozL10n.get("help_label"),
onClick: this.handleHelpEntry, onClick: this.handleHelpEntry,
icon: "help"}) icon: "help"})
) )
@@ -349,7 +349,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* Call url result view. * Call url result view.
*/ */
var CallUrlResult = React.createClass({displayName: 'CallUrlResult', var CallUrlResult = React.createClass({displayName: "CallUrlResult",
mixins: [sharedMixins.DocumentVisibilityMixin], mixins: [sharedMixins.DocumentVisibilityMixin],
propTypes: { propTypes: {
@@ -467,26 +467,26 @@ loop.panel = (function(_, mozL10n) {
// from the react lib. // from the react lib.
var cx = React.addons.classSet; var cx = React.addons.classSet;
return ( return (
React.DOM.div({className: "generate-url"}, React.createElement("div", {className: "generate-url"},
React.DOM.header({id: "share-link-header"}, mozL10n.get("share_link_header_text")), React.createElement("header", {id: "share-link-header"}, mozL10n.get("share_link_header_text")),
React.DOM.div({className: "generate-url-stack"}, React.createElement("div", {className: "generate-url-stack"},
React.DOM.input({type: "url", value: this.state.callUrl, readOnly: "true", React.createElement("input", {type: "url", value: this.state.callUrl, readOnly: "true",
onCopy: this.handleLinkExfiltration, onCopy: this.handleLinkExfiltration,
className: cx({"generate-url-input": true, className: cx({"generate-url-input": true,
pending: this.state.pending, pending: this.state.pending,
// Used in functional testing, signals that // Used in functional testing, signals that
// call url was received from loop server // call url was received from loop server
callUrl: !this.state.pending})}), callUrl: !this.state.pending})}),
React.DOM.div({className: cx({"generate-url-spinner": true, React.createElement("div", {className: cx({"generate-url-spinner": true,
spinner: true, spinner: true,
busy: this.state.pending})}) busy: this.state.pending})})
), ),
ButtonGroup({additionalClass: "url-actions"}, React.createElement(ButtonGroup, {additionalClass: "url-actions"},
Button({additionalClass: "button-email", React.createElement(Button, {additionalClass: "button-email",
disabled: !this.state.callUrl, disabled: !this.state.callUrl,
onClick: this.handleEmailButtonClick, onClick: this.handleEmailButtonClick,
caption: mozL10n.get("share_button")}), caption: mozL10n.get("share_button")}),
Button({additionalClass: "button-copy", React.createElement(Button, {additionalClass: "button-copy",
disabled: !this.state.callUrl, disabled: !this.state.callUrl,
onClick: this.handleCopyButtonClick, onClick: this.handleCopyButtonClick,
caption: this.state.copied ? mozL10n.get("copied_url_button") : caption: this.state.copied ? mozL10n.get("copied_url_button") :
@@ -500,7 +500,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* FxA sign in/up link component. * FxA sign in/up link component.
*/ */
var AuthLink = React.createClass({displayName: 'AuthLink', var AuthLink = React.createClass({displayName: "AuthLink",
handleSignUpLinkClick: function() { handleSignUpLinkClick: function() {
navigator.mozLoop.logInToFxA(); navigator.mozLoop.logInToFxA();
}, },
@@ -510,8 +510,8 @@ loop.panel = (function(_, mozL10n) {
return null; return null;
} }
return ( return (
React.DOM.p({className: "signin-link"}, React.createElement("p", {className: "signin-link"},
React.DOM.a({href: "#", onClick: this.handleSignUpLinkClick}, React.createElement("a", {href: "#", onClick: this.handleSignUpLinkClick},
mozL10n.get("panel_footer_signin_or_signup_link") mozL10n.get("panel_footer_signin_or_signup_link")
) )
) )
@@ -522,17 +522,17 @@ loop.panel = (function(_, mozL10n) {
/** /**
* FxA user identity (guest/authenticated) component. * FxA user identity (guest/authenticated) component.
*/ */
var UserIdentity = React.createClass({displayName: 'UserIdentity', var UserIdentity = React.createClass({displayName: "UserIdentity",
render: function() { render: function() {
return ( return (
React.DOM.p({className: "user-identity"}, React.createElement("p", {className: "user-identity"},
this.props.displayName this.props.displayName
) )
); );
} }
}); });
var EditInPlace = React.createClass({displayName: 'EditInPlace', var EditInPlace = React.createClass({displayName: "EditInPlace",
mixins: [React.addons.LinkedStateMixin], mixins: [React.addons.LinkedStateMixin],
propTypes: { propTypes: {
@@ -588,15 +588,15 @@ loop.panel = (function(_, mozL10n) {
render: function() { render: function() {
if (!this.state.edit) { if (!this.state.edit) {
return ( 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")}, title: mozL10n.get("rooms_name_this_room_tooltip2")},
this.state.text this.state.text
) )
); );
} }
return ( return (
React.DOM.form({onSubmit: this.handleFormSubmit}, React.createElement("form", {onSubmit: this.handleFormSubmit},
React.DOM.input({type: "text", valueLink: this.linkState("text"), React.createElement("input", {type: "text", valueLink: this.linkState("text"),
onClick: this.handleInputClick, onClick: this.handleInputClick,
onBlur: this.cancelEdit}) onBlur: this.cancelEdit})
) )
@@ -607,7 +607,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* Room list entry. * Room list entry.
*/ */
var RoomEntry = React.createClass({displayName: 'RoomEntry', var RoomEntry = React.createClass({displayName: "RoomEntry",
propTypes: { propTypes: {
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired, dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
room: React.PropTypes.instanceOf(loop.store.Room).isRequired room: React.PropTypes.instanceOf(loop.store.Room).isRequired
@@ -690,19 +690,19 @@ loop.panel = (function(_, mozL10n) {
}); });
return ( return (
React.DOM.div({className: roomClasses, onMouseLeave: this.handleMouseLeave, React.createElement("div", {className: roomClasses, onMouseLeave: this.handleMouseLeave,
onClick: this.handleClickEntry}, onClick: this.handleClickEntry},
React.DOM.h2(null, React.createElement("h2", null,
React.DOM.span({className: "room-notification"}), React.createElement("span", {className: "room-notification"}),
EditInPlace({text: room.roomName, onChange: this.renameRoom}), React.createElement(EditInPlace, {text: room.roomName, onChange: this.renameRoom}),
React.DOM.button({className: copyButtonClasses, React.createElement("button", {className: copyButtonClasses,
title: mozL10n.get("rooms_list_copy_url_tooltip"), title: mozL10n.get("rooms_list_copy_url_tooltip"),
onClick: this.handleCopyButtonClick}), onClick: this.handleCopyButtonClick}),
React.DOM.button({className: "delete-link", React.createElement("button", {className: "delete-link",
title: mozL10n.get("rooms_list_delete_tooltip"), title: mozL10n.get("rooms_list_delete_tooltip"),
onClick: this.handleDeleteButtonClick}) 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. * Room list.
*/ */
var RoomList = React.createClass({displayName: 'RoomList', var RoomList = React.createClass({displayName: "RoomList",
mixins: [Backbone.Events, sharedMixins.WindowCloseMixin], mixins: [Backbone.Events, sharedMixins.WindowCloseMixin],
propTypes: { propTypes: {
@@ -776,19 +776,19 @@ loop.panel = (function(_, mozL10n) {
} }
return ( return (
React.DOM.div({className: "rooms"}, React.createElement("div", {className: "rooms"},
React.DOM.h1(null, this._getListHeading()), React.createElement("h1", null, this._getListHeading()),
React.DOM.div({className: "room-list"}, React.createElement("div", {className: "room-list"},
this.state.rooms.map(function(room, i) { this.state.rooms.map(function(room, i) {
return RoomEntry({ return React.createElement(RoomEntry, {
key: room.roomToken, key: room.roomToken,
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
room: room} room: room}
); );
}, this) }, this)
), ),
React.DOM.p(null, React.createElement("p", null,
React.DOM.button({className: "btn btn-info new-room-button", React.createElement("button", {className: "btn btn-info new-room-button",
onClick: this.handleCreateButtonClick, onClick: this.handleCreateButtonClick,
disabled: this._hasPendingOperation()}, disabled: this._hasPendingOperation()},
mozL10n.get("rooms_new_room_button_label") mozL10n.get("rooms_new_room_button_label")
@@ -802,7 +802,7 @@ loop.panel = (function(_, mozL10n) {
/** /**
* Panel view. * Panel view.
*/ */
var PanelView = React.createClass({displayName: 'PanelView', var PanelView = React.createClass({displayName: "PanelView",
propTypes: { propTypes: {
notifications: React.PropTypes.object.isRequired, notifications: React.PropTypes.object.isRequired,
client: React.PropTypes.object.isRequired, client: React.PropTypes.object.isRequired,
@@ -894,23 +894,23 @@ loop.panel = (function(_, mozL10n) {
_renderRoomsOrCallTab: function() { _renderRoomsOrCallTab: function() {
if (!this._roomsEnabled()) { if (!this._roomsEnabled()) {
return ( return (
Tab({name: "call"}, React.createElement(Tab, {name: "call"},
React.DOM.div({className: "content-area"}, React.createElement("div", {className: "content-area"},
CallUrlResult({client: this.props.client, React.createElement(CallUrlResult, {client: this.props.client,
notifications: this.props.notifications, notifications: this.props.notifications,
callUrl: this.props.callUrl}), callUrl: this.props.callUrl}),
ToSView(null) React.createElement(ToSView, null)
) )
) )
); );
} }
return ( return (
Tab({name: "rooms"}, React.createElement(Tab, {name: "rooms"},
RoomList({dispatcher: this.props.dispatcher, React.createElement(RoomList, {dispatcher: this.props.dispatcher,
store: this.props.roomStore, store: this.props.roomStore,
userDisplayName: this._getUserDisplayName()}), userDisplayName: this._getUserDisplayName()}),
ToSView(null) React.createElement(ToSView, null)
) )
); );
}, },
@@ -950,11 +950,11 @@ loop.panel = (function(_, mozL10n) {
if (!this.state.gettingStartedSeen) { if (!this.state.gettingStartedSeen) {
return ( return (
React.DOM.div(null, React.createElement("div", null,
NotificationListView({notifications: this.props.notifications, React.createElement(NotificationListView, {notifications: this.props.notifications,
clearOnDocumentHidden: true}), clearOnDocumentHidden: true}),
GettingStartedView(null), React.createElement(GettingStartedView, null),
ToSView(null) React.createElement(ToSView, null)
) )
); );
} }
@@ -966,38 +966,38 @@ loop.panel = (function(_, mozL10n) {
} }
return ( return (
React.DOM.div(null, React.createElement("div", null,
NotificationListView({notifications: this.props.notifications, React.createElement(NotificationListView, {notifications: this.props.notifications,
clearOnDocumentHidden: true}), clearOnDocumentHidden: true}),
TabView({ref: "tabView", selectedTab: this.props.selectedTab, React.createElement(TabView, {ref: "tabView", selectedTab: this.props.selectedTab,
buttonsHidden: hideButtons}, buttonsHidden: hideButtons},
this._renderRoomsOrCallTab(), this._renderRoomsOrCallTab(),
Tab({name: "contacts"}, React.createElement(Tab, {name: "contacts"},
ContactsList({selectTab: this.selectTab, React.createElement(ContactsList, {selectTab: this.selectTab,
startForm: this.startForm}) startForm: this.startForm})
), ),
Tab({name: "contacts_add", hidden: true}, React.createElement(Tab, {name: "contacts_add", hidden: true},
ContactDetailsForm({ref: "contacts_add", mode: "add", React.createElement(ContactDetailsForm, {ref: "contacts_add", mode: "add",
selectTab: this.selectTab}) selectTab: this.selectTab})
), ),
Tab({name: "contacts_edit", hidden: true}, React.createElement(Tab, {name: "contacts_edit", hidden: true},
ContactDetailsForm({ref: "contacts_edit", mode: "edit", React.createElement(ContactDetailsForm, {ref: "contacts_edit", mode: "edit",
selectTab: this.selectTab}) selectTab: this.selectTab})
), ),
Tab({name: "contacts_import", hidden: true}, React.createElement(Tab, {name: "contacts_import", hidden: true},
ContactDetailsForm({ref: "contacts_import", mode: "import", React.createElement(ContactDetailsForm, {ref: "contacts_import", mode: "import",
selectTab: this.selectTab}) selectTab: this.selectTab})
) )
), ),
React.DOM.div({className: "footer"}, React.createElement("div", {className: "footer"},
React.DOM.div({className: "user-details"}, React.createElement("div", {className: "user-details"},
UserIdentity({displayName: this._getUserDisplayName()}), React.createElement(UserIdentity, {displayName: this._getUserDisplayName()}),
AvailabilityDropdown(null) React.createElement(AvailabilityDropdown, null)
), ),
React.DOM.div({className: "signin-details"}, React.createElement("div", {className: "signin-details"},
AuthLink(null), React.createElement(AuthLink, null),
React.DOM.div({className: "footer-signin-separator"}), React.createElement("div", {className: "footer-signin-separator"}),
SettingsDropdown(null) React.createElement(SettingsDropdown, null)
) )
) )
) )
@@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
notifications: notifications notifications: notifications
}); });
React.renderComponent(PanelView({ React.render(React.createElement(PanelView, {
client: client, client: client,
notifications: notifications, notifications: notifications,
roomStore: roomStore, 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 privacy_notice_url = navigator.mozLoop.getLoopPref('legal.privacy_url');
var tosHTML = mozL10n.get("legal_text_and_links3", { var tosHTML = mozL10n.get("legal_text_and_links3", {
"clientShortname": mozL10n.get("clientShortname2"), "clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use": React.renderComponentToStaticMarkup( "terms_of_use": React.renderToStaticMarkup(
<a href={terms_of_use_url} target="_blank"> <a href={terms_of_use_url} target="_blank">
{mozL10n.get("legal_text_tos")} {mozL10n.get("legal_text_tos")}
</a> </a>
), ),
"privacy_notice": React.renderComponentToStaticMarkup( "privacy_notice": React.renderToStaticMarkup(
<a href={privacy_notice_url} target="_blank"> <a href={privacy_notice_url} target="_blank">
{mozL10n.get("legal_text_privacy")} {mozL10n.get("legal_text_privacy")}
</a> </a>
@@ -1021,7 +1021,7 @@ loop.panel = (function(_, mozL10n) {
notifications: notifications notifications: notifications
}); });
React.renderComponent(<PanelView React.render(<PanelView
client={client} client={client}
notifications={notifications} notifications={notifications}
roomStore={roomStore} 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). * Desktop room invitation view (overlay).
*/ */
var DesktopRoomInvitationView = React.createClass({displayName: 'DesktopRoomInvitationView', var DesktopRoomInvitationView = React.createClass({displayName: "DesktopRoomInvitationView",
mixins: [ActiveRoomStoreMixin, React.addons.LinkedStateMixin], mixins: [ActiveRoomStoreMixin, React.addons.LinkedStateMixin],
propTypes: { propTypes: {
@@ -128,25 +128,25 @@ loop.roomViews = (function(mozL10n) {
render: function() { render: function() {
var cx = React.addons.classSet; var cx = React.addons.classSet;
return ( return (
React.DOM.div({className: "room-invitation-overlay"}, React.createElement("div", {className: "room-invitation-overlay"},
React.DOM.p({className: cx({"error": !!this.state.error, React.createElement("p", {className: cx({"error": !!this.state.error,
"error-display-area": true})}, "error-display-area": true})},
mozL10n.get("rooms_name_change_failed_label") mozL10n.get("rooms_name_change_failed_label")
), ),
React.DOM.form({onSubmit: this.handleFormSubmit}, React.createElement("form", {onSubmit: this.handleFormSubmit},
React.DOM.textarea({rows: "2", type: "text", className: "input-room-name", React.createElement("textarea", {rows: "2", type: "text", className: "input-room-name",
valueLink: this.linkState("newRoomName"), valueLink: this.linkState("newRoomName"),
onBlur: this.handleFormSubmit, onBlur: this.handleFormSubmit,
onKeyDown: this.handleTextareaKeyDown, onKeyDown: this.handleTextareaKeyDown,
placeholder: mozL10n.get("rooms_name_this_room_label")}) placeholder: mozL10n.get("rooms_name_this_room_label")})
), ),
React.DOM.p(null, mozL10n.get("invite_header_text")), React.createElement("p", null, mozL10n.get("invite_header_text")),
React.DOM.div({className: "btn-group call-action-group"}, React.createElement("div", {className: "btn-group call-action-group"},
React.DOM.button({className: "btn btn-info btn-email", React.createElement("button", {className: "btn btn-info btn-email",
onClick: this.handleEmailButtonClick}, onClick: this.handleEmailButtonClick},
mozL10n.get("share_button2") 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}, onClick: this.handleCopyButtonClick},
this.state.copiedUrl ? mozL10n.get("copied_url_button") : this.state.copiedUrl ? mozL10n.get("copied_url_button") :
mozL10n.get("copy_url_button2") mozL10n.get("copy_url_button2")
@@ -160,7 +160,7 @@ loop.roomViews = (function(mozL10n) {
/** /**
* Desktop room conversation view. * Desktop room conversation view.
*/ */
var DesktopRoomConversationView = React.createClass({displayName: 'DesktopRoomConversationView', var DesktopRoomConversationView = React.createClass({displayName: "DesktopRoomConversationView",
mixins: [ mixins: [
ActiveRoomStoreMixin, ActiveRoomStoreMixin,
sharedMixins.DocumentTitleMixin, sharedMixins.DocumentTitleMixin,
@@ -175,7 +175,7 @@ loop.roomViews = (function(mozL10n) {
_renderInvitationOverlay: function() { _renderInvitationOverlay: function() {
if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) { if (this.state.roomState !== ROOM_STATES.HAS_PARTICIPANTS) {
return DesktopRoomInvitationView({ return React.createElement(DesktopRoomInvitationView, {
roomStore: this.props.roomStore, roomStore: this.props.roomStore,
dispatcher: this.props.dispatcher} dispatcher: this.props.dispatcher}
); );
@@ -295,13 +295,13 @@ loop.roomViews = (function(mozL10n) {
case ROOM_STATES.FULL: { case ROOM_STATES.FULL: {
// Note: While rooms are set to hold a maximum of 2 participants, the // Note: While rooms are set to hold a maximum of 2 participants, the
// FULL case should never happen on desktop. // FULL case should never happen on desktop.
return loop.conversationViews.GenericFailureView({ return React.createElement(loop.conversationViews.GenericFailureView, {
cancelCall: this.closeWindow} cancelCall: this.closeWindow}
); );
} }
case ROOM_STATES.ENDED: { case ROOM_STATES.ENDED: {
if (this.state.used) if (this.state.used)
return sharedViews.FeedbackView({ return React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.closeWindow} onAfterFeedbackReceived: this.closeWindow}
); );
@@ -313,17 +313,17 @@ loop.roomViews = (function(mozL10n) {
} }
default: { default: {
return ( return (
React.DOM.div({className: "room-conversation-wrapper"}, React.createElement("div", {className: "room-conversation-wrapper"},
this._renderInvitationOverlay(), this._renderInvitationOverlay(),
React.DOM.div({className: "video-layout-wrapper"}, React.createElement("div", {className: "video-layout-wrapper"},
React.DOM.div({className: "conversation room-conversation"}, React.createElement("div", {className: "conversation room-conversation"},
React.DOM.div({className: "media nested"}, React.createElement("div", {className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"}, React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"}) 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}, video: {enabled: !this.state.videoMuted, visible: true},
audio: {enabled: !this.state.audioMuted, visible: true}, audio: {enabled: !this.state.audioMuted, visible: true},
publishStream: this.publishStream, publishStream: this.publishStream,

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

@@ -14,7 +14,7 @@
<div id="main"></div> <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/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/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/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: * Props:
* - * -
*/ */
var FeedbackLayout = React.createClass({displayName: 'FeedbackLayout', var FeedbackLayout = React.createClass({displayName: "FeedbackLayout",
propTypes: { propTypes: {
children: React.PropTypes.component.isRequired, children: React.PropTypes.component.isRequired,
title: React.PropTypes.string.isRequired, title: React.PropTypes.string.isRequired,
@@ -33,19 +33,19 @@ loop.shared.views.FeedbackView = (function(l10n) {
}, },
render: function() { render: function() {
var backButton = React.DOM.div(null); var backButton = React.createElement("div", null);
if (this.props.reset) { if (this.props.reset) {
backButton = ( 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}, onClick: this.props.reset},
"« ", l10n.get("feedback_back_button") "« ", l10n.get("feedback_back_button")
) )
); );
} }
return ( return (
React.DOM.div({className: "feedback"}, React.createElement("div", {className: "feedback"},
backButton, backButton,
React.DOM.h3(null, this.props.title), React.createElement("h3", null, this.props.title),
this.props.children this.props.children
) )
); );
@@ -55,7 +55,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
/** /**
* Detailed feedback form. * Detailed feedback form.
*/ */
var FeedbackForm = React.createClass({displayName: 'FeedbackForm', var FeedbackForm = React.createClass({displayName: "FeedbackForm",
propTypes: { propTypes: {
feedbackStore: React.PropTypes.instanceOf(loop.store.FeedbackStore), feedbackStore: React.PropTypes.instanceOf(loop.store.FeedbackStore),
pending: React.PropTypes.bool, pending: React.PropTypes.bool,
@@ -84,8 +84,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
var categories = this._getCategories(); var categories = this._getCategories();
return Object.keys(categories).map(function(category, key) { return Object.keys(categories).map(function(category, key) {
return ( return (
React.DOM.label({key: key, className: "feedback-category-label"}, React.createElement("label", {key: key, className: "feedback-category-label"},
React.DOM.input({type: "radio", ref: "category", name: "category", React.createElement("input", {type: "radio", ref: "category", name: "category",
className: "feedback-category-radio", className: "feedback-category-radio",
value: category, value: category,
onChange: this.handleCategoryChange, onChange: this.handleCategoryChange,
@@ -149,12 +149,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
var descriptionDisplayValue = this.state.category === "other" ? var descriptionDisplayValue = this.state.category === "other" ?
this.state.description : ""; this.state.description : "";
return ( 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}, reset: this.props.reset},
React.DOM.form({onSubmit: this.handleFormSubmit}, React.createElement("form", {onSubmit: this.handleFormSubmit},
this._getCategoryFields(), this._getCategoryFields(),
React.DOM.p(null, React.createElement("p", null,
React.DOM.input({type: "text", ref: "description", name: "description", React.createElement("input", {type: "text", ref: "description", name: "description",
className: "feedback-description", className: "feedback-description",
onChange: this.handleDescriptionFieldChange, onChange: this.handleDescriptionFieldChange,
onFocus: this.handleDescriptionFieldFocus, onFocus: this.handleDescriptionFieldFocus,
@@ -162,7 +162,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
placeholder: placeholder:
l10n.get("feedback_custom_category_text_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()}, disabled: !this._isFormReady()},
l10n.get("feedback_submit_button") l10n.get("feedback_submit_button")
) )
@@ -179,7 +179,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
* - {Function} onAfterFeedbackReceived Function to execute after the * - {Function} onAfterFeedbackReceived Function to execute after the
* WINDOW_AUTOCLOSE_TIMEOUT_IN_SECONDS timeout has elapsed * WINDOW_AUTOCLOSE_TIMEOUT_IN_SECONDS timeout has elapsed
*/ */
var FeedbackReceived = React.createClass({displayName: 'FeedbackReceived', var FeedbackReceived = React.createClass({displayName: "FeedbackReceived",
propTypes: { propTypes: {
onAfterFeedbackReceived: React.PropTypes.func onAfterFeedbackReceived: React.PropTypes.func
}, },
@@ -208,8 +208,8 @@ loop.shared.views.FeedbackView = (function(l10n) {
} }
} }
return ( return (
FeedbackLayout({title: l10n.get("feedback_thank_you_heading")}, React.createElement(FeedbackLayout, {title: l10n.get("feedback_thank_you_heading")},
React.DOM.p({className: "info thank-you"}, React.createElement("p", {className: "info thank-you"},
l10n.get("feedback_window_will_close_in2", { l10n.get("feedback_window_will_close_in2", {
countdown: this.state.countdown, countdown: this.state.countdown,
num: this.state.countdown num: this.state.countdown
@@ -222,7 +222,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
/** /**
* Feedback view. * Feedback view.
*/ */
var FeedbackView = React.createClass({displayName: 'FeedbackView', var FeedbackView = React.createClass({displayName: "FeedbackView",
mixins: [Backbone.Events], mixins: [Backbone.Events],
propTypes: { propTypes: {
@@ -283,12 +283,12 @@ loop.shared.views.FeedbackView = (function(l10n) {
default: default:
case FEEDBACK_STATES.INIT: { case FEEDBACK_STATES.INIT: {
return ( return (
FeedbackLayout({title: React.createElement(FeedbackLayout, {title:
l10n.get("feedback_call_experience_heading2")}, l10n.get("feedback_call_experience_heading2")},
React.DOM.div({className: "faces"}, React.createElement("div", {className: "faces"},
React.DOM.button({className: "face face-happy", React.createElement("button", {className: "face face-happy",
onClick: this.handleHappyClick}), onClick: this.handleHappyClick}),
React.DOM.button({className: "face face-sad", React.createElement("button", {className: "face face-sad",
onClick: this.handleSadClick}) onClick: this.handleSadClick})
) )
) )
@@ -296,7 +296,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
} }
case FEEDBACK_STATES.DETAILS: { case FEEDBACK_STATES.DETAILS: {
return ( return (
FeedbackForm({ React.createElement(FeedbackForm, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
reset: this.reset, reset: this.reset,
pending: this.state.feedbackState === FEEDBACK_STATES.PENDING}) pending: this.state.feedbackState === FEEDBACK_STATES.PENDING})
@@ -311,7 +311,7 @@ loop.shared.views.FeedbackView = (function(l10n) {
this.state.error); this.state.error);
} }
return ( return (
FeedbackReceived({ React.createElement(FeedbackReceived, {
onAfterFeedbackReceived: this.props.onAfterFeedbackReceived}) 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. * - {Function} action Function to be executed on click.
* - {Enabled} enabled Stream activation status (default: true). * - {Enabled} enabled Stream activation status (default: true).
*/ */
var MediaControlButton = React.createClass({displayName: 'MediaControlButton', var MediaControlButton = React.createClass({displayName: "MediaControlButton",
propTypes: { propTypes: {
scope: React.PropTypes.string.isRequired, scope: React.PropTypes.string.isRequired,
type: React.PropTypes.string.isRequired, type: React.PropTypes.string.isRequired,
@@ -64,7 +64,7 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() { render: function() {
return ( return (
/* jshint ignore:start */ /* jshint ignore:start */
React.DOM.button({className: this._getClasses(), React.createElement("button", {className: this._getClasses(),
title: this._getTitle(), title: this._getTitle(),
onClick: this.handleClick}) onClick: this.handleClick})
/* jshint ignore:end */ /* jshint ignore:end */
@@ -75,7 +75,7 @@ loop.shared.views = (function(_, OT, l10n) {
/** /**
* Conversation controls. * Conversation controls.
*/ */
var ConversationToolbar = React.createClass({displayName: 'ConversationToolbar', var ConversationToolbar = React.createClass({displayName: "ConversationToolbar",
getDefaultProps: function() { getDefaultProps: function() {
return { return {
video: {enabled: true, visible: true}, video: {enabled: true, visible: true},
@@ -112,22 +112,22 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() { render: function() {
var cx = React.addons.classSet; var cx = React.addons.classSet;
return ( return (
React.DOM.ul({className: "conversation-toolbar"}, React.createElement("ul", {className: "conversation-toolbar"},
React.DOM.li({className: "conversation-toolbar-btn-box btn-hangup-entry"}, React.createElement("li", {className: "conversation-toolbar-btn-box btn-hangup-entry"},
React.DOM.button({className: "btn btn-hangup", onClick: this.handleClickHangup, React.createElement("button", {className: "btn btn-hangup", onClick: this.handleClickHangup,
title: l10n.get("hangup_button_title"), title: l10n.get("hangup_button_title"),
disabled: !this.props.enableHangup}, disabled: !this.props.enableHangup},
this._getHangupButtonLabel() this._getHangupButtonLabel()
) )
), ),
React.DOM.li({className: "conversation-toolbar-btn-box"}, React.createElement("li", {className: "conversation-toolbar-btn-box"},
MediaControlButton({action: this.handleToggleVideo, React.createElement(MediaControlButton, {action: this.handleToggleVideo,
enabled: this.props.video.enabled, enabled: this.props.video.enabled,
visible: this.props.video.visible, visible: this.props.video.visible,
scope: "local", type: "video"}) scope: "local", type: "video"})
), ),
React.DOM.li({className: "conversation-toolbar-btn-box"}, React.createElement("li", {className: "conversation-toolbar-btn-box"},
MediaControlButton({action: this.handleToggleAudio, React.createElement(MediaControlButton, {action: this.handleToggleAudio,
enabled: this.props.audio.enabled, enabled: this.props.audio.enabled,
visible: this.props.audio.visible, visible: this.props.audio.visible,
scope: "local", type: "audio"}) scope: "local", type: "audio"})
@@ -140,7 +140,7 @@ loop.shared.views = (function(_, OT, l10n) {
/** /**
* Conversation view. * Conversation view.
*/ */
var ConversationView = React.createClass({displayName: 'ConversationView', var ConversationView = React.createClass({displayName: "ConversationView",
mixins: [Backbone.Events, sharedMixins.AudioMixin], mixins: [Backbone.Events, sharedMixins.AudioMixin],
propTypes: { propTypes: {
@@ -324,15 +324,15 @@ loop.shared.views = (function(_, OT, l10n) {
}); });
/* jshint ignore:start */ /* jshint ignore:start */
return ( return (
React.DOM.div({className: "video-layout-wrapper"}, React.createElement("div", {className: "video-layout-wrapper"},
React.DOM.div({className: "conversation"}, React.createElement("div", {className: "conversation"},
React.DOM.div({className: "media nested"}, React.createElement("div", {className: "media nested"},
React.DOM.div({className: "video_wrapper remote_wrapper"}, React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"}) 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, audio: this.state.audio,
publishStream: this.publishStream, publishStream: this.publishStream,
hangup: this.hangup}) hangup: this.hangup})
@@ -346,7 +346,7 @@ loop.shared.views = (function(_, OT, l10n) {
/** /**
* Notification view. * Notification view.
*/ */
var NotificationView = React.createClass({displayName: 'NotificationView', var NotificationView = React.createClass({displayName: "NotificationView",
mixins: [Backbone.Events], mixins: [Backbone.Events],
propTypes: { propTypes: {
@@ -357,19 +357,19 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() { render: function() {
var notification = this.props.notification; var notification = this.props.notification;
return ( return (
React.DOM.div({className: "notificationContainer"}, React.createElement("div", {className: "notificationContainer"},
React.DOM.div({key: this.props.key, React.createElement("div", {key: this.props.key,
className: "alert alert-" + notification.get("level")}, 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")}, hidden: !notification.get("details")},
React.DOM.button({className: "detailsButton btn-info", React.createElement("button", {className: "detailsButton btn-info",
onClick: notification.get("detailsButtonCallback"), onClick: notification.get("detailsButtonCallback"),
hidden: !notification.get("detailsButtonLabel") || !notification.get("detailsButtonCallback")}, hidden: !notification.get("detailsButtonLabel") || !notification.get("detailsButtonCallback")},
notification.get("detailsButtonLabel") 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. * Notification list view.
*/ */
var NotificationListView = React.createClass({displayName: 'NotificationListView', var NotificationListView = React.createClass({displayName: "NotificationListView",
mixins: [Backbone.Events, sharedMixins.DocumentVisibilityMixin], mixins: [Backbone.Events, sharedMixins.DocumentVisibilityMixin],
propTypes: { propTypes: {
@@ -419,9 +419,9 @@ loop.shared.views = (function(_, OT, l10n) {
render: function() { render: function() {
return ( return (
React.DOM.div({className: "messages"}, React.createElement("div", {className: "messages"},
this.props.notifications.map(function(notification, key) { 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: { propTypes: {
caption: React.PropTypes.string.isRequired, caption: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func.isRequired, onClick: React.PropTypes.func.isRequired,
@@ -453,18 +453,18 @@ loop.shared.views = (function(_, OT, l10n) {
classObject[this.props.additionalClass] = true; classObject[this.props.additionalClass] = true;
} }
return ( return (
React.DOM.button({onClick: this.props.onClick, React.createElement("button", {onClick: this.props.onClick,
disabled: this.props.disabled, disabled: this.props.disabled,
id: this.props.htmlId, id: this.props.htmlId,
className: cx(classObject)}, className: cx(classObject)},
React.DOM.span({className: "button-caption"}, this.props.caption), React.createElement("span", {className: "button-caption"}, this.props.caption),
this.props.children this.props.children
) )
); );
} }
}); });
var ButtonGroup = React.createClass({displayName: 'ButtonGroup', var ButtonGroup = React.createClass({displayName: "ButtonGroup",
PropTypes: { PropTypes: {
additionalClass: React.PropTypes.string additionalClass: React.PropTypes.string
}, },
@@ -482,7 +482,7 @@ loop.shared.views = (function(_, OT, l10n) {
classObject[this.props.additionalClass] = true; classObject[this.props.additionalClass] = true;
} }
return ( return (
React.DOM.div({className: cx(classObject)}, React.createElement("div", {className: cx(classObject)},
this.props.children 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 # Shared libs
#ifdef DEBUG #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 #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 #endif
content/browser/loop/shared/libs/lodash-2.4.1.js (content/shared/libs/lodash-2.4.1.js) 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) 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>
<script type="text/javascript" src="libs/l10n-gaia-02ca67948fe8.js"></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/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/lodash-2.4.1.js"></script>
<script type="text/javascript" src="shared/libs/backbone-1.1.2.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 * iframe in case that we need to request the installation of the FxOS Loop
* client. * client.
*/ */
var FxOSHiddenMarketplaceView = React.createClass({displayName: 'FxOSHiddenMarketplaceView', var FxOSHiddenMarketplaceView = React.createClass({displayName: "FxOSHiddenMarketplaceView",
render: function() { 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() { 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 sharedMixins = loop.shared.mixins;
var sharedViews = loop.shared.views; var sharedViews = loop.shared.views;
var StandaloneRoomInfoArea = React.createClass({displayName: 'StandaloneRoomInfoArea', var StandaloneRoomInfoArea = React.createClass({displayName: "StandaloneRoomInfoArea",
propTypes: { propTypes: {
helper: React.PropTypes.instanceOf(loop.shared.utils.Helper).isRequired, helper: React.PropTypes.instanceOf(loop.shared.utils.Helper).isRequired,
activeRoomStore: React.PropTypes.oneOfType([ activeRoomStore: React.PropTypes.oneOfType([
@@ -38,7 +38,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
_renderCallToActionLink: function() { _renderCallToActionLink: function() {
if (this.props.helper.isFirefox(navigator.userAgent)) { if (this.props.helper.isFirefox(navigator.userAgent)) {
return ( 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", { mozL10n.get("rooms_room_full_call_to_action_label", {
clientShortname: mozL10n.get("clientShortname2") clientShortname: mozL10n.get("clientShortname2")
}) })
@@ -46,7 +46,7 @@ loop.standaloneRoomViews = (function(mozL10n) {
); );
} }
return ( 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", { mozL10n.get("rooms_room_full_call_to_action_nonFx_label", {
brandShortname: mozL10n.get("brandShortname") brandShortname: mozL10n.get("brandShortname")
}) })
@@ -74,8 +74,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
case ROOM_STATES.READY: { case ROOM_STATES.READY: {
// XXX: In ENDED state, we should rather display the feedback form. // XXX: In ENDED state, we should rather display the feedback form.
return ( return (
React.DOM.div({className: "room-inner-info-area"}, React.createElement("div", {className: "room-inner-info-area"},
React.DOM.button({className: "btn btn-join btn-info", React.createElement("button", {className: "btn btn-join btn-info",
onClick: this.props.joinRoom}, onClick: this.props.joinRoom},
mozL10n.get("rooms_room_join_label") mozL10n.get("rooms_room_join_label")
) )
@@ -87,8 +87,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
{clientShortname: mozL10n.get("clientShortname2")}); {clientShortname: mozL10n.get("clientShortname2")});
// XXX Bug 1047040 will add images to help prompt the user. // XXX Bug 1047040 will add images to help prompt the user.
return ( return (
React.DOM.div({className: "room-inner-info-area"}, React.createElement("div", {className: "room-inner-info-area"},
React.DOM.p({className: "prompt-media-message"}, React.createElement("p", {className: "prompt-media-message"},
msg msg
) )
) )
@@ -97,8 +97,8 @@ loop.standaloneRoomViews = (function(mozL10n) {
case ROOM_STATES.JOINED: case ROOM_STATES.JOINED:
case ROOM_STATES.SESSION_CONNECTED: { case ROOM_STATES.SESSION_CONNECTED: {
return ( return (
React.DOM.div({className: "room-inner-info-area"}, React.createElement("div", {className: "room-inner-info-area"},
React.DOM.p({className: "empty-room-message"}, React.createElement("p", {className: "empty-room-message"},
mozL10n.get("rooms_only_occupant_label") mozL10n.get("rooms_only_occupant_label")
) )
) )
@@ -106,19 +106,19 @@ loop.standaloneRoomViews = (function(mozL10n) {
} }
case ROOM_STATES.FULL: { case ROOM_STATES.FULL: {
return ( return (
React.DOM.div({className: "room-inner-info-area"}, React.createElement("div", {className: "room-inner-info-area"},
React.DOM.p({className: "full-room-message"}, React.createElement("p", {className: "full-room-message"},
mozL10n.get("rooms_room_full_label") mozL10n.get("rooms_room_full_label")
), ),
React.DOM.p(null, this._renderCallToActionLink()) React.createElement("p", null, this._renderCallToActionLink())
) )
); );
} }
case ROOM_STATES.ENDED: { case ROOM_STATES.ENDED: {
if (this.props.roomUsed) if (this.props.roomUsed)
return ( return (
React.DOM.div({className: "ended-conversation"}, React.createElement("div", {className: "ended-conversation"},
sharedViews.FeedbackView({ React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.onFeedbackSent} onAfterFeedbackReceived: this.onFeedbackSent}
) )
@@ -132,11 +132,11 @@ loop.standaloneRoomViews = (function(mozL10n) {
} }
case ROOM_STATES.FAILED: { case ROOM_STATES.FAILED: {
return ( return (
React.DOM.div({className: "room-inner-info-area"}, React.createElement("div", {className: "room-inner-info-area"},
React.DOM.p({className: "failed-room-message"}, React.createElement("p", {className: "failed-room-message"},
this._getFailureString() this._getFailureString()
), ),
React.DOM.button({className: "btn btn-join btn-info", React.createElement("button", {className: "btn btn-join btn-info",
onClick: this.props.joinRoom}, onClick: this.props.joinRoom},
mozL10n.get("retry_call_button") 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() { render: function() {
return ( return (
React.DOM.header(null, React.createElement("header", null,
React.DOM.h1(null, mozL10n.get("clientShortname2")), React.createElement("h1", null, mozL10n.get("clientShortname2")),
React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl}, React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl},
React.DOM.i({className: "icon icon-help"}) React.createElement("i", {className: "icon icon-help"})
) )
) )
); );
} }
}); });
var StandaloneRoomFooter = React.createClass({displayName: 'StandaloneRoomFooter', var StandaloneRoomFooter = React.createClass({displayName: "StandaloneRoomFooter",
_getContent: function() { _getContent: function() {
return mozL10n.get("legal_text_and_links", { return mozL10n.get("legal_text_and_links", {
"clientShortname": mozL10n.get("clientShortname2"), "clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use_url": React.renderComponentToStaticMarkup( "terms_of_use_url": React.renderToStaticMarkup(
React.DOM.a({href: loop.config.legalWebsiteUrl, target: "_blank"}, React.createElement("a", {href: loop.config.legalWebsiteUrl, target: "_blank"},
mozL10n.get("terms_of_use_link_text") mozL10n.get("terms_of_use_link_text")
) )
), ),
"privacy_notice_url": React.renderComponentToStaticMarkup( "privacy_notice_url": React.renderToStaticMarkup(
React.DOM.a({href: loop.config.privacyWebsiteUrl, target: "_blank"}, React.createElement("a", {href: loop.config.privacyWebsiteUrl, target: "_blank"},
mozL10n.get("privacy_notice_link_text") mozL10n.get("privacy_notice_link_text")
) )
), ),
@@ -182,15 +182,15 @@ loop.standaloneRoomViews = (function(mozL10n) {
render: function() { render: function() {
return ( return (
React.DOM.footer(null, React.createElement("footer", null,
React.DOM.p({dangerouslySetInnerHTML: {__html: this._getContent()}}), React.createElement("p", {dangerouslySetInnerHTML: {__html: this._getContent()}}),
React.DOM.div({className: "footer-logo"}) React.createElement("div", {className: "footer-logo"})
) )
); );
} }
}); });
var StandaloneRoomView = React.createClass({displayName: 'StandaloneRoomView', var StandaloneRoomView = React.createClass({displayName: "StandaloneRoomView",
mixins: [ mixins: [
Backbone.Events, Backbone.Events,
sharedMixins.RoomsAudioMixin sharedMixins.RoomsAudioMixin
@@ -360,29 +360,29 @@ loop.standaloneRoomViews = (function(mozL10n) {
}); });
return ( return (
React.DOM.div({className: "room-conversation-wrapper"}, React.createElement("div", {className: "room-conversation-wrapper"},
React.DOM.div({className: "beta-logo"}), React.createElement("div", {className: "beta-logo"}),
StandaloneRoomHeader(null), React.createElement(StandaloneRoomHeader, null),
StandaloneRoomInfoArea({roomState: this.state.roomState, React.createElement(StandaloneRoomInfoArea, {roomState: this.state.roomState,
failureReason: this.state.failureReason, failureReason: this.state.failureReason,
joinRoom: this.joinRoom, joinRoom: this.joinRoom,
helper: this.props.helper, helper: this.props.helper,
activeRoomStore: this.props.activeRoomStore, activeRoomStore: this.props.activeRoomStore,
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
roomUsed: this.state.used}), roomUsed: this.state.used}),
React.DOM.div({className: "video-layout-wrapper"}, React.createElement("div", {className: "video-layout-wrapper"},
React.DOM.div({className: "conversation room-conversation"}, React.createElement("div", {className: "conversation room-conversation"},
React.DOM.h2({className: "room-name"}, this.state.roomName), React.createElement("h2", {className: "room-name"}, this.state.roomName),
React.DOM.div({className: "media nested"}, React.createElement("div", {className: "media nested"},
React.DOM.span({className: "self-view-hidden-message"}, React.createElement("span", {className: "self-view-hidden-message"},
mozL10n.get("self_view_hidden_message") mozL10n.get("self_view_hidden_message")
), ),
React.DOM.div({className: "video_wrapper remote_wrapper"}, React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.DOM.div({className: "video_inner remote"}) 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, video: {enabled: !this.state.videoMuted,
visible: this._roomIsActive()}, visible: this._roomIsActive()},
audio: {enabled: !this.state.audioMuted, audio: {enabled: !this.state.audioMuted,
@@ -393,10 +393,10 @@ loop.standaloneRoomViews = (function(mozL10n) {
enableHangup: this._roomIsActive()}) enableHangup: this._roomIsActive()})
) )
), ),
loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({ React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
marketplaceSrc: this.state.marketplaceSrc, marketplaceSrc: this.state.marketplaceSrc,
onMarketplaceMessage: this.state.onMarketplaceMessage}), 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() { _getContent: function() {
return mozL10n.get("legal_text_and_links", { return mozL10n.get("legal_text_and_links", {
"clientShortname": mozL10n.get("clientShortname2"), "clientShortname": mozL10n.get("clientShortname2"),
"terms_of_use_url": React.renderComponentToStaticMarkup( "terms_of_use_url": React.renderToStaticMarkup(
<a href={loop.config.legalWebsiteUrl} target="_blank"> <a href={loop.config.legalWebsiteUrl} target="_blank">
{mozL10n.get("terms_of_use_link_text")} {mozL10n.get("terms_of_use_link_text")}
</a> </a>
), ),
"privacy_notice_url": React.renderComponentToStaticMarkup( "privacy_notice_url": React.renderToStaticMarkup(
<a href={loop.config.privacyWebsiteUrl} target="_blank"> <a href={loop.config.privacyWebsiteUrl} target="_blank">
{mozL10n.get("privacy_notice_link_text")} {mozL10n.get("privacy_notice_link_text")}
</a> </a>

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

@@ -25,11 +25,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
/** /**
* Homepage view. * Homepage view.
*/ */
var HomeView = React.createClass({displayName: 'HomeView', var HomeView = React.createClass({displayName: "HomeView",
render: function() { render: function() {
multiplexGum.reset(); multiplexGum.reset();
return ( 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. * Unsupported Browsers view.
*/ */
var UnsupportedBrowserView = React.createClass({displayName: 'UnsupportedBrowserView', var UnsupportedBrowserView = React.createClass({displayName: "UnsupportedBrowserView",
render: function() { render: function() {
return ( return (
React.DOM.div({className: "expired-url-info"}, React.createElement("div", {className: "expired-url-info"},
React.DOM.div({className: "info-panel"}, React.createElement("div", {className: "info-panel"},
React.DOM.div({className: "firefox-logo"}), React.createElement("div", {className: "firefox-logo"}),
React.DOM.h1(null, mozL10n.get("incompatible_browser_heading")), React.createElement("h1", null, mozL10n.get("incompatible_browser_heading")),
React.DOM.h4(null, mozL10n.get("incompatible_browser_message")) 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. * Unsupported Device view.
*/ */
var UnsupportedDeviceView = React.createClass({displayName: 'UnsupportedDeviceView', var UnsupportedDeviceView = React.createClass({displayName: "UnsupportedDeviceView",
render: function() { render: function() {
return ( return (
React.DOM.div(null, React.createElement("div", null,
React.DOM.h2(null, mozL10n.get("incompatible_device")), React.createElement("h2", null, mozL10n.get("incompatible_device")),
React.DOM.p(null, mozL10n.get("sorry_device_unsupported", {clientShortname: mozL10n.get("clientShortname2")})), React.createElement("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("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. * Firefox promotion interstitial. Will display only to non-Firefox users.
*/ */
var PromoteFirefoxView = React.createClass({displayName: 'PromoteFirefoxView', var PromoteFirefoxView = React.createClass({displayName: "PromoteFirefoxView",
propTypes: { propTypes: {
helper: React.PropTypes.object.isRequired helper: React.PropTypes.object.isRequired
}, },
render: function() { render: function() {
if (this.props.helper.isFirefox(navigator.userAgent)) { if (this.props.helper.isFirefox(navigator.userAgent)) {
return React.DOM.div(null); return React.createElement("div", null);
} }
return ( return (
React.DOM.div({className: "promote-firefox"}, React.createElement("div", {className: "promote-firefox"},
React.DOM.h3(null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})), React.createElement("h3", null, mozL10n.get("promote_firefox_hello_heading", {brandShortname: mozL10n.get("brandShortname")})),
React.DOM.p(null, React.createElement("p", null,
React.DOM.a({className: "btn btn-large btn-accept", React.createElement("a", {className: "btn btn-large btn-accept",
href: loop.config.brandWebsiteUrl}, href: loop.config.brandWebsiteUrl},
mozL10n.get("get_firefox_button", { mozL10n.get("get_firefox_button", {
brandShortname: mozL10n.get("brandShortname") brandShortname: mozL10n.get("brandShortname")
@@ -98,30 +98,30 @@ loop.webapp = (function($, _, OT, mozL10n) {
/** /**
* Expired call URL view. * Expired call URL view.
*/ */
var CallUrlExpiredView = React.createClass({displayName: 'CallUrlExpiredView', var CallUrlExpiredView = React.createClass({displayName: "CallUrlExpiredView",
propTypes: { propTypes: {
helper: React.PropTypes.object.isRequired helper: React.PropTypes.object.isRequired
}, },
render: function() { render: function() {
return ( return (
React.DOM.div({className: "expired-url-info"}, React.createElement("div", {className: "expired-url-info"},
React.DOM.div({className: "info-panel"}, React.createElement("div", {className: "info-panel"},
React.DOM.div({className: "firefox-logo"}), React.createElement("div", {className: "firefox-logo"}),
React.DOM.h1(null, mozL10n.get("call_url_unavailable_notification_heading")), React.createElement("h1", null, mozL10n.get("call_url_unavailable_notification_heading")),
React.DOM.h4(null, mozL10n.get("call_url_unavailable_notification_message2")) 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() { render: function() {
return ( return (
React.DOM.h1({className: "standalone-header-title"}, React.createElement("h1", {className: "standalone-header-title"},
React.DOM.strong(null, mozL10n.get("clientShortname2")) 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() { render: function() {
var cx = React.addons.classSet; var cx = React.addons.classSet;
var conversationUrl = location.href; var conversationUrl = location.href;
@@ -212,15 +212,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
}); });
return ( return (
React.DOM.header({className: "standalone-header header-box container-box"}, React.createElement("header", {className: "standalone-header header-box container-box"},
ConversationBranding(null), React.createElement(ConversationBranding, null),
React.DOM.div({className: "loop-logo", React.createElement("div", {className: "loop-logo",
title: mozL10n.get("client_alttext", title: mozL10n.get("client_alttext",
{clientShortname: mozL10n.get("clientShortname2")})}), {clientShortname: mozL10n.get("clientShortname2")})}),
React.DOM.h3({className: "call-url"}, React.createElement("h3", {className: "call-url"},
conversationUrl conversationUrl
), ),
React.DOM.h4({className: urlCreationDateClasses}, React.createElement("h4", {className: urlCreationDateClasses},
callUrlCreationDateString callUrlCreationDateString
) )
) )
@@ -228,15 +228,15 @@ loop.webapp = (function($, _, OT, mozL10n) {
} }
}); });
var ConversationFooter = React.createClass({displayName: 'ConversationFooter', var ConversationFooter = React.createClass({displayName: "ConversationFooter",
render: function() { render: function() {
return ( return (
React.DOM.div({className: "standalone-footer container-box"}, React.createElement("div", {className: "standalone-footer container-box"},
React.DOM.div({title: mozL10n.get("vendor_alttext", React.createElement("div", {title: mozL10n.get("vendor_alttext",
{vendorShortname: mozL10n.get("vendorShortname")}), {vendorShortname: mozL10n.get("vendorShortname")}),
className: "footer-logo"}), className: "footer-logo"}),
React.DOM.div({className: "footer-external-links"}, React.createElement("div", {className: "footer-external-links"},
React.DOM.a({target: "_blank", href: loop.config.generalSupportUrl}, React.createElement("a", {target: "_blank", href: loop.config.generalSupportUrl},
mozL10n.get("support_link") mozL10n.get("support_link")
) )
) )
@@ -249,7 +249,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
* A view for when conversations are pending, displays any messages * A view for when conversations are pending, displays any messages
* and an option cancel button. * and an option cancel button.
*/ */
var PendingConversationView = React.createClass({displayName: 'PendingConversationView', var PendingConversationView = React.createClass({displayName: "PendingConversationView",
propTypes: { propTypes: {
callState: React.PropTypes.string.isRequired, callState: React.PropTypes.string.isRequired,
// If not supplied, the cancel button is not displayed. // If not supplied, the cancel button is not displayed.
@@ -265,32 +265,32 @@ loop.webapp = (function($, _, OT, mozL10n) {
}); });
return ( return (
React.DOM.div({className: "container"}, React.createElement("div", {className: "container"},
React.DOM.div({className: "container-box"}, React.createElement("div", {className: "container-box"},
React.DOM.header({className: "pending-header header-box"}, React.createElement("header", {className: "pending-header header-box"},
ConversationBranding(null) 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 this.props.callState
), ),
React.DOM.div({className: "btn-pending-cancel-group btn-group"}, React.createElement("div", {className: "btn-pending-cancel-group btn-group"},
React.DOM.div({className: "flex-padding-1"}), React.createElement("div", {className: "flex-padding-1"}),
React.DOM.button({className: cancelButtonClasses, React.createElement("button", {className: cancelButtonClasses,
onClick: this.props.cancelCallback}, 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") 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 * View displayed whilst the get user media prompt is being displayed. Indicates
* to the user to accept the prompt. * to the user to accept the prompt.
*/ */
var GumPromptConversationView = React.createClass({displayName: 'GumPromptConversationView', var GumPromptConversationView = React.createClass({displayName: "GumPromptConversationView",
render: function() { render: function() {
var callState = mozL10n.get("call_progress_getting_media_description", { var callState = mozL10n.get("call_progress_getting_media_description", {
clientShortname: mozL10n.get("clientShortname2") clientShortname: mozL10n.get("clientShortname2")
@@ -310,7 +310,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
currentStatus: mozL10n.get("call_progress_getting_media_title") 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 * View displayed waiting for a call to be connected. Updates the display
* once the websocket shows that the callee is being alerted. * 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], mixins: [sharedMixins.AudioMixin],
getInitialState: function() { getInitialState: function() {
@@ -356,7 +356,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
currentStatus: mozL10n.get(callStateStringEntityName)}); currentStatus: mozL10n.get(callStateStringEntityName)});
return ( return (
PendingConversationView({ React.createElement(PendingConversationView, {
callState: callState, callState: callState,
cancelCallback: this._cancelOutgoingCall} 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], mixins: [sharedMixins.DropdownMenuMixin],
propTypes: { propTypes: {
@@ -388,25 +388,25 @@ loop.webapp = (function($, _, OT, mozL10n) {
"disabled": this.props.disabled "disabled": this.props.disabled
}); });
return ( return (
React.DOM.div({className: "standalone-btn-chevron-menu-group"}, React.createElement("div", {className: "standalone-btn-chevron-menu-group"},
React.DOM.div({className: "btn-group-chevron"}, React.createElement("div", {className: "btn-group-chevron"},
React.DOM.div({className: "btn-group"}, React.createElement("div", {className: "btn-group"},
React.DOM.button({className: "btn btn-constrained btn-large btn-accept", React.createElement("button", {className: "btn btn-constrained btn-large btn-accept",
onClick: this.props.startCall("audio-video"), onClick: this.props.startCall("audio-video"),
disabled: this.props.disabled, disabled: this.props.disabled,
title: mozL10n.get("initiate_audio_video_call_tooltip2")}, 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 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} onClick: this.toggleDropdownMenu}
) )
), ),
React.DOM.ul({className: dropdownMenuClasses}, React.createElement("ul", {className: dropdownMenuClasses},
React.DOM.li(null, React.createElement("li", null,
React.DOM.button({className: "start-audio-only-call", React.createElement("button", {className: "start-audio-only-call",
onClick: this.props.startCall("audio"), onClick: this.props.startCall("audio"),
disabled: this.props.disabled}, disabled: this.props.disabled},
mozL10n.get("initiate_audio_call_button2") mozL10n.get("initiate_audio_call_button2")
@@ -422,7 +422,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
/** /**
* Initiate conversation view. * Initiate conversation view.
*/ */
var InitiateConversationView = React.createClass({displayName: 'InitiateConversationView', var InitiateConversationView = React.createClass({displayName: "InitiateConversationView",
mixins: [Backbone.Events], mixins: [Backbone.Events],
propTypes: { propTypes: {
@@ -518,37 +518,37 @@ loop.webapp = (function($, _, OT, mozL10n) {
}); });
return ( return (
React.DOM.div({className: "container"}, React.createElement("div", {className: "container"},
React.DOM.div({className: "container-box"}, React.createElement("div", {className: "container-box"},
ConversationHeader({ React.createElement(ConversationHeader, {
urlCreationDateString: this.state.urlCreationDateString}), urlCreationDateString: this.state.urlCreationDateString}),
React.DOM.p({className: "standalone-btn-label"}, React.createElement("p", {className: "standalone-btn-label"},
this.props.title this.props.title
), ),
React.DOM.div({id: "messages"}), React.createElement("div", {id: "messages"}),
React.DOM.div({className: "btn-group"}, React.createElement("div", {className: "btn-group"},
React.DOM.div({className: "flex-padding-1"}), React.createElement("div", {className: "flex-padding-1"}),
InitiateCallButton({ React.createElement(InitiateCallButton, {
caption: this.props.callButtonLabel, caption: this.props.callButtonLabel,
disabled: this.state.disableCallButton, disabled: this.state.disableCallButton,
startCall: this.startCall} 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}}) dangerouslySetInnerHTML: {__html: tosHTML}})
), ),
loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView({ React.createElement(loop.fxOSMarketplaceViews.FxOSHiddenMarketplaceView, {
marketplaceSrc: this.state.marketplaceSrc, marketplaceSrc: this.state.marketplaceSrc,
onMarketplaceMessage: this.state.onMarketplaceMessage}), onMarketplaceMessage: this.state.onMarketplaceMessage}),
ConversationFooter(null) React.createElement(ConversationFooter, null)
) )
); );
} }
@@ -557,7 +557,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
/** /**
* Ended conversation view. * Ended conversation view.
*/ */
var EndedConversationView = React.createClass({displayName: 'EndedConversationView', var EndedConversationView = React.createClass({displayName: "EndedConversationView",
propTypes: { propTypes: {
conversation: React.PropTypes.instanceOf(sharedModels.ConversationModel) conversation: React.PropTypes.instanceOf(sharedModels.ConversationModel)
.isRequired, .isRequired,
@@ -571,12 +571,12 @@ loop.webapp = (function($, _, OT, mozL10n) {
{clientShortname: mozL10n.get("clientShortname2"), {clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_conversation_ended")}); currentStatus: mozL10n.get("status_conversation_ended")});
return ( return (
React.DOM.div({className: "ended-conversation"}, React.createElement("div", {className: "ended-conversation"},
sharedViews.FeedbackView({ React.createElement(sharedViews.FeedbackView, {
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
onAfterFeedbackReceived: this.props.onAfterFeedbackReceived} onAfterFeedbackReceived: this.props.onAfterFeedbackReceived}
), ),
sharedViews.ConversationView({ React.createElement(sharedViews.ConversationView, {
initiate: false, initiate: false,
sdk: this.props.sdk, sdk: this.props.sdk,
model: this.props.conversation, 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() { render: function() {
document.title = mozL10n.get("clientShortname2"); document.title = mozL10n.get("clientShortname2");
return this.transferPropsTo( return React.createElement(InitiateConversationView, React.__spread({},
InitiateConversationView({ this.props,
title: mozL10n.get("initiate_call_button_label2"), {title: mozL10n.get("initiate_call_button_label2"),
callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")}) callButtonLabel: mozL10n.get("initiate_audio_video_call_button2")})
); );
} }
}); });
var FailedConversationView = React.createClass({displayName: 'FailedConversationView', var FailedConversationView = React.createClass({displayName: "FailedConversationView",
mixins: [sharedMixins.AudioMixin], mixins: [sharedMixins.AudioMixin],
componentDidMount: function() { componentDidMount: function() {
@@ -610,11 +610,10 @@ loop.webapp = (function($, _, OT, mozL10n) {
document.title = mozL10n.get("standalone_title_with_status", document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"), {clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_error")}); currentStatus: mozL10n.get("status_error")});
return this.transferPropsTo( return React.createElement(InitiateConversationView, React.__spread({},
InitiateConversationView({ this.props,
title: mozL10n.get("call_failed_title"), {title: mozL10n.get("call_failed_title"),
callButtonLabel: mozL10n.get("retry_call_button")}) 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. * 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: { propTypes: {
client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired, client: React.PropTypes.instanceOf(loop.StandaloneClient).isRequired,
conversation: React.PropTypes.oneOfType([ conversation: React.PropTypes.oneOfType([
@@ -679,7 +678,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
switch (this.state.callStatus) { switch (this.state.callStatus) {
case "start": { case "start": {
return ( return (
StartConversationView({ React.createElement(StartConversationView, {
conversation: this.props.conversation, conversation: this.props.conversation,
notifications: this.props.notifications, notifications: this.props.notifications,
client: this.props.client} client: this.props.client}
@@ -688,7 +687,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
} }
case "failure": { case "failure": {
return ( return (
FailedConversationView({ React.createElement(FailedConversationView, {
conversation: this.props.conversation, conversation: this.props.conversation,
notifications: this.props.notifications, notifications: this.props.notifications,
client: this.props.client} client: this.props.client}
@@ -696,17 +695,17 @@ loop.webapp = (function($, _, OT, mozL10n) {
); );
} }
case "gumPrompt": { case "gumPrompt": {
return GumPromptConversationView(null); return React.createElement(GumPromptConversationView, null);
} }
case "pending": { case "pending": {
return WaitingConversationView({websocket: this._websocket}); return React.createElement(WaitingConversationView, {websocket: this._websocket});
} }
case "connected": { case "connected": {
document.title = mozL10n.get("standalone_title_with_status", document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"), {clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_in_conversation")}); currentStatus: mozL10n.get("status_in_conversation")});
return ( return (
sharedViews.ConversationView({ React.createElement(sharedViews.ConversationView, {
initiate: true, initiate: true,
sdk: this.props.sdk, sdk: this.props.sdk,
model: this.props.conversation, model: this.props.conversation,
@@ -716,7 +715,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
} }
case "end": { case "end": {
return ( return (
EndedConversationView({ React.createElement(EndedConversationView, {
sdk: this.props.sdk, sdk: this.props.sdk,
conversation: this.props.conversation, conversation: this.props.conversation,
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
@@ -726,11 +725,11 @@ loop.webapp = (function($, _, OT, mozL10n) {
} }
case "expired": { case "expired": {
return ( return (
CallUrlExpiredView({helper: this.props.helper}) React.createElement(CallUrlExpiredView, {helper: this.props.helper})
); );
} }
default: { 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 * Webapp Root View. This is the main, single, view that controls the display
* of the webapp page. * of the webapp page.
*/ */
var WebappRootView = React.createClass({displayName: 'WebappRootView', var WebappRootView = React.createClass({displayName: "WebappRootView",
mixins: [sharedMixins.UrlHashChangeMixin, mixins: [sharedMixins.UrlHashChangeMixin,
sharedMixins.DocumentLocationMixin, sharedMixins.DocumentLocationMixin,
@@ -967,14 +966,14 @@ loop.webapp = (function($, _, OT, mozL10n) {
render: function() { render: function() {
switch (this.state.windowType) { switch (this.state.windowType) {
case "unsupportedDevice": { case "unsupportedDevice": {
return UnsupportedDeviceView(null); return React.createElement(UnsupportedDeviceView, null);
} }
case "unsupportedBrowser": { case "unsupportedBrowser": {
return UnsupportedBrowserView({helper: this.props.helper}); return React.createElement(UnsupportedBrowserView, {helper: this.props.helper});
} }
case "outgoing": { case "outgoing": {
return ( return (
OutgoingConversationView({ React.createElement(OutgoingConversationView, {
client: this.props.client, client: this.props.client,
conversation: this.props.conversation, conversation: this.props.conversation,
helper: this.props.helper, helper: this.props.helper,
@@ -986,7 +985,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
} }
case "room": { case "room": {
return ( return (
loop.standaloneRoomViews.StandaloneRoomView({ React.createElement(loop.standaloneRoomViews.StandaloneRoomView, {
activeRoomStore: this.props.activeRoomStore, activeRoomStore: this.props.activeRoomStore,
feedbackStore: this.props.feedbackStore, feedbackStore: this.props.feedbackStore,
dispatcher: this.props.dispatcher, dispatcher: this.props.dispatcher,
@@ -995,7 +994,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
); );
} }
case "home": { case "home": {
return HomeView(null); return React.createElement(HomeView, null);
} }
default: { default: {
// The state hasn't been initialised yet, so don't display // 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()); dispatcher.dispatch(new sharedActions.WindowUnload());
}); });
React.renderComponent(WebappRootView({ React.render(React.createElement(WebappRootView, {
client: client, client: client,
conversation: conversation, conversation: conversation,
helper: helper, 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({ var StartConversationView = React.createClass({
render: function() { render: function() {
document.title = mozL10n.get("clientShortname2"); document.title = mozL10n.get("clientShortname2");
return this.transferPropsTo( return <InitiateConversationView
<InitiateConversationView {...this.props}
title={mozL10n.get("initiate_call_button_label2")} title={mozL10n.get("initiate_call_button_label2")}
callButtonLabel={mozL10n.get("initiate_audio_video_call_button2")} /> 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", document.title = mozL10n.get("standalone_title_with_status",
{clientShortname: mozL10n.get("clientShortname2"), {clientShortname: mozL10n.get("clientShortname2"),
currentStatus: mozL10n.get("status_error")}); currentStatus: mozL10n.get("status_error")});
return this.transferPropsTo( return <InitiateConversationView
<InitiateConversationView {...this.props}
title={mozL10n.get("call_failed_title")} title={mozL10n.get("call_failed_title")}
callButtonLabel={mozL10n.get("retry_call_button")} /> callButtonLabel={mozL10n.get("retry_call_button")} />;
);
} }
}); });
@@ -1079,7 +1078,7 @@ loop.webapp = (function($, _, OT, mozL10n) {
dispatcher.dispatch(new sharedActions.WindowUnload()); dispatcher.dispatch(new sharedActions.WindowUnload());
}); });
React.renderComponent(<WebappRootView React.render(<WebappRootView
client={client} client={client}
conversation={conversation} conversation={conversation}
helper={helper} 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()}; navigator.mozLoop.contacts = {getAll: sandbox.stub()};
listView = TestUtils.renderIntoDocument(loop.contacts.ContactsList()); listView = TestUtils.renderIntoDocument(
React.createElement(loop.contacts.ContactsList));
}); });
afterEach(function() { afterEach(function() {
@@ -88,46 +89,47 @@ describe("loop.contacts", function() {
describe("ContactDetailsForm", function() { describe("ContactDetailsForm", function() {
describe("#render", function() { describe("#render", function() {
describe("add mode", 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() { it("should render 'add' header", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var header = view.getDOMNode().querySelector("header"); var header = view.getDOMNode().querySelector("header");
expect(header).to.not.equal(null); expect(header).to.not.equal(null);
expect(header.textContent).to.eql(fakeAddContactButtonText); expect(header.textContent).to.eql(fakeAddContactButtonText);
}); });
it("should render name input", function() { it("should render name input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var nameInput = view.getDOMNode().querySelector("input[type='text']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
expect(nameInput).to.not.equal(null); expect(nameInput).to.not.equal(null);
}); });
it("should render email input", function() { it("should render email input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var emailInput = view.getDOMNode().querySelector("input[type='email']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
expect(emailInput).to.not.equal(null); expect(emailInput).to.not.equal(null);
}); });
it("should render tel input", function() { it("should render tel input", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var telInput = view.getDOMNode().querySelector("input[type='tel']"); var telInput = view.getDOMNode().querySelector("input[type='tel']");
expect(telInput).to.not.equal(null); expect(telInput).to.not.equal(null);
}); });
it("should render 'add contact' button", function() { it("should render 'add contact' button", function() {
var view = TestUtils.renderIntoDocument(
loop.contacts.ContactDetailsForm({mode: "add"}));
var addButton = view.getDOMNode().querySelector(".button-accept"); var addButton = view.getDOMNode().querySelector(".button-accept");
expect(addButton).to.not.equal(null); expect(addButton).to.not.equal(null);
expect(addButton.textContent).to.eql(fakeAddContactButtonText); expect(addButton.textContent).to.eql(fakeAddContactButtonText);
}); });
it("should have all fields required by default", function() { 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 nameInput = view.getDOMNode().querySelector("input[type='text']");
var telInput = view.getDOMNode().querySelector("input[type='tel']"); var telInput = view.getDOMNode().querySelector("input[type='tel']");
var emailInput = view.getDOMNode().querySelector("input[type='email']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -136,9 +138,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(true); expect(emailInput.required).to.equal(true);
expect(telInput.required).to.equal(true); expect(telInput.required).to.equal(true);
}); });
it("should have email and tel required after a name is input", function() { 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']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}}); TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
var telInput = view.getDOMNode().querySelector("input[type='tel']"); var telInput = view.getDOMNode().querySelector("input[type='tel']");
@@ -148,9 +149,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(true); expect(emailInput.required).to.equal(true);
expect(telInput.required).to.equal(true); expect(telInput.required).to.equal(true);
}); });
it("should allow a contact with only a name and a phone number", function() { 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']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}}); TestUtils.Simulate.change(nameInput, {target: {value: "Jenny"}});
var telInput = view.getDOMNode().querySelector("input[type='tel']"); var telInput = view.getDOMNode().querySelector("input[type='tel']");
@@ -161,9 +161,8 @@ describe("loop.contacts", function() {
expect(emailInput.required).to.equal(false, "emailInput"); expect(emailInput.required).to.equal(false, "emailInput");
expect(telInput.checkValidity()).to.equal(true, "telInput"); expect(telInput.checkValidity()).to.equal(true, "telInput");
}); });
it("should allow a contact with only a name and email", function() { 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']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Example"}}); TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
var emailInput = view.getDOMNode().querySelector("input[type='email']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -174,9 +173,8 @@ describe("loop.contacts", function() {
expect(emailInput.checkValidity()).to.equal(true); expect(emailInput.checkValidity()).to.equal(true);
expect(telInput.required).to.equal(false); expect(telInput.required).to.equal(false);
}); });
it("should not allow a contact with only a name", function() { 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']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
TestUtils.Simulate.change(nameInput, {target: {value: "Example"}}); TestUtils.Simulate.change(nameInput, {target: {value: "Example"}});
var emailInput = view.getDOMNode().querySelector("input[type='email']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
@@ -186,9 +184,8 @@ describe("loop.contacts", function() {
expect(emailInput.checkValidity()).to.equal(false); expect(emailInput.checkValidity()).to.equal(false);
expect(telInput.checkValidity()).to.equal(false); expect(telInput.checkValidity()).to.equal(false);
}); });
it("should not allow a contact without name", function() { 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 nameInput = view.getDOMNode().querySelector("input[type='text']");
var emailInput = view.getDOMNode().querySelector("input[type='email']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
TestUtils.Simulate.change(emailInput, {target: {value: "test@example.com"}}); TestUtils.Simulate.change(emailInput, {target: {value: "test@example.com"}});
@@ -200,40 +197,38 @@ describe("loop.contacts", function() {
expect(telInput.checkValidity()).to.equal(true); 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"); var header = view.getDOMNode().querySelector("header");
expect(header).to.not.equal(null); expect(header).to.not.equal(null);
expect(header.textContent).to.eql(fakeEditContactButtonText); 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']"); var nameInput = view.getDOMNode().querySelector("input[type='text']");
expect(nameInput).to.not.equal(null); 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']"); var emailInput = view.getDOMNode().querySelector("input[type='email']");
expect(emailInput).to.not.equal(null); 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']"); var telInput = view.getDOMNode().querySelector("input[type='tel']");
expect(telInput).to.not.equal(null); 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"); var doneButton = view.getDOMNode().querySelector(".button-accept");
expect(doneButton).to.not.equal(null); expect(doneButton).to.not.equal(null);
expect(doneButton.textContent).to.eql(fakeDoneButtonText); expect(doneButton.textContent).to.eql(fakeDoneButtonText);
@@ -248,6 +243,7 @@ describe("loop.contacts", function() {
expect(obj.value).to.eql(""); expect(obj.value).to.eql("");
}); });
it("should return the preferred value when the field exists", function() { it("should return the preferred value when the field exists", function() {
var correctValue = "correct value"; var correctValue = "correct value";
var fakeContact = {fakeField: [{value: "wrong value"}, {value: correctValue, pref: true}]}; 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"); expect(contact).to.not.have.property("fakeField");
}); });
it("should clear the value on the object if the new value is empty," + it("should clear the value on the object if the new value is empty," +
" it existed before, and it is optional", function() { " it existed before, and it is optional", function() {
var contact = {fakeField: [{value: "foobar"}]}; var contact = {fakeField: [{value: "foobar"}]};
@@ -272,6 +269,7 @@ describe("loop.contacts", function() {
expect(contact["fakeField"][0].value).to.eql(""); expect(contact["fakeField"][0].value).to.eql("");
}); });
it("should set the value on the object if the new value is empty," + it("should set the value on the object if the new value is empty," +
" and it did not exist before", function() { " and it did not exist before", function() {
var contact = {fakeField: [{value: "foobar"}]}; 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() { describe("CallIdentifierView", function() {
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.CallIdentifierView(props)); React.createElement(loop.conversationViews.CallIdentifierView, props));
} }
it("should set display the peer identifer", function() { it("should set display the peer identifer", function() {
@@ -170,7 +170,7 @@ describe("loop.conversationViews", function () {
describe("ConversationDetailView", function() { describe("ConversationDetailView", function() {
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.ConversationDetailView(props)); React.createElement(loop.conversationViews.ConversationDetailView, props));
} }
it("should set the document title to the calledId", function() { it("should set the document title to the calledId", function() {
@@ -192,7 +192,7 @@ describe("loop.conversationViews", function () {
describe("PendingConversationView", function() { describe("PendingConversationView", function() {
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument( 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", it("should set display connecting string when the state is not alerting",
@@ -277,7 +277,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent(options) { function mountTestComponent(options) {
options = options || {}; options = options || {};
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.CallFailedView({ React.createElement(loop.conversationViews.CallFailedView, {
dispatcher: dispatcher, dispatcher: dispatcher,
store: store, store: store,
contact: options.contact contact: options.contact
@@ -417,7 +417,7 @@ describe("loop.conversationViews", function () {
describe("OngoingConversationView", function() { describe("OngoingConversationView", function() {
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.OngoingConversationView(props)); React.createElement(loop.conversationViews.OngoingConversationView, props));
} }
it("should dispatch a setupStreamElements action when the view is created", it("should dispatch a setupStreamElements action when the view is created",
@@ -511,7 +511,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent() { function mountTestComponent() {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.OutgoingConversationView({ React.createElement(loop.conversationViews.OutgoingConversationView, {
dispatcher: dispatcher, dispatcher: dispatcher,
store: store, store: store,
feedbackStore: feedbackStore feedbackStore: feedbackStore
@@ -613,7 +613,7 @@ describe("loop.conversationViews", function () {
function mountTestComponent() { function mountTestComponent() {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversationViews.IncomingConversationView({ React.createElement(loop.conversationViews.IncomingConversationView, {
client: client, client: client,
conversation: conversation, conversation: conversation,
sdk: {}, sdk: {},
@@ -1149,7 +1149,7 @@ describe("loop.conversationViews", function () {
sandbox.stub(window, "Audio").returns(fakeAudio); sandbox.stub(window, "Audio").returns(fakeAudio);
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: true video: true
})); }));
@@ -1158,7 +1158,7 @@ describe("loop.conversationViews", function () {
describe("default answer mode", function() { describe("default answer mode", function() {
it("should display video as primary answer mode", function() { it("should display video as primary answer mode", function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: true video: true
})); }));
@@ -1170,7 +1170,7 @@ describe("loop.conversationViews", function () {
it("should display audio as primary answer mode", function() { it("should display audio as primary answer mode", function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: false video: false
})); }));
@@ -1182,7 +1182,7 @@ describe("loop.conversationViews", function () {
it("should accept call with video", function() { it("should accept call with video", function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: true video: true
})); }));
@@ -1199,7 +1199,7 @@ describe("loop.conversationViews", function () {
it("should accept call with audio", function() { it("should accept call with audio", function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: false video: false
})); }));
@@ -1216,38 +1216,38 @@ describe("loop.conversationViews", function () {
it("should accept call with video when clicking on secondary btn", it("should accept call with video when clicking on secondary btn",
function() { function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: false video: false
})); }));
var secondaryBtn = view.getDOMNode() var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-video-small'); .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.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video"); sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio-video");
sinon.assert.calledOnce(model.trigger); sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept"); sinon.assert.calledWithExactly(model.trigger, "accept");
}); });
it("should accept call with audio when clicking on secondary btn", it("should accept call with audio when clicking on secondary btn",
function() { function() {
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.IncomingCallView({ React.createElement(loop.conversationViews.IncomingCallView, {
model: model, model: model,
video: true video: true
})); }));
var secondaryBtn = view.getDOMNode() var secondaryBtn = view.getDOMNode()
.querySelector('.fx-embedded-btn-audio-small'); .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.calledOnce(model.set);
sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio"); sinon.assert.calledWithExactly(model.set, "selectedCallType", "audio");
sinon.assert.calledOnce(model.trigger); sinon.assert.calledOnce(model.trigger);
sinon.assert.calledWithExactly(model.trigger, "accept"); sinon.assert.calledWithExactly(model.trigger, "accept");
}); });
}); });
@@ -1308,10 +1308,9 @@ describe("loop.conversationViews", function () {
sandbox.stub(window, "Audio").returns(fakeAudio); sandbox.stub(window, "Audio").returns(fakeAudio);
view = TestUtils.renderIntoDocument( view = TestUtils.renderIntoDocument(
loop.conversationViews.GenericFailureView({ React.createElement(loop.conversationViews.GenericFailureView, {
cancelCall: function() {} cancelCall: function() {}
}) }));
);
}); });
it("should play a failure sound, once", 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() { describe("#init", function() {
beforeEach(function() { beforeEach(function() {
sandbox.stub(React, "renderComponent"); sandbox.stub(React, "render");
sandbox.stub(document.mozL10n, "initialize"); sandbox.stub(document.mozL10n, "initialize");
sandbox.stub(loop.shared.models.ConversationModel.prototype, sandbox.stub(loop.shared.models.ConversationModel.prototype,
@@ -107,10 +107,10 @@ describe("loop.conversation", function() {
it("should create the AppControllerView", function() { it("should create the AppControllerView", function() {
loop.conversation.init(); loop.conversation.init();
sinon.assert.calledOnce(React.renderComponent); sinon.assert.calledOnce(React.render);
sinon.assert.calledWith(React.renderComponent, sinon.assert.calledWith(React.render,
sinon.match(function(value) { sinon.match(function(value) {
return TestUtils.isDescriptorOfType(value, return TestUtils.isCompositeComponentElement(value,
loop.conversation.AppControllerView); loop.conversation.AppControllerView);
})); }));
}); });
@@ -132,7 +132,7 @@ describe("loop.conversation", function() {
function mountTestComponent() { function mountTestComponent() {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
loop.conversation.AppControllerView({ React.createElement(loop.conversation.AppControllerView, {
client: client, client: client,
conversation: conversation, conversation: conversation,
roomStore: roomStore, roomStore: roomStore,

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

@@ -23,7 +23,7 @@
<!-- libs --> <!-- libs -->
<script src="../../content/libs/l10n.js"></script> <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/jquery-2.1.0.js"></script>
<script src="../../content/shared/libs/lodash-2.4.1.js"></script> <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../../content/shared/libs/backbone-1.1.2.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() { describe("#init", function() {
beforeEach(function() { beforeEach(function() {
sandbox.stub(React, "renderComponent"); sandbox.stub(React, "render");
sandbox.stub(document.mozL10n, "initialize"); sandbox.stub(document.mozL10n, "initialize");
sandbox.stub(document.mozL10n, "get").returns("Fake title"); sandbox.stub(document.mozL10n, "get").returns("Fake title");
}); });
@@ -96,10 +96,10 @@ describe("loop.panel", function() {
it("should render the panel view", function() { it("should render the panel view", function() {
loop.panel.init(); loop.panel.init();
sinon.assert.calledOnce(React.renderComponent); sinon.assert.calledOnce(React.render);
sinon.assert.calledWith(React.renderComponent, sinon.assert.calledWith(React.render,
sinon.match(function(value) { sinon.match(function(value) {
return TestUtils.isDescriptorOfType(value, return TestUtils.isCompositeComponentElement(value,
loop.panel.PanelView); loop.panel.PanelView);
})); }));
}); });
@@ -121,7 +121,8 @@ describe("loop.panel", function() {
var view; var view;
beforeEach(function() { beforeEach(function() {
view = TestUtils.renderIntoDocument(loop.panel.AvailabilityDropdown()); view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.AvailabilityDropdown));
}); });
describe("doNotDisturb preference change", function() { describe("doNotDisturb preference change", function() {
@@ -171,14 +172,15 @@ describe("loop.panel", function() {
}); });
function createTestPanelView() { function createTestPanelView() {
return TestUtils.renderIntoDocument(loop.panel.PanelView({ return TestUtils.renderIntoDocument(
notifications: notifications, React.createElement(loop.panel.PanelView, {
client: fakeClient, notifications: notifications,
showTabButtons: true, client: fakeClient,
mozLoop: fakeMozLoop, showTabButtons: true,
dispatcher: dispatcher, mozLoop: fakeMozLoop,
roomStore: roomStore dispatcher: dispatcher,
})); roomStore: roomStore
}));
} }
describe('TabView', function() { describe('TabView', function() {
@@ -267,7 +269,8 @@ describe("loop.panel", function() {
it("should be hidden if FxA is not enabled", it("should be hidden if FxA is not enabled",
function() { function() {
navigator.mozLoop.fxAEnabled = false; 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; expect(view.getDOMNode()).to.be.null;
}); });
@@ -290,7 +293,8 @@ describe("loop.panel", function() {
it("should be hidden if FxA is not enabled", it("should be hidden if FxA is not enabled",
function() { function() {
navigator.mozLoop.fxAEnabled = false; 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; expect(view.getDOMNode()).to.be.null;
}); });
@@ -298,7 +302,8 @@ describe("loop.panel", function() {
function() { function() {
navigator.mozLoop.loggedInToFxA = false; 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")) expect(view.getDOMNode().querySelectorAll(".icon-signout"))
.to.have.length.of(0); .to.have.length.of(0);
@@ -309,7 +314,8 @@ describe("loop.panel", function() {
it("should show a signout entry when user is authenticated", function() { it("should show a signout entry when user is authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"}; 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")) expect(view.getDOMNode().querySelectorAll(".icon-signout"))
.to.have.length.of(1); .to.have.length.of(1);
@@ -320,7 +326,8 @@ describe("loop.panel", function() {
it("should show an account entry when user is authenticated", function() { it("should show an account entry when user is authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"}; 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")) expect(view.getDOMNode().querySelectorAll(".icon-account"))
.to.have.length.of(1); .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() { it("should open the FxA settings when the account entry is clicked", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"}; 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( TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-account")); view.getDOMNode().querySelector(".icon-account"));
@@ -341,7 +349,8 @@ describe("loop.panel", function() {
function() { function() {
navigator.mozLoop.loggedInToFxA = false; 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")) expect(view.getDOMNode().querySelectorAll(".icon-account"))
.to.have.length.of(0); .to.have.length.of(0);
@@ -349,7 +358,8 @@ describe("loop.panel", function() {
it("should sign in the user on click when unauthenticated", function() { it("should sign in the user on click when unauthenticated", function() {
navigator.mozLoop.loggedInToFxA = false; navigator.mozLoop.loggedInToFxA = false;
var view = TestUtils.renderIntoDocument(loop.panel.SettingsDropdown()); var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.SettingsDropdown));
TestUtils.Simulate.click( TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-signin")); view.getDOMNode().querySelector(".icon-signin"));
@@ -359,7 +369,8 @@ describe("loop.panel", function() {
it("should sign out the user on click when authenticated", function() { it("should sign out the user on click when authenticated", function() {
navigator.mozLoop.userProfile = {email: "test@example.com"}; 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( TestUtils.Simulate.click(
view.getDOMNode().querySelector(".icon-signout")); view.getDOMNode().querySelector(".icon-signout"));
@@ -383,7 +394,8 @@ describe("loop.panel", function() {
}); });
it("should open a tab to the support page", 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 TestUtils.Simulate
.click(view.getDOMNode().querySelector(".icon-help")); .click(view.getDOMNode().querySelector(".icon-help"));
@@ -452,10 +464,11 @@ describe("loop.panel", function() {
}; };
sandbox.stub(notifications, "reset"); sandbox.stub(notifications, "reset");
view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ view = TestUtils.renderIntoDocument(
notifications: notifications, React.createElement(loop.panel.CallUrlResult, {
client: fakeClient notifications: notifications,
})); client: fakeClient
}));
}); });
describe("Rendering the component should generate a call URL", function() { 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() { it("should make a request to requestCallUrl", function() {
sandbox.stub(fakeClient, "requestCallUrl"); sandbox.stub(fakeClient, "requestCallUrl");
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
notifications: notifications, React.createElement(loop.panel.CallUrlResult, {
client: fakeClient notifications: notifications,
})); client: fakeClient
}));
sinon.assert.calledOnce(view.props.client.requestCallUrl); sinon.assert.calledOnce(view.props.client.requestCallUrl);
sinon.assert.calledWithExactly(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() { it("should set the call url form in a pending state", function() {
// Cancel requestCallUrl effect to keep the state pending // Cancel requestCallUrl effect to keep the state pending
fakeClient.requestCallUrl = sandbox.stub(); fakeClient.requestCallUrl = sandbox.stub();
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -521,7 +536,8 @@ describe("loop.panel", function() {
it("should display a share button for email", function() { it("should display a share button for email", function() {
fakeClient.requestCallUrl = sandbox.stub(); fakeClient.requestCallUrl = sandbox.stub();
var composeCallUrlEmail = sandbox.stub(sharedUtils, "composeCallUrlEmail"); var composeCallUrlEmail = sandbox.stub(sharedUtils, "composeCallUrlEmail");
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient 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() { it("should feature a copy button capable of copying the call url when clicked", function() {
fakeClient.requestCallUrl = sandbox.stub(); fakeClient.requestCallUrl = sandbox.stub();
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -556,7 +573,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is copied via button", it("should note the call url expiry when the url is copied via button",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -576,7 +594,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is copied via button", it("should call mozLoop.telemetryAdd when the url is copied via button",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -599,7 +618,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is emailed", it("should note the call url expiry when the url is emailed",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -619,7 +639,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is emailed", it("should call mozLoop.telemetryAdd when the url is emailed",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -642,7 +663,8 @@ describe("loop.panel", function() {
it("should note the call url expiry when the url is copied manually", it("should note the call url expiry when the url is copied manually",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -663,7 +685,8 @@ describe("loop.panel", function() {
it("should call mozLoop.telemetryAdd when the url is copied manually", it("should call mozLoop.telemetryAdd when the url is copied manually",
function() { function() {
var view = TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.CallUrlResult, {
notifications: notifications, notifications: notifications,
client: fakeClient client: fakeClient
})); }));
@@ -690,10 +713,11 @@ describe("loop.panel", function() {
cb("fake error"); cb("fake error");
}; };
sandbox.stub(notifications, "errorL10n"); sandbox.stub(notifications, "errorL10n");
TestUtils.renderIntoDocument(loop.panel.CallUrlResult({ TestUtils.renderIntoDocument(
notifications: notifications, React.createElement(loop.panel.CallUrlResult, {
client: fakeClient notifications: notifications,
})); client: fakeClient
}));
sinon.assert.calledOnce(notifications.errorL10n); sinon.assert.calledOnce(notifications.errorL10n);
sinon.assert.calledWithExactly(notifications.errorL10n, sinon.assert.calledWithExactly(notifications.errorL10n,
@@ -723,7 +747,8 @@ describe("loop.panel", function() {
}); });
function mountRoomEntry(props) { function mountRoomEntry(props) {
return TestUtils.renderIntoDocument(loop.panel.RoomEntry(props)); return TestUtils.renderIntoDocument(
React.createElement(loop.panel.RoomEntry, props));
} }
describe("Edit room name", function() { describe("Edit room name", function() {
@@ -918,11 +943,12 @@ describe("loop.panel", function() {
}); });
function createTestComponent() { function createTestComponent() {
return TestUtils.renderIntoDocument(loop.panel.RoomList({ return TestUtils.renderIntoDocument(
store: roomStore, React.createElement(loop.panel.RoomList, {
dispatcher: dispatcher, store: roomStore,
userDisplayName: fakeEmail dispatcher: dispatcher,
})); userDisplayName: fakeEmail
}));
} }
it("should dispatch a GetAllRooms action on mount", function() { it("should dispatch a GetAllRooms action on mount", function() {
@@ -990,7 +1016,8 @@ describe("loop.panel", function() {
}[key]; }[key];
}; };
var view = TestUtils.renderIntoDocument(loop.panel.ToSView()); var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.ToSView));
TestUtils.findRenderedDOMComponentWithClass(view, "terms-service"); TestUtils.findRenderedDOMComponentWithClass(view, "terms-service");
}); });
@@ -1019,7 +1046,8 @@ describe("loop.panel", function() {
"seenToS": "seen" "seenToS": "seen"
}[key]; }[key];
}; };
var view = TestUtils.renderIntoDocument(loop.panel.ToSView()); var view = TestUtils.renderIntoDocument(
React.createElement(loop.panel.ToSView));
TestUtils.findRenderedDOMComponentWithClass(view, "terms-service"); 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(); } render: function() { return React.DOM.div(); }
}); });
var testView = TestUtils.renderIntoDocument(TestView({ var testView = TestUtils.renderIntoDocument(
roomStore: roomStore React.createElement(TestView, {
})); roomStore: roomStore
}));
expect(testView.state).eql({ expect(testView.state).eql({
roomState: ROOM_STATES.INIT, roomState: ROOM_STATES.INIT,
@@ -74,9 +75,10 @@ describe("loop.roomViews", function () {
mixins: [loop.roomViews.ActiveRoomStoreMixin], mixins: [loop.roomViews.ActiveRoomStoreMixin],
render: function() { return React.DOM.div(); } render: function() { return React.DOM.div(); }
}); });
var testView = TestUtils.renderIntoDocument(TestView({ var testView = TestUtils.renderIntoDocument(
roomStore: roomStore React.createElement(TestView, {
})); roomStore: roomStore
}));
activeRoomStore.setStoreState({roomState: ROOM_STATES.READY}); activeRoomStore.setStoreState({roomState: ROOM_STATES.READY});
@@ -97,10 +99,11 @@ describe("loop.roomViews", function () {
function mountTestComponent() { function mountTestComponent() {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
new loop.roomViews.DesktopRoomInvitationView({ React.createElement(
dispatcher: dispatcher, loop.roomViews.DesktopRoomInvitationView, {
roomStore: roomStore dispatcher: dispatcher,
})); roomStore: roomStore
}));
} }
it("should dispatch an EmailRoomUrl action when the email button is " + it("should dispatch an EmailRoomUrl action when the email button is " +
@@ -202,7 +205,7 @@ describe("loop.roomViews", function () {
function mountTestComponent() { function mountTestComponent() {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
new loop.roomViews.DesktopRoomConversationView({ React.createElement(loop.roomViews.DesktopRoomConversationView, {
dispatcher: dispatcher, dispatcher: dispatcher,
roomStore: roomStore, roomStore: roomStore,
feedbackStore: new loop.store.FeedbackStore(dispatcher, { 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, { feedbackStore = new loop.store.FeedbackStore(dispatcher, {
feedbackClient: fakeFeedbackClient feedbackClient: fakeFeedbackClient
}); });
comp = TestUtils.renderIntoDocument(sharedViews.FeedbackView({ comp = TestUtils.renderIntoDocument(
feedbackStore: feedbackStore React.createElement(sharedViews.FeedbackView, {
})); feedbackStore: feedbackStore
}));
}); });
afterEach(function() { afterEach(function() {

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

@@ -22,7 +22,7 @@
</script> </script>
<!-- libs --> <!-- 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/jquery-2.1.0.js"></script>
<script src="../../content/shared/libs/lodash-2.4.1.js"></script> <script src="../../content/shared/libs/lodash-2.4.1.js"></script>
<script src="../../content/shared/libs/backbone-1.1.2.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 React.DOM.div();
} }
}); });
return new TestComp(); return new React.createElement(TestComp);
} }
it("should watch for hashchange event", function() { it("should watch for hashchange event", function() {
@@ -83,7 +83,7 @@ describe("loop.shared.mixins", function() {
}); });
it("should call window.location.reload", function() { it("should call window.location.reload", function() {
var comp = TestUtils.renderIntoDocument(TestComp()); var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
comp.locationReload(); comp.locationReload();
@@ -109,7 +109,7 @@ describe("loop.shared.mixins", function() {
}); });
it("should set window.document.title", 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!"); comp.setTitle("It's a Fake!");
@@ -136,7 +136,7 @@ describe("loop.shared.mixins", function() {
}); });
it("should call window.close", function() { it("should call window.close", function() {
var comp = TestUtils.renderIntoDocument(TestComp()); var comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
comp.closeWindow(); comp.closeWindow();
@@ -181,7 +181,7 @@ describe("loop.shared.mixins", function() {
function() { function() {
setupFakeVisibilityEventDispatcher({target: {hidden: false}}); setupFakeVisibilityEventDispatcher({target: {hidden: false}});
comp = TestUtils.renderIntoDocument(TestComp()); comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(onDocumentVisibleStub); sinon.assert.calledOnce(onDocumentVisibleStub);
}); });
@@ -190,7 +190,7 @@ describe("loop.shared.mixins", function() {
function() { function() {
setupFakeVisibilityEventDispatcher({target: {hidden: true}}); setupFakeVisibilityEventDispatcher({target: {hidden: true}});
comp = TestUtils.renderIntoDocument(TestComp()); comp = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(onDocumentHiddenStub); sinon.assert.calledOnce(onDocumentHiddenStub);
}); });
@@ -227,14 +227,14 @@ describe("loop.shared.mixins", function() {
}); });
it("should not play a failure sound when doNotDisturb true", 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(navigator.mozLoop.getAudioBlob);
sinon.assert.notCalled(fakeAudio.play); sinon.assert.notCalled(fakeAudio.play);
}); });
it("should play a failure sound, once", function() { it("should play a failure sound, once", function() {
navigator.mozLoop.doNotDisturb = false; navigator.mozLoop.doNotDisturb = false;
view = TestUtils.renderIntoDocument(TestComp()); view = TestUtils.renderIntoDocument(React.createElement(TestComp));
sinon.assert.calledOnce(navigator.mozLoop.getAudioBlob); sinon.assert.calledOnce(navigator.mozLoop.getAudioBlob);
sinon.assert.calledWithExactly(navigator.mozLoop.getAudioBlob, sinon.assert.calledWithExactly(navigator.mozLoop.getAudioBlob,
"failure", sinon.match.func); "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"); sandbox.stub(renderedComp, "play");
return renderedComp; 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() { describe("MediaControlButton", function() {
it("should render an enabled local audio button", function() { it("should render an enabled local audio button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({ var comp = TestUtils.renderIntoDocument(
scope: "local", React.createElement(sharedViews.MediaControlButton, {
type: "audio", scope: "local",
action: function(){}, type: "audio",
enabled: true action: function(){},
})); enabled: true
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(false); expect(comp.getDOMNode().classList.contains("muted")).eql(false);
}); });
it("should render a muted local audio button", function() { it("should render a muted local audio button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({ var comp = TestUtils.renderIntoDocument(
scope: "local", React.createElement(sharedViews.MediaControlButton, {
type: "audio", scope: "local",
action: function(){}, type: "audio",
enabled: false action: function(){},
})); enabled: false
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(true); expect(comp.getDOMNode().classList.contains("muted")).eql(true);
}); });
it("should render an enabled local video button", function() { it("should render an enabled local video button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({ var comp = TestUtils.renderIntoDocument(
scope: "local", React.createElement(sharedViews.MediaControlButton, {
type: "video", scope: "local",
action: function(){}, type: "video",
enabled: true action: function(){},
})); enabled: true
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(false); expect(comp.getDOMNode().classList.contains("muted")).eql(false);
}); });
it("should render a muted local video button", function() { it("should render a muted local video button", function() {
var comp = TestUtils.renderIntoDocument(sharedViews.MediaControlButton({ var comp = TestUtils.renderIntoDocument(
scope: "local", React.createElement(sharedViews.MediaControlButton, {
type: "video", scope: "local",
action: function(){}, type: "video",
enabled: false action: function(){},
})); enabled: false
}));
expect(comp.getDOMNode().classList.contains("muted")).eql(true); expect(comp.getDOMNode().classList.contains("muted")).eql(true);
}); });
@@ -93,7 +97,7 @@ describe("loop.shared.views", function() {
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument( return TestUtils.renderIntoDocument(
sharedViews.ConversationToolbar(props)); React.createElement(sharedViews.ConversationToolbar, props));
} }
beforeEach(function() { beforeEach(function() {
@@ -198,7 +202,8 @@ describe("loop.shared.views", function() {
var fakeSDK, fakeSessionData, fakeSession, fakePublisher, model, fakeAudio; var fakeSDK, fakeSessionData, fakeSession, fakePublisher, model, fakeAudio;
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument(sharedViews.ConversationView(props)); return TestUtils.renderIntoDocument(
React.createElement(sharedViews.ConversationView, props));
} }
beforeEach(function() { beforeEach(function() {
@@ -530,7 +535,8 @@ describe("loop.shared.views", function() {
var coll, view, testNotif; var coll, view, testNotif;
function mountTestComponent(props) { function mountTestComponent(props) {
return TestUtils.renderIntoDocument(sharedViews.NotificationListView(props)); return TestUtils.renderIntoDocument(
React.createElement(sharedViews.NotificationListView, props));
} }
beforeEach(function() { beforeEach(function() {

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

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

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

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

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

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