feat(KeyBoard): add ScreenStream for keyboard setting

src/components/Mask.vue

@@ -27,7 +27,6 @@ const message = useMessage();
 const dialog = useDialog();
 
 const curPageActive = ref(false);
-const screenStreamClientId = genClientId();
 
 onBeforeRouteLeave(() => {
   curPageActive.value = false;
@@ -59,6 +58,7 @@ onActivated(async () => {
 });
 
 onMounted(async () => {
+  store.screenStreamClientId = genClientId();
   await loadLocalStore();
   store.checkUpdate = checkUpdate;
   if (store.checkUpdateAtStart) checkUpdate();
@@ -266,7 +266,7 @@ async function checkUpdate() {
   <template v-if="store.keyMappingConfigList.length">
     <div @contextmenu.prevent class="mask" id="maskElement"></div>
     <ScreenStream
-      :cid="screenStreamClientId"
+      :cid="store.screenStreamClientId"
       v-if="curPageActive && store.controledDevice && store.screenStream.enable"
     />
     <div

src/components/keyboard/KeyBoard.vue

@@ -8,6 +8,7 @@ import KeySkill from "./KeySkill.vue";
 import KeyObservation from "./KeyObservation.vue";
 import KeySight from "./KeySight.vue";
 import KeyFire from "./KeyFire.vue";
+import ScreenStream from "../ScreenStream.vue";
 
 import {
   KeyDirectionalSkill,
@@ -31,6 +32,7 @@ const keyboardStore = useKeyboardStore();
 const dialog = useDialog();
 const message = useMessage();
 
+const curPageActive = ref(false);
 const addButtonPos = ref({ x: 0, y: 0 });
 const addButtonOptions: DropdownOption[] = [
   {
@@ -280,12 +282,14 @@ function resetKeyMappingConfig() {
 }
 
 onActivated(() => {
+  curPageActive.value = true;
   document.addEventListener("keydown", handleKeyDown);
   document.addEventListener("keyup", handleKeyUp);
   document.addEventListener("wheel", handleMouseWheel);
 });
 
 onBeforeRouteLeave(() => {
+  curPageActive.value = false;
   return new Promise((resolve, _) => {
     document.removeEventListener("keydown", handleKeyDown);
     document.removeEventListener("keyup", handleKeyUp);
@@ -316,6 +320,10 @@ onBeforeRouteLeave(() => {
 </script>
 
 <template>
+  <ScreenStream
+    :cid="store.screenStreamClientId"
+    v-if="curPageActive && store.controledDevice && store.screenStream.enable"
+  />
   <div
     v-if="store.keyMappingConfigList.length"
     id="keyboardElement"

src/store/global.ts

@@ -78,6 +78,17 @@ export const useGlobalStore = defineStore("global", () => {
   const maskSizeW: Ref<number> = ref(0);
   const maskSizeH: Ref<number> = ref(0);
 
+  const screenStreamClientId = ref("scrcpy-mask");
+
+  // persistent storage
+  const keyMappingConfigList: Ref<KeyMappingConfig[]> = ref([]);
+  const curKeyMappingIndex = ref(0);
+  const maskButton = ref({
+    transparency: 0.5,
+    show: true,
+  });
+  const checkUpdateAtStart = ref(true);
+
   const screenStream = ref({
     enable: false,
     address: "",
@@ -89,15 +100,6 @@ export const useGlobalStore = defineStore("global", () => {
     horizontalLength: 800,
   });
 
-  // persistent storage
-  const keyMappingConfigList: Ref<KeyMappingConfig[]> = ref([]);
-  const curKeyMappingIndex = ref(0);
-  const maskButton = ref({
-    transparency: 0.5,
-    show: true,
-  });
-  const checkUpdateAtStart = ref(true);
-
   return {
     // persistent storage
     keyMappingConfigList,
@@ -105,9 +107,10 @@ export const useGlobalStore = defineStore("global", () => {
     maskButton,
     checkUpdateAtStart,
     externalControlled,
-    // in-memory storage
     screenStream,
     rotation,
+    // in-memory storage
+    screenStreamClientId,
     maskSizeW,
     maskSizeH,
     screenSizeW,