Turning video thumbnails into squares. Changes the size of the dominant speaker avatar and fixes some minor thing around those two.

This commit is contained in:
yanas 2016-03-03 17:38:40 -06:00
parent 5c0088d2ef
commit 64d8cb2db2
6 changed files with 69 additions and 47 deletions

View File

@ -9,7 +9,7 @@ html, body{
color: #424242; color: #424242;
font-family:'Helvetica Neue', Helvetica, sans-serif; font-family:'Helvetica Neue', Helvetica, sans-serif;
font-weight: 400; font-weight: 400;
background: #000000; background: #4E4E4E;
overflow: hidden; overflow: hidden;
} }
@ -263,7 +263,7 @@ div.feedbackButton:hover {
width: 29px; width: 29px;
border-radius: 1px; border-radius: 1px;
color: #FFF; color: #FFF;
background: rgba(0,0,0,0.8); background: rgba(0,0,0,0.5);
z-index: 6; /*+1 from #remoteVideos*/ z-index: 6; /*+1 from #remoteVideos*/
} }
@ -337,7 +337,7 @@ div.feedbackButton:hover {
} }
#toast-container.notification-bottom-right { #toast-container.notification-bottom-right {
bottom: 120px; bottom: 140px;
right: 5px; right: 5px;
} }

View File

@ -85,6 +85,7 @@
#remoteVideos .videocontainer>object { #remoteVideos .videocontainer>object {
cursor: hand; cursor: hand;
border-radius:1px; border-radius:1px;
object-fit: cover;
} }
.flipVideoX { .flipVideoX {
@ -98,6 +99,7 @@
#localVideoWrapper>object { #localVideoWrapper>object {
cursor: hand; cursor: hand;
border-radius:1px !important; border-radius:1px !important;
object-fit: cover;
} }
#largeVideo, #largeVideo,
@ -371,7 +373,7 @@
padding-right:2px; padding-right:2px;
height:38px; height:38px;
width:auto; width:auto;
background-color: rgba(0,0,0,0.8); background-color: rgba(0,0,0,0.5);
border-radius: 1px; border-radius: 1px;
pointer-events: auto; pointer-events: auto;
} }
@ -401,8 +403,8 @@
#dominantSpeaker { #dominantSpeaker {
visibility: hidden; visibility: hidden;
width: 150px; width: 300px;
height: 150px; height: 300px;
margin: auto; margin: auto;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -421,12 +423,12 @@
} }
#dominantSpeakerAvatar { #dominantSpeakerAvatar {
width: 100px; width: 200px;
height: 100px; height: 200px;
top: 25px; top: 50px;
margin: auto; margin: auto;
position: relative; position: relative;
border-radius: 50px; border-radius: 100px;
z-index: 3; z-index: 3;
visibility: inherit; visibility: inherit;
} }
@ -434,8 +436,8 @@
.userAvatar { .userAvatar {
height: 100%; height: 100%;
position: absolute; position: absolute;
left: 35px; left: 0;
border-radius: 200px; border-radius: 2px;
} }
.sharedVideoAvatar { .sharedVideoAvatar {

View File

@ -1,6 +1,6 @@
var interfaceConfig = { var interfaceConfig = {
CANVAS_EXTRA: 104, CANVAS_EXTRA: 104,
CANVAS_RADIUS: 1, CANVAS_RADIUS: 0,
SHADOW_COLOR: '#ffffff', SHADOW_COLOR: '#ffffff',
INITIAL_TOOLBAR_TIMEOUT: 20000, INITIAL_TOOLBAR_TIMEOUT: 20000,
TOOLBAR_TIMEOUT: 4000, TOOLBAR_TIMEOUT: 4000,
@ -14,7 +14,6 @@ var interfaceConfig = {
GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true, GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
APP_NAME: "Jitsi Meet", APP_NAME: "Jitsi Meet",
INVITATION_POWERED_BY: true, INVITATION_POWERED_BY: true,
DOMINANT_SPEAKER_AVATAR_SIZE: 100,
TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop', TOOLBAR_BUTTONS: ['authentication', 'microphone', 'camera', 'desktop',
'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo',
'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip',
@ -30,5 +29,5 @@ var interfaceConfig = {
filmStripOnly: false, filmStripOnly: false,
RANDOM_AVATAR_URL_PREFIX: "http://abotars.hipch.at/meeple/", RANDOM_AVATAR_URL_PREFIX: "http://abotars.hipch.at/meeple/",
RANDOM_AVATAR_URL_SUFFIX: ".png", RANDOM_AVATAR_URL_SUFFIX: ".png",
FILM_STRIP_MAX_HEIGHT: 160 FILM_STRIP_MAX_HEIGHT: 120
}; };

View File

@ -8,13 +8,16 @@ const LOCAL_LEVEL = 'local';
let ASDrawContext = null; let ASDrawContext = null;
let audioLevelCanvasCache = {}; let audioLevelCanvasCache = {};
let dominantSpeakerAudioElement = null;
function initDominantSpeakerAudioLevels() { function initDominantSpeakerAudioLevels(dominantSpeakerAvatarSize) {
let ASRadius = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE / 2; let ASRadius = dominantSpeakerAvatarSize / 2;
let ASCenter = (interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE + ASRadius) / 2; let ASCenter = (dominantSpeakerAvatarSize + ASRadius) / 2;
// Draw a circle. // Draw a circle.
ASDrawContext.beginPath();
ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI); ASDrawContext.arc(ASCenter, ASCenter, ASRadius, 0, 2 * Math.PI);
ASDrawContext.closePath();
// Add a shadow around the circle // Add a shadow around the circle
ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR; ASDrawContext.shadowColor = interfaceConfig.SHADOW_COLOR;
@ -90,14 +93,14 @@ function getShadowLevel (audioLevel) {
let shadowLevel = 0; let shadowLevel = 0;
if (audioLevel <= 0.3) { if (audioLevel <= 0.3) {
shadowLevel shadowLevel = Math.round(
= Math.round(interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3)); interfaceConfig.CANVAS_EXTRA/2*(audioLevel/0.3));
} else if (audioLevel <= 0.6) { } else if (audioLevel <= 0.6) {
shadowLevel shadowLevel = Math.round(
= Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3)); interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.3) / 0.3));
} else { } else {
shadowLevel shadowLevel = Math.round(
= Math.round(interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4)); interfaceConfig.CANVAS_EXTRA/2*((audioLevel - 0.6) / 0.4));
} }
return shadowLevel; return shadowLevel;
@ -124,8 +127,18 @@ function getVideoSpanId(id) {
const AudioLevels = { const AudioLevels = {
init () { init () {
ASDrawContext = $('#dominantSpeakerAudioLevel')[0].getContext('2d'); dominantSpeakerAudioElement = $('#dominantSpeakerAudioLevel')[0];
initDominantSpeakerAudioLevels(); ASDrawContext = dominantSpeakerAudioElement.getContext('2d');
let parentContainer = $("#dominantSpeaker");
let dominantSpeakerWidth = parentContainer.width();
let dominantSpeakerHeight = parentContainer.height();
dominantSpeakerAudioElement.width = dominantSpeakerWidth;
dominantSpeakerAudioElement.height = dominantSpeakerHeight;
let dominantSpeakerAvatar = $("#dominantSpeakerAvatar");
initDominantSpeakerAudioLevels(dominantSpeakerAvatar.width());
}, },
/** /**
@ -155,8 +168,10 @@ const AudioLevels = {
audioLevelCanvas = document.createElement('canvas'); audioLevelCanvas = document.createElement('canvas');
audioLevelCanvas.className = "audiolevel"; audioLevelCanvas.className = "audiolevel";
audioLevelCanvas.style.bottom = `-${interfaceConfig.CANVAS_EXTRA/2}px`; audioLevelCanvas.style.bottom
audioLevelCanvas.style.left = `-${interfaceConfig.CANVAS_EXTRA/2}px`; = `-${interfaceConfig.CANVAS_EXTRA/2}px`;
audioLevelCanvas.style.left
= `-${interfaceConfig.CANVAS_EXTRA/2}px`;
resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight); resizeAudioLevelCanvas(audioLevelCanvas, thumbWidth, thumbHeight);
videoSpan.appendChild(audioLevelCanvas); videoSpan.appendChild(audioLevelCanvas);
@ -213,7 +228,10 @@ const AudioLevels = {
return; return;
} }
ASDrawContext.clearRect(0, 0, 300, 300); ASDrawContext.clearRect(0, 0,
dominantSpeakerAudioElement.width,
dominantSpeakerAudioElement.height);
if (!audioLevel) { if (!audioLevel) {
return; return;
} }

View File

@ -2,7 +2,7 @@
import UIUtil from "../util/UIUtil"; import UIUtil from "../util/UIUtil";
const thumbAspectRatio = 16.0 / 9.0; const thumbAspectRatio = 1 / 1;
const FilmStrip = { const FilmStrip = {
init () { init () {
@ -44,11 +44,7 @@ const FilmStrip = {
* that we want to take into account when calculating the film strip width. * that we want to take into account when calculating the film strip width.
*/ */
calculateThumbnailSize (isSideBarVisible) { calculateThumbnailSize (isSideBarVisible) {
// Calculate the available height, which is the inner window height let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
// minus 39px for the header minus 2px for the delimiter lines on the
// top and bottom of the large video, minus the 36px space inside the
// remoteVideos container used for highlighting shadow.
let availableHeight = 100;
let numvids = this.getThumbs(true).length; let numvids = this.getThumbs(true).length;
@ -84,13 +80,13 @@ const FilmStrip = {
availableHeight); availableHeight);
availableHeight availableHeight
= Math.min( maxHeight, = Math.min( maxHeight, window.innerHeight - 18);
availableWidth / thumbAspectRatio,
window.innerHeight - 18);
if (availableHeight < availableWidth / thumbAspectRatio) { if (availableHeight < availableWidth) {
availableWidth = Math.floor(availableHeight * thumbAspectRatio); availableWidth = availableHeight;
} }
else
availableHeight = availableWidth;
return { return {
thumbWidth: availableWidth, thumbWidth: availableWidth,

View File

@ -8,7 +8,6 @@ import FilmStrip from './FilmStrip';
import Avatar from "../avatar/Avatar"; import Avatar from "../avatar/Avatar";
import {createDeferred} from '../../util/helpers'; import {createDeferred} from '../../util/helpers';
const avatarSize = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE;
const FADE_DURATION_MS = 300; const FADE_DURATION_MS = 300;
export const VIDEO_CONTAINER_TYPE = "camera"; export const VIDEO_CONTAINER_TYPE = "camera";
@ -175,6 +174,8 @@ class VideoContainer extends LargeContainer {
this.$avatar = $('#dominantSpeaker'); this.$avatar = $('#dominantSpeaker');
this.$wrapper = $('#largeVideoWrapper'); this.$wrapper = $('#largeVideoWrapper');
this.avatarHeight = $("#dominantSpeakerAvatar").height();
// This does not work with Temasys plugin - has to be a property to be // This does not work with Temasys plugin - has to be a property to be
// copied between new <object> elements // copied between new <object> elements
//this.$video.on('play', onPlay); //this.$video.on('play', onPlay);
@ -245,7 +246,7 @@ class VideoContainer extends LargeContainer {
containerWidth, containerHeight); containerWidth, containerHeight);
// update avatar position // update avatar position
let top = containerHeight / 2 - avatarSize / 4 * 3; let top = containerHeight / 2 - this.avatarHeight / 4 * 3;
this.$avatar.css('top', top); this.$avatar.css('top', top);
@ -369,6 +370,7 @@ export default class LargeVideoManager {
this.videoContainer = new VideoContainer( this.videoContainer = new VideoContainer(
() => this.resizeContainer(VIDEO_CONTAINER_TYPE)); () => this.resizeContainer(VIDEO_CONTAINER_TYPE));
this.addContainer(VIDEO_CONTAINER_TYPE, this.videoContainer); this.addContainer(VIDEO_CONTAINER_TYPE, this.videoContainer);
// use the same video container to handle and desktop tracks // use the same video container to handle and desktop tracks
this.addContainer("desktop", this.videoContainer); this.addContainer("desktop", this.videoContainer);
@ -382,22 +384,26 @@ export default class LargeVideoManager {
}); });
if (interfaceConfig.SHOW_JITSI_WATERMARK) { if (interfaceConfig.SHOW_JITSI_WATERMARK) {
let leftWatermarkDiv = this.$container.find("div.watermark.leftwatermark"); let leftWatermarkDiv
= this.$container.find("div.watermark.leftwatermark");
leftWatermarkDiv.css({display: 'block'}); leftWatermarkDiv.css({display: 'block'});
leftWatermarkDiv.parent().attr('href', interfaceConfig.JITSI_WATERMARK_LINK); leftWatermarkDiv.parent().attr(
'href', interfaceConfig.JITSI_WATERMARK_LINK);
} }
if (interfaceConfig.SHOW_BRAND_WATERMARK) { if (interfaceConfig.SHOW_BRAND_WATERMARK) {
let rightWatermarkDiv = this.$container.find("div.watermark.rightwatermark"); let rightWatermarkDiv
= this.$container.find("div.watermark.rightwatermark");
rightWatermarkDiv.css({ rightWatermarkDiv.css({
display: 'block', display: 'block',
backgroundImage: 'url(images/rightwatermark.png)' backgroundImage: 'url(images/rightwatermark.png)'
}); });
rightWatermarkDiv.parent().attr('href', interfaceConfig.BRAND_WATERMARK_LINK); rightWatermarkDiv.parent().attr(
'href', interfaceConfig.BRAND_WATERMARK_LINK);
} }
if (interfaceConfig.SHOW_POWERED_BY) { if (interfaceConfig.SHOW_POWERED_BY) {
@ -478,7 +484,8 @@ export default class LargeVideoManager {
return promise; return promise;
}).then(() => { }).then(() => {
// after everything is done check again if there are any pending new streams. // after everything is done check again if there are any pending
// new streams.
this.updateInProcess = false; this.updateInProcess = false;
this.scheduleLargeVideoUpdate(); this.scheduleLargeVideoUpdate();
}); });