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
Split 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; @@ -47,18 +47,6 @@ right:260px;
.withBuddylist.withChat #audiovideo {
right:520px;
}
.mainScreenshare {
#audiovideo {
width:150px;
.remoteVideo .peerlabel {
font-size:12px;
font-weight:bold;
}
.remoteVideo .peeractions i {
font-size:1em;
}
}
}
.remoteVideo .peerlabel {
-webkit-transition: color 500ms ease-out;
@ -96,6 +84,27 @@ right:520px; @@ -96,6 +84,27 @@ right:520px;
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 {
#remoteVideos {
top:auto;

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

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

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

@ -42,7 +42,7 @@ define(["jquery", "underscore"], function($, _) { @@ -42,7 +42,7 @@ define(["jquery", "underscore"], function($, _) {
// videoLayout
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) {
};
@ -59,15 +59,6 @@ define(["jquery", "underscore"], function($, _) { @@ -59,15 +59,6 @@ define(["jquery", "underscore"], function($, _) {
if (videos.length) {
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;
videoHeight = remoteSize.height;
}
@ -94,8 +85,8 @@ define(["jquery", "underscore"], function($, _) { @@ -94,8 +85,8 @@ define(["jquery", "underscore"], function($, _) {
}
var aspectRatio = videoWidth/videoHeight;
var innerHeight = size.height; //scope.layoutparent.height();
var innerWidth = size.width; //scope.layoutparent.width();
var innerHeight = size.height;
var innerWidth = size.width;
//console.log("resize", innerHeight, innerWidth);
//console.log("resize", container, videos.length, aspectRatio, innerHeight, innerWidth);
@ -155,6 +146,17 @@ define(["jquery", "underscore"], function($, _) { @@ -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) {
this.remoteVideos = $(container).find("#remoteVideos");
@ -228,10 +230,13 @@ define(["jquery", "underscore"], function($, _) { @@ -228,10 +230,13 @@ define(["jquery", "underscore"], function($, _) {
this.remoteVideos = null;
};
// Register renderers.
renderers[OnePeople.prototype.name] = OnePeople;
renderers[Smally.prototype.name] = Smally;
renderers[ConferenceKiosk.prototype.name] = ConferenceKiosk;
// Public api.
var current = null;
return {
@ -240,23 +245,26 @@ define(["jquery", "underscore"], function($, _) { @@ -240,23 +245,26 @@ define(["jquery", "underscore"], function($, _) {
var videos = _.keys(controller.peers);
var peers = controller.peers;
var container = scope.container;
var layoutparent = scope.layoutparent;
if (!current) {
current = new renderers[name](container, scope, controller)
console.log("Created new video layout renderer", name, current);
$(container).addClass("renderer-"+name);
$(layoutparent).addClass("renderer-"+name);
return true;
} else {
if (current.name !== name) {
current.close(container, scope, controller);
$(container).removeAttr("style");
$(container).removeClass("renderer-"+current.name);
current = new renderers[name](container, scope, conroller)
$(container).addClass("renderer-"+name);
$(layoutparent).removeClass("renderer-"+current.name);
current = new renderers[name](container, scope, controller)
$(layoutparent).addClass("renderer-"+name);
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) {

Write Preview
Loading…
Cancel
Save