[mirotalksfu] - improve send email invitation

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
 --------------------------------------------------------------*/

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: {
+        showClass: { popup: 'animate__animated animate__fadeInDown' },
-            popup: 'animate__animated animate__fadeInDown',
+        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
-        },
-        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: {
+            showClass: { popup: 'animate__animated animate__fadeInDown' },
-                popup: 'animate__animated animate__fadeInDown',
+            hideClass: { popup: 'animate__animated animate__fadeOutUp' },
-            },
-            hideClass: {
-                popup: 'animate__animated animate__fadeOutUp',
-            },
         }).then((result) => {
             if (result.isConfirmed) {
                 copyRoomURL();
             } else if (result.isDenied) {
-                let message = {
+                shareRoomByEmail();
-                    email: '',
-                    subject: 'Please join our MiroTalkSfu Video Chat Meeting',
-                    body: 'Click to join: ' + RoomURL,
-                };
-                shareRoomByEmail(message);
             }
             // share screen on join
             if (isScreenAllowed) {
@@ -824,11 +810,35 @@ function copyRoomURL() {
     userLog('info', 'Meeting URL copied to clipboard 👍', 'top-end');
 }
 
-function shareRoomByEmail(message) {
+function shareRoomByEmail() {
-    let email = message.email;
+    Swal.fire({
-    let subject = message.subject;
+        allowOutsideClick: false,
-    let emailBody = message.body;
+        allowEscapeKey: false,
-    document.location = 'mailto:' + email + '?subject=' + subject + '&body=' + emailBody;
+        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();
     };

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>