solve one TODO

nkonev · Dec 23, 2023 · 8506db3 · 8506db3
1 parent dafadcd
commit 8506db3
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 55 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -23,45 +23,52 @@
               <v-app-bar-nav-icon @click="toggleLeftNavigation"></v-app-bar-nav-icon>
           </v-badge>
 
-          <template v-if="showSearchButton || !isMobile()">
-              <v-badge v-if="chatStore.showCallButton || chatStore.showHangButton"
-                       :content="chatStore.videoChatUsersCount"
-                       :model-value="!!chatStore.videoChatUsersCount"
-                       color="green"
-                       overlap
-                       offset-y="1.8em"
-              >
-                  <v-btn v-if="chatStore.showCallButton" icon :loading="chatStore.initializingVideoCall" @click="createCall()" :title="chatStore.tetATet ? $vuetify.locale.t('$vuetify.call_up') : $vuetify.locale.t('$vuetify.enter_into_call')">
-                      <v-icon :size="getIconSize()" color="green">{{chatStore.tetATet ? 'mdi-phone' : 'mdi-phone-plus'}}</v-icon>
-                  </v-btn>
-                  <v-btn v-if="chatStore.showHangButton" icon :loading="chatStore.initializingVideoCall" @click="stopCall()" :title="$vuetify.locale.t('$vuetify.leave_call')">
-                      <v-icon :size="getIconSize()" :class="chatStore.shouldPhoneBlink ? 'call-blink' : 'text-red'">mdi-phone</v-icon>
-                  </v-btn>
-              </v-badge>
-          </template>
+          <template v-if="chatStore.showCallManagement">
+            <template v-if="showSearchButton || !isMobile()">
+                <v-badge
+                         :content="chatStore.videoChatUsersCount"
+                         :model-value="!!chatStore.videoChatUsersCount"
+                         color="green"
+                         overlap
+                         offset-y="1.8em"
+                >
+                    <v-btn v-if="chatStore.isReady()" icon :loading="chatStore.initializingVideoCall" @click="createCall()" :title="chatStore.tetATet ? $vuetify.locale.t('$vuetify.call_up') : $vuetify.locale.t('$vuetify.enter_into_call')">
+                        <v-icon :size="getIconSize()" color="green">{{chatStore.tetATet ? 'mdi-phone' : 'mdi-phone-plus'}}</v-icon>
+                    </v-btn>
+                    <v-btn v-else-if="chatStore.isInCall()" icon :loading="chatStore.initializingVideoCall" @click="stopCall()" :title="$vuetify.locale.t('$vuetify.leave_call')">
+                        <v-icon :size="getIconSize()" :class="chatStore.shouldPhoneBlink ? 'call-blink' : 'text-red'">mdi-phone</v-icon>
+                    </v-btn>
+                </v-badge>
+            </template>
 
-          <template v-if="chatStore.canShowMicrophoneButton && chatStore.showHangButton && !isMobile()">
-            <v-btn v-if="chatStore.showMicrophoneOnButton" icon @click="offMicrophone()" :title="$vuetify.locale.t('$vuetify.mute_audio')"><v-icon>mdi-microphone</v-icon></v-btn>
-            <v-btn v-if="chatStore.showMicrophoneOffButton" icon @click="onMicrophone()" :title="$vuetify.locale.t('$vuetify.unmute_audio')"><v-icon>mdi-microphone-off</v-icon></v-btn>
+            <template v-if="!isMobile()">
+              <template v-if="chatStore.isInCall()">
+                <template v-if="chatStore.canShowMicrophoneButton">
+                  <v-btn v-if="chatStore.showMicrophoneOnButton" icon @click="offMicrophone()" :title="$vuetify.locale.t('$vuetify.mute_audio')"><v-icon>mdi-microphone</v-icon></v-btn>
+                  <v-btn v-if="chatStore.showMicrophoneOffButton" icon @click="onMicrophone()" :title="$vuetify.locale.t('$vuetify.unmute_audio')"><v-icon>mdi-microphone-off</v-icon></v-btn>
+                </template>
+
+                <v-btn icon @click="addScreenSource()" :title="$vuetify.locale.t('$vuetify.screen_share')">
+                  <v-icon>mdi-monitor-screenshot</v-icon>
+                </v-btn>
+                <v-btn icon @click="addVideoSource()" :title="$vuetify.locale.t('$vuetify.source_add')">
+                  <v-icon>mdi-video-plus</v-icon>
+                </v-btn>
+              </template>
+
+              <v-btn v-if="chatStore.showRecordStartButton" icon @click="startRecord()" :loading="chatStore.initializingStaringVideoRecord" :title="$vuetify.locale.t('$vuetify.start_record')">
+                <v-icon>mdi-record-rec</v-icon>
+              </v-btn>
+              <v-btn v-if="chatStore.showRecordStopButton" icon @click="stopRecord()" :loading="chatStore.initializingStoppingVideoRecord" :title="$vuetify.locale.t('$vuetify.stop_record')">
+                <v-icon color="red">mdi-stop</v-icon>
+              </v-btn>
+            </template>
           </template>
 
           <v-btn v-if="chatStore.showGoToBlogButton && !isMobile()" icon :href="goToBlogLink()" :title="$vuetify.locale.t('$vuetify.go_to_blog_post')">
             <v-icon>mdi-postage-stamp</v-icon>
           </v-btn>
 
-          <v-btn v-if="chatStore.showHangButton && !isMobile()" icon @click="addScreenSource()" :title="$vuetify.locale.t('$vuetify.screen_share')">
-            <v-icon>mdi-monitor-screenshot</v-icon>
-          </v-btn>
-          <v-btn v-if="chatStore.showHangButton && !isMobile()" icon @click="addVideoSource()" :title="$vuetify.locale.t('$vuetify.source_add')">
-            <v-icon>mdi-video-plus</v-icon>
-          </v-btn>
-          <v-btn v-if="chatStore.showRecordStartButton && !isMobile()" icon @click="startRecord()" :loading="chatStore.initializingStaringVideoRecord" :title="$vuetify.locale.t('$vuetify.start_record')">
-            <v-icon>mdi-record-rec</v-icon>
-          </v-btn>
-          <v-btn v-if="chatStore.showRecordStopButton && !isMobile()" icon @click="stopRecord()" :loading="chatStore.initializingStoppingVideoRecord" :title="$vuetify.locale.t('$vuetify.stop_record')">
-            <v-icon color="red">mdi-stop</v-icon>
-          </v-btn>
-
           <v-btn v-if="chatStore.showScrollDown" icon @click="scrollDown()" :title="$vuetify.locale.t('$vuetify.scroll_down')">
             <v-icon :x-large="isMobile()">mdi-arrow-down-thick</v-icon>
           </v-btn>

diff --git a/frontend/src/ChatVideo.vue b/frontend/src/ChatVideo.vue
@@ -188,6 +188,7 @@ export default {
       track.detach();
       this.removeComponent(participant.identity, track);
 
+      this.chatStore.setCallStateReady();
       this.refreshLocalMicrophoneAppBarButtons();
     },
     removeComponent(userIdentity, track) {
@@ -310,6 +311,7 @@ export default {
             this.drawNewComponentOrInsertIntoExisting(this.room.localParticipant, participantTracks, first, localVideoProperties);
 
             this.refreshLocalMicrophoneAppBarButtons();
+            this.chatStore.setCallStateInCall();
           } catch (e) {
             this.setError(e, "Error during reacting on local track published");
           }
@@ -520,8 +522,6 @@ export default {
 
     this.chatStore.showDrawerPrevious = this.chatStore.showDrawer;
     this.chatStore.showDrawer = false;
-    this.chatStore.showCallButton = false;
-    this.chatStore.showHangButton = true;
 
     await axios.put(`/api/video/${this.chatId}/dial/enter`);
 
@@ -547,8 +547,8 @@ export default {
       this.inRestarting = false;
     });
 
-    this.chatStore.showCallButton = true;
-    this.chatStore.showHangButton = false;
+    this.chatStore.canShowMicrophoneButton = false;
+
     this.chatStore.showDrawer = this.chatStore.showDrawerPrevious;
 
     this.chatStore.videoChatUsersCount = 0;

diff --git a/frontend/src/ChatView.vue b/frontend/src/ChatView.vue
@@ -536,11 +536,7 @@ export default {
     if (this.chatStore.currentUser) {
       await this.onProfileSet();
     }
-
-    if (this.$route.name == chat_name) { // not to change in case we enter to call by clicking on blinking snackbar
-      this.chatStore.showCallButton = true;
-      this.chatStore.showHangButton = false;
-    }
+    this.chatStore.showCallManagement = true;
 
     bus.on(PROFILE_SET, this.onProfileSet);
     bus.on(LOGGED_OUT, this.onLogout);
@@ -588,9 +584,7 @@ export default {
     setTitle(null);
     this.chatStore.avatar = null;
     this.chatStore.showGoToBlogButton = null;
-
-    this.chatStore.showCallButton = false;
-    this.chatStore.showHangButton = false;
+    this.chatStore.showCallManagement = false;
 
     this.chatStore.isShowSearch = false;
     this.chatStore.chatUsersCount = 0;

diff --git a/frontend/src/RightPanelActions.vue b/frontend/src/RightPanelActions.vue
@@ -95,10 +95,10 @@ export default {
       bus.emit(OPEN_CHAT_EDIT, this.chatId);
     },
     shouldDisplayCopyCallLink() {
-      return (this.chatStore.showCallButton || this.chatStore.showHangButton) && this.isMobile()
+      return (this.chatStore.showCallManagement) && this.isMobile()
     },
     shouldDisplayCopyCallLinkDesktop() {
-      return (this.chatStore.showCallButton || this.chatStore.showHangButton) && !this.isMobile()
+      return (this.chatStore.showCallManagement) && !this.isMobile()
     },
     shouldDisplayAddVideoSource() {
       return this.$route.name == videochat_name && this.isMobile()

diff --git a/frontend/src/store/chatStore.js b/frontend/src/store/chatStore.js
@@ -4,14 +4,17 @@ import axios from "axios";
 import {isMobileBrowser, setIcon} from "@/utils";
 import {SEARCH_MODE_CHATS, SEARCH_MODE_MESSAGES} from "@/mixins/searchString";
 
+export const callStateReady = "ready"
+export const callStateInCall = "inCall"
+
 export const useChatStore = defineStore('chat', {
   state: () => {
     return {
         currentUser: null,
         notificationsCount: 0,
         notificationsSettings: {},
-        showCallButton: false,
-        showHangButton: false,
+        showCallManagement: false,
+        callState: callStateReady,
         shouldPhoneBlink: false,
         availableOAuth2Providers: [],
         showAlert: false,
@@ -110,7 +113,19 @@ export const useChatStore = defineStore('chat', {
         this.fileUploadingQueue = this.fileUploadingQueue.filter((item) => {
             return item.id != id;
         });
-    }
+    },
+    isInCall() {
+      return this.callState == callStateInCall
+    },
+    isReady() {
+      return this.callState == callStateReady
+    },
+    setCallStateReady() {
+      this.callState = callStateReady
+    },
+    setCallStateInCall() {
+      this.callState = callStateInCall
+    },
   },
 
 })
diff --git a/video/handlers/invite.go b/video/handlers/invite.go
@@ -247,12 +247,6 @@ func (vh *InviteHandler) ProcessRemoveFromCallList(c echo.Context) error {
 //  add status "inviting", "closing"
 //  when we have "closing" - send "false" all the time empty room exists
 
-// TODO get rid of green/red button=true/false setting from ChatView.vue, ChatVideo.vue
-//  in favor of the following mechanish
-//  /video in path opens "call management" button group
-//  during entering on /video - call starts and changes to red button before call actually starts
-//  during leaving /video - call stops and changes to green button after the actual stop
-
 func (vh *InviteHandler) removeFromCallingList(c echo.Context, chatId int64, userPrincipalDto *auth.AuthResult) int {
 	behalfUserId, err := vh.dialRedisRepository.GetDialMetadata(c.Request().Context(), chatId)
 	if err != nil {