@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/seek-bar/basic.vue

@@ -0,0 +1,191 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <s-text-button text="按钮" />
+      <qt-seek-bar
+        ref="seekBarRef"
+        class="es-range-seek-bar-css"
+        :enableFocusBorder="true"
+        :focusable="true"
+        @seek-change="onSeekBarChange"
+        @focus="onFocusChange"
+      />
+      <s-text-button text="按钮" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESKeyCode, ESLogLevel, useESLog } from "@extscreen/es3-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+const TAG = "ESRangeSeekBar";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    const log = useESLog();
+
+    const seekBarRef = ref<QTISeekBar>();
+    const focused = ref(false);
+    const progress = ref(0);
+    const maxProgress = ref(200);
+
+    const seekStep = ref(0);
+    const seekBarMode = ref(0);
+
+    let progressTimer = null;
+    let seekIntervalTime = null;
+
+    function onESCreate() {
+      initESSeekBar();
+    }
+
+    function onSeekBarChange(event) {
+      const progress = event.progress;
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, `--------onSeekBarChange------>>>>>${progress}`);
+      }
+    }
+
+    function onFocusChange(event) {
+      focused.value = event.isFocused;
+      seekBarRef.value?.setThumbActivate(focused.value);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          `${event.isFocused}-----onFocusChange------>>>>>${focused.value}`,
+        );
+      }
+    }
+
+    function initESSeekBar() {
+      seekBarRef.value?.setSeekBarMode(1);
+      seekBarRef.value?.setProgressHeight(10);
+      seekBarRef.value?.setGravity(2);
+      seekBarRef.value?.setProgressRadius(10);
+      seekBarRef.value?.setRange(0, maxProgress.value, 10);
+
+      seekBarRef.value?.setProgressColor("0xffff3823");
+      seekBarRef.value?.setProgressDefaultColor("0xffdcdcdc");
+
+      seekBarRef.value?.setThumbWidth(40);
+      seekBarRef.value?.setThumbHeight(40);
+
+      seekBarRef.value?.setThumbUrl(
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/02/08/40a9ad3c-ec51-41b3-b144-a215b2e809a5.png",
+      );
+      seekBarRef.value?.setThumbInactivatedUrl(
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image/2023/02/08/6115d0e3-5f59-4d36-be44-95cca74caf37.png",
+      );
+
+      progressTimer = setInterval(() => {
+        if (isSeekMode()) {
+          return;
+        }
+        progress.value = progress.value + 2;
+        if (progress.value > maxProgress.value) {
+          return;
+        }
+        seekBarRef.value?.setProgress(progress.value);
+      }, 1000);
+    }
+
+    function isSeekBarFocused() {
+      return focused.value;
+    }
+
+    function startSeek(forward) {
+      seekBarMode.value = 1;
+      seekStep.value += 1;
+      let base = 1;
+      if (seekStep.value > 20) {
+        base = 2;
+      } else if (seekStep.value > 50) {
+        base = 4;
+      } else if (seekStep.value > 100) {
+        base = 6;
+      }
+      const duration = maxProgress.value;
+      const seekProgress = Math.floor(duration * 0.01 * base);
+      progress.value =
+        progress.value + (forward ? seekProgress : -seekProgress);
+
+      if (progress.value > duration) {
+        progress.value = duration;
+      } else if (progress.value < 0) {
+        progress.value = 0;
+      }
+
+      const now = Date.now();
+      if (now - seekIntervalTime > 50) {
+        seekBarRef.value?.setProgress(progress.value);
+        seekIntervalTime = now;
+      }
+    }
+
+    function stopSeek() {
+      seekBarMode.value = 0;
+      seekStep.value = 0;
+    }
+
+    function isSeekMode() {
+      return seekBarMode.value === 1;
+    }
+
+    function onKeyDown(keyEvent) {
+      if (
+        keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_LEFT ||
+        keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT
+      ) {
+        if (isSeekBarFocused()) {
+          startSeek(keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT);
+        }
+      }
+    }
+
+    function onKeyUp(keyEvent) {
+      if (
+        keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_LEFT ||
+        keyEvent.keyCode === ESKeyCode.ES_KEYCODE_DPAD_RIGHT
+      ) {
+        if (isSeekBarFocused()) {
+          stopSeek();
+        }
+      }
+    }
+
+    function onESDestroy() {
+      if (progressTimer) {
+        clearInterval(progressTimer);
+      }
+    }
+
+    return {
+      seekBarRef,
+      focused,
+      progress,
+      maxProgress,
+      seekStep,
+      seekBarMode,
+      onESCreate,
+      onSeekBarChange,
+      onFocusChange,
+      initESSeekBar,
+      isSeekBarFocused,
+      startSeek,
+      stopSeek,
+      isSeekMode,
+      onKeyDown,
+      onKeyUp,
+      onESDestroy,
+    };
+  },
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/seek-bar/indicator.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <qt-seek-bar
+        ref="seekBarRef"
+        class="es-range-seek-bar-css"
+        style="height: 500px"
+        :enableFocusBorder="true"
+        :focusable="true"
+        :requestFocus="true"
+        focusScale="1.1"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "提示框",
+  setup() {
+    const progressRef = ref(0);
+    const seekBarRef = ref<QTISeekBar>();
+
+    function onESCreate() {
+      initESSeekBar();
+    }
+
+    function initESSeekBar() {
+      seekBarRef.value?.setSeekBarMode(1);
+      seekBarRef.value?.setProgressHeight(10);
+      seekBarRef.value?.setGravity(2);
+      seekBarRef.value?.setProgressRadius(100);
+      seekBarRef.value?.setProgress(20);
+
+      //
+      seekBarRef.value?.setIndicatorShowMode(3);
+      seekBarRef.value?.setIndicatorWidth(100);
+      seekBarRef.value?.setIndicatorHeight(100);
+
+      seekBarRef.value?.setIndicatorBackgroundColor("0xffff0000");
+      seekBarRef.value?.setIndicatorRadius(20);
+
+      seekBarRef.value?.setIndicatorArrowSize(10);
+      seekBarRef.value?.setIndicatorTextColor("0xffff00ff");
+      seekBarRef.value?.setIndicatorTextSize(50);
+      seekBarRef.value?.setIndicatorMargin(20);
+
+      //设置dr
+      const indicatorDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 0,
+        orientation: 6,
+      };
+      seekBarRef.value?.setIndicatorDrawable(indicatorDrawable);
+      // seekBarRef.value?.setIndicatorUrl('https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/02/22/f241e7e7-f9d0-407a-9dc1-24c88a361594.jpg');
+    }
+
+    return {
+      progressRef,
+      seekBarRef,
+      onESCreate,
+      initESSeekBar,
+    };
+  },
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/seek-bar/range-mode.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <qt-seek-bar
+        ref="seekBarRef"
+        class="es-range-seek-bar-css"
+        style="height: 500px"
+        :focusable="true"
+        focusScale="1.1"
+        @seek-change="onSeekBarChange"
+        @focus="onFocusChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+const TAG = "ESSeekBar";
+
+export default defineComponent({
+  name: "范围模式",
+  setup() {
+    const log = useESLog();
+    const progressRef = ref(0);
+    const seekBarRef = ref<QTISeekBar>();
+
+    function onESCreate() {
+      initESSeekBar();
+    }
+
+    function onSeekBarChange(event) {
+      const progress = event.progress;
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, `--------onSeekBarChange------>>>>>${progress}`);
+      }
+    }
+
+    function onFocusChange(event) {
+      const focused = event.isFocused;
+      seekBarRef.value?.setThumbActivate(focused);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, `--------onFocusChange------>>>>>${focused}`);
+      }
+    }
+
+    function initESSeekBar() {
+      seekBarRef.value?.setSeekBarMode(2);
+      setInterval(() => {
+        progressRef.value = progressRef.value + 10;
+        seekBarRef.value?.setRangeProgress(
+          progressRef.value,
+          100 - progressRef.value,
+        );
+      }, 1000);
+      seekBarRef.value?.setProgressHeight(30);
+      seekBarRef.value?.setRange(10, 100, 0);
+      seekBarRef.value?.setGravity(2);
+      seekBarRef.value?.setProgressRadius(100);
+      //
+      seekBarRef.value?.setRangeProgress(10, 100);
+      //
+      seekBarRef.value?.setProgressColor("0xffff0000");
+      seekBarRef.value?.setProgressDefaultColor("0xffff00ff");
+
+      seekBarRef.value?.setLeftThumbWidth(40);
+      seekBarRef.value?.setLeftThumbHeight(40);
+      //
+      const thumbDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setThumbDrawable(thumbDrawable);
+
+      const thumbInactivatedDrawable = {
+        colors: ["#ffff0000", "#ffff00ff"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);
+
+      seekBarRef.value?.setRightThumbWidth(40);
+      seekBarRef.value?.setRightThumbHeight(40);
+      const rightThumbDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setRightThumbDrawable(rightThumbDrawable);
+      const rightThumbInactivatedDrawable = {
+        colors: ["#ff00cccc", "#ffcc7700"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setRightThumbInactivatedDrawable(
+        rightThumbInactivatedDrawable,
+      );
+
+      //
+      seekBarRef.value?.setIndicatorShowMode(3);
+      seekBarRef.value?.setIndicatorWidth(100);
+      seekBarRef.value?.setIndicatorHeight(100);
+      seekBarRef.value?.setIndicatorBackgroundColor("0xffff0000");
+      seekBarRef.value?.setIndicatorRadius(100);
+      seekBarRef.value?.setIndicatorArrowSize(6);
+      seekBarRef.value?.setIndicatorTextColor("0xffff00ff");
+      seekBarRef.value?.setIndicatorTextSize(40);
+      seekBarRef.value?.setIndicatorMargin(20);
+    }
+
+    return {
+      progressRef,
+      seekBarRef,
+      onESCreate,
+      onSeekBarChange,
+      onFocusChange,
+      initESSeekBar,
+    };
+  },
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/seek-bar/single-mode.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <s-text-button text="按钮" />
+      <qt-seek-bar
+        ref="seekBarRef"
+        class="es-range-seek-bar-css"
+        style="height: 500px"
+        :focusable="true"
+        focusScale="1.1"
+        @seek-change="onSeekBarChange"
+        @focus="onFocusChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+const TAG = "ESSeekBar";
+
+export default defineComponent({
+  name: "单向模式",
+  setup() {
+    const log = useESLog();
+
+    const progressRef = ref(0);
+    const seekBarRef = ref<QTISeekBar>();
+
+    function onESCreate() {
+      initESSeekBar();
+    }
+
+    function onSeekBarChange(event) {
+      const progress = event.progress;
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, `--------onSeekBarChange------>>>>>${progress}`);
+      }
+    }
+
+    function onFocusChange(event) {
+      const focused = event.isFocused;
+      seekBarRef.value?.setThumbActivate(focused);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, `--------onFocusChange------>>>>>${focused}`);
+      }
+    }
+
+    function initESSeekBar() {
+      seekBarRef.value?.setSeekBarMode(1);
+      setInterval(() => {
+        progressRef.value = progressRef.value + 10;
+        seekBarRef.value?.setProgress(progressRef.value);
+      }, 1000);
+      seekBarRef.value?.setProgressHeight(30);
+      seekBarRef.value?.setRange(10, 100, 0);
+      seekBarRef.value?.setGravity(2);
+      seekBarRef.value?.setProgressRadius(100);
+
+      seekBarRef.value?.setProgress(10);
+      //
+      seekBarRef.value?.setProgressColor("0xffff0000");
+      seekBarRef.value?.setProgressDefaultColor("0xffff00ff");
+
+      seekBarRef.value?.setThumbWidth(40);
+      seekBarRef.value?.setThumbHeight(40);
+
+      //
+
+      const thumbDrawable = {
+        colors: ["#ffff00FF", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setThumbDrawable(thumbDrawable);
+
+      const thumbInactivatedDrawable = {
+        colors: ["#ffff0000", "#ffff00ff"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarRef.value?.setThumbInactivatedDrawable(thumbInactivatedDrawable);
+      //
+      seekBarRef.value?.setIndicatorShowMode(3);
+      seekBarRef.value?.setIndicatorWidth(100);
+      seekBarRef.value?.setIndicatorHeight(100);
+      seekBarRef.value?.setIndicatorBackgroundColor("0xffff0000");
+      seekBarRef.value?.setIndicatorRadius(100);
+      seekBarRef.value?.setIndicatorArrowSize(6);
+      seekBarRef.value?.setIndicatorTextColor("0xffff00ff");
+      seekBarRef.value?.setIndicatorTextSize(40);
+      seekBarRef.value?.setIndicatorMargin(20);
+    }
+
+    return {
+      progressRef,
+      seekBarRef,
+      onESCreate,
+      onSeekBarChange,
+      onFocusChange,
+      initESSeekBar,
+    };
+  },
+});
+</script>
+
+<style></style>

package/rules/.docs/examples/component/seek-bar/step.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="es-sdk-root-css">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-column-css">
+      <qt-seek-bar
+        ref="seekBar"
+        class="es-range-seek-bar-css"
+        :enableFocusBorder="true"
+        :focusable="true"
+        :requestFocus="true"
+        focusScale="1.1"
+      />
+      <qt-seek-bar
+        ref="seekBarUrl"
+        class="es-range-seek-bar-css"
+        :enableFocusBorder="true"
+        :focusable="true"
+        :requestFocus="true"
+        focusScale="1.1"
+      />
+      <qt-seek-bar
+        ref="seekBarNone"
+        class="es-range-seek-bar-css"
+        :enableFocusBorder="true"
+        :focusable="true"
+        :requestFocus="true"
+        focusScale="1.1"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "@vue/runtime-core";
+import type { QTISeekBar } from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "分步",
+  setup() {
+    const seekBar = ref<QTISeekBar>();
+    const seekBarUrl = ref<QTISeekBar>();
+    const seekBarNone = ref<QTISeekBar>();
+
+    function onESCreate() {
+      initESSeekBar();
+      initESSeekBarUrl();
+      initESSeekBarNone();
+    }
+
+    function initESSeekBar() {
+      seekBar.value?.setSeekBarMode(1);
+      seekBar.value?.setProgressHeight(20);
+      seekBar.value?.setProgressWidth(1000);
+      seekBar.value?.setGravity(2);
+      seekBar.value?.setProgressRadius(10);
+      seekBar.value?.setProgress(40);
+
+      seekBar.value?.setProgressColor("0xffff2222");
+      seekBar.value?.setProgressDefaultColor("0xffff00ff");
+
+      seekBar.value?.setThumbWidth(40);
+      seekBar.value?.setThumbHeight(40);
+      //
+      seekBar.value?.setThumbActivate(true);
+      const thumbDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBar.value?.setThumbDrawable(thumbDrawable);
+
+      //------------------------------分步---------------------------------
+      seekBar.value?.setSteps(4);
+      seekBar.value?.setStepsWidth(40);
+      seekBar.value?.setStepsHeight(40);
+      seekBar.value?.setStepsAutoBonding(true);
+      seekBar.value?.setStepsRadius(100);
+      seekBar.value?.setStepsDrawable([
+        {
+          colors: ["#ffff4054", "#ffff0000"],
+          cornerRadius: 10,
+          orientation: 6,
+        },
+        {
+          colors: ["#ffff6347", "#ffff0000"],
+          cornerRadius: 10,
+          orientation: 6,
+        },
+        {
+          colors: ["#ffffafad", "#ffff0000"],
+          cornerRadius: 0,
+          orientation: 6,
+        },
+        {
+          colors: ["#ffff8247", "#ffff0000"],
+          cornerRadius: 10,
+          orientation: 6,
+        },
+        {
+          colors: ["#ffff00ff", "#ffff0000"],
+          cornerRadius: 10,
+          orientation: 6,
+        },
+      ]);
+    }
+
+    function initESSeekBarUrl() {
+      seekBarUrl.value?.setSeekBarMode(1);
+      seekBarUrl.value?.setProgressHeight(20);
+      seekBarUrl.value?.setProgressWidth(800);
+      seekBarUrl.value?.setGravity(2);
+      seekBarUrl.value?.setProgressRadius(10);
+      seekBarUrl.value?.setProgress(40);
+
+      seekBarUrl.value?.setProgressColor("0xffff2222");
+      seekBarUrl.value?.setProgressDefaultColor("0xffff00ff");
+
+      seekBarUrl.value?.setThumbWidth(40);
+      seekBarUrl.value?.setThumbHeight(40);
+      //
+      seekBarUrl.value?.setThumbActivate(true);
+      const thumbDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarUrl.value?.setThumbDrawable(thumbDrawable);
+      //------------------------------分步---------------------------------
+      seekBarUrl.value?.setSteps(4);
+      seekBarUrl.value?.setStepsWidth(100);
+      seekBarUrl.value?.setStepsHeight(100);
+      seekBarUrl.value?.setStepsAutoBonding(true);
+      seekBarUrl.value?.setStepsUrl([
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg",
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg",
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg",
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg",
+        "https://qcloudimg-moss.cp47.ott.cibntv.net/channelzero_image_test/2022/06/21/25311db1-2cba-4ed0-9339-13d2120c656b.jpg",
+      ]);
+    }
+
+    function initESSeekBarNone() {
+      seekBarNone.value?.setSeekBarMode(1);
+      seekBarNone.value?.setProgressHeight(20);
+      seekBarNone.value?.setProgressWidth(400);
+      seekBarNone.value?.setGravity(2);
+      seekBarNone.value?.setProgressRadius(10);
+      seekBarNone.value?.setProgress(40, 100);
+
+      seekBarNone.value?.setProgressColor("0xffff2222");
+      seekBarNone.value?.setProgressDefaultColor("0xffff00ff");
+
+      seekBarNone.value?.setThumbWidth(40);
+      seekBarNone.value?.setThumbHeight(40);
+      //
+      seekBarNone.value?.setThumbActivate(true);
+      const thumbDrawable = {
+        colors: ["#ffff00ff", "#ffff0000"],
+        cornerRadius: 100,
+        orientation: 6,
+      };
+      seekBarNone.value?.setThumbDrawable(thumbDrawable);
+      seekBarNone.value?.setStepsRadius(100);
+      //------------------------------分步---------------------------------
+      seekBarNone.value?.setSteps(4);
+      seekBarNone.value?.setStepsWidth(60);
+      seekBarNone.value?.setStepsHeight(60);
+      seekBarNone.value?.setStepsAutoBonding(true);
+      seekBarNone.value?.setStepsColor("0xffff0000");
+    }
+
+    return {
+      seekBar,
+      seekBarUrl,
+      seekBarNone,
+      onESCreate,
+      initESSeekBar,
+      initESSeekBarUrl,
+      initESSeekBarNone,
+    };
+  },
+});
+</script>
+
+<style></style>