From cbdb31b566d4b4bce252ac7b4119a629323a220c Mon Sep 17 00:00:00 2001
From: Joe McGrath <33670767+josephmcg@users.noreply.github.com>
Date: Wed, 24 Aug 2022 23:04:27 +0900
Subject: [PATCH] feat(calls): add fullscreen support (#4439)

---
 components/ui/Global/Global.vue               |  1 -
 components/views/media/Media.html             | 16 +++++++++++---
 components/views/media/Media.vue              | 11 ++++++++++
 components/views/media/heading/Heading.html   |  8 +++----
 components/views/media/heading/Heading.vue    | 21 ++++++-------------
 .../views/navigation/sidebar/live/Live.html   |  2 +-
 .../views/navigation/sidebar/live/Live.vue    |  4 ----
 store/ui/__snapshots__/state.test.ts.snap     |  1 -
 store/ui/mutations.test.ts                    |  6 ------
 store/ui/mutations.ts                         |  3 ---
 store/ui/state.ts                             |  1 -
 store/ui/types.ts                             |  1 -
 store/webrtc/actions.ts                       |  1 -
 13 files changed, 35 insertions(+), 41 deletions(-)

diff --git a/components/ui/Global/Global.vue b/components/ui/Global/Global.vue
index a246d0b7ac..023552376e 100644
--- a/components/ui/Global/Global.vue
+++ b/components/ui/Global/Global.vue
@@ -108,7 +108,6 @@ export default Vue.extend({
      * @example
      */
     denyCall() {
-      this.$store.commit('ui/fullscreen', false)
       iridium.webRTC.denyCall()
     },
   },
diff --git a/components/views/media/Media.html b/components/views/media/Media.html
index 3e8e5468b8..c40497cb50 100644
--- a/components/views/media/Media.html
+++ b/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>
diff --git a/components/views/media/Media.vue b/components/views/media/Media.vue
index 29e84c01d5..668a24b282 100644
--- a/components/views/media/Media.vue
+++ b/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>
diff --git a/components/views/media/heading/Heading.html b/components/views/media/heading/Heading.html
index cba733e264..0e71f13018 100644
--- a/components/views/media/heading/Heading.html
+++ b/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"
       />
diff --git a/components/views/media/heading/Heading.vue b/components/views/media/heading/Heading.vue
index 5ca4384a9a..65d8194a3b 100644
--- a/components/views/media/heading/Heading.vue
+++ b/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,9 +11,14 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
+  props: {
+    isFullscreen: {
+      type: Boolean,
+      required: true,
+    },
+  },
   setup() {
     const { elapsedTime, startInterval, clearTimer } = useCallElapsedTime()
-
     return { elapsedTime, startInterval, clearTimer }
   },
   data() {
@@ -22,9 +26,6 @@ export default Vue.extend({
       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>
 
diff --git a/components/views/navigation/sidebar/live/Live.html b/components/views/navigation/sidebar/live/Live.html
index 43ca859dd4..59e09d835e 100644
--- a/components/views/navigation/sidebar/live/Live.html
+++ b/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'}`"
diff --git a/components/views/navigation/sidebar/live/Live.vue b/components/views/navigation/sidebar/live/Live.vue
index c2ff9906e7..adcce5b16b 100644
--- a/components/views/navigation/sidebar/live/Live.vue
+++ b/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
diff --git a/store/ui/__snapshots__/state.test.ts.snap b/store/ui/__snapshots__/state.test.ts.snap
index 85720e3a23..c47342dd14 100644
--- a/store/ui/__snapshots__/state.test.ts.snap
+++ b/store/ui/__snapshots__/state.test.ts.snap
@@ -30,7 +30,6 @@ Object {
     "route": "emoji",
     "show": false,
   },
-  "fullscreen": false,
   "glyphMarketplaceView": Object {
     "shopId": null,
     "view": "home",
diff --git a/store/ui/mutations.test.ts b/store/ui/mutations.test.ts
index 8cabec26cc..059ec7a176 100644
--- a/store/ui/mutations.test.ts
+++ b/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 }
diff --git a/store/ui/mutations.ts b/store/ui/mutations.ts
index 0e858ff58a..3c12865089 100644
--- a/store/ui/mutations.ts
+++ b/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
   },
diff --git a/store/ui/state.ts b/store/ui/state.ts
index 7a64ba9571..57cf79fa82 100644
--- a/store/ui/state.ts
+++ b/store/ui/state.ts
@@ -29,7 +29,6 @@ const InitialUIState = (): UIState => ({
   glyphModalPackId: undefined,
   chatbarContent: '',
   chatbarFocus: false,
-  fullscreen: false,
   showPinned: false,
   enhancers: {
     show: false,
diff --git a/store/ui/types.ts b/store/ui/types.ts
index e89970b117..af94edf6ca 100644
--- a/store/ui/types.ts
+++ b/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
diff --git a/store/webrtc/actions.ts b/store/webrtc/actions.ts
index 765915779e..5bd3b76f02 100644
--- a/store/webrtc/actions.ts
+++ b/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)