@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/live/css/player.css

@@ -0,0 +1,56 @@
+.player-tips {
+  width: 900px;
+  height: 200px;
+  background-color: transparent;
+  flex-direction: row;
+  position: absolute;
+  left: 510px;
+  bottom: 47px;
+}
+
+.player-tips-corner {
+  width: 90px;
+  height: 40px;
+  background-color: transparent;
+  position: absolute;
+  top: -4px;
+}
+
+.player-tips-left {
+  width: 274px;
+  height: 200px;
+  background-color: transparent;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-tips-right {
+  width: 626px;
+  height: 200px;
+  background-color: transparent;
+  justify-content: center;
+  padding-right: 50px;
+}
+
+.player-tips-right-box {
+  height: 40px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.player-tips-text {
+  width: 470px;
+  height: 40px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 22px;
+}
+
+.player-tips-line {
+  width: 576px;
+  height: 2px;
+  background-color: rgba(255, 255, 255, 0.7);
+  border: 1 solid #ffffff;
+  margin-top: 13px;
+  margin-bottom: 14px;
+}

package/rules/.source/hellotv/src/pages/live/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <qt-view class="live">
+    <!-- 全屏播放 -->
+    <player-live ref="playerRef" @closeMenu="closeMenu" />
+    <!-- 频道列表 -->
+    <channel-menu
+      v-show="showMenu"
+      ref="menuRef"
+      @loadPrograms="loadPrograms"
+      @playMediaByIndex="playMediaByIndex"
+      @closeMenu="closeMenu"
+    />
+    <!-- 占位填充 -->
+    <qt-view
+      style="width: 1920px; height: 1080px; background-color: transparent"
+      :focusable="false"
+    ></qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { ESKeyEvent, ESKeyCode, useESToast } from "@extscreen/es3-core";
+import { useESRouter } from "@extscreen/es3-router";
+import {
+  mockMediaList,
+  mockCategories,
+  mockChannels,
+  mockPrograms,
+} from "./mock/index";
+import playerLive from "./components/player/index.vue";
+import channelMenu from "./components/menu/index.vue";
+
+const toast = useESToast();
+const router = useESRouter();
+const playerRef = ref();
+const menuRef = ref();
+const showMenu = ref(false);
+
+onMounted(() => {
+  playerRef.value?.init({ mediaList: mockMediaList });
+  menuRef.value?.init({ categories: mockCategories, channels: mockChannels });
+});
+
+function loadPrograms(
+  channelId: string,
+  callback: (channelId: string) => object,
+) {
+  callback(mockPrograms[channelId]);
+}
+
+function playMediaByIndex(index: number) {
+  playerRef.value?.playMediaByIndex(index);
+}
+
+function closeMenu() {
+  showMenu.value = false;
+  menuRef.value?.onBackPressed();
+}
+
+function onKeyDown(keyEvent: ESKeyEvent) {
+  switch (keyEvent.keyCode) {
+    case ESKeyCode.ES_KEYCODE_DPAD_UP:
+      if (!showMenu.value) {
+        playerRef.value.onKeyDown(keyEvent);
+      }
+      break;
+    case ESKeyCode.ES_KEYCODE_DPAD_DOWN:
+      if (!showMenu.value) {
+        playerRef.value.onKeyDown(keyEvent);
+      }
+      break;
+    case ESKeyCode.ES_KEYCODE_DPAD_LEFT:
+      break;
+    case ESKeyCode.ES_KEYCODE_DPAD_RIGHT:
+      if (showMenu.value) {
+        menuRef.value.onKeyDown(keyEvent);
+      } else {
+        toast.showToast("打开支付页");
+      }
+      break;
+    case ESKeyCode.ES_KEYCODE_DPAD_CENTER:
+      if (!showMenu.value) {
+        showMenu.value = true;
+      }
+      break;
+  }
+}
+
+function onKeyUp(keyEvent: ESKeyEvent) {
+  if (keyEvent.keyCode != ESKeyCode.ES_KEYCODE_BACK) {
+    isBack = false;
+  }
+}
+
+let isBack = false;
+function onBackPressed() {
+  if (showMenu.value) {
+    isBack = false;
+    closeMenu();
+  } else {
+    if (isBack) {
+      router.back();
+    } else {
+      isBack = true;
+      toast.showToast("再按一次返回退出");
+    }
+  }
+}
+
+function onESResume() {
+  playerRef.value?.resume();
+}
+
+function onESDestroy() {
+  playerRef.value?.stop();
+}
+
+defineExpose({ onKeyDown, onKeyUp, onBackPressed, onESResume, onESDestroy });
+</script>
+
+<style scoped>
+.live {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+</style>

package/rules/.source/hellotv/src/pages/live/mock/index.ts

@@ -0,0 +1,263 @@
+export const mockMediaList = [
+  {
+    channelId: "001",
+    channelName: "CCTV-1高清",
+    isVip: true,
+    program: "我的阿勒泰02",
+    nextProgram: "边水往事08",
+    mediaSourceList: {
+      index: 0,
+      list: [
+        {
+          uri: "https://extcdn.hsrc.tv/channelzero/2024/02/06/004d30f9-1d06-4ee4-9d96-bb5fdb14f52f.mp4",
+        },
+      ],
+    },
+  },
+  {
+    channelId: "002",
+    channelName: "CCTV-2高清",
+    isVip: false,
+    program: "舌尖上的中国",
+    nextProgram: "大明王朝1566(28)",
+    mediaSourceList: {
+      index: 0,
+      list: [
+        {
+          uri: "https://extcdn.hsrc.tv/channelzero/2024/01/29/6f0a3144-7f22-4f9d-9691-cc7f2263e2fd.mp4",
+        },
+      ],
+    },
+  },
+  {
+    channelId: "003",
+    channelName: "CCTV-3高清",
+    isVip: false,
+    program: "在中国大地上边走边看",
+    nextProgram: "新闻联播",
+    mediaSourceList: {
+      index: 0,
+      list: [
+        {
+          uri: "https://extcdn.hsrc.tv/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4",
+        },
+      ],
+    },
+  },
+  {
+    channelId: "004",
+    channelName: "CCTV-4高清",
+    isVip: false,
+    program: "边水往事08",
+    nextProgram: "大头儿子小头爸爸",
+    mediaSourceList: {
+      index: 0,
+      list: [
+        {
+          uri: "https://extcdn.hsrc.tv/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4",
+        },
+      ],
+    },
+  },
+  {
+    channelId: "005",
+    channelName: "CCTV-5高清",
+    isVip: false,
+    program: "龙的传人",
+    nextProgram: "家有喜事2022",
+    mediaSourceList: {
+      index: 0,
+      list: [
+        {
+          uri: "https://extcdn.hsrc.tv/channelzero/2024/02/05/a87f2fd0-579c-4d4e-9bb7-4183f6bd3604.mp4",
+        },
+      ],
+    },
+  },
+];
+
+export const mockCategories = [
+  { type: 1, name: "开通服务" },
+  { type: 2, name: "央视频道", startIndex: 0 },
+  { type: 2, name: "卫视频道", startIndex: 3 },
+  { type: 2, name: "热门频道", startIndex: 6 },
+  { type: 3, name: "个人中心" },
+];
+
+export const mockChannels = [
+  {
+    type: 1,
+    categoryIndex: 1,
+    id: "001",
+    name: "CCTV-1高清",
+    program: "我的阿勒泰02",
+    isVip: true,
+  },
+  {
+    type: 1,
+    categoryIndex: 1,
+    id: "002",
+    name: "CCTV-2高清",
+    program: "舌尖上的中国",
+  },
+  {
+    type: 1,
+    categoryIndex: 1,
+    id: "003",
+    name: "CCTV-3高清",
+    program: "在中国大地上边走边边边边边",
+  },
+  {
+    type: 1,
+    categoryIndex: 2,
+    id: "004",
+    name: "CCTV-4高清",
+    program: "边水往事08",
+    isVip: true,
+  },
+  {
+    type: 1,
+    categoryIndex: 2,
+    id: "005",
+    name: "CCTV-5高清",
+    program: "边水往事09",
+  },
+  {
+    type: 1,
+    categoryIndex: 2,
+    id: "006",
+    name: "CCTV-6高清",
+    program: "龙的传人",
+    isVip: true,
+  },
+  {
+    type: 1,
+    categoryIndex: 3,
+    id: "007",
+    name: "CCTV-7高清",
+    program: "新闻联播",
+  },
+  {
+    type: 1,
+    categoryIndex: 3,
+    id: "008",
+    name: "CCTV-8高清",
+    program: "国足0-7大败日本",
+  },
+  {
+    type: 1,
+    categoryIndex: 3,
+    id: "009",
+    name: "CCTV-9高清",
+    program: "大头儿子小头爸爸",
+  },
+  {
+    type: 1,
+    categoryIndex: 3,
+    id: "010",
+    name: "CCTV-10高清",
+    program: "家有喜事2022",
+  },
+];
+
+export const mockPrograms = {
+  "001": [
+    {
+      type: 1,
+      channelId: "001",
+      program: "我的阿勒泰02",
+      time: "15:00-17:45",
+      tips: "正在播放",
+      isVip: true,
+      isPlaying: true,
+    },
+    {
+      type: 1,
+      channelId: "001",
+      program: "我的阿勒泰03",
+      time: "17:45-19:00",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "001",
+      program: "我的阿勒泰04",
+      time: "19:00-21:45",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "001",
+      program: "我的阿勒泰05",
+      time: "21:45-23:00",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "001",
+      program: "我的阿勒泰06",
+      time: "23:00-01:45",
+      tips: "未开始",
+    },
+  ],
+  "003": [
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸10",
+      time: "15:00-17:45",
+      tips: "正在播放",
+      isVip: false,
+      isPlaying: true,
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸11",
+      time: "17:45-19:00",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸12",
+      time: "19:00-21:45",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸13",
+      time: "21:45-23:00",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸14",
+      time: "23:00-01:45",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸15",
+      time: "23:00-01:45",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸16",
+      time: "23:00-01:45",
+      tips: "未开始",
+    },
+    {
+      type: 1,
+      channelId: "003",
+      program: "大头儿子小头爸爸17",
+      time: "23:00-01:45",
+      tips: "未开始",
+    },
+  ],
+};

package/rules/.source/hellotv/src/pages/live/types/index.ts

@@ -0,0 +1,42 @@
+export interface RouteParams {
+  url: string;
+  lives: string;
+}
+
+export type Lives = Live[];
+
+export interface Live {
+  name: string;
+  type: string;
+  pass: boolean;
+  url: string;
+  epg: string;
+  logo: string;
+}
+
+export interface Category {
+  name: string;
+  data: Channel[];
+}
+
+export interface Channel {
+  // 频道ID
+  id: number;
+  // 频道名称
+  name: string;
+  // 频道播放地址
+  addrs: string[];
+  // 频道节目列表
+  programs?: Program[];
+  // 分类索引
+  categoryIndex?: number;
+  // 分类名称
+  category?: string;
+}
+
+export interface Program {
+  title?: string;
+  start?: string;
+  end?: string;
+  desc?: string;
+}

package/rules/.source/hellotv/src/pages/login/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="login-root-css">
+    <!--背景图-->
+    <img class="login-img-css" :src="background" />
+    <!--二维码-->
+    <qt-view class="login-qr-code-view-css">
+      <!--文字二维码   -->
+      <qt-qr-code
+        class="login-qr-code-css"
+        v-if="isNetQrCode"
+        :content="qrCodeUrl"
+        :optimize="true"
+      />
+      <!--图片二维码-->
+      <img class="login-qr-code-css" v-else :src="qrCodeUrl" />
+      <!--扫码提示-->
+      <qt-text
+        class="login-qr-code-tip-css"
+        :gradientBackground="{
+          colors: ['#F4F4F4', '#F4F4F4'],
+          cornerRadii4: [0, 0, 20, 20],
+          orientation: 0,
+        }"
+        :focusable="false"
+        gravity="center"
+        :font-size="36"
+        text="微信扫码登录"
+      />
+    </qt-view>
+    <!-- 协议-->
+    <qt-view
+      class="login-agreement-root-css"
+      :focusable="true"
+      :requestFocus="true"
+      @click="onAgreementClick"
+    >
+      <qt-text
+        class="login-agreement-text-css"
+        :focusable="false"
+        gravity="center"
+        :font-size="30"
+        text="登录即代表您同意《用户协议》和《隐私协议》"
+      />
+      <qt-view class="login-agreement-bottom-line-css" />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts" setup name="index">
+import { useESRouter } from "@extscreen/es3-router";
+import { ref, watch } from "vue";
+import { UserChangeListener, UserInfo } from "../../api/user/impl-user";
+import userManager from "../../api/user/user-manager";
+
+const router = useESRouter();
+//全局背景图
+let background = ref("");
+//是否网络地址
+let isNetQrCode = ref(false);
+//二维码地址
+let qrCodeUrl = ref("");
+//获取scene
+let scene = ref("");
+//用户信息事件监听
+const listener: UserChangeListener = {
+  onUserChanged(user: UserInfo | null) {
+    if (user) {
+      //todo 模拟扫码登录成功后关闭操作
+      setTimeout(() => {
+        router.back();
+      }, 5000);
+    }
+  },
+};
+const onESCreate = () => {
+  //添加监听
+  userManager.addUserChangeListener(listener);
+  //获取背景
+  userManager.getLoginBackground().then((res) => {
+    background.value = res;
+  });
+  //获取登录二维码
+  userManager.getLoginQrCode().then((res) => {
+    const codeUrl = res.qrCodeUrl;
+    if (res.scene != null) {
+      scene.value = res.scene;
+    }
+    isNetQrCode.value = codeUrl.substring(0, 4) === "http";
+    if (!isNetQrCode.value) {
+      qrCodeUrl.value = `data:image/png;base64,${res.qrCodeUrl}`;
+    } else {
+      qrCodeUrl.value = res.qrCodeUrl;
+    }
+  });
+};
+watch([() => scene.value], async (newValue) => {
+  if (newValue[0]) {
+    //todo 此处可以注册接收推送的服务接收用户数据或者轮询获取用户数据的接口
+    const user = await userManager.getUserInfoByScene(newValue[0]);
+    if (user) {
+      //存储用户信息
+      userManager.updateUserInfo(user);
+    }
+  }
+});
+const onESDestroy = () => {
+  //退出界面 移除监听
+  userManager.removeUserChangeListener(listener);
+};
+
+function onAgreementClick() {}
+
+defineExpose({ onESCreate, onESDestroy });
+</script>
+
+<style lang="scss" src="./scss/login.scss"></style>

package/rules/.source/hellotv/src/pages/login/scss/login.scss

@@ -0,0 +1,61 @@
+$home-width:1920px;
+$home-height:1080px;
+
+.login-root-css{
+  width: $home-width;
+  height: $home-height;
+  background-color: $theme-bg-color;
+}
+
+.login-img-css{
+  position: absolute;
+  width: $home-width;
+  height: $home-height;
+  background-color: transparent;
+}
+
+.login-qr-code-view-css{
+  position: absolute;
+  width: 540px;
+  height: 638px;
+  top: 218px;
+  right: 140px;
+  border-radius: 9px;
+  background-color: white;
+}
+
+.login-qr-code-tip-css{
+  width: 540px;
+  height: 100px;
+  position: absolute;
+  color: black;
+  bottom: 0;
+  background-color:transparent;
+}
+
+.login-qr-code-css{
+  width: 480px;
+  height: 480px;
+  margin-top: 29px;
+  margin-left: 30px;
+}
+
+.login-agreement-root-css{
+  width: 1920px;
+  height: 39px;
+  position: absolute;
+  bottom: 60px;
+  background-color: transparent;
+  align-items: center;
+}
+.login-agreement-text-css{
+  width: 1920px;
+  height: 36px;
+  color: rgba(255, 255, 255, .5);
+}
+.login-agreement-bottom-line-css{
+  height: 1px;
+  width: 640px;
+  margin-top: 2px;
+  background-color: rgba(255, 255, 255, .5);
+}