优化chat页面的视频

src/views/im/chat/index.vue

@@ -82,7 +82,18 @@
                     />
                   </div>
                   <!-- 拍摄 -->
-                  <video class="video-message" :isSender="isSender(item)" controls v-else-if="item.contentType === MsgType.MSG_TYPE.VIDEO" :src="item?.localUrl || IM_PATH + item.url"></video>
+                  <div class="video-wrapper" @click="togglePlay($event)" v-else-if="item.contentType === MsgType.MSG_TYPE.VIDEO">
+                    <div v-if="loadingVideo" class="video-loading">
+                      <van-loading size="24px"></van-loading>
+                    </div>
+                    <video
+                      class="video-message"
+                      :isSender="isSender(item)"
+                      :src="item?.localUrl || IM_PATH + item.url"
+                      @loadeddata="onVideoLoaded">
+                    </video>
+                    <van-icon v-if="!loadingVideo" class="play-button" name="play-circle-o" color="#fff" size="30"/>
+                  </div>
 
                   <!-- 语音消息 -->
                   <div class="content" v-if="item.contentType === Constant.REJECT_AUDIO_ONLINE || item.contentType === Constant.REJECT_VIDEO_ONLINE">[对方拒绝]</div>
@@ -358,6 +369,7 @@ const currentMsg = ref('');
 const showActionSheet = ref(false)
 const actions = ref([])
 const chatVideo = ref(false);
+const loadingVideo = ref(true);
 
 // 下拉刷新
 const onRefresh = async () => {
@@ -463,6 +475,25 @@ const insertEmoji = (emoji) => {
   text.value += emoji;
 };
 
+// 视频加载完成
+const onVideoLoaded = () => {
+  loadingVideo.value = false
+}
+
+// 视频播放
+const togglePlay = (e) => {
+  const video = e.target;
+  if (!video || !(video instanceof HTMLVideoElement)) return;
+
+  // 播放/暂停
+  if (video.paused) video.play().catch(() => {});
+  else video.pause();
+
+  // 全屏
+  if (video.requestFullscreen) video.requestFullscreen();
+  else if (video.webkitEnterFullscreen) video.webkitEnterFullscreen(); // iOS
+};
+
 // 预览图片
 const previewImage = (item) => {
   const imageList = wsStore.messages
@@ -1154,10 +1185,9 @@ const goDetail = () =>{
             margin-top: 8px;
           }
           .video-message{
-            margin-top: 8px;
-            width: 200px;
-            height: 200px;
-            // transform: scaleX(-1);
+            width: 120px;
+            height: 150px;
+            object-fit: cover;
           }
         }
       }
@@ -1456,4 +1486,31 @@ const goDetail = () =>{
 :deep(.van-button:before){
   border: none;
 }
+.video-wrapper {
+  margin-top: 8px;
+  position: relative;
+  width: 120px;
+  height: 150px;
+}
+
+.video-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10;
+  font-size: 12px;
+  background-color: black;
+}
+.play-button{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/views/im/detail/index.vue

@@ -399,7 +399,7 @@ const changeDisturb = async () => {
         if(res.code == 200){
             showToast('设置成功');
             wsStore.toUserInfo.slience = res.data;
-            wsStore.updateSessionNewMessage({slience: res.data}, wsStore.toUserInfo.uuid);
+            wsStore.updateSessionNewMessage({slience: res.data,contentType:MsgType.MSG_TYPE.TEXT,content:''}, wsStore.toUserInfo.uuid);
         }else{
             showToast('设置失败');
         }
@@ -418,7 +418,7 @@ const changeStory = async () => {
         if(res.code == 200){
             showToast('设置成功');
             wsStore.toUserInfo.stick = res.data;
-            wsStore.updateSessionNewMessage({stick: res.data}, wsStore.toUserInfo.uuid);
+            wsStore.updateSessionNewMessage({stick: res.data,contentType:MsgType.MSG_TYPE.TEXT,content:''}, wsStore.toUserInfo.uuid);
         }else{
             showToast('设置失败');
         }