feat(media): call ui updates

assets/styles/base.less

@@ -259,9 +259,6 @@ button {
     .vue-slider-dot-tooltip-inner {
       font-family: @secondary-font;
       &:extend(.background-flair);
-      &::after {
-        border-top-color: @flair-color !important;
-      }
     }
   }
 }

components/interactables/DragBar/DragBar.less

@@ -1,37 +1,35 @@
-@dragbar-thickness: 12px;
+@dragbar-width: 12px;
+@border-width: 3px;
 
 .drag-bar {
   display: flex;
   align-items: center;
   justify-content: center;
   user-select: none;
-  transition: background-color @animation-speed ease;
+  transition: border-color @animation-speed ease;
+  border: 0px solid transparent;
 
   &.drag-bar-overlay {
     &.side-top {
-      margin-bottom: -@dragbar-thickness;
+      margin-bottom: -@dragbar-width;
     }
     &.side-left {
-      margin-right: -@dragbar-thickness;
+      margin-right: -@dragbar-width;
     }
     &.side-right {
-      margin-left: -@dragbar-thickness;
+      margin-left: -@dragbar-width;
     }
     &.side-bottom {
-      margin-top: -@dragbar-thickness;
+      margin-top: -@dragbar-width;
     }
   }
 
   &:hover {
-    // background-color: fade(@text-muted, 10%);
+    border-color: fade(@dark, 20%);
   }
 
   &:active {
-    // background-color: fade(@text-muted, 5%);
-
-    // .handle {
-    //   opacity: 0.25;
-    // }
+    border-color: fade(@dark, 20%);
   }
 
   &:active::after {
@@ -51,7 +49,7 @@
 
   &.side-left,
   &.side-right {
-    width: @dragbar-thickness;
+    width: @dragbar-width;
     cursor: ew-resize;
 
     .handle {
@@ -61,7 +59,27 @@
 
   &.side-top,
   &.side-bottom {
-    height: @dragbar-thickness;
+    height: @dragbar-width;
     cursor: ns-resize;
   }
+
+  &.side-top {
+    border-top-width: @border-width;
+    margin-bottom: 0 - @dragbar-width;
+  }
+
+  &.side-left {
+    border-left-width: @border-width;
+    margin-right: 0 - @dragbar-width;
+  }
+
+  &.side-right {
+    border-right-width: @border-width;
+    margin-left: 0 - @dragbar-width;
+  }
+
+  &.side-bottom {
+    border-bottom-width: @border-width;
+    margin-top: 0 - @dragbar-width;
+  }
 }

components/interactables/Volume/Volume.html

@@ -8,5 +8,6 @@
     @change="returnValue"
     :plain="plain"
     :tooltip-formatter="percentageFormatter"
+    :duration="0.2"
   ></vue-slider>
 </div>

components/interactables/Volume/Volume.less

@@ -37,6 +37,14 @@
   &--btt,
   &--ttb {
     height: 8rem;
+    .vue-slider-dot-tooltip-inner {
+      &::after {
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+        border-left-color: @flair-color;
+      }
+    }
   }
   &--ltr {
     &:extend(.full-width);

components/interactables/Volume/Volume.vue

@@ -1,6 +1,6 @@
-<template src="./Volume.html" />
+<template src="./Volume.html"></template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue'
 import VueSlider from 'vue-slider-component'
 import 'vue-slider-component/theme/default.css'
@@ -11,7 +11,7 @@ export default Vue.extend({
     VueSlider,
   },
   props: {
-    volume: {
+    value: {
       type: Number,
       default: 100,
     },
@@ -24,29 +24,14 @@ export default Vue.extend({
       default: 'btt',
     },
   },
-  data() {
-    return {
-      value: this.volume,
-      /**
-       * @method percentageFormatter DocsTODO
-       * @description
-       * @param volumePercentage
-       * @returns
-       * @example
-       */
-      percentageFormatter: (volumePercentage) => {
-        return volumePercentage + ' %'
-      },
-    }
-  },
   methods: {
     /**
      * @method returnValue DocsTODO
      * @description
      * @example
      */
-    returnValue() {
-      this.$emit('returned-value', this.value)
+    returnValue(v: number) {
+      this.$emit('returned-value', v)
     },
   },
 })

components/views/media/Media.html

@@ -1,23 +1,37 @@
 <div
   ref="mediastream"
   class="mediastream"
+  :class="{ 'has-presenter': presenter !== null }"
   data-cy="mediastream"
   :style="`height:${height}`"
 >
-  <MediaHeading />
-  <div class="media">
-    <MediaUser
-      id="local"
-      :user="localParticipant"
-      is-local
-      data-cy="local-video"
-    />
+  <div v-if="presenter !== null" class="presenter" ref="presenter">
     <MediaUser
-      v-for="participant in remoteParticipants"
-      :key="participant.did"
-      :user="participant"
-      data-cy="remote-video"
+      :user="presenter.participant"
+      :size="presenterUserSize"
+      :stream="presenter.stream"
+      @click="() => togglePresenter(null)"
+      @mounted="calculateUserSizes"
     />
+  </div>
+
+  <div
+    class="media"
+    :class="{ 'has-presenter': presenter !== null }"
+    ref="media"
+  >
+    <template v-for="stream in streams">
+      <MediaUser
+        :key="stream.participant.did + stream.stream"
+        :user="stream.participant"
+        data-cy="remote-video"
+        :size="mediaUserSize"
+        :stream="stream.stream"
+        :class="{ 'is-presenter': presenter === stream }"
+        @click="() => togglePresenter(stream)"
+      />
+    </template>
+
     <!-- <div
       v-if="ui.fullscreen && users.length > fullscreenMaxViewableUsers || !ui.fullscreen && users.length > maxViewableUsers"
       class="more-user"
@@ -26,8 +40,9 @@
       ...
     </div> -->
   </div>
-
   <!-- <MediaActionsSettings /> -->
+
+  <MediaHeading />
   <MediaActions />
   <div class="controls">
     <MediaActionsVolume
@@ -43,7 +58,6 @@
   <InteractablesDragBar
     v-if="!isFullscreen"
     side="bottom"
-    show-handle
     @resize="(val) => (height = val)"
   />
 </div>

components/views/media/Media.less

@@ -4,32 +4,47 @@
   flex-direction: column;
   position: relative;
   border-radius: @corner-rounding;
-  min-height: 100px;
+  min-height: 240px;
+  max-height: calc(100vh - 300px);
+  gap: 12px;
+  padding-top: 12px;
+
+  &.has-presenter {
+    min-height: 400px;
+  }
 
   .media {
     position: relative;
     display: flex;
     flex: 1;
     justify-content: center;
-    align-items: center;
+    align-content: center;
     flex-wrap: wrap;
-    overflow-y: auto;
+    flex-direction: row;
+    overflow: hidden;
     gap: 8px;
-    padding: 8px;
+    min-height: 120px;
+    margin: 0 12px;
+
+    &.has-presenter {
+      height: 120px;
+    }
 
     #local {
       order: -1;
     }
 
     .user {
-      width: 16rem;
-      height: 9rem;
       &.full-video {
         position: absolute;
         width: 100% !important;
         height: 100% !important;
         &:extend(.third-layer);
       }
+
+      &.is-presenter {
+        opacity: 0.66;
+      }
     }
   }
 
@@ -38,7 +53,17 @@
     align-items: flex-end;
     gap: 16px;
     position: absolute;
-    bottom: 16px;
-    right: 16px;
+    bottom: 0;
+    right: 0;
+    margin: 18px;
   }
 }
+
+.presenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-grow: 1;
+  overflow: hidden;
+  margin: 0 12px;
+}