jiuyiUniapp/jiuyi/TUIKit/components/TUISearch/search-result/search-result-item/message-abstract/message-abstract-video.vue

71 lines
1.6 KiB
Vue

<template>
<div :class="['message-abstract-video']">
<div class="message-abstract-video-box">
<img
:src="videoUrl"
:class="['video-snapshot']"
>
<Icon
:file="playIcon"
class="video-play"
/>
</div>
</div>
</template>
<script setup lang="ts">
import { computed } from '../../../../../adapter-vue';
import Icon from '../../../../common/Icon.vue';
import playIcon from '../../../../../assets/icon/video-play.png';
import { IVideoMessageContent } from '../../../../../interface';
interface IProps {
messageContent: Record<string, unknown> | IVideoMessageContent | undefined;
}
const props = withDefaults(defineProps<IProps>(), {
messageContent: () => ({}) as IVideoMessageContent,
});
const videoUrl = computed<string>(() => {
return (props.messageContent as IVideoMessageContent).snapshotUrl || (props.messageContent as IVideoMessageContent).url;
});
</script>
<style scoped lang="scss">
@import "../../../../../assets/styles/common";
.message-abstract-video {
max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
overflow: hidden;
background-color: #fff;
&-box {
max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
overflow: hidden;
background-color: #fff;
position: relative;
.video-snapshot {
max-width: 100px;
max-height: 100px;
width: 100px;
height: 100px;
object-fit: contain;
}
.video-play {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 3;
width: 35px;
height: 35px;
margin: auto;
}
}
}</style>