@shijiu/jsview-vue 0.9.490 → 0.9.590

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>

package/samples/VideoDemo/components/VideoFrame.vue

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