Merge branch 'video-fadein-fix' of https://github.com/isymchych/jitsi-meet into jitsi-meet-new
This commit is contained in:
damencho
commit
e707eb9a79
|
|
@ -1,7 +1,8 @@
|
|||
/* global Strophe, APP, MD5, config, interfaceConfig */
|
||||
var users = {};
|
||||
/* global MD5, config, interfaceConfig */
|
||||
|
||||
var Avatar = {
|
||||
let users = {};
|
||||
|
||||
export default {
|
||||
|
||||
/**
|
||||
* Sets the user's avatar in the settings menu(if local user), contact list
|
||||
|
|
@ -9,55 +10,53 @@ var Avatar = {
|
|||
* @param id id of the user
|
||||
* @param email email or nickname to be used as a hash
|
||||
*/
|
||||
setUserAvatar: function (id, email) {
|
||||
setUserAvatar: function (id, email) {
|
||||
if (email) {
|
||||
if (users[id] === email) {
|
||||
return;
|
||||
}
|
||||
users[id] = email;
|
||||
}
|
||||
var avatarUrl = this.getAvatarUrl(id);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns the URL of the image for the avatar of a particular user,
|
||||
+ identified by its jid
|
||||
* @param jid
|
||||
* identified by its id.
|
||||
* @param {string} userId user id
|
||||
*/
|
||||
getAvatarUrl: function (jid) {
|
||||
getAvatarUrl: function (userId) {
|
||||
if (config.disableThirdPartyRequests) {
|
||||
return 'images/avatar2.png';
|
||||
} else {
|
||||
if (!jid) {
|
||||
console.error("Get avatar - jid is undefined");
|
||||
return null;
|
||||
}
|
||||
var id = users[jid];
|
||||
|
||||
// If the ID looks like an email, we'll use gravatar.
|
||||
// Otherwise, it's a random avatar, and we'll use the configured
|
||||
// URL.
|
||||
var random = !id || id.indexOf('@') < 0;
|
||||
|
||||
if (!id) {
|
||||
console.warn(
|
||||
"No avatar stored yet for " + jid + " - using JID as ID");
|
||||
id = jid;
|
||||
}
|
||||
id = MD5.hexdigest(id.trim().toLowerCase());
|
||||
|
||||
// Default to using gravatar.
|
||||
var urlPref = 'https://www.gravatar.com/avatar/';
|
||||
var urlSuf = "?d=wavatar&size=100";
|
||||
|
||||
if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
|
||||
urlPref = interfaceConfig.RANDOM_AVATAR_URL_PREFIX;
|
||||
urlSuf = interfaceConfig.RANDOM_AVATAR_URL_SUFFIX;
|
||||
}
|
||||
|
||||
return urlPref + id + urlSuf;
|
||||
}
|
||||
|
||||
if (!userId) {
|
||||
console.error("Get avatar - id is undefined");
|
||||
return null;
|
||||
}
|
||||
|
||||
let avatarId = users[userId];
|
||||
|
||||
// If the ID looks like an email, we'll use gravatar.
|
||||
// Otherwise, it's a random avatar, and we'll use the configured
|
||||
// URL.
|
||||
let random = !avatarId || avatarId.indexOf('@') < 0;
|
||||
|
||||
if (!avatarId) {
|
||||
console.warn(
|
||||
`No avatar stored yet for ${userId} - using ID as avatar ID`);
|
||||
avatarId = userId;
|
||||
}
|
||||
avatarId = MD5.hexdigest(avatarId.trim().toLowerCase());
|
||||
|
||||
// Default to using gravatar.
|
||||
let urlPref = 'https://www.gravatar.com/avatar/';
|
||||
let urlSuf = "?d=wavatar&size=100";
|
||||
|
||||
if (random && interfaceConfig.RANDOM_AVATAR_URL_PREFIX) {
|
||||
urlPref = interfaceConfig.RANDOM_AVATAR_URL_PREFIX;
|
||||
urlSuf = interfaceConfig.RANDOM_AVATAR_URL_SUFFIX;
|
||||
}
|
||||
|
||||
return urlPref + avatarId + urlSuf;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
module.exports = Avatar;
|
||||
|
|
|
|||
|
|
@ -6,19 +6,22 @@ import UIEvents from "../../../service/UI/UIEvents";
|
|||
import LargeContainer from './LargeContainer';
|
||||
import BottomToolbar from '../toolbars/BottomToolbar';
|
||||
import Avatar from "../avatar/Avatar";
|
||||
import {createDeferred} from '../../util/helpers';
|
||||
|
||||
const RTCBrowserType = require("../../RTC/RTCBrowserType");
|
||||
|
||||
const avatarSize = interfaceConfig.DOMINANT_SPEAKER_AVATAR_SIZE;
|
||||
const FADE_DURATION_MS = 300;
|
||||
|
||||
/**
|
||||
* Get stream id.
|
||||
* @param {JitsiTrack?} stream
|
||||
*/
|
||||
function getStreamId(stream) {
|
||||
if(!stream)
|
||||
function getStreamOwnerId(stream) {
|
||||
if (!stream) {
|
||||
return;
|
||||
if (stream.isLocal()) {
|
||||
}
|
||||
if (stream.isLocal()) { // local stream doesn't have method "getParticipantId"
|
||||
return APP.conference.localId;
|
||||
} else {
|
||||
return stream.getParticipantId();
|
||||
|
|
@ -161,9 +164,7 @@ class VideoContainer extends LargeContainer {
|
|||
}
|
||||
|
||||
get id () {
|
||||
if (this.stream) {
|
||||
return getStreamId(this.stream);
|
||||
}
|
||||
return getStreamOwnerId(this.stream);
|
||||
}
|
||||
|
||||
constructor (onPlay) {
|
||||
|
|
@ -306,20 +307,20 @@ class VideoContainer extends LargeContainer {
|
|||
show () {
|
||||
let $wrapper = this.$wrapper;
|
||||
return new Promise(function(resolve) {
|
||||
$wrapper.fadeIn(300, function () {
|
||||
$wrapper.css({visibility: 'visible'});
|
||||
$wrapper.css({visibility: 'visible'});
|
||||
$wrapper.fadeIn(FADE_DURATION_MS, function () {
|
||||
$('.watermark').css({visibility: 'visible'});
|
||||
resolve();
|
||||
});
|
||||
resolve();
|
||||
});
|
||||
}
|
||||
|
||||
hide () {
|
||||
|
||||
let $wrapper = this.$wrapper;
|
||||
|
||||
let id = this.id;
|
||||
return new Promise(function(resolve) {
|
||||
$wrapper.fadeOut(300, function () {
|
||||
$wrapper.fadeOut(id ? FADE_DURATION_MS : 1, function () {
|
||||
$wrapper.css({visibility: 'hidden'});
|
||||
$('.watermark').css({visibility: 'hidden'});
|
||||
resolve();
|
||||
|
|
@ -397,35 +398,67 @@ export default class LargeVideoManager {
|
|||
return this.videoContainer.id;
|
||||
}
|
||||
|
||||
/**
|
||||
scheduleLargeVideoUpdate () {
|
||||
if (this.updateInProcess || !this.newStreamData) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.updateInProcess = true;
|
||||
|
||||
let container = this.getContainer(this.state);
|
||||
|
||||
container.hide().then(() => {
|
||||
let {id, stream, videoType, resolve} = this.newStreamData;
|
||||
this.newStreamData = null;
|
||||
|
||||
console.info("hover in %s", id);
|
||||
this.state = VideoContainerType;
|
||||
this.videoContainer.setStream(stream, videoType);
|
||||
|
||||
// change the avatar url on large
|
||||
this.updateAvatar(Avatar.getAvatarUrl(id));
|
||||
|
||||
let isVideoMuted = stream.isMuted();
|
||||
|
||||
// show the avatar on large if needed
|
||||
this.videoContainer.showAvatar(isVideoMuted);
|
||||
|
||||
// do not show stream if video is muted
|
||||
let promise = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
|
||||
|
||||
// resolve updateLargeVideo promise after everything is done
|
||||
promise.then(resolve);
|
||||
|
||||
return promise;
|
||||
}).then(() => {
|
||||
// after everything is done check again if there are any pending new streams.
|
||||
this.updateInProcess = false;
|
||||
this.scheduleLargeVideoUpdate();
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Update large video.
|
||||
* Switches to large video even if previously other container was visible.
|
||||
* @param {JitsiTrack?} stream new stream
|
||||
* @param {string?} videoType new video type
|
||||
* @returns {Promise}
|
||||
*/
|
||||
updateLargeVideo (smallVideo, videoType, largeVideoUpdatedCallBack) {
|
||||
let id = getStreamId(smallVideo.stream);
|
||||
updateLargeVideo (stream, videoType) {
|
||||
let id = getStreamOwnerId(stream);
|
||||
|
||||
let container = this.getContainer(this.state);
|
||||
if (this.newStreamData) {
|
||||
this.newStreamData.reject();
|
||||
}
|
||||
|
||||
container.hide().then(() => {
|
||||
console.info("hover in %s", id);
|
||||
this.state = VideoContainerType;
|
||||
this.videoContainer.setStream(smallVideo.stream, videoType);
|
||||
this.newStreamData = createDeferred();
|
||||
this.newStreamData.id = id;
|
||||
this.newStreamData.stream = stream;
|
||||
this.newStreamData.videoType = videoType;
|
||||
|
||||
// change the avatar url on large
|
||||
this.updateAvatar(Avatar.getAvatarUrl(smallVideo.id));
|
||||
this.scheduleLargeVideoUpdate();
|
||||
|
||||
var isVideoMuted = smallVideo.stream.isMuted()
|
||||
// show the avatar on large if needed
|
||||
this.videoContainer.showAvatar(isVideoMuted);
|
||||
|
||||
if (!isVideoMuted)
|
||||
this.videoContainer.show();
|
||||
|
||||
largeVideoUpdatedCallBack();
|
||||
});
|
||||
return this.newStreamData.promise;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -486,7 +519,6 @@ export default class LargeVideoManager {
|
|||
* @param {boolean} show
|
||||
*/
|
||||
showAvatar (show) {
|
||||
show ? this.videoContainer.hide() : this.videoContainer.show();
|
||||
this.videoContainer.showAvatar(show);
|
||||
}
|
||||
|
||||
|
|
@ -542,16 +574,11 @@ export default class LargeVideoManager {
|
|||
return Promise.resolve();
|
||||
}
|
||||
|
||||
let container = this.getContainer(type);
|
||||
|
||||
if (this.state) {
|
||||
let oldContainer = this.containers[this.state];
|
||||
if (oldContainer) {
|
||||
oldContainer.hide();
|
||||
}
|
||||
}
|
||||
let oldContainer = this.containers[this.state];
|
||||
oldContainer.hide();
|
||||
|
||||
this.state = type;
|
||||
let container = this.getContainer(type);
|
||||
|
||||
return container.show();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -990,13 +990,14 @@ var VideoLayout = {
|
|||
|
||||
let videoType = this.getRemoteVideoType(id);
|
||||
largeVideo.updateLargeVideo(
|
||||
smallVideo,
|
||||
videoType,
|
||||
// LargeVideoUpdatedCallBack
|
||||
function() {
|
||||
// update current small video and the old one
|
||||
smallVideo.updateView();
|
||||
oldSmallVideo && oldSmallVideo.updateView();
|
||||
smallVideo.stream,
|
||||
videoType
|
||||
).then(function() {
|
||||
// update current small video and the old one
|
||||
smallVideo.updateView();
|
||||
oldSmallVideo && oldSmallVideo.updateView();
|
||||
}, function () {
|
||||
// use clicked other video during update, nothing to do.
|
||||
});
|
||||
|
||||
} else if (currentId) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
/**
|
||||
* Create deferred object.
|
||||
* @returns {{promise, resolve, reject}}
|
||||
*/
|
||||
export function createDeferred () {
|
||||
let deferred = {};
|
||||
|
||||
deferred.promise = new Promise(function (resolve, reject) {
|
||||
deferred.resolve = resolve;
|
||||
deferred.reject = reject;
|
||||
});
|
||||
|
||||
return deferred;
|
||||
}
|
||||
Loading…
Reference in New Issue