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
Split 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 @@ @@ -3,7 +3,7 @@
<head>
<%template "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="loader"><div><i class="fa fa-spinner fa-spin"></i></div></div>
<page></page>
@ -13,11 +13,11 @@ @@ -13,11 +13,11 @@
</div>
<status-message ng-controller="StatusmessageController"></status-message>
<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="{{_('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="{{_('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="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="{{_('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 id="roombar" class="ng-cloak">
@ -31,7 +31,7 @@ @@ -31,7 +31,7 @@
<audio-video/>
</div>
</div>
<div id="screenshare" class="ng-cloak mainview" ng-show="mainview=='screenshare'">
<div id="screenshare" class="ng-cloak mainview">
<screenshare/>
</div>
<div class="ng-cloak nicescroll" id="rightslide">
@ -40,7 +40,7 @@ @@ -40,7 +40,7 @@
<div id="chat"><chat/></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>
<div class="ng-cloak" id="details">{{id}}</div>
<%template "extra-body" .%>

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

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

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

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

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

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

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

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

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

@ -27,7 +27,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) { @@ -27,7 +27,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
//console.log("BuddylistController", $buddylist, $element, $scope);
$scope.layout.buddylist = true;
$scope.enabled = false;
$scope.doCall = function(id) {
@ -57,6 +57,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) { @@ -57,6 +57,7 @@ define(['underscore', 'text!partials/buddylist.html'], function(_, template) {
}
};
//XXX(longsleep): Debug leftover ?? Remove this.
window.doAudioConference = $scope.doAudioConference;
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'], @@ -27,6 +27,8 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
var controller = ['$scope', '$element', '$attrs', function($scope, $element, $attrs) {
$scope.layout.chat = false;
var rooms = {};
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'], @@ -273,8 +275,8 @@ define(['underscore', 'text!partials/chat.html', 'text!partials/chatroom.html'],
}
if (options.restore && !options.noenable) {
if (!scope.chatEnabled) {
scope.$parent.chatEnabled = true;
if (!scope.layout.chat) {
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 @@ -29,6 +29,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
var screenCount = 0;
var screens = {};
$scope.layout.screenshare = false;
$scope.usermedia = null;
$scope.connected = false;
$scope.screenshare = null;
@ -157,7 +158,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials @@ -157,7 +158,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
$scope.doScreenshare = function() {
$scope.$emit("screenshare", true);
$scope.layout.screenshare = true;
// Create userMedia with screen share type.
var usermedia = mediaStream.webrtc.doScreenshare();
@ -243,7 +244,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials @@ -243,7 +244,7 @@ define(['jquery', 'underscore', 'text!partials/screenshare.html', 'text!partials
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 @@ -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) {
$scope.doScreenshare();
} else if(!newval && oldval) {

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

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

2
static/partials/chat.html
Unescape View File

@ -1 +1 @@ @@ -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 @@ @@ -1,5 +1,5 @@
<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 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>
@ -11,7 +11,7 @@ @@ -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>
</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>
</div>
</div>

Write Preview
Loading…
Cancel
Save