@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/VideoDemo/components/Button.vue

@@ -1,69 +1,69 @@
-<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;
-  }
-
-  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;
-</script>
-
-<template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onAction="getAction()"
->
-  <div class="item"
-      :style="{
-        ...style,
-        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
-      }"
-  >
-    <slot/>
-  </div>
-</jsv-focus-block>
-</template>
-
-<style scoped>
-.item {
-  text-align: center;
-  font-size: 24;
-  line-height: 40;
-}
+<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;
+  }
+
+  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;
+</script>
+
+<template>
+<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
+  :onAction="getAction()"
+>
+  <div class="item"
+      :style="{
+        ...style,
+        backgroundColor: hasFocused ? '#FFFF00' : '#A8A8A8',
+      }"
+  >
+    <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,195 +1,195 @@
-<script>
-import { inject } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import Button from "./Button.vue";
-
-@Options({
-  props: {
-    style: { type: Object, default: {width:1400,height:50} },
-  },
-  components: {
-    Button,
-  },
-})
-
-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;
-  }
-
-  created() {
-    this.useTexture = true;
-    this.setObjectFit(0);
-    this.playVideo = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整;
-    this.enableAnimation = false;
-  }
-
-  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;
-  }
-
-  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;
-  }
-
-  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;
-  }
-
-  getButtonDataLength() {
-    let length = this.buttonList.length;
-    if(!this.useTexture) { // 只有texture方式可以做animation
-      length -= 1;
-    }
-
-    return length;
-  }
-
-  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,
-    }
-  }
-
-  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;
-  }
-}
-
-export default Controllor;
-</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="(index+10).toString()"
-        :onClick="item.onClick"
-    >
-      {{ getShowName(item) }}
-    </Button>
-  </jsv-focus-block>
-</div>
-</template>
-
-<style scoped>
-</style>
+<script>
+import { inject } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import Button from "./Button.vue";
+
+@Options({
+  props: {
+    style: { type: Object, default: {width:1400,height:50} },
+  },
+  components: {
+    Button,
+  },
+})
+
+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;
+  }
+
+  created() {
+    this.useTexture = true;
+    this.setObjectFit(0);
+    this.playVideo = !window.jsvIsBrowserDebug; // jsview自动播放该视频 TODO h5需做相应调整;
+    this.enableAnimation = false;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  getButtonDataLength() {
+    let length = this.buttonList.length;
+    if(!this.useTexture) { // 只有texture方式可以做animation
+      length -= 1;
+    }
+
+    return length;
+  }
+
+  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,
+    }
+  }
+
+  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;
+  }
+}
+
+export default Controllor;
+</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="(index+10).toString()"
+        :onClick="item.onClick"
+    >
+      {{ getShowName(item) }}
+    </Button>
+  </jsv-focus-block>
+</div>
+</template>
+
+<style scoped>
+</style>