@7365admin1/layer-common 3.1.4-staging.56 → 3.1.4-staging.58

package/components/HidIntercomManagement.vue

@@ -234,6 +234,13 @@
             <v-radio label="UDP" value="UDP" />
             <v-radio label="TCP" value="TCP" />
           </v-radio-group>
+          <div class="sip-switch-row sip-section-switch">
+            <div>
+              <span>Enable video</span>
+              <small>Allow this reader to send and receive video during SIP calls.</small>
+            </div>
+            <v-switch v-model="sipForm.videoEnabled" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
+          </div>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="sipDialog = false">Cancel</v-btn>
@@ -386,54 +393,28 @@
         <v-card-text class="web-phone-body">
           <div class="web-phone-settings">
             <div class="web-phone-section-title">SIP Account</div>
-            <div class="call-label">WebSocket Server <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.webSocketServer"
-              placeholder="wss://sip.example.com/ws"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="call-label">SIP Address <span>*</span></div>
-            <v-text-field
-              v-model="webPhoneForm.aor"
-              placeholder="operator@example.com"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              :disabled="webPhone.isRegistered.value"
-            />
-            <div class="form-two-col">
-              <div>
-                <div class="call-label">Username <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.username"
-                  placeholder="Username"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                />
-              </div>
+            <div v-if="sipAccountLoading" class="sip-account-state">
+              <v-progress-circular indeterminate color="primary" size="30" width="3" />
+              <span>Preparing your private SIP account...</span>
+            </div>
+            <div v-else-if="sipAccountError" class="sip-account-state is-error">
+              <v-icon icon="mdi-alert-circle-outline" size="28" />
+              <span>{{ sipAccountError }}</span>
+              <v-btn
+                class="text-none sip-account-retry"
+                variant="outlined"
+                prepend-icon="mdi-refresh"
+                @click="loadSipAccount"
+              >
+                Retry
+              </v-btn>
+            </div>
+            <div v-else-if="sipAccount" class="sip-account-summary">
               <div>
-                <div class="call-label">Password <span>*</span></div>
-                <v-text-field
-                  v-model="webPhoneForm.password"
-                  placeholder="Password"
-                  :type="showWebPhonePassword ? 'text' : 'password'"
-                  :append-inner-icon="showWebPhonePassword ? 'mdi-eye-off' : 'mdi-eye'"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input"
-                  :disabled="webPhone.isRegistered.value"
-                  @click:append-inner="showWebPhonePassword = !showWebPhonePassword"
-                />
+                <span class="sip-account-label">Assigned extension</span>
+                <strong class="sip-account-extension">{{ sipAccount.extension }}</strong>
               </div>
+              <span class="sip-account-address">{{ sipAccount.sipAddress }}</span>
             </div>
             <div class="call-toggle-row web-video-toggle">
               <span>Enable video</span>
@@ -452,6 +433,7 @@
               variant="flat"
               prepend-icon="mdi-lan-connect"
               :loading="webPhoneConnecting"
+              :disabled="!sipAccount || sipAccountLoading"
               @click="connectWebPhone"
             >
               Connect Web Phone
@@ -471,14 +453,27 @@
           </div>
 
           <div class="web-phone-console">
-            <div class="web-phone-media" :class="{ 'has-video': webPhoneForm.video && webPhone.callState.value === 'active' }">
+            <div
+              class="web-phone-media"
+              :class="{
+                'has-video': webPhoneForm.video && webPhone.callState.value === 'active',
+                'has-local-video': webPhone.localVideoAvailable.value,
+                'has-remote-video': webPhone.remoteVideoAvailable.value,
+              }"
+            >
               <video ref="remoteVideoEl" autoplay playsinline class="remote-video" />
               <video ref="localVideoEl" autoplay muted playsinline class="local-video" />
               <audio ref="remoteAudioEl" autoplay />
-              <div v-if="!webPhoneForm.video || webPhone.callState.value !== 'active'" class="audio-call-state">
+              <div
+                v-if="!webPhoneForm.video || webPhone.callState.value !== 'active' || !webPhone.remoteVideoAvailable.value"
+                class="audio-call-state"
+              >
                 <v-icon size="54">{{ webPhoneCallIcon }}</v-icon>
                 <strong>{{ webPhoneCallLabel }}</strong>
                 <span v-if="webPhone.currentTarget.value">{{ webPhone.currentTarget.value }}</span>
+                <span v-if="webPhoneForm.video && webPhone.callState.value === 'active' && !webPhone.remoteVideoAvailable.value">
+                  Waiting for video from the other device
+                </span>
               </div>
             </div>
 
@@ -532,7 +527,15 @@
                   variant="outlined"
                   :disabled="webPhone.callState.value !== 'active'"
                   :title="webPhone.muted.value ? 'Unmute' : 'Mute'"
-                  @click="webPhone.toggleMute"
+                  @click="toggleWebMute"
+                />
+                <v-btn
+                  v-if="webPhoneForm.video"
+                  :icon="webPhone.cameraEnabled.value ? 'mdi-video' : 'mdi-video-off'"
+                  variant="outlined"
+                  :disabled="webPhone.callState.value !== 'active' || !webPhone.localVideoAvailable.value"
+                  :title="webPhone.cameraEnabled.value ? 'Turn camera off' : 'Turn camera on'"
+                  @click="toggleWebCamera"
                 />
                 <v-btn
                   icon="mdi-phone-hangup"
@@ -613,6 +616,10 @@
 
 <script setup lang="ts">
 const props = defineProps({
+  org: {
+    type: String,
+    required: true,
+  },
   site: {
     type: String,
     required: true,
@@ -631,6 +638,19 @@ type ContactRow = {
   dialCode: string;
 };
 
+type SipAccount = {
+  orgId: string;
+  site: string;
+  userId: string;
+  extension: string;
+  username: string;
+  password: string;
+  sipAddress: string;
+  websocketUrl: string;
+  status: "active";
+  provisionedAt: string;
+};
+
 type DetailItem = {
   label: string;
   value?: string | number | boolean;
@@ -639,7 +659,7 @@ type DetailItem = {
 };
 
 type IntercomRow = {
-  reader: Record<string, any>;
+  reader: Record<string, unknown>;
   name: string;
   location: string;
   serverAddress: string;
@@ -655,6 +675,7 @@ type IntercomRow = {
   password: string;
   operatingMode: string;
   protocol: string;
+  videoEnabled: boolean;
   dialMode: string;
   dialModeLabel: string;
   dialCode: string;
@@ -667,7 +688,7 @@ type IntercomRow = {
   externalDialButton: boolean;
   unknownContact: boolean;
   callAfter: string;
-  pjsip: Record<string, any>;
+  pjsip: Record<string, unknown>;
 };
 
 const {
@@ -678,6 +699,7 @@ const {
   getIntercomStatus,
   makeIntercomCall,
   finalizeIntercomCall,
+  ensureSipAccount,
 } = useHidAmico();
 
 const activeTab = ref<IntercomTab>("intercom");
@@ -696,9 +718,11 @@ const limit = 20;
 const selectedRow = ref<IntercomRow | null>(null);
 const selectedContact = ref<ContactRow | null>(null);
 const showSipPassword = ref(false);
-const showWebPhonePassword = ref(false);
 const webPhoneConnecting = ref(false);
 const webPhoneActionLoading = ref(false);
+const sipAccount = ref<SipAccount | null>(null);
+const sipAccountLoading = ref(false);
+const sipAccountError = ref("");
 const localVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteVideoEl = ref<HTMLVideoElement | null>(null);
 const remoteAudioEl = ref<HTMLAudioElement | null>(null);
@@ -758,6 +782,7 @@ const sipForm = reactive({
   password: "",
   operatingMode: "sip-client",
   protocol: "UDP",
+  videoEnabled: false,
 });
 
 const callForm = reactive({
@@ -787,10 +812,6 @@ const makeCallForm = reactive({
 });
 
 const webPhoneForm = reactive({
-  webSocketServer: "",
-  aor: "",
-  username: "",
-  password: "",
   destination: "",
   video: false,
 });
@@ -872,6 +893,7 @@ const intercomDetailSections = computed(() => {
       items: [
         { label: "Operating Mode", value: row?.operatingMode },
         { label: "Protocol", value: row?.protocol },
+        { label: "Video", value: row?.videoEnabled ? "Enabled" : "Disabled" },
       ],
     },
     {
@@ -926,8 +948,14 @@ const webPhoneCallIcon = computed(() => {
 });
 
 watch(
-  () => props.site,
-  () => reload(),
+  [() => props.org, () => props.site],
+  () => {
+    if (webPhone.isRegistered.value) void webPhone.disconnect();
+    sipAccount.value = null;
+    sipAccountError.value = "";
+    webPhoneForm.destination = "";
+    void reload();
+  },
   { immediate: true },
 );
 
@@ -1008,7 +1036,7 @@ function paginate<T>(items: T[]) {
   return items.slice(start, start + limit);
 }
 
-function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>, status: string): IntercomRow {
+function toIntercomRow(reader: Record<string, unknown>, pjsip: Record<string, unknown>, status: string): IntercomRow {
   const peerToPeer = toFlag(getPjsipValue(pjsip, ["peer_to_peer_enabled", "peerToPeerEnabled"])) === "1";
   const dialMode = toText(getPjsipValue(pjsip, ["dialing_display_mode", "dialingDisplayMode"]), "0");
   const initialRtpPort = toText(getPjsipValue(pjsip, ["server_outbound_port", "initialRtpPort", "initial_rtp_port"]), "N/A");
@@ -1022,13 +1050,13 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
 
   return {
     reader,
-    name: reader.name || reader.deviceId || "HID Reader",
-    location: reader.location || "N/A",
+    name: toText(reader.name || reader.deviceId, "HID Reader"),
+    location: toText(reader.location, "N/A"),
     serverAddress: toText(getPjsipValue(pjsip, ["server_ip", "serverAddress", "server_address", "serverIp"]), "N/A"),
     serverPort: toText(getPjsipValue(pjsip, ["server_port", "serverPort", "port"]), "N/A"),
     initialRtpPort,
     finalRtpPort,
-    monitorPath: reader.monitorPath || "N/A",
+    monitorPath: toText(reader.monitorPath, "N/A"),
     status,
     sipEnabled: toFlag(getPjsipValue(pjsip, ["enabled"])) === "1",
     numericExtension: toFlag(getPjsipValue(pjsip, ["numeric_branch_enabled", "numericExtension", "numericExtensionEnabled"])) === "1",
@@ -1037,6 +1065,7 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
     password: toText(getPjsipValue(pjsip, ["password"]), ""),
     operatingMode: peerToPeer ? "Peer-to-Peer" : "SIP Client",
     protocol: toText(getPjsipValue(pjsip, ["protocol"]), "UDP"),
+    videoEnabled: toFlag(getPjsipValue(pjsip, ["video_enabled", "videoEnabled"])) === "1",
     dialMode,
     dialModeLabel: getDialModeLabel(dialMode),
     dialCode: toText(getPjsipValue(pjsip, ["open_door_command", "dialCode"]), "N/A"),
@@ -1053,7 +1082,7 @@ function toIntercomRow(reader: Record<string, any>, pjsip: Record<string, any>,
   };
 }
 
-function normalizePjsip(...sources: Record<string, any>[]) {
+function normalizePjsip(...sources: Record<string, unknown>[]) {
   for (const source of sources) {
     const candidate = findPjsipCandidate(source);
     if (candidate) return candidate;
@@ -1061,42 +1090,43 @@ function normalizePjsip(...sources: Record<string, any>[]) {
   return {};
 }
 
-function findPjsipCandidate(source: Record<string, any> | undefined): Record<string, any> | undefined {
+function findPjsipCandidate(source: Record<string, unknown> | undefined): Record<string, unknown> | undefined {
   if (!source || typeof source !== "object") return undefined;
   const candidates = [
     source.pjsip,
-    source.configuration?.pjsip,
-    source.result?.pjsip,
-    source.result?.configuration?.pjsip,
-    source.data?.pjsip,
-    source.data?.configuration?.pjsip,
-    source.data?.result?.pjsip,
-    source.data?.result?.configuration?.pjsip,
-    source.data?.data?.pjsip,
-    source.data?.data?.configuration?.pjsip,
-    source.configuration,
-    source.data?.configuration,
-    source.data?.data?.configuration,
+    toRecord(source.pjsip),
+    toRecord(toRecord(source.configuration).pjsip),
+    toRecord(toRecord(source.result).pjsip),
+    toRecord(toRecord(toRecord(source.result).configuration).pjsip),
+    toRecord(toRecord(source.data).pjsip),
+    toRecord(toRecord(toRecord(source.data).configuration).pjsip),
+    toRecord(toRecord(toRecord(source.data).result).pjsip),
+    toRecord(toRecord(toRecord(toRecord(source.data).result).configuration).pjsip),
+    toRecord(toRecord(toRecord(source.data).data).pjsip),
+    toRecord(toRecord(toRecord(toRecord(source.data).data).configuration).pjsip),
+    toRecord(source.configuration),
+    toRecord(toRecord(source.data).configuration),
+    toRecord(toRecord(toRecord(source.data).data).configuration),
     source,
   ];
 
   return candidates.find((candidate) => isPjsipCandidate(candidate));
 }
 
-function isPjsipCandidate(value: unknown): value is Record<string, any> {
+function isPjsipCandidate(value: unknown): value is Record<string, unknown> {
   if (!value || typeof value !== "object" || Array.isArray(value)) return false;
   return pjsipKeys.some((key) => Object.prototype.hasOwnProperty.call(value, key)) ||
     ["serverAddress", "serverIp", "serverPort", "extension", "peerToPeerEnabled"].some((key) => Object.prototype.hasOwnProperty.call(value, key));
 }
 
-function getPjsipValue(source: Record<string, any>, keys: string[]) {
+function getPjsipValue(source: Record<string, unknown>, keys: string[]) {
   for (const key of keys) {
     if (source?.[key] !== undefined && source?.[key] !== null && source?.[key] !== "") return source[key];
   }
   return undefined;
 }
 
-function normalizeStatus(response: Record<string, any>, pjsip: Record<string, any>) {
+function normalizeStatus(response: Record<string, unknown>, pjsip: Record<string, unknown>) {
   const status = Number(response?.status);
   if (toFlag(pjsip.enabled) === "0" || status === -1) return "Disabled";
   if (status === 200) return "Connected";
@@ -1136,6 +1166,7 @@ function openSipDialog(row: IntercomRow) {
   sipForm.password = row.password;
   sipForm.operatingMode = row.operatingMode === "Peer-to-Peer" ? "peer-to-peer" : "sip-client";
   sipForm.protocol = row.protocol || "UDP";
+  sipForm.videoEnabled = row.videoEnabled;
   sipDialog.value = true;
 }
 
@@ -1175,19 +1206,46 @@ function openWebPhoneDialog(row?: IntercomRow) {
     selectedRow.value = activeRow;
     if (!webPhone.isRegistered.value && activeRow.extension !== "N/A") {
       webPhoneForm.destination = activeRow.extension;
+      webPhoneForm.video = activeRow.videoEnabled;
     }
   }
   webPhoneDialog.value = true;
+  if (!sipAccount.value && !sipAccountLoading.value) void loadSipAccount();
+}
+
+async function loadSipAccount() {
+  if (!props.org || !props.site) return;
+
+  sipAccountLoading.value = true;
+  sipAccountError.value = "";
+  try {
+    const response = await ensureSipAccount(props.site, props.org);
+    sipAccount.value = normalizeSipAccount(response);
+  } catch (error: unknown) {
+    sipAccount.value = null;
+    sipAccountError.value = getErrorMessage(error);
+  } finally {
+    sipAccountLoading.value = false;
+  }
 }
 
 async function connectWebPhone() {
+  const account = sipAccount.value;
+  if (!account) {
+    await loadSipAccount();
+    if (!sipAccount.value) return;
+  }
+
+  const activeAccount = sipAccount.value;
+  if (!activeAccount) return;
+
   webPhoneConnecting.value = true;
   try {
     await webPhone.connect({
-      webSocketServer: webPhoneForm.webSocketServer,
-      aor: webPhoneForm.aor,
-      authorizationUsername: webPhoneForm.username,
-      authorizationPassword: webPhoneForm.password,
+      webSocketServer: activeAccount.websocketUrl,
+      aor: activeAccount.sipAddress,
+      authorizationUsername: activeAccount.username,
+      authorizationPassword: activeAccount.password,
       displayName: "iService365 Web",
       video: webPhoneForm.video,
     }, {
@@ -1196,7 +1254,7 @@ async function connectWebPhone() {
       remoteAudio: remoteAudioEl.value,
     });
     showMessage("Web phone connected and ready to receive calls.", "success");
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneConnecting.value = false;
@@ -1217,7 +1275,7 @@ async function startWebCall() {
   webPhoneActionLoading.value = true;
   try {
     await webPhone.call(webPhoneForm.destination);
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneActionLoading.value = false;
@@ -1228,7 +1286,7 @@ async function answerWebCall() {
   webPhoneActionLoading.value = true;
   try {
     await webPhone.answer();
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneActionLoading.value = false;
@@ -1239,7 +1297,7 @@ async function declineWebCall() {
   webPhoneActionLoading.value = true;
   try {
     await webPhone.decline();
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneActionLoading.value = false;
@@ -1250,13 +1308,29 @@ async function hangupWebCall() {
   webPhoneActionLoading.value = true;
   try {
     await webPhone.hangup();
-  } catch (error: any) {
+  } catch (error: unknown) {
     showMessage(getErrorMessage(error), "error");
   } finally {
     webPhoneActionLoading.value = false;
   }
 }
 
+function toggleWebCamera() {
+  try {
+    webPhone.toggleCamera();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  }
+}
+
+function toggleWebMute() {
+  try {
+    webPhone.toggleMute();
+  } catch (error: unknown) {
+    showMessage(getErrorMessage(error), "error");
+  }
+}
+
 function openContactDialog(contact?: ContactRow) {
   selectedContact.value = contact || null;
   contactForm.id = contact?.id;
@@ -1305,6 +1379,7 @@ async function saveSipSettings() {
     login: isPeerToPeer ? "" : sipForm.login,
     password: isPeerToPeer ? "" : sipForm.password,
     peer_to_peer_enabled: isPeerToPeer ? "1" : "0",
+    video_enabled: sipForm.videoEnabled ? "1" : "0",
   });
   if (saved) {
     sipDialog.value = false;
@@ -1492,8 +1567,42 @@ function showMessage(text: string, type: MessageType = "info") {
   message.type = type;
 }
 
-function getErrorMessage(error: any) {
-  return error?.data?.message || error?.response?._data?.message || error?.message || "HID intercom request failed.";
+function normalizeSipAccount(response: unknown): SipAccount {
+  const responseRecord = toRecord(response);
+  const payload = toRecord(responseRecord.data || responseRecord);
+  const requiredFields = ["extension", "username", "password", "sipAddress", "websocketUrl"] as const;
+
+  if (requiredFields.some((field) => !toText(payload[field]))) {
+    throw new Error("The SIP account response is incomplete. Please try again.");
+  }
+
+  return {
+    orgId: toText(payload.orgId, props.org),
+    site: toText(payload.site, props.site),
+    userId: toText(payload.userId),
+    extension: toText(payload.extension),
+    username: toText(payload.username),
+    password: toText(payload.password),
+    sipAddress: toText(payload.sipAddress),
+    websocketUrl: toText(payload.websocketUrl),
+    status: "active",
+    provisionedAt: toText(payload.provisionedAt),
+  };
+}
+
+function getErrorMessage(error: unknown) {
+  const errorRecord = toRecord(error);
+  const data = toRecord(errorRecord.data);
+  const response = toRecord(errorRecord.response);
+  const responseData = toRecord(response._data);
+  return toText(data.message)
+    || toText(responseData.message)
+    || toText(errorRecord.message)
+    || "HID intercom request failed.";
+}
+
+function toRecord(value: unknown): Record<string, unknown> {
+  return typeof value === "object" && value !== null ? value as Record<string, unknown> : {};
 }
 
 function toText(value: unknown, fallback = "") {
@@ -1795,6 +1904,20 @@ export default {
   margin-bottom: 12px;
 }
 
+.sip-section-switch > div {
+  display: flex;
+  min-width: 0;
+  padding: 8px 12px 8px 0;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sip-section-switch small {
+  color: #667085;
+  font-size: 10px;
+  line-height: 1.4;
+}
+
 .sip-switch-row :deep(.v-switch) {
   flex: 0 0 auto;
 }
@@ -2226,6 +2349,73 @@ export default {
   font-weight: 700;
 }
 
+.sip-account-state {
+  display: flex;
+  min-height: 126px;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  color: #5d6673;
+  flex-direction: column;
+  font-size: 12px;
+  gap: 12px;
+  text-align: center;
+}
+
+.sip-account-state.is-error {
+  border-color: #f0c7c7;
+  background: #fff8f8;
+  color: #a92222;
+}
+
+.sip-account-retry {
+  min-width: 104px;
+  border-color: #aeb8c2;
+  color: #344054;
+}
+
+.sip-account-summary {
+  display: grid;
+  min-height: 96px;
+  align-items: center;
+  padding: 16px;
+  border: 1px solid #dce2e8;
+  border-radius: 6px;
+  background: #f8fafc;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 18px;
+}
+
+.sip-account-summary > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.sip-account-label {
+  color: #667085;
+  font-size: 11px;
+}
+
+.sip-account-extension {
+  color: #0d1720;
+  font-size: 24px;
+  line-height: 1.1;
+}
+
+.sip-account-address {
+  max-width: 170px;
+  overflow: hidden;
+  color: #536273;
+  font-size: 11px;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .web-video-toggle {
   margin-top: 12px;
 }
@@ -2268,7 +2458,7 @@ export default {
   object-fit: cover;
 }
 
-.web-phone-media.has-video .remote-video {
+.web-phone-media.has-remote-video .remote-video {
   display: block;
 }
 
@@ -2285,10 +2475,14 @@ export default {
   object-fit: cover;
 }
 
-.web-phone-media.has-video .local-video {
+.web-phone-media.has-local-video .local-video {
   display: block;
 }
 
+.web-phone-media.has-remote-video .audio-call-state {
+  display: none;
+}
+
 .audio-call-state {
   display: flex;
   align-items: center;