Part 2 of previous commit. Makes the toolbar more visible. Moves toolbar and videolayout related code in separate classes.
This commit is contained in:
yanas
parent
a5e15e80fc
commit
7b6443969e
2
chat.js
2
chat.js
|
|
@ -242,7 +242,7 @@ var Chat = (function (my) {
|
|||
if (unreadMessages) {
|
||||
unreadMsgElement.innerHTML = unreadMessages.toString();
|
||||
|
||||
showToolbar();
|
||||
Toolbar.showToolbar();
|
||||
|
||||
var chatButtonElement
|
||||
= document.getElementById('chatButton').parentNode;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,8 @@
|
|||
border: 2px solid #212425;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer:hover {
|
||||
#remoteVideos .videocontainer:hover,
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content:"";
|
||||
|
|
@ -52,10 +53,6 @@
|
|||
z-index: 3;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
border: 3px solid #388396;
|
||||
}
|
||||
|
||||
#localVideoWrapper {
|
||||
display:inline-block;
|
||||
-webkit-mask-box-image: url(../images/videomask.svg);
|
||||
|
|
@ -63,7 +60,8 @@
|
|||
border: 0px !important;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer>video {
|
||||
#remoteVideos .videocontainer>video,
|
||||
#remoteVideos .videocontainer>canvas {
|
||||
border-radius:4px;
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +86,8 @@
|
|||
#etherpad,
|
||||
#localVideoWrapper>video,
|
||||
#localVideoWrapper,
|
||||
.videocontainer>video {
|
||||
.videocontainer>video,
|
||||
.videocontainer>canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
|
@ -137,25 +136,22 @@
|
|||
|
||||
.videocontainer>span.displayname,
|
||||
.videocontainer>input.displayname {
|
||||
display: inline-block;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: -webkit-linear-gradient(left, rgba(0,0,0,.7), rgba(0,0,0,0));
|
||||
color: #FFFFFF;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 3px 5px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-height: 18px;
|
||||
font-size: 9pt;
|
||||
text-align: left;
|
||||
background: rgba(0,0,0,.7);
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
width: 70%;
|
||||
height: 20%;
|
||||
left: 15%;
|
||||
top: 40%;
|
||||
padding: 5px;
|
||||
font-size: 11pt;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
border-bottom-left-radius:4px;
|
||||
border-bottom-right-radius:4px;
|
||||
border-radius:20px;
|
||||
}
|
||||
|
||||
#localVideoContainer>span.displayname:hover {
|
||||
|
|
@ -166,6 +162,10 @@
|
|||
pointer-events: none;
|
||||
}
|
||||
|
||||
.videocontainer>input.displayname {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#localDisplayName {
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,14 +38,17 @@ function onDataChannel(event)
|
|||
|
||||
var container = document.getElementById(
|
||||
'participant_' + endpointId);
|
||||
|
||||
// Local video will not have container found, but that's ok
|
||||
// since we don't want to switch to local video
|
||||
|
||||
if (container)
|
||||
{
|
||||
var video = container.getElementsByTagName("video");
|
||||
if (video.length)
|
||||
{
|
||||
updateLargeVideo(video[0].src);
|
||||
VideoLayout.updateLargeVideo(video[0].src);
|
||||
VideoLayout.enableActiveSpeaker(endpointId, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
/* global $, config, connection, chrome, alert, getUserMediaWithConstraints, change_local_video, getConferenceHandler */
|
||||
/* global $, config, connection, chrome, alert, getUserMediaWithConstraints, changeLocalVideo, getConferenceHandler */
|
||||
/**
|
||||
* Indicates that desktop stream is currently in use(for toggle purpose).
|
||||
* @type {boolean}
|
||||
|
|
@ -251,7 +251,9 @@ function newStreamCreated(stream) {
|
|||
|
||||
var oldStream = connection.jingle.localVideo;
|
||||
|
||||
change_local_video(stream, !isUsingScreenStream);
|
||||
connection.jingle.localVideo = stream;
|
||||
|
||||
VideoLayout.changeLocalVideo(stream, !isUsingScreenStream);
|
||||
|
||||
var conferenceHandler = getConferenceHandler();
|
||||
if (conferenceHandler) {
|
||||
|
|
|
|||
|
|
@ -45,8 +45,8 @@ var Etherpad = (function (my) {
|
|||
if (Prezi.isPresentationVisible()) {
|
||||
largeVideo.css({opacity: '0'});
|
||||
} else {
|
||||
setLargeVideoVisible(false);
|
||||
dockToolbar(true);
|
||||
VideoLayout.setLargeVideoVisible(false);
|
||||
Toolbar.dockToolbar(true);
|
||||
}
|
||||
|
||||
$('#etherpad>iframe').fadeIn(300, function () {
|
||||
|
|
@ -63,8 +63,8 @@ var Etherpad = (function (my) {
|
|||
document.body.style.background = 'black';
|
||||
if (!isPresentation) {
|
||||
$('#largeVideo').fadeIn(300, function () {
|
||||
setLargeVideoVisible(true);
|
||||
dockToolbar(false);
|
||||
VideoLayout.setLargeVideoVisible(true);
|
||||
Toolbar.dockToolbar(false);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@
|
|||
<script src="moderatemuc.js?v=1"></script><!-- moderator plugin -->
|
||||
<script src="analytics.js?v=1"></script><!-- google analytics plugin -->
|
||||
<script src="rtp_stats.js?v=1"></script><!-- RTP stats processing -->
|
||||
<script src="videolayout.js?v=1"></script><!-- video ui -->
|
||||
<script src="toolbar.js?v=1"></script><!-- toolbar ui -->
|
||||
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/font.css"/>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=20"/>
|
||||
|
|
@ -78,7 +80,7 @@
|
|||
<a class="button" onclick="toggleScreenSharing();" title="Share screen"><i class="icon-share-desktop"></i></a>
|
||||
<div class="header_button_separator"></div>
|
||||
</span>
|
||||
<a class="button" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");toggleFullScreen();'><i id="fullScreen" title="Enter / Exit Full Screen" class="icon-full-screen"></i></a>
|
||||
<a class="button" onclick='buttonClick("#fullScreen", "icon-full-screen icon-exit-full-screen");Toolbar.toggleFullScreen();'><i id="fullScreen" title="Enter / Exit Full Screen" class="icon-full-screen"></i></a>
|
||||
</span>
|
||||
</div>
|
||||
<div id="settings">
|
||||
|
|
@ -91,7 +93,7 @@
|
|||
</form>
|
||||
</div>
|
||||
<div id="reloadPresentation"><a onclick='Prezi.reloadPresentation();'><i title="Reload Prezi" class="fa fa-repeat fa-lg"></i></a></div>
|
||||
<div id="videospace" onmousemove="showToolbar();">
|
||||
<div id="videospace" onmousemove="Toolbar.showToolbar();">
|
||||
<div id="largeVideoContainer" class="videocontainer">
|
||||
<div id="presentation"></div>
|
||||
<div id="etherpad"></div>
|
||||
|
|
|
|||
12
prezi.js
12
prezi.js
|
|
@ -19,10 +19,10 @@ var Prezi = (function (my) {
|
|||
$(document).trigger("video.selected", [true]);
|
||||
|
||||
$('#largeVideo').fadeOut(300, function () {
|
||||
setLargeVideoVisible(false);
|
||||
VideoLayout.setLargeVideoVisible(false);
|
||||
$('#presentation>iframe').fadeIn(300, function() {
|
||||
$('#presentation>iframe').css({opacity:'1'});
|
||||
dockToolbar(true);
|
||||
Toolbar.dockToolbar(true);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -32,8 +32,8 @@ var Prezi = (function (my) {
|
|||
$('#presentation>iframe').css({opacity:'0'});
|
||||
$('#reloadPresentation').css({display:'none'});
|
||||
$('#largeVideo').fadeIn(300, function() {
|
||||
setLargeVideoVisible(true);
|
||||
dockToolbar(false);
|
||||
VideoLayout.setLargeVideoVisible(true);
|
||||
Toolbar.dockToolbar(false);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -177,8 +177,8 @@ var Prezi = (function (my) {
|
|||
// We explicitly don't specify the peer jid here, because we don't want
|
||||
// this video to be dealt with as a peer related one (for example we
|
||||
// don't want to show a mute/kick menu for this one, etc.).
|
||||
addRemoteVideoContainer(null, elementId);
|
||||
resizeThumbnails();
|
||||
VideoLayout.addRemoteVideoContainer(null, elementId);
|
||||
VideoLayout.resizeThumbnails();
|
||||
|
||||
var controlsEnabled = false;
|
||||
if (jid === connection.emuc.myroomjid)
|
||||
|
|
|
|||
20
util.js
20
util.js
|
|
@ -51,10 +51,28 @@ var Util = (function (my) {
|
|||
* Returns the available video width.
|
||||
*/
|
||||
my.getAvailableVideoWidth = function () {
|
||||
var chatspaceWidth = $('#chatspace').is(":visible") ? $('#chatspace').width() : 0;
|
||||
var chatspaceWidth
|
||||
= $('#chatspace').is(":visible") ? $('#chatspace').width() : 0;
|
||||
|
||||
return window.innerWidth - chatspaceWidth;
|
||||
};
|
||||
|
||||
my.imageToGrayScale = function(canvas) {
|
||||
var context = canvas.getContext('2d');
|
||||
var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
|
||||
var pixels = imgData.data;
|
||||
|
||||
for (var i = 0, n = pixels.length; i < n; i += 4) {
|
||||
var grayscale
|
||||
= pixels[i] * .3 + pixels[i+1] * .59 + pixels[i+2] * .11;
|
||||
pixels[i ] = grayscale; // red
|
||||
pixels[i+1] = grayscale; // green
|
||||
pixels[i+2] = grayscale; // blue
|
||||
// pixels[i+3] is alpha
|
||||
}
|
||||
// redraw the image in black & white
|
||||
context.putImageData(imgData, 0, 0);
|
||||
};
|
||||
|
||||
return my;
|
||||
}(Util || {}));
|
||||
|
|
|
|||
Loading…
Reference in New Issue