seepur/resources/scripts/applications/shared/components/TopNavbar.vue

<template>
  <div>
    <!-- End Call Modal -->
    <Modal
      title="Are You Sure?"
      :isActive="showConfirmEndCall"
      acceptText="End"
      rejectText="Cancel"
      @accept="onConfirmedEndCall()"
      @close="showConfirmEndCall=false"
    >
      <p>End Call?</p>
    </Modal>
    <nav class="navbar is-light" 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">
                <button @click="showConfirmEndCall = true" class="button is-danger" v-if="inCall">
                  <i class="fa fa-fw fa-times-circle-o"></i> End Call
                </button>
              </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>
  </div>
</template>

<script lang="ts">
import { mapGetters, mapActions } from "vuex";
import CallManager, { ECallEvents } from "../../home/ws/call.manager";
import WebsocketService from "../../home/ws/websocket.service";
import Modal from "../../shared/components/Modal/Modal.vue";
export default {
  name: "TobNavbar",
  props: ["ws"],
  components: {
    Modal
  },
  watch: {
    ws(val, oldVal) {
      if (val != null) {
        this.callManager = this.ws.callManager;
      }
    }
  },
  async created() {},
  updated() {
    if (!this.inCall) {
      this.subscribedToLobbyEvents = false;
    }
  },
  data() {
    return {
      showConfirmEndCall: false,
      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: {
    onConfirmedEndCall() {
      this.showConfirmEndCall = false;
      this.$router.replace({ path: `/` });
    },
    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>