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

Implemented top level controller layout configurations.

pull/16/head
Simon Eisenmann 12 years ago
parent
6477b59dd8
commit
3519575638
11 changed files with 91 additions and 64 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. 12
      html/main.html
  2. 28
      src/styles/components/_audiovideo.scss
  3. 4
      src/styles/components/_screenshare.scss
  4. 3
      src/styles/global/_base.scss
  5. 66
      static/js/controllers/mediastreamcontroller.js
  6. 3
      static/js/directives/buddylist.js
  7. 6
      static/js/directives/chat.js
  8. 7
      static/js/directives/screenshare.js
  9. 20
      static/js/directives/settings.js
  10. 2
      static/partials/chat.html
  11. 4
      static/partials/usability.html

12
html/main.html
Unescape View File

@ -3,7 +3,7 @@
<head> <head>
<%template "head" .%> <%template "head" .%>
</head> </head>
<body ng-controller="MediastreamController" ng-class="{withBuddylist: showBuddylist, withChat: chatEnabled, withSettings: showSettings, slideright: !showBuddylist}"> <body ng-controller="MediastreamController">
<div id="background"></div> <div id="background"></div>
<div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div> <div id="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
<page></page> <page></page>
@ -13,11 +13,11 @@
</div> </div>
<status-message ng-controller="StatusmessageController"></status-message> <status-message ng-controller="StatusmessageController"></status-message>
<div class="ng-cloak right"> <div class="ng-cloak right">
<button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="master.settings.screensharingMedia && (status=='connected' || status=='conference' || enabledScreenshare)" ng-model="enableScreenshare" btn-checkbox><i class="fa fa-desktop"></i></button> <button title="{{_('Share your screen')}}" class="btn aenablebtn" ng-show="master.settings.screensharingMedia && (status=='connected' || status=='conference' || enabledScreenshare)" ng-model="layout.screenshare" btn-checkbox><i class="fa fa-desktop"></i></button>
<button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="chatEnabled" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen && !chatEnabled">{{chatMessagesUnseen}}</span></button> <button title="{{_('Chat')}}" ng-show="roomstatus" class="btn" ng-class="{messagesunseen: chatMessagesUnseen>0}" ng-model="layout.chat" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-comments-o"></i><span class="badge" ng-show="chatMessagesUnseen && !layout.chat">{{chatMessagesUnseen}}</span></button>
<button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button> <button title="{{_('Mute microphone')}}" class="btn amutebtn" ng-model="microphoneMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-microphone-slash"></i></button>
<button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button> <button title="{{_('Turn camera off')}}" class="btn amutebtn" ng-model="cameraMute" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-eye-slash"></i></button>
<button title="{{_('Settings')}}" class="btn" ng-model="showSettings" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0"><i class="fa fa-cog"></i></button> <button title="{{_('Settings')}}" class="btn" ng-model="layout.settings" btn-checkbox btn-checkbox-true="true" btn-checkbox-false="false"><i class="fa fa-cog"></i></button>
</div> </div>
</div> </div>
<div id="roombar" class="ng-cloak"> <div id="roombar" class="ng-cloak">
@ -31,7 +31,7 @@
<audio-video/> <audio-video/>
</div> </div>
</div> </div>
<div id="screenshare" class="ng-cloak mainview" ng-show="mainview=='screenshare'"> <div id="screenshare" class="ng-cloak mainview">
<screenshare/> <screenshare/>
</div> </div>
<div class="ng-cloak nicescroll" id="rightslide"> <div class="ng-cloak nicescroll" id="rightslide">
@ -40,7 +40,7 @@
<div id="chat"><chat/></div> <div id="chat"><chat/></div>
</div> </div>
</div> </div>
<div class="ng-cloak" id="settings" ng-class="{show: showSettings}"><settings/></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>
<div class="ng-cloak" id="details">{{id}}</div> <div class="ng-cloak" id="details">{{id}}</div>
<%template "extra-body" .%> <%template "extra-body" .%>

28
src/styles/components/_audiovideo.scss
Unescape View File

@ -33,27 +33,29 @@ bottom:0px;
left:0px; left:0px;
background:black; background:black;
} }
#audiovideo.fullscreen .remoteVideo .peeractions {
display:none;
}
.withChat #audiovideo, .withBuddylist #audiovideo { .withChat #audiovideo, .withBuddylist #audiovideo {
right:260px; right:260px;
} }
.withBuddylist.withChat #audiovideo { .withBuddylist.withChat #audiovideo {
right:520px; right:520px;
} }
#audiovideo.fullscreen .remoteVideo .peeractions { .mainScreenshare {
display:none; #audiovideo {
} width:150px;
#audiovideo.leftsided { .remoteVideo .peerlabel {
width:150px font-size:12px;
} font-weight:bold;
#audiovideo.leftsided .remoteVideo .peerlabel { }
font-size:12px; .remoteVideo .peeractions i {
font-weight:bold; font-size:1em;
} }
#audiovideo.leftsided .remoteVideo .peeractions i { }
font-size:1em;
} }
@media only screen and (max-width: 630px) { @media only screen and (max-width: 630px) {
#audiovideo.leftsided { .mainScreenshare #audiovideo {
display:none; display:none;
} }
} }

4
src/styles/components/_screenshare.scss
Unescape View File

@ -18,6 +18,10 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
.mainScreenshare #screenshare {
display: block;
}
.screenshare { .screenshare {
position:absolute; position:absolute;
left:0px; left:0px;

3
src/styles/global/_base.scss
Unescape View File

@ -49,7 +49,8 @@ position:absolute;
left:150px; left:150px;
top:45px; top:45px;
right:0px; right:0px;
bottom:0px bottom:0px;
display:none;
} }
.withChat .mainview, .withBuddylist .mainview { .withChat .mainview, .withBuddylist .mainview {
right:260px; right:260px;

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

@ -131,17 +131,17 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
$scope.status = "initializing"; $scope.status = "initializing";
$scope.id = null; $scope.id = null;
$scope.peer = null; $scope.peer = null;
$scope.mainView = null;
$scope.dialing = null; $scope.dialing = null;
$scope.conference = null; $scope.conference = null;
$scope.conferencePeers = []; $scope.conferencePeers = [];
$scope.incoming = null; $scope.incoming = null;
$scope.microphoneMute = false; $scope.microphoneMute = false;
$scope.cameraMute = false; $scope.cameraMute = false;
$scope.chatEnabled = false; $scope.layout = {
main: null
};
$scope.chatMessagesUnseen = 0; $scope.chatMessagesUnseen = 0;
$scope.autoAccept = null; $scope.autoAccept = null;
$scope.showBuddylist = true;
$scope.master = { $scope.master = {
displayName: null, displayName: null,
buddyPicture: null, buddyPicture: null,
@ -321,10 +321,10 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
var oldState = null; var oldState = null;
return function(status, force) { return function(status, force) {
if (status || force) { if (status || force) {
oldState = $scope.showBuddylist; oldState = $scope.layout.buddylist;
$scope.showBuddylist = !!status; $scope.layout.buddylist = !!status;
} else { } else {
$scope.showBuddylist = oldState; $scope.layout.buddylist = oldState;
} }
} }
}()); }());
@ -543,7 +543,7 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
} }
$timeout(function() { $timeout(function() {
if ($scope.peer) { if ($scope.peer) {
$scope.showBuddylist = false; $scope.layout.buddylist = false;
} }
}, 1000); }, 1000);
@ -552,12 +552,12 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
$scope.$on("mainview", function(event, mainview, state) { $scope.$on("mainview", function(event, mainview, state) {
console.info("Main view update", mainview, state); console.info("Main view update", mainview, state);
var changed = false; var changed = false;
if ($scope.mainview === mainview && !state) { var layout = $scope.layout;
$scope.mainview = null; if (layout.main === mainview && !state) {
layout.main = null;
changed = true; changed = true;
} else if (state) { } else if (state) {
$scope.mainview = mainview; layout.main = mainview;
changed = true; changed = true;
} }
if (changed) { if (changed) {
@ -565,17 +565,40 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
} }
}); });
$scope.$watch(function() { // Apply all layout stuff as classes to our element.
return $element.attr("class"); $scope.$watch("layout", (function() {
}, function() { var makeName = function(prefix, n) {
$scope.$broadcast("mainresize"); return prefix+n.substr(0, 1).toUpperCase()+n.substr(1);
}); };
return function(layout, old) {
_.each(layout, function(v, k) {
if (k === "main") {
return;
}
var n = makeName("with", k);
if (v) {
$element.addClass(n);
} else {
$element.removeClass(n);
}
});
if (old.main !== layout.main) {
if (old.main) {
$element.removeClass(makeName("main", old.main));
}
if (layout.main) {
$element.addClass(makeName("main", layout.main));
}
}
$scope.$broadcast("mainresize");
}}()
), true);
mediaStream.webrtc.e.on("done", function() { mediaStream.webrtc.e.on("done", function() {
if (mediaStream.connector.connected) { if (mediaStream.connector.connected) {
$scope.setStatus("waiting"); $scope.setStatus("waiting");
} }
$scope.showBuddylist = true; $scope.layout.buddylist = true;
}); });
mediaStream.webrtc.e.on("busy", function(event, from) { mediaStream.webrtc.e.on("busy", function(event, from) {
@ -653,15 +676,6 @@ define(['underscore', 'bigscreen', 'moment', 'webrtc.adapter'], function(_, BigS
}); });
$scope.$on("screenshare", function(event, status) {
//console.log("AAAAAAAAAAA screenshare", status, $scope.enableScreenshare);
if ($scope.enableScreenshare !== status) {
$scope.enableScreenshare = !!status;
}
});
$scope.$on("chatincoming", function() { $scope.$on("chatincoming", function() {
$scope.chatMessagesUnseen++; $scope.chatMessagesUnseen++;
}); });

3
static/js/directives/buddylist.js
Unescape View File

@ -27,7 +27,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
//console.log("BuddylistController", $buddylist, $element, $scope); $scope.layout.buddylist = true;
$scope.enabled = false; $scope.enabled = false;
$scope.doCall = function(id) { $scope.doCall = function(id) {
@ -57,6 +57,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
} }
}; };
//XXX(longsleep): Debug leftover ?? Remove this.
window.doAudioConference = $scope.doAudioConference; window.doAudioConference = $scope.doAudioConference;
var buddylist = $scope.buddylist = buddyList.buddylist($element, $scope, {}); var buddylist = $scope.buddylist = buddyList.buddylist($element, $scope, {});

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

@ -27,6 +27,8 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) { var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
$scope.layout.chat = false;
var rooms = {}; var rooms = {};
mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) { mediaStream.api.e.on("received.chat", function(event, id, from, data, p2p) {
@ -273,8 +275,8 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
} }
if (options.restore && !options.noenable) { if (options.restore && !options.noenable) {
if (!scope.chatEnabled) { if (!scope.layout.chat) {
scope.$parent.chatEnabled = true; scope.layout.chat = true;
} }
} }

7
static/js/directives/screenshare.js
Unescape View File

@ -29,6 +29,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
var screenCount = 0; var screenCount = 0;
var screens = {}; var screens = {};
$scope.layout.screenshare = false;
$scope.usermedia = null; $scope.usermedia = null;
$scope.connected = false; $scope.connected = false;
$scope.screenshare = null; $scope.screenshare = null;
@ -157,7 +158,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
$scope.doScreenshare = function() { $scope.doScreenshare = function() {
$scope.$emit("screenshare", true); $scope.layout.screenshare = true;
// Create userMedia with screen share type. // Create userMedia with screen share type.
var usermedia = mediaStream.webrtc.doScreenshare(); var usermedia = mediaStream.webrtc.doScreenshare();
@ -243,7 +244,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
console.log("Screen share stopped."); console.log("Screen share stopped.");
} }
$scope.$emit("screenshare", false); $scope.layout.screenshare = false;
}; };
@ -259,7 +260,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
}; };
$scope.$watch("enableScreenshare", function(newval, oldval) { $scope.$watch("layout.screenshare", function(newval, oldval) {
if (newval && !oldval) { if (newval && !oldval) {
$scope.doScreenshare(); $scope.doScreenshare();
} else if(!newval && oldval) { } else if(!newval && oldval) {

20
static/js/directives/settings.js
Unescape View File

@ -24,18 +24,19 @@ define(['text!partials/settings.html'], function(template) {
var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', function($scope, desktopNotify, mediaSources, safeApply) { var controller = ['$scope', 'desktopNotify', 'mediaSources', 'safeApply', function($scope, desktopNotify, mediaSources, safeApply) {
var localStream = null; $scope.layout.settings = false;
$scope.showSettings = 0;
$scope.showAdvancedSettings = true; $scope.showAdvancedSettings = true;
$scope.showTakePicture = false; $scope.showTakePicture = false;
$scope.showTakePictureReady = true; $scope.showTakePictureReady = true;
$scope.rememberSettings = true; $scope.rememberSettings = true;
$scope.desktopNotify = desktopNotify; $scope.desktopNotify = desktopNotify;
$scope.mediaSources = mediaSources; $scope.mediaSources = mediaSources;
var localStream = null;
$scope.saveSettings = function(user) { $scope.saveSettings = function(user) {
$scope.update(user); $scope.update(user);
$scope.showSettings = 0; $scope.layout.settings = false;
if ($scope.rememberSettings) { if ($scope.rememberSettings) {
localStorage.setItem("mediastream-user", JSON.stringify(user)); localStorage.setItem("mediastream-user", JSON.stringify(user));
localStorage.setItem("mediastream-language", user.settings.language || ""); localStorage.setItem("mediastream-language", user.settings.language || "");
@ -44,11 +45,11 @@ define(['text!partials/settings.html'], function(template) {
localStorage.removeItem("mediastream-language"); localStorage.removeItem("mediastream-language");
localStorage.removeItem("mediastream-access-code"); localStorage.removeItem("mediastream-access-code");
} }
} };
$scope.cancelSettings = function() { $scope.cancelSettings = function() {
$scope.reset(); $scope.reset();
$scope.showSettings = 0; $scope.layout.settings = false;
} };
$scope.requestDesktopNotifyPermission = function() { $scope.requestDesktopNotifyPermission = function() {
$scope.desktopNotify.requestPermission(function() { $scope.desktopNotify.requestPermission(function() {
safeApply($scope); safeApply($scope);
@ -131,8 +132,8 @@ define(['text!partials/settings.html'], function(template) {
$scope.mediaSources.refresh(function() { $scope.mediaSources.refresh(function() {
safeApply($scope, $scope.checkDefaultMediaSources); safeApply($scope, $scope.checkDefaultMediaSources);
}); });
$scope.$watch("showSettings", function(showSettings) { $scope.$watch("layout.settings", function(showSettings) {
if (showSettings === 1) { if (showSettings) {
$scope.desktopNotify.refresh(); $scope.desktopNotify.refresh();
$scope.mediaSources.refresh(function(audio, video) { $scope.mediaSources.refresh(function(audio, video) {
safeApply($scope, function(scope) { safeApply($scope, function(scope) {
@ -158,6 +159,7 @@ define(['text!partials/settings.html'], function(template) {
}; };
return { return {
scope: true,
restrict: 'E', restrict: 'E',
replace: true, replace: true,
template: template, template: template,

2
static/partials/chat.html
Unescape View File

@ -1 +1 @@
<div class="chatpane" ng-class="{slideright: !chatEnabled}"></div> <div class="chatpane" ng-class="{slideright: !layout.chat}"></div>

4
static/partials/usability.html
Unescape View File

@ -1,5 +1,5 @@
<div class="fadetogglecontainer" ng-hide="peer"> <div class="fadetogglecontainer" ng-hide="peer">
<div class="animate-show" ng-hide="showSettings"> <div class="animate-show" ng-hide="layout.settings">
<div class="fadetogglecontainer" ng-switch="usabilityInfo"> <div class="fadetogglecontainer" ng-switch="usabilityInfo">
<div ng-switch-when="checking"><i class="fa fa-refresh fa-spin fa-4x pull-right"></i>{{_("Checking camera and microphone access.")}}</div> <div ng-switch-when="checking"><i class="fa fa-refresh fa-spin fa-4x pull-right"></i>{{_("Checking camera and microphone access.")}}</div>
<div ng-switch-when="usermedia"><i><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</i></div> <div ng-switch-when="usermedia"><i><i class="fa fa-hand-o-up fa-4x pull-right"></i>{{_("Please allow access to your camera and microphone.")}}</i></div>
@ -11,7 +11,7 @@
<p style="font-size:0.7em" ng-show="isChrome"><i><a rel="external" target="_blank" href="https://support.google.com/chrome/answer/2693767">{{_("Click here for help (Google Chrome).")}}</a></i></p> <p style="font-size:0.7em" ng-show="isChrome"><i><a rel="external" target="_blank" href="https://support.google.com/chrome/answer/2693767">{{_("Click here for help (Google Chrome).")}}</a></i></p>
</div> </div>
</div> </div>
<div class="animate-show" ng-show="showSettings"> <div class="animate-show" ng-show="layout.settings">
<i style="padding-right:140px">{{_("Please set your user details and settings.")}}<p class="help-subline">{{_("Please note that some settings require you to reload or to make a new call to become effective.")}}</p></i> <i style="padding-right:140px">{{_("Please set your user details and settings.")}}<p class="help-subline">{{_("Please note that some settings require you to reload or to make a new call to become effective.")}}</p></i>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save