pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #193 from longsleep/views-prepare 

First step in getting rid of the huge mediastreamcontroller.
pull/194/head
Simon Eisenmann 10 years ago
parent
1d031b71ca fff50faa2d
commit
5a3652e229
9 changed files with 254 additions and 168 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      html/logo.html
  2. 51
      html/main.html
  3. 12
      static/js/app.js
  4. 117
      static/js/controllers/appcontroller.js
  5. 6
      static/js/controllers/controllers.js
  6. 137
      static/js/controllers/mediastreamcontroller.js
  7. 6
      static/js/directives/directives.js
  8. 38
      static/js/directives/ui.js
  9. 52
      static/partials/ui.html

1
html/logo.html
Unescape View File

@ -1 +0,0 @@
<%define "logo"%><span class="logo" title="<%.Cfg.Title%>"><span class="desc"><a target="_blank" href="https://github.com/strukturag/spreed-webrtc">WebRTC</a></span></span><%end%>

51
html/main.html
Unescape View File

@ -6,56 +6,7 @@
<body spreed-webrtc> <body spreed-webrtc>
<div id="background"></div> <div id="background"></div>
<div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div> <div id="loader"><div><i class="fa fa-circle-o-notch fa-spin"></i><div class="loader-message"></div></div></div>
<page></page> <ui></ui>
<div id="bar" class="navbar navbar-default navbar-fixed-top bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand left">
<%template "logo" .%>
</div>
</div>
<div class="navbar-collapse collapse" collapse="isCollapsed">
<ul class="nav navbar-nav navbar-right right">
<li class="ng-cloak">
<menu></menu>
</li>
</ul>
</div>
</div>
<div class="callbar middle">
<status-message></status-message>
</div>
</div>
<div id="roombar" class="ng-cloak">
<room-bar/>
</div>
<div id="audiolevel" class="ng-cloak">
<div class="audio-level" title="{{_('Your audio level')}}"></div>
</div>
<div id="audiovideo" class="ng-cloak" ng-show="peer">
<audio-video/>
</div>
<div id="screenshare" class="ng-cloak mainview">
<screenshare/>
</div>
<div id="presentation" class="ng-cloak mainview">
<presentation/>
</div>
<div id="youtubevideo" class="ng-cloak mainview">
<youtubevideo/>
</div>
<div class="ng-cloak" id="rightslide">
<div class="rightslidepane">
<div id="buddylist"><buddy-list/></div>
<div id="chat"><chat/></div>
</div>
</div>
<div class="ng-cloak" id="settings" ng-class="{show: layout.settings}"><settings/></div>
<script data-main="<%.Cfg.S%>/js/<%.App%>" data-plugin="<%.Cfg.Plugin%>" src="<%.Cfg.S%>/js/libs/require/require.js"></script> <script data-main="<%.Cfg.S%>/js/<%.App%>" data-plugin="<%.Cfg.Plugin%>" src="<%.Cfg.S%>/js/libs/require/require.js"></script>
<%template "extra-body" .%> <%template "extra-body" .%>
</body> </body>

12
static/js/app.js
Unescape View File

@ -190,7 +190,17 @@ define([
app.directive("spreedWebrtc", [function() { app.directive("spreedWebrtc", [function() {
return { return {
restrict: "A", restrict: "A",
controller: "MediastreamController" scope: false,
controller: "AppController"
}
}]);
app.directive("uiLogo", ["globalContext", function(globalContext) {
return {
restrict: "A",
link: function($scope, $element, $attrs) {
$attrs.$set("title", globalContext.Cfg.Title || "");
}
} }
}]); }]);

117
static/js/controllers/appcontroller.js
Unescape View File

@ -0,0 +1,117 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
"use strict";
define(["jquery", "angular", "underscore"], function($, angular, _) {
// AppController
return ["$scope", "$window", "appData", "userSettingsData", "$timeout", function($scope, $window, appData, userSettingsData, $timeout) {
// Disable drag and drop.
$($window).on("dragover dragenter drop", function(event) {
event.preventDefault();
});
appData.set($scope);
// User related scope data.
$scope.roomsHistory = [];
$scope.defaults = {
displayName: null,
buddyPicture: null,
message: null,
settings: {
videoQuality: "high",
sendStereo: false,
maxFrameRate: 20,
defaultRoom: "",
language: "",
audioRenderToAssociatedSkin: true,
videoCpuOveruseDetection: true,
experimental: {
enabled: false,
audioEchoCancellation2: true,
audioAutoGainControl2: true,
audioNoiseSuppression2: true,
audioTypingNoiseDetection: true,
videoLeakyBucket: true,
videoNoiseReduction: false
}
}
};
$scope.master = angular.copy($scope.defaults);
$scope.update = function(user) {
$scope.master = angular.copy(user);
if (appData.flags.connected) {
$scope.updateStatus();
}
$scope.refreshWebrtcSettings();
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.loadUserSettings = function() {
$scope.master = angular.copy($scope.defaults);
var storedUser = userSettingsData.load();
if (storedUser) {
$scope.user = $.extend(true, {}, $scope.master, storedUser);
$scope.user.settings = $.extend(true, {}, $scope.user.settings, $scope.master.settings, $scope.user.settings);
$scope.update($scope.user);
$scope.loadedUser = storedUser.displayName && true;
} else {
$scope.loadedUser = false;
}
$scope.roomsHistory = [];
appData.e.triggerHandler("userSettingsLoaded", [$scope.loadedUser, $scope.user]);
$scope.reset();
};
$scope.manualReloadApp = function(url) {
appData.flags.manualUnload = true;
if (url) {
$window.location.href = url;
$timeout(function() {
appData.flags.manualUnload = false;
}, 0);
} else {
$window.location.reload(true);
}
};
$scope.$on("room.joined", function(event, roomName) {
if (roomName) {
_.pull($scope.roomsHistory, roomName);
$scope.roomsHistory.unshift(roomName);
if ($scope.roomsHistory.length > 15) {
// Limit the history.
$scope.roomsHistory = $scope.roomsHistory.splice(0, 15);
}
}
});
$scope.reset(); // Call once for bootstrap.
}];
});

6
static/js/controllers/controllers.js
Unescape View File

@ -28,7 +28,8 @@ define([
'controllers/chatroomcontroller', 'controllers/chatroomcontroller',
'controllers/usersettingscontroller', 'controllers/usersettingscontroller',
'controllers/contactsmanagercontroller', 'controllers/contactsmanagercontroller',
'controllers/contactsmanagereditcontroller'], function(_, MediastreamController, StatusmessageController, ChatroomController, UsersettingsController, ContactsmanagerController, ContactsmanagereditController) { 'controllers/contactsmanagereditcontroller',
'controllers/appcontroller'], function(_, MediastreamController, StatusmessageController, ChatroomController, UsersettingsController, ContactsmanagerController, ContactsmanagereditController, AppController) {
var controllers = { var controllers = {
MediastreamController: MediastreamController, MediastreamController: MediastreamController,
@ -36,7 +37,8 @@ define([
ChatroomController: ChatroomController, ChatroomController: ChatroomController,
UsersettingsController: UsersettingsController, UsersettingsController: UsersettingsController,
ContactsmanagerController: ContactsmanagerController, ContactsmanagerController: ContactsmanagerController,
ContactsmanagereditController: ContactsmanagereditController ContactsmanagereditController: ContactsmanagereditController,
AppController: AppController
}; };
var initialize = function(angModule) { var initialize = function(angModule) {

137
static/js/controllers/mediastreamcontroller.js
Unescape View File

@ -20,21 +20,13 @@
*/ */
"use strict"; "use strict";
define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'modernizr', 'webrtc.adapter'], function($, _, angular, BigScreen, moment, sjcl, Modernizr) { define(['jquery', 'underscore', 'bigscreen', 'moment', 'sjcl', 'modernizr', 'webrtc.adapter'], function($, _, BigScreen, moment, sjcl, Modernizr) {
return ["$scope", "$rootScope", "$element", "$window", "$timeout", "safeDisplayName", "safeApply", "mediaStream", "appData", "playSound", "desktopNotify", "alertify", "toastr", "translation", "fileDownload", "localStorage", "screensharing", "userSettingsData", "localStatus", "dialogs", "rooms", "constraints", function($scope, $rootScope, $element, $window, $timeout, safeDisplayName, safeApply, mediaStream, appData, playSound, desktopNotify, alertify, toastr, translation, fileDownload, localStorage, screensharing, userSettingsData, localStatus, dialogs, rooms, constraints) { return ["$scope", "$rootScope", "$element", "$window", "$timeout", "safeDisplayName", "safeApply", "mediaStream", "appData", "playSound", "desktopNotify", "alertify", "toastr", "translation", "fileDownload", "localStorage", "screensharing", "localStatus", "dialogs", "rooms", "constraints", function($scope, $rootScope, $element, $window, $timeout, safeDisplayName, safeApply, mediaStream, appData, playSound, desktopNotify, alertify, toastr, translation, fileDownload, localStorage, screensharing, localStatus, dialogs, rooms, constraints) {
/*console.log("route", $route, $routeParams, $location);*/
// Disable drag and drop.
$($window).on("dragover dragenter drop", function(event) {
event.preventDefault();
});
// Avoid accidential reloads or exits when in a call. // Avoid accidential reloads or exits when in a call.
var manualUnload = false;
$($window).on("beforeunload", function(event) { $($window).on("beforeunload", function(event) {
if (manualUnload || !$scope.peer) { if (appData.flags.manualUnload || !$scope.peer) {
return; return;
} }
return translation._("Close this window and disconnect?"); return translation._("Close this window and disconnect?");
@ -93,8 +85,6 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
"prompt": "question1" "prompt": "question1"
}); });
appData.set($scope);
var displayName = safeDisplayName; var displayName = safeDisplayName;
// Init STUN from server config. // Init STUN from server config.
@ -112,7 +102,7 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
$scope.supported = { $scope.supported = {
screensharing: screensharing.supported, screensharing: screensharing.supported,
constraints: constraints.supported constraints: constraints.supported
} };
// Default scope data. // Default scope data.
$scope.status = "initializing"; $scope.status = "initializing";
@ -132,50 +122,6 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
$scope.chatMessagesUnseen = 0; $scope.chatMessagesUnseen = 0;
$scope.autoAccept = null; $scope.autoAccept = null;
$scope.isCollapsed = true; $scope.isCollapsed = true;
$scope.roomsHistory = [];
$scope.defaults = {
displayName: null,
buddyPicture: null,
message: null,
settings: {
videoQuality: "high",
sendStereo: false,
maxFrameRate: 20,
defaultRoom: "",
language: "",
audioRenderToAssociatedSkin: true,
videoCpuOveruseDetection: true,
experimental: {
enabled: false,
audioEchoCancellation2: true,
audioAutoGainControl2: true,
audioNoiseSuppression2: true,
audioTypingNoiseDetection: true,
videoLeakyBucket: true,
videoNoiseReduction: false
}
}
};
$scope.master = angular.copy($scope.defaults);
// Data voids.
var resurrect = null;
var reconnecting = false;
var connected = false;
var autoreconnect = true;
$scope.update = function(user) {
$scope.master = angular.copy(user);
if (connected) {
$scope.updateStatus();
}
$scope.refreshWebrtcSettings();
};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset(); // Call once for bootstrap.
$scope.setStatus = function(status) { $scope.setStatus = function(status) {
// This is the connection status to signaling server. // This is the connection status to signaling server.
@ -230,34 +176,6 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
}; };
$scope.manualReloadApp = function(url) {
manualUnload = true;
if (url) {
$window.location.href = url;
$timeout(function() {
manualUnload = false;
}, 0);
} else {
$window.location.reload(true);
}
};
$scope.loadUserSettings = function() {
$scope.master = angular.copy($scope.defaults);
var storedUser = userSettingsData.load();
if (storedUser) {
$scope.user = $.extend(true, {}, $scope.master, storedUser);
$scope.user.settings = $.extend(true, {}, $scope.user.settings, $scope.master.settings, $scope.user.settings);
$scope.update($scope.user);
$scope.loadedUser = storedUser.displayName && true;
} else {
$scope.loadedUser = false;
}
$scope.roomsHistory = [];
appData.e.triggerHandler("userSettingsLoaded", [$scope.loadedUser, $scope.user]);
$scope.reset();
};
$scope.toggleBuddylist = (function() { $scope.toggleBuddylist = (function() {
var oldState = null; var oldState = null;
return function(status, force) { return function(status, force) {
@ -364,9 +282,9 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
} }
// Support resurrection shrine. // Support resurrection shrine.
if (resurrect) { if (appData.flags.resurrect) {
var resurrection = resurrect; var resurrection = appData.flags.resurrect;
resurrect = null; appData.flags.resurrect = null;
$timeout(function() { $timeout(function() {
if (resurrection.id === $scope.id) { if (resurrection.id === $scope.id) {
console.log("Using resurrection shrine", resurrection); console.log("Using resurrection shrine", resurrection);
@ -489,25 +407,32 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
alertify.dialog.alert(translation._("Oops") + "<br/>" + message); alertify.dialog.alert(translation._("Oops") + "<br/>" + message);
}); });
appData.flags.autoreconnect = true;
appData.flags.autoreconnectDelay = 0;
var reconnect = function() { var reconnect = function() {
if (connected && autoreconnect) { if (appData.flags.connected && appData.flags.autoreconnect) {
if (resurrect === null) { if (appData.flags.resurrect === null) {
// Storage data at the resurrection shrine. // Storage data at the resurrection shrine.
resurrect = { appData.flags.resurrect = {
status: $scope.getStatus(), status: $scope.getStatus(),
id: $scope.id id: $scope.id
} }
console.log("Stored data at the resurrection shrine", resurrect); console.log("Stored data at the resurrection shrine", appData.flags.resurrect);
}
if (!appData.flags.reconnecting) {
var delay = appData.flags.autoreconnectDelay;
if (delay < 10000) {
appData.flags.autoreconnectDelay += 500;
} }
if (!reconnecting) { appData.flags.reconnecting = true;
reconnecting = true;
_.delay(function() { _.delay(function() {
if (autoreconnect) { if (appData.flags.autoreconnect) {
console.log("Requesting to reconnect ..."); console.log("Requesting to reconnect ...");
mediaStream.reconnect(); mediaStream.reconnect();
} }
reconnecting = false; appData.flags.reconnecting = false;
}, 500); }, delay);
$scope.setStatus("reconnecting"); $scope.setStatus("reconnecting");
} else { } else {
console.warn("Already reconnecting ..."); console.warn("Already reconnecting ...");
@ -526,12 +451,13 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
$scope.userid = $scope.suserid = null; $scope.userid = $scope.suserid = null;
switch (event.type) { switch (event.type) {
case "open": case "open":
connected = true; appData.flags.connected = true;
appData.flags.autoreconnectDelay = 0;
$scope.updateStatus(true); $scope.updateStatus(true);
$scope.setStatus("waiting"); $scope.setStatus("waiting");
break; break;
case "error": case "error":
if (connected) { if (appData.flags.connected) {
reconnect(); reconnect();
} else { } else {
$scope.setStatus(event.type); $scope.setStatus(event.type);
@ -768,17 +694,6 @@ define(['jquery', 'underscore', 'angular', 'bigscreen', 'moment', 'sjcl', 'moder
$scope.chatMessagesUnseen = $scope.chatMessagesUnseen - count; $scope.chatMessagesUnseen = $scope.chatMessagesUnseen - count;
}); });
$scope.$on("room.joined", function(event, roomName) {
if (roomName) {
_.pull($scope.roomsHistory, roomName);
$scope.roomsHistory.unshift(roomName);
if ($scope.roomsHistory.length > 15) {
// Limit the history.
$scope.roomsHistory = $scope.roomsHistory.splice(0, 15);
}
}
});
_.defer(function() { _.defer(function() {
if (!Modernizr.websockets) { if (!Modernizr.websockets) {
alertify.dialog.alert(translation._("Your browser is not supported. Please upgrade to a current version.")); alertify.dialog.alert(translation._("Your browser is not supported. Please upgrade to a current version."));

6
static/js/directives/directives.js
Unescape View File

@ -48,7 +48,8 @@ define([
'directives/bfi', 'directives/bfi',
'directives/title', 'directives/title',
'directives/welcome', 'directives/welcome',
'directives/menu'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, welcome, menu) { 'directives/menu',
'directives/ui'], function(_, onEnter, onEscape, statusMessage, buddyList, buddyPictureCapture, buddyPictureUpload, settings, chat, audioVideo, usability, audioLevel, fileInfo, screenshare, roomBar, socialShare, page, contactRequest, defaultDialog, pdfcanvas, odfcanvas, presentation, youtubevideo, bfi, title, welcome, menu, ui) {
var directives = { var directives = {
onEnter: onEnter, onEnter: onEnter,
@ -76,7 +77,8 @@ define([
bfi: bfi, bfi: bfi,
title: title, title: title,
welcome: welcome, welcome: welcome,
menu: menu menu: menu,
ui: ui
}; };
var initialize = function(angModule) { var initialize = function(angModule) {

38
static/js/directives/ui.js
Unescape View File

@ -0,0 +1,38 @@
/*
* Spreed WebRTC.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed WebRTC.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
"use strict";
define(['text!partials/ui.html'], function(template) {
// ui
return [function() {
return {
restrict: 'E',
replace: true,
scope: false,
controller: 'MediastreamController',
template: template
}
}];
});

52
static/partials/ui.html
Unescape View File

@ -0,0 +1,52 @@
<div class="ui">
<page></page>
<div id="bar" class="navbar navbar-default navbar-fixed-top bar">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" ng-click="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand left">
<span ui-logo class="logo"><span class="desc"><a target="_blank" href="https://github.com/strukturag/spreed-webrtc">WebRTC</a></span></span>
</div>
</div>
<div class="navbar-collapse collapse" collapse="isCollapsed">
<ul class="nav navbar-nav navbar-right right">
<li class="ng-cloak">
<menu></menu>
</li>
</ul>
</div>
</div>
<div class="callbar middle">
<status-message></status-message>
</div>
</div>
<div id="roombar" class="ng-cloak">
<room-bar/>
</div>
<div id="audiolevel" class="ng-cloak">
<div class="audio-level" title="{{_('Your audio level')}}"></div>
</div>
<div id="audiovideo" class="ng-cloak" ng-show="peer">
<audio-video/>
</div>
<div id="screenshare" class="ng-cloak mainview">
<screenshare/>
</div>
<div id="presentation" class="ng-cloak mainview">
<presentation/>
</div>
<div id="youtubevideo" class="ng-cloak mainview">
<youtubevideo/>
</div>
<div class="ng-cloak" id="rightslide">
<div class="rightslidepane">
<div id="buddylist"><buddy-list/></div>
<div id="chat"><chat/></div>
</div>
</div>
<div class="ng-cloak" id="settings" ng-class="{show: layout.settings}"><settings/></div>
</chat>
Write Preview
Loading…
Cancel
Save