信号源增加计时器

package.json

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

src/common/Common.ts

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

src/components/SignalSourceDialog.vue

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

src/components/TimerSignalSourceDialog.vue

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

src/entities/TimerWidgetWindowParamEntity.ts

@@ -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 = "";
+}

src/i18n/en-US/index.ts

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

src/i18n/zh-CN/index.ts

@@ -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":
+    "正计时的时候起始时间不要超过当前时间，倒计时的时候目标时间不要小于当前时间",
 };

src/pad/BottomBar.vue

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