@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/components/media/view/media-menu-detail-item.vue

@@ -0,0 +1,42 @@
+<template>
+  <qt-view
+    class="media-menu-detail-item-root-css"
+    eventClick
+    eventFocus
+    :focusable="true"
+  >
+    <qt-text
+      class="item-text"
+      :duplicateParentState="true"
+      :paddingRect="[30, 0, 0, 0]"
+      :focusable="false"
+      :fontSize="30"
+      gravity="center|start"
+      :lines="1"
+      text="${text}"
+    />
+    <img
+      class="item-icon"
+      showIf="${iconState==true}"
+      :focusable="false"
+      duplicateParentState
+      :src="selectedIcon"
+    />
+    <img
+      class="item-icon"
+      showOnState="focused"
+      :focusable="false"
+      duplicateParentState
+      :src="focusedIcon"
+    />
+  </qt-view>
+</template>
+
+<script lang="ts" setup name="media-menu-detail-item">
+import selectedIcon from "../../../assets/component-media/ic_media_ok_selected.png";
+import focusedIcon from "../../../assets/component-media/ic_media_ok_focused.png";
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="./scss/media-menu.scss"></style>

package/rules/.source/hellotv/src/components/media/view/media-menu-detail-view.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="media-menu-detail-root-css"
+    :visible="isShowView"
+    :gradientBackground="{ colors: ['#D9000000', '#00000000'], orientation: 2 }"
+  >
+    <span class="detail-title" :focusable="false">{{ title }}</span>
+    <qt-list-view
+      class="detail-list"
+      v-if="initMenu"
+      ref="detailListRef"
+      blockFocusDirections='["left","right","up", "down"]'
+      :singleSelectPosition="selectedIndex"
+      :listData="list"
+      :useDiff="true"
+      :enableSelectOnFocus="false"
+      @itemFocus="onItemFocus"
+      @itemClick="onItemClick"
+    >
+      <media-menu-detail-item :type="1" />
+    </qt-list-view>
+  </div>
+</template>
+
+<script lang="ts" setup name="media-menu-detail-view">
+import { QTIListView, QTListViewItem, qtRef } from "@quicktvui/quicktvui3";
+import { ref } from "vue";
+import MediaMenuDetailItem from "./media-menu-detail-item.vue";
+
+const emits = defineEmits(["onItemClicked", "onItemFocused"]);
+const props = defineProps({
+  //菜单名称
+  itemName: {
+    type: String,
+    default: "",
+  },
+  //菜单标题
+  title: {
+    type: String,
+    default: "",
+  },
+});
+//列表数据
+const list = qtRef<Array<QTListViewItem>>([]);
+const detailListRef = ref<QTIListView>();
+//是否展示整体 view
+const isShowView = ref(false);
+//是否初始化菜单
+const initMenu = ref(false);
+//默认选中项
+const selectedIndex = ref(-1);
+/**
+ * 初始化
+ */
+const init = () => {
+  if (!initMenu.value) {
+    initMenu.value = true;
+  }
+};
+/**
+ * 设置数据
+ * @param data
+ */
+const setList = (data: Array<QTListViewItem>) => {
+  if (list.value.length > 0) {
+    return;
+  }
+  list.value = data;
+};
+const showView = () => {
+  isShowView.value = true;
+  detailListRef.value?.setItemFocused(selectedIndex.value);
+};
+const dismissView = () => {
+  isShowView.value = false;
+};
+const getViewShowState = (): boolean => {
+  return isShowView.value;
+};
+const setSelectedIndex = (index) => {
+  if (index === selectedIndex.value) return;
+  if (selectedIndex.value > -1) {
+    list.value[selectedIndex.value].iconState = false;
+  }
+  list.value[index].iconState = true;
+  selectedIndex.value = index;
+};
+const onItemFocus = (e) => {
+  emits("onItemFocused", e.isFocused, props.itemName);
+};
+const onItemClick = (e) => {
+  let position = e.position;
+  const isSameLocation = selectedIndex.value === position;
+  emits("onItemClicked", props.itemName, list.value[position], isSameLocation);
+  if (isSameLocation) return;
+  setSelectedIndex(position);
+};
+
+defineExpose({
+  init,
+  setList,
+  showView,
+  dismissView,
+  getViewShowState,
+  setSelectedIndex,
+});
+</script>
+
+<style lang="scss" src="./scss/media-menu.scss"></style>

package/rules/.source/hellotv/src/components/media/view/media-menu-icon-item.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="media-menu-icon-root-css"
+    eventClick
+    eventFocus
+    flexStyle="${style}"
+    :focusable="true"
+  >
+    <div class="icon-item-root" :duplicateParentState="true" :focusable="false">
+      <img
+        class="icon-item"
+        :duplicateParentState="true"
+        :focusable="false"
+        :showOnState="['normal', 'selected']"
+        src="${icon.normal}"
+      />
+      <img
+        class="icon-item"
+        :duplicateParentState="true"
+        :focusable="false"
+        showOnState="focused"
+        src="${icon.focused}"
+      />
+    </div>
+    <qt-text
+      class="icon-item-text"
+      :focusable="false"
+      autoWidth
+      gravity="center"
+      :ellipsizeMode="3"
+      :duplicateParentState="true"
+      :fontSize="30"
+      :lines="1"
+      text="${name}"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="media-menu-icon-item">
+defineExpose({});
+</script>
+
+<style lang="scss"></style>

package/rules/.source/hellotv/src/components/media/view/media-menu-text-item.vue

@@ -0,0 +1,27 @@
+<template>
+  <qt-view
+    class="media-menu-text-root-css"
+    eventClick
+    eventFocus
+    :sateBackgroundPadding="[30, 30]"
+    autoWidth
+    :focusable="true"
+  >
+    <qt-text
+      class="text-item"
+      :focusable="false"
+      gravity="center"
+      :ellipsizeMode="3"
+      :duplicateParentState="true"
+      :fontSize="30"
+      :lines="1"
+      text="${name}"
+    />
+  </qt-view>
+</template>
+
+<script lang="ts" setup name="media-menu-text-item">
+defineExpose({});
+</script>
+
+<style lang="scss"></style>

package/rules/.source/hellotv/src/components/media/view/media-menu-view.vue

@@ -0,0 +1,88 @@
+<template>
+  <qt-list-view
+    class="media-menu-root-css"
+    ref="mediaMenuRef"
+    :horizontal="true"
+    padding="90,0,0,0"
+    :autofocusPosition="focusP"
+    :useDiff="true"
+    :listData="list"
+    @item-focused="onItemFocus"
+    @item-click="onItemClick"
+  >
+    <media-menu-text-item :type="1" />
+    <media-menu-icon-item :type="2" />
+  </qt-list-view>
+</template>
+
+<script lang="ts" setup name="media-menu-view">
+import { qtRef } from "@quicktvui/quicktvui3";
+import { onBeforeUnmount, ref, toRaw, watch } from "vue";
+import { initDefaultMenuList } from "../build-data/media-control-adapter";
+import MediaMenuIconItem from "./media-menu-icon-item.vue";
+import MediaMenuTextItem from "./media-menu-text-item.vue";
+
+const emits = defineEmits(["onItemFocused", "onItemClicked"]);
+const props = defineProps({
+  menuList: {
+    type: Array,
+    default: initDefaultMenuList(),
+  },
+});
+
+const mediaMenuRef = ref();
+const list = qtRef();
+const focusP = ref(-1);
+let controlClick = false;
+let controlClickTimer: any = 0;
+
+watch(
+  () => props.menuList,
+  (newV) => {
+    if (newV && newV.length > 0) {
+      list.value = toRaw(newV);
+    }
+  },
+  { immediate: true },
+);
+
+onBeforeUnmount(() => {
+  clearTimeout(controlClickTimer);
+});
+const onItemFocus = (e) => {
+  let focused = e.isFocused;
+  let position = e.position;
+  const nameFlag = list.value[position].nameFlag;
+  emits("onItemFocused", focused, nameFlag);
+};
+const onItemClick = (e) => {
+  let position = e.position;
+  const nameFlag = list.value[position].nameFlag;
+  //防止多次点击
+  if (controlClick) {
+    clearTimeout(controlClickTimer);
+    controlClickTimer = setTimeout(() => {
+      controlClick = false;
+    }, 1000);
+    return;
+  }
+  controlClick = true;
+  controlClickTimer = setTimeout(() => {
+    controlClick = false;
+  }, 1000);
+  emits("onItemClicked", nameFlag, e);
+};
+const update = (position: number, str) => {
+  list.value[position].name = str;
+};
+const changeList = (position, size, newData) => {
+  if (newData) {
+    list.value.splice(position, size, newData);
+  } else {
+    list.value.splice(position, size);
+  }
+};
+defineExpose({ update, changeList });
+</script>
+
+<style lang="scss" src="./scss/media-menu.scss"></style>