ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - add buttons setting

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2022-08-07 13:35:05 +02:00
الأصل 8dfc74e61d
التزام c096cf4122
2 ملفات معدلة مع 170 إضافات و114 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

63
public/js/Room.js
عرض الملف

@@ -1,5 +1,17 @@
'use strict'; 'use strict';
/**
* MiroTalk SFU - Room component
*
* @link GitHub: https://github.com/miroslavpejic85/mirotalksfu
* @link Live demo: https://sfu.mirotalk.com
* @license For open source use: AGPLv3
* @license For commercial or closed source, contact us at info.mirotalk@gmail.com
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.0.0
*
*/
if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.href.substr(4, location.href.length - 4); if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.href.substr(4, location.href.length - 4);
const RoomURL = window.location.href; const RoomURL = window.location.href;
@@ -25,6 +37,32 @@ const _PEER = {
sendVideo: '<i class="fab fa-youtube"></i>', sendVideo: '<i class="fab fa-youtube"></i>',
}; };
const BUTTONS = {
main: {
shareButton: true,
startAudioButton: true,
startVideoButton: true,
startScreenButton: true,
swapCameraButton: true,
chatButton: true,
whiteboardButton: true,
settingsButton: true,
aboutButton: true,
exitButton: true,
},
consumerVideo: {
fullScreenButton: true,
snapShotButton: true,
sendMessageButton: true,
sendFileButton: true,
sendVideoButton: true,
muteVideoButton: true,
muteAudioButton: true,
ejectButton: true,
},
//...
};
const surveyActive = true; const surveyActive = true;
const userAgent = navigator.userAgent.toLowerCase(); const userAgent = navigator.userAgent.toLowerCase();
@@ -574,17 +612,17 @@ function joinRoom(peer_name, room_id) {
function roomIsReady() { function roomIsReady() {
setTheme('dark'); setTheme('dark');
show(exitButton); BUTTONS.main.exitButton && show(exitButton);
show(shareButton); BUTTONS.main.shareButton && show(shareButton);
show(startRecButton); show(startRecButton);
show(chatButton); BUTTONS.main.chatButton && show(chatButton);
show(chatSendButton); show(chatSendButton);
show(chatEmojiButton); show(chatEmojiButton);
show(chatShareFileButton); show(chatShareFileButton);
if (isWebkitSpeechRecognitionSupported) { if (isWebkitSpeechRecognitionSupported) {
show(chatSpeechStartButton); show(chatSpeechStartButton);
} }
if (DetectRTC.isMobileDevice) { if (DetectRTC.isMobileDevice && BUTTONS.main.swapCameraButton) {
show(swapCameraButton); show(swapCameraButton);
setChatSize(); setChatSize();
} else { } else {
@@ -604,15 +642,15 @@ function roomIsReady() {
}; };
show(fullScreenButton); show(fullScreenButton);
} }
show(whiteboardButton); BUTTONS.main.whiteboardButton && show(whiteboardButton);
show(settingsButton); BUTTONS.main.settingsButton && show(settingsButton);
show(raiseHandButton); show(raiseHandButton);
isAudioAllowed ? show(stopAudioButton) : show(startAudioButton); isAudioAllowed ? show(stopAudioButton) : BUTTONS.main.startAudioButton && show(startAudioButton);
isVideoAllowed ? show(stopVideoButton) : show(startVideoButton); isVideoAllowed ? show(stopVideoButton) : BUTTONS.main.startVideoButton && show(startVideoButton);
show(fileShareButton); show(fileShareButton);
show(participantsButton); show(participantsButton);
show(lockRoomButton); show(lockRoomButton);
show(aboutButton); BUTTONS.main.aboutButton && show(aboutButton);
handleButtons(); handleButtons();
handleSelects(); handleSelects();
handleInputs(); handleInputs();
@@ -626,11 +664,11 @@ function roomIsReady() {
} }
function hide(elem) { function hide(elem) {
elem.classList.add('hidden'); elem.className = 'hidden';
} }
function show(elem) { function show(elem) {
elem.classList.remove('hidden'); elem.className = '';
} }
function setColor(elem, color) { function setColor(elem, color) {
@@ -961,7 +999,7 @@ function handleInputs() {
} }
}; };
chatMessage.oninput = function () { chatMessage.oninput = function () {
let chatInputEmoji = { const chatInputEmoji = {
'<3': '\u2764\uFE0F', '<3': '\u2764\uFE0F',
'</3': '\uD83D\uDC94', '</3': '\uD83D\uDC94',
':D': '\uD83D\uDE00', ':D': '\uD83D\uDE00',
@@ -973,7 +1011,6 @@ function handleInputs() {
":'(": '\uD83D\uDE22', ":'(": '\uD83D\uDE22',
':+1:': '\uD83D\uDC4D', ':+1:': '\uD83D\uDC4D',
}; };
for (let i in chatInputEmoji) { for (let i in chatInputEmoji) {
let regex = new RegExp(i.replace(/([()[{*+.$^\\|?])/g, '\\$1'), 'gim'); let regex = new RegExp(i.replace(/([()[{*+.$^\\|?])/g, '\\$1'), 'gim');
this.value = this.value.replace(regex, chatInputEmoji[i]); this.value = this.value.replace(regex, chatInputEmoji[i]);

221
public/js/RoomClient.js
عرض الملف

@@ -1196,14 +1196,14 @@ class RoomClient {
pb.className = 'bar'; pb.className = 'bar';
pb.style.height = '1%'; pb.style.height = '1%';
pm.appendChild(pb); pm.appendChild(pb);
vb.appendChild(ko); BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko);
vb.appendChild(au); BUTTONS.consumerVideo.muteAudioButton && vb.appendChild(au);
vb.appendChild(cm); BUTTONS.consumerVideo.muteVideoButton && vb.appendChild(cm);
vb.appendChild(sv); BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv);
vb.appendChild(sf); BUTTONS.consumerVideo.sendFileButton && vb.appendChild(sf);
vb.appendChild(sm); BUTTONS.consumerVideo.sendMessageButton && vb.appendChild(sm);
vb.appendChild(ts); BUTTONS.consumerVideo.snapShotButton && vb.appendChild(ts);
vb.appendChild(fs); BUTTONS.consumerVideo.fullScreenButton && vb.appendChild(fs);
d.appendChild(elem); d.appendChild(elem);
d.appendChild(i); d.appendChild(i);
d.appendChild(p); d.appendChild(p);
@@ -1324,10 +1324,10 @@ class RoomClient {
pb.style.height = '1%'; pb.style.height = '1%';
pm.appendChild(pb); pm.appendChild(pb);
if (remotePeer) { if (remotePeer) {
vb.appendChild(ko); BUTTONS.consumerVideo.ejectButton && vb.appendChild(ko);
vb.appendChild(sv); BUTTONS.consumerVideo.sendVideoButton && vb.appendChild(sv);
vb.appendChild(sf); BUTTONS.consumerVideo.sendFileButton && vb.appendChild(sf);
vb.appendChild(sm); BUTTONS.consumerVideo.sendMessageButton && vb.appendChild(sm);
} }
vb.appendChild(au); vb.appendChild(au);
d.appendChild(i); d.appendChild(i);
@@ -1712,34 +1712,37 @@ class RoomClient {
handleFS(elemId, fsId) { handleFS(elemId, fsId) {
let videoPlayer = this.getId(elemId); let videoPlayer = this.getId(elemId);
let btnFs = this.getId(fsId); let btnFs = this.getId(fsId);
this.setTippy(fsId, 'Full screen', 'top'); if (btnFs) {
this.setTippy(fsId, 'Full screen', 'top');
btnFs.addEventListener('click', () => { btnFs.addEventListener('click', () => {
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
this.toggleFullScreen(videoPlayer); this.toggleFullScreen(videoPlayer);
this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
}); });
videoPlayer.addEventListener('click', () => { }
if (!videoPlayer.hasAttribute('controls')) { if (videoPlayer) {
if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) { videoPlayer.addEventListener('click', () => {
videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none'; if (!videoPlayer.hasAttribute('controls')) {
this.toggleFullScreen(videoPlayer); if ((this.isMobileDevice && this.isVideoOnFullScreen) || !this.isMobileDevice) {
this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true; videoPlayer.style.pointerEvents = this.isVideoOnFullScreen ? 'auto' : 'none';
this.toggleFullScreen(videoPlayer);
this.isVideoOnFullScreen = this.isVideoOnFullScreen ? false : true;
}
} }
} });
}); videoPlayer.addEventListener('fullscreenchange', (e) => {
videoPlayer.addEventListener('fullscreenchange', (e) => { if (!document.fullscreenElement) {
if (!document.fullscreenElement) { videoPlayer.style.pointerEvents = 'auto';
videoPlayer.style.pointerEvents = 'auto'; this.isVideoOnFullScreen = false;
this.isVideoOnFullScreen = false; }
} });
}); videoPlayer.addEventListener('webkitfullscreenchange', (e) => {
videoPlayer.addEventListener('webkitfullscreenchange', (e) => { if (!document.webkitIsFullScreen) {
if (!document.webkitIsFullScreen) { videoPlayer.style.pointerEvents = 'auto';
videoPlayer.style.pointerEvents = 'auto'; this.isVideoOnFullScreen = false;
this.isVideoOnFullScreen = false; }
} });
}); }
} }
// #################################################### // ####################################################
@@ -1769,20 +1772,22 @@ class RoomClient {
handleTS(elemId, tsId) { handleTS(elemId, tsId) {
let videoPlayer = this.getId(elemId); let videoPlayer = this.getId(elemId);
let btnTs = this.getId(tsId); let btnTs = this.getId(tsId);
btnTs.addEventListener('click', () => { if (btnTs && videoPlayer) {
this.sound('snapshot'); btnTs.addEventListener('click', () => {
let context, canvas, width, height, dataURL; this.sound('snapshot');
width = videoPlayer.videoWidth; let context, canvas, width, height, dataURL;
height = videoPlayer.videoHeight; width = videoPlayer.videoWidth;
canvas = canvas || document.createElement('canvas'); height = videoPlayer.videoHeight;
canvas.width = width; canvas = canvas || document.createElement('canvas');
canvas.height = height; canvas.width = width;
context = canvas.getContext('2d'); canvas.height = height;
context.drawImage(videoPlayer, 0, 0, width, height); context = canvas.getContext('2d');
dataURL = canvas.toDataURL('image/png'); context.drawImage(videoPlayer, 0, 0, width, height);
console.log(dataURL); dataURL = canvas.toDataURL('image/png');
saveDataToFile(dataURL, getDataTimeString() + '-SNAPSHOT.png'); // console.log(dataURL);
}); saveDataToFile(dataURL, getDataTimeString() + '-SNAPSHOT.png');
});
}
} }
// #################################################### // ####################################################
@@ -1831,9 +1836,11 @@ class RoomClient {
const words = uid.split('___'); const words = uid.split('___');
let peer_id = words[1]; let peer_id = words[1];
let btnSm = this.getId(uid); let btnSm = this.getId(uid);
btnSm.addEventListener('click', () => { if (btnSm) {
this.sendMessageTo(peer_id); btnSm.addEventListener('click', () => {
}); this.sendMessageTo(peer_id);
});
}
} }
toggleChat() { toggleChat() {
@@ -2188,43 +2195,47 @@ class RoomClient {
const words = uid.split('___'); const words = uid.split('___');
let peer_id = words[1]; let peer_id = words[1];
let btnSf = this.getId(uid); let btnSf = this.getId(uid);
btnSf.addEventListener('click', () => { if (btnSf) {
this.selectFileToShare(peer_id); btnSf.addEventListener('click', () => {
}); this.selectFileToShare(peer_id);
});
}
} }
handleDD(uid, peer_id, itsMe = false) { handleDD(uid, peer_id, itsMe = false) {
let videoPlayer = this.getId(uid); let videoPlayer = this.getId(uid);
videoPlayer.addEventListener('dragover', function (e) { if (videoPlayer) {
e.preventDefault(); videoPlayer.addEventListener('dragover', function (e) {
}); e.preventDefault();
videoPlayer.addEventListener('drop', function (e) { });
e.preventDefault(); videoPlayer.addEventListener('drop', function (e) {
if (itsMe) { e.preventDefault();
userLog('warning', 'You cannot send files to yourself.', 'top-end'); if (itsMe) {
return; userLog('warning', 'You cannot send files to yourself.', 'top-end');
}
if (this.sendInProgress) {
userLog('warning', 'Please wait for the previous file to be sent.', 'top-end');
return;
}
if (e.dataTransfer.items && e.dataTransfer.items.length > 1) {
userLog('warning', 'Please drag and drop a single file.', 'top-end');
return;
}
if (e.dataTransfer.items) {
let item = e.dataTransfer.items[0].webkitGetAsEntry();
console.log('Drag and drop', item);
if (item.isDirectory) {
userLog('warning', 'Please drag and drop a single file not a folder.', 'top-end');
return; return;
} }
var file = e.dataTransfer.items[0].getAsFile(); if (this.sendInProgress) {
rc.sendFileInformations(file, peer_id); userLog('warning', 'Please wait for the previous file to be sent.', 'top-end');
} else { return;
rc.sendFileInformations(e.dataTransfer.files[0], peer_id); }
} if (e.dataTransfer.items && e.dataTransfer.items.length > 1) {
}); userLog('warning', 'Please drag and drop a single file.', 'top-end');
return;
}
if (e.dataTransfer.items) {
let item = e.dataTransfer.items[0].webkitGetAsEntry();
console.log('Drag and drop', item);
if (item.isDirectory) {
userLog('warning', 'Please drag and drop a single file not a folder.', 'top-end');
return;
}
var file = e.dataTransfer.items[0].getAsFile();
rc.sendFileInformations(file, peer_id);
} else {
rc.sendFileInformations(e.dataTransfer.files[0], peer_id);
}
});
}
} }
selectFileToShare(peer_id, broadcast = false) { selectFileToShare(peer_id, broadcast = false) {
@@ -2497,9 +2508,11 @@ class RoomClient {
const words = uid.split('___'); const words = uid.split('___');
let peer_id = words[1]; let peer_id = words[1];
let btnSv = this.getId(uid); let btnSv = this.getId(uid);
btnSv.addEventListener('click', () => { if (btnSv) {
this.shareVideo(peer_id); btnSv.addEventListener('click', () => {
}); this.shareVideo(peer_id);
});
}
} }
shareVideo(peer_id = 'all') { shareVideo(peer_id = 'all') {
@@ -2847,9 +2860,11 @@ class RoomClient {
const words = uid.split('___'); const words = uid.split('___');
let peer_id = words[1] + '___pEject'; let peer_id = words[1] + '___pEject';
let btnKo = this.getId(uid); let btnKo = this.getId(uid);
btnKo.addEventListener('click', () => { if (btnKo) {
this.peerAction('me', peer_id, 'eject'); btnKo.addEventListener('click', () => {
}); this.peerAction('me', peer_id, 'eject');
});
}
} }
// #################################################### // ####################################################
@@ -2860,9 +2875,11 @@ class RoomClient {
const words = uid.split('___'); const words = uid.split('___');
let peer_id = words[1] + '___pVideo'; let peer_id = words[1] + '___pVideo';
let btnCm = this.getId(uid); let btnCm = this.getId(uid);
btnCm.addEventListener('click', () => { if (btnCm) {
this.peerAction('me', peer_id, 'hide'); btnCm.addEventListener('click', () => {
}); this.peerAction('me', peer_id, 'hide');
});
}
} }
// #################################################### // ####################################################
@@ -2873,11 +2890,13 @@ class RoomClient {
const words = uid.split('__'); const words = uid.split('__');
let peer_id = words[0] + '___pAudio'; let peer_id = words[0] + '___pAudio';
let btnAU = this.getId(uid); let btnAU = this.getId(uid);
btnAU.addEventListener('click', (e) => { if (btnAU) {
if (e.target.className === html.audioOn) { btnAU.addEventListener('click', (e) => {
this.peerAction('me', peer_id, 'mute'); if (e.target.className === html.audioOn) {
} this.peerAction('me', peer_id, 'mute');
}); }
});
}
} }
// #################################################### // ####################################################