feat(large-video/web) Add screen share placeholder (#11971)

* feat(large-video/web) new ScreenSharePlaceholder component
This commit is contained in:
apetrus20
2022-08-05 12:11:09 +03:00
committed by GitHub
parent bdff92397b
commit 52ce9a86ed
8 changed files with 209 additions and 21 deletions

View File

@@ -480,7 +480,7 @@ export class VideoContainer extends LargeContainer {
*/
setStream(userID, stream, videoType) {
this.userId = userID;
if (this.stream === stream) {
if (this.stream === stream && !stream?.forceStreamToReattach) {
// Handles the use case for the remote participants when the
// videoType is received with delay after turning on/off the
// desktop sharing.
@@ -492,8 +492,12 @@ export class VideoContainer extends LargeContainer {
return;
}
if (stream?.forceStreamToReattach) {
delete stream.forceStreamToReattach;
}
// detach old stream
if (this.stream) {
if (this.stream && this.$video[0]) {
this.stream.detach(this.$video[0]);
}
@@ -504,19 +508,20 @@ export class VideoContainer extends LargeContainer {
return;
}
stream.attach(this.$video[0]);
if (this.$video[0]) {
stream.attach(this.$video[0]);
// Ensure large video gets play() called on it when a new stream is attached to it. This is necessary in the
// case of Safari as autoplay doesn't kick-in automatically on Safari 15 and newer versions.
browser.isWebKitBased() && this.$video[0].play();
// Ensure large video gets play() called on it when a new stream is attached to it. This is necessary in the
// case of Safari as autoplay doesn't kick-in automatically on Safari 15 and newer versions.
browser.isWebKitBased() && this.$video[0].play();
const flipX = stream.isLocal() && this.localFlipX && !this.isScreenSharing();
const flipX = stream.isLocal() && this.localFlipX && !this.isScreenSharing();
this.$video.css({
transform: flipX ? 'scaleX(-1)' : 'none'
});
this._updateBackground();
this.$video.css({
transform: flipX ? 'scaleX(-1)' : 'none'
});
this._updateBackground();
}
}
/**

View File

@@ -177,7 +177,7 @@ const VideoLayout = {
return largeVideo && largeVideo.id === id;
},
updateLargeVideo(id, forceUpdate) {
updateLargeVideo(id, forceUpdate, forceStreamToReattach = false) {
if (!largeVideo) {
return;
}
@@ -198,6 +198,10 @@ const VideoLayout = {
const videoStream = videoTrack?.jitsiTrack;
if (videoStream && forceStreamToReattach) {
videoStream.forceStreamToReattach = forceStreamToReattach;
}
if (isOnLarge && !forceUpdate
&& LargeVideoManager.isVideoContainer(currentContainerType)
&& videoStream) {
@@ -330,7 +334,7 @@ const VideoLayout = {
*/
_updateLargeVideoIfDisplayed(participantId, force = false) {
if (this.isCurrentlyOnLarge(participantId)) {
this.updateLargeVideo(participantId, force);
this.updateLargeVideo(participantId, force, false);
}
},