feat: 在视频日志组件中添加视频全屏播放功能及操作事件

pages/p2p/videoLog.vue

@@ -59,11 +59,9 @@
                     <view class="font-bold flex justify-between w-full">
                       <view>{{ item.event_type_name }}</view>
                       <view
-                        class="text-sm text-red px-1 py-0.5"
+                        class="i-material-symbols:more-horiz text-#999999 size-45 font-bold"
-                        @click="deleteEvent(item.event_id)"
+                        @click="operateEvent(item.event_id)"
-                      >
+                      ></view>
-                        删除
-                      </view>
                     </view>
                     <view class="text-sm text-#999999 mt-0.5">
                       {{ formatTime(item.event_time) }}
@@ -72,7 +70,17 @@
                       {{ item.text }}
                     </view>
                     <view v-if="item.video !== '' && item.video_expire_at > Date.now() / 1000">
-                      <video :src="item.video" class="w-300"></video>
+                      <video
+                        :id="`video-${item.event_id}`"
+                        :src="item.video"
+                        class="w-300"
+                        @click="playVideoFullscreen(item.event_id)"
+                        @fullscreenchange="onFullscreenChange(item.event_id, $event)"
+                        @play="onVideoPlay(item.event_id)"
+                        @pause="onVideoPause(item.event_id)"
+                        controls
+                        show-fullscreen-btn
+                      ></video>
                       <view class="text-sm text-#999999 mt-1">
                         {{ formatRemainingTime(item.video_expire_at) }}
                       </view>
@@ -121,6 +129,9 @@
   const requestFlag = ref(false)
 
   const deviceInfo = ref(null)
+  const fullscreenVideoId = ref(null)
+  const isFullscreenChanging = ref(false)
+  const currentPlayingVideoId = ref(null)
 
   onMounted(async () => {
     deviceInfo.value = await $basic.getDeviceInfo()
@@ -135,6 +146,17 @@
     }
   })
 
+  const operateEvent = eventId => {
+    uni.showActionSheet({
+      itemList: ['删除'],
+      success: ({ tapIndex }) => {
+        if (tapIndex === 0) {
+          deleteEvent(eventId)
+        }
+      }
+    })
+  }
+
   const toWebview = () => {
     $basic.routeJump({
       name: 'webview',
@@ -343,4 +365,59 @@
     }
     return { code, data, message }
   }
+
+  const playVideoFullscreen = eventId => {
+    if (fullscreenVideoId.value === eventId) {
+      return
+    }
+
+    if (isFullscreenChanging.value) {
+      return
+    }
+
+    if (currentPlayingVideoId.value && currentPlayingVideoId.value !== eventId) {
+      const currentVideoContext = uni.createVideoContext(`video-${currentPlayingVideoId.value}`)
+      currentVideoContext.pause()
+    }
+
+    const videoId = `video-${eventId}`
+    const videoContext = uni.createVideoContext(videoId)
+
+    isFullscreenChanging.value = true
+    currentPlayingVideoId.value = eventId
+    videoContext.play()
+
+    setTimeout(() => {
+      if (fullscreenVideoId.value !== eventId) {
+        videoContext.requestFullScreen({
+          direction: 0
+        })
+      }
+      setTimeout(() => {
+        isFullscreenChanging.value = false
+      }, 500)
+    }, 300)
+  }
+
+  const onFullscreenChange = (eventId, event) => {
+    if (event.detail.fullScreen) {
+      fullscreenVideoId.value = eventId
+    } else {
+      fullscreenVideoId.value = null
+    }
+  }
+
+  const onVideoPlay = eventId => {
+    if (currentPlayingVideoId.value && currentPlayingVideoId.value !== eventId) {
+      const currentVideoContext = uni.createVideoContext(`video-${currentPlayingVideoId.value}`)
+      currentVideoContext.pause()
+    }
+    currentPlayingVideoId.value = eventId
+  }
+
+  const onVideoPause = eventId => {
+    if (currentPlayingVideoId.value === eventId) {
+      currentPlayingVideoId.value = null
+    }
+  }
 </script>