Added support for LobbyCalls.

app/HttpModels/MeetingWithLobbyModel.php

@@ -12,7 +12,10 @@ class MeetingWithLobbyModel extends MeetingModel {
     {
         parent::__construct($meeting);
 
-        $this->lobby = new ClientLobbyModel($meeting->lobby);
+        if ($meeting->lobby_id)
+        {
+            $this->lobby = new ClientLobbyModel($meeting->lobby);
+        }
         if ($meeting->target_lobby_pro_id)
             $this->targetPro = new LobbyProModel($meeting->targetLobbyPro->pro);
     }

resources/js/components/pages/MeetingsAppRoot.vue

@@ -1,53 +1,55 @@
 <template>
-    <v-app>
-        <v-expansion-panels v-model="active_panel" tile hover multiple>
-            <v-expansion-panel class="no-v-padding">
-                <v-expansion-panel-header>Lobby List</v-expansion-panel-header>
-                <v-expansion-panel-content>
-                    <lobby-list></lobby-list>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-
-            <v-expansion-panel class="no-v-padding">
-                <v-expansion-panel-header>
-                    <span>Meeting Room</span>
-                    <v-spacer></v-spacer>
-                    <v-btn :disabled="meetingLoading" v-if="meeting.uid" color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
-                </v-expansion-panel-header>
-                <v-expansion-panel-content>
-                    <meeting-room></meeting-room>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-
-            <v-expansion-panel>
-                <v-expansion-panel-header>Messenger</v-expansion-panel-header>
-                <v-expansion-panel-content>
-                    <messenger></messenger>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-
-            <v-expansion-panel>
-                <v-expansion-panel-header>Settings</v-expansion-panel-header>
-                <v-expansion-panel-content>
-                    <settings></settings>
-                </v-expansion-panel-content>
-            </v-expansion-panel>
-        </v-expansion-panels>
+    <div>
+        <v-app>
+            <v-expansion-panels v-model="active_panel" tile hover multiple>
+                <v-expansion-panel class="no-v-padding">
+                    <v-expansion-panel-header>Lobby List</v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <lobby-list></lobby-list>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+
+                <v-expansion-panel class="no-v-padding">
+                    <v-expansion-panel-header>
+                        <span>Meeting Room</span>
+                        <v-spacer></v-spacer>
+                        <v-btn :disabled="meetingLoading" v-if="meeting.uid" color="purple" small ripple outlined class="mr-3" @click.stop="leaveMeeting">Leave</v-btn>
+                    </v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <meeting-room></meeting-room>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+
+                <v-expansion-panel>
+                    <v-expansion-panel-header>Messenger</v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <messenger></messenger>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+
+                <v-expansion-panel>
+                    <v-expansion-panel-header>Settings</v-expansion-panel-header>
+                    <v-expansion-panel-content>
+                        <settings></settings>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-app>
         <call-bubble></call-bubble>
-    </v-app>
+    </div>
 </template>
 
 <script>
-import { mapState } from "vuex"
-import VueSocketIO from "vue-socket.io"
-import SocketIO from "socket.io-client"
+import { mapState } from "vuex";
+import VueSocketIO from "vue-socket.io";
+import SocketIO from "socket.io-client";
 
 Vue.use(
     new VueSocketIO({
         debug: true,
         connection: SocketIO(process.env.MIX_SOCKET_SERVICE_URL)
     })
-)
+);
 
 export default {
     props: {
@@ -63,7 +65,7 @@ export default {
         return {
             active_panel: [0, 1, 2],
             lobbies_: []
-        }
+        };
     },
     computed: {
         ...mapState(["user", "meeting", "lobbies", "meetingLoading"])
@@ -72,13 +74,13 @@ export default {
         meeting: {
             handler(newVal, oldVal) {
                 if (oldVal && oldVal.uid) {
-                    this.$socket.emit("meetingLeft", { lobby_uid: oldVal.lobby_uid, meeting_name: oldVal.name, meeting_uid: oldVal.uid, user: this.user })
+                    this.$socket.emit("meetingLeft", { lobby_uid: oldVal.lobby_uid, meeting_name: oldVal.name, meeting_uid: oldVal.uid, user: this.user });
                 }
 
                 if (newVal && newVal.uid) {
-                    this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user })
+                    this.$socket.emit("meetingJoined", { lobby_uid: newVal.lobby_uid, meeting_name: newVal.name, meeting_uid: newVal.uid, user: this.user });
 
-                    this.$eventBus.$emit("updateMeetingMessages")
+                    this.$eventBus.$emit("updateMeetingMessages");
                     /* axios
                         .get(`/meeting/${this.meeting.id}/messages`)
                         .then(response => {
@@ -108,110 +110,118 @@ export default {
         }
     },
     sockets: {
-        incomingCall: function(data){
-            let self = this
+        incomingCall: function(data) {
+            let self = this;
 
-            this.$store.commit('setCall', data)
+            this.$store.commit("setCall", data);
+        },
+        stopRing() {
+            this.$store.commit("rejectCall");
         },
-        disconnect: function(){
-            this.$store.commit("nullifyMeetingsOnline")
+        disconnect: function() {
+            this.$store.commit("nullifyMeetingsOnline");
         },
-        reconnect: function(){
+        reconnect: function() {
             this.$socket.emit("userData", {
                 user: this.user,
                 meeting: this.meeting,
-                lobbies_uid_list: this.lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
-            })
+                lobbies_uid_list: this.lobbies.reduce((acc, cur) => {
+                    return [...acc, cur.uid];
+                }, [])
+            });
 
             if (this.meeting.uid) {
-                this.$socket.emit("meetingJoined", { lobby_uid: this.meeting.lobby_uid, meeting_uid: this.meeting.uid, user: this.user })
+                this.$socket.emit("meetingJoined", { lobby_uid: this.meeting.lobby_uid, meeting_uid: this.meeting.uid, user: this.user });
             }
         },
-        'call-data': function(data){
-            if(data.callData && data.state == null){
-                this.$store.commit("setCall", data.callData)
+        "call-data": function(data) {
+            if (data.callData && data.state == null) {
+                this.$store.commit("setCall", data.callData);
             }
 
-            this.$socket.emit("lobbyDataRequest")
+            this.$socket.emit("lobbyDataRequest");
         },
-        'lobby-data': function(data){
+        "lobby-data": function(data) {
             for (let meeting of data.meetings) {
-                this.$store.commit("setLobbyActivity", meeting)
+                this.$store.commit("setLobbyActivity", meeting);
             }
         },
 
         /* Meeting Handlers */
 
-        'meeting-activity': function(data){
-            this.$store.commit("setLobbyActivity", data)
+        "meeting-activity": function(data) {
+            console.log(data);
+            this.$store.commit("setLobbyActivity", data);
         },
-        'meeting-created': function(data){
-            this.$store.commit("addNewMeetingInLobby", data)
+        "meeting-created": function(data) {
+            this.$store.commit("addNewMeetingInLobby", data);
         },
-        'meeting-updated': function(data){
-            this.$store.commit("setUpdatedMeetingInLobby", data)
+        "meeting-updated": function(data) {
+            this.$store.commit("setUpdatedMeetingInLobby", data);
         },
-        'meeting-closed': function(data){
+        "meeting-closed": function(data) {
             this.$store.dispatch("leaveMeeting");
         },
 
         /* Lobby Handlers */
 
-        'lobby-updated': function(data){
-            this.$store.commit("updateLobby", data)
+        "lobby-updated": function(data) {
+            this.$store.commit("updateLobby", data);
         },
-        'lobby-activated': function(data){
-            this.$store.commit("activateLobby", data)
+        "lobby-activated": function(data) {
+            this.$store.commit("activateLobby", data);
         },
-        'lobby-deactivated': function(data){
-            this.$store.commit("deactivateLobby", data)
+        "lobby-deactivated": function(data) {
+            this.$store.commit("deactivateLobby", data);
         },
-        'lobby-created-for-pro': function(data){
-            this.$store.commit("addNewLobby", data)
+        "lobby-created-for-pro": function(data) {
+            this.$store.commit("addNewLobby", data);
         }
     },
     methods: {
-        leaveMeeting(){
-            this.$eventBus.$emit('leaveMeeting')
+        leaveMeeting() {
+            this.$eventBus.$emit("leaveMeeting");
         }
     },
     mounted() {
-        let lobbies = this.userProp.lobbies
-        delete this.userProp.lobbies
+        let lobbies = this.userProp.lobbies;
+        delete this.userProp.lobbies;
 
         lobbies.map(lobby => {
-            lobby.selected_meeting = null
+            lobby.selected_meeting = null;
             lobby.meetings.map(meeting => {
-                meeting.active_members = []
-                meeting.pros_online = []
-            })
-        })
+                meeting.active_members = [];
+                meeting.pros_online = [];
+            });
+        });
 
         if (this.meetingProp) {
             let meeting = {
                 uid: this.meetingProp.uid,
-                lobby_uid: this.meetingProp.lobby.uid,
+                lobby_uid: this.meetingProp.lobby ? this.meetingProp.lobby.uid : null,
                 name: this.meetingProp.name,
                 active_members: [],
                 pros_online: []
-            }
-            this.$store.commit("setCurrentMeeting", meeting)
+            };
+            this.$store.commit("setCurrentMeeting", meeting);
         }
 
         this.$socket.emit("userData", {
             user: this.userProp,
             meeting: this.meeting,
-            lobbies_uid_list: lobbies.reduce((acc, cur) => { return [...acc, cur.uid] }, [])
-        })
+            lobbies_uid_list: lobbies.reduce((acc, cur) => {
+                return [...acc, cur.uid];
+            }, [])
+        });
 
-        this.$store.commit("setInitialUser", this.userProp)
-        this.$store.commit("setLobbies", lobbies)
+        this.$store.commit("setInitialUser", this.userProp);
+        this.$store.commit("setLobbies", lobbies);
     }
-}
+};
 </script>
 
 <style>
 .v-expansion-panel-content__wrap {
-    padding: 24px 16px
+    padding: 24px 16px;
 }
 </style>

resources/js/components/partials/LobbyList.vue

@@ -97,20 +97,20 @@ export default {
     },
     methods: {
         meetingListFiltered(lobby) {
-            let visibilityLevel = lobby.lobbyProAccessLevel
-            let meetings = lobby.meetings
+            let visibilityLevel = lobby.lobbyProAccessLevel;
+            let meetings = lobby.meetings;
 
-            if(!visibilityLevel){
-                return []
+            if (!visibilityLevel) {
+                return [];
             }
 
-            switch(visibilityLevel){
-                case 'FREE_FOR_ALL':
-                    return meetings.filter(x => x.active_members.length > 0)
-                case 'VISIBLE_IF_UNATTENDED':
-                    return meetings.filter(x => x.active_members.length > 0 && (x.pros_online.length == 0 || x.pros_online.findIndex(y => y.uid == this.user.uid) !== -1))
-                case 'SYSTEM_CONTROLLED_BY_LOBBY_CALL':
-                    return []
+            switch (visibilityLevel) {
+                case "FREE_FOR_ALL":
+                    return meetings.filter(x => x.active_members.length > 0);
+                case "VISIBLE_IF_UNATTENDED":
+                    return meetings.filter(x => x.active_members.length > 0 && (x.pros_online.length == 0 || x.pros_online.findIndex(y => y.uid == this.user.uid) !== -1));
+                case "SYSTEM_CONTROLLED_BY_LOBBY_CALL":
+                    return [];
             }
         },
         joinMeeting(lobby) {
@@ -132,7 +132,7 @@ export default {
                         return;
                     }
                     if (this.meeting.uid === lobby.selected_meeting.uid) {
-                        this.$eventBus.$emit("meetingRejoin")
+                        this.$eventBus.$emit("meetingRejoin");
                     } else {
                         lobby.selected_meeting.lobby = lobby.name;
                         this.$store.commit("setCurrentMeeting", { lobby_uid: lobby.uid, lobby_name: lobby.name, ...lobby.selected_meeting });
@@ -170,12 +170,12 @@ export default {
             });
         }
     },
-    mounted(){
-        let self = this
+    mounted() {
+        let self = this;
 
-        this.$eventBus.$on('joinMeeting', function(data){
-            self.joinMeeting(data)
-        })
+        this.$eventBus.$on("joinMeeting", function(data) {
+            self.joinMeeting(data);
+        });
     }
 };
 </script>

resources/js/components/partials/MeetingRoom.vue

@@ -316,7 +316,7 @@ export default {
                     this.$store.commit("setSessionConnectivityState", true);
                 }
             });
-            this.$store.commit('setMeetingLoadingState', false)
+            this.$store.commit("setMeetingLoadingState", false);
         },
         publishToSession() {
             this.openTokSession.publish(this.publisher, error => {
@@ -429,12 +429,12 @@ export default {
         },
         "meeting.uid"(val) {
             if (this.meetingLoading) return;
-            this.$store.commit('setMeetingLoadingState', true)
+            this.$store.commit("setMeetingLoadingState", true);
             if (val) {
                 this.getToken();
             } else {
-                this.disconnect()
-                this.$store.commit('setMeetingLoadingState', false)
+                this.disconnect();
+                this.$store.commit("setMeetingLoadingState", false);
             }
         }
     },
@@ -443,7 +443,7 @@ export default {
 
         this.$eventBus.$on("screenShare", this.shareScreen);
         this.$eventBus.$on("meetingRejoin", () => {
-            this.$store.commit('setMeetingLoadingState', true)
+            this.$store.commit("setMeetingLoadingState", true);
             this.disconnect();
             this.getToken({}, true);
         });

resources/js/components/vuex/index.js

@@ -66,7 +66,7 @@ export default () => new Vuex.Store({
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
             if (lobby.length) {
-                for(let prop in data){
+                for (let prop in data) {
                     lobby[0][prop] = data[prop]
                 }
             }
@@ -74,19 +74,20 @@ export default () => new Vuex.Store({
         activateLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
-            if(lobby.length){
+            if (lobby.length) {
                 lobby.isActive = true
             }
         },
         deactivateLobby(state, data) {
             let lobby = state.lobbies.filter((cur) => cur.uid == data.uid)
 
-            if(lobby.length){
+            if (lobby.length) {
                 lobby.isActive = false
             }
         },
 
         setLobbyActivity(state, data) {
+            if (!data || !data.lobby_uid) return
             let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby_uid)
             if (lobby.length) {
                 let meeting = lobby[0].meetings.filter((cur) => cur.uid == data.meeting_uid)
@@ -99,8 +100,8 @@ export default () => new Vuex.Store({
                         state.meeting.active_members = data.active_members
                     }
 
-                    if(state.callWidget.callInfo.meeting_uid == meeting[0].uid){
-                        if(!meeting[0].active_members.length || meeting[0].pros_online.findIndex((x) => x.uid == state.user.uid) !== -1){
+                    if (state.callWidget.callInfo.meeting_uid == meeting[0].uid) {
+                        if (!meeting[0].active_members.length || meeting[0].pros_online.findIndex((x) => x.uid == state.user.uid) !== -1) {
                             state.callWidget.active = false
                         } else {
                             state.callWidget.active = true
@@ -114,6 +115,7 @@ export default () => new Vuex.Store({
 
         addNewMeetingInLobby(state, data) {
             console.log(data)
+            if (!data.lobby) return
             let lobby = state.lobbies.filter((cur) => cur.uid == data.lobby.uid)
 
             if (lobby.length) {
@@ -132,8 +134,8 @@ export default () => new Vuex.Store({
             if (lobby.length) {
                 let meeting = lobby[0].meetings.filter((cur) => cur.uid == data.uid)
 
-                if(meeting.length){
-                    for(let prop in data){
+                if (meeting.length) {
+                    for (let prop in data) {
                         meeting[0][prop] = data[prop]
                     }
                 }
@@ -152,7 +154,7 @@ export default () => new Vuex.Store({
 
             state.callWidget.active = false
         },
-        setMeetingLoadingState(state, data){
+        setMeetingLoadingState(state, data) {
             state.meetingLoading = data
         },
 
@@ -161,22 +163,45 @@ export default () => new Vuex.Store({
         setCall(state, data) {
             state.callWidget.callInfo = data
 
-            if(state.callWidget.callInfo.time_limit){
-                let timer = setInterval(() => {
+            if (state.callWidget.callInfo.time_limit) {
+                state.callWidget.timer = setInterval(() => {
                     if (state.callWidget.callInfo.time_limit > 0) {
                         state.callWidget.callInfo.time_limit--
 
                         if (state.callWidget.callInfo.time_limit == 0) {
-                            clearInterval(timer)
+                            clearInterval(state.callWidget.timer)
+                            state.callWidget.timer = null
                             console.log('TIME IS OUT!')
+                            this.$socket.emit("callDecision", {
+                                accepted: false,
+                                ring_uid: state.callWidget.callInfo.ring_uid,
+                                lobby_call_uid: state.callWidget.callInfo.lobby_call_uid
+                            });
+                            $.ajax({
+                                url: "/post-to-api-ajax",
+                                method: "POST",
+                                headers: {
+                                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
+                                },
+                                data: {
+                                    _api: "/api/meetingRing/ringNoAnswer",
+                                    uid: state.callWidget.callInfo.ring_uid
+                                },
+                                error: (jXhr) => console.log(jXhr)
+                            })
                         }
                     }
                 }, 1000)
             }
+
+            if (data.lobby_call_uid)
+                state.callWidget.active = true
         },
         rejectCall(state) {
             state.callWidget.active = false
             state.callWidget.callInfo = {}
+            if (state.callWidget.timer)
+                clearInterval(timer)
         },
         setSessionConnectivityState(state, data) {
             state.session.sessionConnected = data

resources/js/components/widgets/CallBubble.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-btn
+    <v-btn
         color="pink"
         class="callBtn"
         :class="{'showingAll': showCalleeDetails, 'active': (callWidget.active && callWidget.callInfo && (callWidget.callInfo.time_limit > 0 || callWidget.callInfo.time_limit == null))}"
@@ -9,7 +9,7 @@
         right
         ripple
         @click="shiftForm"
-        >
+    >
         <div v-if="callWidget.active">
             <div class="d-flex flex-row align-items-center btnHeader">
                 <v-icon>mdi-video</v-icon>
@@ -35,13 +35,9 @@
                 </div>
 
                 <div class="d-flex flex-row justify-content-between mt-5 ctrlBtns">
-                    <span @click="handleCall(true)">
-                        Accept
-                    </span>
+                    <span @click="handleCall(true)">Accept</span>
                     /
-                    <span @click="handleCall(false)">
-                        Reject
-                    </span>
+                    <span @click="handleCall(false)">Reject</span>
                 </div>
             </div>
         </div>
@@ -49,151 +45,205 @@
 </template>
 
 <script>
-import { mapState } from "vuex"
+import { mapState } from "vuex";
 
 export default {
-    data(){
+    data() {
         return {
             showCalleeDetails: false
-        }
+        };
     },
     computed: {
-        ...mapState(["lobbies","settings", "callWidget"]),
+        ...mapState(["lobbies", "settings", "callWidget"])
     },
     watch: {
-        'callWidget.active': {
-            handler(newVal){
-                if(!newVal){
-                    let self = this
+        "callWidget.active": {
+            handler(newVal) {
+                if (!newVal) {
+                    let self = this;
 
                     setTimeout(() => {
-                        self.showCalleeDetails = false
-                    }, 750)
+                        self.showCalleeDetails = false;
+                    }, 750);
                 }
             }
         }
     },
     methods: {
         handleCall(acceptCall) {
-            if(acceptCall){
-                this.$socket.emit('callDecision', true)
-                let lobby_data = {}
-                let meeting = []
-
-                for(let lobby of this.lobbies){
-                    meeting = lobby.meetings.filter((x) => x.uid == this.callWidget.callInfo.meeting_uid)
-
-                    if(meeting.length){
-                        lobby_data = {
-                            name: lobby.name,
-                            uid: lobby.uid
+            if (acceptCall) {
+                this.$socket.emit("callDecision", {
+                    accepted: true,
+                    ring_uid: this.callWidget.callInfo.ring_uid,
+                    lobby_call_uid: this.callWidget.callInfo.lobby_call_uid
+                });
+
+                if (this.callWidget.callInfo.ring_uid) {
+                    $.ajax({
+                        url: "/post-to-api-ajax",
+                        method: "POST",
+                        headers: {
+                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
+                        },
+                        data: {
+                            _api: "/api/meetingRing/ringAnswer",
+                            uid: this.callWidget.callInfo.ring_uid
+                        },
+                        success: data => {
+                            if (!data.success) {
+                                alert("Something went wrong.");
+                                console.error(data.message);
+                                return;
+                            }
+                            console.log(this.callWidget.callInfo);
+                            const joinData = {
+                                uid: null,
+                                name: null,
+                                selected_meeting: this.callWidget.callInfo.meeting
+                            };
+
+                            this.$eventBus.$emit("joinMeeting", joinData);
+                            this.$store.commit("rejectCall");
+                        },
+                        error: jXhr => console.log(jXhr)
+                    });
+                } else {
+                    let lobby_data = {};
+                    let meeting = [];
+                    let data = {};
+
+                    for (let lobby of this.lobbies) {
+                        meeting = lobby.meetings.filter(x => x.uid == this.callWidget.callInfo.meeting_uid);
+
+                        if (meeting.length) {
+                            lobby_data = {
+                                name: lobby.name,
+                                uid: lobby.uid
+                            };
+                            break;
                         }
-                        break
                     }
-                }
 
-                if(!meeting.length){
-                    return
-                } else {
-                    let data = {
-                        uid: lobby_data.uid,
-                        name: lobby_data.name,
-                        selected_meeting: meeting[0]
+                    if (!meeting.length) {
+                        return;
+                    } else {
+                        data = {
+                            uid: lobby_data.uid,
+                            name: lobby_data.name,
+                            selected_meeting: meeting[0]
+                        };
                     }
-
-                    this.$eventBus.$emit('joinMeeting', data)
+                    this.$eventBus.$emit("joinMeeting", data);
+                    this.$store.commit("rejectCall");
                 }
             } else {
-                this.$socket.emit('callDecision', false)
-                this.$store.commit('rejectCall')
+                this.$socket.emit("callDecision", {
+                    accepted: false,
+                    ring_uid: this.callWidget.callInfo.ring_uid,
+                    lobby_call_uid: this.callWidget.callInfo.lobby_call_uid
+                });
+
+                if (this.callWidget.callInfo.ring_uid) {
+                    $.ajax({
+                        url: "/post-to-api-ajax",
+                        method: "POST",
+                        headers: {
+                            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
+                        },
+                        data: {
+                            _api: "/api/meetingRing/ringReject",
+                            uid: this.callWidget.callInfo.ring_uid
+                        },
+                        error: jXhr => console.log(jXhr)
+                    });
+                }
+                this.$store.commit("rejectCall");
             }
         },
-        shiftForm(){
-            if(!this.settings.newMeetingNotificationExpanded){
-                this.showCalleeDetails = !this.showCalleeDetails
+        shiftForm() {
+            if (!this.settings.newMeetingNotificationExpanded) {
+                this.showCalleeDetails = !this.showCalleeDetails;
             } else {
-                this.showCalleeDetails = true
+                this.showCalleeDetails = true;
             }
         }
     },
-    created(){
-        if(this.settings.newMeetingNotificationExpanded){
-            this.showCalleeDetails = true
+    created() {
+        if (this.settings.newMeetingNotificationExpanded) {
+            this.showCalleeDetails = true;
         }
     }
-}
+};
 </script>
 
 <style scoped lang="scss">
-
-    @keyframes Glowing {
-        0% {
-            opacity: 0.3;
-        }
-        30% {
-            opacity: 0.8;
-        }
-        100% {
-            opacity: 1;
-        }
+@keyframes Glowing {
+    0% {
+        opacity: 0.3;
+    }
+    30% {
+        opacity: 0.8;
+    }
+    100% {
+        opacity: 1;
     }
+}
 
-    .callBtn {
-        z-index: 1000;
-        border-radius: 28px;
-        height: 56px !important;
-        width: 56px !important;
-        min-width: 56px !important;
-        overflow-x: hidden;
-        overflow-y: hidden;
+.callBtn {
+    z-index: 1000;
+    border-radius: 28px;
+    height: 56px !important;
+    width: 56px !important;
+    min-width: 56px !important;
+    overflow-x: hidden;
+    overflow-y: hidden;
 
-        transition: all 0.5s;
+    transition: all 0.5s;
 
-        transform: translateX(25vw);
+    transform: translateX(25vw);
 
-        .btnHeader {
-            animation: 0.7s Glowing infinite alternate ease-out;
-        }
+    .btnHeader {
+        animation: 0.7s Glowing infinite alternate ease-out;
+    }
 
-        &.active {
-            transform: translateX(0);
-        }
+    &.active {
+        transform: translateX(0);
+    }
 
-        .incomingCallMsg {
-            transition: all 0.3s;
-            display: none;
-            opacity: 0;
-        }
+    .incomingCallMsg {
+        transition: all 0.3s;
+        display: none;
+        opacity: 0;
+    }
 
-        &:hover, &.showingAll {
-            width: 240px !important;
+    &:hover,
+    &.showingAll {
+        width: 240px !important;
 
-            .incomingCallMsg {
-                display: block;
-                opacity: 1;
-            }
+        .incomingCallMsg {
+            display: block;
+            opacity: 1;
         }
+    }
 
-        /* Full State */
+    /* Full State */
 
-        .fullDetails {
-            .ctrlBtns span {
-                &:hover {
-                    text-decoration: underline;
-                }
+    .fullDetails {
+        .ctrlBtns span {
+            &:hover {
+                text-decoration: underline;
             }
         }
+    }
 
-        &.showingAll {
-            height: 400px !important;
-        }
+    &.showingAll {
+        height: 400px !important;
+    }
 
-        &:not(.showingAll) {
-            .fullDetails {
-                display: none !important;
-            }
+    &:not(.showingAll) {
+        .fullDetails {
+            display: none !important;
         }
-
     }
-
+}
 </style>