lingling
/
media_player_client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加焦点置顶功能

This commit is contained in:
fangxiang 2021-08-09 10:59:16 +08:00
parent 9c52c43b19
commit f4a4bf8e8d
10 changed files with 234 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/common/ClientConnection.ts
View File

@ -1,3 +1,4 @@
import NormalWindowRequestEntity from "src/entities/NormalWindowRequestEntity";
import { Protocol } from "src/entities/WSProtocol";
import EventBus, { EventNamesDefine } from "./EventBus";
@ -39,6 +40,8 @@ export default class ClientConnection {
password?: string | null
) {
if (this._destoryed) {
this.ws?.close();
this.ws = null;
return;
}
this.url = url;
@ -71,6 +74,11 @@ export default class ClientConnection {
}
login() {
if (this._destoryed) {
this.ws?.close();
this.ws = null;
return;
}
if (this.is_connected) {
const request = new Protocol.LoginRequest(this.user_name, this.password);
this.ws?.send(JSON.stringify(request));
@ -79,7 +87,6 @@ export default class ClientConnection {
onClose(ev: CloseEvent) {
this._is_login = false;
console.log("onClose");
this._reconnect();
EventBus.getInstance().emit(EventNamesDefine.WebSocketClose, this);
}
@ -94,6 +101,8 @@ export default class ClientConnection {
private _reconnect() {
if (this._destoryed) {
this.ws?.close();
this.ws = null;
return;
}
if (
@ -106,18 +115,28 @@ export default class ClientConnection {
this._reconnectTimer = null;
}
this._reconnectTimer = setTimeout(() => {
console.log("reconnection...", new Date().getSeconds());
this.reconnectTo(this.url, this.user_name, this.password);
}, 3000);
}
}
onOpen(ev: Event) {
if (this._destoryed) {
this.ws?.close();
this.ws = null;
return;
}
this._is_login = false;
this.login();
}
onMessage(ev: MessageEvent) {
if (this._destoryed) {
this.ws?.close();
this.ws = null;
return;
}
try {
const packet = JSON.parse(ev.data) as Protocol.PacketEntity;
@ -199,11 +218,9 @@ export default class ClientConnection {
resolve(response);
} else {
reject();
console.log("reject");
}
} catch {
reject();
console.log("reject");
}
}
}
@ -268,6 +285,17 @@ export default class ClientConnection {
this.ws?.send(JSON.stringify(data));
}
public focusIn(window_id: number) {
this.ws?.send(
JSON.stringify(
new NormalWindowRequestEntity(
Protocol.Commands.kFocuseWindow,
window_id
)
)
);
}
private _destoryed = false;
public destory() {
this._destoryed = true;

5
src/common/EventBus.ts
View File

@ -9,6 +9,11 @@ export default class EventBus extends EventEmitter {
}
return EventBus._instance;
}
private constructor() {
super();
this.setMaxListeners(64);
}
}
export namespace EventNamesDefine {

45
src/components/Window.vue
View File

@ -1,6 +1,6 @@
<template>
<div
class="window"
class="window_class window_flag"
:class="selected ? 'window_selected top' : 'window_normal'"
@click="onClick"
@mousedown="onMouseDown"
@ -125,7 +125,10 @@
</template>
<style scoped>
.window {
.window_class {
}
.window_flag {
}
.window_selected {
@ -224,7 +227,7 @@ div.absolute_left_down {
import { Common } from "src/common/Common";
import EventBus, { EventNamesDefine } from "src/common/EventBus";
import GlobalData from "src/common/GlobalData";
import { defineComponent, ref } from "vue";
import { defineComponent, ref, watch, onUnmounted } from "vue";
import { useStore } from "src/store";
class _Flags {
@ -262,6 +265,7 @@ export default defineComponent({
"close_this_window",
"close_other_windows",
"close_all_windows",
"window_fouse_in",
],
setup(props, { emit }) {
const $store = useStore();
@ -274,10 +278,36 @@ export default defineComponent({
let can_move = ref(true);
let can_resize = ref(true);
EventBus.getInstance().on(EventNamesDefine.UnSelectAllWindows, () => {
const onUnSelectAllWindows = () => {
selected.value = false;
};
EventBus.getInstance().on(
EventNamesDefine.UnSelectAllWindows,
onUnSelectAllWindows
);
onUnmounted(() => {
EventBus.getInstance().removeListener(
EventNamesDefine.UnSelectAllWindows,
onUnSelectAllWindows
);
});
watch(
() => props.window.window_state,
(newValue, oldValue) => {
if (newValue) {
console.log(newValue);
if (newValue.focus) {
console.log(newValue.focus);
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
selected.value = true;
} else {
selected.value = false;
}
}
}
);
let mouse_down_flag = false;
let mouse_last_pos_x = 0;
let mouse_last_pos_y = 0;
@ -298,8 +328,11 @@ export default defineComponent({
flags,
onClick(evt: PointerEvent) {
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
selected.value = true;
if (selected.value != true) {
EventBus.getInstance().emit(EventNamesDefine.UnSelectAllWindows);
selected.value = true;
emit("window_fouse_in", props.window.window_id);
}
},
onMouseDown(evt: MouseEvent) {
if (selected.value) {

15
src/entities/MultimediaWindowEntity.ts
View File

@ -2,13 +2,26 @@ import BaseEntity from "./BaseEntity";
import { SignalSourceEntity } from "./SignalSourceEntity";
import { Protocol } from "./WSProtocol";
export class WindowStates {
playing = false;
focus = false;
muted = false;
constructor(playing?: boolean, focus?: boolean, muted?: boolean) {
this.playing = playing ?? false;
this.focus = focus ?? false;
this.muted = muted ?? false;
}
}
export class MultimediaWindowEntity extends BaseEntity {
x: number = 0;
y: number = 0;
width: number = 0;
height: number = 0;
signal_source_table_uuid: string = "";
// signal_source_table_entity: SignalSourceEntity = new SignalSourceEntity();
window_state = new WindowStates();
}
export class WindowOpenNotifyEntity extends MultimediaWindowEntity {

12
src/entities/NormalWindowRequestEntity.ts Normal file
View File

@ -0,0 +1,12 @@
import { Protocol } from "./WSProtocol";
export default class NormalWindowRequestEntity extends Protocol.PacketEntity {
window_id: number = 0;
constructor(command?: string, window_id?: number) {
super();
this.command = command ?? Protocol.Commands.kUnKnowCommand;
this.window_id = window_id ?? 0;
}
}

9
src/entities/WSProtocol.ts
View File

@ -57,6 +57,14 @@ export namespace Protocol {
return Commands.PROTOCOL_PREFIX + "CloseWindow";
}
public static get kWindowOtherStateChanged() {
return Commands.PROTOCOL_PREFIX + "WindowOtherStateChanged";
}
public static get kFocuseWindow() {
return Commands.PROTOCOL_PREFIX + "FocuseWindow";
}
static _all_commands = new Set([
Commands.kUnKnowCommand,
Commands.kSearchDevice,
@ -72,6 +80,7 @@ export namespace Protocol {
Commands.kResizeWindow,
Commands.kOpenWindow,
Commands.kCloseWindow,
Commands.kWindowOtherStateChanged,
]);
public static get AllCommands() {

8
src/entities/WindowOtherStateChangeNotifyEntity.ts Normal file
View File

@ -0,0 +1,8 @@
import { Protocol } from "./WSProtocol";
export default class WindowOtherStateChangeNotifyEntity extends Protocol.PacketEntity {
window_id: number = 0;
playing = false;
focus = false;
muted = false;
}

7
src/layouts/MainLayout.vue
View File

@ -7,10 +7,6 @@
<left-tool-bar />
</q-drawer>
<q-drawer v-model="data.show_right_drawer" side="right" bordered>
<!-- drawer content -->
<right-tool-bar />
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
@ -24,7 +20,6 @@
import { defineComponent, reactive } from "vue";
import LeftToolBar from "src/pages/LeftToolBar.vue";
import RightToolBar from "src/pages/RightToolBar.vue";
import TopToolBar from "src/pages/TopToolBar.vue";
class _Data {
@ -35,7 +30,7 @@ class _Data {
export default defineComponent({
name: "MainLayout",
components: { LeftToolBar, RightToolBar, TopToolBar },
components: { LeftToolBar, TopToolBar },
setup() {
const data = reactive(new _Data());

17
src/pages/RightToolBar.vue
View File

@ -1,17 +0,0 @@
<template>
<div>aaaaaaaa</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'PageRightToolBar',
components: {},
setup() {
return {};
},
});
</script>

137
src/pages/WallPage.vue
View File

@ -14,8 +14,11 @@
@close_this_window="closeWindow"
@close_other_windows="closeOtherWindows"
@close_all_windows="closeAllWindows"
:ref="'window_' + index"
@window_fouse_in="windowFocusIn"
:ref="'window_' + item.window_id"
:id="'window_' + item.window_id"
v-for="(item, index) in windows"
:uuid="item.uuid"
:key="index"
class="window"
:signal_source_table_uuid="item.signal_source_table_uuid"
@ -44,7 +47,7 @@
:ref="'item' + (row - 1) * wall_cols * col"
v-for="col in wall_cols"
:key="col"
class="col wall_item"
class="col wall_item wall_item_flag"
:style="{
width: item_witdh + 'px',
height: item_height + 'px',
@ -80,6 +83,9 @@
.window {
position: absolute;
}
.wall_item_flag {
}
</style>
<script lang="ts">
@ -100,7 +106,11 @@ 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 {
WindowOpenNotifyEntity,
WindowStates,
} from "src/entities/MultimediaWindowEntity";
import WindowOtherStateChangeNotifyEntity from "src/entities/WindowOtherStateChangeNotifyEntity";
interface _OptionsType {
$t: any;
@ -328,6 +338,47 @@ export default defineComponent({
}
}
break;
case Protocol.Commands.kWindowOtherStateChanged:
{
const temp = JSON.parse(
response.data
) as WindowOtherStateChangeNotifyEntity;
if (temp && temp.window_id) {
const window = $store.state.windows.find(
(item) => item.window_id == temp.window_id
);
if (window) {
// $store.commit("setWindowPropertys", [
// {
// window,
// property_name: "playing",
// value: temp.playing,
// },
// {
// window,
// property_name: "focus",
// value: temp.focus,
// },
// {
// window,
// property_name: "muted",
// value: temp.muted,
// },
// ]);
window.window_state; //
$store.commit("setWindowProperty", {
window,
property_name: "window_state",
value: new WindowStates(
temp.playing,
temp.focus,
temp.muted
),
});
}
}
}
break;
default:
console.log(response.packet);
break;
@ -369,21 +420,52 @@ export default defineComponent({
if (signal_sources.length) {
let signal_source = signal_sources[0];
if (signal_source) {
const dom = e.target as HTMLElement;
let dom: HTMLElement | null = e.target as HTMLElement;
if (dom) {
GlobalData.getInstance()
.getCurrentClient()
?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
(dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
wall_width_scaler.value,
(dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
wall_height_scaler.value,
dom.offsetWidth * wall_width_scaler.value,
dom.offsetHeight * wall_height_scaler.value
)
);
if (dom.classList.contains("wall_item_flag")) {
GlobalData.getInstance()
.getCurrentClient()
?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
(dom.offsetLeft - (wall.value?.offsetLeft ?? 0)) *
wall_width_scaler.value,
(dom.offsetTop - (wall.value?.offsetTop ?? 0)) *
wall_height_scaler.value,
dom.offsetWidth * wall_width_scaler.value,
dom.offsetHeight * wall_height_scaler.value
)
);
} else if (dom.classList.contains("window_flag")) {
let uuid = dom.getAttribute("uuid");
if (uuid) {
let window = $store.state.windows.find(
(item) => item.uuid == uuid
);
if (window) {
let client = GlobalData.getInstance().getCurrentClient();
if (client) {
let x = window.x;
let y = window.y;
let width = window.width;
let height = window.height;
client.closeWindow(window.window_id);
setTimeout(() => {
client?.openWindow(
new Protocol.OpenWindowRequestEntity(
signal_source.uuid,
x,
y,
width,
height
)
);
}, 100);
}
}
}
}
}
}
}
@ -391,17 +473,23 @@ export default defineComponent({
},
onDragEnter(e: DragEvent) {
let target = e.target as any;
let target: HTMLElement | null = e.target as HTMLElement;
if (target && target.draggable !== true) {
target.classList.add("drag-enter");
while (
target &&
!target.classList.contains("window_flag") &&
!target.classList.contains("wall_item_flag")
) {
target = target.parentElement;
}
target?.classList.add("drag-enter");
}
},
onDragLeave(e: DragEvent) {
let target = e.target as any;
if (target) {
target.classList.remove("drag-enter");
}
let target: HTMLElement = e.target as HTMLElement;
target?.classList.remove("drag-enter");
},
onDragOver(e: DragEvent) {
@ -467,6 +555,9 @@ export default defineComponent({
}
}
},
windowFocusIn(window_id: number) {
GlobalData.getInstance().getCurrentClient()?.focusIn(window_id);
},
closeOtherWindows(window_id: number) {
console.log(window_id);
for (const window of $store.state.windows) {