分享界面添加：

图片预览、音乐播放、视屏播放、文本预览
2020-05-27 14:46:56 +08:00 · 2020-05-27 14:46:56 +08:00 · 5f3c13756e
commit 5f3c13756e
parent 40aee7a575
6 changed files with 107 additions and 32 deletions
--- a/src/api/file-api.js
+++ b/src/api/file-api.js
@ -180,7 +180,7 @@ export default {
      params
    })
  },
-  // 访问分享链接里的文件夹
+  // 预览文本文件
  previewText: function(params) {
    return request({
      url: '/preview/text',
@ -188,4 +188,12 @@ export default {
      params
    })
  },
+  // 访问分享的文本文件
+  sharePreviewText: function(params) {
+    return request({
+      url: '/public/s/preview/text',
+      method: 'get',
+      params
+    })
+  },
 }
--- a/src/components/preview/AudioPreview.vue
+++ b/src/components/preview/AudioPreview.vue
@ -48,7 +48,11 @@ export default {
      pic.addEventListener('click', this.onPicClick);
      Bus.$on('onAddAudio',(newFile,audioCoverUrl) => {
        this.show = true
-        let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
+        let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${newFile.name}?jmal-token=${this.$store.state.user.token}&fileIds=${newFile.id}`
+        if(!this.$store.state.user.token){
+          url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${newFile.name}?fileIds=${newFile.id}`
+        }
+        // let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + newFile.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + newFile.id
        let music = newFile.music
        let fileName = newFile.name.substring(0,newFile.name.length - newFile.suffix.length-1)
        let musicOperation = {
--- a/src/components/preview/ImageViewer.vue
+++ b/src/components/preview/ImageViewer.vue
@ -31,6 +31,10 @@
          return {}
        }
      },
+      shareId: {
+        type: String,
+        default: undefined
+      },
      fileList: {
        type: Array,
        default: function () {
@ -54,32 +58,23 @@
        options: {
          initialViewIndex: 3,
          ready: function (e) {
-            console.log(e.type);
          },
          show: function (e) {
-            console.log(e.type);
          },
          shown: function (e) {
-            console.log(e.type);
          },
          hide: function (e) {
-            console.log(e.type);
          },
          hidden: function (e) {
-            console.log(e.type);
            Bus.$emit('updateImageViewerStatus',false)
          },
          view: function (e) {
-            console.log(e.type);
          },
          viewed: function (e) {
-            console.log(e.type);
          },
          zoom: function (e) {
-            console.log(e.type);
          },
          zoomed: function (e) {
-            console.log(e.type);
          }
        },
      }
@ -91,7 +86,10 @@
          let viewIndex = 0
          this.fileList.forEach(element => {
            if(!element.isFolder && element.contentType.indexOf('image') > -1){
-              const url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + element.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + element.id
+              let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${element.name}?jmal-token=${this.$store.state.user.token}&fileIds=${element.id}`
+              if(this.shareId){
+                url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${element.name}?fileIds=${element.id}`
+              }
              this.images.push(url)
              if(this.file.id === element.id){
                viewIndex = this.images.length-1
--- a/src/components/preview/SimTextPreview.vue
+++ b/src/components/preview/SimTextPreview.vue
@ -62,6 +62,10 @@
          return {}
        }
      },
+      shareId: {
+        type: String,
+        default: undefined
+      },
      status: {
        type: Boolean,
        default: function () {
@ -126,7 +130,7 @@
      }
    },
    watch: { //监听file的变化，进行相应的操作即可
-      file: function (a) {
+      file: function (file) {
        this.editorWidth = document.body.clientWidth * this.dialogWidth
        this.editorHieght = document.body.clientHeight * this.dialogWidth - 50

@ -137,7 +141,7 @@
          dangerouslyUseHTMLString: true,
          message: '<span>&nbsp;&nbsp;正在加载数据...</span>'
        })
-        let suffix = a.suffix
+        let suffix = file.suffix

        let languages = monaco.languages.getLanguages();
        const languagesIndex = languages.findIndex(item => item.extensions && item.extensions.includes('.'+suffix))
@ -152,8 +156,14 @@
        }else{
          this.options.wordWrap = ''
        }
-        api.previewText({
-          id: a.id,
+        let request = 'previewText'
+        if(this.shareId){
+          request = 'sharePreviewText'
+        }
+        api[request]({
+          shareId: this.shareId,
+          fileId: file.id,
+          id: file.id,
          username: this.$store.state.user.name
        }).then((res)=>{
            this.loading.close()
--- a/src/components/preview/VideoPreview.vue
+++ b/src/components/preview/VideoPreview.vue
@ -6,7 +6,7 @@
      <video-player class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
-        :options="playerOptions">              
+        :options="playerOptions">
      </video-player>
    </div>
    <div role="button" @click="close" class="viewer-button viewer-close" data-viewer-action="mix"></div>
@ -32,6 +32,10 @@ export default {
          return {}
        }
      },
+      shareId: {
+        type: String,
+        default: undefined
+      },
      status: {
        type: Boolean,
        default: false
@ -43,15 +47,15 @@ export default {
      return {
        playerOptions: {
                    //播放速度
-                    playbackRates: [0.5, 1.0, 1.5, 2.0], 
+                    playbackRates: [0.5, 1.0, 1.5, 2.0],
                    //如果true,浏览器准备好时开始回放。
-                    autoplay: true, 
+                    autoplay: true,
                    // 默认情况下将会消除任何音频。
-                    muted: false, 
+                    muted: false,
                    // 导致视频一结束就重新开始。
-                    loop: false, 
+                    loop: false,
                    // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
-                    preload: 'auto', 
+                    preload: 'auto',
                    language: 'zh-CN',
                     // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    aspectRatio: '16:9',
@ -59,7 +63,7 @@ export default {
                    fluid: true,
                    sources: [],
                    //你的封面地址
-                    poster: '', 
+                    poster: '',
                     //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    notSupportedMessage: '此视频暂无法播放，请稍后再试',
                    controlBar: {
@ -67,17 +71,21 @@ export default {
                        durationDisplay: true,
                        remainingTimeDisplay: true,
                        //全屏按钮
-                        fullscreenToggle: true  
+                        fullscreenToggle: true
                    }
                },
        show: this.status,
        url: '',
-      }  
+      }
    },
    watch: {
      status: function(visible){
        if(visible){
-          let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + this.file.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + this.file.id
+          let url = `${process.env.VUE_APP_BASE_FILE_API}preview/${this.file.name}?jmal-token=${this.$store.state.user.token}&fileIds=${this.file.id}`
+          if(this.shareId){
+            url = `${process.env.VUE_APP_BASE_FILE_API}/public/s/preview/${this.file.name}?fileIds=${this.file.id}`
+          }
+          // let url = process.env.VUE_APP_BASE_FILE_API + 'preview/' + this.file.name + '?jmal-token=' + this.$store.state.user.token + '&fileIds=' + this.file.id
          this.playerOptions.sources = [{
                        //类型
                        type: this.file.contentType,
@ -127,4 +135,4 @@ export default {
 .block {
  width: 900px;
 }
-</style>
+</style>
--- a/src/views/public/share/shareList.vue
+++ b/src/views/public/share/shareList.vue
@ -126,9 +126,9 @@
        </el-table-column>

        <el-table-column v-if="index === 3" :key="index" width="50" :index="index" align="center" header-align="center">
-          <template slot-scope="scope">
-            <svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />
-          </template>
+          <!--<template slot-scope="scope">-->
+            <!--<svg-icon v-if="scope.row.index === cellMouseIndex" class="button-class" icon-class="share" />-->
+          <!--</template>-->
        </el-table-column>

        <el-table-column v-if="index === 4" :key="index" width="50" :prop="item.name" :label="item.label" :index="index" class="el-icon-more" align="center" header-align="center">
@ -211,6 +211,11 @@
      <p v-if="prompt !== ''">温馨提示：</p>
      <p>{{prompt}}</p>
    </div>
+
+    <sim-text-preview :file="textPreviewRow" :shareId="shareId" :status.sync="textPreviewVisible"></sim-text-preview>
+    <image-viewer :fileList="fileList" :shareId="shareId" :file="imagePreviewRow" :status.sync="imagePreviewVisible"></image-viewer>
+    <video-preview :file="videoPreviewRow" :shareId="shareId" :status.sync="videoPreviewVisible"></video-preview>
+
    <el-pagination
      background
      layout="prev, pager, next"
@ -239,8 +244,16 @@
  import IconFile from "@/components/Icon/IconFile";
  import AlLoading from "@/components/loading/AlLoading";

+  import { suffix } from '@/utils/file-type'
+
+  import SimTextPreview from "@/components/preview/SimTextPreview";
+  import ImageViewer from "@/components/preview/ImageViewer";
+  import VideoPreview from "@/components/preview/VideoPreview";
+  import AudioPreview from "@/components/preview/AudioPreview";
+
  export default {
-    components: { IconFile, BreadcrumbFilePath,AlLoading
+    components: { IconFile, BreadcrumbFilePath,AlLoading,
+      AudioPreview, VideoPreview, ImageViewer, SimTextPreview
    },
    data() {
      return {
@ -340,7 +353,15 @@
        generateShareLinkLoading: true,
        shareId: this.$route.query.s,
        currentDirName: '',
-        linkFailed: true
+        linkFailed: true,
+        textPreviewVisible : false,
+        textPreviewRow: {},
+        imagePreviewRow: {},
+        imagePreviewVisible : false,
+        videoPreviewRow: {},
+        videoPreviewVisible: false,
+        audioPreviewRow: {},
+        audioPreviewVisible: false,
      }
    },
    computed: {
@ -865,6 +886,32 @@
          this.$router.push(`/s?s=${this.shareId}&vmode=${this.vmode}`)
          this.accessShareOpenDir(row.id)
        } else {
+          if(row.contentType.indexOf('image') > -1){
+            // 图片
+            this.imagePreviewVisible = true
+            this.imagePreviewRow = row
+            return
+          }
+          if(suffix.simText.includes(row.suffix)){
+            // 文本文件
+            this.textPreviewRow = row
+            this.textPreviewVisible = true
+            return
+          }
+          if(row.contentType.indexOf('video') > -1){
+            // 视频文件
+            this.videoPreviewVisible = true
+            this.videoPreviewRow = row
+            return
+          }
+          if(row.contentType.indexOf('audio') > -1){
+            // 音频文件
+            // this.audioPreviewVisible = true
+            // this.audioPreviewRow = row
+            Bus.$emit('onAddAudio',row, this.audioCoverUrl)
+            return
+          }
+
          // 打开文件
          const fileIds = [row.id]
          const url = process.env.VUE_APP_BASE_FILE_API + '/public/s/preview/' + row.name + '?fileIds=' + fileIds