145 lines
4.4 KiB
Vue
145 lines
4.4 KiB
Vue
<template>
|
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
|
<div class="navbar-brand">
|
|
<router-link to="/" class="navbar-item" exact v-if="!inCall">
|
|
<strong>Seepur</strong>
|
|
</router-link>
|
|
<!-- <a class="navbar-item" href="/">
|
|
</a>-->
|
|
<a
|
|
id="menu-button"
|
|
role="button"
|
|
class="navbar-burger burger"
|
|
@click="showMenu=!showMenu"
|
|
aria-label="menu"
|
|
aria-expanded="false"
|
|
data-target="navbarBasicExample"
|
|
>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
<span aria-hidden="true"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div id="nav-menu" :class="['navbar-menu', {'is-active':showMenu}]">
|
|
<div class="navbar-start">
|
|
<!-- Normal Nav -->
|
|
<router-link active-class="is-active" to="/" class="navbar-item" exact v-if="!inCall">Home</router-link>
|
|
<router-link
|
|
active-class="is-active"
|
|
to="/about"
|
|
class="navbar-item"
|
|
exact
|
|
v-if="!inCall"
|
|
>About</router-link>
|
|
<!-- In call Nav -->
|
|
<div class="navbar-item" v-if="inCall">
|
|
<div class="field is-grouped">
|
|
<p class="control">
|
|
<router-link
|
|
active-class="is-active"
|
|
to="/"
|
|
class="button is-danger"
|
|
exact
|
|
replace
|
|
v-if="inCall"
|
|
>
|
|
<i class="fa fa-fw fa-times-circle-o"></i> End Call
|
|
</router-link>
|
|
</p>
|
|
<p class="control">
|
|
<button
|
|
class="button is-info"
|
|
append
|
|
replace
|
|
v-if="inCall && $route.name==='book'"
|
|
:disabled="!callManager.isHost"
|
|
@click="backToLobby(true)"
|
|
>
|
|
<i class="fa fa-fw fa-arrow-circle-o-left"></i> Back
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar-end">
|
|
<div class="navbar-item has-dropdown is-hoverable is-dark" v-if="!inCall">
|
|
<a class="navbar-link">{{user.name}}</a>
|
|
|
|
<div class="navbar-dropdown">
|
|
<router-link active-class="is-active" to="/settings" class="navbar-item" exact>Settings</router-link>
|
|
<a class="navbar-item" href="/logout">Logout</a>
|
|
<hr class="navbar-divider" v-if="user.is_admin" />
|
|
<a class="navbar-item" href="/admin/" v-if="user.is_admin">Admin Settigns</a>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-item" v-if="inCall">
|
|
<p class="control">
|
|
<button class="button" @click="changeHost()">
|
|
<i class="fa fa-fw fa-refresh"></i> Change Host
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<div v-if="inCall" class="navbar-item">Current Host: {{host.name}}</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { mapGetters, mapActions } from "vuex";
|
|
import CallManager, { ECallEvents } from "../../home/ws/call.manager";
|
|
import WebsocketService from "../../home/ws/websocket.service";
|
|
export default {
|
|
name: "TobNavbar",
|
|
async created() {
|
|
const ws = await WebsocketService.getInstance();
|
|
this.callManager = ws.callManager;
|
|
},
|
|
updated() {
|
|
if (!this.inCall) {
|
|
this.subscribedToLobbyEvents = false;
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showMenu: false,
|
|
subscribedToLobbyEvents: false,
|
|
callManager: null as CallManager
|
|
};
|
|
},
|
|
computed: {
|
|
host() {
|
|
if (this.inCall) {
|
|
if (!this.subscribedToLobbyEvents) {
|
|
console.log("TopNav subscribe to back_to_lobby");
|
|
this.subscribedToLobbyEvents = true;
|
|
this.callManager.on(
|
|
ECallEvents.CALL_VIEW_LOBBY,
|
|
this.remoteBackToLobby.bind(this)
|
|
);
|
|
}
|
|
if (this.callManager.isHost) return this.user;
|
|
return this.callManager.peer;
|
|
}
|
|
return null;
|
|
},
|
|
...mapGetters(["user", "inCall"])
|
|
},
|
|
methods: {
|
|
changeHost() {
|
|
this.callManager.changeHost();
|
|
},
|
|
backToLobby(payload) {
|
|
this.callManager.backToLobby();
|
|
this.$router.replace({ path: `/call/${this.callManager.callId}` });
|
|
},
|
|
remoteBackToLobby(payload) {
|
|
this.$router.replace({ path: `/call/${this.callManager.callId}` });
|
|
},
|
|
...mapActions([])
|
|
}
|
|
};
|
|
</script>
|
|
|