webtrit_dialer/src/components/Shared/VideoCallBtn.vue at 89a7d2eb903dca648adeea2f1844efc54e2117e7 · WebTrit/webtrit_dialer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<template>
  <v-btn
    class="video-call-btn"
    :color="btnColor"
    :disabled="!isRegistered || !isActive"
    fab
    dark
    :width="size"
    :height="size"
    @click.native.stop.prevent="callContact()"
    @mouseup.native="$event.target.closest('button').blur()"
  >
    <v-icon
      :color="iconColor"
      :small="size < 40"
    >
      $contacts-call-video
    </v-icon>
  </v-btn>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  props: {
    contact: {
      type: Object,
      default: null,
    },
    tel: {
      type: String,
      default: null,
    },
    btnColor: {
      type: String,
      default: 'accent',
    },
    iconColor: {
      type: String,
      default: 'white',
    },
    size: {
      type: Number,
      default: 40,
    },
  },
  computed: {
    ...mapGetters('webrtc', ['isRegistered']),
    ...mapGetters('account', ['isActive']),
  },
  methods: {
    ...mapActions('webrtc', ['call']),
    callContact() {
      if (this.contact) {
        this.call({
          number: this.contact.number,
          name: this.contact.name,
          initials: this.contact.initials,
          video: true,
        })
      } else {
        this.callFromKeypad()
      }
    },
    async callFromKeypad() {
      if (this.tel.length === 0) {
        return
      }
      this.call({
        number: this.tel,
        video: true,
      })
        .catch((err) => {
          const error = err ? this.$t(`errors.${err.code}`) : ''
          this.$emit('phone-error', error)
        })
    },
  },
}
</script>

<style scoped lang="scss">
.video-call-btn {
  @apply shadow-none rounded-lg ml-2;

  &.theme--dark.v-btn.v-btn--disabled {
    @apply bg-gray-300 #{!important};
  }

  &.theme--dark.v-btn.v-btn--disabled .v-icon {
    @apply text-white #{!important};
  }
}
</style>