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

Use videoLayout service to draw other layout when when a main view is shown.

pull/26/head
Simon Eisenmann 11 years ago
parent
c94bdb457d
commit
31f20567d1
3 changed files with 68 additions and 48 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. 33
      src/styles/components/_audiovideo.scss
  2. 41
      static/js/directives/audiovideo.js
  3. 42
      static/js/services/videolayout.js

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

@ -47,18 +47,6 @@ right:260px;
.withBuddylist.withChat #audiovideo { .withBuddylist.withChat #audiovideo {
right:520px; right:520px;
} }
.mainScreenshare {
#audiovideo {
width:150px;
.remoteVideo .peerlabel {
font-size:12px;
font-weight:bold;
}
.remoteVideo .peeractions i {
font-size:1em;
}
}
}
.remoteVideo .peerlabel { .remoteVideo .peerlabel {
-webkit-transition: color 500ms ease-out; -webkit-transition: color 500ms ease-out;
@ -96,6 +84,27 @@ right:520px;
border:1px solid #9dd53a; border:1px solid #9dd53a;
} }
.renderer-smally {
width:150px;
#remoteVideos {
padding-bottom: 85px;
}
#mini {
bottom:0px;
left:0px;
right:0px;
max-height:none;
height:85px;
}
.remoteVideo .peerlabel {
font-size:.9em;
font-weight:bold;
}
.remoteVideo .peeractions i {
font-size:1em;
}
}
.renderer-conferencekiosk { .renderer-conferencekiosk {
#remoteVideos { #remoteVideos {
top:auto; top:auto;

41
static/js/directives/audiovideo.js
Unescape View File

@ -82,12 +82,12 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
}); });
} }
scope.$emit("active", currentcall); scope.$emit("active", currentcall);
$scope.resize(); $scope.redraw();
}, function() { }, function() {
peers[peerid] = scope; peers[peerid] = scope;
console.warn("We did not receive video data for remote stream", currentcall, stream, video); console.warn("We did not receive video data for remote stream", currentcall, stream, video);
scope.$emit("active", currentcall); scope.$emit("active", currentcall);
$scope.resize(); $scope.redraw();
}); });
scope.doChat = function() { scope.doChat = function() {
$scope.$emit("startchat", currentcall.id, {autofocus: true, restore: true}); $scope.$emit("startchat", currentcall.id, {autofocus: true, restore: true});
@ -107,7 +107,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
subscope.element.remove(); subscope.element.remove();
} }
subscope.$destroy(); subscope.$destroy();
$scope.resize(); $scope.redraw();
} }
}; };
@ -167,7 +167,7 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
} }
if ($scope.localVideo.videoWidth > 0) { if ($scope.localVideo.videoWidth > 0) {
$scope.localVideo.style.opacity = 1; $scope.localVideo.style.opacity = 1;
$scope.resize(); $scope.redraw();
} else { } else {
count++; count++;
if (count < 100) { if (count < 100) {
@ -239,7 +239,6 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
$(scope.card).on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true)); $(scope.card).on("doubletap dblclick", _.debounce(scope.toggleFullscreen, 100, true));
//scope.rendererName = "conferencekiosk";
scope.rendererName = "onepeople"; scope.rendererName = "onepeople";
scope.renderersAvailable = videoLayout.layouts(); scope.renderersAvailable = videoLayout.layouts();
@ -253,42 +252,46 @@ define(['jquery', 'underscore', 'text!partials/audiovideo.html', 'text!partials/
} }
}; };
var needsResize = false; var needsRedraw = false;
scope.resize = function() { scope.redraw = function() {
needsResize = true; needsRedraw = true;
}; };
var resize = function() { var redraw = function() {
var size = { var size = {
width: scope.layoutparent.width(), width: scope.layoutparent.width(),
height: scope.layoutparent.height() height: scope.layoutparent.height()
} }
videoLayout.update(getRendererName(), size, scope, controller); var again = videoLayout.update(getRendererName(), size, scope, controller);
if (again) {
// Layout needs a redraw.
needsRedraw = true;
}
}; };
// Make sure we draw on resize. // Make sure we draw on resize.
$($window).on("resize", scope.resize); $($window).on("resize", scope.redraw);
scope.$on("mainresize", function(event, main) { scope.$on("mainresize", function(event, main) {
if (main) { if (main) {
// Force onepeople renderer when we have a main view. // Force smally renderer when we have a main view.
rendererName = "onepeople" rendererName = "smally"
} else if (rendererName) { } else if (rendererName) {
rendererName = null; rendererName = null;
} }
_.defer(scope.resize); _.defer(scope.redraw);
}); });
scope.resize(); scope.redraw();
// Make sure we draw when the renderer was changed. // Make sure we draw when the renderer was changed.
scope.$watch("rendererName", function() { scope.$watch("rendererName", function() {
_.defer(scope.resize); _.defer(scope.redraw);
}); });
// Update function run in rendering thread. // Update function run in rendering thread.
var update = function() { var update = function() {
if (needsResize) { if (needsRedraw) {
needsResize =false; needsRedraw =false;
resize(); redraw();
} }
requestAnimationFrame(update); requestAnimationFrame(update);
} }

42
static/js/services/videolayout.js
Unescape View File

@ -42,7 +42,7 @@ define(["jquery", "underscore"], function($, _) {
// videoLayout // videoLayout
return ["$window", function($window) { return ["$window", function($window) {
// Video layout with all persons rendered the same size. // Video layout with all videos rendered the same size.
var OnePeople = function(container, scope, controller) { var OnePeople = function(container, scope, controller) {
}; };
@ -59,15 +59,6 @@ define(["jquery", "underscore"], function($, _) {
if (videos.length) { if (videos.length) {
var remoteSize = getRemoteVideoSize(videos, peers); var remoteSize = getRemoteVideoSize(videos, peers);
/*if (videos.length === 1) {
var remoteVideo = peers[videos[0]].element.find("video").get(0);
videoWidth = remoteVideo.videoWidth;
videoHeight = remoteVideo.videoHeight;
console.log("Remote video size: ", videoWidth, videoHeight);
} else {
videoWidth = 1920;
videoHeight = 1080;
}*/
videoWidth = remoteSize.width; videoWidth = remoteSize.width;
videoHeight = remoteSize.height; videoHeight = remoteSize.height;
} }
@ -94,8 +85,8 @@ define(["jquery", "underscore"], function($, _) {
} }
var aspectRatio = videoWidth/videoHeight; var aspectRatio = videoWidth/videoHeight;
var innerHeight = size.height; //scope.layoutparent.height(); var innerHeight = size.height;
var innerWidth = size.width; //scope.layoutparent.width(); var innerWidth = size.width;
//console.log("resize", innerHeight, innerWidth); //console.log("resize", innerHeight, innerWidth);
//console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth); //console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth);
@ -155,6 +146,17 @@ define(["jquery", "underscore"], function($, _) {
}; };
// Smally inherits from OnePeople
var Smally = function(container, scope, controller) {
// Call super.
OnePeople.call(this, container, scope, controller);
}
Smally.prototype = Object.create(OnePeople.prototype);
Smally.prototype.constructor = Smally;
Smally.prototype.name = "smally";
// A view with one selectable large video. The others are small.
var ConferenceKiosk = function(container, scope, controller) { var ConferenceKiosk = function(container, scope, controller) {
this.remoteVideos = $(container).find("#remoteVideos"); this.remoteVideos = $(container).find("#remoteVideos");
@ -228,10 +230,13 @@ define(["jquery", "underscore"], function($, _) {
this.remoteVideos = null; this.remoteVideos = null;
}; };
// Register renderers. // Register renderers.
renderers[OnePeople.prototype.name] = OnePeople; renderers[OnePeople.prototype.name] = OnePeople;
renderers[Smally.prototype.name] = Smally;
renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk; renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk;
// Public api. // Public api.
var current = null; var current = null;
return { return {
@ -240,23 +245,26 @@ define(["jquery", "underscore"], function($, _) {
var videos = _.keys(controller.peers); var videos = _.keys(controller.peers);
var peers = controller.peers; var peers = controller.peers;
var container = scope.container; var container = scope.container;
var layoutparent = scope.layoutparent;
if (!current) { if (!current) {
current = new renderers[name](container, scope, controller) current = new renderers[name](container, scope, controller)
console.log("Created new video layout renderer", name, current); console.log("Created new video layout renderer", name, current);
$(container).addClass("renderer-"+name); $(layoutparent).addClass("renderer-"+name);
return true;
} else { } else {
if (current.name !== name) { if (current.name !== name) {
current.close(container, scope, controller); current.close(container, scope, controller);
$(container).removeAttr("style"); $(container).removeAttr("style");
$(container).removeClass("renderer-"+current.name); $(layoutparent).removeClass("renderer-"+current.name);
current = new renderers[name](container, scope, conroller) current = new renderers[name](container, scope, controller)
$(container).addClass("renderer-"+name); $(layoutparent).addClass("renderer-"+name);
console.log("Switched to new video layout renderer", name, current); console.log("Switched to new video layout renderer", name, current);
return true;
} }
} }
current.render(container, size, scope, videos, peers); return current.render(container, size, scope, videos, peers);
}, },
register: function(name, impl) { register: function(name, impl) {

Write Preview
Loading…
Cancel
Save