From 503240e5dc8d7eb11ff2ad9b6e4ec26241ca7ec3 Mon Sep 17 00:00:00 2001
From: wanglihui <1769794040@qq.com>
Date: Mon, 11 Sep 2023 23:07:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=E6=96=B0=E5=A2=9E=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E8=A7=86=E9=A2=91=EF=BC=8C=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BdMsg/index.vue | 58 ++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 3 deletions(-)

diff --git a/src/components/BdMsg/index.vue b/src/components/BdMsg/index.vue
index 462cdfa..87b8e87 100644
--- a/src/components/BdMsg/index.vue
+++ b/src/components/BdMsg/index.vue
@@ -5,13 +5,31 @@
       {{ msg['content'] }}
     </span>
     <!-- 图片 -->
-    <img v-else-if="msg.type == 2" class="w-120px" :src="`${url}${msg['url']}`" />
+    <img
+      v-else-if="msg.type == 2"
+      class="w-120px cursor-pointer"
+      :src="`${url}${msg['url']}`"
+      @click="previewPicture(`${url}${msg['url']}`, 'image')"
+    />
     <!-- GIF -->
-    <img v-else-if="msg.type == 3" class="w-120px" :src="`${url}${msg['url']}`" />
+    <img
+      v-else-if="msg.type == 3"
+      class="w-120px cursor-pointer"
+      :src="`${url}${msg['url']}`"
+      @click="previewPicture(`${url}${msg['url']}`, 'image')"
+    />
     <!-- 语音 -->
     <audio v-else-if="msg.type == 4" :src="`${url}${msg['url']}`"></audio>
     <!-- 视频 -->
-    <video v-else-if="msg.type == 5" controls :src="`${url}${msg['url']}`" class="w-220px h-100px"></video>
+    <video
+      v-else-if="msg.type == 5"
+      controls
+      controlsList="nofullscreen nodownload noplaybackrate noremote footbar"
+      disablePictureInPicture
+      :src="`${url}${msg['url']}`"
+      class="w-220px h-100px cursor-pointer"
+      @click="previewPicture(`${url}${msg['url']}`, 'image')"
+    ></video>
     <!-- 位置 -->
     <div v-else-if="msg.type == 6">
       <div>位置标题：{{ msg['title'] }}</div>
@@ -73,6 +91,7 @@
 </template>
 
 <script lang="tsx" name="BdMsg" setup>
+import { Fancybox } from '@fancyapps/ui';
 import '@lottiefiles/lottie-player/dist/tgs-player';
 import { BU_DOU_CONFIG } from '@/config';
 interface IProps {
@@ -80,4 +99,37 @@ interface IProps {
 }
 defineProps<IProps>();
 const url = BU_DOU_CONFIG.APP_URL;
+
+// 图片预览
+const previewPicture = (url: string, type: string) => {
+  const imgList = [];
+  imgList.push({ src: url, defaultType: type });
+  Fancybox.show(imgList, {
+    Toolbar: {
+      display: {
+        left: ['infobar'],
+        middle: ['zoomIn', 'zoomOut', 'toggle1to1', 'rotateCCW', 'rotateCW', 'flipX', 'flipY'],
+        right: ['slideshow', 'thumbs', 'close']
+      }
+    }
+  });
+};
 </script>
+
+<style scoped>
+video::-webkit-media-controls-timeline {
+  display: none;
+}
+video::-webkit-media-controls-mute-button {
+  display: none;
+}
+video::-webkit-media-controls-toggle-closed-captions-button {
+  display: none;
+}
+video::-webkit-media-controls-volume-slider {
+  display: none;
+}
+video::-webkit-media-controls-fullscreen-button {
+  display: none;
+}
+</style>