(un)pin a video right from presenter

frontend/src/ChatVideo.vue

@@ -1,12 +1,14 @@
 <template>
     <splitpanes ref="splVideo" class="default-theme" :dbl-click-splitter="false" :horizontal="splitpanesIsHorizontal" @resize="onPanelResized($event)" @pane-add="onPanelAdd($event)" @pane-remove="onPanelRemove($event)">
         <pane v-if="shouldShowPresenter" :size="presenterPaneSize()">
-            <div class="video-presenter-container-element">
+            <div class="video-presenter-container-element" @contextmenu.stop="onShowContextMenu($event, this)">
                 <video v-show="!presenterVideoMute || !presenterAvatarIsSet" @click.self="onClick()" class="video-presenter-element" ref="presenterRef"/>
                 <img v-show="presenterAvatarIsSet && presenterVideoMute" @click.self="onClick()" class="video-presenter-element" :src="presenterData?.avatar"/>
                 <p v-bind:class="[speaking ? 'presenter-element-caption-speaking' : '', 'presenter-element-caption', 'inline-caption-base']">{{ presenterData?.userName ? presenterData?.userName : getLoadingMessage() }} <v-icon v-if="presenterAudioMute">mdi-microphone-off</v-icon></p>
 
                 <VideoButtons v-if="!isMobile()" @requestFullScreen="onButtonsFullscreen" v-show="showControls"/>
+
+                <PresenterContextMenu ref="contextMenuRef" :userName="presenterUserName"/>
             </div>
         </pane>
         <pane :class="paneVideoContainerClass"  :size="miniaturesPaneSize()">
@@ -60,6 +62,8 @@ import {largestRect} from "rect-scaler";
 import debounce from "lodash/debounce";
 import VideoButtons from "./VideoButtons.vue"
 import speakingMixin from "@/mixins/speakingMixin.js";
+import PresenterContextMenu from "@/PresenterContextMenu.vue";
+import UserVideoContextMenu from "@/UserVideoContextMenu.vue";
 
 const first = 'first';
 const second = 'second';
@@ -876,6 +880,12 @@ export default {
         this.$refs.splVideo.panes[0].size = 100;
       }
     },
+    onShowContextMenu(e, menuableItem) {
+      this.$refs.contextMenuRef.onShowContextMenu(e, menuableItem);
+    },
+    getPresenterVideoStreamId() {
+      return this.presenterData?.videoStream.trackSid
+    },
   },
   computed: {
     ...mapStores(useChatStore),
@@ -906,11 +916,16 @@ export default {
     presenterAvatarIsSet() {
       return hasLength(this.presenterData?.avatar);
     },
+    presenterUserName() {
+      return this.presenterData?.userName
+    }
   },
   components: {
+    UserVideoContextMenu,
       Splitpanes,
       Pane,
       VideoButtons,
+      PresenterContextMenu,
   },
   watch: {
     'chatStore.videoPosition': {

frontend/src/PresenterContextMenu.vue

@@ -0,0 +1,103 @@
+<template>
+    <v-menu
+        :class="className()"
+        :model-value="showContextMenu"
+        :transition="false"
+        :open-on-click="false"
+        :open-on-focus="false"
+        :open-on-hover="false"
+        :open-delay="0"
+        :close-delay="0"
+        :close-on-back="false"
+        @update:modelValue="onUpdate"
+    >
+        <v-list>
+            <v-list-item
+                v-for="(item, index) in getContextMenuItems()"
+                :key="index"
+                @click="item.action"
+                :disabled="!item.enabled"
+            >
+              <template v-slot:prepend>
+                <v-icon v-if="item.icon" :color="item.iconColor">
+                  {{item.icon}}
+                </v-icon>
+              </template>
+              <template v-slot:title>{{ item.title }}</template>
+            </v-list-item>
+        </v-list>
+    </v-menu>
+</template>
+
+<script>
+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";
+
+export default {
+    mixins: [
+      contextMenuMixin(),
+    ],
+    computed: {
+        ...mapStores(useChatStore),
+    },
+    props: [
+        'userName'
+    ],
+    methods:{
+        className() {
+            return "presenter-context-menu"
+        },
+        onShowContextMenu(e, menuableItem) {
+          this.onShowContextMenuBase(e, menuableItem);
+        },
+        onCloseContextMenu() {
+          this.onCloseContextMenuBase();
+        },
+        getContextMenuItems() {
+            const ret = [];
+            if (this.menuableItem) {
+                ret.push({
+                  title: this.userName,
+                  action: () => { },
+                  enabled: false,
+                });
+
+                if (this.isMobile()) {
+                    ret.push({
+                        title: this.$vuetify.locale.t('$vuetify.close'),
+                        icon: 'mdi-close',
+                        action: () => {
+                            this.onCloseContextMenu()
+                        },
+                        enabled: true,
+                    });
+                }
+
+                if (!this.chatStore.pinnedTrackSid) {
+                  ret.push({
+                    title: this.$vuetify.locale.t('$vuetify.pin_video'),
+                    icon: 'mdi-pin',
+                    action: () => {
+                      bus.emit(PIN_VIDEO, this.menuableItem.getPresenterVideoStreamId())
+                    },
+                    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;
+        },
+    }
+}
+</script>