优化

src/components/slide/BVideo.vue

@@ -53,8 +53,8 @@
            @touchend="touchend"
       >
         <div class="time" v-if="isMove">
-          <span class="currentTime">{{ $duration(currentTime) }}</span>
-          <span class="duration"> / {{ $duration(duration) }}</span>
+          <span class="currentTime">{{ LUtils.$duration(currentTime) }}</span>
+          <span class="duration"> / {{ LUtils.$duration(duration) }}</span>
         </div>
         <div class="bg"></div>
         <div class="progress-line" :style="durationStyle"></div>
@@ -158,7 +158,7 @@ export default {
       height: 0,
       width: 0,
       isMove: false,
-      isSingleClick: false,
+      ignoreWaiting: false,//忽略waiting事件。因为改变进度会触发waiting事件，烦的一批
       test: [1, 2],
       localItem: this.item,
       progressBarRect: {},
@@ -166,6 +166,7 @@ export default {
       videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
       commentVisible: false,
       isMarginTop: false,
+      LUtils: Utils
     }
   },
   mounted() {
@@ -188,9 +189,10 @@ export default {
 
     let eventTester = (e, t) => {
       video.addEventListener(e, () => {
+        // console.log('eventTester', e, this.item.id)
         if (e === 'playing') this.loading = false
         if (e === 'waiting') {
-          if (!this.paused && !this.isSingleClick) {
+          if (!this.paused && !this.ignoreWaiting) {
             this.loading = true
           }
         }
@@ -283,26 +285,31 @@ export default {
         this.commentVisible = false
       }
     },
-    click(val) {
-      if (this.item.id === val) {
-        if (this.status === SlideItemPlayStatus.Play) {
-          this.pause()
-        } else {
-          this.play()
-          //这里playg事件，触发之后，会马上触发一次waiting事件。就很烦，会出现点完播放之后闪一下loading的情况，所以用一个变量来规避一下
-          // this.isSingleClick = true
-          setTimeout(() => {
-            // this.isSingleClick = false
-          }, 300)
+    click({id, type}) {
+      if (this.item.id === id) {
+        if (type === EVENT_KEY.ITEM_TOGGLE) {
+          if (this.status === SlideItemPlayStatus.Play) {
+            this.pause()
+          } else {
+            this.play()
+          }
+        }
+        if (type === EVENT_KEY.ITEM_STOP) {
+          this.$refs.video.currentTime = 0
+          this.ignoreWaiting = true
+          this.pause()
+          setTimeout(() => this.ignoreWaiting = false, 300)
+        }
+        if (type === EVENT_KEY.ITEM_PLAY) {
+          this.$refs.video.currentTime = 0
+          this.ignoreWaiting = true
+          this.play()
+          setTimeout(() => this.ignoreWaiting = false, 300)
         }
-        this.loading = false
       }
     },
     play() {
       this.status = SlideItemPlayStatus.Play
-      if (this.currentTime !== -1) {
-        this.$refs.video.currentTime = this.currentTime
-      }
       this.$refs.video.volume = 1
       this.$refs.video.play()
     },
@@ -310,9 +317,6 @@ export default {
       this.status = SlideItemPlayStatus.Pause
       this.$refs.video.pause()
     },
-    formatNumber(v) {
-      return Utils.formatNumber(v)
-    },
     touchstart(e) {
       Utils.$stopPropagation(e)
       this.start.x = e.touches[0].pageX
@@ -335,6 +339,7 @@ export default {
       Utils.$stopPropagation(e)
       if (this.isPlaying) return
       setTimeout(() => this.isMove = false, 1000)
+      this.$refs.video.currentTime = this.currentTime
       this.play()
     }
   }

src/pages/slideHooks/VInfinite.vue

@@ -4,7 +4,7 @@ import GM from '../../utils'
 import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
 import {SlideType} from "../../utils/const_var";
 import SlideItem from './SlideItem'
-import bus from "../../utils/bus";
+import bus, {EVENT_KEY} from "../../utils/bus";
 import {useStore} from 'vuex'
 import Utils from "../../utils";
 import Dom from "@/utils/dom";
@@ -91,12 +91,19 @@ watch(
     }
 )
 watch(
-    ()=>props.index,
-    ()=>{
-      // new Dom(this.wrapper).find(`.v-${this.prefix}-${newVal}-video`).trigger('play')
-      // setTimeout(() => {
-      //   new Dom(this.wrapper).find(`.v-${this.prefix}-${oldVal}-video`).trigger('stop')
-      // }, 200)
+    () => props.index,
+    (newVal, oldVal) => {
+      // console.log('watch-index', newVal, oldVal, props.list[newVal].id)
+      bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
+        id: props.list[newVal].id,
+        type: EVENT_KEY.ITEM_PLAY
+      })
+      setTimeout(() => {
+        bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {
+          id: props.list[oldVal].id,
+          type: EVENT_KEY.ITEM_STOP
+        })
+      }, 200)
     }
 )
 

src/pages/slideHooks/index.vue

@@ -335,12 +335,12 @@ function end() {
 
 onMounted(() => {
   getData()
-  bus.on('singleClick', () => {
+  bus.on(EVENT_KEY.SINGLE_CLICK, () => {
     let id = ''
     if (state.navIndex === 4) {
       id = state.recommendVideos[state.itemIndex].id
     }
-    bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, id)
+    bus.emit(EVENT_KEY.SINGLE_CLICK_BROADCAST, {id, type: EVENT_KEY.ITEM_TOGGLE})
   })
   bus.on('update:item', val => {
     const {baseIndex, navIndex, itemIndex} = val.position

src/utils/bus.js

@@ -42,6 +42,7 @@ export default {
 }
 
 export const EVENT_KEY = {
+  SINGLE_CLICK: 'SINGLE_CLICK',
   SINGLE_CLICK_BROADCAST: 'SINGLE_CLICK_BROADCAST',
   ENTER_FULLSCREEN: 'ENTER_FULLSCREEN',
   EXIT_FULLSCREEN: 'EXIT_FULLSCREEN',
@@ -53,4 +54,7 @@ export const EVENT_KEY = {
   DIALOG_END: 'DIALOG_END',
   OPEN_SUB_TYPE: 'OPEN_SUB_TYPE',
   CLOSE_SUB_TYPE: 'CLOSE_SUB_TYPE',
+  ITEM_TOGGLE: 'ITEM_TOGGLE',
+  ITEM_PLAY: 'ITEM_PLAY',
+  ITEM_STOP: 'ITEM_STOP',
 }

src/utils/mixin.js

@@ -15,7 +15,7 @@ import Loading from "../components/Loading";
 import BaseButton from "../components/BaseButton";
 import CONST_VAR from "./const_var";
 import Dom from "./dom";
-import bus from "./bus";
+import bus, {EVENT_KEY} from "./bus";
 import {random} from "lodash";
 
 export default {
@@ -152,7 +152,7 @@ export default {
           } else {
             clickTimer = setTimeout(() => {
               console.log('单击')
-              bus.emit('singleClick')
+              bus.emit(EVENT_KEY.SINGLE_CLICK)
             }, checkTime);
           }
           lastClickTime = nowTime;