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

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>

package/MediaDemo/components/frames/AudioPoster.vue

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

package/MediaDemo/components/frames/MediaFrame.vue

@@ -1,153 +0,0 @@
-<script>
-import { inject, watch } from 'vue'
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    tagName: String,
-    src: String,
-    style: { type:Object, default: {}},
-  },
-})
-class MediaFrame extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.mediaRef = null;
-
-    this.mediaCtrl = inject('mediaCtrl');
-    this.mediaTime = inject('mediaTime');
-    this.mediaStatus = inject('mediaStatus');
-
-    watch(() => this.mediaCtrl.seek, this.seekMediaStep.bind(this));
-    watch(() => this.mediaCtrl.volume, this.volumeMediaStep.bind(this));
-    watch(() => this.mediaCtrl.playTrigger, this.setPlayPause.bind(this));
-    watch(() => this.mediaCtrl.loadTrigger, this.reload.bind(this));
-  }
-
-  mounted() {
-    this.mediaRef = this.$refs.mediaRef;
-    this.mediaStatus.volume = this.mediaRef.volume;
-  }
-
-  seekMediaStep(timeStep) {
-    if(!this.mediaRef) {
-      return;
-    }
-
-    let playEnd = false;
-    let seekTime = this.mediaRef.currentTime + Math.ceil(timeStep);
-    if(seekTime < 0) {
-      seekTime = 0;
-    } else if(seekTime > this.mediaTime.duration) {
-      seekTime = this.mediaTime.duration;
-      if(this.mediaRef.currentTime != this.mediaTime.duration) { // 触发一次播放，收到ended事件
-        playEnd = true;
-      }
-    }
-    this.mediaRef.currentTime = seekTime;
-    if(playEnd) {
-      this.setPlayPause(true);
-    }
-  }
-
-  setPlayPause() {
-    if(!this.mediaStatus.playing) {
-      this.mediaRef.play();
-    } else {
-      this.mediaRef.pause();
-    }
-  }
-
-  reload() {
-    this.mediaRef.load();
-  }
-
-  volumeMediaStep(volumeStep) {
-    if(!this.mediaRef) {
-      return;
-    }
-
-    let volume = this.mediaRef.volume + volumeStep;
-    if(volume < 0) {
-      volume += 1;
-    }else if(volume > 1) {
-      volume -= 1;
-    }
-    volume = Math.round(volume * 10) / 10; // 保留一位小数
-    this.mediaRef.volume = volume;
-    this.mediaStatus.volume = volume;
-  }
-
-  onErrorEvent(event) {
-    const state = event.type + ": code=" + this.mediaRef.error.code + ", message=" + this.mediaRef.error.message;
-    console.log("MediaFrame.onErrorEvent()", event, state);
-    this.mediaStatus.playState = state;
-  }
-
-  onTimeUpdate(event) {
-    if(!this.mediaRef) { // unmounted
-      return;
-    }
-    // console.log("MediaFrame.onTimeUpdate()", event, this.mediaRef.currentTime);
-    this.mediaTime.currentTime = this.mediaRef.currentTime;
-  }
-
-  onDurationChange(event) {
-    console.log("MediaFrame.onDurationChange()", event.type);
-    this.mediaTime.duration = this.mediaRef.duration;
-  }
-
-  onOtherEvent(event) {
-    console.log("MediaFrame.onOtherEvent()", event.type);
-    this.mediaStatus.playState = event.type;
-    if(event.type == 'playing') {
-      this.mediaStatus.playing = true;
-    } else if(event.type == 'loadstart'
-    || event.type == 'pause'
-    || event.type == 'error') {
-      this.mediaStatus.playing = false;
-    }
-  }
-}
-
-export default MediaFrame;
-</script>
-
-<template>
-<div>
-  <!-- <component :is="tagName"> 可以直接换成<video>/<audio>, -->
-  <!-- 这里是为了统一onEvent处理才这样写                         -->
-  <component :is="tagName"
-    ref="mediaRef"
-
-    :style="style"
-
-    :autoplay="mediaCtrl.autoplay" 
-    :loop="mediaCtrl.loop"
-    :muted="mediaCtrl.mute"
-    :playbackRate="mediaCtrl.playbackRate"
-    :src="src"
-
-    :onabort="onOtherEvent"
-    :oncanplay="onOtherEvent"
-    :oncanplaythrough="onOtherEvent"
-    :ondurationchange="onDurationChange"
-    :onended="onOtherEvent"
-    :onerror="onErrorEvent"
-    :onload="onOtherEvent"
-    :onloadedmetadata="onOtherEvent"
-    :onloadstart="onOtherEvent"
-    :onpause="onOtherEvent"
-    :onplay="onOtherEvent"
-    :onplaying="onOtherEvent"
-    :onseeking="onOtherEvent"
-    :onseeked="onOtherEvent"
-    :onstalled="onOtherEvent"
-    :ontimeupdate="onTimeUpdate"
-  />
-</div>
-</template>
-
-<style scoped>
-</style>

package/MediaDemo/components/frames/VideoFrame.vue

@@ -1,39 +0,0 @@
-<script>
-import { inject } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import MediaFrame from "./MediaFrame";
-
-@Options({
-  components: {
-    MediaFrame,
-  },
-})
-class VideoFrame extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.videoCtrl = inject('videoCtrl');
-
-    this.videoUrl = "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/MediaDemo/components/frames/VideoFrame/neza.mp4";
-  }
-}
-
-export default VideoFrame;
-</script>
-
-<template>
-<MediaFrame
-  tagName="video"
-  :src="videoUrl"
-
-  :style="{
-    ...videoCtrl.layout,
-    visibility: videoCtrl.visibility,
-    objectFit: videoCtrl.objectFit,
-    borderRadius: '80 80 160 240',
-  }"
-/>
-</template>
-
-<style scoped>
-</style>