aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - add video Pin/Unpin

Browse Source
This commit is contained in:
Miroslav Pejic
2022-09-01 08:55:51 +02:00
parent 04d1c7e20c
commit 69b8e2def0
3 changed files with 109 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/videoGrid.css
+18 -4
View File
@@ -4,17 +4,31 @@
#videoMediaContainer {
z-index: 2;
position: absolute;
display: flex;
top: 0;
height: 100%;
width: 100%;
border-radius: 5px;
align-content: center;
flex-wrap: wrap;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
}
#videoPinMediaContainer {
z-index: 1;
position: absolute;
left: 0px;
bottom: 0px;
top: 0px;
right: 0px;
display: none;
top: 0;
left: 0;
height: 100%;
width: 75%;
border-radius: 5px;
overflow: hidden;
/* border: 3px solid lime; */
}
.Camera {
public/js/client.js
+90
View File
@@ -164,6 +164,8 @@ let isVideoOnFullScreen = false;
let isDocumentOnFullScreen = false;
let isWhiteboardFs = false;
let isVideoUrlPlayerOpen = false;
let isVideoPinned = false;
let pinnedVideoPlayerId = null;
let isRecScreenStream = false;
let isChatPasteTxt = false;
let needToCreateOffer = false; // after session description answer
@@ -1330,6 +1332,7 @@ function handleDisconnect(reason) {
for (let peer_id in peerConnections) {
peerConnections[peer_id].close();
msgerRemovePeer(peer_id);
removeVideoPinMediaContainer(peer_id);
}
chatDataChannels = {};
fileDataChannels = {};
@@ -1356,6 +1359,7 @@ function handleRemovePeer(config) {
if (peer_id in peerConnections) peerConnections[peer_id].close();
msgerRemovePeer(peer_id);
removeVideoPinMediaContainer(peer_id);
delete chatDataChannels[peer_id];
delete fileDataChannels[peer_id];
@@ -1659,6 +1663,7 @@ async function loadLocalMedia(stream) {
const myVideoStatusIcon = document.createElement('button');
const myAudioStatusIcon = document.createElement('button');
const myVideoFullScreenBtn = document.createElement('button');
const myVideoPinBtn = document.createElement('button');
const myVideoAvatarImage = document.createElement('img');
const myPitchMeter = document.createElement('div');
const myPitchBar = document.createElement('div');
@@ -1699,6 +1704,10 @@ async function loadLocalMedia(stream) {
myVideoFullScreenBtn.setAttribute('id', 'myVideoFullScreenBtn');
myVideoFullScreenBtn.className = 'fas fa-expand';
// my video pin/unpin button
myVideoPinBtn.setAttribute('id', 'myVideoPinBtn');
myVideoPinBtn.className = 'fas fa-map-pin';
// no mobile devices
if (!isMobileDevice) {
setTippy(myCountTime, 'Session Time', 'bottom');
@@ -1708,6 +1717,7 @@ async function loadLocalMedia(stream) {
setTippy(myAudioStatusIcon, 'My audio is on', 'bottom');
setTippy(myVideoToImgBtn, 'Take a snapshot', 'bottom');
setTippy(myVideoFullScreenBtn, 'Full screen mode', 'bottom');
setTippy(myVideoPinBtn, 'Toggle Pin video', 'bottom');
}
// my video avatar image
@@ -1731,6 +1741,7 @@ async function loadLocalMedia(stream) {
myStatusMenu.appendChild(myAudioStatusIcon);
myStatusMenu.appendChild(myVideoToImgBtn);
myStatusMenu.appendChild(myVideoFullScreenBtn);
if (!isMobileDevice) myStatusMenu.appendChild(myVideoPinBtn);
// add my pitchBar
myPitchMeter.appendChild(myPitchBar);
@@ -1773,6 +1784,7 @@ async function loadLocalMedia(stream) {
handleVideoPlayerFs('myVideo', 'myVideoFullScreenBtn');
handleFileDragAndDrop('myVideo', myPeerId, true);
handleVideoToImg('myVideo', 'myVideoToImgBtn');
handleVideoPinUnpin('myVideo', 'myVideoPinBtn', 'myVideoWrap');
refreshMyVideoAudioStatus(localMediaStream);
if (!useVideo) {
@@ -1848,6 +1860,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
const remotePeerKickOut = document.createElement('button');
const remoteVideoToImgBtn = document.createElement('button');
const remoteVideoFullScreenBtn = document.createElement('button');
const remoteVideoPinBtn = document.createElement('button');
const remoteVideoAvatarImage = document.createElement('img');
const remotePitchMeter = document.createElement('div');
const remotePitchBar = document.createElement('div');
@@ -1901,6 +1914,10 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
remoteVideoFullScreenBtn.setAttribute('id', peer_id + '_fullScreen');
remoteVideoFullScreenBtn.className = 'fas fa-expand';
// remote video pin/unpin button
remoteVideoPinBtn.setAttribute('id', peer_id + '_pinUnpin');
remoteVideoPinBtn.className = 'fas fa-map-pin';
// no mobile devices
if (!isMobileDevice) {
setTippy(remoteVideoParagraph, 'Participant name', 'bottom');
@@ -1913,6 +1930,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
setTippy(remoteVideoToImgBtn, 'Take a snapshot', 'bottom');
setTippy(remotePeerKickOut, 'Kick out', 'bottom');
setTippy(remoteVideoFullScreenBtn, 'Full screen mode', 'bottom');
setTippy(remoteVideoPinBtn, 'Toggle Pin video', 'bottom');
}
// my video avatar image
@@ -1940,6 +1958,7 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
remoteStatusMenu.appendChild(remoteVideoToImgBtn);
if (buttons.remote.showKickOutBtn) remoteStatusMenu.appendChild(remotePeerKickOut);
remoteStatusMenu.appendChild(remoteVideoFullScreenBtn);
if (!isMobileDevice) remoteStatusMenu.appendChild(remoteVideoPinBtn);
remoteMedia.setAttribute('id', peer_id + '_video');
remoteMedia.setAttribute('playsinline', true);
@@ -1967,6 +1986,8 @@ async function loadRemoteMediaStream(stream, peers, peer_id) {
adaptAspectRatio();
// handle video to image
handleVideoToImg(peer_id + '_video', peer_id + '_snapshot', peer_id);
// handle video pin/unpin
handleVideoPinUnpin(peer_id + '_video', peer_id + '_pinUnpin', peer_id + '_videoWrap');
// handle video full screen mode
handleVideoPlayerFs(peer_id + '_video', peer_id + '_fullScreen', peer_id);
// handle file share drag and drop
@@ -2281,6 +2302,75 @@ function handleFileDragAndDrop(elemId, peer_id, itsMe = false) {
});
}
/**
* Handle video pin/unpin
* @param {string} elemId video id
* @param {string} pnId button pin id
* @param {string} camId video wrap id
*/
function handleVideoPinUnpin(elemId, pnId, camId) {
let videoPlayer = getId(elemId);
let btnPn = getId(pnId);
let cam = getId(camId);
let videoMediaContainer = getId('videoMediaContainer');
let videoPinMediaContainer = getId('videoPinMediaContainer');
if (btnPn && videoPlayer && cam) {
btnPn.addEventListener('click', () => {
isVideoPinned = !isVideoPinned;
if (isVideoPinned) {
cam.className = '';
cam.style.width = '100%';
cam.style.height = '100%';
videoMediaContainer.style.width = '25%';
videoMediaContainer.style.left = null;
videoMediaContainer.style.right = 0;
videoPinMediaContainer.appendChild(cam);
videoPinMediaContainer.style.display = 'block';
pinnedVideoPlayerId = elemId;
setColor(btnPn, 'lime');
} else {
if (pinnedVideoPlayerId != videoPlayer.id) {
isVideoPinned = true;
return msgPopup(
'info',
'Another video seems pinned, unpin it before to pin this one',
'top-end',
3000,
);
}
videoPinMediaContainer.removeChild(cam);
cam.className = 'Camera';
videoMediaContainer.style.width = '100%';
videoMediaContainer.style.right = null;
videoMediaContainer.style.left = 0;
videoMediaContainer.appendChild(cam);
videoPinMediaContainer.style.display = 'none';
pinnedVideoPlayerId = null;
setColor(btnPn, 'white');
}
adaptAspectRatio();
});
}
}
/**
* Remove video pin media container
* @param {string} peer_id aka socket.id
*/
function removeVideoPinMediaContainer(peer_id) {
//alert(pinnedVideoPlayerId + '==' + peer_id);
if (isVideoPinned && (pinnedVideoPlayerId == peer_id + '_video' || pinnedVideoPlayerId == peer_id)) {
let videoPinMediaContainer = getId('videoPinMediaContainer');
let videoMediaContainer = getId('videoMediaContainer');
videoPinMediaContainer.style.display = 'none';
videoMediaContainer.style.width = '100%';
videoMediaContainer.style.right = null;
videoMediaContainer.style.left = 0;
pinnedVideoPlayerId = null;
isVideoPinned = false;
}
}
/**
* Handle Video to Img click event
* @param {string} videoStream uuid video element
public/views/client.html
+1
View File
@@ -423,6 +423,7 @@ access to use this app.
<!-- Start Video container -->
<div id="videoPinMediaContainer"></div>
<div id="videoMediaContainer">
<!-- <div class="Camera"></div> -->
</div>