haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(thumbnail): videos on safari.

This commit is contained in:
Hristo Terezov 2020-04-16 20:15:07 -05:00
parent 3dfcc8d80e
commit f972ebfe9e
3 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
modules/UI/util/UIUtil.js
View File

@ -27,12 +27,15 @@ const UIUtil = {
*/
prependChild(container, newChild) {
const firstChild = container.childNodes[0];
let result;
if (firstChild) {
container.insertBefore(newChild, firstChild);
result = container.insertBefore(newChild, firstChild);
} else {
container.appendChild(newChild);
result = container.appendChild(newChild);
}
return result;
},
/**

39
modules/UI/videolayout/RemoteVideo.js
View File

@ -90,13 +90,13 @@ export default class RemoteVideo extends SmallVideo {
this._isRemoteControlSessionActive = false;
/**
* The flag is set to <tt>true</tt> after the 'onplay' event has been
* The flag is set to <tt>true</tt> after the 'canplay' event has been
* triggered on the current video element. It goes back to <tt>false</tt>
* when the stream is removed. It is used to determine whether the video
* playback has ever started.
* @type {boolean}
*/
this.wasVideoPlayed = false;
this._canPlayEventReceived = false;
/**
* The flag is set to <tt>true</tt> if remote participant's video gets muted
@ -366,7 +366,7 @@ export default class RemoteVideo extends SmallVideo {
select.remove();
if (isVideo) {
this.wasVideoPlayed = false;
this._canPlayEventReceived = false;
}
logger.info(`${isVideo ? 'Video' : 'Audio'} removed ${this.id}`, select);
@ -390,13 +390,10 @@ export default class RemoteVideo extends SmallVideo {
}
/**
* The remote video is considered "playable" once the stream has started
* according to the {@link #hasVideoStarted} result.
* It will be allowed to display video also in
* {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video was ever
* played and was not muted while not in ACTIVE state. This basically means
* that there is stalled video image cached that could be displayed. It's used
* to show "grey video image" in user's thumbnail when there are connectivity
* The remote video is considered "playable" once the can play event has been received. It will be allowed to
* display video also in {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video has received the canplay
* event and was not muted while not in ACTIVE state. This basically means that there is stalled video image cached
* that could be displayed. It's used to show "grey video image" in user's thumbnail when there are connectivity
* issues.
*
* @inheritdoc
@ -406,7 +403,7 @@ export default class RemoteVideo extends SmallVideo {
const connectionState = APP.conference.getParticipantConnectionStatus(this.id);
return super.isVideoPlayable()
&& this.hasVideoStarted()
&& this._canPlayEventReceived
&& (connectionState === JitsiParticipantConnectionStatus.ACTIVE
|| (connectionState === JitsiParticipantConnectionStatus.INTERRUPTED && !this.mutedWhileDisconnected));
}
@ -459,26 +456,16 @@ export default class RemoteVideo extends SmallVideo {
return;
}
streamElement.onplaying = () => {
this.wasVideoPlayed = true;
streamElement.oncanplay = () => {
this._canPlayEventReceived = true;
this.VideoLayout.remoteVideoActive(streamElement, this.id);
streamElement.onplaying = null;
streamElement.oncanplay = undefined;
// Refresh to show the video
this.updateView();
};
}
/**
* Checks whether the video stream has started for this RemoteVideo instance.
*
* @returns {boolean} true if this RemoteVideo has a video stream for which
* the playback has been started.
*/
hasVideoStarted() {
return this.wasVideoPlayed;
}
/**
*
* @param {*} stream
@ -504,10 +491,10 @@ export default class RemoteVideo extends SmallVideo {
return;
}
const streamElement = SmallVideo.createStreamElement(stream);
let streamElement = SmallVideo.createStreamElement(stream);
// Put new stream element always in front
UIUtils.prependChild(this.container, streamElement);
streamElement = UIUtils.prependChild(this.container, streamElement);
$(streamElement).hide();

2
modules/UI/videolayout/SmallVideo.js
View File

@ -500,7 +500,7 @@ export default class SmallVideo {
hasVideo: Boolean(this.selectVideoElement().length),
connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
mutedWhileDisconnected: this.mutedWhileDisconnected,
wasVideoPlayed: this.wasVideoPlayed,
canPlayEventReceived: this._canPlayEventReceived,
videoStream: Boolean(this.videoStream),
isVideoMuted: this.isVideoMuted,
videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'