perf: 优化视频播放器

src/components/preview/VideoPreview.vue

@@ -1,6 +1,6 @@
 <template>
-<div class="preview" v-if="show">
+  <div class="preview" v-if="show">
-<van-overlay :show="show">
+    <van-overlay :show="show">
       <div class="wrapper">
         <div class="block">
           <div class="close-bar" @click="close">
@@ -9,8 +9,8 @@
           <Artplayer @get-instance="getInstance" :option="option" :style="style"/>
         </div>
       </div>
-</van-overlay>
+    </van-overlay>
-</div>
+  </div>
 </template>
 
 <script>
@@ -38,13 +38,14 @@ export default {
       default: false
     }
   },
-    computed: {
+  computed: {},
-    },
   data() {
     return {
       pc: this.$pc,
+      art: null,
       option: {
         url: '',
+        title: '', // 视频标题，目前会出现在 视频截图 和 迷你模式 下
         fullscreen: true,
         fullscreenWeb: true,
         //pip: true, // 是否在底部控制栏里显示 画中画 的开关按钮
@@ -53,7 +54,52 @@ export default {
         aspectRatio: true, // 是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
         screenshot: true, // 是否在底部控制栏里显示 视频截图 功能
         setting: true, // 是否在底部控制栏里显示 设置面板 的开关按钮
+        autoplay: false, // 是否自动播放
+        autoPlayback: true, // 是否使用自动 回放功能
+        theme: '#23ade5',
+        hotkey: true, // 是否使用快捷键
+        controls: [
+          {
+            name: 'iina',
+            position: 'right',
+            tooltip: 'IINA',
+            style: {
+              marginRight: '20px',
             },
+            html: `<a><img style="width: 1.9rem;height: 1.9rem;line-height: 1.9rem" src="${require("@/assets/img/iina.webp")}"></a>`,
+            index: 1,
+          },
+          {
+            name: 'nplayer',
+            position: 'right',
+            style: {
+              marginRight: '20px',
+            },
+            html: `<a href="nplayer-videLink"><img style="width: 1.9rem;height: 1.9rem;line-height: 1.9rem" src="${require("@/assets/img/nplayer.webp")}"></a>`,
+            index: 2,
+          },
+          {
+            name: 'infuse',
+            position: 'right',
+            style: {
+              marginRight: '20px',
+            },
+            html: `<a href="infuse://x-callback-url/play?url=videLink"><img style="width: 1.9rem;height: 1.9rem;line-height: 1.9rem" src="${require("@/assets/img/infuse.webp")}"></a>`,
+            index: 3,
+          },
+          {
+            name: 'copyLink',
+            position: 'right',
+            html: '复制链接',
+            index: 5,
+            style: {
+              marginRight: '20px',
+            },
+            click: () => this.copyToClipboard(this.videoLink),
+          }
+        ],
+      },
+      videoLink: '',
       style: {
         width: '100vw',
         height: '60vh',
@@ -65,24 +111,72 @@ export default {
       playing: false,
     }
   },
+  mounted() {
+    document.addEventListener('keyup', this.escape)
+  },
+  destroyed() {
+    document.removeEventListener('keyup', this.escape)
+  },
   watch: {
-      status: function(visible){
+    status: function (visible) {
-        if(visible){
+      if (visible) {
         this.option.url = fileConfig.previewUrl(this.$store.state.user.name, this.file, this.$store.getters.token)
-          if(this.shareId){
+        if (this.shareId) {
           this.option.url = fileConfig.publicPreviewUrl(this.file.id, window.shareId, this.$store.getters.shareToken)
         }
+        this.videoLink = window.location.origin + this.option.url
+        this.title = this.file.name
         this.option.id = this.file.id
         this.show = true
       }
     }
   },
   methods: {
+    copyToClipboard(text) {
+      const type = "text/plain";
+      const blob = new Blob([text], { type });
+      const data = [new ClipboardItem({ [type]: blob })];
+      navigator.clipboard.write(data).then(
+        () => {
+          this.$message({
+            message: '复制成功',
+            type: 'success',
+            duration: 1000,
+          });
+        },
+        () => {
+          this.$message({
+            message: '复制失败',
+            type: 'error',
+            duration: 1000,
+          });
+        }
+      );
+    },
+    escape(event) {
+      // 监听ESC键
+      if (event.code === 'Escape') {
+        this.close()
+      }
+    },
     close() {
       this.show = false
       this.$emit('update:status', false)
     },
     getInstance(art) {
+      this.art = art
+      art.on('ready', () => {
+        let doc = this.art.controls.$parent
+        // iina
+        const iina = doc.querySelector('[data-index="1"]').querySelector('a');
+        iina.href = `iina://weblink?url=${this.videoLink}`
+        // nplayer
+        const nplayer = doc.querySelector('[data-index="2"]').querySelector('a');
+        nplayer.href = `nplayer-${this.videoLink}`
+        // infuse
+        const infuse = doc.querySelector('[data-index="3"]').querySelector('a');
+        infuse.href = `infuse://x-callback-url/play?url==${this.videoLink}`
+      });
     },
   }
 }
@@ -105,12 +199,10 @@ export default {
   z-index: 1003;
   width: 100%;
   height: 100%;
-    background-color: rgba(0,0,0,.7);
+  background-color: rgba(0, 0, 0, .7);
 }
 
 .block {
-
-
   .close-bar {
     z-index: 2006;
     position: absolute;