feat(upload): support video preview (#3741)

* feat(upload): support video preview

* docs: update base library version

Author: anlyyao

site/docs/getting-started.en-US.md

@@ -26,7 +26,11 @@ TDesign MiniProgram already supports using NPM to install third-party packages.
 npm i tdesign-miniprogram -S --production
 ```
 
-> After installation, npm needs to be built in WeChat developer tools: `tool -  build npm`
+> After installation, npm needs to be built in WeChat developer tools: `tool -  build npm`.(If `NPM packages not found` appears during the build, please go to the `project.config.json` file to add the `packNpmManually` and `packNpmRelationList` configuration items. For details, see [NPM Support](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm))
+
+> After the build is successful, check the box `Compile JS to ES5`
+> <br/>
+><img width="200" src="https://tdesign.gtimg.com/miniprogram/docs/getting-started.png" />
 
 ## Modify app.json
 
@@ -78,4 +82,14 @@ Open [WeChat Developer Tools](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools
 
 ## Base library version
 
-Minimum base library version `^2.6.5`
+Minimum base library version `^2.12.0`
+
+### Correspondence between component and basic library versions
+
+| 组件  | API    | 最低基础库 | 描述 |
+| ----- | ------ | ---------- | ---- |
+| Upload | [wx.previewMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewMedia.html) | 2.12.0 | - |
+| Upload | [wx.chooseMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | 2.10.0 | - |
+| Upload | [wx.chooseMessageFile](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html) | 2.5.0 | - |
+| Navbar | [wx.getMenuButtonBoundingClientRect](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) | 2.1.0 | - |
+

site/docs/getting-started.md

@@ -81,4 +81,14 @@ npm run dev
 
 ## 基础库版本
 
-最低基础库版本`^2.6.5`
+最低基础库版本`^2.12.0`
+
+### 组件与基础库版本对应关系
+
+| 组件  | API    | 最低基础库 | 描述 |
+| ----- | ------ | ---------- | ---- |
+| Upload | [wx.previewMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewMedia.html) | 2.12.0 | - |
+| Upload | [wx.chooseMedia](https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseMedia.html) | 2.10.0 | - |
+| Upload | [wx.chooseMessageFile](https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html) | 2.5.0 | - |
+| Navbar | [wx.getMenuButtonBoundingClientRect](https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html) | 2.1.0 | - |
+

src/upload/upload.ts

@@ -56,17 +56,6 @@ export default class Upload extends SuperComponent {
     },
   };
 
-  onProofTap(e: any) {
-    this.onFileClick(e);
-    const { preview } = this.properties;
-    if (!preview) return;
-    const { index } = e.currentTarget.dataset;
-    wx.previewImage({
-      urls: this.data.customFiles.filter((file) => file.percent !== -1).map((file) => file.url),
-      current: this.data.customFiles[index]?.url,
-    });
-  }
-
   handleLimit(customFiles: UploadFile[], max: number) {
     if (max === 0) {
       max = Number.MAX_SAFE_INTEGER;
@@ -87,7 +76,7 @@ export default class Upload extends SuperComponent {
     this.triggerEvent('fail', err);
   }
 
-  onFileClick(e) {
+  onFileClick(e: WechatMiniprogram.BaseEvent) {
     const { file } = e.currentTarget.dataset;
     this.triggerEvent('click', { file });
   }
@@ -226,6 +215,59 @@ export default class Upload extends SuperComponent {
   }
 
   methods = {
+    getPreviewMediaSources() {
+      const previewMediaSources: WechatMiniprogram.MediaSource[] = [];
+      this.data.customFiles.forEach((ele) => {
+        const mediaSource: WechatMiniprogram.MediaSource = {
+          url: ele.url,
+          type: ele.type,
+          poster: ele.thumb || undefined,
+        };
+        previewMediaSources.push(mediaSource);
+      });
+
+      return previewMediaSources;
+    },
+
+    onPreview(e: WechatMiniprogram.BaseEvent) {
+      this.onFileClick(e);
+      const { preview } = this.properties;
+
+      if (!preview) return;
+
+      const usePreviewMedia = this.data.customFiles.some((file: UploadFile) => file.type === 'video');
+      if (usePreviewMedia) {
+        this.onPreviewMedia(e);
+      } else {
+        this.onPreviewImage(e);
+      }
+    },
+
+    onPreviewImage(e: WechatMiniprogram.BaseEvent) {
+      const { index } = e.currentTarget.dataset;
+      const urls = this.data.customFiles.filter((file: UploadFile) => file.percent !== -1).map((file) => file.url);
+      const current = this.data.customFiles[index]?.url;
+      wx.previewImage({
+        urls,
+        current,
+        fail() {
+          wx.showToast({ title: '预览图片失败', icon: 'none' });
+        },
+      });
+    },
+
+    onPreviewMedia(e: WechatMiniprogram.BaseEvent) {
+      const { index: current } = e.currentTarget.dataset;
+      const sources = this.getPreviewMediaSources();
+      wx.previewMedia({
+        sources,
+        current,
+        fail() {
+          wx.showToast({ title: '预览视频失败', icon: 'none' });
+        },
+      });
+    },
+
     uploadFiles(files: UploadFile[]) {
       return new Promise((resolve) => {
         // 开始调用上传函数

src/upload/upload.wxml

@@ -40,7 +40,7 @@
             shape="{{imageProps && imageProps.shape || 'round'}}"
             webp="{{imageProps && imageProps.webp || false}}"
             showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
-            bind:tap="onProofTap"
+            bind:tap="onPreview"
           />
           <video
             wx:if="{{file.type === 'video'}}"
@@ -51,7 +51,8 @@
             autoplay="{{false}}"
             objectFit="contain"
             data-file="{{file}}"
-            bind:tap="onFileClick"
+            data-index="{{index}}"
+            bind:tap="onPreview"
           />
           <!-- 失败重试 -->
           <view
@@ -149,7 +150,7 @@
                 shape="{{imageProps && imageProps.shape || 'round'}}"
                 webp="{{imageProps && imageProps.webp || false}}"
                 showMenuByLongpress="{{imageProps && imageProps.showMenuByLongpress || false}}"
-                bind:tap="onProofTap"
+                bind:tap="onPreview"
               />
               <video
                 wx:if="{{file.type === 'video'}}"
@@ -160,7 +161,8 @@
                 autoplay="{{false}}"
                 objectFit="contain"
                 data-file="{{file}}"
-                bind:tap="onFileClick"
+                data-index="{{index}}"
+                bind:tap="onPreview"
               />
               <!-- 失败重试 -->
               <view