@shijiu/jsview-vue-samples 1.9.747

package/VideoDemo/components/Button.vue

@@ -0,0 +1,58 @@
+<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/VideoDemo/components/Controllor.vue

@@ -0,0 +1,197 @@
+<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/VideoDemo/components/VideoFrame.vue

@@ -0,0 +1,140 @@
+<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/VisibleSensorDemo/App.vue

@@ -0,0 +1,234 @@
+<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/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@shijiu/jsview-vue-samples",
+  "version": "1.9.747",
+  "license": "MIT",
+  "repository": "system/jsview-framework",
+  "author": "mengxk",
+  "homepage": "http://gitlab.qcast.cn/system/jsview-framework",
+  "bugs": "http://gitlab.qcast.cn/system/jsview-framework/issues",
+  "keywords": [
+    "jsview",
+    "jsview-vue",
+    "jsview-vue-samples"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}