@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.0

package/DemoForOperator/TabContent/testData.js

@@ -0,0 +1,241 @@
+export const testData = [
+  {
+    "indexId": 0,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_89605309/images/biz_89605309_bg_20230610145407.jpg",
+    "itemTitle": "更多",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_89605309",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_89605309.json",
+    "title": "更多",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_89605309/images/biz_89605309_bg_20230610145407.jpg"
+  },
+  {
+    "indexId": 1,
+    "itemTitle": "短视频",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_520",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_520.json",
+    "title": "短视频",
+    "icon": ""
+  },
+  {
+    "indexId": 2,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_84518310/images/biz_84518310_bg_20230607114159.jpg",
+    "itemTitle": "推荐",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_84518310",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_84518310.json",
+    "title": "推荐",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_84518310/images/biz_84518310_bg_20230607114159.jpg",
+    "subTitle": "default"
+  },
+  {
+    "indexId": 3,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_36146605/images/biz_36146605_bg_20230607140144.png",
+    "itemTitle": "直播",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_36146605",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_36146605.json",
+    "title": "直播",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_36146605/images/biz_36146605_bg_20230607140144.png"
+  },
+  {
+    "indexId": 4,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg",
+    "itemTitle": "电影 ",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_01028457",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_01028457.json",
+    "childTab": [
+      {
+        "indexId": 4,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg",
+        "itemTitle": "电影 ",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_01028457",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_01028457.json"
+      },
+      {
+        "indexId": 5,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_25950192/images/biz_25950192_bg_20230607140145.png",
+        "itemTitle": "电视剧",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_25950192",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_25950192.json"
+      },
+      {
+        "indexId": 6,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_91290873/images/biz_91290873_bg_20230608154804.jpg",
+        "itemTitle": "综艺",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_91290873",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_91290873.json"
+      },
+      {
+        "indexId": 7,
+        "isSubTab": true,
+        "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_48135919/images/biz_48135919_bg_20230607171837.png",
+        "itemTitle": "少儿",
+        "itemSubTitle": "",
+        "itemType": "biz",
+        "itemCode": "biz_48135919",
+        "itemIcon": "",
+        "hImg": "",
+        "vImg": "",
+        "opimg1": "",
+        "opimg2": "",
+        "linkType": "",
+        "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_48135919.json"
+      }
+    ],
+    "title": "电影 ",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_51744660/biz_01028457/images/biz_01028457_bg_20230607140144.jpg"
+  },
+  {
+    "indexId": 8,
+    "itemTitle": "动漫",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_46299945",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_46299945.json",
+    "title": "动漫",
+    "icon": ""
+  },
+  {
+    "indexId": 9,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_80556920/images/biz_80556920_bg_20230608180100.png",
+    "itemTitle": "新闻",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_80556920",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_80556920.json",
+    "title": "新闻",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_71011586/biz_80556920/images/biz_80556920_bg_20230608180100.png"
+  },
+  {
+    "indexId": 10,
+    "itemIcon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_21417580/images/biz_21417580_bg_20230610165411.png",
+    "itemTitle": "体育",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_21417580",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_21417580.json",
+    "title": "体育",
+    "icon": "",
+    "icon4": "https://oss.image.qcast.cn/epg/resource/apk_site/biz_70204360/biz_21417580/images/biz_21417580_bg_20230610165411.png"
+  },
+  {
+    "indexId": 11,
+    "itemTitle": "电影票",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_82694109",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_82694109.json",
+    "title": "电影票",
+    "icon": ""
+  },
+  {
+    "indexId": 12,
+    "itemTitle": "放映厅",
+    "itemSubTitle": "",
+    "itemType": "biz",
+    "itemCode": "biz_15167730",
+    "itemIcon": "",
+    "hImg": "",
+    "vImg": "",
+    "opimg1": "",
+    "opimg2": "",
+    "linkType": "",
+    "dataLink": "http://192.168.0.226:8077/src/epg/api/page/biz_15167730.json",
+    "title": "放映厅",
+    "icon": ""
+  }
+]

package/DemoForOperator/Vortex/App.vue

@@ -0,0 +1,78 @@
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#f5f57d' }"></div>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+    }"
+  >
+    <Vortex
+      ref="cGenieRef"
+      :layout="{
+        left: 120,
+        top: 50,
+        width: width,
+        height: height,
+      }"
+      :time="1"
+      :onAnimEnd="onAnimEnd"
+      :initShow="true"
+    >
+      <img
+        :src="`url(${imageUrl})`"
+        :style="{
+          width: width,
+          height: height,
+        }"
+        @load="onImgLoaded"
+      />
+      <div
+        :style="{
+          width: 1024,
+          height: 100,
+          backgroundColor: '#ffffff44',
+        }"
+      ></div>
+      <div
+        :style="{
+          width: width,
+          height: height,
+          fontSize: 50,
+          color: '#fff',
+          textAlign: 'center',
+        }"
+      >
+        按OK键出场/入场
+      </div>
+    </Vortex>
+  </jsv-focus-block>
+</template>
+<script setup>
+import Vortex from "./Vortex/Vortex.vue";
+import { shallowRef } from "vue";
+
+const cGenieRef = shallowRef();
+const position = { x: -80, y: 600 };
+const width = 1024;
+const height = 576;
+const imageUrl =
+  "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoForOperator/Genie/App/element_228542_icon_20230610184253.jpg";
+
+let imgLoaded = false;
+function onImgLoaded() {
+  imgLoaded = true;
+}
+const onAnimEnd = () => {
+  console.log("anim end");
+};
+
+function onKeyDown(ev) {
+  if (ev.keyCode == 13) {
+    if (imgLoaded) {
+      cGenieRef.value.switch();
+    }
+    return true;
+  }
+  return false;
+}
+</script>

package/DemoForOperator/Vortex/Vortex/Vortex.vue

@@ -0,0 +1,154 @@
+<template>
+  <div
+    :style="{
+      left: layout.left,
+      top: layout.top,
+    }"
+  >
+    <jsv-frag-shader-view
+      v-if="showFbo"
+      :key="keyCount"
+      ref="shaderViewRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+      :duration="shaderSetting.duration"
+      :shaderStr="shaderSetting.shader"
+      :autoplay="true"
+      :textures="shaderSetting.textures"
+      :onEnd="onAnimEnd"
+    ></jsv-frag-shader-view>
+
+    <div
+      v-if="!showOrigin"
+      :style="{
+        width: 1,
+        height: 1,
+        overflow: 'hidden',
+      }"
+    >
+      <div
+        ref="slotRootRef"
+        :style="{
+          width: layout.width,
+          height: layout.height,
+        }"
+      >
+        <slot></slot>
+      </div>
+    </div>
+    <div
+      v-else
+      ref="slotRootRef"
+      :style="{
+        width: layout.width,
+        height: layout.height,
+      }"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import vortexOutShader from "./vortexOut.glsl?raw";
+import vortexInShader from "./vortexIn.glsl?raw";
+
+import { onMounted, onUnmounted, shallowRef, ref, computed } from "vue";
+import {
+  JsvFragShaderView,
+  getKeyFramesGroup,
+  JsvTextureStoreApi,
+} from "jsview";
+
+const props = defineProps({
+  layout: {
+    type: Object,
+    required: true,
+  },
+  duration: {
+    type: Number,
+    default: 1,
+  },
+  initShow: {
+    type: Boolean,
+    default: true,
+  },
+  onAnimEnd: {
+    type: Function,
+  }
+});
+
+const showOrigin = shallowRef(props.initShow);
+const showFbo = shallowRef(false);
+const slotRootRef = shallowRef();
+const keyCount = ref(0);
+const shaderViewRef = ref();
+let state = props.initShow ? 1 : 0;
+
+let shaderSetting = {
+  name: "vortex",
+  shader: "",
+  uniforms: [],
+  textures: [
+    {
+      name: "iChannel0",
+      resource: "",
+    },
+  ],
+  duration: Math.round(props.duration * 1000),
+};
+let _onEnd = null;
+
+function animOut() {
+  shaderSetting.shader = vortexOutShader;
+  _onEnd = () => {
+    showOrigin.value = false;
+  };
+  capture();
+}
+
+function animIn() {
+  shaderSetting.shader = vortexInShader;
+  _onEnd = () => {
+    showOrigin.value = true;
+  };
+  capture();
+}
+
+function onAnimEnd() {
+  showFbo.value = false;
+  _onEnd();
+  props.onAnimEnd?.();
+}
+
+function capture() {
+  JsvTextureStoreApi.capture2Texture(
+    slotRootRef.value,
+    (textureName, autoRecycle, w, h) => {
+      shaderSetting.textures[0].resource = `jsvtexturestore://${textureName}`;
+
+      if (autoRecycle) {
+        // 已经是设置了texture的自动回收，所以不再需要主动调用 JsvTextureStoreApi.deleteTexture 来释放内存
+      }
+      showOrigin.value = false;
+      ++keyCount.value;
+      showFbo.value = true;
+    },
+    true // 自动回收, 不填也行，默认为true
+  );
+}
+
+defineExpose({
+  switch() {
+    if (state == 0) {
+      state = 1;
+      animIn();
+    } else {
+      state = 0;
+      animOut();
+    }
+  },
+});
+</script>

package/DemoForOperator/Vortex/Vortex/vortexIn.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = 1. - iTime / iDuration;
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/DemoForOperator/Vortex/Vortex/vortexOut.glsl

@@ -0,0 +1,38 @@
+#define RANGE 6.
+#define SPEED .5
+#define STRENGTH 6.
+
+mat2 rotate(float a) {
+  float s = sin(a);
+  float c = cos(a);
+  return mat2(c, -s, s, c);
+}
+
+void mainImage(out vec4 fragColor, vec2 coord) {
+  /** mediump精度10bit, 直接使用0-1的uv, 小值的normalize()会有精度问题, 导致异常大的结果; 但乘1920x1080又会有大值的问题, 所以选取16x9 */
+  vec2 aspect = (iResolution.xy / iResolution.y) * 9.;
+  vec2 center = 0.5 * aspect;
+
+  vec2 uv = coord / iResolution.xy * aspect;
+  uv -= center;
+
+  float d = length(uv);
+  float progress = iTime / iDuration;
+
+    //vortex
+  float cTime = STRENGTH * progress;
+  d = smoothstep(0., RANGE, RANGE - d) * cTime;
+  uv *= rotate(d);
+
+    //shrink
+  float edge = aspect.y * abs(progress);
+  uv = uv + normalize(uv) * edge;
+
+  uv += center;
+  uv /= aspect;
+  if(uv.x > 1. || uv.y > 1. || uv.x < 0. || uv.y < 0.) {
+    fragColor = vec4(0.0);
+  } else {
+    fragColor = jsvTexture2D(iChannel0, uv);
+  }
+}

package/DemoForOperator/index.js

@@ -0,0 +1,6 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:03:58
+ * @Description: file content
+ */
+export { default as demoForOperatorRouteList } from "./routeList"