@shijiu/jsview-vue 1.9.731 → 1.9.747

package/samples/VideoDemo/components/Button.vue

@@ -1,58 +0,0 @@
-<script setup>
-import { ref, shallowRef } from "vue";
-const props = defineProps({
-  style: Object,
-  autoFocus: Boolean,
-  name: String,
-  onClick: Function,
-});
-
-const hasFocused = ref(false);
-
-const onFocus = () => {
-  hasFocused.value = true;
-};
-
-const onBlur = () => {
-  hasFocused.value = false;
-};
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 13) {
-    // Enter
-    props.onClick?.();
-    return true;
-  }
-  return false;
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    :autoFocus="autoFocus ? '' : undefined"
-    :onAction="{
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      class="item"
-      :style="{
-        ...style,
-        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
-      }"
-    >
-      <slot></slot>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.item {
-  text-align: center;
-  font-size: 24;
-  line-height: 40;
-}
-</style>

package/samples/VideoDemo/components/Controllor.vue

@@ -1,197 +0,0 @@
-<script setup>
-import { inject } from "vue";
-import { useRouter } from "vue-router";
-import Button from "./Button.vue";
-
-const props = defineProps({
-  style: {
-    type: Object,
-    default() {
-      return { width: 1400, height: 50 };
-    },
-  },
-});
-const router = useRouter();
-
-const useTexture = inject("useTexture");
-const objectFit = inject("objectFit");
-const videoRect = inject("videoRect");
-const playVideo = inject("playVideo");
-const seekVideo = inject("seekVideo");
-const enableAnimation = inject("enableAnimation");
-const videoTime = inject("videoTime");
-const objectFitTitle = inject("objectFitTitle");
-let objectFitIndex = 0;
-let focusedItemIndex = 0;
-
-const setObjectFit = (index) => {
-  if (typeof index === "number") {
-    objectFitIndex = index;
-  } else {
-    objectFitIndex = ++objectFitIndex % objectFitData.length;
-  }
-  const data = objectFitData[objectFitIndex];
-  objectFit.value = data.objectFit;
-  objectFitTitle.value = data.name;
-  videoRect.value = {
-    left: (1280 - data.width) / 2,
-    top: 50,
-    width: data.width,
-    height: 500,
-  };
-};
-
-const buttonList = [
-  {
-    name: "ToVideoMode",
-    onClick: () => {
-      playVideo.value = null; // 停止并初始化播放
-      enableAnimation.value = false;
-      videoTime.currentTime = 0;
-      videoTime.duration = 0;
-      useTexture.value = !useTexture.value;
-    },
-    isModeButton: true,
-  },
-  {
-    name: "Play",
-    onClick: () => {
-      playVideo.value = !playVideo.value;
-    },
-    isPlayButton: true,
-  },
-  {
-    name: "Forward",
-    onClick: () => {
-      seekVideo.value = seekVideo.value !== 5 ? 5 : 5.1 /* 为了触发ref更新 */;
-    },
-  },
-  {
-    name: "Rewind",
-    onClick: () => {
-      seekVideo.value =
-        seekVideo.value !== -5 ? -5 : -5.1 /* 为了触发ref更新 */;
-    },
-  },
-  {
-    name: "ObjectFit",
-    onClick: setObjectFit,
-  },
-  {
-    name: "StartAnimation",
-    onClick: () => {
-      enableAnimation.value = !enableAnimation.value;
-    },
-    isAnimationButton: true,
-  },
-];
-const objectFitData = [
-  { name: "contain-horizontal", objectFit: "contain", width: 1200 },
-  { name: "contain-vertical", objectFit: "contain", width: 400 },
-  { name: "fill", objectFit: "fill", width: 1200 },
-  { name: "none-horizontal", objectFit: "none", width: 1200 },
-  { name: "none-vertical", objectFit: "none", width: 400 },
-  { name: "cover-horizontal", objectFit: "cover", width: 1200 },
-  { name: "cover-vertical", objectFit: "cover", width: 400 },
-];
-
-const getButtonData = () => {
-  let length = buttonList.length;
-  if (!useTexture.value) {
-    // 只有texture方式可以做animation
-    length -= 1;
-  }
-
-  let data = [];
-  for (let idx = 0; idx < length; idx++) {
-    const button = buttonList[idx];
-    data.push({
-      ...button,
-      size: {
-        width: 180,
-        height: 40,
-      },
-    });
-  }
-  return data;
-};
-const getButtonDataLength = () => {
-  let length = buttonList.length;
-  if (!useTexture.value) {
-    // 只有texture方式可以做animation
-    length -= 1;
-  }
-
-  return length;
-};
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，回退
-    return true;
-  }
-
-  let changeFocusTo = -1;
-  const buttonCount = getButtonDataLength();
-  switch (ev.keyCode) {
-    case 37: // Left
-      changeFocusTo = (focusedItemIndex - 1 + buttonCount) % buttonCount;
-      break;
-    case 39: // Right
-      changeFocusTo = (focusedItemIndex + 1) % buttonCount;
-      break;
-    default:
-      break;
-  }
-  if (changeFocusTo >= 0) {
-    ev.ownerNode
-      .findBlockByName("controllor.video-" + (changeFocusTo + 10).toString())
-      .requestFocus();
-    focusedItemIndex = changeFocusTo;
-    return true;
-  }
-
-  return false;
-};
-
-const getShowName = (item) => {
-  if (item.isModeButton) {
-    return useTexture.value ? "ToVideoMode" : "ToOffscreenMode";
-  } else if (item.isPlayButton) {
-    return playVideo.value ? "Pause" : "Play";
-  } else if (item.isAnimationButton) {
-    return enableAnimation.value ? "StopAnimation" : "StartAnimation";
-  }
-  return item.name;
-};
-
-useTexture.value = false;
-setObjectFit(0);
-playVideo.value = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整;
-enableAnimation.value = false;
-</script>
-
-<template>
-  <div :style="style" :key="useTexture" :set="(leftOffset = 0)">
-    <jsv-focus-block namespace="controllor" :onKeyDown="onKeyDown">
-      <Button
-        v-for="(item, index) in getButtonData()"
-        :key="index"
-        :set="(leftOffset += item.size.width + 10)"
-        :style="{
-          left: leftOffset - item.size.width,
-          width: item.size.width,
-          height: item.size.height,
-        }"
-        :autoFocus="index === 0"
-        :name="'video-' + (index + 10).toString()"
-        :onClick="item.onClick"
-      >
-        {{ getShowName(item) }}
-      </Button>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-</style>

package/samples/VideoDemo/components/VideoFrame.vue

@@ -1,140 +0,0 @@
-<script setup>
-import { inject, watch, onMounted } from "vue";
-import { JsvVideo } from "jsview";
-
-const useTexture = inject("useTexture");
-const objectFit = inject("objectFit");
-const videoRect = inject("videoRect");
-const playVideo = inject("playVideo");
-const seekVideo = inject("seekVideo");
-const enableAnimation = inject("enableAnimation");
-const videoTime = inject("videoTime");
-const playStatus = inject("playStatus");
-const videoUrl =
-  "http://qcast-image.oss-cn-qingdao.aliyuncs.com/homepage/20190726/4cc4e6a8fd7d9d9c707ed4c4da27ca9d.mp4";
-const canAutoPlay = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整
-const rect = {
-  top: 50,
-  left: 40,
-  width: 1200,
-  height: 500,
-};
-let video = null;
-
-const onVideoRef = (ele) => {
-  video = ele;
-};
-
-const setPlayState = (play) => {
-  if (play) {
-    video?.play();
-  } else {
-    video?.pause();
-  }
-};
-
-const seekVideoStep = (time) => {
-  if (video) {
-    let playEnd = false;
-    let seekTime = video.currentTime + Math.ceil(time);
-    if (seekTime < 0) {
-      seekTime = 0;
-    } else if (seekTime > videoTime.duration) {
-      seekTime = videoTime.duration;
-      if (video.currentTime != videoTime.duration) {
-        // 触发一次播放，收到ended事件
-        playEnd = true;
-      }
-    }
-    video.currentTime = seekTime;
-    if (playEnd) {
-      this.setPlayState(true);
-    }
-  }
-};
-
-const onPlayStateChange = (event) => {
-  console.log("VideoFrame.onPlayStateChangeEvent()", event);
-  playVideo.value = event.type === "play" ? true : false;
-  if (!(playStatus.value == "ended" && event.type == "pause")) {
-    // 忽略播放结束后的pause事件
-    playStatus.value = event.type;
-  }
-};
-
-const onTimeUpdate = (event) => {
-  console.log("VideoFrame.onTimeUpdateEvent()", event);
-  videoTime.currentTime = video.currentTime;
-};
-
-const onDurationChange = (event) => {
-  console.log("VideoFrame.onDurationChangeEvent()", event);
-  videoTime.duration = video.duration;
-};
-
-const onEvent = (event) => {
-  console.log("VideoFrame.onEvent()", event);
-};
-
-watch(playVideo, setPlayState);
-watch(seekVideo, seekVideoStep);
-
-onMounted(() => {
-  if (canAutoPlay) {
-    playVideo.value = true;
-  }
-});
-</script>
-
-<template>
-  <div>
-    <div
-      :style="{
-        ...videoRect,
-        backgroundColor: 'rgb(200,100,100)',
-      }"
-    ></div>
-    <JsvVideo
-      :onRef="onVideoRef"
-      :useTexture="useTexture"
-      :src="videoUrl"
-      :autoplay="canAutoPlay ? 'autoplay' : undefined"
-      :style="{
-        ...videoRect,
-        objectFit: objectFit,
-        animation:
-          useTexture && enableAnimation ? 'offscreenAnim 3s infinite' : null,
-        borderRadius: '80px 80px 160px 240px',
-      }"
-      :onCanPlay="onEvent"
-      :onCanPlayThrough="onEvent"
-      :onDurationChange="onDurationChange"
-      :onEnded="onPlayStateChange"
-      :onError="onPlayStateChange"
-      :onLoad="onEvent"
-      :onLoadedMetadata="onEvent"
-      :onLoadStart="onEvent"
-      :onPause="onPlayStateChange"
-      :onPlay="onPlayStateChange"
-      :onPlaying="onEvent"
-      :onProgress="onEvent"
-      :onSeeking="onEvent"
-      :onSeeked="onTimeUpdate"
-      :onStalled="onEvent"
-      :onTimeUpdate="onTimeUpdate"
-    />
-  </div>
-</template>
-
-<style scoped>
-@keyframes offscreenAnim {
-  from {
-    transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -360deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: scale3d(0.4, 0.4, 0) rotate3d(0, 0, 1, 0);
-    transform-origin: center center;
-  }
-}
-</style>

package/samples/VisibleSensorDemo/App.vue

@@ -1,234 +0,0 @@
-<script setup>
-import { watch, reactive, onMounted, ref, shallowRef } from "vue";
-import { useRouter } from "vue-router";
-import { jJsvRuntimeBridge, JsvVisibleSensor } from "jsview";
-
-const BOX_WIDTH = 150;
-const BOX_HEIGHT = 150;
-const BOX_COLOR = "rgba(0,255,255,0.6)";
-const VISIBLE_RANGE = 0.25;
-
-const router = useRouter();
-
-const containerRef = shallowRef(null);
-let case_config = shallowRef(null);
-let status_text = reactive({
-  oldH: "false",
-  newH: "false",
-  oldV: "false",
-  newV: "false",
-});
-
-let test_case_type = ref(0);
-
-window.LudlTestCase = test_case_type;
-
-case_config.value = getTestCase(test_case_type.value);
-
-watch(test_case_type, () => {
-  case_config.value = getTestCase(test_case_type.value);
-});
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-
-// const onAnimDone = () => {
-//   test_case_type.value = (test_case_type.value + 1) % 2;
-// };
-
-// 内部接口
-const onBeVisible = (old_h, new_h, old_v, new_v) => {
-  status_text.oldH = old_h ? "true" : "false";
-  status_text.newH = new_h ? "true" : "false";
-  status_text.oldV = old_v ? "true" : "false";
-  status_text.newV = new_v ? "true" : "false";
-};
-
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router?.go(-1); // 有router时，回退
-    return true;
-  }
-  if (ev.keyCode == 13) {
-    test_case_type.value = (test_case_type.value + 1) % 2;
-  }
-  return false;
-};
-
-function getTestCase(test_index) {
-  let test_config = {
-    animation: null,
-    text: null,
-    horizon: 1.0,
-    vertical: 1.0,
-  };
-
-  switch (test_index) {
-    case 0: {
-      // 上到下
-      test_config.animation = "visibleSensor_upDown 8s infinite linear";
-      test_config.text = "从上到下";
-      test_config.horizon = 1.0;
-      test_config.vertical = VISIBLE_RANGE;
-      break;
-    }
-    case 1: {
-      // 左到右
-      test_config.animation = "visibleSensor_leftRight 8s infinite linear";
-      test_config.text = "从左到右";
-      test_config.horizon = VISIBLE_RANGE;
-      test_config.vertical = 1.0;
-      break;
-    }
-  }
-
-  return test_config;
-}
-</script>
-
-<template>
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown">
-    <div :style="{ width: 1280, height: 720, backgroundColor: '#00F000' }">
-      <div
-        :style="{
-          left: 10,
-          top: 10,
-          height: 120,
-          width: 900,
-          fontColor: '#000000',
-          fontSize: 15,
-          lineHeight: 20,
-        }"
-      >
-        {{
-          `按OK键切换方向
-new horizon: ${status_text.newH}
-new vertical: ${status_text.newV}
--------
-old horizon: ${status_text.oldH}
-old vertical: ${status_text.oldV}`
-        }}
-      </div>
-      <div
-        ref="containerRef"
-        :style="{
-          left: 240,
-          top: 180,
-          width: 300,
-          height: 300,
-          backgroundColor: '#00F0F0',
-        }"
-      >
-        <div
-          :style="{
-            left: 50,
-            top: 50,
-            width: 200,
-            height: 200,
-            backgroundColor: '#00AAAA',
-            zIndex: test_case_type == 0 ? -22 : 0,
-          }"
-        />
-
-        <div
-          :style="{
-            left: 80,
-            top: 30,
-            width: 140,
-            height: 240,
-            backgroundColor: '#0000AA',
-            zIndex: test_case_type == 0 ? -33 : 0,
-          }"
-        />
-
-        <div
-          :style="{
-            left: 0,
-            top: 0,
-            animation: case_config.animation,
-          }"
-        >
-          <JsvVisibleSensor
-            :horizonShown="case_config.horizon"
-            :verticalShown="case_config.vertical"
-            :width="BOX_WIDTH"
-            :height="BOX_HEIGHT"
-            :enable="true"
-            :container="containerRef"
-            :callback="onBeVisible"
-          >
-            <div v-if="test_case_type == 0">
-              <div
-                :style="{
-                  width: BOX_WIDTH,
-                  height: BOX_HEIGHT * VISIBLE_RANGE,
-                  backgroundColor: '#FF0000',
-                }"
-              />
-              <div
-                :style="{
-                  top: BOX_HEIGHT * (1 - VISIBLE_RANGE),
-                  width: BOX_WIDTH,
-                  height: BOX_HEIGHT * VISIBLE_RANGE,
-                  backgroundColor: '#FF0000',
-                }"
-              />
-            </div>
-            <div v-else>
-              <div
-                :style="{
-                  width: BOX_WIDTH * VISIBLE_RANGE,
-                  height: BOX_HEIGHT,
-                  backgroundColor: '#FF0000',
-                }"
-              />
-              <div
-                :style="{
-                  left: BOX_WIDTH * (1 - VISIBLE_RANGE),
-                  width: BOX_WIDTH * VISIBLE_RANGE,
-                  height: BOX_HEIGHT,
-                  backgroundColor: '#FF0000',
-                }"
-              />
-            </div>
-            <div
-              :style="{
-                width: BOX_WIDTH,
-                height: BOX_HEIGHT,
-                backgroundColor: BOX_COLOR,
-                fontSize: 20,
-                lineHeight: 30,
-              }"
-            >
-              {{
-                `${case_config.text}\nH:${status_text.newH}\nV:${status_text.newV}`
-              }}
-            </div>
-          </JsvVisibleSensor>
-        </div>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-@keyframes visibleSensor_upDown {
-  from {
-    transform: translate3d(75px, -180px, 0);
-  }
-  to {
-    transform: translate3d(75px, 330px, 0);
-  }
-}
-
-@keyframes visibleSensor_leftRight {
-  from {
-    transform: translate3d(-180px, 75px, 0);
-  }
-  to {
-    transform: translate3d(330px, 75px, 0);
-  }
-}
-</style>

package/tsconfig.json

@@ -1,47 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "paths": {
-      "jsview/*": [
-        "./*"
-      ],
-      "jsview": [
-        "./index.js"
-      ],
-      "jsview-vue/*": [
-        "./*"
-      ],
-      "jsview-vue": [
-        "./index.js"
-      ]
-    },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ],
-
-    "alwaysStrict": true,
-    "noImplicitReturns": true
-  },
-  "include": [
-    "./**/*.vue"
-  ],
-  "files": [
-    "./utils/JsViewEngineWidget/index.d.ts",
-    "./utils/JsViewVueTools/index.d.ts"
-  ],
-}

package/utils/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./JsViewVueWidget";
-export * from "./JsViewEngineWidget";
-export * from "./JsViewVueTools";

package/utils/index.js

@@ -1,10 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-07-05 14:22:52
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-05 15:07:30
- * @Description: file content
- */
-export * from "./JsViewVueWidget";
-export * from "./JsViewEngineWidget";
-export * from "./JsViewVueTools";