@quicktvui/ai 1.0.9 → 1.1.0

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

@@ -0,0 +1,117 @@
+<template>
+  <div class="home-root-css" ref="homeRef">
+    <waterfall-tabs ref="homeWaterTabRef">
+      <template #topView>
+        <top-view downSid="tabNavBarSid">
+          <template #topOtherBtn>
+            <div style="flex-direction: row">
+              <btn-pack-view
+                style="width: 145px; height: 60px"
+                text="直播"
+                :focusable="true"
+                :iconLeft="true"
+                :normalIcon="icLiveBroadcast"
+                :focusIcon="icLiveBroadcastFocused"
+                @click="liveClick"
+              />
+              <btn-pack-view
+                style="width: 160px; height: 60px; margin-left: 10px"
+                :textStyle="{ width: '120px', height: '60px' }"
+                text="全屏播放"
+                :focusable="true"
+                @click="playScreen"
+              />
+              <div
+                class="home-resource-root"
+                :focusScale="ThemeConfig.placeHolderFocusScale"
+                :focusable="true"
+                @click="resourceClick"
+              >
+                <img class="home-resource-img" :src="resourceImg" />
+              </div>
+            </div>
+          </template>
+        </top-view>
+      </template>
+    </waterfall-tabs>
+  </div>
+</template>
+
+<script setup lang="ts" name="index">
+import { ESKeyEvent } from "@extscreen/es3-core";
+import { ref } from "vue";
+import BtnPackView from "../../components/btn-pack-view.vue";
+import TopView from "../../components/top-view.vue";
+import launch from "../../tools/launch";
+import { TopResource } from "./adapter/exit/home-exit-imp";
+import btnPackView from "../../components/btn-pack-view.vue";
+import icLiveBroadcast from "../../assets/live/ic_live_broadcast.png";
+import icLiveBroadcastFocused from "../../assets/live/ic_live_broadcast_focused.png";
+import homeManager from "./api";
+import WaterfallTabs from "./components/waterfall-tabs.vue";
+import ThemeConfig from "../../config/theme-config";
+
+const homeWaterTabRef = ref();
+let resourceImg = ref("");
+let topResource: TopResource;
+
+const onESCreate = (params) => {
+  homeWaterTabRef.value?.onESCreate(params);
+  homeManager.getHomeResource().then((res: TopResource) => {
+    if (res && res.url) {
+      topResource = res;
+      resourceImg.value = res.url;
+    }
+  });
+};
+const onESPause = () => {
+  homeWaterTabRef.value?.onESPause();
+};
+const onESStop = () => {
+  homeWaterTabRef.value?.onESStop();
+};
+const onESResume = () => {
+  homeWaterTabRef.value?.onESResume();
+};
+const onESDestroy = () => {
+  homeWaterTabRef.value?.onESDestroy();
+};
+const onKeyDown = (keyEvent: ESKeyEvent) => {
+  homeWaterTabRef.value?.onKeyDown(keyEvent);
+};
+const onKeyUp = (keyEvent: ESKeyEvent) => {
+  homeWaterTabRef.value?.onKeyUp(keyEvent);
+};
+const onBackPressed = () => {
+  if (homeWaterTabRef.value?.onBackPressed()) {
+    return true;
+  }
+  launch.launchExitDialog();
+};
+
+const liveClick = () => {
+  launch.launchLive();
+};
+const playScreen = () => {
+  launch.launchDetailFull();
+};
+
+const resourceClick = () => {
+  if (topResource.jumpParams) {
+    launch.launch(topResource.jumpParams);
+  }
+};
+
+defineExpose({
+  onESCreate,
+  onESPause,
+  onESStop,
+  onESResume,
+  onESDestroy,
+  onKeyDown,
+  onKeyUp,
+  onBackPressed,
+});
+</script>
+
+<style lang="scss" src="./scss/home.scss"></style>

package/rules/.source/hellotv/src/pages/home/scss/bar-img-item.scss

@@ -0,0 +1,11 @@
+
+.bar-img-item-root-css{
+  display: flex;
+  background-color: transparent;
+}
+
+.bar-img-item-image-css {
+  resizeMode: contain;
+  position: absolute;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/home/scss/bar-text-item.scss

@@ -0,0 +1,80 @@
+//nav bar 角标大小
+%bar-corner-size {
+  width: 73px;
+  height: 22px;
+}
+
+//nav bar 标题基本样式
+%bar-title {
+  position: absolute;
+  left: 30px;
+  right: 30px;
+  top: 0.01px;
+  height: 60px;
+  background-color: transparent;
+  align-self: center;
+}
+
+.bar-text-item-root-css {
+  padding-left: 30px;
+  padding-right: 30px;
+  height: 66px;
+  flex-direction: column;
+  display: flex;
+  border-radius: 35px;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+}
+
+.bar-text-focus-bg {
+  position: absolute;
+  height: 60px;
+  left: 0.1px;
+  top: 0.1px;
+  right: 0.1px;
+  display: flex;
+  border-radius: 35px;
+  background-color: $theme-btn-focus-color;
+  justify-content: center;
+}
+
+.bar-text-corner-root-default {
+  @extend %bar-corner-size;
+  position: absolute;
+  top: -10px;
+  background-color: transparent;
+}
+
+.bar-text-corner-left {
+  left: 2px;
+}
+
+.bar-text-corner-right {
+  right: 2px;
+}
+
+.bar-text-corner-img {
+  @extend %bar-corner-size;
+  position: absolute;
+}
+
+.bar-text-title-normal {
+  @extend %bar-title;
+  color: $theme-text-normal-color;
+}
+
+.bar-text-title-select-focus {
+  @extend %bar-title;
+  typeface:bold;
+  focus-color: $theme-text-focus-color;
+  select-color: $theme-text-select-color;
+}
+
+.bar-text-select-line{
+  width: 51px;
+  height: 6px;
+  background-color: $theme-text-select-color;
+  border-radius: 4px;
+  margin-top: 60px;
+}

package/rules/.source/hellotv/src/pages/home/scss/base.scss

@@ -0,0 +1,8 @@
+
+.item-corner{
+  color: white;
+  padding: 4px 8px;
+  height: 36px;
+  margin: 4px;
+  z-index: 1000
+}

package/rules/.source/hellotv/src/pages/home/scss/bg-player-cell-list-item.scss

@@ -0,0 +1,24 @@
+.bg-player-cell-list-item {
+  background-color: transparent;
+  border-bottom-style: solid;
+  border-bottom-width: 1px;
+  border-bottom-color: rgba(255, 255, 255, 0.1);
+}
+.bg-player-cell-list-item-text {
+  background-color: transparent;
+  position: absolute;
+  line-height: 36px;
+  color: rgba(255, 255, 255, 0.55);
+  focus-color: #13161b;
+  select-color: #FFFFFF;
+}
+
+.bg-player-cell-list-item-img-bg {
+  background-color: transparent;
+  position: absolute;
+  z-index: 200;
+}
+
+.bg-player-cell-list-item-img {
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/home/scss/bg-player.scss

@@ -0,0 +1,50 @@
+.bg-player-root-css {
+  position: absolute;
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+}
+
+.bg-player-replace-child {
+  position: absolute;
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.bg-player-parent-css {
+  position: absolute;
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  justify-content: center;
+  align-items: center;
+}
+.bg-player-window {
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 0;
+  flex-direction: row;
+  background-color: transparent;
+}
+.bg-player-view {
+  position: absolute;
+  align-items: center;
+  background-color: transparent;
+}
+.bg-player-background-img {
+  position: absolute;
+  border-radius: 0;
+  background-color: transparent;
+}
+.bg-player-mask {
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.bg-player-shadow {
+  position: absolute;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/home/scss/cell-player-item.scss

@@ -0,0 +1,24 @@
+
+.cell-player-item-root-css{
+  background-color: rgba(0,0,0,0.1);
+  border-radius: $theme-img-border;
+}
+.cell-player-list-item-bg{
+  position:absolute;
+  top:0.1px;
+  left:0.1px;
+  border-top-left-radius: $theme-img-border;
+  border-bottom-left-radius: $theme-img-border;
+  background-color: transparent;
+}
+.cell-player-item-bg{
+  position:absolute;
+  top:-0.1px;
+  left:-0.1px;
+  border-radius: $theme-img-border;
+  background-color: transparent;
+}
+.cell-player-item-replace{
+  position: absolute;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/home/scss/exit-dialog.scss

@@ -0,0 +1,89 @@
+
+.exit-dialog-root-css {
+  width: 1920px;
+  height: 1080px;
+  align-items: center;
+  background-color: rgba(0,0,0,0.8);
+}
+.exit-dialog-content-top{
+  width: 1152px;
+  height: 185px;
+  margin-top: 201px;
+  flex-direction: row;
+  background-color: transparent;
+}
+.exit-dialog-content-top-icon{
+  width: 214px;
+  height: 362px;
+  margin-left: 72px;
+  margin-top: -65px;
+  background-color: transparent;
+}
+.exit-dialog-content-top-tip{
+  width: 660px;
+  height: 46px;
+  color: white;
+  font-size: 40px;
+  line-height: 46px;
+  margin-left: 35px;
+  margin-top: 89px;
+  background-color: transparent;
+}
+.exit-dialog-content-top-corner{
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 299px;
+  height: 60px;
+  border-top-right-radius: 42px;
+  border-bottom-left-radius: 30px;
+  background-color: rgba(255,255,255,0.15);
+  align-items: center;
+  .img-corner{
+    width: 230px;
+    height: 43px;
+    margin-top: 6px;
+  }
+}
+.exit-dialog-content-bottom{
+  width: 1152px;
+  height: 408px;
+  background-color: #1C222B;
+  border-bottom-left-radius: 42px;
+  border-bottom-right-radius: 42px;
+}
+
+.exit-dialog-list-view{
+  width: 1152px;
+  height: 408px;
+  background-color: transparent;
+}
+
+.exit-dialog-list-item{
+  width: 320px;
+  height: 276px;
+  background-color: transparent;
+}
+
+.exit-dialog-list-item-img{
+  width: 320px;
+  height: 180px;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: $theme-img-border;
+  margin-bottom: 16px;
+}
+.exit-dialog-list-item-text{
+  width: 320px;
+  height: 80px;
+  background: transparent;
+  color:rgba(255,255,255,0.55);
+  focus-color:white;
+}
+.exit-dialog-btn-root-css{
+  width: 1152px;
+  height: 90px;
+  margin-top: 60px;
+  flex-direction: row;
+  justify-content: center;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/pages/home/scss/focus-change-img-item.scss

@@ -0,0 +1,12 @@
+
+.focus-change-img-root-css{
+  position: absolute;
+  background-color: transparent;
+}
+
+.focus-change-img-css{
+  position: absolute;
+  background-color: transparent;
+  border-radius: $theme-img-border;
+  z-index: 899;
+}

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

@@ -0,0 +1,32 @@
+$home-width:1920px;
+$home-height:1080px;
+
+.home-root-css{
+  width: $home-width;
+  height: $home-height;
+  background-color: $theme-bg-color;
+}
+
+.logo-root-css{
+  position: absolute;
+  width: 310px;
+  height: 60px;
+  right:90px;
+  flex-direction: row-reverse;
+  background-color: transparent;
+}
+
+%home-resource{
+  width: 488px;
+  height: 84px;
+  background-color: transparent;
+}
+
+.home-resource-root{
+  @extend %home-resource;
+  margin-left: 10px;
+  margin-top: -22px;
+}
+.home-resource-img{
+  @extend %home-resource;
+}

package/rules/.source/hellotv/src/pages/home/scss/inner-out-title-item.scss

@@ -0,0 +1,24 @@
+@use './base.scss' as *;
+%inner-out{
+  position: absolute;
+  background-color: transparent;
+}
+
+.inner-out-title-root-css{
+  @extend %inner-out;
+  overflow: hidden;
+  flex-direction: row-reverse;
+}
+
+.inner-out-title-img{
+  @extend %inner-out;
+  border-radius: $theme-img-border;
+  z-index: 899;
+}
+.inner-out-title-text{
+  @extend %inner-out;
+  height: 60px;
+  z-index: 999;
+  color:rgba(255,255,255,0.55);
+  focus-color:#FFFFFF;
+}

package/rules/.source/hellotv/src/pages/home/scss/no-title-item.scss

@@ -0,0 +1,15 @@
+@use './base.scss' as *;
+.no-title-item-root-css{
+  position: absolute;
+  background-color: transparent;
+  overflow: hidden;
+  flex-direction: row-reverse;
+}
+
+.no-title-item-img{
+  background-color: transparent;
+  z-index: 899;
+  position: absolute;
+  border-radius: $theme-img-border;
+}
+

package/rules/.source/hellotv/src/pages/home/scss/placeholder-item.scss

@@ -0,0 +1,14 @@
+
+.placeholder-root-css{
+  position: absolute;
+  background-color: transparent;
+  display: flex;
+  z-index: 1;
+}
+
+.placeholder-img{
+  position: absolute;
+  background-color: transparent;
+  border-radius: $theme-img-border;
+  z-index: 899;
+}

package/rules/.source/hellotv/src/pages/home/scss/short-video-section.scss

@@ -0,0 +1,59 @@
+
+.short-video-section-root-css {
+  position: absolute;
+  background-color: transparent;
+}
+.short-video-section-list-css {
+  background-color: transparent;
+}
+
+.short-video-section-list-item-root-css{
+  background-color: rgba(0,0,0,0.45);
+  flex-direction: row;
+  focus-border-radius:$theme-img-border;
+  border-radius:$theme-img-border;
+}
+.short-video-section-list-item-img{
+  width: 256px;
+  height: 144px;
+  border-top-left-radius: $theme-img-border;
+  border-bottom-left-radius: $theme-img-border;
+  background-color: transparent;
+}
+.short-video-section-list-item-content-div{
+  width: 284px;
+  height: 144px;
+  background-color: transparent;
+}
+.short-video-section-list-item-text{
+  width: 284px;
+  height: 84px;
+  background-color: transparent;
+  position: absolute;
+  color:rgba(255,255,255,0.55);
+  select-color:white;
+  focus-color:white;
+  left: 0;
+  top: 0;
+}
+.short-video-section-list-item-play-mark{
+  position: absolute;
+  width: 42px;
+  height: 30px;
+  background-color: transparent;
+  top:20px;
+  left: 0;
+}
+.short-video-section-list-item-sub-title{
+  position: absolute;
+  width: 284px;
+  height: 30px;
+  top: 104px;
+  color: rgba(255,255,255,0.3);
+  select-color: white;
+  focus-color:white;
+  background-color: transparent;
+}
+
+
+

package/rules/.source/hellotv/src/pages/home/scss/small-four-section.scss

@@ -0,0 +1,14 @@
+.small-four-section-root-css{
+  position: absolute;
+  background-color: transparent;
+}
+.small-4k-section-list{
+  background-color: transparent;
+}
+.small-4k-list-item-root-css{
+  background-color: transparent;
+}
+.small-4k-list-item-img{
+  border-radius: $theme-img-border;
+  background-color: rgba(255,255,255,0.1);
+}

package/rules/.source/hellotv/src/pages/home/scss/waterfall-tabs.scss

@@ -0,0 +1,50 @@
+@use "../../../components/top-view" as *;
+
+$nav-bar-margin-top: 114px;
+%full-screen {
+  width: 1920px;
+  height: 1080px;
+}
+
+.waterfall-tabs-root-css {
+  @extend %full-screen;
+  background-color: transparent;
+}
+
+.waterfall-tabs-4k-logo {
+  top: 72px;
+  align-self: center;
+  position: absolute;
+  background-color: transparent;
+}
+.waterfall-tabs-bg-player{
+  position: absolute;
+  background-color: transparent;
+}
+.waterfall-top-view {
+  width: 1920px;
+  height: $top-view-height;
+  background-color: transparent;
+}
+
+.waterfall-qt-tabs-css {
+  @extend %full-screen;
+  position: absolute;
+  background-color: transparent;
+}
+
+.waterfall-tab-bar-css {
+  width: 1920px;
+  height: 80px;
+  background-color: transparent;
+  margin-top: $nav-bar-margin-top;
+  z-index: 100;
+  clip-children: false;
+}
+
+.waterfall-content-css {
+  @extend %full-screen;
+  position: absolute;
+  background-color: transparent;
+  clip-children: false;
+}