@shijiu/jsview-vue-samples 2.3.151-test.0 → 2.3.728-alpha.0

package/DivMetroPerformance/utils/GridPlate.vue

@@ -1,85 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-22 13:47:23
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-11 17:55:55
- * @Description: file content
--->
-<script>
-import GridItem from "./GridItem.vue";
-
-export default {
-  props: {
-    data: Object,
-    height: {
-      type: Number,
-      required: true,
-    },
-    width: {
-      type: Number,
-      required: true,
-    },
-    measures: {
-      type: Function,
-      required: true,
-    },
-  },
-  components: {
-    GridItem,
-  },
-  created() {
-    this.configWidth = this.width;
-    this.configHeight = this.height;
-
-    // 通过measure函数，计算item信息
-    let measure_result = this.measures();
-    let current_line_x = 0;
-    let current_line_y = 0;
-    for (let idx = 0; idx < this.data.length; idx++) {
-      if (current_line_x + measure_result.width > this.configWidth) {
-        // new line
-        current_line_x = 0;
-        current_line_y += measure_result.height;
-      }
-
-      this.itemData.push(
-        Object.freeze({
-          id: idx,
-          xPos: current_line_x,
-          yPos: current_line_y,
-          data: this.data[idx],
-        })
-      );
-
-      // next item x
-      current_line_x += measure_result.width;
-    }
-  },
-  setup() {
-    return {
-      configWidth: 0,
-      configHeight: 0,
-      itemData: [],
-    };
-  },
-  mounted() {},
-  updated() {},
-};
-</script>
-
-<template>
-  <div
-    :style="{ width: configWidth, height: configHeight, overflow: 'hidden' }"
-  >
-    <grid-item
-      v-for="(item, index) in itemData"
-      :key="item.id"
-      :index="index"
-      :data="item"
-    >
-      <template v-slot:renderItem="slotProps">
-        <slot name="renderItem" v-bind="slotProps"></slot>
-      </template>
-    </grid-item>
-  </div>
-</template>

package/MediaDemo/App.vue

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

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

@@ -1,286 +0,0 @@
-<script>
-import { inject } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import { useFocusHub } from 'jsview';
-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);
-  }
-
-  setup() {
-    return {
-      focusHub: useFocusHub()
-    }
-  }
-
-  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 hasNextFocusItem = false;
-    while(true) {
-      newFocusIdx = (newFocusIdx + focusStep + buttonAllCount) % buttonAllCount;
-      if(!buttonData[newFocusIdx]?.name) {
-        if(autoFindNext) {
-          continue;
-        } else {
-          break;
-        }
-      }
-
-      hasNextFocusItem = true;
-      break;
-    };
-
-    if(hasNextFocusItem) {
-      this.focusHub.setFocus('controllor.' + 'btn-' + newFocusIdx);
-      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

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

@@ -1,39 +0,0 @@
-<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 = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/AudioFrame/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>