wine/gecko
0
0
Fork 0
mirror of https://gitlab.winehq.org/wine/wine-gecko.git synced 2024-09-13 09:24:08 -07:00
Code Issues Packages Projects Releases Wiki Activity

Bug 1212083 - Part 1. Remove the direct calls UI from Loop. r=mikedeboer

Browse Source
This commit is contained in:
Mark Banner 2015-10-09 12:14:44 +01:00
parent 85a43a7fe6
commit 24b18f5c05
30 changed files with 107 additions and 1142 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
browser/app/profile/firefox.js
View File

@ -1707,7 +1707,6 @@ pref("loop.feedback.baseUrl", "https://input.mozilla.org/api/v1/feedback");
pref("loop.feedback.product", "Loop");
pref("loop.debug.loglevel", "Error");
pref("loop.debug.dispatcher", false);
pref("loop.debug.websocket", false);
pref("loop.debug.sdk", false);
pref("loop.debug.twoWayMediaTelemetry", false);
pref("loop.feedback.dateLastSeenSec", 0);

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

@ -31,7 +31,6 @@
<script type="text/javascript" src="loop/shared/js/dispatcher.js"></script>
<script type="text/javascript" src="loop/shared/js/otSdkDriver.js"></script>
<script type="text/javascript" src="loop/shared/js/store.js"></script>
<script type="text/javascript" src="loop/shared/js/conversationStore.js"></script>
<script type="text/javascript" src="loop/shared/js/activeRoomStore.js"></script>
<script type="text/javascript" src="loop/shared/js/views.js"></script>
<script type="text/javascript" src="loop/js/feedbackViews.js"></script>
@ -39,11 +38,7 @@
<script type="text/javascript" src="loop/shared/js/textChatView.js"></script>
<script type="text/javascript" src="loop/shared/js/linkifiedTextView.js"></script>
<script type="text/javascript" src="loop/shared/js/urlRegExps.js"></script>
<script type="text/javascript" src="loop/js/conversationViews.js"></script>
<script type="text/javascript" src="loop/shared/js/websocket.js"></script>
<script type="text/javascript" src="loop/js/conversationAppStore.js"></script>
<script type="text/javascript" src="loop/js/client.js"></script>
<script type="text/javascript" src="loop/js/conversationViews.js"></script>
<script type="text/javascript" src="loop/js/roomStore.js"></script>
<script type="text/javascript" src="loop/js/roomViews.js"></script>
<script type="text/javascript" src="loop/js/conversation.js"></script>

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

@ -8,11 +8,11 @@ loop.conversation = (function(mozL10n) {
var sharedMixins = loop.shared.mixins;
var sharedActions = loop.shared.actions;
var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
var CallControllerView = loop.conversationViews.CallControllerView;
var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
var FeedbackView = loop.feedbackViews.FeedbackView;
var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
var RoomFailureView = loop.roomViews.RoomFailureView;
/**
* Master controller view for handling if incoming or outgoing calls are
@ -68,15 +68,6 @@ loop.conversation = (function(mozL10n) {
}
switch(this.state.windowType) {
// CallControllerView is used for both.
case "incoming":
case "outgoing": {
return (React.createElement(CallControllerView, {
chatWindowDetached: this.state.chatWindowDetached,
dispatcher: this.props.dispatcher,
mozLoop: this.props.mozLoop,
onCallTerminated: this.handleCallTerminated}));
}
case "room": {
return (React.createElement(DesktopRoomConversationView, {
chatWindowDetached: this.state.chatWindowDetached,
@ -86,11 +77,10 @@ loop.conversation = (function(mozL10n) {
roomStore: this.props.roomStore}));
}
case "failed": {
return (React.createElement(DirectCallFailureView, {
contact: {},
return (React.createElement(RoomFailureView, {
dispatcher: this.props.dispatcher,
mozLoop: this.props.mozLoop,
outgoing: false}));
failureReason: FAILURE_DETAILS.UNKNOWN,
mozLoop: this.props.mozLoop}));
}
default: {
// If we don't have a windowType, we don't know what we are yet,
@ -127,7 +117,6 @@ loop.conversation = (function(mozL10n) {
var useDataChannels = loop.shared.utils.getBoolPreference("textChat.enabled");
var dispatcher = new loop.Dispatcher();
var client = new loop.Client();
var sdkDriver = new loop.OTSdkDriver({
isDesktop: true,
useDataChannels: useDataChannels,
@ -140,12 +129,6 @@ loop.conversation = (function(mozL10n) {
loop.conversation._sdkDriver = sdkDriver;
// Create the stores.
var conversationStore = new loop.store.ConversationStore(dispatcher, {
client: client,
isDesktop: true,
mozLoop: navigator.mozLoop,
sdkDriver: sdkDriver
});
var activeRoomStore = new loop.store.ActiveRoomStore(dispatcher, {
isDesktop: true,
mozLoop: navigator.mozLoop,
@ -166,7 +149,6 @@ loop.conversation = (function(mozL10n) {
loop.store.StoreMixin.register({
conversationAppStore: conversationAppStore,
conversationStore: conversationStore,
textChatStore: textChatStore
});

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

@ -8,11 +8,11 @@ loop.conversation = (function(mozL10n) {
var sharedMixins = loop.shared.mixins;
var sharedActions = loop.shared.actions;
var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
var CallControllerView = loop.conversationViews.CallControllerView;
var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
var FeedbackView = loop.feedbackViews.FeedbackView;
var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
var RoomFailureView = loop.roomViews.RoomFailureView;
/**
* Master controller view for handling if incoming or outgoing calls are
@ -68,15 +68,6 @@ loop.conversation = (function(mozL10n) {
}
switch(this.state.windowType) {
// CallControllerView is used for both.
case "incoming":
case "outgoing": {
return (<CallControllerView
chatWindowDetached={this.state.chatWindowDetached}
dispatcher={this.props.dispatcher}
mozLoop={this.props.mozLoop}
onCallTerminated={this.handleCallTerminated} />);
}
case "room": {
return (<DesktopRoomConversationView
chatWindowDetached={this.state.chatWindowDetached}
@ -86,11 +77,10 @@ loop.conversation = (function(mozL10n) {
roomStore={this.props.roomStore} />);
}
case "failed": {
return (<DirectCallFailureView
contact={{}}
return (<RoomFailureView
dispatcher={this.props.dispatcher}
mozLoop={this.props.mozLoop}
outgoing={false} />);
failureReason={FAILURE_DETAILS.UNKNOWN}
mozLoop={this.props.mozLoop} />);
}
default: {
// If we don't have a windowType, we don't know what we are yet,
@ -127,7 +117,6 @@ loop.conversation = (function(mozL10n) {
var useDataChannels = loop.shared.utils.getBoolPreference("textChat.enabled");
var dispatcher = new loop.Dispatcher();
var client = new loop.Client();
var sdkDriver = new loop.OTSdkDriver({
isDesktop: true,
useDataChannels: useDataChannels,
@ -140,12 +129,6 @@ loop.conversation = (function(mozL10n) {
loop.conversation._sdkDriver = sdkDriver;
// Create the stores.
var conversationStore = new loop.store.ConversationStore(dispatcher, {
client: client,
isDesktop: true,
mozLoop: navigator.mozLoop,
sdkDriver: sdkDriver
});
var activeRoomStore = new loop.store.ActiveRoomStore(dispatcher, {
isDesktop: true,
mozLoop: navigator.mozLoop,
@ -166,7 +149,6 @@ loop.conversation = (function(mozL10n) {
loop.store.StoreMixin.register({
conversationAppStore: conversationAppStore,
conversationStore: conversationStore,
textChatStore: textChatStore
});

4
browser/components/loop/content/js/conversationAppStore.js
View File

@ -142,10 +142,6 @@ loop.store.ConversationAppStore = (function() {
*/
LoopHangupNowHandler: function() {
switch (this.getStoreState().windowType) {
case "incoming":
case "outgoing":
this._dispatcher.dispatch(new loop.shared.actions.HangupCall());
break;
case "room":
if (this._activeRoomStore.getStoreState().used &&
!this._storeState.showFeedbackForm) {

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

@ -372,71 +372,6 @@ loop.conversationViews = (function(mozL10n) {
}
});
/**
* Used to display errors in direct calls and rooms to the user.
*/
var FailureInfoView = React.createClass({displayName: "FailureInfoView",
propTypes: {
contact: React.PropTypes.object,
extraFailureMessage: React.PropTypes.string,
extraMessage: React.PropTypes.string,
failureReason: React.PropTypes.string.isRequired
},
/**
* Returns the translated message appropraite to the failure reason.
*
* @return {String} The translated message for the failure reason.
*/
_getMessage: function() {
switch (this.props.failureReason) {
case FAILURE_DETAILS.USER_UNAVAILABLE:
var contactDisplayName = _getContactDisplayName(this.props.contact);
if (contactDisplayName.length) {
return mozL10n.get(
"contact_unavailable_title",
{"contactName": contactDisplayName});
}
return mozL10n.get("generic_contact_unavailable_title");
case FAILURE_DETAILS.NO_MEDIA:
case FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA:
return mozL10n.get("no_media_failure_message");
case FAILURE_DETAILS.TOS_FAILURE:
return mozL10n.get("tos_failure_message",
{ clientShortname: mozL10n.get("clientShortname2") });
case FAILURE_DETAILS.ICE_FAILED:
return mozL10n.get("ice_failure_message");
default:
return mozL10n.get("generic_failure_message");
}
},
_renderExtraMessage: function() {
if (this.props.extraMessage) {
return React.createElement("p", {className: "failure-info-extra"}, this.props.extraMessage);
}
return null;
},
_renderExtraFailureMessage: function() {
if (this.props.extraFailureMessage) {
return React.createElement("p", {className: "failure-info-extra-failure"}, this.props.extraFailureMessage);
}
return null;
},
render: function() {
return (
React.createElement("div", {className: "failure-info"},
React.createElement("div", {className: "failure-info-logo"}),
React.createElement("h2", {className: "failure-info-message"}, this._getMessage()),
this._renderExtraMessage(),
this._renderExtraFailureMessage()
)
);
}
});
/**
* Direct Call failure view. Displayed when a call fails.
*/

65
browser/components/loop/content/js/conversationViews.jsx
View File

@ -372,71 +372,6 @@ loop.conversationViews = (function(mozL10n) {
}
});
/**
* Used to display errors in direct calls and rooms to the user.
*/
var FailureInfoView = React.createClass({
propTypes: {
contact: React.PropTypes.object,
extraFailureMessage: React.PropTypes.string,
extraMessage: React.PropTypes.string,
failureReason: React.PropTypes.string.isRequired
},
/**
* Returns the translated message appropraite to the failure reason.
*
* @return {String} The translated message for the failure reason.
*/
_getMessage: function() {
switch (this.props.failureReason) {
case FAILURE_DETAILS.USER_UNAVAILABLE:
var contactDisplayName = _getContactDisplayName(this.props.contact);
if (contactDisplayName.length) {
return mozL10n.get(
"contact_unavailable_title",
{"contactName": contactDisplayName});
}
return mozL10n.get("generic_contact_unavailable_title");
case FAILURE_DETAILS.NO_MEDIA:
case FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA:
return mozL10n.get("no_media_failure_message");
case FAILURE_DETAILS.TOS_FAILURE:
return mozL10n.get("tos_failure_message",
{ clientShortname: mozL10n.get("clientShortname2") });
case FAILURE_DETAILS.ICE_FAILED:
return mozL10n.get("ice_failure_message");
default:
return mozL10n.get("generic_failure_message");
}
},
_renderExtraMessage: function() {
if (this.props.extraMessage) {
return <p className="failure-info-extra">{this.props.extraMessage}</p>;
}
return null;
},
_renderExtraFailureMessage: function() {
if (this.props.extraFailureMessage) {
return <p className="failure-info-extra-failure">{this.props.extraFailureMessage}</p>;
}
return null;
},
render: function() {
return (
<div className="failure-info">
<div className="failure-info-logo" />
<h2 className="failure-info-message">{this._getMessage()}</h2>
{this._renderExtraMessage()}
{this._renderExtraFailureMessage()}
</div>
);
}
});
/**
* Direct Call failure view. Displayed when a call fails.
*/

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

@ -75,6 +75,44 @@ loop.roomViews = (function(mozL10n) {
}
};
/**
* Used to display errors in direct calls and rooms to the user.
*/
var FailureInfoView = React.createClass({displayName: "FailureInfoView",
propTypes: {
failureReason: React.PropTypes.string.isRequired
},
/**
* Returns the translated message appropraite to the failure reason.
*
* @return {String} The translated message for the failure reason.
*/
_getMessage: function() {
switch (this.props.failureReason) {
case FAILURE_DETAILS.NO_MEDIA:
case FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA:
return mozL10n.get("no_media_failure_message");
case FAILURE_DETAILS.TOS_FAILURE:
return mozL10n.get("tos_failure_message",
{ clientShortname: mozL10n.get("clientShortname2") });
case FAILURE_DETAILS.ICE_FAILED:
return mozL10n.get("ice_failure_message");
default:
return mozL10n.get("generic_failure_message");
}
},
render: function() {
return (
React.createElement("div", {className: "failure-info"},
React.createElement("div", {className: "failure-info-logo"}),
React.createElement("h2", {className: "failure-info-message"}, this._getMessage())
)
);
}
});
/**
* Something went wrong view. Displayed when there's a big problem.
*/
@ -110,8 +148,7 @@ loop.roomViews = (function(mozL10n) {
return (
React.createElement("div", {className: "room-failure"},
React.createElement(loop.conversationViews.FailureInfoView, {
failureReason: this.props.failureReason}),
React.createElement(FailureInfoView, {failureReason: this.props.failureReason}),
React.createElement("div", {className: "btn-group call-action-group"},
React.createElement("button", {className: "btn btn-info btn-rejoin",
onClick: this.handleRejoinCall},
@ -820,6 +857,7 @@ loop.roomViews = (function(mozL10n) {
return {
ActiveRoomStoreMixin: ActiveRoomStoreMixin,
FailureInfoView: FailureInfoView,
RoomFailureView: RoomFailureView,
SocialShareDropdown: SocialShareDropdown,
DesktopRoomEditContextView: DesktopRoomEditContextView,

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

@ -75,6 +75,44 @@ loop.roomViews = (function(mozL10n) {
}
};
/**
* Used to display errors in direct calls and rooms to the user.
*/
var FailureInfoView = React.createClass({
propTypes: {
failureReason: React.PropTypes.string.isRequired
},
/**
* Returns the translated message appropraite to the failure reason.
*
* @return {String} The translated message for the failure reason.
*/
_getMessage: function() {
switch (this.props.failureReason) {
case FAILURE_DETAILS.NO_MEDIA:
case FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA:
return mozL10n.get("no_media_failure_message");
case FAILURE_DETAILS.TOS_FAILURE:
return mozL10n.get("tos_failure_message",
{ clientShortname: mozL10n.get("clientShortname2") });
case FAILURE_DETAILS.ICE_FAILED:
return mozL10n.get("ice_failure_message");
default:
return mozL10n.get("generic_failure_message");
}
},
render: function() {
return (
<div className="failure-info">
<div className="failure-info-logo" />
<h2 className="failure-info-message">{this._getMessage()}</h2>
</div>
);
}
});
/**
* Something went wrong view. Displayed when there's a big problem.
*/
@ -110,8 +148,7 @@ loop.roomViews = (function(mozL10n) {
return (
<div className="room-failure">
<loop.conversationViews.FailureInfoView
failureReason={this.props.failureReason} />
<FailureInfoView failureReason={this.props.failureReason} />
<div className="btn-group call-action-group">
<button className="btn btn-info btn-rejoin"
onClick={this.handleRejoinCall}>
@ -820,6 +857,7 @@ loop.roomViews = (function(mozL10n) {
return {
ActiveRoomStoreMixin: ActiveRoomStoreMixin,
FailureInfoView: FailureInfoView,
RoomFailureView: RoomFailureView,
SocialShareDropdown: SocialShareDropdown,
DesktopRoomEditContextView: DesktopRoomEditContextView,

106
browser/components/loop/content/shared/css/common.css
View File

@ -197,22 +197,19 @@ p {
}
.btn-accept,
.btn-success,
.btn-accept + .btn-chevron {
.btn-success {
background-color: #56b397;
border: 1px solid #56b397;
}
.btn-accept:hover,
.btn-success:hover,
.btn-accept + .btn-chevron:hover {
.btn-success:hover {
background-color: #50e3c2;
border: 1px solid #50e3c2;
}
.btn-accept:active,
.btn-success:active,
.btn-accept + .btn-chevron:active {
.btn-success:active {
background-color: #3aa689;
border: 1px solid #3aa689;
}
@ -221,81 +218,24 @@ p {
background-color: #f0ad4e;
}
.btn-cancel,
.btn-error,
.btn-decline,
.btn-hangup,
.btn-decline + .btn-chevron,
.btn-error + .btn-chevron {
.btn-hangup {
background-color: #d74345;
border: 1px solid #d74345;
}
.btn-cancel:hover,
.btn-error:hover,
.btn-decline:hover,
.btn-hangup:hover,
.btn-decline + .btn-chevron:hover,
.btn-error + .btn-chevron:hover {
.btn-hangup:hover {
background-color: #c53436;
border-color: #c53436;
}
.btn-cancel:active,
.btn-error:active,
.btn-decline:active,
.btn-hangup:active,
.btn-decline + .btn-chevron:active,
.btn-error + .btn-chevron:active {
.btn-hangup:active {
background-color: #ae2325;
border-color: #ae2325;
}
.btn-chevron {
width: 26px;
height: 26px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
/* Groups together a button and a chevron */
.btn-group-chevron {
display: flex;
flex-direction: column;
flex: 1;
}
/* Groups together a button-group-chevron
* and the dropdown menu */
.btn-chevron-menu-group {
display: flex;
justify-content: space-between;
flex: 8;
}
.btn-group-chevron .btn {
border-radius: 2px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
flex: 2;
}
.btn + .btn-chevron,
.btn + .btn-chevron:hover,
.btn + .btn-chevron:active {
border-left: 1px solid rgba(255,255,255,.4);
background-image: url("../img/dropdown-inverse.png");
background-repeat: no-repeat;
background-position: center;
background-size: 10px;
}
@media (min-resolution: 2dppx) {
.btn-chevron {
background-image: url(../img/dropdown-inverse@2x.png);
}
}
.disabled, button[disabled] {
cursor: not-allowed;
pointer-events: none;
@ -308,14 +248,6 @@ p {
justify-content: center;
}
.btn-chevron-menu-group .btn {
flex: 1;
border-radius: 2px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
line-height: 0.9rem;
}
/* Alerts/Notifications */
.notificationContainer {
border-bottom: 2px solid #E9E9E9;
@ -371,9 +303,7 @@ p {
/* Misc */
.call-url,
.overflow-text-ellipsis,
.standalone-call-btn-text,
.fx-embedded-answer-btn-text {
.standalone-call-btn-text {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
@ -409,9 +339,7 @@ p {
}
.icon,
.icon-small,
.icon-audio,
.icon-video {
.icon-small {
background-size: 20px;
background-repeat: no-repeat;
vertical-align: top;
@ -432,24 +360,6 @@ p {
background-size: 10px;
}
.icon-video {
background-image: url("../img/video-inverse-14x14.png");
}
.icon-audio {
background-image: url("../img/audio-default-16x16@1.5x.png");
}
@media (min-resolution: 2dppx) {
.icon-video {
background-image: url("../img/video-inverse-14x14@2x.png");
}
.icon-audio {
background-image: url("../img/audio-default-16x16@2x.png");
}
}
/*
* Platform specific styles
* The UI should match the user OS

186
browser/components/loop/content/shared/css/conversation.css
View File

@ -103,57 +103,8 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
float: left;
}
.fx-embedded-answer-btn-text {
/* always leave space for the icon (width and margin) */
max-width: calc(100% - 24px - .2rem);
height: 22px;
line-height: 22px;
}
.fx-embedded-btn-icon-video,
.fx-embedded-btn-icon-audio {
width: 24px;
height: 24px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: 14px 14px;
border-radius: 50%;
-moz-margin-start: .2rem;
}
/* conversationViews.jsx */
.fx-embedded-btn-icon-video,
.fx-embedded-btn-video-small,
.fx-embedded-tiny-video-icon {
background-image: url("../img/video-inverse-14x14.png");
}
.fx-embedded-btn-icon-audio,
.fx-embedded-btn-audio-small,
.fx-embedded-tiny-audio-icon {
background-image: url("../img/audio-inverse-14x14.png");
}
.fx-embedded-btn-audio-small,
.fx-embedded-btn-video-small {
width: 26px;
height: 26px;
border-left: 1px solid rgba(255,255,255,.4);
background-color: #56b397;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.fx-embedded-btn-video-small:hover,
.fx-embedded-btn-audio-small:hover {
background-color: #50e3c2;
}
.conversation-toolbar .btn-hangup {
background-image: url("../img/svg/exit.svg");
border: 0;
@ -229,23 +180,6 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
/* General Call (incoming or outgoing). */
/* XXX call-window currently relates to multiple things like the AcceptCallView,
DirectCallFailureView, PendingConversationView. It doesn't relate to the direct
call media views. We should probably make this more explicit at some stage. */
/*
* Height matches the height of the docked window
* but the UI breaks when you pop out
* Bug 1040985
*/
.call-window {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
min-height: 230px;
}
.call-action-group {
display: flex;
padding: 0 4px;
@ -310,7 +244,6 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
display: block;
}
.direct-call-failure,
.room-failure {
/* This flex allows us to not calculate the height of the logo area
versus the buttons */
@ -322,25 +255,21 @@ html[dir="rtl"] .conversation-toolbar-btn-box.btn-edit-entry {
height: 100%;
}
.direct-call-failure > .call-action-group,
.room-failure > .call-action-group {
flex: none;
margin: 1rem 0 2rem;
}
.direct-call-failure > .failure-info,
.room-failure > .failure-info {
flex: auto;
}
.direct-call-failure > .settings-control,
.room-failure > .settings-control {
position: absolute;
top: 1rem;
right: .5rem;
}
html[dir="rtl"] .direct-call-failure > .settings-control,
html[dir="rtl"] .room-failure > .settings-control {
left: .5rem;
right: auto;
@ -390,51 +319,6 @@ html[dir="rtl"] .room-failure > .settings-control {
color: #f00;
}
.fx-embedded-call-button-spacer {
display: flex;
flex: 1;
}
/*
* Dropdown menu hidden behind a chevron
*
* .native-dropdown-menu Generic class, contains common styles
* .conversation-window-dropdown Dropdown menu for answer/decline/block options
*/
.native-dropdown-menu {
/* Should match a native select menu */
padding: 0;
position: absolute; /* element can be wider than the parent */
background: #fff;
margin: 0;
box-shadow: 0 4px 5px rgba(30,30,30,.3);
border-style: solid;
border-width: 1px 1px 1px 2px;
border-color: #aaa #111 #111 #aaa;
}
.native-dropdown-menu li {
list-style: none;
cursor: pointer;
color: #000;
}
.native-dropdown-menu li:hover {
color: #fff;
background-color: #111;
}
.conversation-window-dropdown {
bottom: 4rem;
}
.conversation-window-dropdown > li {
padding: .2rem;
font-size: 1rem;
white-space: nowrap;
}
.screen-share-menu.dropdown-menu,
.settings-menu.dropdown-menu {
bottom: 3.1rem;
@ -567,79 +451,11 @@ html[dir="rtl"] .settings-menu.dropdown-menu {
opacity: 0.25;
}
.fx-embedded-call-identifier {
display: inline;
width: 100%;
padding: 1.2em;
}
.fx-embedded-call-identifier-item {
height: 50px;
}
.fx-embedded-call-identifier-avatar {
max-width: 50px;
min-width: 50px;
background: #ccc;
border-radius: 50%;
background-image: url("../img/audio-call-avatar.svg");
background-repeat: no-repeat;
background-color: #4ba6e7;
background-size: contain;
overflow: hidden;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
float: left;
-moz-margin-end: 1em;
}
.fx-embedded-call-identifier-text {
font-weight: bold;
}
.fx-embedded-call-identifier-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
-moz-margin-start: 1em;
}
.fx-embedded-conversation-timestamp {
font-size: .6rem;
line-height: 17px;
display: inline-block;
vertical-align: top;
}
.fx-embedded-call-detail {
padding-top: 0.6em;
}
.fx-embedded-tiny-video-icon {
margin: 0 .8em;
}
.fx-embedded-tiny-audio-icon,
.fx-embedded-tiny-video-icon {
width: 24px;
height: 24px;
background-color: #00a9dc;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
}
.fx-embedded-tiny-video-icon.muted {
background-color: rgba(0,0,0,.2)
}
/* Force full height on all parents up to the video elements
* this way we can ensure the aspect ratio and use height 100%
* on the video element
* */
html, .fx-embedded, #main,
.desktop-call-wrapper,
.desktop-room-wrapper {
height: 100%;
}
@ -943,7 +759,6 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
height: calc(100% - 300px);
}
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
height: calc(100% - 150px);
}
@ -1070,7 +885,6 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
}
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
/* This is temp, to echo the .media-wrapper > .text-chat-view above */
height: 30%;

11
browser/components/loop/content/shared/js/utils.js
View File

@ -62,16 +62,6 @@ var inChrome = typeof Components != "undefined" && "utils" in Components;
ROOM_FULL: 202
};
var WEBSOCKET_REASONS = {
ANSWERED_ELSEWHERE: "answered-elsewhere",
BUSY: "busy",
CANCEL: "cancel",
CLOSED: "closed",
MEDIA_FAIL: "media-fail",
REJECT: "reject",
TIMEOUT: "timeout"
};
var FAILURE_DETAILS = {
MEDIA_DENIED: "reason-media-denied",
NO_MEDIA: "reason-no-media",
@ -786,7 +776,6 @@ var inChrome = typeof Components != "undefined" && "utils" in Components;
CHAT_CONTENT_TYPES: CHAT_CONTENT_TYPES,
FAILURE_DETAILS: FAILURE_DETAILS,
REST_ERRNOS: REST_ERRNOS,
WEBSOCKET_REASONS: WEBSOCKET_REASONS,
STREAM_PROPERTIES: STREAM_PROPERTIES,
SCREEN_SHARE_STATES: SCREEN_SHARE_STATES,
ROOM_INFO_FAILURES: ROOM_INFO_FAILURES,

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

@ -1118,7 +1118,6 @@ loop.shared.views = (function(_, mozL10n) {
this.state.localMediaAboslutelyPositioned ?
this.renderLocalVideo() : null,
this.props.children
),
React.createElement("div", {className: screenShareStreamClasses},
React.createElement(MediaView, {displayAvatar: false,

1
browser/components/loop/content/shared/js/views.jsx
View File

@ -1118,7 +1118,6 @@ loop.shared.views = (function(_, mozL10n) {
{ this.state.localMediaAboslutelyPositioned ?
this.renderLocalVideo() : null }
{ this.props.children }
</div>
<div className={screenShareStreamClasses}>
<MediaView displayAvatar={false}

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

@ -11,13 +11,11 @@ browser.jar:
content/browser/loop/libs/l10n.js (content/libs/l10n.js)
# Desktop script
content/browser/loop/js/client.js (content/js/client.js)
content/browser/loop/js/conversation.js (content/js/conversation.js)
content/browser/loop/js/conversationAppStore.js (content/js/conversationAppStore.js)
content/browser/loop/js/otconfig.js (content/js/otconfig.js)
content/browser/loop/js/panel.js (content/js/panel.js)
content/browser/loop/js/contacts.js (content/js/contacts.js)
content/browser/loop/js/conversationViews.js (content/js/conversationViews.js)
content/browser/loop/js/roomStore.js (content/js/roomStore.js)
content/browser/loop/js/roomViews.js (content/js/roomViews.js)
content/browser/loop/js/feedbackViews.js (content/js/feedbackViews.js)
@ -43,18 +41,12 @@ browser.jar:
content/browser/loop/shared/img/sad_hello_icon_64x64.svg (content/shared/img/sad_hello_icon_64x64.svg)
content/browser/loop/shared/img/chatbubble-arrow-left.svg (content/shared/img/chatbubble-arrow-left.svg)
content/browser/loop/shared/img/chatbubble-arrow-right.svg (content/shared/img/chatbubble-arrow-right.svg)
content/browser/loop/shared/img/audio-inverse-14x14.png (content/shared/img/audio-inverse-14x14.png)
content/browser/loop/shared/img/audio-inverse-14x14@2x.png (content/shared/img/audio-inverse-14x14@2x.png)
content/browser/loop/shared/img/facemute-14x14.png (content/shared/img/facemute-14x14.png)
content/browser/loop/shared/img/facemute-14x14@2x.png (content/shared/img/facemute-14x14@2x.png)
content/browser/loop/shared/img/hangup-inverse-14x14.png (content/shared/img/hangup-inverse-14x14.png)
content/browser/loop/shared/img/hangup-inverse-14x14@2x.png (content/shared/img/hangup-inverse-14x14@2x.png)
content/browser/loop/shared/img/mute-inverse-14x14.png (content/shared/img/mute-inverse-14x14.png)
content/browser/loop/shared/img/mute-inverse-14x14@2x.png (content/shared/img/mute-inverse-14x14@2x.png)
content/browser/loop/shared/img/video-inverse-14x14.png (content/shared/img/video-inverse-14x14.png)
content/browser/loop/shared/img/video-inverse-14x14@2x.png (content/shared/img/video-inverse-14x14@2x.png)
content/browser/loop/shared/img/dropdown-inverse.png (content/shared/img/dropdown-inverse.png)
content/browser/loop/shared/img/dropdown-inverse@2x.png (content/shared/img/dropdown-inverse@2x.png)
content/browser/loop/shared/img/svg/glyph-email-16x16.svg (content/shared/img/svg/glyph-email-16x16.svg)
content/browser/loop/shared/img/svg/glyph-facebook-16x16.svg (content/shared/img/svg/glyph-facebook-16x16.svg)
content/browser/loop/shared/img/svg/glyph-help-16x16.svg (content/shared/img/svg/glyph-help-16x16.svg)
@ -103,7 +95,6 @@ browser.jar:
# Shared scripts
content/browser/loop/shared/js/actions.js (content/shared/js/actions.js)
content/browser/loop/shared/js/conversationStore.js (content/shared/js/conversationStore.js)
content/browser/loop/shared/js/store.js (content/shared/js/store.js)
content/browser/loop/shared/js/activeRoomStore.js (content/shared/js/activeRoomStore.js)
content/browser/loop/shared/js/dispatcher.js (content/shared/js/dispatcher.js)
@ -117,7 +108,6 @@ browser.jar:
content/browser/loop/shared/js/urlRegExps.js (content/shared/js/urlRegExps.js)
content/browser/loop/shared/js/utils.js (content/shared/js/utils.js)
content/browser/loop/shared/js/validate.js (content/shared/js/validate.js)
content/browser/loop/shared/js/websocket.js (content/shared/js/websocket.js)
# Shared libs
#ifdef DEBUG

4
browser/components/loop/standalone/content/l10n/en-US/loop.properties
View File

@ -1,7 +1,6 @@
## LOCALIZATION NOTE: In this file, don't translate the part between {{..}}
conversation_has_ended=Your conversation has ended.
generic_failure_message=We're having technical difficulties…
generic_failure_with_reason2=You can try again or email a link to be reached at later.
generic_failure_no_reason2=Would you like to try again?
## LOCALIZATION NOTE (tos_failure_message): Don't translate {{clientShortname2}}
## as this will be replaced by the shortname.
@ -29,7 +28,6 @@ unsupported_platform_blackberry=Blackberry
unsupported_platform_learn_more_link=Learn more about why your platform doesn't support {{clientShortname}}
promote_firefox_hello_heading=Download {{brandShortname}} to make free audio and video calls!
get_firefox_button=Get {{brandShortname}}
initiate_call_cancel_button=Cancel
legal_text_and_links=By using {{clientShortname}} you agree to the {{terms_of_use_url}} and {{privacy_notice_url}}.
terms_of_use_link_text=Terms of use
privacy_notice_link_text=Privacy notice
@ -47,8 +45,6 @@ clientShortname2=Firefox Hello
vendorShortname=Mozilla
call_progress_getting_media_description={{clientShortname}} requires access to your camera and microphone.
call_progress_connecting_description=Connecting…
call_progress_ringing_description=Ringing…
help_label=Help

1
browser/components/loop/standalone/content/webappEntryPoint.js
View File

@ -40,7 +40,6 @@ require("script!shared/js/mixins.js");
require("script!shared/js/actions.js");
require("script!shared/js/validate.js");
require("script!shared/js/dispatcher.js");
require("script!shared/js/websocket.js");
require("script!shared/js/otSdkDriver.js");
require("script!shared/js/store.js");
require("script!shared/js/activeRoomStore.js");

26
browser/components/loop/test/desktop-local/conversationAppStore_test.js
View File

@ -77,8 +77,8 @@ describe("loop.store.ConversationAppStore", function () {
beforeEach(function() {
fakeWindowData = {
type: "incoming",
callId: "123456"
type: "room",
roomToken: "123456"
};
fakeGetWindowData = {
@ -113,7 +113,7 @@ describe("loop.store.ConversationAppStore", function () {
it("should fetch the window type from the mozLoop API", function() {
store.getWindowData(new sharedActions.GetWindowData(fakeGetWindowData));
expect(store.getStoreState().windowType).eql("incoming");
expect(store.getStoreState().windowType).eql("room");
});
it("should have the feedback period in initial state", function() {
@ -219,26 +219,6 @@ describe("loop.store.ConversationAppStore", function () {
sandbox.stub(loop.shared.mixins.WindowCloseMixin, "closeWindow");
});
it("should dispatch the correct action for windowType 'incoming'", function() {
store.setStoreState({ windowType: "incoming" });
store.LoopHangupNowHandler();
sinon.assert.calledOnce(dispatcher.dispatch);
sinon.assert.calledWithExactly(dispatcher.dispatch, new sharedActions.HangupCall());
sinon.assert.notCalled(loop.shared.mixins.WindowCloseMixin.closeWindow);
});
it("should dispatch the correct action for windowType 'outgoing'", function() {
store.setStoreState({ windowType: "outgoing" });
store.LoopHangupNowHandler();
sinon.assert.calledOnce(dispatcher.dispatch);
sinon.assert.calledWithExactly(dispatcher.dispatch, new sharedActions.HangupCall());
sinon.assert.notCalled(loop.shared.mixins.WindowCloseMixin.closeWindow);
});
it("should dispatch the correct action when a room was used", function() {
store.setStoreState({ windowType: "room" });
roomUsed = true;

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

@ -136,7 +136,7 @@ describe("loop.conversation", function() {
});
describe("AppControllerView", function() {
var conversationStore, activeRoomStore, client, ccView, dispatcher;
var activeRoomStore, ccView, dispatcher;
var conversationAppStore, roomStore, feedbackPeriodMs = 15770000000;
var ROOM_STATES = loop.store.ROOM_STATES;
@ -150,23 +150,7 @@ describe("loop.conversation", function() {
}
beforeEach(function() {
client = new loop.Client();
dispatcher = new loop.Dispatcher();
conversationStore = new loop.store.ConversationStore(
dispatcher, {
client: client,
mozLoop: navigator.mozLoop,
sdkDriver: {}
});
conversationStore.setStoreState({contact: {
name: [ "Mr Smith" ],
email: [{
type: "home",
value: "fakeEmail",
pref: true
}]
}});
activeRoomStore = new loop.store.ActiveRoomStore(dispatcher, {
mozLoop: {},
@ -183,8 +167,7 @@ describe("loop.conversation", function() {
});
loop.store.StoreMixin.register({
conversationAppStore: conversationAppStore,
conversationStore: conversationStore
conversationAppStore: conversationAppStore
});
});
@ -192,24 +175,6 @@ describe("loop.conversation", function() {
ccView = undefined;
});
it("should display the CallControllerView for outgoing calls", function() {
conversationAppStore.setStoreState({windowType: "outgoing"});
ccView = mountTestComponent();
TestUtils.findRenderedComponentWithType(ccView,
loop.conversationViews.CallControllerView);
});
it("should display the CallControllerView for incoming calls", function() {
conversationAppStore.setStoreState({windowType: "incoming"});
ccView = mountTestComponent();
TestUtils.findRenderedComponentWithType(ccView,
loop.conversationViews.CallControllerView);
});
it("should display the RoomView for rooms", function() {
conversationAppStore.setStoreState({windowType: "room"});
activeRoomStore.setStoreState({roomState: ROOM_STATES.READY});
@ -220,20 +185,17 @@ describe("loop.conversation", function() {
loop.roomViews.DesktopRoomConversationView);
});
it("should display the DirectCallFailureView for failures", function() {
it("should display the RoomFailureView for failures", function() {
conversationAppStore.setStoreState({
contact: {},
outgoing: false,
windowType: "failed"
});
conversationStore.setStoreState({
callStateReason: FAILURE_DETAILS.UNKNOWN
});
ccView = mountTestComponent();
TestUtils.findRenderedComponentWithType(ccView,
loop.conversationViews.DirectCallFailureView);
loop.roomViews.RoomFailureView);
});
it("should set the correct title when rendering feedback view", function() {

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

@ -48,22 +48,18 @@
<script src="../../content/shared/js/utils.js"></script>
<script src="../../content/shared/js/models.js"></script>
<script src="../../content/shared/js/mixins.js"></script>
<script src="../../content/shared/js/websocket.js"></script>
<script src="../../content/shared/js/actions.js"></script>
<script src="../../content/shared/js/validate.js"></script>
<script src="../../content/shared/js/dispatcher.js"></script>
<script src="../../content/shared/js/otSdkDriver.js"></script>
<script src="../../content/shared/js/store.js"></script>
<script src="../../content/shared/js/conversationStore.js"></script>
<script src="../../content/shared/js/activeRoomStore.js"></script>
<script src="../../content/shared/js/views.js"></script>
<script src="../../content/shared/js/textChatStore.js"></script>
<script src="../../content/shared/js/textChatView.js"></script>
<script src="../../content/js/client.js"></script>
<script src="../../content/js/conversationAppStore.js"></script>
<script src="../../content/js/roomStore.js"></script>
<script src="../../content/js/roomViews.js"></script>
<script src="../../content/js/conversationViews.js"></script>
<script src="../../content/js/feedbackViews.js"></script>
<script src="../../content/js/conversation.js"></script>
<script type="text/javascript;version=1.8" src="../../content/js/contacts.js"></script>
@ -71,12 +67,10 @@
<!-- Test scripts -->
<script src="conversationAppStore_test.js"></script>
<script src="client_test.js"></script>
<script src="conversation_test.js"></script>
<script src="feedbackViews_test.js"></script>
<script src="panel_test.js"></script>
<script src="roomViews_test.js"></script>
<script src="conversationViews_test.js"></script>
<script src="contacts_test.js"></script>
<script src="l10n_test.js"></script>
<script src="roomStore_test.js"></script>

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

@ -162,7 +162,7 @@ describe("loop.roomViews", function () {
view = mountTestComponent();
TestUtils.findRenderedComponentWithType(view,
loop.conversationViews.FailureInfoView);
loop.roomViews.FailureInfoView);
});
it("should dispatch a JoinRoom action when the rejoin call button is pressed", function() {

4
browser/components/loop/test/karma/karma.coverage.desktop.js
View File

@ -19,23 +19,19 @@ module.exports = function(config) {
"content/shared/js/utils.js",
"content/shared/js/models.js",
"content/shared/js/mixins.js",
"content/shared/js/websocket.js",
"content/shared/js/actions.js",
"content/shared/js/otSdkDriver.js",
"content/shared/js/validate.js",
"content/shared/js/dispatcher.js",
"content/shared/js/store.js",
"content/shared/js/conversationStore.js",
"content/shared/js/activeRoomStore.js",
"content/shared/js/views.js",
"content/shared/js/textChatStore.js",
"content/shared/js/textChatView.js",
"content/js/feedbackViews.js",
"content/js/client.js",
"content/js/conversationAppStore.js",
"content/js/roomStore.js",
"content/js/roomViews.js",
"content/js/conversationViews.js",
"content/js/conversation.js",
"test/desktop-local/*.js"
]);

2
browser/components/loop/test/karma/karma.coverage.shared_standalone.js
View File

@ -22,13 +22,11 @@ module.exports = function(config) {
"content/shared/js/models.js",
"content/shared/js/mixins.js",
"content/shared/js/crypto.js",
"content/shared/js/websocket.js",
"content/shared/js/validate.js",
"content/shared/js/actions.js",
"content/shared/js/dispatcher.js",
"content/shared/js/otSdkDriver.js",
"content/shared/js/activeRoomStore.js",
"content/shared/js/conversationStore.js",
"content/shared/js/views.js",
"content/shared/js/textChatStore.js",
"content/shared/js/textChatView.js",

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

@ -50,7 +50,6 @@
<script src="../../content/shared/js/models.js"></script>
<script src="../../content/shared/js/mixins.js"></script>
<script src="../../content/shared/js/crypto.js"></script>
<script src="../../content/shared/js/websocket.js"></script>
<script src="../../content/shared/js/validate.js"></script>
<script src="../../content/shared/js/actions.js"></script>
<script src="../../content/shared/js/dispatcher.js"></script>
@ -58,7 +57,6 @@
<script src="../../content/shared/js/store.js"></script>
<script src="../../content/shared/js/roomStates.js"></script>
<script src="../../content/shared/js/activeRoomStore.js"></script>
<script src="../../content/shared/js/conversationStore.js"></script>
<script src="../../content/shared/js/views.js"></script>
<script src="../../content/shared/js/textChatStore.js"></script>
<script src="../../content/shared/js/textChatView.js"></script>
@ -71,11 +69,9 @@
<script src="utils_test.js"></script>
<script src="crypto_test.js"></script>
<script src="views_test.js"></script>
<script src="websocket_test.js"></script>
<script src="validate_test.js"></script>
<script src="dispatcher_test.js"></script>
<script src="activeRoomStore_test.js"></script>
<script src="conversationStore_test.js"></script>
<script src="otSdkDriver_test.js"></script>
<script src="store_test.js"></script>
<script src="textChatStore_test.js"></script>

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

@ -46,7 +46,6 @@
<!-- App scripts -->
<script src="../../content/shared/js/utils.js"></script>
<script src="../../content/shared/js/mixins.js"></script>
<script src="../../content/shared/js/websocket.js"></script>
<script src="../../content/shared/js/actions.js"></script>
<script src="../../content/shared/js/validate.js"></script>
<script src="../../content/shared/js/dispatcher.js"></script>

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

@ -36,11 +36,9 @@
<script src="../content/shared/js/utils.js"></script>
<script src="../content/shared/js/models.js"></script>
<script src="../content/shared/js/mixins.js"></script>
<script src="../content/shared/js/websocket.js"></script>
<script src="../content/shared/js/validate.js"></script>
<script src="../content/shared/js/dispatcher.js"></script>
<script src="../content/shared/js/store.js"></script>
<script src="../content/shared/js/conversationStore.js"></script>
<script src="../content/shared/js/activeRoomStore.js"></script>
<script src="../content/shared/js/views.js"></script>
<script src="../content/shared/js/textChatStore.js"></script>
@ -50,8 +48,6 @@
<script src="../content/shared/js/linkifiedTextView.js"></script>
<script src="../content/js/roomStore.js"></script>
<script src="../content/js/roomViews.js"></script>
<script src="../content/js/conversationViews.js"></script>
<script src="../content/js/client.js"></script>
<script src="../standalone/content/js/webapp.js"></script>
<script src="../standalone/content/js/standaloneRoomViews.js"></script>
<script type="text/javascript;version=1.8" src="../content/js/contacts.js"></script>

6
browser/components/loop/ui/ui-showcase.css
View File

@ -127,12 +127,6 @@ body {
font-weight: bold;
}
.call-action-group .btn-group-chevron,
.call-action-group .btn-group {
/* Prevent box overflow due to long string */
max-width: 120px;
}
.room-waiting-tile {
background-color: grey;
}

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

@ -23,10 +23,6 @@
var ContactDetail = loop.contacts.ContactDetail;
var GettingStartedView = loop.panel.GettingStartedView;
// 1.2. Conversation Window
var AcceptCallView = loop.conversationViews.AcceptCallView;
var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
var OngoingConversationView = loop.conversationViews.OngoingConversationView;
var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
var RoomFailureView = loop.roomViews.RoomFailureView;
var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
@ -338,63 +334,6 @@
sdkDriver: mockSDK
});
/**
* Every view that uses an conversationStore needs its own; if they shared
* a conversation store, they'd interfere with each other.
*
* @param options
* @returns {loop.store.ConversationStore}
*/
function makeConversationStore() {
var roomDispatcher = new loop.Dispatcher();
var store = new loop.store.ConversationStore(dispatcher, {
client: {},
mozLoop: navigator.mozLoop,
sdkDriver: mockSDK
});
store.forcedUpdate = function forcedUpdate(contentWindow) {
// Since this is called by setTimeout, we don't want to lose any
// exceptions if there's a problem and we need to debug, so...
try {
var newStoreState = {
// Override the matchMedia, this is so that the correct version is
// used for the frame.
//
// Currently, we use an icky hack, and the showcase conspires with
// react-frame-component to set iframe.contentWindow.matchMedia onto
// the store. Once React context matures a bit (somewhere between
// 0.14 and 1.0, apparently):
//
// https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#solution-make-context-parent-based-instead-of-owner-based
//
// we should be able to use those to clean this up.
matchMedia: contentWindow.matchMedia.bind(contentWindow)
};
store.setStoreState(newStoreState);
} catch (ex) {
console.error("exception in forcedUpdate:", ex);
}
};
return store;
}
var conversationStores = [];
for (var index = 0; index < 5; index++) {
conversationStores[index] = makeConversationStore();
}
conversationStores[0].setStoreState({
callStateReason: FAILURE_DETAILS.NO_MEDIA
});
conversationStores[1].setStoreState({
callStateReason: FAILURE_DETAILS.USER_UNAVAILABLE,
contact: fakeManyContacts[0]
});
// Update the text chat store with the room info.
textChatStore.updateRoomInfo(new sharedActions.UpdateRoomInfo({
roomName: "A Very Long Conversation Name",
@ -449,7 +388,6 @@
loop.store.StoreMixin.register({
activeRoomStore: activeRoomStore,
conversationStore: conversationStores[0],
textChatStore: textChatStore
});
@ -545,12 +483,6 @@
requestCallUrlInfo: noop
};
var mockWebSocket = new loop.CallConnectionWebSocket({
url: "fake",
callId: "fakeId",
websocketToken: "fakeToken"
});
var notifications = new loop.shared.models.NotificationCollection();
var errNotifications = new loop.shared.models.NotificationCollection();
errNotifications.add({
@ -1060,47 +992,6 @@
)
),
React.createElement(Section, {name: "AcceptCallView"},
React.createElement(FramedExample, {dashed: true,
height: 272,
summary: "Default / incoming video call",
width: 332},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_VIDEO,
callerId: "Mr Smith",
dispatcher: dispatcher,
mozLoop: mockMozLoopLoggedIn})
)
),
React.createElement(FramedExample, {dashed: true,
height: 272,
summary: "Default / incoming audio only call",
width: 332},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_ONLY,
callerId: "Mr Smith",
dispatcher: dispatcher,
mozLoop: mockMozLoopLoggedIn})
)
)
),
React.createElement(Section, {name: "AcceptCallView-ActiveState"},
React.createElement(FramedExample, {dashed: true,
height: 272,
summary: "Default",
width: 332},
React.createElement("div", {className: "fx-embedded"},
React.createElement(AcceptCallView, {callType: CALL_TYPES.AUDIO_VIDEO,
callerId: "Mr Smith",
dispatcher: dispatcher,
mozLoop: mockMozLoopLoggedIn,
showMenu: true})
)
)
),
React.createElement(Section, {name: "ConversationToolbar"},
React.createElement("div", null,
React.createElement(FramedExample, {dashed: true,
@ -1151,159 +1042,6 @@
)
),
React.createElement(Section, {name: "PendingConversationView (Desktop)"},
React.createElement(FramedExample, {dashed: true,
height: 272,
summary: "Connecting",
width: 300},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopPendingConversationView, {callState: "gather",
contact: mockContact,
dispatcher: dispatcher})
)
)
),
React.createElement(Section, {name: "DirectCallFailureView"},
React.createElement(FramedExample, {
dashed: true,
height: 254,
summary: "Call Failed - Incoming",
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DirectCallFailureView, {
conversationStore: conversationStores[0],
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
outgoing: false})
)
),
React.createElement(FramedExample, {
dashed: true,
height: 254,
summary: "Call Failed - Outgoing",
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DirectCallFailureView, {
conversationStore: conversationStores[1],
dispatcher: dispatcher,
mozLoop: navigator.mozLoop,
outgoing: true})
)
),
React.createElement(FramedExample, {
dashed: true,
height: 254,
summary: "Call Failed — with call URL error",
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DirectCallFailureView, {
conversationStore: conversationStores[0],
dispatcher: dispatcher,
emailLinkError: true,
mozLoop: navigator.mozLoop,
outgoing: true})
)
)
),
React.createElement(Section, {name: "OngoingConversationView"},
React.createElement(FramedExample, {dashed: true,
height: 398,
onContentsRendered: conversationStores[0].forcedUpdate,
summary: "Desktop ongoing conversation window",
width: 348},
React.createElement("div", {className: "fx-embedded"},
React.createElement(OngoingConversationView, {
audio: { enabled: true, visible: true},
chatWindowDetached: false,
conversationStore: conversationStores[0],
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mediaConnected: true,
remotePosterUrl: "sample-img/video-screen-remote.png",
remoteVideoEnabled: true,
video: { enabled: true, visible: true}})
)
),
React.createElement(FramedExample, {dashed: true,
height: 400,
onContentsRendered: conversationStores[1].forcedUpdate,
summary: "Desktop ongoing conversation window (medium)",
width: 600},
React.createElement("div", {className: "fx-embedded"},
React.createElement(OngoingConversationView, {
audio: { enabled: true, visible: true},
chatWindowDetached: false,
conversationStore: conversationStores[1],
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mediaConnected: true,
remotePosterUrl: "sample-img/video-screen-remote.png",
remoteVideoEnabled: true,
video: { enabled: true, visible: true}})
)
),
React.createElement(FramedExample, {height: 600,
onContentsRendered: conversationStores[2].forcedUpdate,
summary: "Desktop ongoing conversation window (large)",
width: 800},
React.createElement("div", {className: "fx-embedded"},
React.createElement(OngoingConversationView, {
audio: { enabled: true, visible: true},
chatWindowDetached: false,
conversationStore: conversationStores[2],
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mediaConnected: true,
remotePosterUrl: "sample-img/video-screen-remote.png",
remoteVideoEnabled: true,
video: { enabled: true, visible: true}})
)
),
React.createElement(FramedExample, {dashed: true,
height: 398,
onContentsRendered: conversationStores[3].forcedUpdate,
summary: "Desktop ongoing conversation window - local face mute",
width: 348},
React.createElement("div", {className: "fx-embedded"},
React.createElement(OngoingConversationView, {
audio: { enabled: true, visible: true},
chatWindowDetached: false,
conversationStore: conversationStores[3],
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mediaConnected: true,
remotePosterUrl: "sample-img/video-screen-remote.png",
remoteVideoEnabled: true,
video: { enabled: false, visible: true}})
)
),
React.createElement(FramedExample, {dashed: true,
height: 398,
onContentsRendered: conversationStores[4].forcedUpdate,
summary: "Desktop ongoing conversation window - remote face mute",
width: 348},
React.createElement("div", {className: "fx-embedded"},
React.createElement(OngoingConversationView, {
audio: { enabled: true, visible: true},
chatWindowDetached: false,
conversationStore: conversationStores[4],
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mediaConnected: true,
remotePosterUrl: "sample-img/video-screen-remote.png",
remoteVideoEnabled: false,
video: { enabled: true, visible: true}})
)
)
),
React.createElement(Section, {name: "FeedbackView"},
React.createElement("p", {className: "note"}
),

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

@ -23,10 +23,6 @@
var ContactDetail = loop.contacts.ContactDetail;
var GettingStartedView = loop.panel.GettingStartedView;
// 1.2. Conversation Window
var AcceptCallView = loop.conversationViews.AcceptCallView;
var DesktopPendingConversationView = loop.conversationViews.PendingConversationView;
var OngoingConversationView = loop.conversationViews.OngoingConversationView;
var DirectCallFailureView = loop.conversationViews.DirectCallFailureView;
var DesktopRoomEditContextView = loop.roomViews.DesktopRoomEditContextView;
var RoomFailureView = loop.roomViews.RoomFailureView;
var DesktopRoomConversationView = loop.roomViews.DesktopRoomConversationView;
@ -338,63 +334,6 @@
sdkDriver: mockSDK
});
/**
* Every view that uses an conversationStore needs its own; if they shared
* a conversation store, they'd interfere with each other.
*
* @param options
* @returns {loop.store.ConversationStore}
*/
function makeConversationStore() {
var roomDispatcher = new loop.Dispatcher();
var store = new loop.store.ConversationStore(dispatcher, {
client: {},
mozLoop: navigator.mozLoop,
sdkDriver: mockSDK
});
store.forcedUpdate = function forcedUpdate(contentWindow) {
// Since this is called by setTimeout, we don't want to lose any
// exceptions if there's a problem and we need to debug, so...
try {
var newStoreState = {
// Override the matchMedia, this is so that the correct version is
// used for the frame.
//
// Currently, we use an icky hack, and the showcase conspires with
// react-frame-component to set iframe.contentWindow.matchMedia onto
// the store. Once React context matures a bit (somewhere between
// 0.14 and 1.0, apparently):
//
// https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#solution-make-context-parent-based-instead-of-owner-based
//
// we should be able to use those to clean this up.
matchMedia: contentWindow.matchMedia.bind(contentWindow)
};
store.setStoreState(newStoreState);
} catch (ex) {
console.error("exception in forcedUpdate:", ex);
}
};
return store;
}
var conversationStores = [];
for (var index = 0; index < 5; index++) {
conversationStores[index] = makeConversationStore();
}
conversationStores[0].setStoreState({
callStateReason: FAILURE_DETAILS.NO_MEDIA
});
conversationStores[1].setStoreState({
callStateReason: FAILURE_DETAILS.USER_UNAVAILABLE,
contact: fakeManyContacts[0]
});
// Update the text chat store with the room info.
textChatStore.updateRoomInfo(new sharedActions.UpdateRoomInfo({
roomName: "A Very Long Conversation Name",
@ -449,7 +388,6 @@
loop.store.StoreMixin.register({
activeRoomStore: activeRoomStore,
conversationStore: conversationStores[0],
textChatStore: textChatStore
});
@ -545,12 +483,6 @@
requestCallUrlInfo: noop
};
var mockWebSocket = new loop.CallConnectionWebSocket({
url: "fake",
callId: "fakeId",
websocketToken: "fakeToken"
});
var notifications = new loop.shared.models.NotificationCollection();
var errNotifications = new loop.shared.models.NotificationCollection();
errNotifications.add({
@ -1060,47 +992,6 @@
</FramedExample>
</Section>
<Section name="AcceptCallView">
<FramedExample dashed={true}
height={272}
summary="Default / incoming video call"
width={332}>
<div className="fx-embedded">
<AcceptCallView callType={CALL_TYPES.AUDIO_VIDEO}
callerId="Mr Smith"
dispatcher={dispatcher}
mozLoop={mockMozLoopLoggedIn} />
</div>
</FramedExample>
<FramedExample dashed={true}
height={272}
summary="Default / incoming audio only call"
width={332}>
<div className="fx-embedded">
<AcceptCallView callType={CALL_TYPES.AUDIO_ONLY}
callerId="Mr Smith"
dispatcher={dispatcher}
mozLoop={mockMozLoopLoggedIn} />
</div>
</FramedExample>
</Section>
<Section name="AcceptCallView-ActiveState">
<FramedExample dashed={true}
height={272}
summary="Default"
width={332}>
<div className="fx-embedded">
<AcceptCallView callType={CALL_TYPES.AUDIO_VIDEO}
callerId="Mr Smith"
dispatcher={dispatcher}
mozLoop={mockMozLoopLoggedIn}
showMenu={true} />
</div>
</FramedExample>
</Section>
<Section name="ConversationToolbar">
<div>
<FramedExample dashed={true}
@ -1151,159 +1042,6 @@
</div>
</Section>
<Section name="PendingConversationView (Desktop)">
<FramedExample dashed={true}
height={272}
summary="Connecting"
width={300}>
<div className="fx-embedded">
<DesktopPendingConversationView callState={"gather"}
contact={mockContact}
dispatcher={dispatcher} />
</div>
</FramedExample>
</Section>
<Section name="DirectCallFailureView">
<FramedExample
dashed={true}
height={254}
summary="Call Failed - Incoming"
width={298}>
<div className="fx-embedded">
<DirectCallFailureView
conversationStore={conversationStores[0]}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
outgoing={false} />
</div>
</FramedExample>
<FramedExample
dashed={true}
height={254}
summary="Call Failed - Outgoing"
width={298}>
<div className="fx-embedded">
<DirectCallFailureView
conversationStore={conversationStores[1]}
dispatcher={dispatcher}
mozLoop={navigator.mozLoop}
outgoing={true} />
</div>
</FramedExample>
<FramedExample
dashed={true}
height={254}
summary="Call Failed — with call URL error"
width={298}>
<div className="fx-embedded">
<DirectCallFailureView
conversationStore={conversationStores[0]}
dispatcher={dispatcher}
emailLinkError={true}
mozLoop={navigator.mozLoop}
outgoing={true} />
</div>
</FramedExample>
</Section>
<Section name="OngoingConversationView">
<FramedExample dashed={true}
height={398}
onContentsRendered={conversationStores[0].forcedUpdate}
summary="Desktop ongoing conversation window"
width={348}>
<div className="fx-embedded">
<OngoingConversationView
audio={{ enabled: true, visible: true }}
chatWindowDetached={false}
conversationStore={conversationStores[0]}
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mediaConnected={true}
remotePosterUrl="sample-img/video-screen-remote.png"
remoteVideoEnabled={true}
video={{ enabled: true, visible: true }} />
</div>
</FramedExample>
<FramedExample dashed={true}
height={400}
onContentsRendered={conversationStores[1].forcedUpdate}
summary="Desktop ongoing conversation window (medium)"
width={600}>
<div className="fx-embedded">
<OngoingConversationView
audio={{ enabled: true, visible: true }}
chatWindowDetached={false}
conversationStore={conversationStores[1]}
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mediaConnected={true}
remotePosterUrl="sample-img/video-screen-remote.png"
remoteVideoEnabled={true}
video={{ enabled: true, visible: true }} />
</div>
</FramedExample>
<FramedExample height={600}
onContentsRendered={conversationStores[2].forcedUpdate}
summary="Desktop ongoing conversation window (large)"
width={800}>
<div className="fx-embedded">
<OngoingConversationView
audio={{ enabled: true, visible: true }}
chatWindowDetached={false}
conversationStore={conversationStores[2]}
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mediaConnected={true}
remotePosterUrl="sample-img/video-screen-remote.png"
remoteVideoEnabled={true}
video={{ enabled: true, visible: true }} />
</div>
</FramedExample>
<FramedExample dashed={true}
height={398}
onContentsRendered={conversationStores[3].forcedUpdate}
summary="Desktop ongoing conversation window - local face mute"
width={348}>
<div className="fx-embedded">
<OngoingConversationView
audio={{ enabled: true, visible: true }}
chatWindowDetached={false}
conversationStore={conversationStores[3]}
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mediaConnected={true}
remotePosterUrl="sample-img/video-screen-remote.png"
remoteVideoEnabled={true}
video={{ enabled: false, visible: true }} />
</div>
</FramedExample>
<FramedExample dashed={true}
height={398}
onContentsRendered={conversationStores[4].forcedUpdate}
summary="Desktop ongoing conversation window - remote face mute"
width={348} >
<div className="fx-embedded">
<OngoingConversationView
audio={{ enabled: true, visible: true }}
chatWindowDetached={false}
conversationStore={conversationStores[4]}
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mediaConnected={true}
remotePosterUrl="sample-img/video-screen-remote.png"
remoteVideoEnabled={false}
video={{ enabled: true, visible: true }} />
</div>
</FramedExample>
</Section>
<Section name="FeedbackView">
<p className="note">
</p>

24
browser/locales/en-US/chrome/browser/loop/loop.properties
View File

@ -42,9 +42,8 @@ display_name_dnd_status=Do Not Disturb
display_name_available_status=Available
# Error bars
## LOCALIZATION NOTE(unable_retrieve_url,session_expired_error_description,could_not_authenticate,password_changed_question,try_again_later,could_not_connect,check_internet_connection,login_expired,service_not_available,problem_accessing_account):
## LOCALIZATION NOTE(session_expired_error_description,could_not_authenticate,password_changed_question,try_again_later,could_not_connect,check_internet_connection,login_expired,service_not_available,problem_accessing_account):
## These may be displayed at the top of the panel.
unable_retrieve_url=Sorry, we were unable to retrieve a call URL.
session_expired_error_description=Session expired. All URLs you have previously created and shared will no longer work.
could_not_authenticate=Could Not Authenticate
password_changed_question=Did you change your password?
@ -73,7 +72,6 @@ share_email_footer=\n\n________\nJoin and create video conversations free with F
## in a tweet.
share_tweet=Join me for a video conversation on {{clientShortname2}}!
share_button3=Share Link
share_add_service_button=Add a Service
## LOCALIZATION NOTE (copy_link_menuitem, email_link_menuitem, delete_conversation_menuitem):
@ -222,11 +220,6 @@ gravatars_promo_button_use2=Use profile icons
initiate_call_button_label2=Ready to start your conversation?
incoming_call_title2=Conversation Request
incoming_call_accept_button=Accept
incoming_call_accept_audio_only_tooltip=Accept with voice
incoming_call_accept_audio_video_tooltip=Accept with video
incoming_call_cancel_button=Cancel
incoming_call_cancel_and_block_button=Cancel and Block
incoming_call_block_button=Block
hangup_button_title=Hang up
hangup_button_caption2=Exit
@ -252,27 +245,12 @@ outgoing_call_title=Start conversation?
initiate_audio_video_call_button2=Start
initiate_audio_video_call_tooltip2=Start a video conversation
initiate_audio_call_button2=Voice conversation
initiate_call_cancel_button=Cancel
## LOCALIZATION NOTE (call_progress_connecting_description): This is displayed
## whilst the client is contacting the client at the other end of the connection.
call_progress_connecting_description=Connecting…
## LOCALIZATION NOTE (call_progress_ringing_description): This is displayed
## when the other client is actually ringing.
call_progress_ringing_description=Ringing…
peer_ended_conversation2=The person you were calling has ended the conversation.
conversation_has_ended=Your conversation has ended.
restart_call=Rejoin
## LOCALIZATION NOTE (contact_unavailable_title): The title displayed
## when a contact is unavailable. Don't translate the part between {{..}}
## because this will be replaced by the contact's name.
contact_unavailable_title={{contactName}} is unavailable.
generic_contact_unavailable_title=This person is unavailable.
generic_failure_message=We're having technical difficulties…
generic_failure_with_reason2=You can try again or email a link to be reached at later.
generic_failure_no_reason2=Would you like to try again?
## LOCALIZATION NOTE (tos_failure_message): Don't translate {{clientShortname2}}
## as this will be replaced by the shortname.