[mirotalksfu] - add Video menu bar + snapshot

public/css/Room.css

@@ -100,7 +100,7 @@ body {
 --------------------------------------------------------------*/
 
 #control {
-    z-index: 2;
+    z-index: 3;
     position: absolute;
     display: flex;
     padding: 5px;
@@ -663,7 +663,7 @@ progress {
 --------------------------------------------------------------*/
 
 #whiteboard {
-    z-index: 3;
+    z-index: 4;
     position: absolute;
     margin: auto;
     padding: 10px;
@@ -811,8 +811,9 @@ progress {
 /*
 z-index:
     - 1 videoMediaContainer
-    - 2 control buttons
-    - 3 whiteboard
+    - 2 Video menu bar
+    - 3 control buttons
+    - 4 whiteboard
     - 5 chat
     - 6 settings
     - 7 participants

public/css/VideoGrid.css

@@ -92,6 +92,40 @@
     display: none;
 }
 
+.videoMenuBar {
+    z-index: 2;
+    position: absolute;
+    padding: 3px;
+    background: var(--bg);
+    font-size: small;
+    font-weight: bold;
+    text-align: center;
+    width: 100%;
+    cursor: default;
+    /* center */
+    top: 18px;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    overflow: hidden;
+}
+
+.videoMenuBar button {
+    float: right;
+    margin-right: 3px;
+    color: white;
+    background: transparent;
+    border-radius: 5px;
+    display: inline;
+    border: none;
+}
+
+.videoMenuBar button:hover {
+    color: grey;
+    transition: all 0.3s ease-in-out;
+}
+
 #videoMediaContainer video {
     position: absolute;
     margin-left: auto;