@shijiu/jsview-vue-samples 1.9.888 → 1.9.915

package/MediaDemo/components/frames/MediaFrame.vue

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

@@ -0,0 +1,39 @@
+<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 = "http://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/VideoTestSample/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>

package/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:26:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:10:16
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-16 10:07:30
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({
@@ -19,7 +19,7 @@ const focusHub = useFocusHub();
 
 let focusIndex = ref(0);
 let focused = ref(false);
-let focusBlock = shallowRef(null);
+let focusBlock = ref(null);
 
 const onFocus = () => {
   //onFocus时, 获得焦点, 以处理自己内部的焦点逻辑

package/MetroWidgetDemos/Advanced/widgets/Item.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-11-01 15:30:14
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:11:54
+ * @LastEditTime: 2022-11-02 15:39:17
  * @Description: file content
 -->
 <!--
@@ -13,7 +13,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -21,7 +21,7 @@ const props = defineProps({
   onAction: Object,
 });
 
-const divRef = shallowRef(null);
+const divRef = ref(null);
 const focused = ref(false);
 
 const focusSize = inject("focusSize");
@@ -70,10 +70,10 @@ props.onAction.register("onClick", onClick);
       :style="{
         width: data.width,
         height: data.height,
-        fontSize: '30px',
+        fontSize: 30,
         color: '#FFFFFF',
         backgroundColor: data.color,
-        borderRadius: '10px',
+        borderRadius: 10,
       }"
     >
       {{ data.content }}

package/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +11,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = shallowRef(null);
+const mwRef = ref(null);
 
 const measures = (item) => {
   return item;

package/MetroWidgetDemos/Advanced/widgets/Widgets.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:35:12
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-16 17:40:23
  * @Description: file content
 -->
 <script setup>
@@ -16,7 +16,7 @@ import {
 import { advanceMetroWidget } from "../../data";
 import WidgetItem from "../widgets/WidgetItem.vue";
 import focusImg from "./focus1.png";
-import { ref, shallowRef, reactive, provide } from "vue";
+import { ref, reactive, provide } from "vue";
 
 const focusHub = useFocusHub();
 const showFocus = ref(false);
@@ -26,7 +26,6 @@ const provideData = () => {
 };
 
 const onFocus = () => {
-  console.log("testtest", " widget onfocus");
   showFocus.value = true;
 };
 
@@ -60,57 +59,59 @@ const onEdge = (edgeInfo) => {
 </script>
 
 <template>
-  <div
-    :style="{
-      left: 500,
-      top: 20,
-      width: 500,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
+  <div>
+    <div
+      :style="{
+        left: 500,
+        top: 20,
+        width: 500,
+        height: 400,
+        fontSize: 30,
+        color: '#FFFFFF',
+      }"
+    >
+      {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
+    </div>
+    <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+    <metro-widget
+      name="mwWidget"
+      :top="100"
+      :left="400"
+      :provideData="provideData"
+      :width="660"
+      :height="600"
+      :padding="{ left: 30, right: 30 }"
+      :direction="VERTICAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :onFocus="onFocus"
+      :onBlur="onBlur"
+    >
+      <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
+      <template #renderItem="{ data, query, onAction, onItemEdge }">
+        <widget-item
+          :data="data"
+          :query="query"
+          :onAction="onAction"
+          :onItemEdge="onItemEdge"
+        />
+      </template>
+    </metro-widget>
+    <jsv-nine-patch
+      v-show="showFocus"
+      :style="{
+        width: focusSize.width,
+        height: focusSize.height,
+        top: focusSize.top,
+        left: focusSize.left,
+      }"
+      :imageUrl="focusImg"
+      :imageWidth="55"
+      :centerWidth="1"
+      :borderOutset="13"
+      :imageDspWidth="55"
+      :animTime="0.2"
+      :waitForInit="true"
+    ></jsv-nine-patch>
   </div>
-  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
-  <metro-widget
-    name="mwWidget"
-    :top="100"
-    :left="400"
-    :provideData="provideData"
-    :width="660"
-    :height="600"
-    :padding="{ left: 30, right: 30 }"
-    :direction="VERTICAL"
-    :measures="measures"
-    :onEdge="onEdge"
-    :onFocus="onFocus"
-    :onBlur="onBlur"
-  >
-    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
-    <template #renderItem="{ data, query, onAction, onItemEdge }">
-      <widget-item
-        :data="data"
-        :query="query"
-        :onAction="onAction"
-        :onItemEdge="onItemEdge"
-      />
-    </template>
-  </metro-widget>
-  <jsv-nine-patch
-    v-show="showFocus"
-    :style="{
-      width: focusSize.width,
-      height: focusSize.height,
-      top: focusSize.top,
-      left: focusSize.left,
-    }"
-    :imageUrl="focusImg"
-    :imageWidth="55"
-    :centerWidth="1"
-    :borderOutset="13"
-    :imageDspWidth="55"
-    :animTime="0.2"
-    :waitForInit="true"
-  ></jsv-nine-patch>
 </template>

package/MetroWidgetDemos/Item.vue

@@ -1,12 +1,11 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:12:43
+ * @LastEditTime: 2023-02-10 11:08:44
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -14,7 +13,7 @@ const props = defineProps({
   onAction: Object,
 });
 
-const divRef = shallowRef(null);
+const divRef = ref(null);
 const focused = ref(false);
 
 // 自身的焦点状态自己记录, 通过回调来改变
@@ -58,7 +57,7 @@ props.onAction.register("onClick", onClick);
       :style="{
         width: data.width,
         height: data.height,
-        fontSize: '30px',
+        fontSize: 30,
         color: '#FFFFFF',
         backgroundColor: data.color,
       }"

package/MetroWidgetDemos/PerformanceTest/App.vue

@@ -76,7 +76,7 @@ import { data1, data2, data3 } from "./data";
 import borderImgPath from "./border.png";
 import Item from "./components/ContentItem.vue";
 import MyTab from "./components/MyTab.vue";
-import { ref, shallowRef, onMounted, onBeforeUnmount } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import { useRouter } from "vue-router";
 import {
   VERTICAL,
@@ -90,7 +90,7 @@ const router = useRouter();
 const focusHub = useFocusHub();
 let contentData = data1;
 let requestDataTime = 0;
-const mwRef = shallowRef(null);
+const mwRef = ref(null);
 
 const onKeyDown = (ev) => {
   // 8:Backspace, 27:Escape, 10000:盒子返回键
@@ -195,7 +195,7 @@ onMounted(() => {
 
 <style scoped>
 .rootSize {
-  top: 0px;
+  top: 0;
 }
 
 .widgetPos {

package/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -13,7 +13,7 @@ import couponMid from "../assets/coupon_mid.png";
 import borderLeft from "../assets/line_left.png";
 import borderMid from "../assets/line_mid.png";
 import borderRight from "../assets/line_right.png";
-import { ref, shallowRef, computed } from "vue";
+import { ref, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -314,29 +314,29 @@ const soldTotalText = computed(() => {
 
 <style scoped>
 .frame-background {
-  width: 213px;
-  height: 337px;
-  border-radius: 10px 10px 10px 10px;
+  width: 213;
+  height: 337;
+  border-radius: 10 10 10 10;
   background-color: #f7f7f4;
   transition: transform 0.2s linear;
 }
 
 .poster-holder {
-  width: 213px;
-  height: 213px;
-  border-radius: 10px 10px 0px 0px;
+  width: 213;
+  height: 213;
+  border-radius: 10 10 0 0;
   background-color: #cfcac6;
 }
 .poster {
-  width: 213px;
-  height: 213px;
-  border-radius: 7px 7px 0px 0px;
+  width: 213;
+  height: 213;
+  border-radius: 7 7 0 0;
 }
 
 .title-font {
-  font-size: 21px;
+  font-size: 21;
   color: #73665c;
-  line-height: 29px;
+  line-height: 29;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -345,42 +345,42 @@ const soldTotalText = computed(() => {
 .title-layout {
   top: 221;
   left: 13;
-  width: 193px;
-  height: 29px;
+  width: 193;
+  height: 29;
 }
 .ticket-text {
   height: 24;
   color: #ffffff;
-  font-size: 16px;
+  font-size: 16;
   text-align: center;
-  line-height: 24px;
+  line-height: 24;
 }
 .sold-text {
-  height: 25px;
+  height: 25;
   color: #ff7a00;
-  font-size: 20px;
+  font-size: 20;
   text-align: center;
-  line-height: 25px;
+  line-height: 25;
 }
 .prize-title-layout {
-  width: 35px;
-  height: 24px;
+  width: 35;
+  height: 24;
   top: 296;
   left: 13;
 }
 .prize-title-font {
   color: #de2825;
   text-align: center;
-  font-size: 17px;
-  line-height: 24px;
+  font-size: 17;
+  line-height: 24;
 }
 .prize-font {
   top: 289;
   left: 53;
   width: 158; /*213 - 55*/
-  height: 37px;
-  line-height: 37px;
-  font-size: 28px;
+  height: 37;
+  line-height: 37;
+  font-size: 28;
   color: #de2825;
 }
 </style>

package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:14:11
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-10 11:09:38
  * @Description: file content
 -->
 <script>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 export default {
   props: {
@@ -99,31 +99,31 @@ export default {
 
 <style scoped>
 .text-normal {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
+  width: 200;
+  height: 50;
+  line-height: 50;
   color: #444444;
-  font-size: 25px;
+  font-size: 25;
   text-align: center;
 }
 
 .text-active {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
+  width: 200;
+  height: 50;
+  line-height: 50;
   color: #ffffff;
-  font-size: 25px;
+  font-size: 25;
   text-align: center;
 }
 
 .item-focused {
-  width: 200px;
-  height: 50px;
+  width: 200;
+  height: 50;
   background-color: #008080;
 }
 .item-normal {
-  width: 200px;
-  height: 50px;
+  width: 200;
+  height: 50;
   background-color: #87CECB;
 }
 </style>

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -8,7 +8,7 @@
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "../WidgetItem.vue";
-import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
+import { ref, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {
@@ -24,7 +24,7 @@ const props = defineProps({
   },
 });
 
-const widgetRef = shallowRef(null);
+const widgetRef = ref(null);
 
 const provideData = () => {
   return props.data.data;

package/MetroWidgetDemos/PingPong/TabItem.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -73,7 +73,7 @@ props.onAction.register("onClick", onClick);
       :style="{
         width: data.width,
         height: data.height,
-        fontSize: '30px',
+        fontSize: 30,
         color: '#FFFFFF',
         backgroundColor: data.color,
       }"