fix: small widget fixes and improvements [WTEL-4002]

webitel · Nov 2, 2023 · 29f4afb · 29f4afb
1 parent 559818a
commit 29f4afb
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 10 deletions.
diff --git a/src/app/components/utils/wt-button.vue b/src/app/components/utils/wt-button.vue
@@ -4,6 +4,7 @@
     :class="[
       `wt-button--color-${color}`,
       {
+        'wt-button--wide': wide,
         'wt-button--disabled': disabled,
       }
       ]"
@@ -23,6 +24,10 @@ export default {
       default: 'accent',
       options: ['accent', 'secondary', 'danger'],
     },
+    wide: {
+      type: Boolean,
+      default: false,
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -66,6 +71,9 @@ export default {
         background: var(--negative-color);
       }
     }
+    &--wide {
+      width: 100%;
+    }
     &--disabled {
       pointer-events: none;
       color: var(--text-primary-color);

diff --git a/src/app/css/variables/_colors.scss b/src/app/css/variables/_colors.scss
@@ -24,6 +24,8 @@
 
   --icon-main-color: hsla(202, 100%, 15%, 1);
   --icon-contrast-color: hsla(0, 0%, 100%, 1);
+  --icon-error-color: var(--negative-color);
+  --icon-success-color: var(--positive-color);
 
   --telegram-color: hsla(213, 56%, 67%, 1);
   --viber-color: hsla(267, 46%, 46%, 1);

diff --git a/src/modules/call/components/utils/wt-omni-widget-numpad.vue b/src/modules/call/components/utils/wt-omni-widget-numpad.vue
@@ -23,6 +23,7 @@ export default {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 5px;
+    width: 280px;
   }
 }
 </style>
diff --git a/src/modules/call/components/wt-omni-widget-call-active.vue b/src/modules/call/components/wt-omni-widget-call-active.vue
@@ -6,12 +6,10 @@
     >
     <call-title-wrapper>
       {{ duration }}
+      <template #description>
+        {{ sessionDTMF }}
+      </template>
     </call-title-wrapper>
-    <wt-input
-      :value="sessionDTMF"
-      type="number"
-      @input="sendDTMF"
-    ></wt-input>
     <numpad
       @input="sendDTMF"
     ></numpad>
@@ -24,7 +22,7 @@
       <wt-icon-btn
         icon="call-decline"
         icon-size="sm"
-        color="danger"
+        color="error"
         @click="hangup"
       ></wt-icon-btn>
     </call-actions-wrapper>

diff --git a/src/modules/call/components/wt-omni-widget-call-ringing.vue b/src/modules/call/components/wt-omni-widget-call-ringing.vue
@@ -17,7 +17,7 @@
         @click="toggleMute"
       ></wt-icon-btn>
       <wt-icon-btn
-        color="danger"
+        color="error"
         icon="call-decline"
         icon-size="sm"
         @click="hangup"

diff --git a/src/modules/call/components/wt-omni-widget-call-start.vue b/src/modules/call/components/wt-omni-widget-call-start.vue
@@ -21,6 +21,7 @@
       <wt-icon-btn
         icon="call"
         icon-size="sm"
+        color="success"
         @click="() => makeCall({ initWithMuted })"
       ></wt-icon-btn>
     </call-actions-wrapper>

diff --git a/src/modules/call/store/call.js b/src/modules/call/store/call.js
@@ -30,9 +30,13 @@ const actions = {
   START_USER_AGENT: (context) => {
     const socket = new JsSIP.WebSocketInterface(context.rootState.config.call.url);
     JsSIP.debug.enable('JsSIP:*');
+
+    const { hostname } = new URL(context.rootState.config.call.url);
+
     const configuration = {
       sockets: [socket],
-      uri: 'sip:[email protected]',
+      // uri: 'sip:[email protected]',
+      uri: `sip:${context.rootState.config.call.id}@${hostname}`,
       register: false,
     };
     const userAgent = new JsSIP.UA(configuration);
@@ -93,12 +97,13 @@ const actions = {
 
     const options = {
       eventHandlers,
-      mediaConstraints: { audio: !initWithMuted },
+      mediaConstraints: { audio: true },
       sessionTimersExpires: 300,
     };
     const session = context.state.userAgent.call('sip:[email protected]', options);
     window.session = session;
     context.commit('SET_SESSION', session);
+    if (initWithMuted) await context.dispatch('TOGGLE_MUTE', true);
   },
   HANGUP: (context) => {
     context.state.session.terminate();
@@ -111,8 +116,13 @@ const actions = {
       session.hold();
     }
   },
-  TOGGLE_MUTE: (context) => {
+  TOGGLE_MUTE: (context, value) => {
     const { session } = context.state;
+    // checking typeof because toggle button can send event
+    if (value !== undefined && typeof value === 'boolean') {
+      if (value) session.mute();
+      else session.unmute();
+    }
     if (session.isMuted().audio) {
       session.unmute();
     } else {