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

添加多媒体控制组件

This commit is contained in:
fangxiang 2022-01-18 16:09:15 +08:00
parent 8fe3ab127e
commit fa2f8c76cf
10 changed files with 362 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/common/ClientConnection.ts
View File

@ -626,24 +626,46 @@ export default class ClientConnection {
}
}
public async setWindowVolume(window_id: number, volume: number) {
try {
return await this.doRpc<Protocol.NoneResponse>(
this.ws?.send(
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>(
new Protocol.UnMuteWindowRequestEntity(window_id, 0)
this.ws?.send(
JSON.stringify(new Protocol.UnMuteWindowRequestEntity(window_id, 0))
);
}
public async muteWindow(window_id: number) {
return await this.doRpc<Protocol.NoneResponse>(
new Protocol.MuteWindowRequestEntity(window_id, 0)
this.ws?.send(
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))
);
}

37
src/components/SignalSourceDialog.vue
View File

@ -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;
});
}
}
}
},
};
},
});

1
src/components/Window.vue
View File

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

2
src/entities/MultimediaWindowEntity.ts
View File

@ -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;
}

64
src/entities/WSProtocol.ts
View File

@ -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;

13
src/layouts/MainLayout.vue
View File

@ -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>

6
src/pages/Index.vue
View File

@ -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();

199
src/pages/MediaControlPage.vue Normal file
View File

@ -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>

12
src/pages/WallPage.vue
View File

@ -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
);

5
src/store/index.ts
View File

@ -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!)