perf: 🚀 Extended floating control bar function

control/App.vue

@@ -25,7 +25,7 @@
           type="primary"
           text
           class="!px-2 !h-full"
-          icon="Switch"
+          icon="ArrowDown"
           @click="switchDevice"
         >
           <span class="mr-2">{{ deviceInfo.$remark || deviceInfo.$name }}</span>
@@ -107,7 +107,7 @@ async function switchDevice(e) {
 
   const data = await deviceStore.getList()
 
-  window.electron.ipcRenderer.send('show-device-list', data)
+  window.electron.ipcRenderer.invoke('open-control-device-menu', data)
 }
 </script>
 

control/electron/events/devices/index.js

@@ -0,0 +1,24 @@
+import { BrowserWindow, ipcMain, Menu } from 'electron'
+import { openControlWindow } from '$control/electron/helpers/index.js'
+
+export default function (controlWindow) {
+  ipcMain.handle('open-control-device-menu', (event, deviceList) => {
+    const template = deviceList.map((item) => {
+      let label = item.$remark || item.$name
+
+      if (item.$wifi) {
+        label += ` (WIFI)`
+      }
+
+      return {
+        label,
+        click: () => {
+          openControlWindow(controlWindow, item)
+        },
+      }
+    })
+
+    const menu = Menu.buildFromTemplate(template)
+    menu.popup(BrowserWindow.fromWebContents(event.sender))
+  })
+}

control/electron/events/gnirehtet/index.js

@@ -0,0 +1,21 @@
+import { BrowserWindow, ipcMain, Menu } from 'electron'
+
+export default function (controlWindow) {
+  ipcMain.handle('open-device-gnirehtet-menu', openDeviceGnirehtetMenu)
+
+  function openDeviceGnirehtetMenu(event, args = {}) {
+    const { options = [] } = args
+
+    const template = options.map((item) => {
+      return {
+        label: item.label,
+        click() {
+          controlWindow.webContents.send(item.value)
+        },
+      }
+    })
+
+    const menu = Menu.buildFromTemplate(template)
+    menu.popup(BrowserWindow.fromWebContents(event.sender))
+  }
+}

control/electron/events/index.js

@@ -0,0 +1,4 @@
+export { default as devices } from './devices/index.js'
+export { default as gnirehtet } from './gnirehtet/index.js'
+export { default as rotation } from './rotation/index.js'
+export { default as volume } from './volume/index.js'

control/electron/events/rotation/index.js

@@ -0,0 +1,24 @@
+import { BrowserWindow, ipcMain, Menu } from 'electron'
+
+export default function (controlWindow) {
+  ipcMain.handle('open-device-rotation-menu', openDeviceRotationMenu)
+
+  function openDeviceRotationMenu(event, args = {}) {
+    const { options = [] } = args
+
+    const template = options.map((item) => {
+      return {
+        label: item.label,
+        click: () => {
+          controlWindow.webContents.send(
+            'execute-device-rotation-shell',
+            item.value,
+          )
+        },
+      }
+    })
+
+    const menu = Menu.buildFromTemplate(template)
+    menu.popup(BrowserWindow.fromWebContents(event.sender))
+  }
+}

control/electron/events/volume/index.js

@@ -0,0 +1,21 @@
+import { BrowserWindow, ipcMain, Menu } from 'electron'
+
+export default function (controlWindow) {
+  ipcMain.handle('open-device-volume-menu', openDeviceVolumeMenu)
+
+  function openDeviceVolumeMenu(event, args = {}) {
+    const { options = [] } = args
+
+    const template = options.map((item) => {
+      return {
+        label: item.label,
+        click() {
+          controlWindow.webContents.send('execute-device-volume-shell', item.value)
+        },
+      }
+    })
+
+    const menu = Menu.buildFromTemplate(template)
+    menu.popup(BrowserWindow.fromWebContents(event.sender))
+  }
+}

control/electron/main.js

@@ -1,56 +1,41 @@
-import { BrowserWindow, ipcMain, Menu } from 'electron'
+import { BrowserWindow, ipcMain } from 'electron'
 import { initControlWindow, openControlWindow } from './helpers/index.js'
 
+import { devices, gnirehtet, rotation, volume } from './events/index.js'
+
+function onControlMounted(controlWindow) {
+  ipcMain.on('language-change', (event, data) => {
+    controlWindow.webContents.send('language-change', data)
+  })
+
+  ipcMain.on('theme-change', (event, data) => {
+    controlWindow.webContents.send('theme-change', data)
+  })
+
+  rotation(controlWindow)
+  devices(controlWindow)
+  volume(controlWindow)
+  gnirehtet(controlWindow)
+}
+
 export default (mainWindow) => {
   let controlWindow
 
-  ipcMain.on('open-control-window', (event, data) => {
+  ipcMain.handle('open-control-window', (event, data) => {
     controlWindow = BrowserWindow.getAllWindows().find(
       win => win.customId === 'control',
     )
 
-    if (!controlWindow) {
-      controlWindow = initControlWindow(mainWindow)
-
-      ipcMain.on('control-mounted', () => {
-        openControlWindow(controlWindow, data)
-      })
-
-      return false
-    }
-
-    openControlWindow(controlWindow, data)
-  })
-
-  ipcMain.on('language-change', (event, data) => {
     if (controlWindow) {
-      controlWindow.webContents.send('language-change', data)
-    }
-  })
-
-  ipcMain.on('theme-change', (event, data) => {
-    if (controlWindow) {
-      controlWindow.webContents.send('theme-change', data)
+      openControlWindow(controlWindow, data)
+      return false
     }
-  })
-
-  ipcMain.on('show-device-list', (event, deviceList) => {
-    const template = deviceList.map((item) => {
-      let label = item.$remark || item.$name
 
-      if (item.$wifi) {
-        label += ` (WIFI)`
-      }
+    controlWindow = initControlWindow(mainWindow)
 
-      return {
-        label,
-        click: () => {
-          openControlWindow(controlWindow, item)
-        },
-      }
+    ipcMain.on('control-mounted', () => {
+      onControlMounted(controlWindow)
+      openControlWindow(controlWindow, data)
     })
-
-    const menu = Menu.buildFromTemplate(template)
-    menu.popup(BrowserWindow.fromWebContents(event.sender))
   })
 }

electron/exposes/scrcpy/index.js

@@ -119,14 +119,14 @@ const record = async (
   )
 }
 
-const mirrorGroup = async (serial, { open = 1, ...options } = {}) => {
+const mirrorGroup = async (serial, { openNum = 1, ...options } = {}) => {
   const overlayDisplay
     = appStore.get(`scrcpy.${replaceIP(serial)}.--display-overlay`)
     || appStore.get('scrcpy.global.--display-overlay')
     || '1080x1920/320,secure'
 
   const command = `settings put global overlay_display_devices "${[
-    ...Array.from({ length: open }).keys(),
+    ...Array.from({ length: openNum }).keys(),
   ]
     .map(() => overlayDisplay)
     .join(';')}"`

jsconfig.json

@@ -10,5 +10,5 @@
     }
   },
   "exclude": ["node_modules", "dist", "dist-electron", "dist-release"],
-  "include": ["src", "electron"]
+  "include": ["src", "electron", "control"]
 }

src/components/Device/components/ControlBar/Gnirehtet/index.vue

@@ -1,6 +1,11 @@
 <template>
-  <el-dropdown>
-    <div class="" :title="device.$gnirehtetLoadingText" @click="handleStart">
+  <el-dropdown :disabled="floating">
+    <div
+      class=""
+      :title="device.$gnirehtetLoadingText"
+      @click="handleStart"
+      @mouseenter="onMouseenter"
+    >
       <slot :loading="device.$gnirehtetLoading" />
     </div>
 
@@ -16,13 +21,18 @@
 
 <script>
 import { sleep } from '$/utils'
+import { adaptiveMessage } from '$/utils/modal/index.js'
 
 export default {
   props: {
     device: {
       type: Object,
       default: () => ({}),
     },
+    floating: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {}
@@ -36,10 +46,41 @@ export default {
     }
   },
   methods: {
+    onMouseenter() {
+      if (!this.floating) {
+        return false
+      }
+
+      if (!this.device.$gnirehtetLoading) {
+        return false
+      }
+
+      window.electron.ipcRenderer.once(
+        'stop-device-gnirehtet',
+        (event, data) => {
+          this.handleStop()
+        },
+      )
+
+      const options = [
+        {
+          label: window.t('device.control.gnirehtet.stop'),
+          value: 'stop-device-gnirehtet',
+        },
+      ]
+
+      window.electron.ipcRenderer.invoke('open-device-gnirehtet-menu', {
+        options,
+      })
+    },
     preferenceData(...args) {
       return this.$store.preference.getData(...args)
     },
     async handleStart() {
+      if (this.device.$gnirehtetLoading) {
+        return false
+      }
+
       this.device.$gnirehtetLoadingText = this.$t(
         'device.control.gnirehtet.running',
       )
@@ -48,7 +89,10 @@ export default {
       try {
         await this.$gnirehtet.run(this.device.id)
         await sleep()
-        this.$message.success(this.$t('device.control.gnirehtet.start.success'))
+        adaptiveMessage(this.$t('device.control.gnirehtet.start.success'), {
+          system: this.floating,
+          type: 'success',
+        })
       }
       catch (error) {
         this.$message.warning(error.message || 'Start service failure')
@@ -64,10 +108,16 @@ export default {
       try {
         await this.$gnirehtet.stop(this.device.id)
         await sleep()
-        this.$message.success(this.$t('common.success'))
+        adaptiveMessage(this.$t('common.success'), {
+          system: this.floating,
+          type: 'success',
+        })
       }
       catch (error) {
-        this.$message.warning(error.message || 'Stop service failure')
+        adaptiveMessage(error.message || 'Stop service failure', {
+          system: this.floating,
+          type: 'warning',
+        })
       }
 
       this.device.$gnirehtetLoading = false