feat(calls): add fullscreen support (#4439)

components/ui/Global/Global.vue

@@ -108,7 +108,6 @@ export default Vue.extend({
      * @example
      */
     denyCall() {
-      this.$store.commit('ui/fullscreen', false)
       iridium.webRTC.denyCall()
     },
   },

components/views/media/Media.html

@@ -1,5 +1,10 @@
-<div class="mediastream" data-cy="mediastream" :style="`height:${height}`">
-  <MediaHeading />
+<div
+  class="mediastream"
+  ref="mediastream"
+  data-cy="mediastream"
+  :style="`height:${height}`"
+>
+  <MediaHeading :isFullscreen="isFullscreen" @toggle="toggleFullscreen" />
   <div class="media">
     <MediaUser
       id="local"
@@ -27,5 +32,10 @@
   />
   <MediaActionsSettings />
   <MediaActions />
-  <InteractablesDragBar side="bottom" showHandle @resize="(val)=> height=val" />
+  <InteractablesDragBar
+    v-if="!isFullscreen"
+    side="bottom"
+    showHandle
+    @resize="(val)=> height=val"
+  />
 </div>

components/views/media/Media.vue

@@ -33,6 +33,7 @@ export default Vue.extend({
   data() {
     return {
       webrtc: iridium.webRTC.state,
+      isFullscreen: false,
     }
   },
   computed: {
@@ -60,6 +61,16 @@ export default Vue.extend({
       this.$Sounds.changeLevels(volume / 100)
       this.$store.commit('audio/setVolume', volume)
     },
+    toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        const media = this.$refs.mediastream as HTMLElement
+        media.requestFullscreen()
+        this.isFullscreen = true
+      } else if (document.exitFullscreen) {
+        document.exitFullscreen()
+        this.isFullscreen = false
+      }
+    },
   },
 })
 </script>

components/views/media/heading/Heading.html

@@ -1,12 +1,12 @@
 <div class="heading">
   <transition name="media-fullscreen" mode="out-in">
     <button
-      :key="ui.fullscreen"
-      v-tooltip.left="ui.fullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
-      @click="toggleFullscreen"
+      :key="isFullscreen"
+      v-tooltip.left="isFullscreen ? $t('ui.exit_fullscreen') : $t('ui.fullscreen')"
+      @click="$emit('toggle')"
     >
       <minimize-icon
-        v-if="ui.fullscreen"
+        v-if="isFullscreen"
         data-cy="exit-fullscreen"
         size="1.2x"
       />

components/views/media/heading/Heading.vue

@@ -3,7 +3,6 @@
 <script lang="ts">
 import Vue from 'vue'
 import { MaximizeIcon, MinimizeIcon } from 'satellite-lucide-icons'
-import { mapState } from 'vuex'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { useCallElapsedTime } from '~/libraries/Iridium/webrtc/hooks'
 
@@ -12,19 +11,21 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
+  props: {
+    isFullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   setup() {
     const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
-
     return { elapsedTime, startInterval, clearTimer }
   },
   data() {
     return {
       webrtc: iridium.webRTC.state,
     }
   },
-  computed: {
-    ...mapState(['ui']),
-  },
   watch: {
     'webrtc.createdAt': {
       handler() {
@@ -36,16 +37,6 @@ export default Vue.extend({
   beforeDestroy() {
     this.clearTimer()
   },
-  methods: {
-    /**
-     * @method toggleFullscreen
-     * @description Toggles fullscreen by committing the opposite of it's current value (this.ui.fullscreen) to fullscreen in state
-     * @example @click="toggleFullscreen"
-     */
-    toggleFullscreen() {
-      this.$store.commit('ui/fullscreen', !this.ui.fullscreen)
-    },
-  },
 })
 </script>
 

components/views/navigation/sidebar/live/Live.html

@@ -1,5 +1,5 @@
 <div class="live" v-if="existLiveChat">
-  <div class="name-and-icon" @click="activeChat">
+  <div class="name-and-icon">
     <radio-icon size="1.2x" class="green" />
     <TypographySubtitle
       :class="`sel-user-name ${existLiveChat ? 'is-exist' : 'is-non-exist'}`"

components/views/navigation/sidebar/live/Live.vue

@@ -85,12 +85,8 @@ export default Vue.extend({
   },
   methods: {
     hangUp() {
-      this.$store.commit('ui/fullscreen', false)
       this.webrtc.hangUp()
     },
-    activeChat() {
-      this.$store.commit('ui/fullscreen', false)
-    },
     async call(kinds: TrackKind[]) {
       if (!this.enableRTC || !this.details) {
         return

store/ui/__snapshots__/state.test.ts.snap

@@ -30,7 +30,6 @@ Object {
     "route": "emoji",
     "show": false,
   },
-  "fullscreen": false,
   "glyphMarketplaceView": Object {
     "shopId": null,
     "view": "home",

store/ui/mutations.test.ts

@@ -432,12 +432,6 @@ describe('mutations', () => {
     expect(localizedState.chatbarContent).toBe('string')
   })
 
-  test('fullscreen', () => {
-    const localizedState = { ...initialState }
-    mutations.default.fullscreen(localizedState, true)
-    expect(localizedState.fullscreen).toBeTruthy()
-  })
-
   test('setChatImageOverlay', () => {
     const passedInImageOverlay = undefined
     const localizedState = { ...initialState }

store/ui/mutations.ts

@@ -39,9 +39,6 @@ export default {
   chatbarContent(state: UIState, content: string) {
     state.chatbarContent = content
   },
-  fullscreen(state: UIState, fullscreen: boolean) {
-    state.fullscreen = fullscreen
-  },
   setChatImageOverlay(state: UIState, image: FileMessage | undefined) {
     state.chatImageOverlay = image
   },

store/ui/state.ts

@@ -29,7 +29,6 @@ const InitialUIState = (): UIState => ({
   glyphModalPackId: undefined,
   chatbarContent: '',
   chatbarFocus: false,
-  fullscreen: false,
   showPinned: false,
   enhancers: {
     show: false,

store/ui/types.ts

@@ -88,7 +88,6 @@ export interface UIState {
   chatbarContent: string
   chatbarFocus: boolean
   showPinned: boolean
-  fullscreen: boolean
   enhancers: EnhancerInfo
   messages: any[]
   unreadMessage: number

store/webrtc/actions.ts

@@ -660,7 +660,6 @@ const webRTCActions = {
       commit('setActiveCall', undefined)
       commit('updateCreatedAt', 0)
       commit('conversation/setCalling', false, { root: true })
-      commit('ui/fullscreen', false, { root: true })
       call.off('INCOMING_CALL', onCallIncoming)
       call.off('OUTGOING_CALL', onCallOutgoing)
       call.off('CONNECTED', onCallConnected)