@7365admin1/layer-common 3.2.0 → 3.2.1-staging.59

package/composables/useSipWebPhone.ts

@@ -0,0 +1,332 @@
+import { computed, onScopeDispose, readonly, ref, shallowRef } from "vue";
+import type { SimpleUser, SimpleUserDelegate, SimpleUserOptions } from "sip.js/lib/platform/web";
+
+export type SipWebPhoneConfig = {
+  webSocketServer: string;
+  aor: string;
+  authorizationUsername: string;
+  authorizationPassword: string;
+  displayName?: string;
+  video?: boolean;
+};
+
+export type SipWebPhoneMedia = {
+  localVideo?: HTMLVideoElement | null;
+  remoteAudio?: HTMLAudioElement | null;
+  remoteVideo?: HTMLVideoElement | null;
+};
+
+type ConnectionState = "disconnected" | "connecting" | "registered" | "error";
+type CallState = "idle" | "calling" | "incoming" | "active" | "ending";
+
+export default function useSipWebPhone() {
+  const simpleUser = shallowRef<SimpleUser>();
+  const connectionState = ref<ConnectionState>("disconnected");
+  const callState = ref<CallState>("idle");
+  const errorMessage = ref("");
+  const muted = ref(false);
+  const cameraEnabled = ref(false);
+  const localVideoAvailable = ref(false);
+  const remoteVideoAvailable = ref(false);
+  const currentTarget = ref("");
+  const activeConfig = shallowRef<SipWebPhoneConfig>();
+
+  const isRegistered = computed(() => connectionState.value === "registered");
+  const hasCall = computed(() => callState.value !== "idle");
+
+  async function connect(config: SipWebPhoneConfig, media: SipWebPhoneMedia) {
+    validateConfig(config);
+    await disconnect();
+
+    connectionState.value = "connecting";
+    errorMessage.value = "";
+    activeConfig.value = { ...config };
+    let clearRegistrationTimer = () => {};
+
+    try {
+      const { SimpleUser: SimpleUserConstructor } = await import("sip.js/lib/platform/web");
+      let registrationSettled = false;
+      let resolveRegistration: (() => void) | undefined;
+      let rejectRegistration: ((error: Error) => void) | undefined;
+      const registrationPromise = new Promise<void>((resolve, reject) => {
+        resolveRegistration = resolve;
+        rejectRegistration = reject;
+      });
+      const registrationTimeout = globalThis.setTimeout(() => {
+        if (registrationSettled) return;
+        registrationSettled = true;
+        rejectRegistration?.(new Error("SIP registration timed out. Check the WebSocket server and account credentials."));
+      }, 15000);
+      clearRegistrationTimer = () => globalThis.clearTimeout(registrationTimeout);
+      const settleRegistration = (error?: Error) => {
+        if (registrationSettled) return;
+        registrationSettled = true;
+        clearRegistrationTimer();
+        if (error) rejectRegistration?.(error);
+        else resolveRegistration?.();
+      };
+      const delegate: SimpleUserDelegate = {
+        onCallCreated: () => {
+          if (callState.value !== "incoming") callState.value = "calling";
+        },
+        onCallReceived: () => {
+          callState.value = "incoming";
+          currentTarget.value = "Incoming call";
+        },
+        onCallAnswered: () => {
+          callState.value = "active";
+          syncVideoState();
+        },
+        onCallHangup: () => {
+          const previousState = callState.value;
+          resetCall();
+          if (previousState === "calling") {
+            errorMessage.value = "The call was not answered or was rejected by the destination.";
+          }
+        },
+        onRegistered: () => {
+          connectionState.value = "registered";
+          settleRegistration();
+        },
+        onUnregistered: () => {
+          if (connectionState.value === "connecting") {
+            settleRegistration(new Error("SIP registration was rejected. Check the username and password."));
+          }
+          connectionState.value = "disconnected";
+        },
+        onServerDisconnect: () => {
+          const error = new Error("The SIP WebSocket server disconnected during registration.");
+          connectionState.value = "error";
+          errorMessage.value = error.message;
+          settleRegistration(error);
+          resetCall();
+        },
+      };
+      const options: SimpleUserOptions = {
+        aor: normalizeSipUri(config.aor),
+        delegate,
+        media: {
+          constraints: { audio: true, video: Boolean(config.video) },
+          local: { video: media.localVideo || undefined },
+          remote: {
+            audio: media.remoteAudio || undefined,
+            video: media.remoteVideo || undefined,
+          },
+        },
+        userAgentOptions: {
+          authorizationUsername: config.authorizationUsername,
+          authorizationPassword: config.authorizationPassword,
+          displayName: config.displayName || config.authorizationUsername,
+        },
+      };
+
+      const user = new SimpleUserConstructor(config.webSocketServer.trim(), options);
+      simpleUser.value = user;
+      await user.connect();
+      await user.register();
+      await registrationPromise;
+    } catch (error) {
+      clearRegistrationTimer();
+      await disconnect(false);
+      connectionState.value = "error";
+      errorMessage.value = getErrorMessage(error);
+      throw error;
+    }
+  }
+
+  async function disconnect(clearError = true) {
+    const user = simpleUser.value;
+    simpleUser.value = undefined;
+
+    if (user) {
+      try {
+        if (hasCall.value) await user.hangup();
+      } catch {
+        // The session may already have ended remotely.
+      }
+      try {
+        await user.unregister();
+      } catch {
+        // Registration may not have completed.
+      }
+      try {
+        await user.disconnect();
+      } catch {
+        // The WebSocket may already be closed.
+      }
+    }
+
+    connectionState.value = "disconnected";
+    activeConfig.value = undefined;
+    resetCall();
+    if (clearError) errorMessage.value = "";
+  }
+
+  async function call(target: string) {
+    const user = requireRegisteredUser();
+    const destination = normalizeDestination(target, activeConfig.value?.aor || "");
+    errorMessage.value = "";
+    currentTarget.value = destination;
+    callState.value = "calling";
+    try {
+      await user.call(destination);
+    } catch (error) {
+      resetCall();
+      errorMessage.value = getErrorMessage(error);
+      throw error;
+    }
+  }
+
+  async function answer() {
+    const user = requireRegisteredUser();
+    await user.answer();
+  }
+
+  async function decline() {
+    const user = requireUser();
+    callState.value = "ending";
+    await user.decline();
+    resetCall();
+  }
+
+  async function hangup() {
+    const user = requireUser();
+    callState.value = "ending";
+    await user.hangup();
+    resetCall();
+  }
+
+  function toggleMute() {
+    const user = requireUser();
+    const tracks = user.localMediaStream?.getAudioTracks() || [];
+    if (!tracks.length) throw new Error("No microphone track is available for this call.");
+    const enable = muted.value;
+    tracks.forEach((track) => {
+      track.enabled = enable;
+    });
+    muted.value = !enable;
+  }
+
+  function toggleCamera() {
+    const user = requireUser();
+    const tracks = user.localMediaStream?.getVideoTracks() || [];
+    if (!tracks.length) throw new Error("No camera track is available. Reconnect the web phone with video enabled.");
+    const enable = !cameraEnabled.value;
+    tracks.forEach((track) => {
+      track.enabled = enable;
+    });
+    cameraEnabled.value = enable;
+  }
+
+  function syncVideoState() {
+    const user = simpleUser.value;
+    const localStream = user?.localMediaStream;
+    const remoteStream = user?.remoteMediaStream;
+    const localTrack = localStream?.getVideoTracks()[0];
+    const remoteTrack = remoteStream?.getVideoTracks()[0];
+
+    const updateState = () => {
+      const currentLocalTrack = localStream?.getVideoTracks()[0];
+      const currentRemoteTrack = remoteStream?.getVideoTracks()[0];
+      localVideoAvailable.value = Boolean(currentLocalTrack && currentLocalTrack.readyState === "live");
+      remoteVideoAvailable.value = Boolean(currentRemoteTrack && currentRemoteTrack.readyState === "live");
+      cameraEnabled.value = Boolean(currentLocalTrack?.enabled);
+    };
+
+    updateState();
+    if (localStream) localStream.onaddtrack = updateState;
+    if (remoteStream) remoteStream.onaddtrack = updateState;
+
+    if (localTrack) {
+      localTrack.onended = () => {
+        localVideoAvailable.value = false;
+        cameraEnabled.value = false;
+      };
+    }
+    if (remoteTrack) {
+      remoteTrack.onended = () => {
+        remoteVideoAvailable.value = false;
+      };
+    }
+  }
+
+  function resetCall() {
+    callState.value = "idle";
+    currentTarget.value = "";
+    muted.value = false;
+    cameraEnabled.value = false;
+    localVideoAvailable.value = false;
+    remoteVideoAvailable.value = false;
+  }
+
+  function requireRegisteredUser() {
+    const user = requireUser();
+    if (!isRegistered.value) throw new Error("Connect the web phone before making a call.");
+    return user;
+  }
+
+  function requireUser() {
+    if (!simpleUser.value) throw new Error("Web phone is not connected.");
+    return simpleUser.value;
+  }
+
+  onScopeDispose(() => {
+    void disconnect();
+  });
+
+  return {
+    connectionState: readonly(connectionState),
+    callState: readonly(callState),
+    errorMessage: readonly(errorMessage),
+    muted: readonly(muted),
+    cameraEnabled: readonly(cameraEnabled),
+    localVideoAvailable: readonly(localVideoAvailable),
+    remoteVideoAvailable: readonly(remoteVideoAvailable),
+    currentTarget: readonly(currentTarget),
+    isRegistered,
+    hasCall,
+    connect,
+    disconnect,
+    call,
+    answer,
+    decline,
+    hangup,
+    toggleMute,
+    toggleCamera,
+  };
+}
+
+function validateConfig(config: SipWebPhoneConfig) {
+  if (!/^wss:\/\//i.test(config.webSocketServer.trim())) {
+    throw new Error("SIP WebSocket URL must use WSS.");
+  }
+  if (!config.aor.trim() || !config.authorizationUsername.trim() || !config.authorizationPassword) {
+    throw new Error("SIP address, username, and password are required.");
+  }
+}
+
+function normalizeSipUri(value: string) {
+  const trimmed = value.trim();
+  return trimmed.toLowerCase().startsWith("sip:") ? trimmed : `sip:${trimmed}`;
+}
+
+function normalizeDestination(target: string, aor: string) {
+  const trimmed = target.trim();
+  if (!trimmed) throw new Error("Enter an extension or SIP address to call.");
+  if (trimmed.toLowerCase().startsWith("sip:")) return trimmed;
+  if (trimmed.includes("@")) return `sip:${trimmed}`;
+
+  const domain = normalizeSipUri(aor).split("@")[1];
+  if (!domain) throw new Error("Enter a full SIP address for the destination.");
+  return `sip:${trimmed}@${domain}`;
+}
+
+function getErrorMessage(error: unknown) {
+  if (error instanceof DOMException && error.name === "NotAllowedError") {
+    return "Camera or microphone permission was denied. Allow media access in the browser and reconnect the web phone.";
+  }
+  if (error instanceof DOMException && error.name === "NotFoundError") {
+    return "No camera or microphone was found for this video call.";
+  }
+  return error instanceof Error ? error.message : "SIP connection failed.";
+}

package/composables/useSiteSettings.ts

@@ -99,6 +99,33 @@ export default function () {
     });
   }
 
+  /**
+   * The monitoring wall for one site.
+   *
+   * A different endpoint from `getAllSiteCameras`, and the difference is the
+   * point. That one is the Settings panel's paginated CRUD list; this one is
+   * purpose-built for a wall and is what the React Native app already uses:
+   *
+   * - it is **site-scoped and authorised server-side** — the caller must be a
+   *   member of the site, of its owning organisation, or work for an
+   *   organisation engaged to serve it;
+   * - it returns `type: "ip"` cameras only, so an ANPR unit can never land on a
+   *   monitoring wall;
+   * - it returns each camera's **capability descriptor** and the server's own
+   *   `unavailableReason`, so a tile explains itself instead of showing a black
+   *   rectangle;
+   * - it never returns a credential, and it contacts no device.
+   *
+   * Unpaginated by design: a wall shows a site's cameras, and paging them was
+   * an artefact of borrowing the CRUD list.
+   */
+  async function getSiteWall(siteId: string) {
+    return await useNuxtApp().$api<Record<string, any>>(
+      `/api/site-cameras/site/${siteId}/wall`,
+      { method: "GET" }
+    );
+  }
+
   async function updateSiteInformation(
     siteId: string,
     payload: { bgImage: string; description: string; docs: { id: string; name: string }[] }
@@ -175,6 +202,7 @@ export default function () {
     updateSite,
     addCamera,
     getAllSiteCameras,
+    getSiteWall,
     setSiteGuardPosts,
     updateSiteCamera,
     deleteSiteCameraById,

package/composables/useWebUsb.ts

@@ -11,6 +11,10 @@ interface USBDevice {
   close(): Promise<void>;
   selectConfiguration(configurationValue: number): Promise<void>;
   claimInterface(interfaceNumber: number): Promise<void>;
+  selectAlternateInterface(
+    interfaceNumber: number,
+    alternateSetting: number,
+  ): Promise<void>;
   releaseInterface(interfaceNumber: number): Promise<void>;
   transferOut(
     endpointNumber: number,
@@ -19,14 +23,27 @@ interface USBDevice {
   configuration: {
     interfaces: Array<{
       interfaceNumber: number;
+      alternate: USBAlternateInterface;
       alternates: Array<{
+        alternateSetting: number;
+        interfaceClass: number;
         endpoints: Array<{
           endpointNumber: number;
           direction: "in" | "out";
         }>;
       }>;
     }>;
-  };
+  } | null;
+  configurations: Array<{ configurationValue: number }>;
+}
+
+interface USBAlternateInterface {
+  alternateSetting: number;
+  interfaceClass: number;
+  endpoints: Array<{
+    endpointNumber: number;
+    direction: "in" | "out";
+  }>;
 }
 
 interface USBOutTransferResult {
@@ -39,13 +56,86 @@ declare global {
     usb: {
       getDevices(): Promise<USBDevice[]>;
       requestDevice(options: {
-        filters: Array<{ vendorId?: number; productId?: number }>;
+        filters: Array<{
+          vendorId?: number;
+          productId?: number;
+          classCode?: number;
+        }>;
       }): Promise<USBDevice>;
     };
   }
 }
 
 export default function useWebUsb() {
+  const printerConnections = new WeakMap<
+    USBDevice,
+    { interfaceNumber: number; endpointNumber: number }
+  >();
+
+  const protectedInterfaceClasses = new Set([0x01, 0x03, 0x08, 0x0b, 0x0e, 0x10, 0xe0]);
+
+  function getErrorMessage(error: unknown, fallback: string) {
+    return error instanceof Error && error.message ? error.message : fallback;
+  }
+
+  function findPrinterInterface(device: USBDevice) {
+    const candidates = (device.configuration?.interfaces || []).flatMap((usbInterface) =>
+      usbInterface.alternates.flatMap((alternate) => {
+        const outputEndpoint = alternate.endpoints.find((endpoint) => endpoint.direction === "out");
+        if (!outputEndpoint || protectedInterfaceClasses.has(alternate.interfaceClass)) return [];
+
+        return [{
+          interfaceNumber: usbInterface.interfaceNumber,
+          alternateSetting: alternate.alternateSetting,
+          activeAlternateSetting: usbInterface.alternate.alternateSetting,
+          interfaceClass: alternate.interfaceClass,
+          endpointNumber: outputEndpoint.endpointNumber,
+        }];
+      }),
+    );
+
+    candidates.sort((left, right) => {
+      const priority = (interfaceClass: number) => interfaceClass === 0x07 ? 0 : interfaceClass === 0xff ? 1 : 2;
+      return priority(left.interfaceClass) - priority(right.interfaceClass);
+    });
+
+    return candidates[0] || null;
+  }
+
+  async function preparePrinterDevice(device: USBDevice) {
+    await device.open();
+    if (!device.configuration) {
+      await device.selectConfiguration(device.configurations[0]?.configurationValue || 1);
+    }
+
+    const printerInterface = findPrinterInterface(device);
+    if (!printerInterface) {
+      throw new Error(
+        "The selected USB device is not a compatible printer. Select the receipt printer instead of a Bluetooth, camera, keyboard, or other system device.",
+      );
+    }
+
+    await device.claimInterface(printerInterface.interfaceNumber);
+    if (printerInterface.alternateSetting !== printerInterface.activeAlternateSetting) {
+      await device.selectAlternateInterface(
+        printerInterface.interfaceNumber,
+        printerInterface.alternateSetting,
+      );
+    }
+
+    printerConnections.set(device, {
+      interfaceNumber: printerInterface.interfaceNumber,
+      endpointNumber: printerInterface.endpointNumber,
+    });
+    return device;
+  }
+
+  function getPrinterConnection(device: USBDevice) {
+    const connection = printerConnections.get(device);
+    if (!connection) throw new Error("Printer interface is not connected");
+    return connection;
+  }
+
   const isWebUsbSupported = computed(() => {
     return typeof navigator !== "undefined" && "usb" in navigator;
   });
@@ -75,7 +165,9 @@ export default function useWebUsb() {
       throw new Error("Web USB is not supported in this browser");
     }
     try {
-      const device = await navigator.usb.requestDevice({ filters: [] });
+      const device = await navigator.usb.requestDevice({
+        filters: [{ classCode: 0x07 }, { classCode: 0xff }],
+      });
       return {
         vendorId: device.vendorId,
         productId: device.productId,
@@ -84,12 +176,12 @@ export default function useWebUsb() {
         serialNumber: device.serialNumber || "Unknown",
         deviceId: `${device.vendorId}:${device.productId}`,
       };
-    } catch (error: any) {
-      if (error.name === "NotFoundError") {
+    } catch (error: unknown) {
+      if (error instanceof DOMException && error.name === "NotFoundError") {
         throw new Error("No device selected");
       }
       console.error("Error requesting USB device:", error);
-      throw new Error("Failed to access USB device");
+      throw new Error(getErrorMessage(error, "Failed to access USB printer"));
     }
   };
 
@@ -110,14 +202,17 @@ export default function useWebUsb() {
         });
       }
       console.log("[WebUSB] Opening device:", device.vendorId, device.productId);
-      await device.open();
-      await device.selectConfiguration(1);
-      await device.claimInterface(0);
+      await preparePrinterDevice(device);
       console.log("[WebUSB] Device opened and interface claimed.");
       return device;
-    } catch (error) {
+    } catch (error: unknown) {
       console.error("Error connecting to USB device:", error);
-      throw new Error("Failed to connect to USB device");
+      try {
+        await device?.close();
+      } catch (closeError) {
+        console.error("Error closing rejected USB device:", closeError);
+      }
+      throw new Error(getErrorMessage(error, "Failed to connect to USB printer"));
     }
   };
 
@@ -173,15 +268,20 @@ export default function useWebUsb() {
           ? "Connection and print test successful"
           : "Connection successful but print test failed",
       };
-    } catch (error: any) {
+    } catch (error: unknown) {
       return {
         success: false,
-        error: error.message,
+        error: getErrorMessage(error, "Failed to connect to USB printer"),
         message: "Connection failed",
       };
     } finally {
       if (device) {
         try {
+          const connection = printerConnections.get(device);
+          if (connection) {
+            await device.releaseInterface(connection.interfaceNumber);
+            printerConnections.delete(device);
+          }
           await device.close();
         } catch (closeError) {
           console.error("Error closing device:", closeError);
@@ -205,21 +305,16 @@ export default function useWebUsb() {
       ];
 
       const testData = new Uint8Array(testCommands);
-      const usbInterface = device.configuration.interfaces[0];
-      const alternate = usbInterface.alternates[0];
-      const outputEndpoint = alternate.endpoints.find(
-        (ep: any) => ep.direction === "out",
-      );
-
-      if (!outputEndpoint) {
-        throw new Error("No output endpoint found");
-      }
-
-      await device.transferOut(outputEndpoint.endpointNumber, testData);
+      const { endpointNumber } = getPrinterConnection(device);
+      await device.transferOut(endpointNumber, testData);
       return { success: true, message: "Test print sent successfully" };
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error("Test print error:", error);
-      return { success: false, error: error.message, message: "Test print failed" };
+      return {
+        success: false,
+        error: getErrorMessage(error, "Test print failed"),
+        message: "Test print failed",
+      };
     }
   };
 
@@ -354,13 +449,8 @@ export default function useWebUsb() {
   ) => {
     try {
       console.log("[WebUSB] printQrCode start — doorLevel:", doorLevel, "liftLevel:", liftLevel, "company:", companyName, "address:", address);
-      const usbInterface = device.configuration.interfaces[0];
-      const alternate = usbInterface.alternates[0];
-      const outputEndpoint = alternate.endpoints.find(
-        (ep: any) => ep.direction === "out",
-      );
-      if (!outputEndpoint) throw new Error("No output endpoint found");
-      console.log("[WebUSB] Using endpoint:", outputEndpoint.endpointNumber);
+      const { endpointNumber } = getPrinterConnection(device);
+      console.log("[WebUSB] Using endpoint:", endpointNumber);
 
       const canvas = await createReceiptLayout(
         urlImage,
@@ -375,17 +465,17 @@ export default function useWebUsb() {
       const rasterData = canvasToRaster(canvas);
       console.log("[WebUSB] Raster data size:", rasterData.byteLength, "bytes");
 
-      await device.transferOut(outputEndpoint.endpointNumber, rasterData.buffer);
+      await device.transferOut(endpointNumber, rasterData.buffer);
       console.log("[WebUSB] Raster data sent.");
 
       const CUT = new Uint8Array([0x1d, 0x56, 0x41, 0x10]);
-      await device.transferOut(outputEndpoint.endpointNumber, CUT.buffer);
+      await device.transferOut(endpointNumber, CUT.buffer);
       console.log("[WebUSB] Cut command sent.");
 
       return { success: true, message: "QR print sent successfully" };
-    } catch (error: any) {
+    } catch (error: unknown) {
       console.error("[WebUSB] printQrCode error:", error);
-      return { success: false, error: error.message };
+      return { success: false, error: getErrorMessage(error, "Unable to print QR code") };
     }
   };
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.0",
+  "version": "3.2.1-staging.59",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {
@@ -40,6 +40,7 @@
     "qrcode": "^1.5.4",
     "qrcode.vue": "^3.4.1",
     "sass": "^1.80.6",
+    "sip.js": "0.21.2",
     "socket.io-client": "^4.8.3",
     "vue-draggable-next": "^2.3.0",
     "vue3-signature": "^0.2.4",

package/pages/[org]/[site]/access-mgmt/intercom/index.vue

@@ -5,7 +5,7 @@
       :org="orgId"
       message="Enable HID as a service for this site before configuring HID intercom."
     >
-      <HidIntercomManagement :site="siteId" />
+      <HidIntercomManagement :site="siteId" :org="orgId" />
     </HidEnabledGate>
   </v-container>
 </template>