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

信号源增加计时器

This commit is contained in:
fangxiang 2022-05-31 16:56:38 +08:00
parent 5fc90ad0bf
commit c8b3591d35
10 changed files with 527 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "media_player_client",
"version": "1.4.11",
"version": "1.4.12",
"description": "A Quasar Framework app",
"productName": "MediaPlayerClient",
"author": "fangxiang <fangxiang@cloudview.work>",

BIN
public/pad/source_icon/timer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

1
src/common/Common.ts
View File

@ -20,6 +20,7 @@ export namespace Common {
["EwindowType::Clock", "img:source_icon/clock.png"],
["EwindowType::Weather", "img:source_icon/weather.png"],
["EwindowType::HdmiIn", "img:source_icon/hdmi.png"],
["EwindowType::Timer", "img:source_icon/timer.png"],
]);
if (icon_map.has(item_type)) {

37
src/components/SignalSourceDialog.vue
View File

@ -159,22 +159,27 @@
? showClockDialog()
: item_data.window_type == 'EwindowType::Weather'
? showWeatherDialog()
: showPlaylistDialog('.mp4;.avi;.ts;.webm;.flv;.mkv')
: item_data.window_type == 'EwindowType::Timer'
? showTimerDialog()
: showPlaylistDialog('.mp4;.avi;.ts;.webm;.flv;.mkv;.wmv')
"
v-model="item_data.media_url"
:readonly="
media_url_label.startsWith($t('file path')) ||
media_url_label.startsWith($t('clock')) ||
media_url_label.startsWith($t('weather'))
media_url_label.startsWith($t('weather')) ||
media_url_label.startsWith($t('timer'))
"
:label="media_url_label"
:hint="
media_url_label.startsWith($t('file path'))
? $t('dbclick select file')
: media_url_label.startsWith($t('clock'))
? $t('dbclick config clock')
? $t('dbclick config') + $t('clock')
: media_url_label.startsWith($t('weather'))
? $t('dbclick config weather')
? $t('dbclick config') + $t('weather')
: media_url_label.startsWith($t('timer'))
? $t('dbclick config') + $t('timer')
: $t('please input') +
media_url_label.substr(0, media_url_label.length - 1)
"
@ -289,6 +294,7 @@
<file-manage-dialog ref="file_manage_dialog" />
<clock-signal-source-dialog ref="clock_dialog" />
<weather-signal-source-dialog ref="weather_dialog" />
<timer-signal-source-dialog ref="timer_dialog" />
</q-dialog>
</template>
@ -319,6 +325,7 @@ import FileManageDialog from "src/components/FileManageDialog.vue";
import PlaylistDialog from "src/components/PlaylistDialog.vue";
import ClockSignalSourceDialog from "src/components/ClockSignalSourceDialog.vue";
import WeatherSignalSourceDialog from "src/components/WeatherSignalSourceDialog.vue";
import TimerSignalSourceDialog from "src/components/TimerSignalSourceDialog.vue";
import FileEntity from "src/entities/FileEntity";
@ -329,6 +336,7 @@ export default defineComponent({
PlaylistDialog,
ClockSignalSourceDialog,
WeatherSignalSourceDialog,
TimerSignalSourceDialog,
},
setup() {
@ -346,6 +354,7 @@ export default defineComponent({
let playlist_dialog: any = ref(null);
let clock_dialog: any = ref(null);
let weather_dialog: any = ref(null);
let timer_dialog: any = ref(null);
let file_manage_dialog: any = ref(null);
let suppored_window_types = new Set<string>([
@ -355,6 +364,7 @@ export default defineComponent({
"EwindowType::Rtsp",
"EwindowType::Clock",
"EwindowType::Weather",
"EwindowType::Timer",
]);
let signal_source_options = [
@ -382,6 +392,10 @@ export default defineComponent({
label: $t.t("weather"),
value: "EwindowType::Weather",
},
{
label: $t.t("timer"),
value: "EwindowType::Timer",
},
];
const tree_nodes = computed({
@ -421,6 +435,9 @@ export default defineComponent({
case "EwindowType::Weather":
media_url_label.value = $t.t("weather setting") + ":";
break;
case "EwindowType::Timer":
media_url_label.value = $t.t("timer setting") + ":";
break;
default:
media_url_label.value = $t.t("file path") + ":";
break;
@ -479,6 +496,7 @@ export default defineComponent({
playlist_dialog,
clock_dialog,
weather_dialog,
timer_dialog,
file_manage_dialog,
showDialog(options: any) {
if (options) {
@ -546,6 +564,17 @@ export default defineComponent({
item_data.media_url = decodeURI(result);
}
},
async showTimerDialog() {
if (item_data.window_type != "EwindowType::Timer") {
return;
}
const result = await timer_dialog.value.showDialogAsync(
item_data.media_url
);
if (result) {
item_data.media_url = decodeURI(result);
}
},
async showPlaylistDialog(filter: string) {
if (item_data.window_type != "EwindowType::Multimedia") {
return;

455
src/components/TimerSignalSourceDialog.vue Normal file
View File

@ -0,0 +1,455 @@
<template>
<q-dialog
persistent
v-model="show_dialog"
@before-hide="resetData"
@keydown="
(evt) => {
if (!loading && evt.keyCode == 27) {
show_dialog = false;
}
}
"
>
<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("timer") }}
</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: 68vh; width: 55vw" class="scroll">
<q-list>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("timer type") }}
</q-item-section>
<q-item-section>
<q-select
v-model="timer_entity.direction"
:options="[
{
label: $t('forward timer'),
value: true,
},
{
label: $t('backward timer'),
value: false,
},
]"
emit-value
map-options
>
</q-select>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("timer mode") }}
</q-item-section>
<q-item-section>
<q-select
v-model="timer_entity.is_relative_time"
:options="[
{
label: $t('relative time'),
value: true,
},
{
label: $t('absolute time'),
value: false,
},
]"
emit-value
map-options
>
</q-select>
</q-item-section>
</q-item>
<q-item v-if="timer_entity.is_relative_time">
<q-item-section avatar class="head_1">
{{ $t("duration") }}
</q-item-section>
<q-item-section>
<q-input
v-model="timer_entity.relative_time_s"
type="number"
min="0"
max="4294967295"
lazy-rules
:rules="[
(val) =>
(val && val.toString().length > 0) ||
$t('Please type something'),
]"
>
<template v-slot:append>
<span>{{ $t("second") }}</span>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item v-else>
<q-item-section avatar class="head_1">
{{
timer_entity.direction ? $t("start time") : $t("target time")
}}
</q-item-section>
<q-item-section>
<q-input
filled
v-model="timer_entity.absolute_time"
:rules="[
(v) =>
(v &&
/^(\d{4})\/(\d{2})\/(\d{2}) (\d{2}):(\d{2}):(\d{2})$/.test(
v
)) ||
$t('zzzzz'),
]"
lazy-rules
:hint="
$t('example: 2022/01/01 00:00:00') +
'(' +
$t(
'the start time should not exceed the current time, and the target time should not be less than the current time'
) +
')'
"
>
<template v-slot:prepend>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-date
v-model="timer_entity.absolute_time"
mask="YYYY/MM/DD HH:mm:ss"
now-btn
with-seconds
>
<div class="row items-center justify-end">
<q-btn
v-close-popup
label="Close"
color="primary"
flat
/>
</div>
</q-date>
</q-popup-proxy>
</q-icon>
</template>
<template v-slot:append>
<q-icon name="access_time" class="cursor-pointer">
<q-popup-proxy
cover
transition-show="scale"
transition-hide="scale"
>
<q-time
v-model="timer_entity.absolute_time"
mask="YYYY/MM/DD HH:mm:ss"
format24h
now-btn
with-seconds
>
<div class="row items-center justify-end">
<q-btn
v-close-popup
label="Close"
color="primary"
flat
/>
</div>
</q-time>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</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="timer_entity.font_size"
type="number"
lazy-rules
:rules="[
(val) =>
(val && val.toString().length > 0) ||
$t('Please type something'),
]"
>
<template v-slot:append>
<span>pt</span>
</template>
</q-input>
</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="timer_entity.text_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="timer_entity.text_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
:disable="timer_entity.background_transparent"
v-model="timer_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="timer_entity.background_color" />
</q-popup-proxy>
</q-icon>
</template>
</q-input>
</q-item-section>
</q-item>
<q-item>
<q-item-section avatar class="head_1">
{{ $t("text") }}
</q-item-section>
<q-item-section>
<q-input v-model="timer_entity.text" />
</q-item-section>
</q-item>
<q-item>
<q-item-section>
<q-checkbox
v-model="timer_entity.background_transparent"
left-label
:label="$t('background transparent')"
>
</q-checkbox>
</q-item-section>
<q-item-section>
<q-checkbox
left-label
v-model="timer_entity.multiple_lines"
:label="$t('multiple lines')"
>
</q-checkbox>
</q-item-section>
<q-item-section>
<q-checkbox
left-label
v-model="timer_entity.show_second"
:label="$t('second')"
>
</q-checkbox>
</q-item-section>
<q-item-section>
<q-checkbox
left-label
v-model="timer_entity.show_minute"
:label="$t('minute')"
>
</q-checkbox>
</q-item-section>
<q-item-section>
<q-checkbox
left-label
v-model="timer_entity.show_hour"
:label="$t('hour_2_')"
>
</q-checkbox>
</q-item-section>
<q-item-section>
<q-checkbox
left-label
v-model="timer_entity.show_day"
:label="$t('day')"
>
</q-checkbox>
</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>
</template>
<style scoped>
.head_1 {
width: 25%;
}
.head_2 {
width: 12%;
}
</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, date as DateHelper } from "quasar";
import { useI18n } from "vue-i18n";
import TimerWidgetWindowParamEntity from "src/entities/TimerWidgetWindowParamEntity";
export default defineComponent({
name: "ComponentTimerSignalSourceDialog",
components: {},
setup() {
let $store = useStore();
let $q = useQuasar();
let $t = useI18n();
let show_dialog = ref(false);
let loading = ref(false);
const timer_date = ref("2022/01/01");
const timer_time = ref("00:00:00");
let timer_entity: Ref<TimerWidgetWindowParamEntity> = ref(
new TimerWidgetWindowParamEntity()
);
let _resolove: any = null;
const initialize_properties = (json: string) => {
if (json) {
try {
const temp = JSON.parse(json);
for (const item of Object.keys(timer_entity.value)) {
if (typeof temp[item] != "undefined") {
(<any>timer_entity.value)[item] = temp[item];
}
}
} catch {}
}
};
return {
show_dialog,
loading,
timer_entity,
timer_date,
timer_time,
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 {
timer_entity.value.font_size = parseInt(
timer_entity.value.font_size.toString()
);
timer_entity.value.relative_time_s = parseInt(
timer_entity.value.relative_time_s.toString()
);
_resolove(JSON.stringify(timer_entity.value));
} catch {
_resolove();
}
}
show_dialog.value = false;
} catch {}
loading.value = false;
},
};
},
});
</script>

17
src/entities/TimerWidgetWindowParamEntity.ts Normal file
View File

@ -0,0 +1,17 @@
export default class TimerWidgetWindowParamEntity {
direction = true;
font_size = 25;
text_color = "#000000";
background_color = "#000000";
background_transparent = true;
text = "";
is_relative_time = true;
relative_time_s = 60;
absolute_time = "2022/01/01 00:00:00";
show_second = true;
show_minute = false;
show_hour = false;
show_day = false;
multiple_lines = false;
note = "";
}

1
src/i18n/en-US/index.ts
View File

@ -24,4 +24,5 @@ export default {
"edit window rect": "Window Size Adjust",
"set the window rectangle beyond the desktop rectangle, the window rectangle will be clipped, are you sure to use this window rectangle":
"if the window size exceeds the desktop size, the window size will be clipped. Are you sure to use this window size",
hour_2_: "hour",
};

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

@ -556,4 +556,22 @@ export default {
english: "英文",
chinese: "中文",
"hour mark color": "时标",
timer: "计时器",
"dbclick config": "双击配置",
"timer setting": "计时器设置",
"timer type": "计时器类型",
"forward timer": "正计时",
"backward timer": "倒计时",
"example: 2022/01/01 00:00:00": "例: 2022/01/01 00:00:00",
"timer mode": "计时方式",
"relative time": "相对时间",
"absolute time": "绝对时间",
second: "秒",
duration: "时长",
"start time": "起始时间",
"target time": "目标时间",
minute: "分",
hour_2_: "时",
"the start time should not exceed the current time, and the target time should not be less than the current time":
"正计时的时候起始时间不要超过当前时间，倒计时的时候目标时间不要小于当前时间",
};

1
src/pad/BottomBar.vue
View File

@ -381,6 +381,7 @@ export default defineComponent({
["EwindowType::Clock", "img:pad/source_icon/clock.png"],
["EwindowType::Weather", "img:pad/source_icon/weather.png"],
["EwindowType::HdmiIn", "img:pad/source_icon/hdmi_in.png"],
["EwindowType::HdmiIn", "img:pad/source_icon/timer.png"],
]);
if (icon_map.has(item_type)) {