Initial snackbar for calling

frontend2/src/App.vue

@@ -104,6 +104,15 @@
 
             </template>
           </v-snackbar>
+          <v-snackbar v-model="invitedVideoChatAlert" color="success" timeout="-1" :multi-line="true" :transition="false">
+            <span class="call-blink">
+                {{ $vuetify.locale.t('$vuetify.you_called', invitedVideoChatId, invitedVideoChatName) }}
+            </span>
+            <template v-slot:actions>
+              <v-btn icon size="x-large" @click="onClickInvitation()"><v-icon size="x-large" color="white">mdi-phone</v-icon></v-btn>
+              <v-btn icon size="x-large" @click="onClickCancelInvitation()"><v-icon size="x-large" color="white">mdi-close-circle</v-icon></v-btn>
+            </template>
+          </v-snackbar>
 
 
           <router-view />
@@ -147,11 +156,26 @@ import axios from "axios";
 import bus, {
   CHAT_ADD,
   CHAT_DELETED,
-  CHAT_EDITED, FOCUS,
-  LOGGED_OUT, NOTIFICATION_ADD, NOTIFICATION_DELETE, OPEN_FILE_UPLOAD_MODAL, OPEN_PARTICIPANTS_DIALOG, PLAYER_MODAL,
-  PROFILE_SET, REFRESH_ON_WEBSOCKET_RESTORED,
-  SCROLL_DOWN, UNREAD_MESSAGES_CHANGED, USER_PROFILE_CHANGED, VIDEO_CALL_INVITED, VIDEO_CALL_SCREEN_SHARE_CHANGED,
-  VIDEO_CALL_USER_COUNT_CHANGED, VIDEO_DIAL_STATUS_CHANGED, VIDEO_RECORDING_CHANGED, WEBSOCKET_RESTORED,
+  CHAT_EDITED,
+  FOCUS,
+  LOGGED_OUT,
+  NOTIFICATION_ADD,
+  NOTIFICATION_DELETE,
+  OPEN_FILE_UPLOAD_MODAL,
+  OPEN_PARTICIPANTS_DIALOG,
+  OPEN_PERMISSIONS_WARNING_MODAL,
+  PLAYER_MODAL,
+  PROFILE_SET,
+  REFRESH_ON_WEBSOCKET_RESTORED,
+  SCROLL_DOWN,
+  UNREAD_MESSAGES_CHANGED,
+  USER_PROFILE_CHANGED,
+  VIDEO_CALL_INVITED,
+  VIDEO_CALL_SCREEN_SHARE_CHANGED,
+  VIDEO_CALL_USER_COUNT_CHANGED,
+  VIDEO_DIAL_STATUS_CHANGED,
+  VIDEO_RECORDING_CHANGED,
+  WEBSOCKET_RESTORED,
 } from "@/bus/bus";
 import LoginModal from "@/LoginModal.vue";
 import {useChatStore} from "@/store/chatStore";
@@ -181,6 +205,12 @@ import PlayerModal from "@/PlayerModal.vue";
 import ChatEditModal from "@/ChatEditModal.vue";
 import {once} from "lodash/function";
 
+const reactOnAnswerThreshold = 3 * 1000; // ms
+const audio = new Audio("/call.mp3");
+const invitedVideoChatAlertTimeout = reactOnAnswerThreshold;
+
+let invitedVideoChatAlertTimer;
+
 const getGlobalEventsData = (message) => {
   return message.data?.globalEvents
 };
@@ -195,6 +225,9 @@ export default {
             lastAnswered: 0,
             showSearchButton: true,
             showWebsocketRestored: false,
+            invitedVideoChatId: 0,
+            invitedVideoChatName: null,
+            invitedVideoChatAlert: false,
         }
     },
     computed: {
@@ -478,6 +511,45 @@ export default {
           this.showWebsocketRestored = false;
           bus.emit(REFRESH_ON_WEBSOCKET_RESTORED);
         },
+        onVideoCallInvited(data) {
+          if ((+new Date() - this.lastAnswered) > reactOnAnswerThreshold) {
+            this.invitedVideoChatId = data.chatId;
+            this.invitedVideoChatName = data.chatName;
+            this.invitedVideoChatAlert = true;
+
+            // restart the timer
+            if (invitedVideoChatAlertTimer) {
+              clearInterval(invitedVideoChatAlertTimer);
+            }
+            // set auto-close snackbar
+            invitedVideoChatAlertTimer = setTimeout(()=>{
+              this.invitedVideoChatAlert = false;
+              invitedVideoChatAlertTimer = null;
+            }, invitedVideoChatAlertTimeout);
+
+            audio.play().catch(error => {
+              console.warn("Unable to play sound", error);
+              bus.emit(OPEN_PERMISSIONS_WARNING_MODAL);
+            })
+          }
+        },
+        onClickInvitation() {
+          axios.put(`/api/video/${this.invitedVideoChatId}/dial/cancel`).then(()=>{
+            const routerNewState = { name: videochat_name, params: { id: this.invitedVideoChatId }};
+            goToPreserving(this.$route, this.$router, routerNewState);
+            this.invitedVideoChatId = 0;
+            this.invitedVideoChatName = null;
+            this.invitedVideoChatAlert = false;
+            this.updateLastAnsweredTimestamp();
+          });
+        },
+        onClickCancelInvitation() {
+          axios.put(`/api/video/${this.invitedVideoChatId}/dial/cancel`).then(()=>{
+            this.invitedVideoChatAlert = false;
+            this.updateLastAnsweredTimestamp();
+          });
+        },
+
     },
     components: {
         ChatEditModal,
@@ -502,11 +574,11 @@ export default {
         bus.on(PROFILE_SET, this.onProfileSet);
         bus.on(LOGGED_OUT, this.onLoggedOut);
         bus.on(WEBSOCKET_RESTORED, this.onWsRestored);
+        bus.on(VIDEO_CALL_INVITED, this.onVideoCallInvited);
 
         addEventListener("focus", this.onFocus);
 
         this.afterRouteInitialized = once(this.afterRouteInitialized);
-
         this.$router.afterEach((to, from) => {
             this.afterRouteInitialized()
         })
@@ -520,6 +592,7 @@ export default {
         bus.off(PROFILE_SET, this.onProfileSet);
         bus.off(LOGGED_OUT, this.onLoggedOut);
         bus.off(WEBSOCKET_RESTORED, this.onWsRestored);
+        bus.off(VIDEO_CALL_INVITED, this.onVideoCallInvited);
     },
 
     watch: {

frontend2/src/PermissionsWarningModal.vue

@@ -0,0 +1,39 @@
+<template>
+    <v-row justify="center">
+        <v-dialog v-model="show" max-width="640" persistent>
+            <v-card :title="$vuetify.locale.t('$vuetify.audio_autoplay_permissions_title')">
+                <v-card-text>{{ $vuetify.locale.t('$vuetify.audio_autoplay_permissions_text') }}</v-card-text>
+
+                <v-card-actions class="pa-4">
+                    <v-btn class="mr-4" @click="show=false">
+                        {{ $vuetify.locale.t('$vuetify.close') }}
+                    </v-btn>
+                    <v-spacer/>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </v-row>
+</template>
+
+<script>
+    import bus, {OPEN_PERMISSIONS_WARNING_MODAL} from "./bus/bus";
+
+    export default {
+        data () {
+            return {
+                show: false,
+            }
+        },
+        methods: {
+            showModal() {
+                this.$data.show = true;
+            },
+        },
+        mounted() {
+            bus.on(OPEN_PERMISSIONS_WARNING_MODAL, this.showModal);
+        },
+        beforeUnmount() {
+            bus.off(OPEN_PERMISSIONS_WARNING_MODAL, this.showModal);
+        },
+    }
+</script>

frontend2/src/bus/bus.js

@@ -99,3 +99,4 @@ export const ADD_SCREEN_SOURCE = "addScreenSource";
 export const SET_LOCAL_MICROPHONE_MUTED = "setLocalMicrophoneMuted";
 
 export const REFRESH_ON_WEBSOCKET_RESTORED = "refreshOnWsRestored";
+export const OPEN_PERMISSIONS_WARNING_MODAL = "openPermissionsWarningModal";