v1.7.0/call volume handling

app/src/index.css

@@ -985,14 +985,64 @@ button.giphy-list-item {
 .vxt-video {
   max-width: calc(50% - 10px) !important;
   min-height: calc(0.66 * calc(0.5 * var(--party-width))) !important;
-  max-height: 200px !important;
+  max-height: calc(0.66 * calc(0.5 * var(--party-width))) !important;
   height: 200px;
   border-radius: 10px;
   margin: 0 5px;
   margin-top: 5px;
   display: inline-flex !important;
   background-color: black;
+  overflow: hidden;
+  position: relative;
 }
+
+.vxt-video::after {
+  content: attr(data-name);
+  left: 0;
+  bottom: 0;
+  font-size: 12px;
+  text-align: center;
+  width: 100%;
+  z-index: 999;
+  position: absolute;
+  padding: 10px 0px;
+  background-color: #353535;
+  letter-spacing: 4px;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  opacity: 0;
+  bottom: -30px;
+  transition: all ease-in-out 0.2s;
+}
+
 .vxt-video:first-of-type {
   margin-top: 15px;
 }
+.vxt-video video {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vxt-slider {
+  position: absolute;
+  bottom: 0px;
+  opacity: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  margin: 0 !important;
+  border-radius: 0 !important;
+  height: 2.5px;
+  outline: none;
+  transition: all ease-in-out 0.2s;
+}
+
+.vxt-video:hover::after {
+  opacity: 1;
+  bottom: 0;
+}
+
+.vxt-video:hover .vxt-slider {
+  bottom: 34px;
+  opacity: 1;
+}