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-24 16:06:16 +08:00
parent 80422c14b5
commit cabf9ba04d
11 changed files with 681 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -15,14 +15,14 @@
"axios": "^0.21.1",
"core-js": "^3.6.5",
"element-resize-detector": "^1.2.3",
"quasar": "^2.4.10",
"quasar": "^2.4.12",
"reconnecting-websocket": "^4.4.0",
"v-viewer": "^3.0.9",
"vue-i18n": "^9.0.0-beta.0",
"vuex": "^4.0.1"
},
"devDependencies": {
"@quasar/app": "^3.2.7",
"@quasar/app": "^3.2.9",
"@types/node": "^10.17.15",
"workbox-webpack-plugin": "^6.0.0"
},

BIN
public/source_icon/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 832 B

1
src/common/Common.ts
View File

@ -17,6 +17,7 @@ export namespace Common {
["EwindowType::Ppt", "img:source_icon/ppt.png"],
["EwindowType::Rtsp", "img:source_icon/rtsp.png"],
["EwindowType::Subtitles", "img:source_icon/subtitles.png"],
["EwindowType::Clock", "img:source_icon/clock.png"],
["EwindowType::Weather", "img:source_icon/weather.png"],
["EwindowType::HdmiIn", "img:source_icon/hdmi.png"],
]);

37
src/components/BackgroundImageDialog.vue
View File

@ -153,20 +153,31 @@ export default defineComponent({
file_count.value = 0;
},
showBackgroundImage() {
viewerApi({
options: {
toolbar: true,
url: "data-source",
initialViewIndex: 0,
},
images: [
{
src: "http://127.0.0.1:61429/static/default_background.png",
"data-source":
"http://127.0.0.1:61429/static/default_background.png",
const temp_port =
GlobalData.getInstance().applicationConfig?.httpserver_port ??
HttpProtocol.DefaultHttpPort.toString();
try {
const url = new URL(
GlobalData.getInstance().getCurrentClient()?.url ??
"http://127.0.0.1:" + temp_port
);
url.protocol = "http";
url.port = temp_port.toString();
url.pathname = "/static/background_image.png";
viewerApi({
options: {
toolbar: true,
url: "data-source",
initialViewIndex: 0,
},
],
});
images: [
{
src: url.toString(),
"data-source": url.toString(),
},
],
});
} catch {}
},
async onSubmit() {
if (file_count.value <= 0) {

223
src/components/ClockSignalSourceDialog.vue Normal file
View File

@ -0,0 +1,223 @@
<template>
<q-dialog persistent v-model="show_dialog" @before-hide="resetData">
<q-card class="overflow-hidden" style="overflow-y: scroll; max-width: 60vw">
<q-form @submit="onSubmit">
<q-card-section class="q-ma-none q-pa-sm">
<div class="row">
<div class="col-auto text-h6">
{{ $t("clock") }}
</div>
<q-space />
<div>
<q-btn
:loading="loading"
flat
round
icon="close"
color="red"
v-close-popup
>
<q-tooltip>
{{ $t("close") }}
</q-tooltip>
</q-btn>
</div>
</div>
</q-card-section>
<q-separator />
<q-card-section
style="max-height: 50vh; width: 55vw; height: 50vh"
class="scroll"
>
<q-list>
<q-item v-if="false">
<q-item-section avatar class="head_1">
{{ $t("font name") }}
</q-item-section>
<q-item-section>
<q-input v-model="clock_entity.font_name" />
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("font size") }}
</q-item-section>
<q-item-section>
<q-input v-model="clock_entity.font_size" type="number" />
</q-item-section>
<q-item-section avatar>
<q-checkbox
v-model="clock_entity.bold"
left-label
:label="$t('font bold')"
/>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("font color") }}
</q-item-section>
<q-item-section>
<q-input
v-model="clock_entity.font_color"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="clock_entity.font_color" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("background color") }}
</q-item-section>
<q-item-section>
<q-input
v-model="clock_entity.background_color"
:rules="['anyColor']"
>
<template v-slot:append>
<q-icon name="colorize" class="cursor-pointer">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-color v-model="clock_entity.background_color" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
<q-item-section avatar>
<q-checkbox
v-model="clock_entity.background_transparent"
left-label
:label="$t('background transparent')"
/>
</q-item-section>
</q-item>
</q-list>
</q-card-section>
<q-separator />
<q-card-actions>
<q-space />
<q-btn
:loading="loading"
flat
:label="$t('close and reset')"
color="primary"
v-close-popup
/>
<q-btn
ref="accept"
flat
:label="$t('close and save')"
:loading="loading"
type="submit"
color="primary"
/>
</q-card-actions>
</q-form>
</q-card>
</q-dialog>
<file-manage-dialog ref="file_manage_dialog" />
</template>
<style scoped>
.head_1 {
width: 15%;
}
</style>
<script lang="ts">
import { defineComponent, ref, Ref, watch, computed } from "vue";
import { useStore } from "src/store";
import GlobalData from "src/common/GlobalData";
import { useQuasar } from "quasar";
import { useI18n } from "vue-i18n";
import ClockWindowParamEntity from "src/entities/ClockWindowParamEntity";
export default defineComponent({
name: "ComponentClockSignalSourceDialog",
components: {},
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let loading = ref(false);
let clock_entity: Ref<ClockWindowParamEntity> = ref(
new ClockWindowParamEntity()
);
let _resolove: any = null;
const initialize_properties = (json: string) => {
if (json) {
try {
const temp = JSON.parse(json);
clock_entity.value = temp;
} catch {}
}
};
return {
show_dialog,
loading,
clock_entity,
showDialogAsync(options: any) {
if (_resolove) {
_resolove();
_resolove = null;
}
show_dialog.value = true;
initialize_properties(options);
return new Promise((resolove) => {
_resolove = resolove;
});
},
resetData() {
loading.value = false;
if (_resolove) {
_resolove();
_resolove = null;
}
},
async onSubmit() {
loading.value = true;
try {
if (_resolove) {
try {
clock_entity.value.font_size = parseInt(
clock_entity.value.font_size.toString()
);
_resolove(JSON.stringify(clock_entity.value));
} catch {
_resolove();
}
}
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

22
src/components/SignalSourceDialog.vue
View File

@ -144,6 +144,8 @@
media_url_label.startsWith($t('file path')) &&
item_data.window_type == 'EwindowType::Image'
? doSelectFile()
: item_data.window_type == 'EwindowType::Clock'
? showClockDialog()
: showPlaylistDialog()
"
v-model="item_data.media_url"
@ -264,6 +266,7 @@
</q-card>
<playlist-dialog ref="playlist_dialog" />
<file-manage-dialog ref="file_manage_dialog" />
<clock-signal-source-dialog ref="clock_dialog" />
</q-dialog>
</template>
@ -292,11 +295,12 @@ 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 ClockSignalSourceDialog from "src/components/ClockSignalSourceDialog.vue";
import FileEntity from "src/entities/FileEntity";
export default defineComponent({
name: "ComponentSignalSourceDialog",
components: { FileManageDialog, PlaylistDialog },
components: { FileManageDialog, PlaylistDialog, ClockSignalSourceDialog },
setup() {
let $store = useStore();
@ -311,6 +315,7 @@ export default defineComponent({
const selected: any = ref(null);
let loading = ref(false);
let playlist_dialog: any = ref(null);
let clock_dialog: any = ref(null);
let file_manage_dialog: any = ref(null);
let suppored_window_types = new Set<string>([
@ -318,6 +323,7 @@ export default defineComponent({
"EwindowType::Web",
"EwindowType::Image",
"EwindowType::Rtsp",
"EwindowType::Clock",
]);
let signal_source_options = [
@ -337,6 +343,10 @@ export default defineComponent({
label: $t.t("rtsp"),
value: "EwindowType::Rtsp",
},
{
label: $t.t("clock"),
value: "EwindowType::Clock",
},
];
const tree_nodes = computed({
@ -426,6 +436,7 @@ export default defineComponent({
loading,
tree_nodes,
playlist_dialog,
clock_dialog,
file_manage_dialog,
showDialog(options: any) {
if (options) {
@ -471,6 +482,15 @@ export default defineComponent({
} catch {}
loading.value = false;
},
async showClockDialog() {
if (item_data.window_type != "EwindowType::Clock") {
return;
}
const result = await clock_dialog.value.showDialogAsync(
item_data.media_url
);
item_data.media_url = decodeURI(result);
},
async showPlaylistDialog() {
if (item_data.window_type != "EwindowType::Multimedia") {
return;

64
src/components/Window.vue
View File

@ -60,34 +60,36 @@
>
<q-item-section> {{ $t("close all windwos") }} </q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('start_polling', $props.window.window_id)"
v-if="!$props.window.polling"
>
<q-item-section> {{ $t("start polling") }} </q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('stop_polling', $props.window.window_id)"
v-else
>
<q-item-section>
{{ $t("stop polling") }}
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable || $props.window.polling"
@click="$emit('polling_setting', $props.window.window_id)"
>
<q-item-section> {{ $t("polling setting") }} </q-item-section>
</q-item>
<div v-if="!is_clock_window">
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('start_polling', $props.window.window_id)"
v-if="!$props.window.polling"
>
<q-item-section> {{ $t("start polling") }} </q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable"
@click="$emit('stop_polling', $props.window.window_id)"
v-else
>
<q-item-section>
{{ $t("stop polling") }}
</q-item-section>
</q-item>
<q-item
clickable
v-close-popup
:disable="$props.disable || $props.window.polling"
@click="$emit('polling_setting', $props.window.window_id)"
>
<q-item-section> {{ $t("polling setting") }} </q-item-section>
</q-item>
</div>
</q-list>
</q-popup-proxy>
<div class="row title_bar full-width">
@ -385,10 +387,15 @@ export default defineComponent({
window_type == "EwindowType::HdmiIn"
);
};
const is_audo_player_window = computed(() =>
calc_is_audio_player_window(signal_source.value.window_type)
);
const is_clock_window = computed(() => {
return signal_source.value.window_type == "EwindowType::Clock";
});
reload_signal_source();
watch(props, (a, b) => {
reload_signal_source();
@ -461,6 +468,7 @@ export default defineComponent({
can_resize,
flags,
is_audo_player_window,
is_clock_window,
calc_is_audio_player_window,
onClick(evt: PointerEvent) {

10
src/entities/ClockWindowParamEntity.ts Normal file
View File

@ -0,0 +1,10 @@
export default class ClockWindowParamEntity {
font_name = "Arial";
font_size = 9;
bold = false;
strike_out = false;
underline = false;
font_color = "#000000";
background_color = "#000000";
background_transparent = true;
}

2
src/entities/HttpProtocol.ts
View File

@ -1,5 +1,5 @@
export namespace HttpProtocol {
export const DefaultHttpPort = 61429;
export const DefaultHttpPort = 80;
export const RequestUploadFile = "/upload_file";
export const RequestPathUpdateDBBackupFile = "/common/update_db_backup_file";
export const RequestPathDBBackup = "/db_backup";

10
src/i18n/zh-CN/index.ts
View File

@ -60,12 +60,12 @@ export default {
"multimedia file": "多媒体文件",
Web: "网页",
image: "图片",
rtsp: "RTSP视频流",
rtsp: "网络视频",
"media url": "媒体 RUL",
"please input media url": "请输入媒体 RUL",
"please input": "请输入",
"http url": "HTTP超链接",
"RTSP url": "RTSP链接",
"RTSP url": "网络地址",
"file path": "文件路径",
"wall row": "行",
@ -308,4 +308,10 @@ export default {
"unmuted now": "现在没有静音",
"polling now": "正在轮询窗口",
"running now": "正在运行",
clock: "时钟",
"font bold": "字体加粗",
"font size": "字体大小",
"font name": "字体",
"font color": "字体颜色",
"new signal source": "新建信号源",
};

693
yarn.lock
View File

File diff suppressed because it is too large Load Diff