From 3d9d41ebe94902e88d90d4eee8c914434f78e8b2 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic@cloud.timenet.it>
Date: Wed, 19 Jan 2022 16:42:21 +0100
Subject: [PATCH] [mirotalk] - css refactoring

---
 public/css/client.css   | 134 +++++-----------------------------------
 public/js/client.js     |  33 +++++-----
 public/view/client.html |  12 ++--
 3 files changed, 39 insertions(+), 140 deletions(-)

diff --git a/public/css/client.css b/public/css/client.css
index 26f25e87..1f96e0a9 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -278,16 +278,6 @@ body {
     transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
-    /* fadeIn effect */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
 }
 
@@ -322,12 +312,12 @@ body {
 
 .videoAvatarImage {
     z-index: 8;
+    display: none;
     position: absolute;
     /*center*/
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    display: none;
 }
 
 /*--------------------------------------------------------------
@@ -353,15 +343,6 @@ body {
     border-radius: 20px;
     background: transparent;
     box-shadow: var(--box-shadow);
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
 }
 
@@ -373,6 +354,12 @@ body {
     padding: 4px;
     border-radius: 5px;
     opacity: var(--btn-opc);
+    color: var(--btn-color);
+}
+
+#buttonsBar button:hover {
+    color: var(--hover-color);
+    transform: var(--btns-hover-scale);
 }
 
 #buttonsBar button:focus {
@@ -391,45 +378,7 @@ body {
     transition: all 0.3s ease-in-out;
 }
 
-#shareRoomBtn,
-#audioBtn,
-#videoBtn,
-#screenShareBtn,
-#recordStreamBtn,
-#fullScreenBtn,
-#swapCameraBtn,
-#chatRoomBtn,
-#captionBtn,
-#myHandBtn,
-#whiteboardBtn,
-#fileShareBtn,
-#mySettingsBtn,
-#aboutBtn,
-#leaveRoomBtn {
-    color: var(--btn-color);
-}
-
-#initAudioBtn:hover,
-#initVideoBtn:hover,
-#shareRoomBtn:hover,
-#audioBtn:hover,
-#videoBtn:hover,
-#screenShareBtn:hover,
-#recordStreamBtn:hover,
-#fullScreenBtn:hover,
-#swapCameraBtn:hover,
-#chatRoomBtn:hover,
-#captionBtn:hover,
-#myHandBtn:hover,
-#fileShareBtn:hover,
-#whiteboardBtn:hover,
-#mySettingsBtn:hover,
-#aboutBtn:hover {
-    color: var(--hover-color);
-    transform: var(--btns-hover-scale);
-}
-
-#leaveRoomBtn:hover {
+#buttonsBar #leaveRoomBtn:hover {
     color: red;
     transform: var(--btns-hover-scale);
 }
@@ -439,10 +388,6 @@ body {
     color: #e74c3c !important;
 }
 
-button {
-    cursor: pointer;
-}
-
 /*--------------------------------------------------------------
 # Chat room aka msger
 --------------------------------------------------------------*/
@@ -460,15 +405,6 @@ button {
     width: var(--msger-width);
     background: var(--msger-bg);
     /* text-align: justify; */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
     border-radius: 5px;
     box-shadow: var(--box-shadow);
@@ -708,16 +644,6 @@ button:hover {
     height: 50%;
     cursor: default;
     background: var(--msger-private-bg);
-    /* fade in */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
 }
 
@@ -920,11 +846,6 @@ video:fullscreen {
     display: none;
     z-index: 16;
     min-width: 320px;
-    /* center */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     /* gui */
     background-color: rgba(0, 0, 0, 0.7);
     border-radius: 5px;
@@ -932,16 +853,6 @@ video:fullscreen {
     box-shadow: var(--box-shadow);
     padding: 10px;
     min-width: 330px;
-    /* fade in */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
     overflow: hidden;
 }
 
@@ -1084,11 +995,9 @@ video:fullscreen {
     background-color: transparent !important;
 }
 
-/* 
-.swal2-popup {
-    font-size: 0.8rem !important;
-}
-*/
+/* .swal2-popup {
+    font-size: 0.8 !important;
+} */
 
 .swal2-select {
     background-color: black !important;
@@ -1201,21 +1110,6 @@ progress {
     height: var(--iframe-height);
     box-shadow: var(--box-shadow);
     border-radius: 5px;
-    /* center */
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    /* fade in */
-    -webkit-animation: fadeIn ease-in 1;
-    -moz-animation: fadeIn ease-in 1;
-    animation: fadeIn ease-in 1;
-    -webkit-animation-fill-mode: forwards;
-    -moz-animation-fill-mode: forwards;
-    animation-fill-mode: forwards;
-    -webkit-animation-duration: 1s;
-    -moz-animation-duration: 1s;
-    animation-duration: 1s;
 }
 
 #videoUrlHeader {
@@ -1335,6 +1229,10 @@ progress {
 # Common
 --------------------------------------------------------------*/
 
+button {
+    cursor: pointer;
+}
+
 .hidden {
     display: none;
 }
@@ -1348,6 +1246,8 @@ progress {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
 }
 
 .center-img {
diff --git a/public/js/client.js b/public/js/client.js
index 2a088f38..7f5af812 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -58,6 +58,19 @@ const wbImageInput = 'image/*';
 const wbWidth = 800;
 const wbHeight = 600;
 
+const chatInputEmoji = {
+    '<3': '\u2764\uFE0F',
+    '</3': '\uD83D\uDC94',
+    ':D': '\uD83D\uDE00',
+    ':)': '\uD83D\uDE03',
+    ';)': '\uD83D\uDE09',
+    ':(': '\uD83D\uDE12',
+    ':p': '\uD83D\uDE1B',
+    ';p': '\uD83D\uDE1C',
+    ":'(": '\uD83D\uDE22',
+    ':+1:': '\uD83D\uDC4D',
+}; // https://github.com/wooorm/gemoji/blob/main/support.md
+
 let myPeerId;
 
 // video cam - screen max frame rate
@@ -112,21 +125,7 @@ let peerMediaElements = {}; // keep track of our peer <video> tags, indexed by p
 let chatMessages = []; // collect chat messages to save it later if want
 let transcripts = []; //collect all the transcripts to save it later if you need
 let backupIceServers = [{ urls: 'stun:stun.l.google.com:19302' }]; // backup iceServers
-
-let chatInputEmoji = {
-    '<3': '\u2764\uFE0F',
-    '</3': '\uD83D\uDC94',
-    ':D': '\uD83D\uDE00',
-    ':)': '\uD83D\uDE03',
-    ';)': '\uD83D\uDE09',
-    ':(': '\uD83D\uDE12',
-    ':p': '\uD83D\uDE1B',
-    ';p': '\uD83D\uDE1C',
-    ":'(": '\uD83D\uDE22',
-    ':+1:': '\uD83D\uDC4D',
-}; // https://github.com/wooorm/gemoji/blob/main/support.md
-
-let countTime;
+let countTime; // conference count time
 // init audio-video
 let initAudioBtn;
 let initVideoBtn;
@@ -1318,7 +1317,7 @@ function loadLocalMedia(stream) {
 
     // menu Status
     myStatusMenu.setAttribute('id', 'myStatusMenu');
-    myStatusMenu.className = 'statusMenu';
+    myStatusMenu.className = 'statusMenu fadein';
 
     // session time
     myCountTimeImg.setAttribute('id', 'countTimeImg');
@@ -1448,7 +1447,7 @@ function loadRemoteMediaStream(stream, peers, peer_id) {
 
     // menu Status
     remoteStatusMenu.setAttribute('id', peer_id + '_menuStatus');
-    remoteStatusMenu.className = 'statusMenu';
+    remoteStatusMenu.className = 'statusMenu fadein';
 
     // remote peer name element
     remoteVideoParagraphImg.setAttribute('id', peer_id + '_nameImg');
diff --git a/public/view/client.html b/public/view/client.html
index e6329dd8..c4178be7 100755
--- a/public/view/client.html
+++ b/public/view/client.html
@@ -79,7 +79,7 @@ access to use this app.
         https://fontawesome.com/icons?d=gallery
         -->
 
-        <div id="buttonsBar">
+        <div id="buttonsBar" class="fadein">
             <button id="shareRoomBtn" class="fas fa-users"></button>
             <button id="audioBtn" class="fas fa-microphone"></button>
             <button id="videoBtn" class="fas fa-video"></button>
@@ -103,7 +103,7 @@ access to use this app.
         https://getemoji.com
         -->
 
-        <section id="msgerDraggable" class="msger-draggable">
+        <section id="msgerDraggable" class="msger-draggable fadein">
             <section id="msger" class="msger">
                 <header id="msgerHeader" class="msger-header">
                     <div class="msger-header-title"><i class="fas fa-comment-alt"></i> Chat</div>
@@ -139,7 +139,7 @@ access to use this app.
 
             <!-- Start private msg -->
 
-            <section id="msgerCP">
+            <section id="msgerCP" class="center fadein">
                 <section id="msgerCPSec" class="msger">
                     <header id="msgerCPHeader" class="msger-private-header">
                         <div class="msger-header-title"><i class="fas fa-comment-alt"></i> Send Private messages</div>
@@ -170,7 +170,7 @@ access to use this app.
 
         <!-- Start of caption section -->
 
-        <section id="captionDraggable" class="msger-draggable">
+        <section id="captionDraggable" class="msger-draggable fadein">
             <section id="caption" class="msger">
                 <header id="captionHeader" class="msger-header">
                     <div class="msger-header-title"><i class="fas fa-comment-alt"></i> Captions</div>
@@ -195,7 +195,7 @@ access to use this app.
 
         <!-- Start my settings -->
 
-        <section id="mySettings">
+        <section id="mySettings" class="center fadein">
             <header id="mySettingsHeader">
                 <button id="mySettingsCloseBtn" class="fas fa-times"></button>
             </header>
@@ -365,7 +365,7 @@ access to use this app.
 
         <!-- Start video URL iframe -->
 
-        <div id="videoUrlCont">
+        <div id="videoUrlCont" class="center fadein">
             <div id="videoUrlHeader">
                 <button id="videoUrlCloseBtn" class="fas fa-times"></button>
             </div>