feat(calls): pip component

assets/styles/base.less

@@ -300,15 +300,6 @@ button {
   }
 }
 
-#mediastream {
-  .user,
-  .media-user .tag {
-    &:extend(.background-semitransparent-dark);
-    &:extend(.font-primary);
-    font-family: @primary-font;
-  }
-}
-
 .user {
   .tag {
     &:extend(.background-flair);

assets/styles/framework/ui.less

@@ -9,6 +9,7 @@
 @mobile-nav-height: 60px;
 @chatbar-input-height: 48px;
 @background-call-height: 36px;
+@indicator-size: 32px;
 
 // Popups
 @enhancers-height: 30rem;

components/ui/BackgroundCall/BackgroundCall.html

@@ -4,11 +4,4 @@
     >{{remoteParticipant.name}}</span
   >&nbsp;
   <span v-if="elapsedTime">- {{elapsedTime}}</span>
-  <div v-if="!deafened && audioStream" class="audio-stream-container">
-    <audio
-      :id="`audio-stream-${audioStream.id}`"
-      :src-object.prop="audioStream"
-      autoplay
-    />
-  </div>
 </div>

components/ui/BackgroundCall/BackgroundCall.vue

@@ -2,18 +2,12 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { mapState } from 'vuex'
-import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
-import {
-  useCallElapsedTime,
-  useUserStreams,
-  useWebRTC,
-} from '~/libraries/Iridium/webrtc/hooks'
+import { useCallElapsedTime, useWebRTC } from '~/libraries/Iridium/webrtc/hooks'
 
 export default Vue.extend({
   setup() {
-    const { remoteParticipants, call } = useWebRTC()
+    const { remoteParticipants } = useWebRTC()
     const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
 
     const remoteParticipant = computed(() => {
@@ -22,29 +16,18 @@ export default Vue.extend({
         : null
     })
 
-    const { streams, getStream } = useUserStreams(remoteParticipant.value?.did)
-
     return {
       remoteParticipant,
-      call,
       elapsedTime,
       startInterval,
       clearTimer,
-      streams,
-      audioStream: getStream('audio'),
     }
   },
   data() {
     return {
       webrtc: iridium.webRTC.state,
     }
   },
-  computed: {
-    ...mapState({
-      friends: (state) => (state as RootState).friends.all,
-      deafened: (state) => (state as RootState).audio.deafened,
-    }),
-  },
   watch: {
     'webrtc.createdAt': {
       handler() {

components/ui/Global/Global.html

@@ -82,4 +82,7 @@
     <InteractablesQuickProfile v-if="ui.quickProfile" :user="ui.quickProfile" />
   </transition>
   <UiBackgroundCall v-if="showBackgroundCall" />
+  <UiPip v-if="showBackgroundCall" v-slot="{ dragging }">
+    <MediaPreviewCall :dragging="dragging" />
+  </UiPip>
 </div>

components/ui/Pip/Pip.vue

@@ -0,0 +1,200 @@
+<template>
+  <div
+    ref="pip"
+    class="pip-container"
+    :style="{
+      transform: transform,
+      width: `${elWidth}px`,
+      height: `${elHeight}px`,
+    }"
+    :class="{ dragging: isDragging }"
+    @mousedown.stop="mouseDown"
+    @dblclick="doubleClick"
+  >
+    <slot :dragging="isDragging" />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { throttle } from 'lodash'
+import { Config } from '~/config'
+
+type ColumnType = typeof Config.pip.columns[number]
+type RowType = typeof Config.pip.rows[number]
+
+type QuarterType = {
+  x: ColumnType
+  y: RowType
+}
+
+function isLeftButton(e: MouseEvent) {
+  const evt = e || window.event
+  if ('buttons' in evt) {
+    return evt.buttons === 1
+  }
+  const button = evt.which || evt.button
+  return button === 1
+}
+
+export default Vue.extend({
+  data() {
+    return {
+      x: Config.pip.windowMargin,
+      y: Config.pip.windowMargin,
+      offsetX: 0,
+      offsetY: 0,
+      elWidth: 320,
+      elHeight: 180,
+      quarter: { x: Config.pip.columns.length - 1, y: 0 } as QuarterType,
+      isDragging: false,
+      isEnlarged: false,
+    }
+  },
+  computed: {
+    transform(): string {
+      return `translateX(${this.x}px) translateY(${this.y}px) translateZ(0px)`
+    },
+  },
+  mounted() {
+    this.moveToQuarter(this.quarter)
+    window.addEventListener('resize', this.onResize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.onResize)
+  },
+  methods: {
+    calcPosition() {
+      const blockWidth = window.innerWidth / Config.pip.columns.length
+      const blockHeight = window.innerHeight / Config.pip.rows.length
+
+      const containerCenter = {
+        x: this.x + this.elWidth / 2,
+        y: this.y + this.elHeight / 2,
+      }
+
+      return {
+        x: Math.floor(containerCenter.x / blockWidth),
+        y: Math.floor(containerCenter.y / blockHeight),
+      }
+    },
+    moveToQuarter(quarter: QuarterType) {
+      const blockHeight = window.innerHeight / Config.pip.rows.length
+      switch (quarter.x > Config.pip.columns.length / 2 - 1) {
+        case false:
+          this.x = Config.pip.windowMargin
+          this.y =
+            // take into account smaller window height
+            blockHeight > this.elHeight
+              ? blockHeight * quarter.y + blockHeight / 2 - this.elHeight / 2
+              : quarter.y > Config.pip.rows.length / 2 - 1
+              ? window.innerHeight - this.elHeight - Config.pip.windowMargin
+              : Config.pip.windowMargin
+          break
+        case true:
+          this.x = window.innerWidth - this.elWidth - Config.pip.windowMargin
+          this.y =
+            // take into account smaller window height
+            blockHeight > this.elHeight
+              ? blockHeight * quarter.y + blockHeight / 2 - this.elHeight / 2
+              : quarter.y > Config.pip.rows.length / 2 - 1
+              ? window.innerHeight - this.elHeight - Config.pip.windowMargin
+              : Config.pip.windowMargin
+          break
+      }
+    },
+    mouseDown(e: MouseEvent) {
+      if (
+        !isLeftButton(e) ||
+        (e.target as HTMLElement).closest(Config.pip.preventDragClass)
+      )
+        return
+
+      const winOffsetX = (this.$refs.pip as HTMLElement).getBoundingClientRect()
+        .x
+      const winOffsetY = (this.$refs.pip as HTMLElement).getBoundingClientRect()
+        .y
+
+      this.isDragging = true
+      this.offsetX = e.clientX - winOffsetX
+      this.offsetY = e.clientY - winOffsetY
+      document.addEventListener('mouseup', this.mouseUp)
+      document.addEventListener('mousemove', this.mouseMove)
+      // TODO: document.body.style.pointerEvents = 'none'
+    },
+    mouseUp() {
+      this.isDragging = false
+      document.removeEventListener('mouseup', this.mouseUp)
+      document.removeEventListener('mousemove', this.mouseMove)
+      this.quarter = this.calcPosition() as QuarterType
+      this.moveToQuarter(this.quarter)
+      // TODO: document.body.style.pointerEvents = 'auto'
+    },
+    mouseMove: throttle(
+      function (e) {
+        let finalX = e.clientX - this.offsetX
+        if (finalX < 0) {
+          finalX = 0
+        } else if (finalX + this.elWidth > window.innerWidth) {
+          finalX = window.innerWidth - this.elWidth
+        }
+
+        let finalY = e.clientY - this.offsetY
+        if (finalY < 0) {
+          finalY = 0
+        } else if (finalY + this.elHeight > window.innerHeight) {
+          finalY = window.innerHeight - this.elHeight
+        }
+
+        this.x = finalX
+        this.y = finalY
+      },
+      Config.pip.throttleTime,
+      { trailing: false },
+    ),
+    onResize: throttle(function () {
+      this.moveToQuarter(this.quarter)
+    }, Config.pip.throttleTime),
+    doubleClick(e: MouseEvent) {
+      if ((e.target as HTMLElement).closest(Config.pip.preventDragClass)) return
+
+      this.elWidth =
+        this.elWidth *
+        (!this.isEnlarged
+          ? Config.pip.enlargeFactor
+          : 1 / Config.pip.enlargeFactor)
+      this.elHeight =
+        this.elHeight *
+        (!this.isEnlarged
+          ? Config.pip.enlargeFactor
+          : 1 / Config.pip.enlargeFactor)
+      this.isEnlarged = !this.isEnlarged
+      this.moveToQuarter(this.quarter)
+    },
+  },
+})
+</script>
+
+<style scoped lang="less">
+.pip-container {
+  position: absolute;
+  inset: 0;
+  /* transition: transform 800ms ease-out; cubic-bezier(0.2, 0.57, 0.67, 1.53)*/
+  transition: all 400ms cubic-bezier(0.2, 0.885, 0.32, 1.5);
+  transition-delay: 1ms;
+  border-radius: 5px;
+  box-sizing: border-box;
+  cursor: move;
+  cursor: grab;
+  cursor: -moz-grab;
+  cursor: -webkit-grab;
+  overflow: hidden;
+  &:extend(.no-select);
+}
+
+.dragging {
+  cursor: grabbing;
+  cursor: -moz-grabbing;
+  cursor: -webkit-grabbing;
+}
+</style>

components/views/media/Media.vue

@@ -38,7 +38,6 @@ export default Vue.extend({
     return {
       componentKey: this.fullscreen,
       webrtc: iridium.webRTC.state,
-      friends: iridium.friends.state.details,
     }
   },
   computed: {

components/views/media/previewCall/PreviewCall.html

@@ -0,0 +1,17 @@
+<div class="preview-call" :class="{ dragging: dragging }">
+  <MediaUser
+    v-if="remoteParticipant"
+    :id="`remote_video_${ remoteParticipant.did }`"
+    class="preview-call-user"
+    :user="remoteParticipant"
+    data-cy="remote-video"
+  />
+  <MediaActions class="preview-call-actions drag-stop" />
+  <button
+    class="preview-call-button drag-stop"
+    v-tooltip.top="$t('controls.back_to_call')"
+    @click="navigateToActiveConversation"
+  >
+    <corner-up-left-icon size="1.25x" />
+  </button>
+</div>

components/views/media/previewCall/PreviewCall.less

@@ -0,0 +1,51 @@
+.preview-call {
+  height: 100%;
+  position: relative;
+  text-align: center;
+  &-user {
+    height: 100%;
+  }
+  &-actions {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: -50px;
+    transition: 0.2s ease-in-out;
+    transition-delay: 0.2s;
+  }
+  &-button {
+    position: absolute;
+    top: @light-spacing;
+    left: @light-spacing;
+    visibility: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: @indicator-size;
+    height: @indicator-size;
+    opacity: 0;
+    border-radius: 100%;
+    background-color: @foreground-alt;
+    box-shadow: -2px 2px 30px rgba(18, 18, 22, 0.45),
+      0px 1px 2px rgba(43, 43, 59, 0.65);
+    transition: 0.2s ease-in-out;
+    transition-delay: 0.2s;
+
+    svg {
+      color: @white;
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &:hover:not(.dragging) {
+    .preview-call-button {
+      visibility: visible;
+      opacity: 0.5;
+    }
+    .preview-call-actions {
+      top: auto;
+      bottom: 5px;
+    }
+  }
+}