添加多媒体控制组件

src/common/ClientConnection.ts

@@ -626,24 +626,46 @@ export default class ClientConnection {
     }
   }
   public async setWindowVolume(window_id: number, volume: number) {
-    try {
+    this.ws?.send(
-      return await this.doRpc<Protocol.NoneResponse>(
+      JSON.stringify(
         new Protocol.SetWindowVolumeRequestEntity(window_id, volume, 0)
+      )
     );
-    } catch (e) {
-      console.error(e);
-    }
   }
 
   public async unmuteWindow(window_id: number) {
-    return await this.doRpc<Protocol.NoneResponse>(
+    this.ws?.send(
-      new Protocol.UnMuteWindowRequestEntity(window_id, 0)
+      JSON.stringify(new Protocol.UnMuteWindowRequestEntity(window_id, 0))
     );
   }
 
   public async muteWindow(window_id: number) {
-    return await this.doRpc<Protocol.NoneResponse>(
+    this.ws?.send(
-      new Protocol.MuteWindowRequestEntity(window_id, 0)
+      JSON.stringify(new Protocol.MuteWindowRequestEntity(window_id, 0))
+    );
+  }
+
+  public async playWindow(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.PlayWindowRequestEntity(window_id, 0))
+    );
+  }
+
+  public async windowPlayNext(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.WindowPlayNextRequestEntity(window_id, 0))
+    );
+  }
+
+  public async windowPlayPrev(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.WindowPlayPrevRequestEntity(window_id, 0))
+    );
+  }
+
+  public async pauseWindow(window_id: number) {
+    this.ws?.send(
+      JSON.stringify(new Protocol.PauseWindowRequestEntity(window_id, 0))
     );
   }
 

src/components/SignalSourceDialog.vue

@@ -140,7 +140,12 @@
                   :loading="loading"
                   :disable="loading"
                   filled
-                  @dblclick="showPlaylistDialog()"
+                  @dblclick="
+                    media_url_label.startsWith($t('file path')) &&
+                    item_data.window_type == 'EwindowType::Image'
+                      ? doSelectFile()
+                      : showPlaylistDialog()
+                  "
                   v-model="item_data.media_url"
                   :readonly="media_url_label.startsWith($t('file path'))"
                   :label="media_url_label"
@@ -258,6 +263,7 @@
       </q-form>
     </q-card>
     <playlist-dialog ref="playlist_dialog" />
+    <file-manage-dialog ref="file_manage_dialog" />
   </q-dialog>
 </template>
 
@@ -284,12 +290,13 @@ import GlobalData from "src/common/GlobalData";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { SignalSourceEntity } from "src/entities/SignalSourceEntity";
-
+import FileManageDialog from "src/components/FileManageDialog.vue";
 import PlaylistDialog from "src/components/PlaylistDialog.vue";
+import FileEntity from "src/entities/FileEntity";
 
 export default defineComponent({
   name: "ComponentSignalSourceDialog",
-  components: { PlaylistDialog },
+  components: { FileManageDialog, PlaylistDialog },
 
   setup() {
     let $store = useStore();
@@ -304,6 +311,7 @@ export default defineComponent({
     const selected: any = ref(null);
     let loading = ref(false);
     let playlist_dialog: any = ref(null);
+    let file_manage_dialog: any = ref(null);
 
     let suppored_window_types = new Set<string>([
       "EwindowType::Multimedia",
@@ -417,6 +425,7 @@ export default defineComponent({
       loading,
       tree_nodes,
       playlist_dialog,
+      file_manage_dialog,
       showDialog(options: any) {
         if (options) {
           type.value = options.type ?? 1;
@@ -469,6 +478,28 @@ export default defineComponent({
           item_data.media_url = decodeURI(result);
         }
       },
+      async doSelectFile() {
+        if (!media_url_label.value.startsWith($t.t("file path"))) {
+          return;
+        }
+        const obj = await file_manage_dialog.value.showDialogAsync("select");
+        if (obj) {
+          interface __I {
+            path: string;
+            file: FileEntity;
+          }
+          let { path, file }: __I = obj;
+          if (path && file) {
+            item_data.media_url = path + "/" + file.name;
+
+            if (item_data.name.trim() == "") {
+              nextTick(() => {
+                item_data.name = file.name;
+              });
+            }
+          }
+        }
+      },
     };
   },
 });

src/components/Window.vue

@@ -369,6 +369,7 @@ export default defineComponent({
           }
           focused.value = newValue.focus;
           selected.value = old;
+          $store.commit("setSelectedWindow", props.window.uuid);
         }
       }
     );

src/entities/MultimediaWindowEntity.ts

@@ -11,7 +11,7 @@ export class MultimediaWindowEntity extends BaseEntity {
 
   volume: number = 80;
   muted: boolean = false;
-  paused: boolean = false;
+  playing: boolean = false;
   play_speed: number = 1;
 }
 

src/entities/WSProtocol.ts

@@ -240,6 +240,22 @@ export namespace Protocol {
       return Commands.PROTOCOL_PREFIX + "FanTemperature";
     }
 
+    public static get kPlayWindow() {
+      return Commands.PROTOCOL_PREFIX + "PlayWindow";
+    }
+
+    public static get kPauseWindow() {
+      return Commands.PROTOCOL_PREFIX + "PauseWindow";
+    }
+
+    public static get kWindowPlayNext() {
+      return Commands.PROTOCOL_PREFIX + "PlayNext";
+    }
+
+    public static get kWindowPlayPrev() {
+      return Commands.PROTOCOL_PREFIX + "PlayPrev";
+    }
+
     static _all_commands = new Set([
       Commands.kUnKnowCommand,
       Commands.kSearchDevice,
@@ -295,6 +311,10 @@ export namespace Protocol {
       Commands.kUnMuteWidow,
       Commands.kRpcGetBuildInfo,
       Commands.kFanTemperature,
+      Commands.kWindowPlayPrev,
+      Commands.kWindowPlayNext,
+      Commands.kPauseWindow,
+      Commands.kPlayWindow,
     ]);
 
     public static get AllCommands() {
@@ -1383,6 +1403,50 @@ export namespace Protocol {
     }
   }
 
+  export class PlayWindowRequestEntity extends Protocol.PacketEntity {
+    window_id: number;
+
+    constructor(window_id: number, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kPlayWindow;
+      this.window_id = window_id;
+    }
+  }
+
+  export class WindowPlayNextRequestEntity extends Protocol.PacketEntity {
+    window_id: number;
+
+    constructor(window_id: number, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kWindowPlayNext;
+      this.window_id = window_id;
+    }
+  }
+
+  export class WindowPlayPrevRequestEntity extends Protocol.PacketEntity {
+    window_id: number;
+
+    constructor(window_id: number, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kWindowPlayPrev;
+      this.window_id = window_id;
+    }
+  }
+
+  export class PauseWindowRequestEntity extends Protocol.PacketEntity {
+    window_id: number;
+
+    constructor(window_id: number, rcp_id?: number) {
+      super();
+      this.rpc_id = rcp_id ?? 0;
+      this.command = Protocol.Commands.kPauseWindow;
+      this.window_id = window_id;
+    }
+  }
+
   export class UnMuteWindowRequestEntity extends Protocol.PacketEntity {
     window_id: number;
 

src/layouts/MainLayout.vue

@@ -2,7 +2,11 @@
   <q-layout view="hHh lpR fFf" @mousemove="onMouseMove">
     <div v-show="$store.state.initialized">
       <!-- header -->
-      <q-header elevated class="header text-black">
+      <q-header
+        elevated
+        class="header text-black"
+        @click="(evt) => evt.stopPropagation()"
+      >
         <top-tool-bar />
       </q-header>
 
@@ -21,6 +25,7 @@
                 }
               }
             "
+            @click="(evt) => evt.stopPropagation()"
           >
             <left-tool-bar />
           </div>
@@ -42,8 +47,12 @@
                 }
               }
             "
+            @click="(evt) => evt.stopPropagation()"
           >
-            <right-tool-bar v-if="show_right_tool_bar" />
+            <right-tool-bar
+              v-if="show_right_tool_bar"
+              @click="(evt) => evt.stopPropagation()"
+            />
           </div>
         </div>
       </q-page-container>

src/pages/Index.vue

@@ -1,25 +1,25 @@
 <template>
   <q-page class="row items-center justify-evenly">
     <wall-page />
+    <media-control-page />
   </q-page>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import WallPage from "src/pages/WallPage.vue";
+import MediaControlPage from "src/pages/MediaControlPage.vue";
 import EventBus, { EventNamesDefine } from "src/common/EventBus";
 import { useQuasar } from "quasar";
 import { useI18n } from "vue-i18n";
 import { useStore } from "src/store";
-import { NotifyMessage } from "src/common/ClientConnection";
-import { Protocol } from "src/entities/WSProtocol";
 import Initializer from "src/common/Initializer";
 import GlobalData from "src/common/GlobalData";
 import RemoteDataExangeProcesser from "src/common/RemoteDataExangeProcesser";
 
 export default defineComponent({
   name: "PageIndex",
-  components: { WallPage },
+  components: { WallPage, MediaControlPage },
   setup() {
     const $store = useStore();
     const $q = useQuasar();

src/pages/MediaControlPage.vue

@@ -0,0 +1,199 @@
+<template>
+  <div
+    v-show="is_multimedia_window && selected_window"
+    ref="wall"
+    class="col full-width"
+    style="
+      background-color: #bce0f0;
+      border: 1px solid black;
+      position: absolute;
+      bottom: 1.5%;
+    "
+    @click="(evt) => evt.stopPropagation()"
+  >
+    <div class="row q-ma-sm">
+      <div class="col-1 q-mx-md">
+        <q-btn round flag size="lg" icon="arrow_back" @click="playPrev"></q-btn>
+      </div>
+      <div class="col-1 q-mx-md">
+        <q-btn
+          round
+          flag
+          size="lg"
+          v-if="!selected_window?.playing"
+          icon="play_arrow"
+          @click="play"
+        ></q-btn>
+        <q-btn v-else round flag size="lg" icon="pause" @click="pause"></q-btn>
+      </div>
+      <div class="col-1 q-mx-md">
+        <q-btn
+          round
+          flag
+          size="lg"
+          icon="arrow_forward"
+          @click="playNext"
+        ></q-btn>
+      </div>
+      <q-space />
+      <div class="col-1 q-mx-md">
+        <q-btn round flag size="lg" icon="volume_down" @click="volumeDown">
+        </q-btn>
+      </div>
+      <div class="col-1 q-mx-md">
+        <q-btn
+          round
+          flag
+          size="lg"
+          v-if="selected_window?.muted"
+          icon="volume_off"
+          @click="unmuteWindow"
+        ></q-btn>
+        <q-btn
+          v-else
+          round
+          flag
+          size="lg"
+          icon="volume_mute"
+          @click="muteWindow"
+        ></q-btn>
+      </div>
+      <div class="col-1 q-mx-md">
+        <q-btn round flag size="lg" icon="volume_up" @click="volumeUp"></q-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script lang="ts">
+import GlobalData from "src/common/GlobalData";
+import { defineComponent, ref, Ref, computed, onMounted, watch } from "vue";
+const elementResizeDetectorMaker = require("element-resize-detector");
+import { Protocol } from "src/entities/WSProtocol";
+import Window from "src/components/Window.vue";
+
+import { useI18n } from "vue-i18n";
+import { useStore } from "src/store";
+import EventBus, { EventNamesDefine } from "src/common/EventBus";
+import { WindowOpenNotifyEntity } from "src/entities/MultimediaWindowEntity";
+import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
+import { useQuasar } from "quasar";
+import { NotifyMessage } from "src/common/ClientConnection";
+
+import EditVolumeDialog from "src/components/EditVolumeDialog.vue";
+
+export default defineComponent({
+  name: "PageMediaControl",
+
+  components: { Window, EditVolumeDialog },
+  setup() {
+    const $q = useQuasar();
+    const $store = useStore();
+    const $t = useI18n();
+
+    let selected_window: Ref<WindowOpenNotifyEntity | null> = ref(null);
+    let is_multimedia_window = ref(false);
+
+    watch(
+      () => $store.state.selected_window,
+      (newValue, oldValue) => {
+        const window = $store.state.windows.find(
+          (element) => element && element.uuid == newValue
+        );
+        if (window) {
+          selected_window.value = window;
+          const signal_source = GlobalData.getInstance().signal_source.find(
+            (element) =>
+              element && element.uuid == window.signal_source_table_uuid
+          );
+          if (signal_source) {
+            is_multimedia_window.value =
+              signal_source.window_type == "EwindowType::Multimedia" ||
+              signal_source.window_type == "EwindowType::RTSP";
+          }
+        }
+      }
+    );
+
+    return {
+      selected_window,
+      is_multimedia_window,
+
+      volumeUp(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          let volume = selected_window.value.volume + 5;
+          if (volume > 100) {
+            volume = 100;
+          }
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setWindowVolume(selected_window.value.window_id, volume);
+        }
+      },
+      muteWindow(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.muteWindow(selected_window.value.window_id);
+        }
+      },
+      unmuteWindow(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.unmuteWindow(selected_window.value.window_id);
+        }
+      },
+      volumeDown(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          let volume = selected_window.value.volume - 5;
+          if (volume < 0) {
+            volume = 0;
+          }
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.setWindowVolume(selected_window.value.window_id, volume);
+        }
+      },
+      playNext(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.windowPlayNext(selected_window.value.window_id);
+        }
+      },
+      play(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.playWindow(selected_window.value.window_id);
+        }
+      },
+      pause(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.pauseWindow(selected_window.value.window_id);
+        }
+      },
+      playPrev(evt: MouseEvent) {
+        evt.stopPropagation();
+        if (selected_window.value) {
+          GlobalData.getInstance()
+            .getCurrentClient()
+            ?.windowPlayPrev(selected_window.value.window_id);
+        }
+      },
+    };
+  },
+});
+</script>

src/pages/WallPage.vue

@@ -278,6 +278,18 @@ export default defineComponent({
                   notify.data
                 ) as WindowOtherStateChangeNotifyEntity;
                 if (temp && temp.window_id) {
+                  if (temp.focus) {
+                    for (const window of $store.state.windows) {
+                      if (window) {
+                        $store.commit("setWindowProperty", {
+                          window,
+                          property_name: "focus",
+                          value: false,
+                        });
+                      }
+                    }
+                  }
+
                   const window = $store.state.windows.find(
                     (item) => item.window_id == temp.window_id
                   );

src/store/index.ts

@@ -41,6 +41,7 @@ export interface StateInterface {
   device_ip_address: string;
   power_on_plan: string;
   fan_temp: number;
+  selected_window: string;
 }
 
 // provide typings for `this.$store`
@@ -268,6 +269,7 @@ export default store(function (/* { ssrContext } */) {
       device_ip_address: "localhost",
       power_on_plan: "",
       fan_temp: 0,
+      selected_window: "",
     },
 
     mutations: {
@@ -641,6 +643,9 @@ export default store(function (/* { ssrContext } */) {
           state.fan_temp = f;
         }
       },
+      setSelectedWindow(state: StateInterface, playload?: any) {
+        state.selected_window = playload;
+      },
     },
 
     // enable strict mode (adds overhead!)