Merge branch 'thumbnails'
This commit is contained in:
commit
b880a58886
|
@ -36,6 +36,19 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin circle($diameter) {
|
||||
width: $diameter;
|
||||
height: $diameter;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@mixin absoluteAligning($sizeX, $sizeY) {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
@include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
|
||||
}
|
||||
|
||||
@mixin transform($func) {
|
||||
-moz-transform: $func;
|
||||
-ms-transform: $func;
|
||||
|
|
|
@ -0,0 +1,136 @@
|
|||
body {
|
||||
width:100%;
|
||||
height:100%;
|
||||
background-color: white;
|
||||
color: #424242;
|
||||
font-family: $baseFontFamily;
|
||||
font-size: 28px;
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
#wrap{
|
||||
display: block;
|
||||
position: absolute;
|
||||
width:500px;
|
||||
height: 565px;
|
||||
overflow:hidden;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
top: 0; left: 0; bottom: 0; right: 0;
|
||||
}
|
||||
.firefox{
|
||||
font-size: 11pt;
|
||||
color: #c8c8c8;
|
||||
width: 468px;
|
||||
text-align: center;
|
||||
margin: 30px auto 0px auto;
|
||||
padding-left: 15px;
|
||||
}
|
||||
#text{
|
||||
display:inline-block;
|
||||
font-size: 28px;
|
||||
/* width: 568px; */
|
||||
vertical-align:middle;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #087dba;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.browser {
|
||||
width: 138px;
|
||||
height: 163px;
|
||||
margin-top: 5px;
|
||||
background-color: #e8e8e8;
|
||||
border: 1px solid #cfcfcf;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.browser_wrapper
|
||||
{
|
||||
width: 138px;
|
||||
/* height: 188px; */
|
||||
vertical-align: middle;
|
||||
color: #929391;
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
margin-left: 15px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.browser_text
|
||||
{
|
||||
height: 2em;
|
||||
}
|
||||
.supported_browsers
|
||||
{
|
||||
margin: 0px auto 0px auto;
|
||||
/* width: 660px; */
|
||||
}
|
||||
|
||||
.clear
|
||||
{
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.button
|
||||
{
|
||||
background-color: #62c82a;
|
||||
border: 1px solid #3c8117;
|
||||
border-radius: 10px;
|
||||
color: #FFFFFF;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
width: 115px;
|
||||
height: 26px;
|
||||
padding-top: 13px;
|
||||
margin: 15px auto 0px auto;
|
||||
}
|
||||
|
||||
.logo
|
||||
{
|
||||
margin: 20px auto 0px auto;
|
||||
}
|
||||
|
||||
#chrome_logo
|
||||
{
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
background-image: url('../images/chrome.png');
|
||||
}
|
||||
#chromium_logo
|
||||
{
|
||||
width: 77px;
|
||||
height: 78px;
|
||||
background-image: url('../images/chromium.png');
|
||||
}
|
||||
#firefox_logo
|
||||
{
|
||||
width: 86px;
|
||||
height: 80px;
|
||||
background-image: url('../images/firefox.png');
|
||||
}
|
||||
|
||||
#opera_logo
|
||||
{
|
||||
width: 73px;
|
||||
height: 78px;
|
||||
background-image: url('../images/opera.png');
|
||||
}
|
||||
|
||||
#safari_logo
|
||||
{
|
||||
width: 78px;
|
||||
height: 79px;
|
||||
background-image: url('../images/safari.png');
|
||||
}
|
||||
|
||||
#ie_logo
|
||||
{
|
||||
width: 80px;
|
||||
height: 78px;
|
||||
background-image: url('../images/ie.png');
|
||||
}
|
||||
|
|
@ -24,6 +24,18 @@ $inputLightBackground: #EBEBEB;
|
|||
$inputBorderColor: #EBEBEB;
|
||||
$buttonBackground: #44A5FF;
|
||||
|
||||
$connectionIndicatorBg: #bf2117;
|
||||
$thumbnailPictogramColor: #fff;
|
||||
$dominantSpeakerBg: #165ecc;
|
||||
$raiseHandBg: #6c64a6;
|
||||
$participantNameColor: #fff;
|
||||
$bodyBg: #091e42;
|
||||
$bodyBgLight: #06a5df;
|
||||
|
||||
$rateStarDefault: #ccc;
|
||||
$rateStarActivity: #f6c342;
|
||||
$rateStarLabelColor: #333;
|
||||
|
||||
/**
|
||||
* Misc.
|
||||
*/
|
||||
|
@ -34,8 +46,4 @@ $defaultWatermarkLink: '../images/watermark.png';
|
|||
* Z-indexes. TODO: Replace this by a function.
|
||||
*/
|
||||
$toolbarZ: 900;
|
||||
$overlayZ: 800;
|
||||
|
||||
$rateStarDefault: #ccc;
|
||||
$rateStarActivity: #f6c342;
|
||||
$rateStarLabelColor: #333;
|
||||
$overlayZ: 800;
|
|
@ -13,17 +13,17 @@
|
|||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: flex-end;
|
||||
justify-content: flex-start;
|
||||
|
||||
position:absolute;
|
||||
text-align:right;
|
||||
height:196px;
|
||||
padding: 18px;
|
||||
padding: 10px 10px 10px 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 20px;
|
||||
right: 0px;
|
||||
width:auto;
|
||||
border:1px solid transparent;
|
||||
z-index: 5;
|
||||
|
@ -43,12 +43,25 @@
|
|||
|
||||
#remoteVideos .videocontainer {
|
||||
display: none;
|
||||
position: relative;
|
||||
background-color: black;
|
||||
background-size: contain;
|
||||
border-radius:1px;
|
||||
margin: 0 5px;
|
||||
border: 1px solid #212425;
|
||||
}
|
||||
|
||||
.videocontainer__toolbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
max-height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
cursor: hand;
|
||||
transition-duration: 0.5s;
|
||||
|
@ -63,12 +76,12 @@
|
|||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
box-shadow: inset 0 0 28px #006d91;
|
||||
//box-shadow: inset 0 0 28px #006d91;
|
||||
border: 1px solid #006d91;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer.videoContainerFocused:hover {
|
||||
box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
|
||||
//box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
|
||||
border: 1px solid #c1c1c1;
|
||||
}
|
||||
|
||||
|
@ -145,11 +158,11 @@
|
|||
#remoteVideos .videocontainer>div.remotevideomenu {
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 5px 0px;
|
||||
width: 25px;
|
||||
font-size: 11pt;
|
||||
font-size: 9pt;
|
||||
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
|
||||
border: 0px;
|
||||
z-index: 2;
|
||||
|
@ -166,22 +179,28 @@
|
|||
|
||||
.videocontainer>span.displayname,
|
||||
.videocontainer>input.displayname {
|
||||
display: none;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
background: rgba(0,0,0,.7);
|
||||
bottom: 4px;
|
||||
left: 25%;
|
||||
color: $participantNameColor;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
width: 70%;
|
||||
height: 20%;
|
||||
left: 15%;
|
||||
top: 40%;
|
||||
padding: 5px;
|
||||
font-size: 11pt;
|
||||
width: 50%;
|
||||
font-size: 12px;
|
||||
font-weight: 100;
|
||||
letter-spacing: 1px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
.videocontainer>input.displayname {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.videocontainer>span.status {
|
||||
|
@ -231,8 +250,8 @@
|
|||
{
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
font-size: 8pt;
|
||||
top: 3px;
|
||||
font-size: 7.5px;
|
||||
border: 0px;
|
||||
width: 18px;
|
||||
height: 13px;
|
||||
|
@ -291,7 +310,8 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
padding: 8px 5px;
|
||||
width: 25px;
|
||||
font-size: 8pt;
|
||||
|
@ -305,8 +325,7 @@
|
|||
display: inline-block;
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 8px 5px;
|
||||
width: 25px;
|
||||
font-size: 8pt;
|
||||
|
@ -316,24 +335,30 @@
|
|||
}
|
||||
|
||||
.videocontainer>span.indicator {
|
||||
bottom: 0px;
|
||||
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
@include circle(23px);
|
||||
box-sizing: border-box;
|
||||
z-index: 3;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
background: #21B9FC;
|
||||
margin: 5px;
|
||||
background: $dominantSpeakerBg;
|
||||
margin: 7px;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
|
||||
color: $thumbnailPictogramColor;
|
||||
font-size: 11pt;
|
||||
border: 0px;
|
||||
border: 2px solid $thumbnailPictogramColor;
|
||||
}
|
||||
|
||||
.videocontainer>#raisehandindicator {
|
||||
background: $raiseHandBg;
|
||||
}
|
||||
|
||||
#indicatoricon {
|
||||
padding-top: 5px;
|
||||
font-size: 12px;
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
#reloadPresentation {
|
||||
|
@ -395,10 +420,8 @@
|
|||
}
|
||||
|
||||
.userAvatar {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
border-radius: 2px;
|
||||
@include circle(60px);
|
||||
@include absoluteAligning(60px, 60px);
|
||||
}
|
||||
|
||||
.sharedVideoAvatar {
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
.chat {
|
||||
&__nickname {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
&__input {
|
||||
|
||||
}
|
||||
}
|
|
@ -0,0 +1,222 @@
|
|||
@import 'chat';
|
||||
|
||||
#chatspace {
|
||||
* {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
display: none;
|
||||
background-color: black;
|
||||
border-left: 1px solid #424242;
|
||||
|
||||
&.is-conversation-mode {
|
||||
#chatconversation {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#usermsg {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#nickname {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#smileysarea {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
float: left;
|
||||
padding-left: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
float: right;
|
||||
padding-right: 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.usermessage {
|
||||
padding-top: 20px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
#chatconversation {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
top: 5px;
|
||||
padding: 5px;
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
font-size: 10pt;
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.localuser {
|
||||
color: #087dba;
|
||||
}
|
||||
|
||||
.errorMessage {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.remoteuser {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#usermsg {
|
||||
visibility:hidden;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
right: 0px;
|
||||
width: 83%;
|
||||
height: 30px;
|
||||
padding: 5px 5px 5px 0px;
|
||||
max-height:150px;
|
||||
min-height:35px;
|
||||
border: 0px none;
|
||||
background: #3a3a3a;
|
||||
color: #a7a7a7;
|
||||
box-shadow: none;
|
||||
border-radius:0;
|
||||
font-size: 10pt;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
resize: none;
|
||||
|
||||
&:hover {
|
||||
border: 0px none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #3a3a3a;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
#unreadMessages {
|
||||
font-size: 8px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#bottomUnreadMessages {
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
font-size: 8px;
|
||||
}
|
||||
|
||||
.chatArrow {
|
||||
position: absolute;
|
||||
height: 15px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.chatmessage {
|
||||
background: #3a3a3a;
|
||||
width: 93%;
|
||||
margin-left: 5%;
|
||||
margin-right: auto;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0px;
|
||||
margin-top: 3px;
|
||||
left: 5px;
|
||||
color: #a7a7a7;
|
||||
overflow: hidden;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.smiley {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
#smileys {
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
right: 5px;
|
||||
background: white;
|
||||
border-radius: 50px;
|
||||
height: 26px;
|
||||
margin: auto;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 22px;
|
||||
padding: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
#smileysarea {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
width: 17%;
|
||||
min-width: 31px;
|
||||
height: 40px;
|
||||
padding: 0px;
|
||||
max-height: 150px;
|
||||
min-height: 35px;
|
||||
border: 0px none;
|
||||
background: #3a3a3a;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
#smileysContainer {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: #3a3a3a;
|
||||
border-bottom: 1px solid;
|
||||
border-top: 1px solid;
|
||||
width: 100%;
|
||||
bottom: 10%;
|
||||
|
||||
.smiley {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
.smileyContainer {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
background: #3e3e3e;
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: #06a5df;
|
||||
width: 7px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: black;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: black;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #06a5df;
|
||||
border-radius: 4px;
|
||||
}
|
|
@ -2,14 +2,14 @@
|
|||
|
||||
@import 'variables';
|
||||
|
||||
/* Variables END */
|
||||
|
||||
/* Mixins BEGIN */
|
||||
|
||||
@import "mixins";
|
||||
|
||||
/* Mixins END */
|
||||
|
||||
/* Variables END */
|
||||
|
||||
/* Fonts BEGIN */
|
||||
|
||||
@import 'font';
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
.nickname {
|
||||
text-align: center;
|
||||
color: #9d9d9d;
|
||||
font-size: 18px;
|
||||
width: 95%;
|
||||
|
||||
&__input {
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
background: #3a3a3a;
|
||||
box-shadow: inset 0 0 3px 2px #a7a7a7;
|
||||
border: 1px solid #a7a7a7;
|
||||
color: #a7a7a7;
|
||||
}
|
||||
}
|
|
@ -238,12 +238,13 @@
|
|||
</div>
|
||||
|
||||
<div id="remoteVideos">
|
||||
<span id="localVideoContainer" class="videocontainer">
|
||||
<span id="localVideoContainer" class="videocontainer videocontainer_small">
|
||||
<span id="localVideoWrapper">
|
||||
<!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
|
||||
</span>
|
||||
<audio id="localAudio" autoplay muted></audio>
|
||||
<span class="focusindicator"></span>
|
||||
<div class="videocontainer__toolbar"></div>
|
||||
</span>
|
||||
<audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
|
||||
<audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
|
||||
|
|
|
@ -34,5 +34,9 @@ var interfaceConfig = {
|
|||
filmStripOnly: false,
|
||||
RANDOM_AVATAR_URL_PREFIX: false,
|
||||
RANDOM_AVATAR_URL_SUFFIX: false,
|
||||
FILM_STRIP_MAX_HEIGHT: 120
|
||||
};
|
||||
FILM_STRIP_MAX_HEIGHT: 120,
|
||||
LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
|
||||
LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
|
||||
REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
|
||||
REMOTE_THUMBNAIL_RATIO_HEIGHT: 1
|
||||
};
|
||||
|
|
Binary file not shown.
|
@ -1,5 +1,6 @@
|
|||
/* global $, APP, config, interfaceConfig, JitsiMeetJS */
|
||||
import UIEvents from "../../service/UI/UIEvents";
|
||||
import UIUtil from "./util/UIUtil";
|
||||
|
||||
/**
|
||||
* Constructs the html for the overall feedback window.
|
||||
|
|
|
@ -242,19 +242,25 @@ const AudioLevels = {
|
|||
ASDrawContext.fill();
|
||||
},
|
||||
|
||||
updateCanvasSize (thumbWidth, thumbHeight) {
|
||||
let canvasWidth = thumbWidth + interfaceConfig.CANVAS_EXTRA;
|
||||
let canvasHeight = thumbHeight + interfaceConfig.CANVAS_EXTRA;
|
||||
updateCanvasSize (remoteVideo, localVideo) {
|
||||
let localCanvasWidth = localVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
|
||||
let localCanvasHeight = localVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
|
||||
let remoteCanvasWidth = remoteVideo.thumbWidth + interfaceConfig.CANVAS_EXTRA;
|
||||
let remoteCanvasHeight = remoteVideo.thumbHeight + interfaceConfig.CANVAS_EXTRA;
|
||||
|
||||
FilmStrip.getThumbs().children('canvas').each(function () {
|
||||
$(this).attr('width', canvasWidth);
|
||||
$(this).attr('height', canvasHeight);
|
||||
let { remoteThumbs, localThumb } = FilmStrip.getThumbs();
|
||||
|
||||
remoteThumbs.children('canvas').each(function () {
|
||||
$(this).attr('width', remoteCanvasWidth);
|
||||
$(this).attr('height', remoteCanvasHeight);
|
||||
});
|
||||
|
||||
Object.keys(audioLevelCanvasCache).forEach(function (id) {
|
||||
audioLevelCanvasCache[id].width = canvasWidth;
|
||||
audioLevelCanvasCache[id].height = canvasHeight;
|
||||
});
|
||||
if(localThumb) {
|
||||
localThumb.children('canvas').each(function () {
|
||||
$(this).attr('width', localCanvasWidth);
|
||||
$(this).attr('height', localCanvasHeight);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
Binary file not shown.
|
@ -7,7 +7,6 @@ import SideContainerToggler from "../side_pannels/SideContainerToggler";
|
|||
let roomUrl = null;
|
||||
let emitter = null;
|
||||
|
||||
|
||||
/**
|
||||
* Opens the invite link dialog.
|
||||
*/
|
||||
|
@ -766,4 +765,4 @@ const Toolbar = {
|
|||
}
|
||||
};
|
||||
|
||||
export default Toolbar;
|
||||
export default Toolbar;
|
|
@ -3,8 +3,6 @@
|
|||
import UIEvents from "../../../service/UI/UIEvents";
|
||||
import UIUtil from "../util/UIUtil";
|
||||
|
||||
const thumbAspectRatio = 1 / 1;
|
||||
|
||||
const FilmStrip = {
|
||||
/**
|
||||
*
|
||||
|
@ -66,13 +64,52 @@ const FilmStrip = {
|
|||
- parseInt(this.filmStrip.css('paddingRight'), 10);
|
||||
},
|
||||
|
||||
/**
|
||||
* Calculates the thumbnail size.
|
||||
*/
|
||||
calculateThumbnailSize () {
|
||||
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
|
||||
calculateThumbnailSize() {
|
||||
let availableSizes = this.calculateAvailableSize();
|
||||
let width = availableSizes.availableWidth;
|
||||
let height = availableSizes.availableHeight;
|
||||
|
||||
let numvids = this.getThumbs(true).length;
|
||||
return this.calculateThumbnailSizeFromAvailable(width, height);
|
||||
},
|
||||
|
||||
/**
|
||||
* Normalizes local and remote thumbnail ratios
|
||||
*/
|
||||
normalizeThumbnailRatio () {
|
||||
let remoteHeightRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_HEIGHT;
|
||||
let remoteWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO_WIDTH;
|
||||
|
||||
let localHeightRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_HEIGHT;
|
||||
let localWidthRatio = interfaceConfig.LOCAL_THUMBNAIL_RATIO_WIDTH;
|
||||
|
||||
let commonHeightRatio = remoteHeightRatio * localHeightRatio;
|
||||
|
||||
let localRatioCoefficient = localWidthRatio / localHeightRatio;
|
||||
let remoteRatioCoefficient = remoteWidthRatio / remoteHeightRatio;
|
||||
|
||||
remoteWidthRatio = commonHeightRatio * remoteRatioCoefficient;
|
||||
remoteHeightRatio = commonHeightRatio;
|
||||
|
||||
localWidthRatio = commonHeightRatio * localRatioCoefficient;
|
||||
localHeightRatio = commonHeightRatio;
|
||||
|
||||
let localRatio = {
|
||||
widthRatio: localWidthRatio,
|
||||
heightRatio: localHeightRatio
|
||||
};
|
||||
|
||||
let remoteRatio = {
|
||||
widthRatio: remoteWidthRatio,
|
||||
heightRatio: remoteHeightRatio
|
||||
};
|
||||
|
||||
return { localRatio, remoteRatio };
|
||||
},
|
||||
|
||||
calculateAvailableSize() {
|
||||
let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
|
||||
let thumbs = this.getThumbs(true);
|
||||
let numvids = thumbs.remoteThumbs.length;
|
||||
|
||||
let localVideoContainer = $("#localVideoContainer");
|
||||
|
||||
|
@ -92,11 +129,10 @@ const FilmStrip = {
|
|||
|
||||
let availableWidth = videoAreaAvailableWidth;
|
||||
|
||||
// If the number of videos is 0 or undefined we don't need to calculate
|
||||
// further.
|
||||
if (numvids)
|
||||
// If local thumb is not hidden
|
||||
if(thumbs.localThumb) {
|
||||
availableWidth = Math.floor(
|
||||
(videoAreaAvailableWidth - numvids * (
|
||||
(videoAreaAvailableWidth - (
|
||||
UIUtil.parseCssInt(
|
||||
localVideoContainer.css('borderLeftWidth'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
|
@ -109,36 +145,90 @@ const FilmStrip = {
|
|||
localVideoContainer.css('marginLeft'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
localVideoContainer.css('marginRight'), 10)))
|
||||
/ numvids);
|
||||
);
|
||||
}
|
||||
|
||||
// If the number of videos is 0 or undefined we don't need to calculate
|
||||
// further.
|
||||
if (numvids) {
|
||||
let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
|
||||
availableWidth = Math.floor(
|
||||
(videoAreaAvailableWidth - numvids * (
|
||||
UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('borderLeftWidth'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('borderRightWidth'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('paddingLeft'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('paddingRight'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('marginLeft'), 10)
|
||||
+ UIUtil.parseCssInt(
|
||||
remoteVideoContainer.css('marginRight'), 10)))
|
||||
);
|
||||
}
|
||||
|
||||
let maxHeight
|
||||
// If the MAX_HEIGHT property hasn't been specified
|
||||
// we have the static value.
|
||||
= Math.min( interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
|
||||
availableHeight);
|
||||
= Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
|
||||
availableHeight);
|
||||
|
||||
availableHeight
|
||||
= Math.min( maxHeight, window.innerHeight - 18);
|
||||
= Math.min(maxHeight, window.innerHeight - 18);
|
||||
|
||||
if (availableHeight < availableWidth) {
|
||||
availableWidth = availableHeight;
|
||||
return { availableWidth, availableHeight };
|
||||
},
|
||||
|
||||
calculateThumbnailSizeFromAvailable(availableWidth, availableHeight) {
|
||||
let { localRatio, remoteRatio } = this.normalizeThumbnailRatio();
|
||||
let { remoteThumbs } = this.getThumbs(true);
|
||||
let remoteProportion = remoteRatio.widthRatio * remoteThumbs.length;
|
||||
let widthProportion = remoteProportion + localRatio.widthRatio;
|
||||
|
||||
let heightUnit = availableHeight / localRatio.heightRatio;
|
||||
let widthUnit = availableWidth / widthProportion;
|
||||
|
||||
if (heightUnit < widthUnit) {
|
||||
widthUnit = heightUnit;
|
||||
}
|
||||
else
|
||||
availableHeight = availableWidth;
|
||||
heightUnit = widthUnit;
|
||||
|
||||
let localVideo = {
|
||||
thumbWidth: widthUnit * localRatio.widthRatio,
|
||||
thumbHeight: heightUnit * localRatio.heightRatio
|
||||
};
|
||||
let remoteVideo = {
|
||||
thumbWidth: widthUnit * remoteRatio.widthRatio,
|
||||
thumbHeight: widthUnit * remoteRatio.heightRatio
|
||||
};
|
||||
|
||||
return {
|
||||
thumbWidth: availableWidth,
|
||||
thumbHeight: availableHeight
|
||||
localVideo,
|
||||
remoteVideo
|
||||
};
|
||||
},
|
||||
|
||||
resizeThumbnails (thumbWidth, thumbHeight,
|
||||
resizeThumbnails (remote, local,
|
||||
animate = false, forceUpdate = false) {
|
||||
|
||||
return new Promise(resolve => {
|
||||
this.getThumbs(!forceUpdate).animate({
|
||||
height: thumbHeight,
|
||||
width: thumbWidth
|
||||
let thumbs = this.getThumbs(!forceUpdate);
|
||||
|
||||
thumbs.localThumb.animate({
|
||||
height: local.thumbHeight,
|
||||
width: local.thumbWidth
|
||||
}, {
|
||||
queue: false,
|
||||
duration: animate ? 500 : 0,
|
||||
complete: resolve
|
||||
});
|
||||
|
||||
thumbs.remoteThumbs.animate({
|
||||
height: remote.thumbHeight,
|
||||
width: remote.thumbWidth
|
||||
}, {
|
||||
queue: false,
|
||||
duration: animate ? 500 : 0,
|
||||
|
@ -147,7 +237,7 @@ const FilmStrip = {
|
|||
|
||||
this.filmStrip.animate({
|
||||
// adds 2 px because of small video 1px border
|
||||
height: thumbHeight + 2
|
||||
height: remote.thumbHeight + 2
|
||||
}, {
|
||||
queue: false,
|
||||
duration: animate ? 500 : 0
|
||||
|
@ -165,13 +255,19 @@ const FilmStrip = {
|
|||
selector += ':visible';
|
||||
}
|
||||
|
||||
let localThumb = $("#localVideoContainer");
|
||||
let remoteThumbs = this.filmStrip.children(selector)
|
||||
.not("#localVideoContainer");
|
||||
|
||||
// Exclude the local video container if it has been hidden.
|
||||
if ($("#localVideoContainer").hasClass("hidden"))
|
||||
return this.filmStrip.children(selector)
|
||||
.not("#localVideoContainer");
|
||||
else
|
||||
return this.filmStrip.children(selector);
|
||||
}
|
||||
if (localThumb.hasClass("hidden")) {
|
||||
return { remoteThumbs };
|
||||
} else {
|
||||
return { remoteThumbs, localThumb };
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
export default FilmStrip;
|
||||
|
|
|
@ -11,7 +11,6 @@ function LocalVideo(VideoLayout, emitter) {
|
|||
this.videoSpanId = "localVideoContainer";
|
||||
this.container = $("#localVideoContainer").get(0);
|
||||
this.localVideoId = null;
|
||||
this.bindHoverHandler();
|
||||
if(config.enableLocalVideoFlip)
|
||||
this._buildContextMenu();
|
||||
this.isLocal = true;
|
||||
|
@ -44,7 +43,7 @@ function createEditDisplayNameButton() {
|
|||
editButton.className = 'displayname';
|
||||
UIUtil.setTooltip(editButton,
|
||||
"videothumbnail.editnickname",
|
||||
"top");
|
||||
"left");
|
||||
editButton.innerHTML = '<i class="icon-edit"></i>';
|
||||
|
||||
return editButton;
|
||||
|
@ -72,7 +71,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
|
|||
if (displayName && displayName.length > 0) {
|
||||
meHTML = APP.translation.generateTranslationHTML("me");
|
||||
$('#localDisplayName').html(
|
||||
UIUtil.escapeHtml(displayName) + ' (' + meHTML + ')'
|
||||
`${UIUtil.escapeHtml(displayName)} (${meHTML})`
|
||||
);
|
||||
} else {
|
||||
$('#localDisplayName').html(defaultLocalDisplayName);
|
||||
|
@ -80,11 +79,9 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
|
|||
}
|
||||
this.updateView();
|
||||
} else {
|
||||
var editButton = createEditDisplayNameButton();
|
||||
|
||||
nameSpan = document.createElement('span');
|
||||
nameSpan.className = 'displayname';
|
||||
$('#' + this.videoSpanId)[0].appendChild(nameSpan);
|
||||
document.getElementById(this.videoSpanId).appendChild(nameSpan);
|
||||
|
||||
|
||||
if (displayName && displayName.length > 0) {
|
||||
|
@ -97,7 +94,6 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
|
|||
|
||||
|
||||
nameSpan.id = 'localDisplayName';
|
||||
this.container.appendChild(editButton);
|
||||
//translates popover of edit button
|
||||
APP.translation.translateElement($("a.displayname"));
|
||||
|
||||
|
@ -124,21 +120,23 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) {
|
|||
var self = this;
|
||||
$('#localVideoContainer .displayname')
|
||||
.bind("click", function (e) {
|
||||
let $editDisplayName = $('#editDisplayName');
|
||||
let $localDisplayName = $('#localDisplayName');
|
||||
|
||||
var editDisplayName = $('#editDisplayName');
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
$('#localDisplayName').hide();
|
||||
editDisplayName.show();
|
||||
editDisplayName.focus();
|
||||
editDisplayName.select();
|
||||
$localDisplayName.hide();
|
||||
$editDisplayName.show();
|
||||
$editDisplayName.focus();
|
||||
$editDisplayName.select();
|
||||
|
||||
editDisplayName.one("focusout", function (e) {
|
||||
$editDisplayName.one("focusout", function (e) {
|
||||
self.emitter.emit(UIEvents.NICKNAME_CHANGED, this.value);
|
||||
$('#editDisplayName').hide();
|
||||
$editDisplayName.hide();
|
||||
$localDisplayName.show();
|
||||
});
|
||||
|
||||
editDisplayName.on('keydown', function (e) {
|
||||
$editDisplayName.on('keydown', function (e) {
|
||||
if (e.keyCode === 13) {
|
||||
e.preventDefault();
|
||||
$('#editDisplayName').hide();
|
||||
|
|
|
@ -17,7 +17,6 @@ function RemoteVideo(id, VideoLayout, emitter) {
|
|||
this.addRemoteVideoContainer();
|
||||
this.connectionIndicator = new ConnectionIndicator(this, id);
|
||||
this.setDisplayName();
|
||||
this.bindHoverHandler();
|
||||
this.flipX = false;
|
||||
this.isLocal = false;
|
||||
this.isMuted = false;
|
||||
|
@ -34,7 +33,9 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
|
|||
if (APP.conference.isModerator) {
|
||||
this.addRemoteVideoMenu();
|
||||
}
|
||||
let {thumbWidth, thumbHeight} = this.VideoLayout.resizeThumbnails();
|
||||
|
||||
let { remoteVideo } = this.VideoLayout.resizeThumbnails();
|
||||
let { thumbHeight, thumbWidth } = remoteVideo;
|
||||
AudioLevels.updateAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
|
||||
|
||||
return this.container;
|
||||
|
@ -427,9 +428,14 @@ RemoteVideo.prototype.removeRemoteVideoMenu = function() {
|
|||
};
|
||||
|
||||
RemoteVideo.createContainer = function (spanId) {
|
||||
var container = document.createElement('span');
|
||||
let container = document.createElement('span');
|
||||
container.id = spanId;
|
||||
container.className = 'videocontainer';
|
||||
|
||||
let toolbar = document.createElement('div');
|
||||
toolbar.className = "videocontainer__toolbar";
|
||||
container.appendChild(toolbar);
|
||||
|
||||
var remotes = document.getElementById('remoteVideos');
|
||||
return remotes.appendChild(container);
|
||||
};
|
||||
|
|
|
@ -219,6 +219,7 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
|
|||
if (audioMutedSpan.length > 0) {
|
||||
audioMutedSpan.popover('hide');
|
||||
audioMutedSpan.remove();
|
||||
this.updateIconPositions();
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
@ -236,6 +237,7 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) {
|
|||
audioMutedSpan.appendChild(mutedIndicator);
|
||||
|
||||
}
|
||||
|
||||
this.updateIconPositions();
|
||||
}
|
||||
this.isMuted = isMuted;
|
||||
|
@ -254,6 +256,7 @@ SmallVideo.prototype.setMutedView = function(isMuted) {
|
|||
if (isMuted === false) {
|
||||
if (videoMutedSpan.length > 0) {
|
||||
videoMutedSpan.remove();
|
||||
this.updateIconPositions();
|
||||
}
|
||||
}
|
||||
else {
|
||||
|
@ -278,17 +281,10 @@ SmallVideo.prototype.setMutedView = function(isMuted) {
|
|||
};
|
||||
|
||||
SmallVideo.prototype.updateIconPositions = function () {
|
||||
var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
|
||||
var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
|
||||
var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
|
||||
if(connectionIndicator.length > 0 &&
|
||||
connectionIndicator[0].style.display != "none") {
|
||||
audioMutedSpan.css({right: "23px"});
|
||||
videoMutedSpan.css({right: ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"});
|
||||
} else {
|
||||
audioMutedSpan.css({right: "0px"});
|
||||
videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"});
|
||||
}
|
||||
let audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
|
||||
let videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
|
||||
audioMutedSpan.css({left: "0px"});
|
||||
videoMutedSpan.css({left: (audioMutedSpan.length > 0? 25 : 0) + "px"});
|
||||
};
|
||||
|
||||
/**
|
||||
|
@ -406,8 +402,6 @@ SmallVideo.prototype.updateView = function () {
|
|||
setVisibility(video, showVideo);
|
||||
}
|
||||
setVisibility(avatar, showAvatar);
|
||||
|
||||
this.showDisplayName(!showVideo && !showAvatar);
|
||||
};
|
||||
|
||||
SmallVideo.prototype.avatarChanged = function (avatarUrl) {
|
||||
|
@ -465,7 +459,6 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
|
|||
var indicatorSpanId = "raisehandindicator";
|
||||
var indicatorSpan = this.getIndicatorSpan(indicatorSpanId);
|
||||
|
||||
indicatorSpan.style.background = "#D6D61E";
|
||||
indicatorSpan.innerHTML
|
||||
= "<i id='indicatoricon' class='fa fa-hand-paper-o'></i>";
|
||||
|
||||
|
|
|
@ -487,19 +487,20 @@ var VideoLayout = {
|
|||
forceUpdate = false,
|
||||
onComplete = null) {
|
||||
|
||||
let {thumbWidth, thumbHeight}
|
||||
let { remoteVideo, localVideo }
|
||||
= FilmStrip.calculateThumbnailSize();
|
||||
|
||||
$('.userAvatar').css('left', (thumbWidth - thumbHeight) / 2);
|
||||
let {thumbWidth, thumbHeight}
|
||||
= remoteVideo;
|
||||
|
||||
FilmStrip.resizeThumbnails(thumbWidth, thumbHeight,
|
||||
FilmStrip.resizeThumbnails(remoteVideo, localVideo,
|
||||
animate, forceUpdate)
|
||||
.then(function () {
|
||||
AudioLevels.updateCanvasSize(thumbWidth, thumbHeight);
|
||||
AudioLevels.updateCanvasSize(remoteVideo, localVideo);
|
||||
if (onComplete && typeof onComplete === "function")
|
||||
onComplete();
|
||||
});
|
||||
return {thumbWidth, thumbHeight};
|
||||
});
|
||||
return {remoteVideo, localVideo};
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
10
package.json
10
package.json
|
@ -21,18 +21,18 @@
|
|||
"bootstrap": "3.1.1",
|
||||
"events": "*",
|
||||
"i18next-client": "1.7.7",
|
||||
"jquery": "~2.1.1",
|
||||
"jQuery-Impromptu": "git+https://github.com/trentrichardson/jQuery-Impromptu.git#v6.0.0",
|
||||
"lib-jitsi-meet": "git+https://github.com/jitsi/lib-jitsi-meet.git",
|
||||
"jquery": "~2.1.1",
|
||||
"jquery-contextmenu": "*",
|
||||
"jquery-ui": "1.10.5",
|
||||
"jssha": "1.5.0",
|
||||
"jws": "*",
|
||||
"lib-jitsi-meet": "git+https://github.com/jitsi/lib-jitsi-meet.git",
|
||||
"postis": "^2.2.0",
|
||||
"retry": "0.6.1",
|
||||
"strophe": "^1.2.2",
|
||||
"strophejs-plugins": "^0.0.6",
|
||||
"toastr": "^2.0.3",
|
||||
"postis": "^2.2.0",
|
||||
"jws": "*"
|
||||
"toastr": "^2.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-polyfill": "*",
|
||||
|
|
Loading…
Reference in New Issue