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
Split View
  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