move remaining buttons to VideoButtons.vue

nkonev · Dec 10, 2024 · adb92ae · adb92ae
1 parent c18523c
commit adb92ae
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 68 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -40,29 +40,6 @@
                     </v-btn>
                 </v-badge>
             </template>
-
-            <template v-if="!isMobile()">
-              <template v-if="chatStore.isInCall()">
-                <template v-if="chatStore.canShowMicrophoneButton">
-                  <v-btn v-if="chatStore.localMicrophoneEnabled" icon @click="offMicrophone()" :title="$vuetify.locale.t('$vuetify.mute_audio')"><v-icon>mdi-microphone</v-icon></v-btn>
-                  <v-btn v-if="!chatStore.localMicrophoneEnabled" 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')">
@@ -187,7 +164,6 @@ import {
 } from "@/router/routes";
 import axios from "axios";
 import bus, {
-  ADD_SCREEN_SOURCE, ADD_VIDEO_SOURCE_DIALOG,
   CHAT_ADD,
   CHAT_DELETED,
   CHAT_EDITED, CHAT_REDRAW,
@@ -658,18 +634,6 @@ export default {
             this.resetVideoInvitation();
           });
         },
-        onMicrophone() {
-          this.chatStore.localMicrophoneEnabled = true
-        },
-        offMicrophone() {
-          this.chatStore.localMicrophoneEnabled = false
-        },
-        addVideoSource() {
-          bus.emit(ADD_VIDEO_SOURCE_DIALOG);
-        },
-        addScreenSource() {
-          bus.emit(ADD_SCREEN_SOURCE);
-        },
         onVideRecordingChanged(e) {
           if (this.isVideoRoute()) {
             this.chatStore.showRecordStartButton = !e.recordInProgress;
@@ -685,14 +649,6 @@ export default {
             this.chatStore.initializingStoppingVideoRecord = false;
           }
         },
-        startRecord() {
-          axios.put(`/api/video/${this.chatId}/record/start`);
-          this.chatStore.initializingStaringVideoRecord = true;
-        },
-        stopRecord() {
-          axios.put(`/api/video/${this.chatId}/record/stop`);
-          this.chatStore.initializingStoppingVideoRecord = true;
-        },
         isVideoRoute() {
           return this.$route.name == videochat_name
         },

diff --git a/frontend/src/VideoButtons.vue b/frontend/src/VideoButtons.vue
@@ -1,31 +1,44 @@
 <template>
   <div :class="videoButtonsControlClass">
-    <template v-if="chatStore.showCallManagement && chatStore.isInCall()">
-      <v-btn variant="plain" tile icon :loading="chatStore.initializingVideoCall" @click.stop.prevent="stopCall()" :title="$vuetify.locale.t('$vuetify.leave_call')">
-        <v-icon size="x-large" :class="chatStore.shouldPhoneBlink ? 'call-blink' : 'text-red'">mdi-phone</v-icon>
+    <v-slide-group>
+      <template v-if="chatStore.showCallManagement && chatStore.isInCall()">
+        <v-btn :class="isMobile() ? 'ml-8' : ''" variant="plain" tile icon :loading="chatStore.initializingVideoCall" @click.stop.prevent="stopCall()" :title="$vuetify.locale.t('$vuetify.leave_call')">
+          <v-icon size="x-large" :class="chatStore.shouldPhoneBlink ? 'call-blink' : 'text-red'">mdi-phone</v-icon>
+        </v-btn>
+      </template>
+      <v-btn variant="plain" tile icon v-if="chatStore.canShowMicrophoneButton" @click.stop.prevent="doMuteAudio(!chatStore.localMicrophoneEnabled)" :title="!chatStore.localMicrophoneEnabled ? $vuetify.locale.t('$vuetify.unmute_audio') : $vuetify.locale.t('$vuetify.mute_audio')"><v-icon size="x-large">{{ !chatStore.localMicrophoneEnabled ? 'mdi-microphone-off' : 'mdi-microphone' }}</v-icon></v-btn>
+      <v-btn variant="plain" tile icon v-if="chatStore.canShowVideoButton" @click.stop.prevent="doMuteVideo(!chatStore.localVideoEnabled)" :title="!chatStore.localVideoEnabled ? $vuetify.locale.t('$vuetify.unmute_video') : $vuetify.locale.t('$vuetify.mute_video')"><v-icon size="x-large">{{ !chatStore.localVideoEnabled ? 'mdi-video-off' : 'mdi-video' }} </v-icon></v-btn>
+      <template v-if="!isMobile()">
+        <v-btn variant="plain" tile icon @click.stop.prevent="addScreenSource()" :title="$vuetify.locale.t('$vuetify.screen_share')">
+          <v-icon size="x-large">mdi-monitor-screenshot</v-icon>
+        </v-btn>
+      </template>
+      <v-btn variant="plain" tile icon @click.stop.prevent="onEnterFullscreen" :title="$vuetify.locale.t('$vuetify.fullscreen')"><v-icon size="x-large">mdi-arrow-expand-all</v-icon></v-btn>
+
+      <v-btn :disabled="videoIsGallery()" tile icon :input-value="presenterValue()" @click="presenterClick" :variant="presenterValue() ? 'tonal' : 'plain'" :title="presenterValue() ? $vuetify.locale.t('$vuetify.video_presenter_disable') : $vuetify.locale.t('$vuetify.video_presenter_enable')"><v-icon size="x-large">mdi-presentation</v-icon></v-btn>
+
+      <v-select
+          class="video-position-select"
+          :items="positionItems"
+          density="compact"
+          hide-details
+          @update:modelValue="changeVideoPosition"
+          v-model="chatStore.videoPosition"
+          variant="plain"
+      ></v-select>
+
+      <v-btn variant="plain" tile icon @click="addVideoSource()" :title="$vuetify.locale.t('$vuetify.source_add')">
+        <v-icon size="x-large">mdi-video-plus</v-icon>
       </v-btn>
-    </template>
-    <v-btn variant="plain" tile icon v-if="chatStore.canShowMicrophoneButton" @click.stop.prevent="doMuteAudio(!chatStore.localMicrophoneEnabled)" :title="!chatStore.localMicrophoneEnabled ? $vuetify.locale.t('$vuetify.unmute_audio') : $vuetify.locale.t('$vuetify.mute_audio')"><v-icon size="x-large">{{ !chatStore.localMicrophoneEnabled ? 'mdi-microphone-off' : 'mdi-microphone' }}</v-icon></v-btn>
-    <v-btn variant="plain" tile icon v-if="chatStore.canShowVideoButton" @click.stop.prevent="doMuteVideo(!chatStore.localVideoEnabled)" :title="!chatStore.localVideoEnabled ? $vuetify.locale.t('$vuetify.unmute_video') : $vuetify.locale.t('$vuetify.mute_video')"><v-icon size="x-large">{{ !chatStore.localVideoEnabled ? 'mdi-video-off' : 'mdi-video' }} </v-icon></v-btn>
-    <template v-if="!isMobile()">
-      <v-btn variant="plain" tile icon @click.stop.prevent="addScreenSource()" :title="$vuetify.locale.t('$vuetify.screen_share')">
-        <v-icon size="x-large">mdi-monitor-screenshot</v-icon>
-      </v-btn>
-    </template>
-    <v-btn variant="plain" tile icon @click.stop.prevent="onEnterFullscreen" :title="$vuetify.locale.t('$vuetify.fullscreen')"><v-icon size="x-large">mdi-arrow-expand-all</v-icon></v-btn>
-
-    <v-btn :disabled="videoIsGallery()" tile icon :input-value="presenterValue()" @click="presenterClick" :variant="presenterValue() ? 'tonal' : 'plain'" :title="presenterValue() ? $vuetify.locale.t('$vuetify.video_presenter_disable') : $vuetify.locale.t('$vuetify.video_presenter_enable')"><v-icon size="x-large">mdi-presentation</v-icon></v-btn>
 
-    <v-select
-        class="video-position-select"
-        :items="positionItems"
-        density="compact"
-        hide-details
-        @update:modelValue="changeVideoPosition"
-        v-model="chatStore.videoPosition"
-        variant="plain"
-    ></v-select>
+      <v-btn variant="plain" tile icon v-if="chatStore.showRecordStartButton" @click="startRecord()" :loading="chatStore.initializingStaringVideoRecord" :title="$vuetify.locale.t('$vuetify.start_record')">
+        <v-icon size="x-large">mdi-record-rec</v-icon>
+      </v-btn>
+      <v-btn variant="plain" tile icon v-if="chatStore.showRecordStopButton" @click="stopRecord()" :loading="chatStore.initializingStoppingVideoRecord" :title="$vuetify.locale.t('$vuetify.stop_record')">
+        <v-icon size="x-large" color="red">mdi-stop</v-icon>
+      </v-btn>
 
+    </v-slide-group>
   </div>
 </template>
 
@@ -34,12 +47,13 @@ import {mapStores} from "pinia";
 import {useChatStore} from "@/store/chatStore.js";
 import videoPositionMixin from "@/mixins/videoPositionMixin.js";
 import {stopCall} from "@/utils.js";
-import bus, {ADD_SCREEN_SOURCE} from "@/bus/bus.js";
+import bus, {ADD_SCREEN_SOURCE, ADD_VIDEO_SOURCE_DIALOG} from "@/bus/bus.js";
 import {
   positionItems,
   setStoredPresenter,
   setStoredVideoPosition,
 } from "@/store/localStore.js";
+import axios from "axios";
 
 export default {
   mixins: [
@@ -69,6 +83,9 @@ export default {
     positionItems() {
       return positionItems()
     },
+    chatId() {
+      return this.$route.params.id
+    },
   },
   methods: {
     doMuteAudio(requestedState) {
@@ -99,6 +116,18 @@ export default {
       this.chatStore.presenterEnabled = v;
       setStoredPresenter(v);
     },
+    addVideoSource() {
+      bus.emit(ADD_VIDEO_SOURCE_DIALOG);
+    },
+    startRecord() {
+      axios.put(`/api/video/${this.chatId}/record/start`);
+      this.chatStore.initializingStaringVideoRecord = true;
+    },
+    stopRecord() {
+      axios.put(`/api/video/${this.chatId}/record/stop`);
+      this.chatStore.initializingStoppingVideoRecord = true;
+    },
+
   }
 }
 </script>