bfg-common 1.4.535 → 1.4.537

package/components/common/spiceConsole/Drawer.vue

@@ -42,21 +42,29 @@
       </button>
       <label class="vmw-drawer-body__btn animation relative">
         {{ localization.remoteConsole.uploadFolder }}
-        <input
-          type="file"
-          webkitdirectory
-          directory
-          multiple
-        />
+        <input type="file" webkitdirectory directory multiple />
       </label>
       <label class="vmw-drawer-body__btn animation relative">
         {{ localization.remoteConsole.uploadFiles }}
-        <input
-          type="file"
-          multiple
-        />
+        <input type="file" multiple />
       </label>
 
+      <select
+        v-model="usbDevice"
+        @mouseenter="hover = true"
+        @mouseleave="hover = false"
+        @change="onChangeUsbDevice"
+      >
+        <option
+          v-for="item in usbDevices"
+          :key="item.value"
+          :value="item.value"
+          :disabled="item.disabled"
+        >
+          {{ item.label }}
+        </option>
+      </select>
+
       <select
         v-model="codec"
         @mouseenter="hover = true"
@@ -93,8 +101,13 @@
 </template>
 <script setup lang="ts">
 import { useDraggable } from '@vueuse/core'
+import type { UI_I_DeviceOption } from '~/components/common/spiceConsole/lib/models/interfaces'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_T_CODEC } from '~/components/common/spiceConsole/lib/models/types'
+import {
+  getUSBDeviceType,
+  identifyHIDDevice,
+} from '~/components/common/spiceConsole/lib/utils/getDeviceType'
 
 const emits = defineEmits<{
   (event: 'toggle-fullscreen'): void
@@ -107,7 +120,7 @@ const onChangeCodec = (): void => {
   if (!window.app) return
   // @ts-ignore
   const channels = window.app.spiceConnection.channels
-  for (let i in channels) {
+  for (const i in channels) {
     const channel = channels[i]
     if (channel.channel === wdi.SpiceVars.SPICE_CHANNEL_DISPLAY) {
       channel.changeCodec(codec.value)
@@ -140,7 +153,7 @@ watch(y, () => {
 })
 
 let isDrag = false
-const toggleDrawer = () => {
+const toggleDrawer = (): void => {
   if (isDrag) {
     isDrag = false
     return
@@ -166,6 +179,63 @@ const displaySizeInfo = (): void => {
   requestAnimationFrame(displaySizeInfo)
 }
 displaySizeInfo()
+
+const usbDevice = ref<number | string>(-1)
+const usbDevices = ref<UI_I_DeviceOption[]>([
+  { label: 'USB Device', value: -1, disabled: true },
+  { label: 'Add USB device', value: -2 },
+])
+const onChangeUsbDevice = (data: any): void => {
+  if (data.target.value === '-2') {
+    getUSBDeviceInformation()
+  }
+}
+
+const getUSBDeviceInformation = async (): Promise<void> => {
+  try {
+    // Запросить устройство
+    const device = await navigator.usb.requestDevice({ filters: [] })
+    usbDevice.value = setDevice(device)
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
+const setDevice = (device: any): string => {
+  const interfaces = device.configuration.interfaces
+
+  const types: any = new Set()
+  interfaces.forEach((item: any) => {
+    const classCode = item.alternate.interfaceClass
+    const subclassCode = item.alternate.interfaceSubclass
+    const protocolCode = item.alternate.interfaceProtocol
+
+    if (classCode === 0x03) {
+      // HID класс
+      types.add(identifyHIDDevice(subclassCode, protocolCode))
+    } else {
+      types.add(getUSBDeviceType(classCode))
+    }
+  })
+
+  const value = `${device.productId}_${device.vendorId}`
+  if (usbDevices.value.every((device) => device.value !== value)) {
+    usbDevices.value.push({
+      value,
+      label: Array.from(types).join(' / '),
+    })
+  }
+
+  return value
+}
+
+const setDefaultDevices = async (): Promise<void> => {
+  const devices = await navigator.usb.getDevices()
+  devices.forEach((device: any) => {
+    setDevice(device)
+  })
+}
+setDefaultDevices()
 </script>
 <style lang="scss" scoped>
 .vmw-drawer {
@@ -176,6 +246,7 @@ displaySizeInfo()
   width: 300px;
   height: 100vh;
   padding: 20px;
+  z-index: 9999;
 
   &.show {
     right: 0;
@@ -269,7 +340,7 @@ displaySizeInfo()
         cursor: not-allowed;
       }
 
-      input[type="file"] {
+      input[type='file'] {
         position: absolute;
         top: 0;
         left: 0;

package/components/common/spiceConsole/lib/models/interfaces.ts

@@ -0,0 +1,5 @@
+export interface UI_I_DeviceOption {
+  label: string
+  value: any
+  disabled?: boolean
+}

package/components/common/spiceConsole/lib/utils/getDeviceType.ts

@@ -0,0 +1,36 @@
+export const getUSBDeviceType = (classCode: any): string => {
+    const deviceClasses = {
+        0x00: 'Undefined',
+        0x01: 'Audio',
+        0x02: 'Communications and CDC Control',
+        0x03: 'HID (Human Interface Device)',
+        0x05: 'Physical Interface Device',
+        0x06: 'Image (Scanner/Camera)',
+        0x07: 'Printer',
+        0x08: 'Mass Storage (e.g., Flash Drive)',
+        0x09: 'Hub',
+        0x0a: 'CDC-Data',
+        0x0b: 'Smart Card',
+        0x0d: 'Content Security',
+        0x0e: 'Video',
+        0x0f: 'Personal Healthcare',
+        0x10: 'Audio/Video Devices',
+        0x11: 'Billboard Device',
+        0x12: 'USB Type-C Bridge',
+        0xdc: 'Diagnostic Device',
+        0xe0: 'Wireless Controller',
+        0xef: 'Miscellaneous',
+        0xfe: 'Application-Specific',
+        0xff: 'Vendor-Specific',
+    }
+    return deviceClasses[classCode] || 'Unknown'
+}
+
+// Функция для определения типа HID-устройства
+export const identifyHIDDevice = (subclass: any, protocol: any): string => {
+    if (subclass === 0x01) {
+        if (protocol === 0x01) return 'Keyboard'
+        if (protocol === 0x02) return 'Mouse'
+    }
+    return 'Generic HID Device'
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.535",
+  "version": "1.4.537",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",