@shijiu/jsview-vue 0.0.1-beta.0

package/samples/ThrowMoveDemo/UDParabolicDemo.vue

@@ -0,0 +1,122 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-20 18:27:25
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-21 14:07:16
+ * @Description: file content
+-->
+<script>
+import JsvActorMove, {
+  JsvActorMoveControl,
+} from "jsview/utils/JsViewVueWidget/JsvActorMove";
+export default {
+  components: {
+    JsvActorMove,
+  },
+  props: {
+    name: String,
+  },
+  data() {
+    return {
+      direction: 1,
+    };
+  },
+  computed: {
+    directionDetail() {
+      return this.direction < 0 ? "上" : "下";
+    },
+    detail() {
+      return this.direction < 0 ? "向上抛物" : "向下掷物并弹起";
+    },
+  },
+  setup() {
+    let throwControl = new JsvActorMoveControl(); // 抛物运动体控制器
+    let moveControl = new JsvActorMoveControl(); // 平移运动体控制器
+
+    return {
+      throwControl,
+      moveControl,
+    };
+  },
+  methods: {
+    onKeyDown(ev) {
+      let preDirection = this.direction;
+      switch (ev.keyCode) {
+        case 13:
+          this.direction = -this.direction;
+          this.throwControl.throwAlongY(
+            -400 * preDirection,
+            550 * preDirection,
+            {
+              type: "catch",
+              position: 100 * preDirection,
+              direction: preDirection,
+            },
+            (x, y) => {
+              console.log(`Throw end with x=${x} y=${y}`);
+            }
+          );
+          return true;
+      }
+      return false;
+    },
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    autoFocus
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div
+      key="sample1"
+      class="detail-font"
+      :style="{ top: 150, left: 425, width: 430, height: 40 }"
+    >
+      {{ detail }}
+    </div>
+    <div
+      key="DirectText"
+      class="font"
+      :style="{ top: 250, left: 425, width: 430, height: 40 }"
+    >
+      {{ `当前方向:${directionDetail}` }}
+    </div>
+    <div :style="{ top: 590, left: 625 }">
+      <jsv-actor-move key="move" :control="moveControl">
+        <jsv-actor-move key="throw" :control="throwControl">
+          <div
+            :style="{ backgroundColor: '#ffb915', width: 30, height: 30 }"
+          ></div>
+        </jsv-actor-move>
+      </jsv-actor-move>
+    </div>
+  </jsv-focus-block>
+</template>
+
+<style scoped>
+.font {
+  font-size: 32px;
+  color: #73665c;
+  line-height: 40px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+
+.detail-font {
+  font-size: 32px;
+  color: #f7f7eb;
+  line-height: 30px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  text-align: center;
+}
+</style>

package/samples/TransitPage/App.vue

@@ -0,0 +1,41 @@
+<script>
+import { Options, Vue } from "vue-class-component";
+import DemoApp from "../DemoHomepage/App.vue"
+import ActivityApp from "../SimpleWidgetDemo/App.vue" // TODO
+import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+
+@Options({
+  components: {
+     DemoApp, ActivityApp,
+  }
+})
+class TransitPage extends Vue {
+  constructor(props) {
+    super(props);
+    this.showMode = TransitPage.getShowMode()
+  }
+  mounted() {
+    jJsvRuntimeBridge.notifyPageLoaded();
+  }
+
+  static getShowMode() {
+    let showMode = 0
+    // showMode信息可被URL中的?后缀信息替换
+    if (window.location.search.indexOf("showMode=0") >= 0) {
+      showMode = 0;
+    } else if (window.location.search.indexOf("showMode=1") >= 0) {
+      showMode = 1;
+    }
+
+    return showMode;
+  }
+}
+TransitPage.Router = TransitPage.getShowMode() == 0 ? DemoApp.Router : ActivityApp.Router;
+
+export default TransitPage;
+</script>
+
+<template>
+<DemoApp v-if="showMode === 0" />
+<ActivityApp v-else-if="showMode === 1"/>
+</template>

package/samples/VideoDemo/App.vue

@@ -0,0 +1,137 @@
+<script>
+import { provide, reactive, ref, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import Controllor from "./components/Controllor";
+import VideoFrame from "./components/VideoFrame";
+
+@Options({
+  components: {
+    Controllor,
+    VideoFrame,
+  },
+})
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+    this.caption = null;
+    this.useTexture = ref(null);
+    this.videoTime = reactive({
+      currentTime: 0,
+      duration: 0,
+    })
+    this.objectFitTitle = ref(null);
+    this.playStatus = ref('');
+    provide('useTexture', this.useTexture)
+    provide('objectFit', ref(null))
+    provide('videoRect', ref({}))
+    provide('playVideo', ref(null))
+    provide('seekVideo', ref(null))
+    provide('enableAnimation', ref(null))
+    provide('videoTime', this.videoTime)
+    provide('objectFitTitle', this.objectFitTitle)
+    provide('playStatus', this.playStatus)
+    watch(this.useTexture, () => {
+      this.caption = (this.useTexture ? App.Caption.offscreenVideo : App.Caption.normalVideo);
+    });
+  }
+}
+App.Caption = {
+  offscreenVideo: "名称:OffscreenVideo(自动播放）\n"
+                + "功能描述:\n"
+                + "1.离屏视频播放、支持前进/后退控制\n"
+                + "2.支持圆角设置\n"
+                + "3.支持平移、缩放、旋转等动画\n"
+                + "4.支持ObjectFit调整\n",
+  normalVideo: "名称:Video\n"
+             + "功能描述:\n"
+             + "1.视频播放、支持前进/后退控制\n"
+             + "2.支持ObjectFit调整\n",
+}
+
+export default App;
+</script>
+
+<template>
+<div
+    :style="{
+      top: 0, left: 0,
+      width: 1280, height: 720,
+      backgroundColor: 'rgb(222,211,140)'
+    }"
+>
+  <!-- :key="useTexture" => 当useTexture属性变化时，重建VideoFrame -->
+  <VideoFrame
+      :key="useTexture"
+  />
+
+  <!-- :key="useTexture" => JsView bug，当useTexture属性变化时，为了保证显示在VideoFrame前面 -->
+  <div
+      class="caption"
+      :key="useTexture"
+  >
+    {{ caption }}
+  </div>
+  <div>
+    <div class="text status">
+      {{ '播放状态: ' + playStatus }}
+    </div>
+    <div class="text objectFit">
+      {{ objectFitTitle }}
+    </div>
+    <div class="text current">
+      {{ Math.ceil(videoTime.currentTime) }}
+    </div>
+    <div class="text duration">
+      {{ '/' + Math.ceil(videoTime.duration) }}
+    </div>
+  </div>
+  <Controllor class="controllor"/>
+</div>
+</template>
+
+<style scoped>
+.caption {
+  text-align: left;
+  font-size: 24px;
+  line-height: 30px;
+  color: #FFFFFF;
+  left: 10;
+  top: 10;
+  width: 400;
+  height: 180;
+  background-color: rgba(27,38,151,0.8);
+}
+
+.text {
+  color: #FF0000;
+  font-size: 24px;
+  top: 550;
+  width: 60;
+  height: 40;
+}
+.status {
+  left: 50;
+  width: 300;
+}
+.objectFit {
+  left: 800;
+  width: 200;
+  text-align: center;
+}
+
+.current {
+  left: 1060;
+  text-align: right;
+}
+.duration {
+  left: 1120;
+  text-align: left;
+}
+
+.controllor {
+  left: 40;
+  top: 600;
+}
+
+</style>

package/samples/VideoDemo/components/Button.vue

@@ -0,0 +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;
+}
+</style>

package/samples/VideoDemo/components/Controllor.vue

@@ -0,0 +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>

package/samples/VideoDemo/components/VideoFrame.vue

@@ -0,0 +1,152 @@
+<script>
+import { inject, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import JsvVideo from "jsview/utils/JsViewVueWidget/JsvVideo.vue"
+
+@Options({
+  components: {
+    JsvVideo
+  }
+})
+
+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,
+    }
+
+    this.textureAnim = null;
+  }
+
+  mounted() {
+    if(this.canAutoPlay) {
+      this.playVideo = true;
+    }
+  }
+
+  onVideoRef(ele) {
+    this.video = ele;
+  }
+
+  setPlayState(play) {
+    if(play) {
+      this.video?.play();
+    } else {
+      this.video?.pause();
+    }
+  }
+
+  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);
+      }
+    }
+  }
+
+  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;
+    }
+  }
+
+  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;
+  }
+
+  onEvent(event) {
+    console.log("VideoFrame.onEvent()", event);
+  }
+}
+
+export default VideoFrame;
+</script>
+
+<template>
+<div>
+  <div
+      :style="{
+        ...videoRect,
+        backgroundColor: 'rgb(200,100,100)'
+      }"
+  />
+  <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>