@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/VideoDemo/components/Button.vue

@@ -1,63 +1,52 @@
-<script>
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    autoFocus: Boolean,
-    name: String,
-    onClick: Function,
-  }
-})
-
-class Button extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.hasFocused = false;
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
+<script setup>
+import { ref } 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;
   }
-
-  onKeyDown(ev) {
-    if(ev.keyCode === 13) { // Enter
-      this.onClick?.();
-      return true;
-    }
-    return false;
-  }
-
-  getAction() {
-    return {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      onKeyDown: this.onKeyDown
-    }
-  }
-}
-
-export default Button;
+  return false;
+};
 </script>
 
 <template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onAction="getAction()"
->
-  <div class="item"
+  <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/>
-  </div>
-</jsv-focus-block>
+    >
+      <slot></slot>
+    </div>
+  </jsv-focus-block>
 </template>
 
 <style scoped>

package/samples/VideoDemo/components/Controllor.vue

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