fix: 修复瞬间视频可同时播放多个视频bug、优化列表加载

pages/tabbar/moments/moments.vue

@@ -12,9 +12,9 @@
 				<tm-empty icon="icon-shiliangzhinengduixiang-" label="暂无数据"></tm-empty>
 			</view>
 			<block v-else>
-        <block v-for="(moment, index) in dataList" :key="index">
 				<!-- 卡片 -->
-          <tm-translate v-if="moment.spec.visible==='PUBLIC'" animation-name="fadeUp" :wait="calcAniWait()">
+				<tm-translate v-for="(moment, index) in dataList" :key="moment.metadata.name" animation-name="fadeUp"
+					:wait="calcAniWait(index)">
 					<view class="moment-card">
 						<view class="head" style="display: flex;align-items: center;">
 							<view class="avatar" style="flex-shrink: 0;">
@@ -37,46 +37,39 @@
 								:content="moment.spec.newHtml" :markdown="true" :showLineNumber="true"
 								:showLanguageName="true" :copyByLongPress="true" />
 						</view>
-              <view v-if="moment.images.length!==0" class="images"
-                    :class="['images-'+moment.images.length]">
-                <view class="image-item"
-                      v-for="(image,mediumIndex) in moment.images"
-                      :key="mediumIndex">
+						<view v-if="moment.images.length!==0" class="images" :class="['images-'+moment.images.length]">
+							<view class="image-item" v-for="(image,mediumIndex) in moment.images" :key="mediumIndex">
 								<image mode="aspectFill" style="width: 100%;height: 100%;border-radius: 6rpx;"
-                         :src="image.url"
-                         @click="handlePreview(mediumIndex,moment.images)"/>
+									:src="image.url" @click="handlePreview(mediumIndex,moment.images)" />
 							</view>
 						</view>
 						<view v-if="moment.audios.length!==0" class="mb-12"
 							style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx;padding-right:28rpx;">
-                <audio
-                    v-for="(audio,index) in moment.audios"
-                    :controls="true"
-                    :key="index"
-                    :id="audio.url"
+							<audio v-for="(audio,index) in moment.audios" :controls="true" :key="index" :id="audio.url"
 								:poster="bloggerInfo.avatar"
 								:name="'来自' + (startConfig.title||bloggerInfo.nickname) + '的声音'"
-                    :author="bloggerInfo.nickname"
-                    :src="audio.url"></audio>
+								:author="bloggerInfo.nickname" :src="audio.url"></audio>
 						</view>
 						<view v-if="moment.videos.length!==0" class="mb-12"
 							style="display: flex; flex-direction: column; gap: 12rpx 0;padding: 0 24rpx; ">
-                <video
-                    style="width:100%;height: 400rpx;border-radius: 12rpx;"
-                    v-for="(video,index) in moment.videos"
-                    :key="index" :src="video.url"></video>
+							<video style="width:100%;height: 400rpx;border-radius: 12rpx;"
+								v-for="(video,index) in moment.videos" :key="index" :src="video.url"
+								:id="'video_' + video.id" :show-mute-btn="true" :controls="true"
+								:show-center-play-btn="true" :enable-progress-gesture="true"
+								@play="onVideoPlay(video.id)" @pause="onVideoPause(video.id)"
+								@ended="onVideoEnded(video.id)"></video>
 						</view>
-              <view v-if="moment.spec.tags && moment.spec.tags.length!==0" class="mt-12 px-16 pb-24 flex flex-wrap">
-                <tm-tags
-                    v-for="(tag,tagIndex) in moment.spec.tags" :key="tagIndex"
+						<view v-if="moment.spec.tags && moment.spec.tags.length!==0"
+							class="mt-12 px-16 pb-24 flex flex-wrap">
+							<tm-tags v-for="(tag,tagIndex) in moment.spec.tags" :key="tagIndex"
 								:color="randomTagColor()" size="m" model="text">
 								{{ tag }}
 							</tm-tags>
 						</view>
 					</view>
 				</tm-translate>
-        </block>
-        <tm-flotbutton @click="fnToTopPage" :width="90" size="xs" color="light-blue" :icon-size="24" icon="icon-angle-up"></tm-flotbutton>
+				<tm-flotbutton @click="fnToTopPage" :width="90" size="xs" color="light-blue" :icon-size="24"
+					icon="icon-angle-up"></tm-flotbutton>
 				<view class="load-text">{{ loadMoreText }}</view>
 			</block>
 		</view>
@@ -92,8 +85,12 @@ import tmTags from '@/tm-vuetify/components/tm-tags/tm-tags.vue';
 
 	import MarkdownConfig from '@/common/markdown/markdown.config.js';
 	import mpHtml from '@/components/mp-html/components/mp-html/mp-html.vue';
-import {getRandomNumberByRange} from "@/utils/random.js"
-
+	import {
+		getRandomNumberByRange
+	} from "@/utils/random.js";
+	import {
+		generateUUID
+	} from '@/utils/uuid.js';
 	export default {
 		components: {
 			tmSkeleton,
@@ -115,7 +112,9 @@ export default {
 				dataList: [],
 				isLoadMore: false,
 				loadMoreText: '加载中...',
-      tagColors: ['orange', 'green', 'red', 'blue']
+				tagColors: ['orange', 'green', 'red', 'blue'],
+				videoContexts: {},
+				currentVideoId: null
 			};
 		},
 
@@ -139,18 +138,18 @@ export default {
 			},
 			startConfig() {
 				return this.haloConfigs.appConfig.startConfig;
+			}
 		},
-  },
-
 		onLoad() {
 			this.fnGetData();
 		},
 		onPullDownRefresh() {
 			this.isLoadMore = false;
 			this.queryParams.page = 0;
+			this.videoContexts = {};
+			this.currentVideoId = null;
 			this.fnGetData();
 		},
-
 		onReachBottom(e) {
 			if (this.calcAuditModeEnabled) {
 				uni.showToast({
@@ -220,7 +219,7 @@ export default {
 						this.loadMoreText = res.hasNext ? '上拉加载更多' : '呜呜，没有更多数据啦~';
 						this.hasNext = res.hasNext;
 
-            const tempItems = res.items.map(item => {
+						const tempItems = res.items.filter(x => x.spec.visible === 'PUBLIC').map(item => {
 							item.spec.user = {
 								displayName: this.bloggerInfo.nickname,
 								avatar: this.$utils.checkAvatarUrl(this.bloggerInfo.avatar)
@@ -234,7 +233,10 @@ export default {
 								.filter(x => x.type === 'PHOTO')
 
 							item['videos'] = item.spec.content.medium
-                  .filter(x => x.type === 'VIDEO')
+								.filter(x => x.type === 'VIDEO').map(item => {
+									item.id = generateUUID()
+									return item;
+								})
 
 							item['audios'] = item.spec.content.medium
 								.filter(x => x.type === 'AUDIO')
@@ -246,6 +248,11 @@ export default {
 						} else {
 							this.dataList = tempItems;
 						}
+
+						this.$nextTick(() => {
+							this.createVideoContexts(tempItems); 
+						})
+
 					})
 					.catch(err => {
 						console.error(err);
@@ -269,14 +276,37 @@ export default {
 				const regex = /<a\s+(?:[^>]*?\s+)?class=(['"])[^'"]*?\btag\b[^'"]*?\1[^>]*?>.*?<\/a>/gi;
 				const newHtml = htmlString.replace(regex, '');
 				return newHtml
-      // .replace(/<[^>]+>\s*<\/[^>]+>/g, '')
-      // .replace(/\s+/g, ' ')
-      // .trim();
 			},
 			randomTagColor() {
 				if (!this.calcUseTagRandomColor) return "blue";
 				const randomIndex = getRandomNumberByRange(0, this.tagColors.length);
 				return this.tagColors[randomIndex];
+			},
+			createVideoContexts(list) {
+				this.stopAllVideos()
+				list.map(item => item.videos).flat().forEach(item => {
+					this.videoContexts[item.id] = uni.createVideoContext(`video_${item.id}`, this);
+				})
+			},
+			onVideoPlay(videoId) {
+				this.currentVideoId = videoId;
+				this.stopAllVideos(videoId)
+			},
+			onVideoPause(videoId) {
+				if (this.currentVideoId == videoId) {
+					this.currentVideoId = null;
+				}
+			},
+			onVideoEnded(videoId) {
+				this.currentVideoId = null;
+			},
+			stopAllVideos(excludesVideoId = null) {
+				Object.keys(this.videoContexts).forEach(videoId => {
+					if (!excludesVideoId || excludesVideoId != videoId) {
+						const videoContext = this.videoContexts[videoId]
+						videoContext?.pause();
+					}
+				});
 			}
 		}
 	};
@@ -345,5 +375,4 @@ export default {
 		width: 100%;
 		border-radius: 12rpx;
 	}
-
 </style>

utils/uuid.js

@@ -0,0 +1,16 @@
+
+/**
+ * 生成指定长度的uuid
+ * @param {number} = 长度
+*/
+export function generateUUID(length = 36) {
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  
+  const validLength = Math.max(1, Math.floor(Number(length)) || 36);
+  for (let i = 0; i < validLength; i++) {
+    result += characters.charAt(Math.floor(Math.random() * characters.length));
+  }
+  
+  return result;
+}