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

[mirotalksfu] - improve send email invitation

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2023-09-09 12:32:32 +02:00
الأصل 0c5d45efbe
التزام 4f7592b65f
3 ملفات معدلة مع 74 إضافات و27 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

17
public/css/Room.css
عرض الملف

@@ -330,7 +330,8 @@ body {
.title {
display: inline-flex;
align-items: center;
justify-content: center; /* Vertical centering */
align-items: center; /* Horizontal centering */
text-align: left;
color: white;
}
@@ -350,6 +351,7 @@ body {
th {
text-align: left;
padding: 5px;
/* border: 1px solid grey; */
}
.settingsTable tr:nth-child(even) {
/* background-color: #121212; */
@@ -465,6 +467,19 @@ th {
display: block;
}
/*--------------------------------------------------------------
# Settings - data time picker
--------------------------------------------------------------*/
#datetimePicker {
padding: 10px;
text-align: center;
color: white;
background: black;
border: none;
border-radius: 5px;
}
/*--------------------------------------------------------------
# Settings - microphone volume indicator
--------------------------------------------------------------*/

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

@@ -180,7 +180,7 @@ function initClient() {
setTippy('switchPitchBar', 'Toggle audio pitch bar', 'right');
setTippy('switchSounds', 'Toggle the sounds notifications', 'right');
setTippy('switchShare', "Show 'Share Room' popup on join", 'right');
setTippy('roomId', 'Room name', 'right');
setTippy('roomId', 'Room name (click to copy)', 'right');
setTippy('sessionTime', 'Session time', 'right');
setTippy('roomRecording', 'Only the host (presenter) has the capability to record the meeting', 'bottom');
setTippy('whiteboardGhostButton', 'Toggle transparent background', 'bottom');
@@ -589,7 +589,6 @@ function getPeerInfo() {
function whoAreYou() {
console.log('04 ----> Who are you');
sound('open');
hide(loadingDiv);
document.body.style.background = 'var(--body-bg)';
@@ -620,12 +619,8 @@ function whoAreYou() {
inputValue: default_name,
html: initUser, // Inject HTML
confirmButtonText: `Join meeting`,
showClass: {
popup: 'animate__animated animate__fadeInDown',
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp',
},
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
inputValidator: (name) => {
if (!name) return 'Please enter your name';
name = filterXSS(name);
@@ -773,22 +768,13 @@ async function shareRoom(useNavigator = false) {
confirmButtonText: `Copy URL`,
denyButtonText: `Email invite`,
cancelButtonText: `Close`,
showClass: {
popup: 'animate__animated animate__fadeInDown',
},
hideClass: {
popup: 'animate__animated animate__fadeOutUp',
},
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
}).then((result) => {
if (result.isConfirmed) {
copyRoomURL();
} else if (result.isDenied) {
let message = {
email: '',
subject: 'Please join our MiroTalkSfu Video Chat Meeting',
body: 'Click to join: ' + RoomURL,
};
shareRoomByEmail(message);
shareRoomByEmail();
}
// share screen on join
if (isScreenAllowed) {
@@ -824,11 +810,35 @@ function copyRoomURL() {
userLog('info', 'Meeting URL copied to clipboard 👍', 'top-end');
}
function shareRoomByEmail(message) {
let email = message.email;
let subject = message.subject;
let emailBody = message.body;
document.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
function shareRoomByEmail() {
Swal.fire({
allowOutsideClick: false,
allowEscapeKey: false,
background: swalBackground,
imageUrl: image.message,
position: 'center',
title: 'Select a Date and Time',
html: '<input type="text" id="datetimePicker" class="flatpickr" />',
showCancelButton: true,
confirmButtonText: 'OK',
cancelButtonColor: 'red',
showClass: { popup: 'animate__animated animate__fadeInDown' },
hideClass: { popup: 'animate__animated animate__fadeOutUp' },
preConfirm: () => {
const selectedDateTime = document.getElementById('datetimePicker').value;
const newLine = '%0D%0A%0D%0A';
const email = '';
const emailSubject = `Please join our MiroTalk SFU Video Chat Meeting`;
const emailBody = `The meeting is scheduled at: ${newLine} DateTime: ${selectedDateTime} ${newLine} Click to join: ${RoomURL} ${newLine}`;
document.location = 'mailto:' + email + '?subject=' + emailSubject + '&body=' + emailBody;
},
});
flatpickr('#datetimePicker', {
enableTime: true,
dateFormat: 'Y-m-d H:i',
time_24hr: true,
theme: 'material_blue',
});
}
// ####################################################
@@ -1073,6 +1083,12 @@ function handleButtons() {
speakerTestBtn.onclick = () => {
sound('ring', true);
};
roomId.onclick = () => {
copyRoomURL();
};
roomSendEmail.onclick = () => {
shareRoomByEmail();
};
chatButton.onclick = () => {
rc.toggleChat();
};

18
public/views/Room.html
عرض الملف

@@ -48,6 +48,13 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- flatpickr https://flatpickr.js.org/themes/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
<link rel="stylesheet" href="https://npmcdn.com/flatpickr/dist/themes/airbnb.css" />
<!-- Bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
@@ -81,6 +88,7 @@
<script defer src="https://cdn.jsdelivr.net/npm/emoji-mart@latest/dist/browser.js"></script>
<script defer src="https://unpkg.com/@popperjs/core@2"></script>
<script defer src="https://unpkg.com/tippy.js@6"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
</head>
<body onload="initClient()">
<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -265,7 +273,15 @@ access to use this app.
<td>
<div class="title">
<i class="fa-solid fa-person-shelter"></i>
<p id="roomId">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
<p id="roomId" style="cursor: pointer">xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="title">
<i class="fas fa-envelope-circle-check"></i>
<button id="roomSendEmail">Send email invitation</button>
</div>
</td>
</tr>