forked from mirrors/gecko-dev
1899 lines
80 KiB
JavaScript
1899 lines
80 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
/* global Frame:false uncaughtError:true fakeManyContacts:true fakeFewerContacts:true */
|
|
|
|
(function() {
|
|
"use strict";
|
|
|
|
// Stop the default init functions running to avoid conflicts.
|
|
document.removeEventListener("DOMContentLoaded", loop.panel.init);
|
|
document.removeEventListener("DOMContentLoaded", loop.conversation.init);
|
|
|
|
var sharedActions = loop.shared.actions;
|
|
|
|
// 1. Desktop components
|
|
// 1.1 Panel
|
|
var AvailabilityDropdown = loop.panel.AvailabilityDropdown;
|
|
var PanelView = loop.panel.PanelView;
|
|
var SignInRequestView = loop.panel.SignInRequestView;
|
|
var ContactDetailsForm = loop.contacts.ContactDetailsForm;
|
|
var ContactDropdown = loop.contacts.ContactDropdown;
|
|
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;
|
|
|
|
// 2. Standalone webapp
|
|
var HomeView = loop.webapp.HomeView;
|
|
var UnsupportedBrowserView = loop.webapp.UnsupportedBrowserView;
|
|
var UnsupportedDeviceView = loop.webapp.UnsupportedDeviceView;
|
|
var StandaloneRoomView = loop.standaloneRoomViews.StandaloneRoomView;
|
|
var StandaloneHandleUserAgentView = loop.standaloneRoomViews.StandaloneHandleUserAgentView;
|
|
|
|
// 3. Shared components
|
|
var ConversationToolbar = loop.shared.views.ConversationToolbar;
|
|
var FeedbackView = loop.feedbackViews.FeedbackView;
|
|
var Checkbox = loop.shared.views.Checkbox;
|
|
var TextChatView = loop.shared.views.chat.TextChatView;
|
|
|
|
// Store constants
|
|
var ROOM_STATES = loop.store.ROOM_STATES;
|
|
var CALL_TYPES = loop.shared.utils.CALL_TYPES;
|
|
var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
|
|
var SCREEN_SHARE_STATES = loop.shared.utils.SCREEN_SHARE_STATES;
|
|
|
|
// Local helpers
|
|
function returnTrue() {
|
|
return true;
|
|
}
|
|
|
|
function returnFalse() {
|
|
return false;
|
|
}
|
|
|
|
function noop(){}
|
|
|
|
// We save the visibility change listeners so that we can fake an event
|
|
// to the panel once we've loaded all the views.
|
|
var visibilityListeners = [];
|
|
var rootObject = window;
|
|
|
|
rootObject.document.addEventListener = function(eventName, func) {
|
|
if (eventName === "visibilitychange") {
|
|
visibilityListeners.push(func);
|
|
}
|
|
window.addEventListener(eventName, func);
|
|
};
|
|
|
|
rootObject.document.removeEventListener = function(eventName, func) {
|
|
if (eventName === "visibilitychange") {
|
|
var index = visibilityListeners.indexOf(func);
|
|
visibilityListeners.splice(index, 1);
|
|
}
|
|
window.removeEventListener(eventName, func);
|
|
};
|
|
|
|
loop.shared.mixins.setRootObject(rootObject);
|
|
|
|
var dispatcher = new loop.Dispatcher();
|
|
|
|
var MockSDK = function() {
|
|
dispatcher.register(this, [
|
|
"setupStreamElements"
|
|
]);
|
|
};
|
|
|
|
MockSDK.prototype = {
|
|
setupStreamElements: function() {
|
|
// Dummy function to stop warnings.
|
|
},
|
|
|
|
sendTextChatMessage: function(actionData) {
|
|
dispatcher.dispatch(new loop.shared.actions.ReceivedTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: actionData.message,
|
|
receivedTimestamp: actionData.sentTimestamp
|
|
}));
|
|
}
|
|
};
|
|
|
|
var mockSDK = new MockSDK();
|
|
|
|
/**
|
|
* Every view that uses an activeRoomStore needs its own; if they shared
|
|
* an active store, they'd interfere with each other.
|
|
*
|
|
* @param options
|
|
* @returns {loop.store.ActiveRoomStore}
|
|
*/
|
|
function makeActiveRoomStore(options) {
|
|
var roomDispatcher = new loop.Dispatcher();
|
|
|
|
var store = new loop.store.ActiveRoomStore(roomDispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
sdkDriver: mockSDK
|
|
});
|
|
|
|
if (!("remoteVideoEnabled" in options)) {
|
|
options.remoteVideoEnabled = true;
|
|
}
|
|
|
|
if (!("mediaConnected" in options)) {
|
|
options.mediaConnected = true;
|
|
}
|
|
|
|
store.setStoreState({
|
|
mediaConnected: options.mediaConnected,
|
|
remoteVideoEnabled: options.remoteVideoEnabled,
|
|
roomName: "A Very Long Conversation Name",
|
|
roomState: options.roomState,
|
|
used: !!options.roomUsed,
|
|
videoMuted: !!options.videoMuted
|
|
});
|
|
|
|
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 {
|
|
// the dimensions here are taken from the poster images that we're
|
|
// using, since they give the <video> elements their initial intrinsic
|
|
// size. This ensures that the right aspect ratios are calculated.
|
|
// These are forced to 640x480, because it makes it visually easy to
|
|
// validate that the showcase looks like the real app on a chine
|
|
// (eg MacBook Pro) where that is the default camera resolution.
|
|
var newStoreState = {
|
|
localVideoDimensions: {
|
|
camera: {height: 480, orientation: 0, width: 640}
|
|
},
|
|
mediaConnected: options.mediaConnected,
|
|
receivingScreenShare: !!options.receivingScreenShare,
|
|
remoteVideoDimensions: {
|
|
camera: {height: 480, orientation: 0, width: 640}
|
|
},
|
|
remoteVideoEnabled: options.remoteVideoEnabled,
|
|
// 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),
|
|
roomState: options.roomState,
|
|
videoMuted: !!options.videoMuted
|
|
};
|
|
|
|
if (options.receivingScreenShare) {
|
|
// Note that the image we're using had to be scaled a bit, and
|
|
// it still ended up a bit narrower than the live thing that
|
|
// WebRTC sends; presumably a different scaling algorithm.
|
|
// For showcase purposes, this shouldn't matter much, as the sizes
|
|
// of things being shared will be fairly arbitrary.
|
|
newStoreState.remoteVideoDimensions.screen =
|
|
{height: 456, orientation: 0, width: 641};
|
|
}
|
|
|
|
store.setStoreState(newStoreState);
|
|
} catch (ex) {
|
|
console.error("exception in forcedUpdate:", ex);
|
|
}
|
|
};
|
|
|
|
return store;
|
|
}
|
|
|
|
var activeRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
|
});
|
|
|
|
var joinedRoomStore = makeActiveRoomStore({
|
|
mediaConnected: false,
|
|
roomState: ROOM_STATES.JOINED,
|
|
remoteVideoEnabled: false
|
|
});
|
|
|
|
var loadingRemoteVideoRoomStore = makeActiveRoomStore({
|
|
mediaConnected: false,
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
remoteSrcMediaElement: false
|
|
});
|
|
|
|
var readyRoomStore = makeActiveRoomStore({
|
|
mediaConnected: false,
|
|
roomState: ROOM_STATES.READY
|
|
});
|
|
|
|
var updatingActiveRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
|
});
|
|
|
|
var updatingMobileActiveRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
|
});
|
|
|
|
var localFaceMuteRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
videoMuted: true
|
|
});
|
|
|
|
var remoteFaceMuteRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
remoteVideoEnabled: false,
|
|
mediaConnected: true
|
|
});
|
|
|
|
var updatingSharingRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
receivingScreenShare: true
|
|
});
|
|
|
|
var updatingSharingRoomMobileStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
receivingScreenShare: true
|
|
});
|
|
|
|
var loadingRemoteLoadingScreenStore = makeActiveRoomStore({
|
|
mediaConnected: false,
|
|
receivingScreenShare: true,
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
remoteSrcMediaElement: false
|
|
});
|
|
var loadingScreenSharingRoomStore = makeActiveRoomStore({
|
|
receivingScreenShare: true,
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
|
});
|
|
|
|
/* Set up the stores for pending screen sharing */
|
|
loadingScreenSharingRoomStore.receivingScreenShare({
|
|
receiving: true,
|
|
srcMediaElement: false
|
|
});
|
|
loadingRemoteLoadingScreenStore.receivingScreenShare({
|
|
receiving: true,
|
|
srcMediaElement: false
|
|
});
|
|
|
|
var fullActiveRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.FULL
|
|
});
|
|
|
|
var failedRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.FAILED
|
|
});
|
|
|
|
var endedRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.ENDED,
|
|
roomUsed: true
|
|
});
|
|
|
|
var invitationRoomStore = new loop.store.RoomStore(dispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
activeRoomStore: makeActiveRoomStore({
|
|
roomState: ROOM_STATES.INIT
|
|
})
|
|
});
|
|
|
|
var roomStore = new loop.store.RoomStore(dispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
activeRoomStore: makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS
|
|
})
|
|
});
|
|
|
|
var desktopRoomStoreLoading = new loop.store.RoomStore(dispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
activeRoomStore: makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
mediaConnected: false,
|
|
remoteSrcMediaElement: false
|
|
})
|
|
});
|
|
|
|
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
|
|
});
|
|
var desktopLocalFaceMuteRoomStore = new loop.store.RoomStore(dispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
activeRoomStore: desktopLocalFaceMuteActiveRoomStore
|
|
});
|
|
|
|
var desktopRemoteFaceMuteActiveRoomStore = makeActiveRoomStore({
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
remoteVideoEnabled: false,
|
|
mediaConnected: true
|
|
});
|
|
var desktopRemoteFaceMuteRoomStore = new loop.store.RoomStore(dispatcher, {
|
|
mozLoop: navigator.mozLoop,
|
|
activeRoomStore: desktopRemoteFaceMuteActiveRoomStore
|
|
});
|
|
|
|
var textChatStore = new loop.store.TextChatStore(dispatcher, {
|
|
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",
|
|
roomUrl: "http://showcase",
|
|
urls: [{
|
|
description: "A wonderful page!",
|
|
location: "http://wonderful.invalid"
|
|
// use the fallback thumbnail
|
|
}]
|
|
}));
|
|
|
|
textChatStore.setStoreState({textChatEnabled: true});
|
|
|
|
dispatcher.dispatch(new sharedActions.SendTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "Rheet!",
|
|
sentTimestamp: "2015-06-23T22:21:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.ReceivedTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "Hello",
|
|
receivedTimestamp: "2015-06-23T23:24:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.SendTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "Nowforareallylongwordwithoutspacesorpunctuationwhichshouldcause" +
|
|
"linewrappingissuesifthecssiswrong",
|
|
sentTimestamp: "2015-06-23T22:23:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.SendTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "Check out this menu from DNA Pizza:" +
|
|
" http://example.com/DNA/pizza/menu/lots-of-different-kinds-of-pizza/" +
|
|
"%8D%E0%B8%88%E0%B8%A1%E0%B8%A3%E0%8D%E0%B8%88%E0%B8%A1%E0%B8%A3%E0%",
|
|
sentTimestamp: "2015-06-23T22:23:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.ReceivedTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "That avocado monkey-brains pie sounds tasty!",
|
|
receivedTimestamp: "2015-06-23T22:25:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.SendTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "What time should we meet?",
|
|
sentTimestamp: "2015-06-23T22:27:45.590Z"
|
|
}));
|
|
dispatcher.dispatch(new sharedActions.ReceivedTextChatMessage({
|
|
contentType: loop.shared.utils.CHAT_CONTENT_TYPES.TEXT,
|
|
message: "8:00 PM",
|
|
receivedTimestamp: "2015-06-23T22:27:45.590Z"
|
|
}));
|
|
|
|
loop.store.StoreMixin.register({
|
|
activeRoomStore: activeRoomStore,
|
|
conversationStore: conversationStores[0],
|
|
textChatStore: textChatStore
|
|
});
|
|
|
|
// Local mocks
|
|
var mockMozLoopNoRooms = _.cloneDeep(navigator.mozLoop);
|
|
mockMozLoopNoRooms.rooms.getAll = function(version, callback) {
|
|
callback(null, []);
|
|
};
|
|
|
|
var mockMozLoopNoRoomsNoContext = _.cloneDeep(navigator.mozLoop);
|
|
mockMozLoopNoRoomsNoContext.getSelectedTabMetadata = function(){};
|
|
mockMozLoopNoRoomsNoContext.rooms.getAll = function(version, callback) {
|
|
callback(null, []);
|
|
};
|
|
|
|
var roomStoreNoRooms = new loop.store.RoomStore(new loop.Dispatcher(), {
|
|
mozLoop: mockMozLoopNoRooms,
|
|
activeRoomStore: new loop.store.ActiveRoomStore(new loop.Dispatcher(), {
|
|
mozLoop: mockMozLoopNoRooms,
|
|
sdkDriver: mockSDK
|
|
})
|
|
});
|
|
|
|
/* xxx this is asynchronous - if start seeing things pending then this is the culprit */
|
|
roomStoreNoRooms.setStoreState({
|
|
pendingInitialRetrieval: false
|
|
});
|
|
|
|
var roomStoreNoRoomsPending = new loop.store.RoomStore(new loop.Dispatcher(), {
|
|
mozLoop: mockMozLoopNoRooms,
|
|
activeRoomStore: new loop.store.ActiveRoomStore(new loop.Dispatcher(), {
|
|
mozLoop: mockMozLoopNoRooms,
|
|
sdkDriver: mockSDK
|
|
})
|
|
});
|
|
|
|
var mockMozLoopLoggedIn = _.cloneDeep(navigator.mozLoop);
|
|
mockMozLoopLoggedIn.userProfile = {
|
|
email: "text@example.com",
|
|
uid: "0354b278a381d3cb408bb46ffc01266"
|
|
};
|
|
|
|
var mockMozLoopLoggedInNoContext = _.cloneDeep(navigator.mozLoop);
|
|
mockMozLoopLoggedInNoContext.getSelectedTabMetadata = function(){};
|
|
mockMozLoopLoggedInNoContext.userProfile = _.cloneDeep(mockMozLoopLoggedIn.userProfile);
|
|
|
|
var mockMozLoopLoggedInLongEmail = _.cloneDeep(navigator.mozLoop);
|
|
mockMozLoopLoggedInLongEmail.userProfile = {
|
|
email: "reallyreallylongtext@example.com",
|
|
uid: "0354b278a381d3cb408bb46ffc01266"
|
|
};
|
|
|
|
var mockMozLoopRooms = _.extend({}, navigator.mozLoop);
|
|
|
|
var mozLoopNoContacts = _.cloneDeep(navigator.mozLoop);
|
|
mozLoopNoContacts.contacts.getAll = function(callback) {
|
|
callback(null, []);
|
|
};
|
|
mozLoopNoContacts.userProfile = {
|
|
email: "reallyreallylongtext@example.com",
|
|
uid: "0354b278a381d3cb408bb46ffc01266"
|
|
};
|
|
mozLoopNoContacts.contacts.getAll = function(callback) {
|
|
callback(null, []);
|
|
};
|
|
|
|
var mozLoopNoContactsFilter = _.cloneDeep(navigator.mozLoop);
|
|
mozLoopNoContactsFilter.userProfile = {
|
|
email: "reallyreallylongtext@example.com",
|
|
uid: "0354b278a381d3cb408bb46ffc01266"
|
|
};
|
|
mozLoopNoContactsFilter.contacts.getAll = function(callback) {
|
|
callback(null, fakeFewerContacts); // Defined in fake-mozLoop.js.
|
|
};
|
|
|
|
var firstTimeUseMozLoop = _.cloneDeep(navigator.mozLoop);
|
|
firstTimeUseMozLoop.getLoopPref = function(prop) {
|
|
if (prop === "gettingStarted.seen") {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
var mockContact = {
|
|
name: ["Mr Smith"],
|
|
email: [{
|
|
value: "smith@invalid.com"
|
|
}]
|
|
};
|
|
|
|
var mockClient = {
|
|
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({
|
|
level: "error",
|
|
message: "Could Not Authenticate",
|
|
details: "Did you change your password?",
|
|
detailsButtonLabel: "Retry"
|
|
});
|
|
|
|
var SVGIcon = React.createClass({displayName: "SVGIcon",
|
|
propTypes: {
|
|
shapeId: React.PropTypes.string.isRequired,
|
|
size: React.PropTypes.string.isRequired
|
|
},
|
|
|
|
render: function() {
|
|
var sizeUnit = this.props.size.split("x");
|
|
return (
|
|
React.createElement("img", {className: "svg-icon",
|
|
height: sizeUnit[1],
|
|
src: "../content/shared/img/icons-" + this.props.size + ".svg#" + this.props.shapeId,
|
|
width: sizeUnit[0]})
|
|
);
|
|
}
|
|
});
|
|
|
|
var SVGIcons = React.createClass({displayName: "SVGIcons",
|
|
propTypes: {
|
|
size: React.PropTypes.string.isRequired
|
|
},
|
|
|
|
shapes: {
|
|
"10x10": ["close", "close-active", "close-disabled", "dropdown",
|
|
"dropdown-white", "dropdown-active", "dropdown-disabled", "edit",
|
|
"edit-active", "edit-disabled", "edit-white", "expand", "expand-active",
|
|
"expand-disabled", "minimize", "minimize-active", "minimize-disabled",
|
|
"settings-cog-grey", "settings-cog-white"
|
|
],
|
|
"14x14": ["audio", "audio-active", "audio-disabled", "facemute",
|
|
"facemute-active", "facemute-disabled", "hangup", "hangup-active",
|
|
"hangup-disabled", "hello", "hello-hover", "hello-active",
|
|
"incoming", "incoming-active", "incoming-disabled",
|
|
"link", "link-active", "link-disabled", "mute", "mute-active",
|
|
"mute-disabled", "pause", "pause-active", "pause-disabled", "video",
|
|
"video-white", "video-active", "video-disabled", "volume", "volume-active",
|
|
"volume-disabled", "clear", "magnifier"
|
|
],
|
|
"16x16": ["add", "add-hover", "add-active", "audio", "audio-hover", "audio-active",
|
|
"block", "block-red", "block-hover", "block-active", "contacts", "contacts-hover",
|
|
"contacts-active", "copy", "checkmark", "delete", "globe", "google", "google-hover",
|
|
"google-active", "history", "history-hover", "history-active", "leave",
|
|
"screen-white", "screenmute-white", "settings", "settings-hover", "settings-active",
|
|
"share-darkgrey", "tag", "tag-hover", "tag-active", "trash", "unblock",
|
|
"unblock-hover", "unblock-active", "video", "video-hover", "video-active",
|
|
"status-available", "status-unavailable"
|
|
]
|
|
},
|
|
|
|
render: function() {
|
|
var icons = this.shapes[this.props.size].map(function(shapeId, i) {
|
|
return (
|
|
React.createElement("li", {className: "svg-icon-entry", key: this.props.size + "-" + i},
|
|
React.createElement("p", null, React.createElement(SVGIcon, {shapeId: shapeId, size: this.props.size})),
|
|
React.createElement("p", null, shapeId)
|
|
)
|
|
);
|
|
}, this);
|
|
return (
|
|
React.createElement("ul", {className: "svg-icon-list"}, icons)
|
|
);
|
|
}
|
|
});
|
|
|
|
var FramedExample = React.createClass({displayName: "FramedExample",
|
|
propTypes: {
|
|
children: React.PropTypes.element,
|
|
cssClass: React.PropTypes.string,
|
|
dashed: React.PropTypes.bool,
|
|
height: React.PropTypes.number,
|
|
onContentsRendered: React.PropTypes.func,
|
|
summary: React.PropTypes.string.isRequired,
|
|
width: React.PropTypes.number
|
|
},
|
|
|
|
makeId: function(prefix) {
|
|
return (prefix || "") + this.props.summary.toLowerCase().replace(/\s/g, "-");
|
|
},
|
|
|
|
render: function() {
|
|
var height = this.props.height;
|
|
var width = this.props.width;
|
|
|
|
// make room for a 1-pixel border on each edge
|
|
if (this.props.dashed) {
|
|
height += 2;
|
|
width += 2;
|
|
}
|
|
|
|
var cx = React.addons.classSet;
|
|
return (
|
|
React.createElement("div", {className: "example"},
|
|
React.createElement("h3", {id: this.makeId()},
|
|
this.props.summary,
|
|
React.createElement("a", {href: this.makeId("#")}, " ¶")
|
|
),
|
|
React.createElement("div", {className: "comp"},
|
|
React.createElement(Frame, {className: cx({dashed: this.props.dashed}),
|
|
cssClass: this.props.cssClass,
|
|
height: height,
|
|
onContentsRendered: this.props.onContentsRendered,
|
|
width: width},
|
|
this.props.children
|
|
)
|
|
)
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var Section = React.createClass({displayName: "Section",
|
|
propTypes: {
|
|
children: React.PropTypes.oneOfType([
|
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
|
React.PropTypes.element
|
|
]).isRequired,
|
|
className: React.PropTypes.string,
|
|
name: React.PropTypes.string.isRequired
|
|
},
|
|
|
|
render: function() {
|
|
return (
|
|
React.createElement("section", {className: this.props.className, id: this.props.name},
|
|
React.createElement("h1", null, this.props.name),
|
|
this.props.children
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var ShowCase = React.createClass({displayName: "ShowCase",
|
|
propTypes: {
|
|
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
|
|
},
|
|
|
|
getInitialState: function() {
|
|
// We assume for now that rtl is the only query parameter.
|
|
//
|
|
// Note: this check is repeated in react-frame-component to save passing
|
|
// rtlMode down the props tree.
|
|
var rtlMode = document.location.search === "?rtl=1";
|
|
|
|
return {
|
|
rtlMode: rtlMode
|
|
};
|
|
},
|
|
|
|
_handleCheckboxChange: function(newState) {
|
|
var newLocation = "";
|
|
if (newState.checked) {
|
|
newLocation = document.location.href.split("#")[0];
|
|
newLocation += "?rtl=1";
|
|
} else {
|
|
newLocation = document.location.href.split("?")[0];
|
|
}
|
|
newLocation += document.location.hash;
|
|
document.location = newLocation;
|
|
},
|
|
|
|
render: function() {
|
|
if (this.state.rtlMode) {
|
|
document.documentElement.setAttribute("lang", "ar");
|
|
document.documentElement.setAttribute("dir", "rtl");
|
|
}
|
|
|
|
return (
|
|
React.createElement("div", {className: "showcase"},
|
|
React.createElement("header", null,
|
|
React.createElement("h1", null, "Loop UI Components Showcase"),
|
|
React.createElement(Checkbox, {checked: this.state.rtlMode, label: "RTL mode?",
|
|
onChange: this._handleCheckboxChange}),
|
|
React.createElement("nav", {className: "showcase-menu"},
|
|
React.Children.map(this.props.children, function(section) {
|
|
return (
|
|
React.createElement("a", {className: "btn btn-info", href: "#" + section.props.name},
|
|
section.props.name
|
|
)
|
|
);
|
|
})
|
|
)
|
|
),
|
|
this.props.children
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
var App = React.createClass({displayName: "App",
|
|
|
|
render: function() {
|
|
return (
|
|
React.createElement(ShowCase, null,
|
|
React.createElement(Section, {name: "PanelView"},
|
|
React.createElement("p", {className: "note"},
|
|
React.createElement("strong", null, "Note:"), " 332px wide."
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "First time experience view",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: firstTimeUseMozLoop,
|
|
notifications: notifications,
|
|
roomStore: roomStore})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Re-sign-in view",
|
|
width: 332},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(SignInRequestView, {mozLoop: mockMozLoopLoggedIn})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Room list",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: notifications,
|
|
roomStore: roomStore})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Room list (No Context)",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedInNoContext,
|
|
notifications: notifications,
|
|
roomStore: roomStore})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Room list (no rooms)",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopNoRooms,
|
|
notifications: notifications,
|
|
roomStore: roomStoreNoRooms})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Room list (no rooms and no context)",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopNoRoomsNoContext,
|
|
notifications: notifications,
|
|
roomStore: roomStoreNoRooms})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Room list (loading view)",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopNoRoomsNoContext,
|
|
notifications: notifications,
|
|
roomStore: roomStoreNoRoomsPending})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact list tab",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact list tab (no search filter)",
|
|
width: 332},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mozLoopNoContactsFilter,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact list tab long email",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedInLongEmail,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact list tab (no contacts)",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mozLoopNoContacts,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Error Notification",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: navigator.mozLoop,
|
|
notifications: errNotifications,
|
|
roomStore: roomStore})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Error Notification - authenticated",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: errNotifications,
|
|
roomStore: roomStore})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact import success",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: new loop.shared.models.NotificationCollection([{level: "success", message: "Import success"}]),
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact import error",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {dispatcher: dispatcher,
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: new loop.shared.models.NotificationCollection([{level: "error", message: "Import error"}]),
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts"})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact Form - Add",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
initialSelectedTabComponent: "contactAdd",
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts",
|
|
userProfile: {email: "test@example.com"}})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 410,
|
|
summary: "Contact Form - Edit",
|
|
width: 330},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(PanelView, {client: mockClient,
|
|
dispatcher: dispatcher,
|
|
initialSelectedTabComponent: "contactEdit",
|
|
mozLoop: mockMozLoopLoggedIn,
|
|
notifications: notifications,
|
|
roomStore: roomStore,
|
|
selectedTab: "contacts",
|
|
userProfile: {email: "test@example.com"}})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "Availability Dropdown"},
|
|
React.createElement("p", {className: "note"},
|
|
React.createElement("strong", null, "Note:"), " 332px wide."
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 200,
|
|
summary: "AvailabilityDropdown",
|
|
width: 332},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(AvailabilityDropdown, null)
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 200,
|
|
summary: "AvailabilityDropdown Expanded",
|
|
width: 332},
|
|
React.createElement("div", {className: "panel force-menu-show", style: {"height": "100%", "paddingTop": "50px"}},
|
|
React.createElement(AvailabilityDropdown, null)
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "ContactDetail"},
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 50,
|
|
summary: "ContactDetail",
|
|
width: 334},
|
|
React.createElement("div", {className: "panel force-menu-show"},
|
|
React.createElement(ContactDetail, {contact: fakeManyContacts[0],
|
|
getContainerCoordinates: function() { return {"top": 0, "height": 0 }; },
|
|
handleContactAction: function() {}})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "ContactDropdown"},
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 272,
|
|
summary: "ContactDropdown not blocked can edit",
|
|
width: 300},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(ContactDropdown, {blocked: false,
|
|
canEdit: true,
|
|
eventPosY: 0,
|
|
getContainerCoordinates: function() { return {"top": 0, "height": 0 }; },
|
|
handleAction: function () {}})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {cssClass: "fx-embedded-panel",
|
|
dashed: true,
|
|
height: 272,
|
|
summary: "ContactDropdown blocked can't edit",
|
|
width: 300},
|
|
React.createElement("div", {className: "panel"},
|
|
React.createElement(ContactDropdown, {blocked: true,
|
|
canEdit: false,
|
|
eventPosY: 0,
|
|
getContainerCoordinates: function() { return {"top": 0, "height": 0 }; },
|
|
handleAction: function () {}})
|
|
)
|
|
)
|
|
),
|
|
|
|
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,
|
|
height: 56,
|
|
summary: "Default",
|
|
width: 300},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true},
|
|
dispatcher: dispatcher,
|
|
hangup: noop,
|
|
publishStream: noop,
|
|
screenShare: { state: SCREEN_SHARE_STATES.INACTIVE, visible: true},
|
|
settingsMenuItems: [{ id: "feedback" }],
|
|
show: true,
|
|
video: { enabled: true, visible: true}})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 56,
|
|
summary: "Video muted, Screen share pending",
|
|
width: 300},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(ConversationToolbar, {audio: { enabled: true, visible: true},
|
|
dispatcher: dispatcher,
|
|
hangup: noop,
|
|
publishStream: noop,
|
|
screenShare: { state: SCREEN_SHARE_STATES.PENDING, visible: true},
|
|
settingsMenuItems: [{ id: "feedback" }],
|
|
show: true,
|
|
video: { enabled: false, visible: true}})
|
|
)
|
|
),
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 56,
|
|
summary: "Audio muted, Screen share active",
|
|
width: 300},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(ConversationToolbar, {audio: { enabled: false, visible: true},
|
|
dispatcher: dispatcher,
|
|
hangup: noop,
|
|
publishStream: noop,
|
|
screenShare: { state: SCREEN_SHARE_STATES.ACTIVE, visible: true},
|
|
settingsMenuItems: [{ id: "feedback" }],
|
|
show: true,
|
|
video: { enabled: true, visible: true}})
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
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"}
|
|
),
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 288,
|
|
summary: "Default (useable demo)",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(FeedbackView, {mozLoop: {},
|
|
onAfterFeedbackReceived: function() {}})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "AlertMessages"},
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 288,
|
|
summary: "Various alerts",
|
|
width: 348},
|
|
React.createElement("div", null,
|
|
React.createElement("div", {className: "alert alert-warning"},
|
|
React.createElement("button", {className: "close"}),
|
|
React.createElement("p", {className: "message"},
|
|
"The person you were calling has ended the conversation."
|
|
)
|
|
),
|
|
React.createElement("br", null),
|
|
React.createElement("div", {className: "alert alert-error"},
|
|
React.createElement("button", {className: "close"}),
|
|
React.createElement("p", {className: "message"},
|
|
"The person you were calling has ended the conversation."
|
|
)
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "UnsupportedBrowserView"},
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 430,
|
|
summary: "Standalone Unsupported Browser",
|
|
width: 480},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(UnsupportedBrowserView, {isFirefox: false})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "UnsupportedDeviceView"},
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 430,
|
|
summary: "Standalone Unsupported Device",
|
|
width: 480},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(UnsupportedDeviceView, {platform: "ios"})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "RoomFailureView"},
|
|
React.createElement(FramedExample, {
|
|
dashed: true,
|
|
height: 288,
|
|
summary: "Desktop Room Failure View",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(RoomFailureView, {
|
|
dispatcher: dispatcher,
|
|
failureReason: FAILURE_DETAILS.UNKNOWN,
|
|
mozLoop: navigator.mozLoop})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "DesktopRoomConversationView"},
|
|
React.createElement(FramedExample, {height: 398,
|
|
onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room conversation (invitation, text-chat inclusion/scrollbars don't happen in real client)",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(DesktopRoomConversationView, {
|
|
chatWindowDetached: false,
|
|
dispatcher: dispatcher,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
mozLoop: navigator.mozLoop,
|
|
onCallTerminated: function(){},
|
|
roomState: ROOM_STATES.INIT,
|
|
roomStore: invitationRoomStore})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {height: 288,
|
|
onContentsRendered: invitationRoomStore.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room Edit Context w/Error",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded room-invitation-overlay"},
|
|
React.createElement(DesktopRoomEditContextView, {
|
|
dispatcher: dispatcher,
|
|
error: {},
|
|
mozLoop: navigator.mozLoop,
|
|
onClose: function(){},
|
|
roomData: {},
|
|
savingContext: false,
|
|
show: true}
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 398,
|
|
onContentsRendered: desktopRoomStoreLoading.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room conversation (loading)",
|
|
width: 348},
|
|
/* Hide scrollbars here. Rotating loading div overflows and causes
|
|
scrollbars to appear */
|
|
React.createElement("div", {className: "fx-embedded overflow-hidden"},
|
|
React.createElement(DesktopRoomConversationView, {
|
|
chatWindowDetached: false,
|
|
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: desktopRoomStoreLoading})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 398,
|
|
onContentsRendered: roomStore.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room conversation",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(DesktopRoomConversationView, {
|
|
chatWindowDetached: false,
|
|
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: roomStore})
|
|
)
|
|
),
|
|
|
|
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, {
|
|
chatWindowDetached: false,
|
|
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, {
|
|
chatWindowDetached: false,
|
|
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: 398,
|
|
onContentsRendered: desktopLocalFaceMuteRoomStore.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room conversation local face-mute",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(DesktopRoomConversationView, {
|
|
chatWindowDetached: false,
|
|
dispatcher: dispatcher,
|
|
mozLoop: navigator.mozLoop,
|
|
onCallTerminated: function(){},
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomStore: desktopLocalFaceMuteRoomStore})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 398,
|
|
onContentsRendered: desktopRemoteFaceMuteRoomStore.activeRoomStore.forcedUpdate,
|
|
summary: "Desktop room conversation remote face-mute",
|
|
width: 348},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(DesktopRoomConversationView, {
|
|
chatWindowDetached: false,
|
|
dispatcher: dispatcher,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
mozLoop: navigator.mozLoop,
|
|
onCallTerminated: function(){},
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomStore: desktopRemoteFaceMuteRoomStore})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "StandaloneHandleUserAgentView"},
|
|
React.createElement(FramedExample, {
|
|
cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
summary: "Standalone Room Handle Join in Firefox",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneHandleUserAgentView, {
|
|
activeRoomStore: readyRoomStore,
|
|
dispatcher: dispatcher})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "StandaloneRoomView"},
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
summary: "Standalone room conversation (ready)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: readyRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
roomState: ROOM_STATES.READY})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
onContentsRendered: joinedRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (joined)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: joinedRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png"})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
onContentsRendered: loadingRemoteVideoRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (loading remote)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: loadingRemoteVideoRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png"})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
onContentsRendered: updatingActiveRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (has-participants, 644x483)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: updatingActiveRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
onContentsRendered: localFaceMuteRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (local face mute, has-participants, 644x483)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: localFaceMuteRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png"})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
onContentsRendered: remoteFaceMuteRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (remote face mute, has-participants, 644x483)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: remoteFaceMuteRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png"})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 660,
|
|
onContentsRendered: loadingRemoteLoadingScreenStore.forcedUpdate,
|
|
summary: "Standalone room convo (has-participants, loading screen share, loading remote video, 800x660)",
|
|
width: 800},
|
|
/* Hide scrollbars here. Rotating loading div overflows and causes
|
|
scrollbars to appear */
|
|
React.createElement("div", {className: "standalone overflow-hidden"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: loadingRemoteLoadingScreenStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 660,
|
|
onContentsRendered: loadingScreenSharingRoomStore.forcedUpdate,
|
|
summary: "Standalone room convo (has-participants, loading screen share, 800x660)",
|
|
width: 800},
|
|
/* Hide scrollbars here. Rotating loading div overflows and causes
|
|
scrollbars to appear */
|
|
React.createElement("div", {className: "standalone overflow-hidden"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: loadingScreenSharingRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 660,
|
|
onContentsRendered: updatingSharingRoomStore.forcedUpdate,
|
|
summary: "Standalone room convo (has-participants, receivingScreenShare, 800x660)",
|
|
width: 800},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: updatingSharingRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
screenSharePosterUrl: "sample-img/video-screen-terminal.png"})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
summary: "Standalone room conversation (full - FFx user)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: fullActiveRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
summary: "Standalone room conversation (full - non FFx user)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: fullActiveRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: false})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 483,
|
|
summary: "Standalone room conversation (failed)",
|
|
width: 644},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: failedRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: false})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "StandaloneRoomView (Mobile)"},
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 480,
|
|
onContentsRendered: updatingMobileActiveRoomStore.forcedUpdate,
|
|
summary: "Standalone room conversation (has-participants, 600x480)",
|
|
width: 600},
|
|
React.createElement("div", {className: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: updatingMobileActiveRoomStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 480,
|
|
onContentsRendered: updatingSharingRoomMobileStore.forcedUpdate,
|
|
summary: "Standalone room convo (has-participants, receivingScreenShare, 600x480)",
|
|
width: 600},
|
|
React.createElement("div", {className: "standalone", cssClass: "standalone"},
|
|
React.createElement(StandaloneRoomView, {
|
|
activeRoomStore: updatingSharingRoomMobileStore,
|
|
dispatcher: dispatcher,
|
|
isFirefox: true,
|
|
localPosterUrl: "sample-img/video-screen-local.png",
|
|
remotePosterUrl: "sample-img/video-screen-remote.png",
|
|
roomState: ROOM_STATES.HAS_PARTICIPANTS,
|
|
screenSharePosterUrl: "sample-img/video-screen-terminal.png"})
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {name: "TextChatView"},
|
|
React.createElement(FramedExample, {dashed: true,
|
|
height: 160,
|
|
summary: "TextChatView: desktop embedded",
|
|
width: 298},
|
|
React.createElement("div", {className: "fx-embedded"},
|
|
React.createElement(TextChatView, {dispatcher: dispatcher,
|
|
showRoomName: false,
|
|
useDesktopPaths: false})
|
|
)
|
|
),
|
|
|
|
React.createElement(FramedExample, {cssClass: "standalone",
|
|
dashed: true,
|
|
height: 400,
|
|
summary: "Standalone Text Chat conversation (200x400)",
|
|
width: 200},
|
|
React.createElement("div", {className: "standalone text-chat-example"},
|
|
React.createElement("div", {className: "media-wrapper"},
|
|
React.createElement(TextChatView, {
|
|
dispatcher: dispatcher,
|
|
showRoomName: true,
|
|
useDesktopPaths: false})
|
|
)
|
|
)
|
|
)
|
|
),
|
|
|
|
React.createElement(Section, {className: "svg-icons", name: "SVG icons preview"},
|
|
React.createElement(FramedExample, {height: 240,
|
|
summary: "10x10",
|
|
width: 800},
|
|
React.createElement(SVGIcons, {size: "10x10"})
|
|
),
|
|
React.createElement(FramedExample, {height: 350,
|
|
summary: "14x14",
|
|
width: 800},
|
|
React.createElement(SVGIcons, {size: "14x14"})
|
|
),
|
|
React.createElement(FramedExample, {height: 480,
|
|
summary: "16x16",
|
|
width: 800},
|
|
React.createElement(SVGIcons, {size: "16x16"})
|
|
)
|
|
)
|
|
|
|
)
|
|
);
|
|
}
|
|
});
|
|
|
|
window.addEventListener("DOMContentLoaded", function() {
|
|
var uncaughtError;
|
|
var consoleWarn = console.warn;
|
|
var caughtWarnings = [];
|
|
console.warn = function() {
|
|
var args = Array.slice(arguments);
|
|
caughtWarnings.push(args);
|
|
consoleWarn.apply(console, args);
|
|
};
|
|
|
|
try {
|
|
React.render(React.createElement(App, null), document.getElementById("main"));
|
|
|
|
for (var listener of visibilityListeners) {
|
|
listener({target: {hidden: false}});
|
|
}
|
|
} catch(err) {
|
|
console.error(err);
|
|
uncaughtError = err;
|
|
}
|
|
|
|
// Wait until all the FramedExamples have been fully loaded.
|
|
setTimeout(function waitForQueuedFrames() {
|
|
if (window.queuedFrames.length !== 0) {
|
|
setTimeout(waitForQueuedFrames, 500);
|
|
return;
|
|
}
|
|
// Put the title back, in case views changed it.
|
|
document.title = "Loop UI Components Showcase";
|
|
|
|
// 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 = 0;
|
|
var warningsMismatch = caughtWarnings.length !== expectedWarningsCount;
|
|
var resultsElement = document.querySelector("#results");
|
|
var divFailuresNode = document.createElement("div");
|
|
var pCompleteNode = document.createElement("p");
|
|
var emNode = document.createElement("em");
|
|
|
|
if (uncaughtError || warningsMismatch) {
|
|
var liTestFail = document.createElement("li");
|
|
var h2Node = document.createElement("h2");
|
|
var preErrorNode = document.createElement("pre");
|
|
|
|
divFailuresNode.className = "failures";
|
|
emNode.innerHTML = ((uncaughtError && warningsMismatch) ? 2 : 1).toString();
|
|
divFailuresNode.appendChild(emNode);
|
|
resultsElement.appendChild(divFailuresNode);
|
|
|
|
if (warningsMismatch) {
|
|
liTestFail.className = "test";
|
|
liTestFail.className = liTestFail.className + " fail";
|
|
h2Node.innerHTML = "Unexpected number of warnings detected in UI-Showcase";
|
|
preErrorNode.className = "error";
|
|
preErrorNode.innerHTML = "Got: " + caughtWarnings.length + "\n" + "Expected: " + expectedWarningsCount;
|
|
liTestFail.appendChild(h2Node);
|
|
liTestFail.appendChild(preErrorNode);
|
|
resultsElement.appendChild(liTestFail);
|
|
}
|
|
if (uncaughtError) {
|
|
liTestFail.className = "test";
|
|
liTestFail.className = liTestFail.className + " fail";
|
|
h2Node.innerHTML = "Errors rendering UI-Showcase";
|
|
preErrorNode.className = "error";
|
|
preErrorNode.innerHTML = uncaughtError + "\n" + uncaughtError.stack;
|
|
liTestFail.appendChild(h2Node);
|
|
liTestFail.appendChild(preErrorNode);
|
|
resultsElement.appendChild(liTestFail);
|
|
}
|
|
} else {
|
|
divFailuresNode.className = "failures";
|
|
emNode.innerHTML = "0";
|
|
divFailuresNode.appendChild(emNode);
|
|
resultsElement.appendChild(divFailuresNode);
|
|
}
|
|
pCompleteNode.id = "complete";
|
|
pCompleteNode.innerHTML = "Completed";
|
|
resultsElement.appendChild(pCompleteNode);
|
|
}, 1000);
|
|
});
|
|
|
|
})();
|