basic video pinning

nkonev · Dec 25, 2024 · e884bf3 · e884bf3
1 parent af74d5e
commit e884bf3
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 7 deletions.
diff --git a/frontend/src/ChatVideo.vue b/frontend/src/ChatVideo.vue
@@ -43,10 +43,10 @@ import {
   setStoredCallVideoDeviceId,
 } from "@/store/localStore";
 import bus, {
-    ADD_SCREEN_SOURCE,
-    ADD_VIDEO_SOURCE, CHANGE_VIDEO_SOURCE,
-    REQUEST_CHANGE_VIDEO_PARAMETERS,
-    VIDEO_PARAMETERS_CHANGED
+  ADD_SCREEN_SOURCE,
+  ADD_VIDEO_SOURCE, CHANGE_VIDEO_SOURCE, PIN_VIDEO,
+  REQUEST_CHANGE_VIDEO_PARAMETERS, UN_PIN_VIDEO,
+  VIDEO_PARAMETERS_CHANGED
 } from "@/bus/bus";
 import {chat_name, videochat_name} from "@/router/routes";
 import videoServerSettingsMixin from "@/mixins/videoServerSettingsMixin";
@@ -235,6 +235,9 @@ export default {
       if (!pub) {
         return -1
       }
+      if (pub.trackSid === this.chatStore.pinnedTrackSid) {
+        return 5
+      }
       for (const t of this.room.localParticipant.getTrackPublications().values()) {
         if (t.trackSid === pub.trackSid)  {
           return 0
@@ -249,7 +252,15 @@ export default {
             return 1
       }
     },
-    // TODO pin to presenter an element from UserVideo
+    onPinVideo(trackSid) {
+      console.log("pinning", trackSid);
+      this.chatStore.pinnedTrackSid = trackSid;
+      this.electNewPresenter();
+    },
+    onUnpinVideo(){
+      this.chatStore.pinnedTrackSid = null;
+      this.electNewPresenter();
+    },
     // TODO think how to reuse the presenter mode with egress
     detachPresenter() {
       if (this.presenterData) {
@@ -1006,6 +1017,8 @@ export default {
     bus.on(ADD_SCREEN_SOURCE, this.onAddScreenSource);
     bus.on(REQUEST_CHANGE_VIDEO_PARAMETERS, this.tryRestartVideoDevice);
     bus.on(CHANGE_VIDEO_SOURCE, this.onChangeVideoSource);
+    bus.on(PIN_VIDEO, this.onPinVideo);
+    bus.on(UN_PIN_VIDEO, this.onUnpinVideo);
 
     window.addEventListener("resize", this.recalculateLayout);
 
@@ -1044,6 +1057,8 @@ export default {
     this.chatStore.initializingStaringVideoRecord = false;
     this.chatStore.initializingStoppingVideoRecord = false;
 
+    this.chatStore.pinnedTrackSid = null;
+
     this.chatStore.videoTokenId = null;
 
     this.chatStore.setCallStateReady();
@@ -1054,6 +1069,8 @@ export default {
     bus.off(ADD_SCREEN_SOURCE, this.onAddScreenSource);
     bus.off(REQUEST_CHANGE_VIDEO_PARAMETERS, this.tryRestartVideoDevice);
     bus.off(CHANGE_VIDEO_SOURCE, this.onChangeVideoSource);
+    bus.off(PIN_VIDEO, this.onPinVideo);
+    bus.off(UN_PIN_VIDEO, this.onUnpinVideo);
   },
 }
 

diff --git a/frontend/src/UserVideoContextMenu.vue b/frontend/src/UserVideoContextMenu.vue
@@ -33,10 +33,13 @@
 import contextMenuMixin from "@/mixins/contextMenuMixin";
 import {mapStores} from "pinia";
 import {useChatStore} from "@/store/chatStore";
+import bus, {PIN_VIDEO, UN_PIN_VIDEO} from "@/bus/bus.js";
+import videoPositionMixin from "@/mixins/videoPositionMixin.js";
 
 export default {
     mixins: [
       contextMenuMixin(),
+      videoPositionMixin(),
     ],
     computed: {
         ...mapStores(useChatStore),
@@ -146,6 +149,28 @@ export default {
                   enabled: true,
                 });
               }
+
+              if (this.chatStore.presenterEnabled && this.isPresenterEnabled()) {
+                if (!this.chatStore.pinnedTrackSid) {
+                  ret.push({
+                    title: this.$vuetify.locale.t('$vuetify.pin_video'),
+                    icon: 'mdi-pin',
+                    action: () => {
+                      bus.emit(PIN_VIDEO, this.menuableItem.getVideoStreamId())
+                    },
+                    enabled: true,
+                  });
+                } else {
+                  ret.push({
+                    title: this.$vuetify.locale.t('$vuetify.unpin_video'),
+                    icon: 'mdi-pin-off-outline',
+                    action: () => {
+                      bus.emit(UN_PIN_VIDEO)
+                    },
+                    enabled: true,
+                  });
+                }
+              }
             }
             return ret;
         },

diff --git a/frontend/src/bus/bus.js b/frontend/src/bus/bus.js
@@ -127,3 +127,5 @@ export const ON_MESSAGE_EDIT_SEND_BUTTONS_TYPE_CHANGED = "onMessageEditSendButto
 export const OPEN_RECORDING_MODAL = "openRecordingModal";
 
 export const MESSAGES_RELOAD = "messagesReload";
+export const PIN_VIDEO = "pinVideo";
+export const UN_PIN_VIDEO = "unPinVideo";
diff --git a/frontend/src/locale/en.js b/frontend/src/locale/en.js
@@ -322,5 +322,7 @@ export default {
     set_password: "Set password",
     video_presenter_enable: "Enable presenter",
     close_video: "Close video",
-    video_presenter_disable: "Disable presenter"
+    video_presenter_disable: "Disable presenter",
+    pin_video: "Pin video",
+    unpin_video: "Unpin video"
 }
diff --git a/frontend/src/locale/ru.js b/frontend/src/locale/ru.js
@@ -322,5 +322,7 @@ export default {
     set_password: "Задать пароль",
     video_presenter_enable: "Включить презентатор",
     close_video: "Закрыть видео",
-    video_presenter_disable: "Выключить презентатор"
+    video_presenter_disable: "Выключить презентатор",
+    pin_video: "Закрепить видео",
+    unpin_video: "Открепить видео"
 }
diff --git a/frontend/src/store/chatStore.js b/frontend/src/store/chatStore.js
@@ -74,6 +74,7 @@ export const useChatStore = defineStore('chat', {
         compactMessages: false,
         videoPosition: null,
         presenterEnabled: false,
+        pinnedTrackSid: null,
     }
   },
   actions: {