[mirotalk] - add about button

www/client.js

@@ -406,6 +406,7 @@ function manageButtons() {
   swapCameraBtn();
   screenShareBtn();
   sendMsgBtn();
+  aboutBtn();
   leaveRoomBtn();
   buttonsOpacity();
 }
@@ -488,6 +489,15 @@ function sendMsgBtn() {
   });
 }
 
+// =====================================================
+// about button click event
+// =====================================================
+function aboutBtn() {
+  document.getElementById("aboutBtn").addEventListener("click", (e) => {
+    about();
+  });
+}
+
 // =====================================================
 // end call button click event
 // =====================================================
@@ -712,6 +722,28 @@ function copyRoomURL() {
   document.body.removeChild(tmpInput);
 }
 
+// =====================================================
+// about info
+// =====================================================
+function about() {
+  Swal.fire({
+    background: "black",
+    position: "center",
+    title: 'Made with ❤️',
+    text: 'https://github.com/miroslavpejic85/mirotalk',
+    imageUrl: loaderGif,
+    imageWidth: 320,
+    imageHeight: 240,
+    imageAlt: 'Custom image',
+    showClass: {
+      popup: 'animate__animated animate__fadeInDown'
+    },
+    hideClass: {
+      popup: 'animate__animated animate__fadeOutUp'
+    }
+  })
+}
+
 // =====================================================
 // Leave the Room and create a new one
 // =====================================================

www/index.html

@@ -76,6 +76,7 @@
         class="fas fa-desktop"
       ></button>
       <button title="send msg" id="sendMsgBtn" class="fas fa-comment"></button>
+      <button title="about" id="aboutBtn" class="fas fa-question"></button>
       <button
         title="leave room"
         id="leaveRoomBtn"

www/style.css

@@ -148,6 +148,7 @@ button:hover {
 #swapCameraBtn,
 #screenShareBtn,
 #sendMsgBtn,
+#aboutBtn,
 #leaveRoomBtn {
   font-size: 2rem;
   cursor: pointer;