heshanApp/pages_im/pages/conversation/chating1/components/MessageItem/MediaMessageRender.vue

<template>
	<view class="media_message_container" @click="clickMediaItem">
		<!-- <view :style="{height:wrapperHeight}" class="media_message_container"> -->
		<u--image :showLoading="true" :width="imageLayout.width" :height="imageLayout.height" mode="scaleToFill" :src="getImgUrl" @click="clickMediaItem">
			<template v-slot:loading>
				<u-loading-icon color="#FF5030"></u-loading-icon>
			</template>
		</u--image>
		<image v-if="isVideo" class="play_icon" src="../../../../../static/images/chating_message_video_play.png" alt="" srcset="" />
		<text v-if="isVideo" class="video_duration">{{ getDuration }}</text>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { checkFileIsExist } from '../../../../../util/common';
import { secFormat } from '../../../../../util/imCommon';
import { myPreview } from '../../../../../util/preview';
import { MessageType } from 'openim-uniapp-polyfill';
export default {
	name: '',
	props: {
		message: Object
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['storeCacheMap']),
		isVideo() {
			return this.message.contentType === MessageType.VideoMessage;
		},
		getImgUrl() {
			if (this.isVideo) {
				return this.message.videoElem.snapshotUrl;
			}
			
			return this.message.pictureElem.snapshotPicture?.url ?? this.message.pictureElem.sourcePath;
		},
		getDuration() {
			if (!this.isVideo) {
				return 0;
			}
			return secFormat(this.message.videoElem.duration);
		},
		imageLayout() {
			let width = this.isVideo ? this.message.videoElem.snapshotWidth : this.message.pictureElem.sourcePicture.width;
			let height = this.isVideo ? this.message.videoElem.snapshotHeight : this.message.pictureElem.sourcePicture.height;

			if (!width || !height) return { width: 150, height: 150 };

			const MAX_W = 200;
			const MAX_H = 200;
			const MIN_SIZE = 100;

			let finalWidth = width;
			let finalHeight = height;

			const ratio = width / height;

			// Scale down if larger than max dimensions
			if (finalWidth > MAX_W) {
				finalWidth = MAX_W;
				finalHeight = finalWidth / ratio;
			}
			if (finalHeight > MAX_H) {
				finalHeight = MAX_H;
				finalWidth = finalHeight * ratio;
			}

			// Scale up if smaller than min dimensions
			if (finalWidth < MIN_SIZE && finalHeight < MIN_SIZE) {
				if (ratio > 1) {
					finalWidth = MIN_SIZE;
					finalHeight = finalWidth / ratio;
				} else {
					finalHeight = MIN_SIZE;
					finalWidth = finalHeight * ratio;
				}
			}

			return {
				width: finalWidth,
				height: finalHeight
			};
		}
	},
	methods: {
		async clickMediaItem() {
			if (this.isVideo) {
				const path = this.storeCacheMap[this.message.clientMsgID]?.path;
				const localPath = await checkFileIsExist({
					key: this.message.clientMsgID,
					path
				});
				const previewVideoUrl = localPath || this.message.videoElem.videoUrl;
				
				uni.navigateTo({
					url: `/pages_im/pages/conversation/previewVideo/index?clientMsgID=${this.message.clientMsgID}&previewVideoUrl=${previewVideoUrl}&snapshotUrl=${this.message.videoElem.snapshotUrl}`
				});
			} else {
				const list = this.$store.getters.storePreviewImageList;
				const idx = list.findIndex((item) => item === this.message.pictureElem.sourcePicture.url);
				myPreview(idx, list);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.media_message_container {
	position: relative;
	border-radius: 4rpx;
	overflow: hidden;

	.play_icon {
		width: 30px;
		height: 30px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.video_duration {
		position: absolute;
		bottom: 12rpx;
		right: 24rpx;
		color: #fff;
		font-size: 16px;
	}
}
</style>