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

Bug 1180179 - Part 4. Use the shared media layout component in Loop's room views. r=mikedeboer

Browse Source
This commit is contained in:
Mark Banner 2015-07-27 12:58:02 +02:00
parent 1378db4bf9
commit 6bad971249
12 changed files with 275 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -665,7 +665,7 @@ loop.roomViews = (function(mozL10n) {
* @returns {boolean}
* @private
*/
_shouldRenderLocalLoading: function () {
_isLocalLoading: function () {
return this.state.roomState === ROOM_STATES.MEDIA_WAIT &&
!this.state.localSrcVideoObject;
},
@ -677,7 +677,7 @@ loop.roomViews = (function(mozL10n) {
* @returns {boolean}
* @private
*/
_shouldRenderRemoteLoading: function() {
_isRemoteLoading: function() {
return !!(this.state.roomState === ROOM_STATES.HAS_PARTICIPANTS &&
!this.state.remoteSrcVideoObject &&
!this.state.mediaConnected);
@ -741,63 +741,54 @@ loop.roomViews = (function(mozL10n) {
return null;
}
default: {
return (
React.createElement("div", {className: "room-conversation-wrapper"},
React.createElement("div", {className: "video-layout-wrapper"},
React.createElement("div", {className: "conversation room-conversation"},
React.createElement("div", {className: "media nested"},
React.createElement(DesktopRoomInvitationView, {
dispatcher: this.props.dispatcher,
error: this.state.error,
mozLoop: this.props.mozLoop,
onAddContextClick: this.handleAddContextClick,
onEditContextClose: this.handleEditContextClose,
roomData: roomData,
savingContext: this.state.savingContext,
show: shouldRenderInvitationOverlay,
showEditContext: shouldRenderInvitationOverlay && shouldRenderEditContextView,
socialShareProviders: this.state.socialShareProviders}),
React.createElement("div", {className: "video_wrapper remote_wrapper"},
React.createElement("div", {className: "video_inner remote focus-stream"},
React.createElement(sharedViews.MediaView, {displayAvatar: !this.shouldRenderRemoteVideo(),
isLoading: this._shouldRenderRemoteLoading(),
mediaType: "remote",
posterUrl: this.props.remotePosterUrl,
srcVideoObject: this.state.remoteSrcVideoObject})
)
),
React.createElement("div", {className: localStreamClasses},
React.createElement(sharedViews.MediaView, {displayAvatar: this.state.videoMuted,
isLoading: this._shouldRenderLocalLoading(),
mediaType: "local",
posterUrl: this.props.localPosterUrl,
srcVideoObject: this.state.localSrcVideoObject})
),
React.createElement(DesktopRoomEditContextView, {
dispatcher: this.props.dispatcher,
error: this.state.error,
mozLoop: this.props.mozLoop,
onClose: this.handleEditContextClose,
roomData: roomData,
savingContext: this.state.savingContext,
show: !shouldRenderInvitationOverlay && shouldRenderEditContextView})
),
React.createElement(sharedViews.ConversationToolbar, {
audio: {enabled: !this.state.audioMuted, visible: true},
dispatcher: this.props.dispatcher,
edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext},
hangup: this.leaveRoom,
onEditClick: this.handleEditContextClick,
publishStream: this.publishStream,
screenShare: screenShareData,
video: {enabled: !this.state.videoMuted, visible: true}})
)
),
React.createElement(sharedViews.chat.TextChatView, {
React.createElement("div", {className: "room-conversation-wrapper desktop-room-wrapper"},
React.createElement(sharedViews.MediaLayoutView, {
dispatcher: this.props.dispatcher,
showRoomName: false,
useDesktopPaths: true})
displayScreenShare: false,
isLocalLoading: this._isLocalLoading(),
isRemoteLoading: this._isRemoteLoading(),
isScreenShareLoading: false,
localPosterUrl: this.props.localPosterUrl,
localSrcVideoObject: this.state.localSrcVideoObject,
localVideoMuted: this.state.videoMuted,
matchMedia: this.state.matchMedia || window.matchMedia.bind(window),
remotePosterUrl: this.props.remotePosterUrl,
remoteSrcVideoObject: this.state.remoteSrcVideoObject,
renderRemoteVideo: this.shouldRenderRemoteVideo(),
screenSharePosterUrl: null,
screenShareVideoObject: this.state.screenShareVideoObject,
showContextRoomName: false,
useDesktopPaths: true},
React.createElement(DesktopRoomInvitationView, {
dispatcher: this.props.dispatcher,
error: this.state.error,
mozLoop: this.props.mozLoop,
onAddContextClick: this.handleAddContextClick,
onEditContextClose: this.handleEditContextClose,
roomData: roomData,
savingContext: this.state.savingContext,
show: shouldRenderInvitationOverlay,
showEditContext: shouldRenderInvitationOverlay && shouldRenderEditContextView,
socialShareProviders: this.state.socialShareProviders}),
React.createElement(DesktopRoomEditContextView, {
dispatcher: this.props.dispatcher,
error: this.state.error,
mozLoop: this.props.mozLoop,
onClose: this.handleEditContextClose,
roomData: roomData,
savingContext: this.state.savingContext,
show: !shouldRenderInvitationOverlay && shouldRenderEditContextView})
),
React.createElement(sharedViews.ConversationToolbar, {
audio: {enabled: !this.state.audioMuted, visible: true},
dispatcher: this.props.dispatcher,
edit: { visible: this.state.contextEnabled, enabled: !this.state.showEditContext},
hangup: this.leaveRoom,
onEditClick: this.handleEditContextClick,
publishStream: this.publishStream,
screenShare: screenShareData,
video: {enabled: !this.state.videoMuted, visible: true}})
)
);
}

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

@ -665,7 +665,7 @@ loop.roomViews = (function(mozL10n) {
* @returns {boolean}
* @private
*/
_shouldRenderLocalLoading: function () {
_isLocalLoading: function () {
return this.state.roomState === ROOM_STATES.MEDIA_WAIT &&
!this.state.localSrcVideoObject;
},
@ -677,7 +677,7 @@ loop.roomViews = (function(mozL10n) {
* @returns {boolean}
* @private
*/
_shouldRenderRemoteLoading: function() {
_isRemoteLoading: function() {
return !!(this.state.roomState === ROOM_STATES.HAS_PARTICIPANTS &&
!this.state.remoteSrcVideoObject &&
!this.state.mediaConnected);
@ -741,63 +741,54 @@ loop.roomViews = (function(mozL10n) {
return null;
}
default: {
return (
<div className="room-conversation-wrapper">
<div className="video-layout-wrapper">
<div className="conversation room-conversation">
<div className="media nested">
<DesktopRoomInvitationView
dispatcher={this.props.dispatcher}
error={this.state.error}
mozLoop={this.props.mozLoop}
onAddContextClick={this.handleAddContextClick}
onEditContextClose={this.handleEditContextClose}
roomData={roomData}
savingContext={this.state.savingContext}
show={shouldRenderInvitationOverlay}
showEditContext={shouldRenderInvitationOverlay && shouldRenderEditContextView}
socialShareProviders={this.state.socialShareProviders} />
<div className="video_wrapper remote_wrapper">
<div className="video_inner remote focus-stream">
<sharedViews.MediaView displayAvatar={!this.shouldRenderRemoteVideo()}
isLoading={this._shouldRenderRemoteLoading()}
mediaType="remote"
posterUrl={this.props.remotePosterUrl}
srcVideoObject={this.state.remoteSrcVideoObject} />
</div>
</div>
<div className={localStreamClasses}>
<sharedViews.MediaView displayAvatar={this.state.videoMuted}
isLoading={this._shouldRenderLocalLoading()}
mediaType="local"
posterUrl={this.props.localPosterUrl}
srcVideoObject={this.state.localSrcVideoObject} />
</div>
<DesktopRoomEditContextView
dispatcher={this.props.dispatcher}
error={this.state.error}
mozLoop={this.props.mozLoop}
onClose={this.handleEditContextClose}
roomData={roomData}
savingContext={this.state.savingContext}
show={!shouldRenderInvitationOverlay && shouldRenderEditContextView} />
</div>
<sharedViews.ConversationToolbar
audio={{enabled: !this.state.audioMuted, visible: true}}
dispatcher={this.props.dispatcher}
edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
hangup={this.leaveRoom}
onEditClick={this.handleEditContextClick}
publishStream={this.publishStream}
screenShare={screenShareData}
video={{enabled: !this.state.videoMuted, visible: true}} />
</div>
</div>
<sharedViews.chat.TextChatView
<div className="room-conversation-wrapper desktop-room-wrapper">
<sharedViews.MediaLayoutView
dispatcher={this.props.dispatcher}
showRoomName={false}
useDesktopPaths={true} />
displayScreenShare={false}
isLocalLoading={this._isLocalLoading()}
isRemoteLoading={this._isRemoteLoading()}
isScreenShareLoading={false}
localPosterUrl={this.props.localPosterUrl}
localSrcVideoObject={this.state.localSrcVideoObject}
localVideoMuted={this.state.videoMuted}
matchMedia={this.state.matchMedia || window.matchMedia.bind(window)}
remotePosterUrl={this.props.remotePosterUrl}
remoteSrcVideoObject={this.state.remoteSrcVideoObject}
renderRemoteVideo={this.shouldRenderRemoteVideo()}
screenSharePosterUrl={null}
screenShareVideoObject={this.state.screenShareVideoObject}
showContextRoomName={false}
useDesktopPaths={true}>
<DesktopRoomInvitationView
dispatcher={this.props.dispatcher}
error={this.state.error}
mozLoop={this.props.mozLoop}
onAddContextClick={this.handleAddContextClick}
onEditContextClose={this.handleEditContextClose}
roomData={roomData}
savingContext={this.state.savingContext}
show={shouldRenderInvitationOverlay}
showEditContext={shouldRenderInvitationOverlay && shouldRenderEditContextView}
socialShareProviders={this.state.socialShareProviders} />
<DesktopRoomEditContextView
dispatcher={this.props.dispatcher}
error={this.state.error}
mozLoop={this.props.mozLoop}
onClose={this.handleEditContextClose}
roomData={roomData}
savingContext={this.state.savingContext}
show={!shouldRenderInvitationOverlay && shouldRenderEditContextView} />
</sharedViews.MediaLayoutView>
<sharedViews.ConversationToolbar
audio={{enabled: !this.state.audioMuted, visible: true}}
dispatcher={this.props.dispatcher}
edit={{ visible: this.state.contextEnabled, enabled: !this.state.showEditContext }}
hangup={this.leaveRoom}
onEditClick={this.handleEditContextClick}
publishStream={this.publishStream}
screenShare={screenShareData}
video={{enabled: !this.state.videoMuted, visible: true}} />
</div>
);
}

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

@ -504,28 +504,6 @@
text-align: center;
}
.fx-embedded .local-stream {
position: absolute;
right: 3px;
bottom: 5px;
/* next two lines are workaround for lack of object-fit; see bug 1020445 */
max-width: 140px;
width: 30%;
height: 28%;
max-height: 105px;
}
.fx-embedded .local-stream.room-preview {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
max-width: none;
max-height: none;
}
.conversation .media.nested .focus-stream {
display: inline-block;
position: absolute; /* workaround for lack of object-fit; see bug 1020445 */
@ -597,10 +575,6 @@
opacity: 0.25;
}
.fx-embedded .media.nested {
min-height: 200px;
}
.fx-embedded-call-identifier {
display: inline;
width: 100%;
@ -676,7 +650,8 @@
html, .fx-embedded, #main,
.video-layout-wrapper,
.conversation,
.desktop-call-wrapper {
.desktop-call-wrapper,
.desktop-room-wrapper {
height: 100%;
}
@ -936,7 +911,6 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
border-top: 2px solid #444;
border-bottom: 2px solid #444;
padding: .5rem;
max-height: 400px;
position: absolute;
left: 0;
bottom: 0;
@ -952,7 +926,7 @@ body[platform="win"] .share-service-dropdown.overflow > .dropdown-menu-item {
overflow-x: hidden;
overflow-y: auto;
/* Make the context view float atop the video elements. */
z-index: 2;
z-index: 3;
}
.room-invitation-overlay .room-context {
@ -1140,7 +1114,8 @@ html[dir="rtl"] .room-context-btn-close {
height: calc(100% - 300px);
}
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view {
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
/* Account for height of .conversation-toolbar on desktop */
/* When we change the toolbar in bug 1184559 we can remove this. */
margin-top: 26px;
@ -1212,7 +1187,7 @@ html[dir="rtl"] .room-context-btn-close {
/* Temporarily slaved from .media-wrapper until we use it in more places
to avoid affecting the conversation window on desktop. */
.media-wrapper > .text-chat-view > .text-chat-entries {
.text-chat-view > .text-chat-entries {
/* 40px is the height of .text-chat-box. */
height: calc(100% - 40px);
width: 100%;
@ -1227,7 +1202,7 @@ html[dir="rtl"] .room-context-btn-close {
/* Position over the remote video */
position: absolute;
/* Make sure its on top */
z-index: 1001;
z-index: 2;
margin: 3px;
right: 0;
/* 29px is (30% of 50px high header) + (height toolbar (38px) +
@ -1261,7 +1236,8 @@ html[dir="rtl"] .room-context-btn-close {
height: 30%;
}
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view {
.desktop-call-wrapper > .media-layout > .media-wrapper > .text-chat-view,
.desktop-room-wrapper > .media-layout > .media-wrapper > .text-chat-view {
/* When we change the toolbar in bug 1184559 we can remove this. */
/* Reset back to 0 for .conversation-toolbar override on desktop */
margin-top: 0;
@ -1316,10 +1292,6 @@ html[dir="rtl"] .room-context-btn-close {
flex-flow: column nowrap;
}
.media-wrapper:not(.showing-remote-streams) > .remote {
display: none;
}
.media-wrapper > .focus-stream > .local {
position: absolute;
right: 0;
@ -1334,7 +1306,11 @@ html[dir="rtl"] .room-context-btn-close {
height: 25%;
}
.media-wrapper:not(.showing-remote-streams) > .local {
.media-wrapper:not(.showing-remote-streams) > .focus-stream > .no-video {
display: none;
}
.media-wrapper:not(.showing-remote-streams) > .focus-stream > .local {
position: relative;
margin: 0;
right: auto;
@ -1342,6 +1318,7 @@ html[dir="rtl"] .room-context-btn-close {
bottom: auto;
width: 100%;
height: 100%;
background-color: black;
}
.media-wrapper > .focus-stream {
@ -1483,33 +1460,6 @@ html[dir="rtl"] .standalone .room-conversation-wrapper .room-inner-info-area {
background: white;
}
/* Old styles to cope with rooms until we transition those to media-layout. */
.fx-embedded .room-conversation-wrapper {
display: flex;
flex-flow: column nowrap;
}
.fx-embedded .room-conversation-wrapper > .video-layout-wrapper {
flex: 1 1 auto;
}
.fx-embedded .room-conversation-wrapper > .text-chat-view {
flex: 1 0 auto;
display: flex;
flex-flow: column nowrap;
}
.fx-embedded .room-conversation-wrapper > .text-chat-view .text-chat-entries {
flex: 1 1 auto;
max-height: 120px;
min-height: 60px;
}
.fx-embedded .room-conversation-wrapper > .text-chat-view > .text-chat-entries-empty {
display: none;
}
.text-chat-box {
flex: 0 0 auto;
max-height: 40px;
@ -1806,11 +1756,7 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
/* e.g. very narrow widths similar to conversation window */
@media screen and (max-width:300px) {
/**
* XXX This section scoped to .media-layout until we have the desktop
* rooms working from the media-layout as well.
*/
.media-layout .text-chat-view {
.text-chat-view {
flex: 0 0 auto;
display: flex;
flex-flow: column nowrap;
@ -1824,7 +1770,7 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
height: auto !important;
}
.media-layout .text-chat-entries {
.text-chat-entries {
/* The !important is to override the values defined above which have more
specificity when we fix bug 1184559, we should be able to remove it,
but this should be tests first. */
@ -1833,18 +1779,18 @@ html[dir="rtl"] .text-chat-entry.received .text-chat-arrow {
min-height: 60px;
}
.media-layout .text-chat-entries-empty.text-chat-disabled {
.text-chat-entries-empty.text-chat-disabled {
display: none;
}
/* When the text chat entries are not present, then hide the entries view
and just show the chat box. */
.media-layout .text-chat-entries-empty {
.text-chat-entries-empty {
max-height: 40px;
min-height: 40px;
}
.media-layout .text-chat-entries-empty > .text-chat-entries {
.text-chat-entries-empty > .text-chat-entries {
display: none;
}
}

7
browser/components/loop/content/shared/js/textChatView.js
View File

@ -150,10 +150,7 @@ loop.shared.views.chat = (function(mozL10n) {
var lastTimestamp = 0;
var entriesClasses = React.addons.classSet({
"text-chat-entries": true,
// XXX Only required until we get the desktop rooms on media-layout
// as well.
"text-chat-entries-empty": !this.props.messageList.length
"text-chat-entries": true
});
return (
@ -385,7 +382,7 @@ loop.shared.views.chat = (function(mozL10n) {
var textChatViewClasses = React.addons.classSet({
"text-chat-view": true,
"text-chat-disabled": !this.state.textChatEnabled,
"text-chat-entries-empty": !this.state.messageList.length
"text-chat-entries-empty": !messageList.length
});
return (

7
browser/components/loop/content/shared/js/textChatView.jsx
View File

@ -150,10 +150,7 @@ loop.shared.views.chat = (function(mozL10n) {
var lastTimestamp = 0;
var entriesClasses = React.addons.classSet({
"text-chat-entries": true,
// XXX Only required until we get the desktop rooms on media-layout
// as well.
"text-chat-entries-empty": !this.props.messageList.length
"text-chat-entries": true
});
return (
@ -385,7 +382,7 @@ loop.shared.views.chat = (function(mozL10n) {
var textChatViewClasses = React.addons.classSet({
"text-chat-view": true,
"text-chat-disabled": !this.state.textChatEnabled,
"text-chat-entries-empty": !this.state.messageList.length
"text-chat-entries-empty": !messageList.length
});
return (

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

@ -946,6 +946,7 @@ loop.shared.views = (function(_, mozL10n) {
var MediaLayoutView = React.createClass({displayName: "MediaLayoutView",
propTypes: {
children: React.PropTypes.node,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
displayScreenShare: React.PropTypes.bool.isRequired,
isLocalLoading: React.PropTypes.bool.isRequired,
@ -1054,7 +1055,8 @@ loop.shared.views = (function(_, mozL10n) {
posterUrl: this.props.remotePosterUrl,
srcVideoObject: this.props.remoteSrcVideoObject}),
this.state.localMediaAboslutelyPositioned ?
this.renderLocalVideo() : null
this.renderLocalVideo() : null,
this.props.children
),
React.createElement("div", {className: screenShareStreamClasses},
React.createElement(MediaView, {displayAvatar: false,

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

@ -946,6 +946,7 @@ loop.shared.views = (function(_, mozL10n) {
var MediaLayoutView = React.createClass({
propTypes: {
children: React.PropTypes.node,
dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
displayScreenShare: React.PropTypes.bool.isRequired,
isLocalLoading: React.PropTypes.bool.isRequired,
@ -1055,6 +1056,7 @@ loop.shared.views = (function(_, mozL10n) {
srcVideoObject={this.props.remoteSrcVideoObject} />
{ this.state.localMediaAboslutelyPositioned ?
this.renderLocalVideo() : null }
{ this.props.children }
</div>
<div className={screenShareStreamClasses}>
<MediaView displayAvatar={false}

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

@ -95,7 +95,7 @@
describe("Unexpected Warnings Check", function() {
it("should long only the warnings we expect", function() {
chai.expect(caughtWarnings.length).to.eql(27);
chai.expect(caughtWarnings.length).to.eql(28);
});
});

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

@ -598,21 +598,6 @@ describe("loop.roomViews", function () {
});
describe("Mute", function() {
it("should render local media as audio-only if video is muted",
function() {
activeRoomStore.setStoreState({
roomState: ROOM_STATES.SESSION_CONNECTED,
videoMuted: true
});
view = mountTestComponent();
expect(view.getDOMNode().querySelector(".local-stream-audio"))
.not.eql(null);
});
});
describe("Edit Context", function() {
it("should show the form when the edit button is clicked", function() {
view = mountTestComponent();

2
browser/components/loop/test/functional/test_1_browser_call.py
View File

@ -99,7 +99,7 @@ class Test1BrowserCall(MarionetteTestCase):
self.switch_to_chatbox()
# expect a video container on desktop side
media_container = self.wait_for_element_displayed(By.CLASS_NAME, "media")
media_container = self.wait_for_element_displayed(By.CLASS_NAME, "media-layout")
self.assertEqual(media_container.tag_name, "div", "expect a video container")
self.check_video(".local-video")

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

@ -267,7 +267,10 @@
});
var invitationRoomStore = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.INIT
})
});
var roomStore = new loop.store.RoomStore(dispatcher, {
@ -286,6 +289,20 @@
})
});
var desktopRoomStoreMedium = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS
})
});
var desktopRoomStoreLarge = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS
})
});
var desktopLocalFaceMuteActiveRoomStore = makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS,
videoMuted: true
@ -998,7 +1015,8 @@
React.createElement(Section, {name: "DesktopRoomConversationView"},
React.createElement(FramedExample, {
height: 254,
height: 398,
onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation (invitation, text-chat inclusion/scrollbars don't happen in real client)",
width: 298},
React.createElement("div", {className: "fx-embedded"},
@ -1015,6 +1033,7 @@
React.createElement(FramedExample, {
dashed: true,
height: 394,
onContentsRendered: desktopRoomStoreLoading.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation (loading)",
width: 298},
/* Hide scrollbars here. Rotating loading div overflows and causes
@ -1031,8 +1050,12 @@
)
),
React.createElement(FramedExample, {height: 254,
summary: "Desktop room conversation"},
React.createElement(FramedExample, {
dashed: true,
height: 394,
onContentsRendered: roomStore.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation",
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
dispatcher: dispatcher,
@ -1045,10 +1068,48 @@
)
),
React.createElement(FramedExample, {dashed: true,
height: 394,
summary: "Desktop room conversation local face-mute",
width: 298},
React.createElement(FramedExample, {
dashed: true,
height: 482,
onContentsRendered: desktopRoomStoreMedium.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation (medium)",
width: 602},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mozLoop: navigator.mozLoop,
onCallTerminated: function(){},
remotePosterUrl: "sample-img/video-screen-remote.png",
roomState: ROOM_STATES.HAS_PARTICIPANTS,
roomStore: desktopRoomStoreMedium})
)
),
React.createElement(FramedExample, {
dashed: true,
height: 485,
onContentsRendered: desktopRoomStoreLarge.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation (large)",
width: 646},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
dispatcher: dispatcher,
localPosterUrl: "sample-img/video-screen-local.png",
mozLoop: navigator.mozLoop,
onCallTerminated: function(){},
remotePosterUrl: "sample-img/video-screen-remote.png",
roomState: ROOM_STATES.HAS_PARTICIPANTS,
roomStore: desktopRoomStoreLarge})
)
),
React.createElement(FramedExample, {
dashed: true,
height: 394,
onContentsRendered: desktopLocalFaceMuteRoomStore.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation local face-mute",
width: 298},
React.createElement("div", {className: "fx-embedded"},
React.createElement(DesktopRoomConversationView, {
dispatcher: dispatcher,
@ -1059,7 +1120,9 @@
)
),
React.createElement(FramedExample, {dashed: true, height: 394,
React.createElement(FramedExample, {dashed: true,
height: 394,
onContentsRendered: desktopRemoteFaceMuteRoomStore.activeRoomStore.forcedUpdate,
summary: "Desktop room conversation remote face-mute",
width: 298},
React.createElement("div", {className: "fx-embedded"},
@ -1068,6 +1131,7 @@
localPosterUrl: "sample-img/video-screen-local.png",
mozLoop: navigator.mozLoop,
onCallTerminated: function(){},
remotePosterUrl: "sample-img/video-screen-remote.png",
roomStore: desktopRemoteFaceMuteRoomStore})
)
)
@ -1384,7 +1448,7 @@
// This simulates the mocha layout for errors which means we can run
// this alongside our other unit tests but use the same harness.
var expectedWarningsCount = 19;
var expectedWarningsCount = 18;
var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
if (uncaughtError || warningsMismatch) {
$("#results").append("<div class='failures'><em>" +

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

@ -267,7 +267,10 @@
});
var invitationRoomStore = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.INIT
})
});
var roomStore = new loop.store.RoomStore(dispatcher, {
@ -286,6 +289,20 @@
})
});
var desktopRoomStoreMedium = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS
})
});
var desktopRoomStoreLarge = new loop.store.RoomStore(dispatcher, {
mozLoop: navigator.mozLoop,
activeRoomStore: makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS
})
});
var desktopLocalFaceMuteActiveRoomStore = makeActiveRoomStore({
roomState: ROOM_STATES.HAS_PARTICIPANTS,
videoMuted: true
@ -998,7 +1015,8 @@
<Section name="DesktopRoomConversationView">
<FramedExample
height={254}
height={398}
onContentsRendered={invitationRoomStore.activeRoomStore.forcedUpdate}
summary="Desktop room conversation (invitation, text-chat inclusion/scrollbars don't happen in real client)"
width={298}>
<div className="fx-embedded">
@ -1015,6 +1033,7 @@
<FramedExample
dashed={true}
height={394}
onContentsRendered={desktopRoomStoreLoading.activeRoomStore.forcedUpdate}
summary="Desktop room conversation (loading)"
width={298}>
{/* Hide scrollbars here. Rotating loading div overflows and causes
@ -1031,8 +1050,12 @@
</div>
</FramedExample>
<FramedExample height={254}
summary="Desktop room conversation">
<FramedExample
dashed={true}
height={394}
onContentsRendered={roomStore.activeRoomStore.forcedUpdate}
summary="Desktop room conversation"
width={298}>
<div className="fx-embedded">
<DesktopRoomConversationView
dispatcher={dispatcher}
@ -1045,10 +1068,48 @@
</div>
</FramedExample>
<FramedExample dashed={true}
height={394}
summary="Desktop room conversation local face-mute"
width={298}>
<FramedExample
dashed={true}
height={482}
onContentsRendered={desktopRoomStoreMedium.activeRoomStore.forcedUpdate}
summary="Desktop room conversation (medium)"
width={602}>
<div className="fx-embedded">
<DesktopRoomConversationView
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mozLoop={navigator.mozLoop}
onCallTerminated={function(){}}
remotePosterUrl="sample-img/video-screen-remote.png"
roomState={ROOM_STATES.HAS_PARTICIPANTS}
roomStore={desktopRoomStoreMedium} />
</div>
</FramedExample>
<FramedExample
dashed={true}
height={485}
onContentsRendered={desktopRoomStoreLarge.activeRoomStore.forcedUpdate}
summary="Desktop room conversation (large)"
width={646}>
<div className="fx-embedded">
<DesktopRoomConversationView
dispatcher={dispatcher}
localPosterUrl="sample-img/video-screen-local.png"
mozLoop={navigator.mozLoop}
onCallTerminated={function(){}}
remotePosterUrl="sample-img/video-screen-remote.png"
roomState={ROOM_STATES.HAS_PARTICIPANTS}
roomStore={desktopRoomStoreLarge} />
</div>
</FramedExample>
<FramedExample
dashed={true}
height={394}
onContentsRendered={desktopLocalFaceMuteRoomStore.activeRoomStore.forcedUpdate}
summary="Desktop room conversation local face-mute"
width={298}>
<div className="fx-embedded">
<DesktopRoomConversationView
dispatcher={dispatcher}
@ -1059,7 +1120,9 @@
</div>
</FramedExample>
<FramedExample dashed={true} height={394}
<FramedExample dashed={true}
height={394}
onContentsRendered={desktopRemoteFaceMuteRoomStore.activeRoomStore.forcedUpdate}
summary="Desktop room conversation remote face-mute"
width={298} >
<div className="fx-embedded">
@ -1068,6 +1131,7 @@
localPosterUrl="sample-img/video-screen-local.png"
mozLoop={navigator.mozLoop}
onCallTerminated={function(){}}
remotePosterUrl="sample-img/video-screen-remote.png"
roomStore={desktopRemoteFaceMuteRoomStore} />
</div>
</FramedExample>
@ -1384,7 +1448,7 @@
// This simulates the mocha layout for errors which means we can run
// this alongside our other unit tests but use the same harness.
var expectedWarningsCount = 19;
var expectedWarningsCount = 18;
var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
if (uncaughtError || warningsMismatch) {
$("#results").append("<div class='failures'><em>" +