@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/MediaDemo/App.vue

@@ -0,0 +1,127 @@
+<script>
+import { provide, reactive, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import AudioFrame from "./components/frames/AudioFrame";
+import VideoFrame from "./components/frames/VideoFrame";
+import Controllor from "./components/Controllor";
+import StatusBar from "./components/StatusBar";
+
+@Options({
+  components: {
+    AudioFrame,
+    VideoFrame,
+    Controllor,
+    StatusBar,
+  },
+})
+
+class App extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.mediaCtrl = reactive({
+      type: 'video',
+      autoplay: true,
+      seek: 0,
+      loop: false,
+      mute: false,
+      volume: 0,
+      playbackRate: 1,
+
+      playTrigger: 0,
+      loadTrigger: 0,
+    })
+    this.mediaTime = reactive({
+      currentTime: 0,
+      duration: 0,
+    })
+    this.mediaStatus = reactive({
+      playState: '',
+      playbackRate: '',
+      objectFit: '',
+      volume: '',
+      playing: false,
+    })
+    this.videoCtrl = reactive({
+      layout: {},
+      objectFit: null,
+      visibility: 'visible',
+    })
+
+    const updateCaption = () => {
+      this.caption = (this.mediaCtrl.type == 'audio' ? App.Caption.audioInfo : App.Caption.videoInfo);
+    };
+    watch(() => this.mediaCtrl.type, updateCaption);
+    updateCaption();
+
+    provide('mediaCtrl', this.mediaCtrl)
+    provide('mediaTime', this.mediaTime)
+    provide('mediaStatus', this.mediaStatus)
+    provide('videoCtrl', this.videoCtrl)
+  }
+
+  static Caption = {
+    videoInfo: "名称: Video\n"
+            + "功能描述:\n"
+            + "1. 播放 / 暂停\n"
+            + "2. 前进 / 后退\n"
+            + "3. 时间 / 时长\n"
+            + "4. 循环 / 静音 / 倍速\n"
+            + "5. ObjectFit调整\n",
+    audioInfo: "名称: Audio\n"
+            + "功能描述:\n"
+            + "1. 播放 / 暂停\n"
+            + "2. 前进 / 后退\n"
+            + "3. 时间 / 时长 / 倍速\n"
+            + "4. 循环 / 静音\n"
+  }
+}
+
+export default App;
+</script>
+
+<template>
+<div
+    :style="{
+      top: 0, left: 0,
+      width: 1280, height: 720,
+      backgroundColor: 'rgb(222,211,140,0.5)'
+    }"
+>
+
+  <AudioFrame v-if="mediaCtrl.type == 'audio'"/>
+  <VideoFrame v-else />
+
+  <!-- :key="mediaCtrl.type" => JsView bug，当mediaCtrl.type属性变化时，为了保证显示在VideoFrame前面 -->
+  <div class="caption" :key="mediaCtrl.type">
+    {{ caption }}
+  </div>
+  <Controllor class="controllor"/>
+  <StatusBar class="statusbar"/>
+</div>
+</template>
+
+<style scoped>
+.caption {
+  text-align: left;
+  font-size: 24;
+  line-height: 30;
+  color: #FFFFFF;
+  left: 40;
+  top: 20;
+  width: 300;
+  height: 210;
+  background-color: rgba(27,38,151,0.6);
+}
+
+.controllor {
+  left: 40;
+  top: 540;
+}
+
+.statusbar {
+  left: 40;
+  top: 650;
+}
+
+</style>

package/MediaDemo/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/MediaDemo/components/Controllor.vue

@@ -0,0 +1,279 @@
+<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.mediaCtrl = inject('mediaCtrl');
+    this.mediaTime = inject('mediaTime');
+    this.mediaStatus = inject('mediaStatus');
+    this.videoCtrl = inject('videoCtrl');
+
+    this.buttonList = this.getButtonList();
+
+    this.playbackRateData = [
+      { name: "1.0", playbackRate: 1.0 },
+      { name: "2.0", playbackRate: 2.0 },
+      { name: "4.0", playbackRate: 4.0 },
+      { name: "0.5", playbackRate: 0.5 },
+      { name: "0.25", playbackRate: 0.25 },
+      { name: "-1.0", playbackRate: -1.0 },
+    ];
+    this.playbackRateIndex = 0;
+
+    this.objectFitData = [
+      { name: "contain-horizontal", objectFit: "contain", width: 1200 },
+      { name: "contain-vertical", objectFit: "contain", width: 400 },
+      { name: "fill", objectFit: "fill", width: 1200 },
+      { name: "cover-horizontal", objectFit: "cover", width: 1200 },
+      { name: "cover-vertical", objectFit: "cover", width: 400 },
+    ];
+    this.objectFitIndex = 0;
+
+    this.buttonRowCount = 7;
+    this.focusedItemIndex = 0;
+  }
+
+  created() {
+    this.setPlaybackRate(0);
+    this.setObjectFit(0);
+  }
+
+  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 focusStep = 0;
+    let autoFindNext = false;
+    switch (ev.keyCode) {
+      case 37: // Left
+        focusStep = -1;
+        autoFindNext = true;
+        break;
+      case 39: // Right
+        focusStep = 1;
+        autoFindNext = true;
+        break;
+      case 38: // Up
+        focusStep = -this.buttonRowCount;
+        break;
+      case 40: // Down
+        focusStep = this.buttonRowCount;
+        break;
+      default:
+        break;
+    }
+
+    const buttonData = this.getButtonData();
+    const buttonAllCount = this.buttonRowCount * 2;
+    let newFocusIdx = this.focusedItemIndex;
+    let nextFocusItem = null;
+    while(true) {
+      newFocusIdx = (newFocusIdx + focusStep + buttonAllCount) % buttonAllCount;
+      if(!buttonData[newFocusIdx]?.name) {
+        if(autoFindNext) {
+          continue;
+        } else {
+          break;
+        }
+      }
+
+      nextFocusItem = ev.ownerNode.findBlockByName('controllor.' + 'btn-' + newFocusIdx);
+      break;
+    };
+
+    if(nextFocusItem) {
+      nextFocusItem.requestFocus();
+      this.focusedItemIndex = newFocusIdx;
+      return true;
+    }
+
+    return false;
+  }
+
+  getButtonList() {
+    const buttonList = [{ 
+        name: "To AudioMode",
+        onClick: () => {
+          this.mediaCtrl.type = (this.mediaCtrl.type == 'audio' ? 'video' : 'audio');
+          this.mediaCtrl.autoplay = true; // 自动播放
+          this.mediaCtrl.mute = false; // 关闭静音
+          this.mediaCtrl.loop = false; // 关闭循环
+          this.mediaTime.currentTime = 0;
+          this.mediaTime.duration = 0;
+          this.mediaCtrl.playTrigger = 0; // 停止并初始化播放
+          this.setPlaybackRate(0);
+          this.setObjectFit(0);
+          this.videoCtrl.visibility = 'visible';
+          if(this.mediaCtrl.type == 'audio') {
+            this.mediaStatus.objectFit = '';
+            this.videoCtrl.visibility = '';
+          }
+ 
+          this.focusedItemIndex = 0;
+        },
+        isModeButton: true,
+      }, {
+        name: "Play",
+        onClick: () => {
+          this.mediaCtrl.playTrigger = ++this.mediaCtrl.playTrigger; /* 为了触发ref更新 */
+        },
+        isPlayButton: true,
+      }, {
+        name: "Rewind <<",
+        onClick: () => {
+          this.mediaCtrl.seek = (this.mediaCtrl.seek !== -10 ? -10 : -10.1/* 为了触发ref更新 */); 
+        }
+      }, {
+        name: "Forward >>",
+        onClick: () => {
+          this.mediaCtrl.seek = (this.mediaCtrl.seek !== +10 ? +10 : +10.1/* 为了触发ref更新 */); 
+        }
+      }, {
+        name: "Reload",
+        onClick: () => {
+          this.mediaCtrl.loadTrigger = ++this.mediaCtrl.loadTrigger; /* 为了触发ref更新 */
+        },
+      }, {
+        name: "Loop Off",
+        onClick: () => {
+          this.mediaCtrl.loop = !this.mediaCtrl.loop;
+        },
+        isLoopButton: true,
+      }, {
+        name: "ObjectFit",
+        onClick: this.setObjectFit.bind(this)
+      }, {
+        // 空，按钮对其用
+      }, {
+        name: "Mute Off",
+        onClick: () => {
+          this.mediaCtrl.mute = !this.mediaCtrl.mute;
+        },
+        isMuteButton: true,
+      }, {
+        name: "Volume",
+        onClick: () => {
+          this.mediaCtrl.volume = (this.mediaCtrl.volume !== 0.2 ? 0.2 : 0.21/* 为了触发ref更新 */); 
+        }
+      }, {
+        name: "Rate",
+        onClick: this.setPlaybackRate.bind(this)
+      }, {
+        name: "Visibility",
+        onClick: () => {
+          this.videoCtrl.visibility = (this.videoCtrl.visibility != 'visible' ? 'visible' : 'hidden');
+        },
+      },
+    ];
+
+    return buttonList;
+  }
+
+  getButtonData() {
+    const buttonWidth = 158;
+    const buttonHeight = 40;
+    const buttonSpacing = 15;
+
+    let data = [];
+    const length = this.buttonList.length;
+    for(let idx = 0; idx < length; idx++) {
+      let button = this.buttonList[idx];
+      if(this.mediaCtrl.type == 'audio'
+      && (button.name == 'ObjectFit'
+      || button.name == 'Visibility')) { // 只有video方式可以做ObjectFit和visibility
+        button = {};
+      }
+
+      data.push({
+        ...button,
+        layout: {
+          left: (buttonWidth + buttonSpacing) * (idx % this.buttonRowCount),
+          top: (buttonHeight + buttonSpacing) * Math.floor(idx / this.buttonRowCount),
+          width: buttonWidth,
+          height: buttonHeight,
+        }
+      });
+    }
+    return data;
+  }
+
+  setPlaybackRate(index) {
+    if(typeof index === 'number') {
+      this.playbackRateIndex = index;
+    } else {
+      this.playbackRateIndex = (++this.playbackRateIndex % this.playbackRateData.length);
+    }
+    const data = this.playbackRateData[this.playbackRateIndex];
+    this.mediaStatus.playbackRate = data.name;
+    this.mediaCtrl.playbackRate = data.playbackRate;
+  }
+
+  setObjectFit(index) {
+    if(typeof index === 'number') {
+      this.objectFitIndex = index;
+    } else {
+      this.objectFitIndex = (++this.objectFitIndex % this.objectFitData.length);
+    }
+    const data = this.objectFitData[this.objectFitIndex];
+    this.mediaStatus.objectFit = data.name;
+    this.videoCtrl.objectFit = data.objectFit;
+    this.videoCtrl.layout = {
+      left: (1280 - data.width) / 2, top: 20,
+      width: data.width, height: 500,
+    }
+  }
+
+  getShowName(item) {
+    if(item.isModeButton) {
+      return this.mediaCtrl.type == 'audio' ? "To VideoMode" : "To AudioMode";
+    } else if(item.isPlayButton) {
+      return this.mediaStatus.playing ? 'Pause' : 'Play'
+    } else if(item.isLoopButton) {
+      return this.mediaCtrl.loop ? 'Loop Off' : 'Loop On'
+    } else if(item.isMuteButton) {
+      return this.mediaCtrl.mute ? 'Mute Off' : 'Mute On'
+    }
+
+    return item.name;
+  }
+}
+
+export default Controllor;
+</script>
+
+<template>
+<div :style="style" :key="mediaCtrl.type + mediaCtrl.loop + mediaCtrl.mute + mediaStatus.playing">
+  <jsv-focus-block namespace="controllor" :onKeyDown="onKeyDown">
+    <div v-for="(item,index) in getButtonData()" :key="index">
+      <Button v-if="item.name"
+          :style="{ left: item.layout.left, top: item.layout.top,
+                    width:item.layout.width, height:item.layout.height }"
+          :autoFocus="index === focusedItemIndex"
+          :name="'btn-' + index"
+          :onClick="item.onClick"
+      >
+        {{ getShowName(item) }}
+      </Button>
+    </div>
+  </jsv-focus-block>
+</div>
+</template>
+
+<style scoped>
+</style>

package/MediaDemo/components/StatusBar.vue

@@ -0,0 +1,100 @@
+<script>
+import { inject } from 'vue'
+import { Options, Vue } from "vue-class-component";
+
+@Options({
+})
+class StatusBar extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.mediaCtrl = inject('mediaCtrl');
+    this.mediaTime = inject('mediaTime');
+    this.mediaStatus = inject('mediaStatus');
+    this.videoCtrl = inject('videoCtrl');
+  }
+}
+
+export default StatusBar;
+</script>
+
+<template>
+<div>
+  <div class="text progress">
+    {{ 'progress:' + Math.ceil(mediaTime.currentTime) + '/' + Math.ceil(mediaTime.duration) }}
+  </div>
+  <div class="text mute">
+    {{ mediaCtrl.mute ? 'muted' : '-' }}
+  </div>
+  <div class="text volume">
+    {{ 'volume:' + mediaStatus.volume }}
+  </div>
+  <div class="text rate">
+    {{ mediaStatus.playbackRate }}
+  </div>
+  <div class="text visibility" :key="videoCtrl.visibility">
+    {{ videoCtrl.visibility }}
+  </div>
+  <div class="text loop">
+    {{ mediaCtrl.loop ? 'looping' : '-' }}
+  </div>
+  <div class="text objectFit" :key="mediaStatus.objectFit">
+    {{ mediaStatus.objectFit }}
+  </div>
+  <div class="text status">
+    {{ 'status: ' + mediaStatus.playState }}
+  </div>
+</div>
+</template>
+
+<style scoped>
+.text {
+  color: #FF0000;
+  font-size: 24;
+  width: 158;
+  height: 40;
+}
+
+.progress {
+  left: 0;
+  width: 300;
+}
+
+.mute {
+  left: 173; /* (158+15)*1 */
+  text-align: center;
+}
+
+.volume {
+  left: 346; /* (158+15)*2 */
+  text-align: center;
+}
+
+.rate {
+  left: 519; /* (158+15)*3 */
+  text-align: center;
+}
+
+.visibility {
+  left: 692; /* (158+15)*4 */
+  text-align: center;
+}
+
+.loop {
+  left: 865; /* (158+15)*5 */
+  text-align: center;
+}
+
+.objectFit {
+  left: 1020; /* (158+15)*6-x */
+  width: 190;
+  text-align: center;
+}
+
+.status {
+  left: 0;
+  top: 30;
+  width: 800;
+}
+
+</style>

package/MediaDemo/components/frames/AudioFrame.vue

@@ -0,0 +1,39 @@
+<script>
+import { inject, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import AudioPoster from "./AudioPoster";
+import MediaFrame from "./MediaFrame";
+
+@Options({
+  components: {
+    AudioPoster,
+    MediaFrame,
+  },
+})
+class AudioFrame extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.mediaStatus = inject('mediaStatus');
+
+    this.audioUrl = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/demo_test.mp3";
+    // is.audioUrl = "http://192.168.1.99/videos/empty.mp3";
+  }
+}
+
+export default AudioFrame;
+</script>
+
+<template>
+<MediaFrame
+  tagName="audio"
+  :src="audioUrl"
+/>
+
+<AudioPoster
+  :playing="this.mediaStatus.playing"
+/>
+</template>
+
+<style scoped>
+</style>

package/MediaDemo/components/frames/AudioPoster.vue

@@ -0,0 +1,48 @@
+<script>
+import { inject, watch } from 'vue'
+import { Options, Vue } from "vue-class-component";
+import posterImgPath from '../../assets/audio-poster.png';
+
+@Options({
+  props: {
+    playing: Boolean
+  }
+})
+class AudioPoster extends Vue {
+  constructor(props) {
+    super(props);
+
+    this.posterImgPath = posterImgPath;
+  }
+
+  onPlayPauseChanged(play) {
+    console.warn('onPlayPauseChanged() ' + play);
+  }
+}
+
+export default AudioPoster;
+</script>
+
+<template>
+<div
+ :style="{
+    left: 380,
+    top: 10,
+    width: 512,
+    height: 512,
+    backgroundImage: posterImgPath,
+    animation: (playing ? 'PosterRotate 6s infinite linear' : null),
+  }"
+/>
+</template>
+
+<style scoped>
+@keyframes PosterRotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>